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!

My first npm module

Finally, I found the time to update the Greek in Tech site and create my very first npm package! The idea was to extract all the entries from the backbone single page application, create a very simple API for all these data / entries and distribute them as an npm package. That way, I could easily use it as a dependency to the SPA site, with all the benefits of an npm module like reusability, easier maintenance, single responsibility etc.

You can still contribute entries on the package’s official repository learn more about it from its official npm page (yes the package’s name is still greek-in-tech). Feel free to use it on your own projects and star it if you like it!

React Boilerplate

Hi all, after the very successful Gulp boilerplate for web designers and Grunt boilerplate for web designers, I’m very pleased to announce my React boilerplate (it’s as designers friendly as it can be).

It comes with ES6 and ESlint out of the box, and with a webpack configuration that you can actually understand and built on top of it. Feel free to fork, download and play with it!

Avoid CoffeeScript & use ES6!

Those of you that follow my blog might have noticed how fond I am to some of CoffeeScript’s conveniences. They are excellent, but it’s time to leave them behind and start using ES6. Most of CoffeeScript’s goodies already exist in ES6 (with some syntax changes), and your code is guaranteed to be future proof. And if time spent learning CoffeeScript feels like a waste, there’s good news – with a solid CoffeeScript base, transitioning to ES6 will be a piece of cake!

Gulp boilerplate for web designers

Two weeks ago, I published a Grunt.js boilerplate with common tasks for web designers. This week I’m trying out the new kid on the block, gulp. Gulp is also a node-based task manager, but it works a bit different than Grunt. It works with streams and pipes, making it very fast and easy to understand. I strongly recommend you have a look at this eye-opening presentation on gulp to better understand how it works and why it’s here to stay.

My gulp boilerplate has more or less the same features as my Grunt boilerplate. To mention a few :

If you want to learn more about how gulp works, feel free to have a look at the repository. Also if you have any recommendations or comments feel free to pull, fork, star etc. 😉

Grunt boilerplate for web designers

Hi all, I’m very happy to announce my first grunt project that will definitely help you if you are a web designer. What I tried to accomplish was to build a grunt task list that will provide much of the CodeKit functionality and convenience by running simple grunt tasks (commands). Some of the features the grunt tasks provide are listed below:

  • SMACSS (Scalable and Modular Architecture for CSS) ready infrastructure
  • Compile Sass files
  • Compass and Burbon support
  • JsLinter
  • CSS, JS and HTML minification
  • Image optimization
  • Live-reload

Have a look at the official repository and don’t hesitate to contact me for any suggestions/thoughts. More details on how to use it will be provided on an upcoming screencast (stay tuned). Also feel free to contribute, fork, star etc 😉

Developer Tools and Console tips

You can save a huge amount of time simply by learning to use the development tools (all modern browsers have them). Below I’m demonstrating some nice tricks that I’m sure will help you. Keep in mind that the browser I use for development is Chrome (Chromium to be precise), so some tips might not work if you use the dev tools of another browser.

Select element(s) without jQuery

You can select any element by using the dollar sign selector ($('a') ) even if you don’t have jQuery available on the document! This convention is using the document.querySelector under the hood (for example document.querySelector('a')), so it returns only the first matched element.

If you want to select multiple elements you can use the double dollar sign selector ( $$(‘a’) ) which returns an array of matched elements. The specific convention is using the document.querySelectorAll (for example document.querySelectorAll('a')).

Keep in mind that you can use any valid selectors like #ids, .classes, etc., depending your browser’s CSS selectors capabilities.

Console.log objects

It’s a bit frustrating when you try to log an object, only to get the already useless output [object Object]. Well, try using a comma (,) instead of the plus sign (+). You can also log multiple items if you like…

Console.log the event listeners of an element

This function will save you tons of working hours! Just pass the element you want to check at the getEventListeners() function, and voila, the console logs all the events of the element.

Monitor every single event fired on an element

A very similar method that logs every single event triggered is the monitorEvents() function. It works just like the above function, simply pass the element you want to track and you are ready to go! If this function is driving you crazy (as I explained, it logs everything), you can limit the events you log by passing a string or an array of strings with the events you want to log. Don’t forget to run the unmonitorEvents() function to stop the logging otherwise the browser will continue logging your events!

Log arrays in beautiful tables using the console.table

If you want to log arrays in a more beautiful and useful way, then simply try the console.table() function.

Log all properties of an element

By passing an element to the dir() function you can log all the properties of that element (identical to the view that you would see in the DOM panel).

Get element’s tagname using DOM’s tagName property

A couple of weeks ago I posted how can you get an element’s tagname using jQuery’s .prop() method. A simpler alternative could be the below code :

See the Pen Get element’s tagname using DOM’s tagName property by John Tsevdos (@tsevdos) on CodePen

The .get() method (don’t confuse this method with the jQuery’s AJAX .get(), they are completely different) retrieves the DOM element and then we simply get it’s tagName property (and convert it to lowercase). We can even retrieve the DOM element from a jQuery array using the below syntax (without the .get() method) and have the exact same result.

See the Pen Get element’s tagname using DOM’s tagName property by John Tsevdos (@tsevdos) on CodePen

I believe that the above method is easier and faster than the previous one.

jQuery element’s tag name

Getting the selected element’s tag name is very easy in jQuery. Just use the below code.

See the Pen jQuery element’s tag name by John Tsevdos (@tsevdos) on CodePen

Keep in mind that by default the returned tag’s name is capitalized so if you want it lowercase you’ll need this :

See the Pen jQuery element’s tag name by John Tsevdos (@tsevdos) on CodePen