Image for post
Image for post
Source: https://pxhere.com/en/photo/669444

TL;DR

Use git, use ESLint, write unit tests.
Want to know the reasoning behind each tool? Keep reading!

Introduction

Whether you are starting out as a developer or already have some experience, improving your coding skills is an ongoing endeavour. But what does it mean to be a better coder?

While there are many ways to solve a problem with code, some of them are better than others. As Robert Martin wrote:

Even bad code can function. But if code isn’t clean, it can bring a development organization to its knees.

Good code doesn’t just work. It is also easy to maintain and reuse. That means that others (or the future you) can understand this code easily, which in turn allows them to solve bugs, add features and refactor it faster and without degrading the whole application.
As such, code quality has a big impact on the happiness of everyone involved with the project: engineers, managers, product people and even endusers. …


Image for post
Image for post
An old console

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …

About

Gilad Dayagi

Technology, software and life-hacking http://gilad.dayagi.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store