Promises in JavaScript create problems which affect the entire ecosystem. In this blog post I’ll explain some of those problems.

The way this article starts might make you imagine that it was written by someone in a grumpy state of mind who, after several hours swearing at the computer, decided to rant about it on the internet. That’s not at all the case. I was just making my morning coffee in no hurry, when someone asked me on Twitter what is my opinion on Promises. I thought about it while sipping my coffee, then wrote a couple of tweets. Some people thought it would better presented as a blog post, so here we go!

Cryptography can be a hard subject to understand. It’s full of mathematical proofs. But unless you are actually developing cryptographic systems, much of that complexity is not necessary to understand what is going on at a high level.

If you opened this article hoping to create the next HTTPS protocol, I’m sorry to say that pigeons won’t be enough. Otherwise, brew some coffee and enjoy the article.

Any activity you do on the Internet (reading this article, buying stuff on Amazon, uploading cat pictures) comes down to sending and receiving messages to and from a server.

This can be a bit abstract so let’s imagine that those messages were delivered by

The main feature of Autoprefixer 8.0 is Browserslist 3.0. In the new version, it brings new default browsers. It will affect you only if you don’t change browsers by .browserslistrc or browserslist key in package.json (we don’t recommend to use browsers option).

In one hand, Browserslist 3.0 usage statistics limit for default browsers was reduced from >1% to >0.5%. In another hand, we remove dead browsers from default browsers. The dead browser is a browser with < than 1% in the global market and who don’t have security updates. Right now IE 10 and BlackBerry browser are dead browsers.

Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects.

Fonts are vectors, so you don’t have to worry about resolution. They benefit from the same CSS properties as text. As a result, you have full control over size, color, and style. You can add transforms, effects, and decorations such as rotations, underlines, or shadows.

Table of Contents

When you were small, haven’t you ever dreamt of becoming the commander of a space mission? Of exploring outer space and seing the Earth from above? Well, you might not have made it into an actual space shuttle, but maybe you still carry this

The web is constantly evolving and improving over time and there is already so much to learn and much more as time goes by.

For any newcomers, this is pretty scary, and it becomes quickly overwhelming.

I started as a working student in a web agency 2 years ago with no concrete experience and not a clue how real web development was done. My first day, I was excited to discover new things but mostly afraid by the daunting task ahead of me.

The worst part (or best, depending on whether you are a half-full or half-empty glass kind of person) is that the more you discover about the various aspects of web development, the more you realize how little you actually know.

Is it consistency? Enforcing a set of standards and best practices on your code through linter rules and formatters? How about ensuring your code has tests that run automatically during your build process? What about pull requests and code reviews — protecting your master branch from direct commits and having peers review your code?

They’re some of the things that come to mind for me. Automated processes and manual checks. Smart and efficient. Yet, while they’re all useful, they really only address half of the problem.

Automation is crucial for maintaining code quality. Static analysis of your syntax with a linter and automated testing should be mandatory. But I can write code that passes all the automated processes without any guarantee to its actual quality.

When it comes to which programming languages are in demand by employers, JavaScript, Java, Python, C++, and C—in that order—came out on top in a recent developer survey. Developers, however, want to learn languages like Python, Go, and Kotlin.

A survey of developers by technical recruiter HackerRank, conducted in October, found no gap between languages employers want and what developers actually know, with JavaScript barely edging out Java. But as far as which languages developers prefer, Python is the language developers most want to learn—and many already know it, HackerRank found.

HackerRank also queried about which languages developers were planning to learn next. The top languages developers said they will learn were—in order—Go, Python, Scala, Kotlin, and

Regardless of your developer background, it’s inevitable you’ve heard the term Serverless in the past year. The word has been buzzing around in my ears for longer than I dare say. For too long have I been putting off looking into it in more detail. Well here goes nothing.

One of the keys to writing a successful web application is being able to make dozens of AJAX calls per page.

This is a typical asynchronous programming challenge, and how you choose to deal with asynchronous calls will, in large part, make or break your app, and by extension potentially your entire startup.

Synchronizing asynchronous tasks in JavaScript was a serious issue for a very long time.

