Repocompare.io

Repocompare.io is my latest pet project! With this single page application (SPA) you can quickly and easily search and compare Github repositories. If you need a quick and elegant way to compare projects on how many stars, forks, and issues they have, then just visit Repocompare.io and enjoy!

From a technical point of view, this project is built on webpack (and babel) and is using ES6 and JSX (ES2015 to be more precise). The project is based on Facebook’s new beast, React. As a state management, I’m using MobX, and many components and tools from React’s ecosystem, such as React Router and React Autocomplete. The test suite/framework is Facebook’s Jest, which looks and feels really fast. Finally, I used for the very first time CSS modules, a nice implementation of CSS that plays nicely with React’s components.

For those who want to contribute I’ve already set up a project with tasks on Github, so feel free to contribute, especially on the design!

Safari’s HTML5 search input

The safest and easiest way to upgrade your markup to HTML5 is to use the new form input types. They will appear as ordinary text inputs on older browsers, and at the same time they’ll save you tons of work on form validation, and as a bonus they’ll assist your users in filling them (by providing more in-browser features, alternate keyboard layouts and more). This blog theme uses a search input to search the site.

<input id="s" name="s" type="search" />Check out this Pen!

It works great, but unfortunately, Safari’s default search input generates a close button (x) into the input field (while you type). Supposedly this will help the users to view recent search keywords, but if they they decide that they don’t need help, they can just click it and remove everything from list and the input field. I didn’t need this in-browser style for my search input, so after an investigation, I discovered the below solution.

input[type="search"] {
  -webkit-appearance: textfield;
}Check out this Pen!

This rule will transform your search input (with the strange close button) into a typical text field input that you can style properly.