Build tools have become a necessary component in the workflow for modern web applications. I have previously covered the basics of what build tools can do for you to show how builds help with scripting, automation, and eliminating complexity. Taking those into consideration, I’m going to provide a closer look at some of the more popular build tools and how they might make sense for your projects.

This post isn’t meant to be an exhaustive list. Rather, it’s meant to provide suggestions to help you get started in researching how different build tools improve the development workflow. While reading through this comparison on build tools you will gain some knowledge to better equip yourself for comparing how these tools line up with your specific needs.

After a couple of rounds of introducing CSS grid to people who haven’t tried it before, I found it wasn’t the implementation of grid that people asked questions about, rather, it was the bit before that. The actual planning of how a layout would be set up.

If you read the previous post on teaching CSS grid to newcomers, one of the analogies I used was the one about gardening, i.e. curating exactly where your plots of hydrangeas, roses and tulips would turn up. Okay, lost you there. I guess horticulture isn’t everyone’s thing 🤷.

But to be honest, I’ve found myself using a pencil and paper to sketch out my grids a lot more since I’ve started designing and building with CSS grid. The grid syntax itself is very visual in nature and I always highlight this fact when I’m teaching Grid.

Unlike typical software engineer job interviews, front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas.

While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would be Front-end Developer Interview Questions. Unfortunately, I couldn't find many complete and satisfactory answers for these questions online, hence here is my attempt at answering them. Being an open source repository, the project can live on with the support of the community as the state of web evolves.

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.

VS Code can launch and attach the debugger across multiple processes. This is called a "Compound Launch Configuration". This is useful when dealing with a front-end heavy application that contains both a server comonent and some sort of built-in development server (such as Webpack) which is handling live-reloads.

This video uses the following launch configuration to debug both an application that has both server (Express) and front-end (React) components and uses the following launch configuration (launch.json).

I've recently become obsessed with the sheer amount of development activity happening on sites like GitHub.

As a first project on working with this data, I thought it would be fun to rank all the programming languages by counting how many people on GitHub use each language.

I'm using the GitHub Archive and GHTorrent projects as data sources for this analysis. The GitHub Archive provides a record of every public event on GitHub since early 2011. This includes an event every time someone has pushed new code, forked or starred a repository, or opened an issue on GitHub. Overall the GitHub Archive has more than 1.25 Billion events on more than 75 Million different repositories.

Firefox Quantum continues to make news as Mozilla incorporates even more innovative technology into the platform. The development team behind the WebExtensions architecture is no exception, landing a slew of new API and improvements that can now be found in Firefox 59 (just released to the Beta channel).

As always, documentation for the API discussed here can be found on MDN Web Docs (some of the features below are just hitting the main branch as of this post, so if you don’t find the documentation on MDN, check back in a few days).

Experimental Tab Hiding

Tab hiding is back! Since the deprecation of the legacy extension architecture, one of the most requested features has been the ability to hide tabs with the WebExtensions API. It was a key element of some very popular legacy add-ons that provided the ability to manage tab groups. Firefox 59 brings this capability back in an initial, experimental form.

This is post # 7 of the series dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack, a lightweight JavaScript application that has to be robust and highly-performant to help users see and reproduce their web app defects real-time.

If you missed the previous chapters, you can find them here:

This time we’ll be taking apart Web Workers: we’ll offer an overview, discuss the different types of workers, how their building components come to play together, and what advantages and limitations they offer in different scenarios. Finally, we’ll provide 5 use cases in which Web Workers will be the right choice.

Who created Paper Programs? And why? Hi, I’m JP. There are lots of reasons I could list for building Paper Programs, such as having worked on interactive tools for many years, a background in programming education, and having experimented with different representations of program execution. But the truth is, I was just unreasonably excited after trying Dynamicland for the first time, and wanted to explore their interaction model more.

Much thanks to everyone who helped testing Paper Programs. Special thanks to Omar Rizwan for sort-of instigating this project, and offering tons of ideas and feedback.