This challenge is affecting back-end developers using Node.js as much as front-end developers using any JavaScript framework. Asynchronous programming is a part of our everyday work, but the challenge is often taken lightly and not considered at the right time.

You can access paths just like you can link to parts of a website. For example, to get a list of all posts tagged under “JavaScript” on Smashing Magazine, you navigate to https://www.smashingmagazine.com/tag/javascript/. https://www.smashingmagazine.com/ is the root-endpoint and /tag/javascript is the path.

To understand what paths are available to you, you need to look through the API documentation. For example, let’s say you want to get a list of repositories by a certain user through Github’s API. The docs tells you to use the the following path to do so:

/users/:username/repos

Any colons (:) on a path denotes a variable. You should replace these values with actual values of when you send your request. In this case, you should replace

HTML 5.2 has introduced a new <dialog> element for native modal dialog boxes. At first glance, it seems fairly straightforward (and it is), but as I’ve been playing around with it, I’ve found it has some nice features that might be easy to miss.

I’ve embedded a full working demo at the end of this article, but if you want to check it out as you read along, you can see it here.

Here is the markup for a basic dialog box:

<dialog open> Native dialog box! </dialog>

The open attribute means that the dialog is visible. Without it, the dialog is hidden until you use JavaScript to make it appear. Before any styling is added, the dialog renders as follows:

In this post you’ll learn the basics of CSS Flexbox, which has become a must-have skill for web developers and designers the last couple of years.

We’ll be using a navbar as an example, as this is a very typical use case for Flexbox. This will introduce you to its most-used properties of the module, while leaving out the ones which aren’t as critical.

I’m also creating a free course on Flexbox. If you want early access you can leave your email here and I’ll send it to you once it’s ready.

Now let’s get started!

The two main components of a Flexbox layout are the container and the items.

Here’s the HTML for our example, which contains a container with four items:

This book is a balanced, pragmatic look at FP in JavaScript. The first edition is now complete.

"Functional-Light JavaScript" explores the core principles of functional programming (FP) as they are applied to JavaScript. But what makes this book different is that we approach these principles without drowning in all the heavy terminology. We look at a subset of FP foundational concepts that I call "Functional-Light Programming" (FLP) and apply it to JavaScript.

Note: Despite the word "Light" in the title, I do not consider or recommend this book as a "beginner", "easy", or "intro" book on the topic. This book is rigorous and full of gritty detail; it expects a solid foundation of JS knowledge before diving in. "Light" means limited in scope; instead of being more broad, this book goes much deeper into each topic than you typically find in other FP-JavaScript books.

When people think of CSS Grid they normally envision image grid layouts and full web pages. However, CSS Grid is actually a superb technology for laying out articles as well, as it allows you to do things which previously was tricky to achieve.

In this tutorial, I’ll explain how to recreate the famous Medium article layout using CSS Grid.

This article has been inspired by our free CSS Grid course at Scrimba. Check it out here.

We’re going to start off with a basic HTML file, which contains the type of content you’ll typically find in a Medium article. For example: title, paragraphs, subtitles, images, quotes and so forth. Here’s an outtake:

As JavaScript is getting more and more popular, teams are leveraging its support on many levels in their stack - front-end, back-end, hybrid apps, embedded devices and much more.

This post is meant to be the first in a series aimed at digging deeper into JavaScript and how it actually works: we thought that by knowing the building blocks of JavaScript and how they come to play together you’ll be able to write better code and apps.

As shown in the GitHut stats, JavaScript is at the top in terms of Active Repositories and Total Pushes in GitHub. It doesn’t lag behind much in the other categories either.

When I was a 17 year old noob, going to technical college in my home town, I was introduced to a browser called Firebird, which would later be renamed Firefox. I was immediately drawn to this new browser; Firebird was fresh, exuded excitement, but most of all, provided a few developer tools that made learning front-end development easier and more enjoyable. It was then that I knew I need to make it to Mozilla one day.

It took me a decade to get to Mozilla and I couldn't have been more excited, proud, and scared. In my almost six years at Mozilla I've worked on and contributed to a dozen exciting projects, from MDN to Firefox OS to WebVR to the ServiceWorker Cookbook and so on...but I never forgot what made me love that early browser so much, which makes announcing the following so emotional for me:

