The console object is a very useful feature of browsers that has been around for many years. It provides access to the browser’s debugging console.
Most web developers know how to print messages to the console using console.log. But I’ve found that many don’t know about other features of the console, even though they can be very useful for every web developer.

In this post, I’ll go over some of these lesser known features and capabilities. I hope that you will find them useful and interesting, and will incorporate them into your day to day workflow and code.

I added a screenshot of the result of each example. If you want to try things for yourself, just open the DevTools and copy-paste the examples. …

If you want to rapidly prototype your next web apps, try using Google Spreadsheets as your data backend.

With a small library I created called get-sheet-done, you can have a free cloud database with GUI editor up and running in less than 5 minutes.

The story behind Get Sheet Done

A while back, I needed to quickly prototype a web app that could display structured data. The catch was that these data had to be frequently edited by a non-technical person.

Since this was a prototype, I was looking for a solution that would give me the most bang for the buck, when taking into account development time and maintenance costs. …

The classic for loop is a widely used feature of javascript programs. It can be used for running any piece of code multiple times, and it used to be what was used for implementing operations on arrays.

A typical for loop would look something like this:

var arr = ['a', 'b', 'c', 'd', 'e'];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

It gets the job done, but nowadays there are alternatives that may be more suitable for operating on arrays, which I’ll refer to as array functions.

These functions, like map, reduce and filter are part of the Array prototype. Some of them have been around for some time and have great browser support (down to IE9).
Some newer array functions like find became standard as part of ES2015 so have less support, but can be very handy.
Depending on your project requirement and setup, you may still want to use them. …

While working on the Barcode Detector Polyfill, I needed to wrap a web worker with a promise based API.

The use of a promise in this case was dictated by the standard proposal, and the use of a web worker was needed because of the heavy calculations that the detector requires.

Web workers have been introduced about 8 years ago so they are really not new, but they are mature and very well supported.

In a nutshell, web workers allow to run code in a separate processing thread, so lengthy computations won’t block the main thread. …

Styled-components is a library for styling React components that took the React world by storm when it was introduced at the end of 2016. The library is powerful and flexible. And solves most of the problems that classic CSS has in the so-called Component Age.

In this post, I’ll look into one aspect of styling components:

How to implement a component that can have multiple visual variants.

And I’ll show you three different ways to achieve this using styled-components, which I call:

1: The Classic Approach

2: The Component Approach

3: The Extending Approach

I’ll assume some knowledge of React and styled-components. But in case you need a reference, both have excellent documentation. You can find React’s docs here and styled-component’s here. …

It has been almost two years since the ES6 standard have been released, and thanks to tools like Babel we didn’t have to wait for browsers support in order to adopt the new standard.
I have to admit that initially some of the new language features seemed weird and unnecessary, but as I started to use them their benefits became clear.
I thought it would be an interesting exercise to review the new features and list the ones that I use the most as JS developer (of course, your list could be different..).

Each section title links to the relevant MDN documentation, and I tried to add a short example for each feature that showcases its benefits. …