In 2014, the WebKit team at Apple released Speedometer 1.0, a benchmark for web app responsiveness. It simulates user interactions in web applications, using TodoMVC to orchestrate adding, completing, and removing todo items. Speedometer repeats these actions using DOM APIs that were extensively used in real-world applications. The performance of these kinds of operations depends on the speed of the JavaScript engine, DOM APIs, layout, CSS style resolution and other parts of the browser engine.

Browser engineers have been optimizing their engines using Speedometer as a proxy for real-world use of popular frameworks for a number of years. Originally, Speedometer included implementations of todo apps in six popular JavaScript frameworks and libraries in heavy use: Ember, Backbone, AngularJS, jQuery, Flight, and an early version of React. It also included vanilla JavaScript.

The JavaScript programming language is an essential tool of web developers today. Websites ship more and more JavaScript to the browser to be more interactive. The more complex client-side JavaScript gets, the more error-prone and fragile the user experience might get. Why do we need to talk about robust JavaScript and how do we achieve it?

Introduction

In the trinity of front-end web technologies – HTML, CSS and JavaScript –, the latter is different from the others. HTML and CSS are declarative languages for the special purpose of structuring a text document and expressing style rules, respectively. Both HTML and CSS are designed in a way that allows browsers to process the code in a forgiving, fault-tolerant way. These design features are necessary to allow for backward and forward compatibility.

This proposal introduces a new operator |> similar to F#, OCaml, Elixir, Elm, Julia, Hack, and LiveScript, as well as UNIX pipes. It's a backwards-compatible way of streamlining chained function calls in a readable, functional manner, and provides a practical alternative to extending built-in prototypes.

Introduction

The pipeline operator is essentially a useful syntactic sugar on a function call with a single argument. In other words, sqrt(64) is equivalent to 64 |> sqrt.

This allows for greater readability when chaining several functions together. For example, given the following functions:

JavaScript in browsers has a new module system: ES modules. JavaScript in node.js has had a module system for years: CommonJS modules. JavaScript developers have nearly universally adopted node as the platform of choice for their tooling. Web application frameworks all use command-line tools written in node, pulling shared code from the npm registry, to build applications that run on the browser. Open-source code they find on npm is freely used in these applications. Browser app developers now have the following expectations:

Code they write for their tooling uses the same language as their browser applications.

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:

Getting Ready: Planning And Metrics

Micro-optimizations are great for keeping performance on track, but it's critical to have clearly defined targets in mind — measurable goals that would influence any decisions made throughout the process. There are a couple of different models, and the ones discussed below are quite opinionated — just make sure to set your own priorities early on.

Establish a performance culture.In many organizations, front-end developers know exactly what common underlying problems are and what loading patterns should be used to fix them. However, as long as there is no alignment between dev/design and marketing teams, performance isn't going to sustain long-term. Study common complaints coming into customer service and see how improving performance can help relieve some of these common problems.

The JavaScript programming language is an essential tool of web developers today. Websites ship more and more JavaScript to the browser to be more interactive. The more complex client-side JavaScript gets, the more error-prone and fragile the user experience might get. Why do we need to talk about robust JavaScript and how do we achieve it?

Introduction

In the trinity of front-end web technologies – HTML, CSS and JavaScript –, the latter is different from the others. HTML and CSS are declarative languages for the special purpose of structuring a text document and expressing style rules, respectively. Both HTML and CSS are designed in a way that allows browsers to process the code in a forgiving, fault-tolerant way. These design features are necessary to allow for backward and forward compatibility.

The critical vulnerabilities found in Intel and other CPUs represent a significant security risk. Because the flaw is so low level, the usual protections that web developers are used to don't apply. Even sandboxed JavaScript code can be used to exploit the vulnerabilities known as Meltdown and Spectre.

The issue affects Intel CPUs broadly, but also AMD and various ARM processors are suspect to a similar attack. Browser vendors have already started mitigating the issue with Microsoft, for example announcing improvements to Internet Explorer and Microsoft Edge browsers against Speculative Execution. Mozilla has also taken action against

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.

Photo: Gabriela Hasbun The author, Luke Wagner [right], and his Mozilla colleague Alon Zakai strive to make browsers run programs faster and better.

