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 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!

Extending Class methods with Module Mixins

I’m about to finish the Eloquent Ruby book (excellent book by the way) and keep finding ruby pearls of wisdom. One of these is that you can actually use module mixins to extend class methods! You only need to declare a module mixin as normal, and then include it on the singleton class of your declared class (“Klass” in our example).

Then we can use it just like any other class method.

Ruby tips

I just read the Ruby Pocket Reference, a great intro for the Ruby language and want to share a few helpful Ruby tips learned.

Parallel assignment of variables

In Ruby, you can assign several values to several variables in a single expression (aka. one-liner). The values can be of any type, making it even better! The result is pretty impressive, check out the snippet below :

You can even return multiple values from methods!

And in case the above example didn’t quite impress you, see how convenient it can be on a real-world example :

Here Documents

You can build multiple line strings using here documents. Ruby supports both single and double-quoted strings on here documents, have a look at the examples :


Ruby supports ranges of numbers which can be very handy. You can define a range of numbers using the starting value followed by .. (2 dots) or ... (3 dots) and the end value. On the first case the range includes the last value, and on the other one excludes it. For example :

Ranges can be used in many cases such as :



and creating arrays

Default arguments

Another great feature!

block_given? on yields

A yield statement executes a code block associated with a method. You probably know that already (if not have a look at the examples below), what you probably don’t know is the block_given? method that checks if a code block is passed to the method.

Case statement tricks

Case staments in Ruby are very flexible. They come in two main flavors, multiline for writing many statements and one-liners, that looks much better:

You can also assign a value using the case statement in Ruby:

Usefull object instance methods

As a final tip, I enlist the most useful public methods of the Object class (the base class for Ruby, all other types inherit these methods). All of them are helpful, but I tend to use the debugging-oriented ones the most :

  • obj.inspect
  • obj.class
  • obj.ancestors
  • obj.instance_variables
  • obj.methods (also obj.private_methods, obj.protected_methods and obj.public_methods can be handy as well)
  • obj.to_s (sometimes obj.to_a can be handy as well)

Not bad for an introductory Ruby book. If you like the post stay tuned for more!

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!

Coffeescript gotchas (part 4): Scope and Objects

This is the fourth and final part of the CoffeeScript gotchas series. On this part I’ll demonstrate Coffeescript’s syntactic sugar on Objects, constructors and classes! Ready, set, go…

Update: Table of contents


Probably the most valuable feature that CoffeeScript syntax offers at the moment. With the class keyword you can create a new class (CoffeeScript is using the constructor function under the hood) and with the extend keyword you can extend one. To make things even easier, CoffeeScript provides an initialization (aka constructor) function, in case you need it. Just use the contstructor method and you are ready to go. You can use the concept of super method which represents a reference to the superclass version of the method you’re in (very Ruby-like). I’m sure that all these will make more sense with the following example…

class Animal
  constructor: (@name) ->
  move: (meters) ->
    console.log "#{@name} moved #{meters} meters."

class Snake extends Animal
  move: ->
    console.log "Slithering..."
    super 5

class Horse extends Animal
  move: ->
    console.log "Galloping..."
    super 45

sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"


See the Pen Coffeescript gotchas (part 4): Classes by John Tsevdos (@tsevdos) on CodePen.


You can set up instance variables with the classic this Javascript keyword (CoffeeScript translates to Javascript after all), but you can save a couple of characters and maybe lines, by using the @ symbol. You can also save a couple of more lines by omitting the instance name.

class Animal
  constructor: (name, height, weight) ->
    @name = name
    @height = height
    @weight = weight

# same as above
class Animal
  constructor: (@name, @height, @weight) ->

See the Pen Coffeescript gotchas (part 4): Constructors by John Tsevdos (@tsevdos) on CodePen.


Finally, if you want to pass an instance method as a callback, use the =>, also known as “fat arrow”. The “fat arrow” binds the object’s instance to this and makes your code easier to read. This will also be an ES6 feature, so it makes a lot of sense to get used to it.

class Message
  constructor: (@txt) ->
  thin: -> console.log @txt
  fat:  => console.log @txt

msg = new Message "yo"
msg.thin() # works
msg.fat()  # works

fn = (callback) -> callback()

fn(msg.thin) # => "undefined"
fn(msg.fat)  # works
fn(-> msg.thin()) # works

See the Pen Coffeescript gotchas (part 4): Scope by John Tsevdos (@tsevdos) on CodePen.

This has been the final part of the series – see you around and stay tuned.

Coffeescript gotchas (part 3): Switch statement and loops

Welcome to the third part of Coffeescript gotchas. If you haven’t yet read the first and second part of the series I strongly recommend to have a look. The main topic today is loops plus the switch statement. CoffeeScript offers a lot of enchantments and syntactic sugar to them.

Update: Table of contents

Switch statement

At last, an easier way to write switch statements. If your switch case contains a single line of code, you can write the entire thing in a single line using the then keyword (see second example).

name = "John"

# normal switch statement
switch name
  when "John"
    console.log "This guy rocks!"
  when "Jon"
    console.log "Still cool guy"
    console.log "Good lad."
# switch statement using the then keyword
switch name
  when "John" then console.log "This guy rocks!"
  when "Jon" then console.log "Still cool guy"
  else console.log "Good lad."

See the Pen Coffeescript gotchas (part 3): switch statement and loops by John Tsevdos (@tsevdos) on CodePen.

For Loops

For loops have many flavors and great potential in CoffeeScript. You can loop through arrays and objects and still keep your code clean and hassle-free. Just take a deep breath and try to absorb as many flavours as you can. They can all come very handy.


Iterating Arrays have never been easier…

arr = ["Ned Stark", "Jon Snow", "Arya Stark", "Jaime Lannister"]

# basic array iteration
for name in arr
    console.log name

# array iteration (with index)
for name , i in arr
    console.log "#{i}: #{name}"

# array filtering (with index)
for name, i in arr when name.indexOf "J" is 0
    console.log "#{i}: #{name}"

# array iteration for every second item
for name , i in arr by 2
    console.log "#{i}: #{name}"

See the Pen Coffeescript gotchas (part 3): switch statement and loops by John Tsevdos (@tsevdos) on CodePen.


Looping through an object’s key/value pairs is also very easy. You can also loop through just the direct key/value pairs (not the inherited ones) by using the own keyword (which will use the hasOwnProperty method under the hood).

ned =
  name : "Ned Stark"
  house : "Stark"
  words : "Winter is coming"

# print all properties of an object
for key, value of ned 
  console.log "#{key} : #{value}"

# print all own properties of an object
for own key, value of ned
  console.log "#{key} : #{value}"

See the Pen Coffeescript gotchas (part 3): switch statement and loops by John Tsevdos (@tsevdos) on CodePen.

While Loops

The while loop has 3 syntax flavors to make your code more descriptive and your life easier. Try to use unless instead of while not, as it’s easier and preferable.

# Normal while
num = 10
while num
  console.log num

# while not
num = 10
while not (num is 0)
  console.log num

# exactly the same as the above example
num = 10
until num is 0
  console.log num

See the Pen Coffeescript gotchas (part 3): switch statement and loops by John Tsevdos (@tsevdos) on CodePen.

As you can see CoffeeScript is very handy when it comes to loops. Keep in mind and stay tuned for the fourth and final part of the Coffeescript gotchas series where we’ll have a look at the syntactic sugar that CoffeeScript provides on Scope and Objects.