Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

Pairify - how to match balanced string pairs

posted in JavaScript on 2020-03-11   pairify balanced matches javascript pairs decided type stack line starter token code const position function category https

I'm now actively working on a VSCode extension. I started it as a theme but then decided to add some more features. Like for example a tin line on the left side of the editor marking the current function scope. In order to do that I had to analyze the current file's code and find the lines that are included in that scope. The obvious approach will be to translate the code to AST and then traverse the tree finding the information that I need. This however will require the usage of a language server which now I don't want to deal with. So I decided to explore a brute force approach. Looping over the string characters and finding balanced matches. I quickly wrapped it into a library. I called it Pairify. It consumes text and returns an array of pairs. This blog post will show you how it works.

read more

forEach or not to forEach

posted in JavaScript on 2019-04-12   array foreach item component update react iteration position remove state

I had an interesting bug in my React application. It happened that the problem was in the fact that I was using forEach instead of for.

The bug that I was encounter was

read more

Meet the JavaScript pattern of the year or how to handle async like a boss

posted in JavaScript on 2017-11-24   generator player function result return position error const console log yield call player

Sometimes when you learn something new you get really excited. Excited to that level so you want to teach it to someone. That is the case with the concept which I found a couple of months ago. It is an implementation of the command pattern using generators. Or the well known saga used in the redux-saga library. In this article we will see how the idea makes our asynchronous code simpler and easy to read. We will also implement it ourself using generators.

read more

Look ma, JavaScript only Off-Canvas menu

posted in JavaScript on 2014-03-25   menu content css links function html position absurdjs isopen

The off-canvas menu is pretty popular nowadays. You know, the little button in the right upper corner which opens the navigation with a slide-in effect. That's what we are going to build in this article. The interesting things is that we are not going to use CSS neither HTML, only JavaScript.

read more

The power of inherit or how to animate pseudo elements

posted in CSS3 on 2013-08-27   box inherit pseudo background position 15px left div doesn t top move text

Luckily, I have time to watch screencasts from various conferences. Last few weeks I'm watching videos from Fronteers2012. They are all great and it worths checking out. However, there is something which I found really interesting. It's about animating pseudo elements.

read more