What if you could share a computer-aided design (CAD) model and even allow a colleague to manipulate it from afar? “Click on this link, check out my design, and feel free to add more holes or fill some in,” you might say. You wouldn’t have to instruct your distant coworker to install special software or worry about whether her operating system could run it. Imagine that all your programs and data were stored in the cloud and that even computationally intensive applications like multimedia editing ran just as well in your browser as they would if they had been installed locally.

Over the past few years, I’ve increasingly seen articles with headlines that run something like, “New Feature Coming To the Web”—followed by content which described how Chrome had implemented an experimental new feature. “You’ll be able to use this soon!” has been the promise.

The reality is a bit more complicated. Sometimes, ideas the Chrome team pioneers make their way out to the rest of the browsers and become tools we can all use. Sometimes… they get shelved because none of the other browsers decide to implement them.

Many times, when this latter tack happens, developers grouse about the other browser makers who are “holding the web back.” But there is a fundamental problem in this way of looking at things:

In this blog post, I take a different approach to explaining this in JavaScript: I pretend that arrow functions are the real functions and ordinary functions a special construct for methods. I think it makes this easier to understand – give it a try.

Two kinds of functions

In this post, we focus on two different kinds of functions:

Ordinary functions: function () {}

Arrow functions: () => {}

An ordinary function is created as follows.

function add(x, y) { return x + y; }

Each ordinary function has the implicit parameter this that is always filled in when it is called. In other words, the following two expressions are equivalent (in strict mode).

I can tell at least that in 3 years, JavaScript will gain more the status of a VM and lose the status of a language. Already today, not many people use raw JavaScript. You usually have some transpilation, at least e.g. Babel. In the future, Web Assembly will enable more innovation in that regards, and existing transpiling languages like Elm, TypeScript, PureScript will continue to improve.

The above is a comment by André Staltz on his Hashnode AMA. I’ve noticed similar comments made by other developers in 2017, ranging from those working on web frameworks to those working on new languages.

Yesterday, I was asked by the Berlin chapter of Women Techmakers to give a talk at the graduation ceremony of their JavaScript Crash Course. I wanted to give a talk about the next steps you can take now you learned the basics of JavaScript in 2017 instead of repeating old ideas. This is what I came up with.

First of all, congratulations — you chose wisely. JavaScript has evolved from being a “toy language”, “real programmers” laughed at into the language that powers the web and beyond.

For better or worse. JavaScript isn’t a perfect language- if something like that even exists. But it has a few things that speak for it.

According to an article from A List Apart about CSS Grid, a "new era in digital design is dawning right now." With Flexbox and Grid, we have the ability to create layouts that used to be extremely difficult to implement, if not impossible. There's an entirely new system available for creating layouts, especially with Grid. However, as with most web technologies, browser support is always something of an issue. Let's look at how we can make the fundamental aspects of Grid work across the browsers that support it, including older versions of Internet Explorer that supported an older and slightly different version of Grid.

In this tutorial you’ll learn how to automate and scrape the web with JavaScript. To do this, we’ll use Puppeteer. Puppeteer is a Node library API that allows us to control headless Chrome. Headless Chrome is a way to run the Chrome Browser without actually running Chrome.

If none of that makes any sense, all you really need to know is that we’ll be writing JavaScript code that will automate Google Chrome.

Before starting you’ll need to have Node 8+ installed on your computer. You can install it here. Make sure to choose the “Current” version as it is 8+.

The simplest way to load a CSS file in an HTML document is to use a link element with rel="stylesheet":

<link rel="stylesheet" href="mycssfile.css">

Referencing CSS this way works great, but it comes with a downside: it's synchronous. In other words, with a typical stylesheet link like this, the browser stops rendering subsequent portions of the page while it requests, downloads, and parses the file. Sometimes that blocking can be desirable because we don't want the browser to render the page before it has the CSS it needs. But not all of our CSS files are critical enough to delay access to the content, which is why we highly

When we first started working on StackBlitz, our goal was to create an online IDE that gave you the same feeling as being behind the wheel of a supercar: that giggly delight of receiving instantaneous responses to your every command.