In the previous two years we covered best practices for writing and operating Node.js applications (read the 2016 edition & 2017 edition). Another year has passed, so it’s time to revisit the topic of becoming a better developer!

In this article, we collected a few tips that we think Node.js developers should follow in 2018. Feel free to pick some development related New Year's resolutions!

Async - await landed in Node.js 8 with a boom. It changed how we handle async events and simplified previously mind-boggling code bases. If you are not yet using async - await read our introductory blog post.

In this tutorial we are going to look at what’s changed with forms and more importantly how to handle form validation the right way with Angular 2.

Forms bring life to our applications. It’s how we capture user input and make our applications useful. For a long time, forms have been difficult to get right. Angular 1.x made it a little easier, but came with its own set of issues and challenges, and some features like sane validation didn’t come until the framework was well into it’s 5th year.

Recently I wanted to deepen my understanding of bash by researching as much of it as possible. Because I felt bash is an often-used (and under-understood) technology, I ended up writing a book on it.

You don’t have to look hard on the internet to find plenty of useful one-liners in bash, or scripts. And there are guides to bash that seem somewhat intimidating through either their thoroughness or their focus on esoteric detail.

Here I’ve focussed on the things that either confused me or increased my power and productivity in bash significantly, and tried to communicate them (as in my book) in a way that emphasises getting the understanding right.

Stimulus is a JavaScript framework with modest ambitions. It doesn't seek to take over your entire front-end—in fact, it's not concerned with rendering HTML at all. Instead, it's designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbolinks to provide a complete solution for fast, compelling applications with a minimal amount of effort.

How does it work? Sprinkle your HTML with magic controller, target, and action attributes:

Everyone in the JavaScript community loves new APIs, syntax updates, and features -- they provide better, smarter, more efficient ways to accomplish important tasks. ES6 brings forth a massive wave of new goodies and the browser vendors have worked hard over the past year to get those language updates into their browser. While there are big updates, some of the smaller language updates have put a massive smile on my face; the following are six of my favorite new additions within the JavaScript language!

1. Object [key] setting syntax

One annoyance JavaScript developers have had for ages is not being able to set a variable key's value within an object literal declaration -- you had to add the key/value after original declaration:

The following is a guest post by David Corbacho, a front end engineer in London. We've broached this topic before, but this time, David is going to drive the concepts home through interactive demos that make things very clear.

Debounce and throttle are two similar (but different!) techniques to control how many times we allow a function to be executed over time.

Having a debounced or throttled version of our function is especially useful when we are attaching the function to a DOM event. Why? Because we are giving ourselves a layer of control between the event and the execution of the function. Remember, we don't control how often those DOM events are going to be emitted. It can vary.

This is a small explainer that I built for a talk on web fonts and performance.

Before we talk about what font-display is, let's talk about the lifetime of a web font. For a super detailed explanation of where web fonts fit in the browser rendering process, Ilya Grigorik has an amazing blog post on web font optimization. But, if we're just trying to understand the basics, there are basically three parts to it:

During the block period, the browser renders your text in an invisible font. This is why on a lot of webfont-heavy websites, during the first load of the page you will see no text or worse, phantom underlines.

And The Winner Is…

Leonardo Losoviz

The optimization techniques presented in Leonardo’s submission are all DIY, designed and implemented from scratch. He added all the optimizations to PoP, an open-source framework to build websites, and used Agenda Urbana to test the performance improvements on an actual project.

We felt this submission really entered into the spirit of the challenge by not only improving the performance of a single website but attempting to make enhancements to a framework used on a number of websites. The fact that PoP is backed by WordPress meant that Leonardo was in a similar situation to many people unable to do some of the things available to a JavaScript framework. As he noted:

Another twelve months have passed and I'm sure all of you have come across some interesting new coding techniques, technologies, CSS tricks (of course!), and other stuff that will make you more productive in 2018.

As some of you might know, I curate a weekly newsletter called Web Tools Weekly, in which I feature dozens of links every week to new tools, mostly focusing on stuff that's useful for front-end developers. So it's an understatement to say that I've come across lots of new tools over the past 12 months.

As I've done in years past, I've put together a brief look at some of my favorite finds in front-end tools.