Blog

Here we share our experiences, ideas, tips, and thoughts on React, Angular, Industry in general, and some other things.

Later Ctrl + ↑

Addy Osmani on Flame Charts

Ilya Gelman

When it comes to optimizing performance, flame chart is a powerful tool for profiling that provides insights on the application performance.

In this short video Addy Osmani shows how to work with this feature of Chrome DevTools.

On Thursdays we post videos that we believe are worth watching and that can make you a better front-end developer. Have such a video to share? Share with us

Where to Start Learning React

Ilya Gelman

React is a mature library with a vast ecosystem. Therefore there is a plethora of resources available from short blog posts to paid online courses. It is easy to get lost there, especially if you can’t assess the quality. However, you don’t need much to get a good basic knowledge.

Before you start learning React though, it is essential to have a good JavaScript knowledge and understanding. React doesn’t come with custom templating language and has very few APIs. Most of the time you are using pure JavaScript.

When learning React, most questions people have are actually related to JavaScript. Questions like “why can’t I use `this` in class method” or “why can’t I use if statement in JSX” are more common than “what does this specific lifecycle event does”.

Another tip: do not rush and try to learn React together with Redux (or MobX). I’ve seen a lot of tutorials that teach both from the get go, and as much as I love Redux (even wrote a book about it), I think it is very important to understand React first before working with either Redux or MobX. Developers that tend to do so, often fail to realize that the magic behind the connect() function from react-redux is just this.setState().

There are a lot of lists of the top resources for learning React, but in fact, you don’t need much. See for yourself:

Read the Documentation

As obvious as it sounds, surprisingly many people still don’t think of the official docs as the primary resource for learning React. They may not have been the best source in the early days, but they have been rewritten and are actually pretty good now.

Free Video

There are many great courses on Egghead.io, but I would recommend starting with the one by Joe Maddalone’s course Start Learning React followed by Nik Graf’s one on new features of React 16.

Free Book

If you prefer to learn from a good book, take a look at Robin Wieruch’s The Road to Learn React. Surprisingly, many parts of this book are about JavaScript, and he explains a lot of concepts in an easy way.

As you can see, you don’t need a lot of resources to grasp the basics of React. Obviously, it is not enough to become a good developer, but having a good base would allow you to learn other things much faster and make fewer mistakes.

Useful Tool: Octotree

Ilya Gelman

Sometimes when looking at some project’s source code on GitHub, it is hard to navigate and find files without cloning the whole repository.

Buu Nguyen has built a great tool to solve this problem: Octotree. We use it when we look and work with open-source libraries.

Octotree is a browser extension that scans the project on GitHub and shows its file structure in tree format that is easy to navigate. This way you can explore any project contents and jump between files instantly. Working with third-party libraries is now more efficient.

Get it here

Lea Verou on Regular Expressions

Ilya Gelman

Regular expressions are a very powerful thing and a lot of junior developers struggle to wrap their heads around it and remember the syntax.

In her talk from Fluent Conference 2012, Lea Verou explains Regular Expressions in JavaScript in a very interactive and interesting way.

There is a library called Verbal Expressions that allows you to describe regular expressions in an expressive way (no pun intended). There are implementations in various languages, in JavaScript it looks something like this:

VerEx()
    .startOfLine()
    .then('http')
    .maybe('s')
    .then('://')
    .maybe('www.')
    .anythingBut(' ')
    .endOfLine();

The above code will compile into this RegExp:

/^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$/

On Thursdays we post videos that we believe are worth watching and that can make you a better front-end developer. Have such a video to share? Share with us

P.S. Remember, never try to parse html with regular expressions!

Earlier Ctrl + ↓