Learning modern JavaScript is tough if you haven’t been there since the beginning. The ecosystem is growing and changing so rapidly that it’s hard to understand the problems that different tools are trying to solve. I started programming in 1998 but only began to learn JavaScript seriously in 2014. At the time I remember coming across Browserify and staring at its tagline:

“Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.”

I pretty much didn’t understand any word in this sentence, and struggled to make sense of how this would be helpful for me as a developer.

Web workers, service workers, and worklets. All of these are what I would call “Javascript Workers”, and although they do have some similarities in how they work, they have very little overlap in what they are used for.

Broadly speaking, a worker is a script that runs on a thread separate to the browser’s main thread. If you think about your typical Javascript file that is included in your HTML document via a <script> tag, that runs on the main thread. If there is too much activity on the main thread, it can slow down the site, making interactions jittery and unresponsive.

Web workers, service workers, and worklets are all scripts that run on a separate thread. So what are the differences between these three types of workers?

I think I'm not the first one to talk about this problem even here in dev.to. I quick research trying to found any solution concluded with the image that is the head of this text. The node_modules folder is where your project dependencies are stored, common knowledge. Its weight is also common knowledge.

Why I decided to vent my frustration now

Black Friday is here! It means discounts and the opportunity to update your computer. Therefore I decided to buy a SSD to boost the performance of my laptop, from 1 TB HDD to 500 GB SSD. All my files right now sums 299 GB, so I will not lose much space, but I decided to do the housekeeping work even so, this includes making backups of my projects. Not all projects I make I put on GitHub, sometimes I'm just experimenting and it is not worth the trouble, but I keep them anyway.

Animated GIFs are popular on the web for good reason. They provide more engagement than an ordinary image, while remaining more digestible compared to a typical video. However GIFs are a terrible format for storing video and are often huge in size leading to slow page load times and high data usage. With HTML5 video, you can reduce the size of GIF content by up to 98% while still retaining the unique qualities of the GIF format in the browser.

Video content on the web increases customer engagement and satisfaction. Pages that load quickly have the same effect. The addition of video to your website will slow down the page rendering time, necessitating a balance between overall page load and video content.

Integrated Merge Tool

The Integrated Merge Tool allows you to resolve any merge conflicts directly in Sublime Merge, rather than having to open up your editor of choice.

Conflicts are presented with a 3-pane view. On the left are your changes and on the right are theirs. In the center pane is the resolved text, with buttons to choose between your changes or theirs. The same text editing functionality as Sublime Text is also available for more complicated merges.

Clicking on the header in the middle pane will switch between the editable merge results and the base file.

Collaborating on office documents is a solved problem. Collaborating on code is still a pretty difficult thing to do. That’s because sharing just code isn’t enough. In order to really collaborate, a developer needs to be able to share their whole environment. VS Live Share is a new service that lets you do exactly that, and you might be surprised at just how much sharing you can actually do.

TL;DR: Plug 'N Play is a good idea. .pnp.js is a bad idea. .pnp.json would be a better idea.

To preface this, I think Plug 'N Play is a great idea. My concerns come from the dependency analysis side. My day job is building analysis tools at FOSSA, and I've worked with a lot of package managers while building the FOSSA CLI.

.pnp.js is much harder to analyse than node_modules

There should be a method to access the Plug 'n Play API in a language-agnostic way without requiring a Node.JS runtime.

At FOSSA, we do dependency analysis in a variety of environments. We need to provide results reliably across these environments, including environments where Node.JS is not available. This use case is surprisingly common for us:

You can get a PDF, ePub and Mobi version of this page for an easier reference, or to read it on your Kindle or tablet.

This article is a getting started guide to Node.js, the server-side JavaScript runtime environment.

Node.js is a runtime environment for JavaScript that runs on the server.

Node.js is an open source cross-platform. Since its introduction in 2009, it got hugely popular and now plays a significant role in the web development scene. If GitHub stars are one popularity indication factor, having 46,000+ stars means it is very popular.

Node.js is built on top of the Google Chrome V8 JavaScript engine, and it’s mainly used to create web servers — but it’s not limited to that.

JavaScript is an adventure. After almost a decade of both amateur and professional development in various industries, I believe everybody would agree on this one statement.

Frontend projects give us, programmers, a lot of freedom of choice, of flexibility, and plenty space for creativity — but in return they also demand a bit of knowledge, planning, and self-responsibility.

Having gone through projects with jQuery, require.js, Angulars, React, ExtJs, and maybe a dozen others I may not recall (or wish to not recall) — I have seen things unimaginable to 2018's Frontend. And we all probably did at some point!

Visual Studio Code comes with an inbuilt Command Line Interface. Once you've installed Visual Studio Code, and have it open, press ⇧⌘P to open the command palette for Mac, or just ⌘P and the press > button.

For an entire generation, MySpace was a gateway to the addictive social networking platforms that are now a ubiquitous feature of our lives. And for many members of that same generation, MySpace was a gateway to another inescapable part of modern life—writing code.

Since the site’s demise nearly ten years ago, certain totems of the MySpace experience have stuck in our collective memories—e.g. the top 8, auto-playing music, and, of course, Tom. But of all the features that made MySpace the cultural sensation that it was, the ability to style a profile page with HTML and CSS might have left the biggest footprint behind.

Images are one of the most fundamental types of content that is served on the web. They say an image is worth a thousand words, but it can also be worth quite a few megabytes too if you’re not careful.

So although web images need to be clear and crisp, they must also be delivered at manageable sizes so that load times are kept small and data use is kept at acceptable levels.

On my website, I noticed that the page weight of my homepage was over 1.1 MB and images added up to 88% of that weight. I also realised that I was serving images that were larger than they needed to be (in terms of resolution). Clearly, there was a lot of room for improvement.

CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid.

This project is very early phase of experiment. Currently only tiny features are supported. More features will be implemented (please see TODO section). And you may notice soon on trying it... it's buggy :)

If inputting something does not change anything, please try to click somewhere in the page. Vim may have lost the focus.

Whenever there are elements, that can be found on multiple versions, I recommend to use symbols in Sketch. This is going to make it easier for you in the future, and the SVG that we’re going to build is going to use the same symbols. (If you’re not familiar with symbols in Sketch I highly recommend this Medium Story by Jon Moore.)

As you can see, the logo consists of a visual element and the company name. Only in the square version, I chose not to display the name. The reason for this is, that I wanted it to be recognizable, even when used as a tiny thumbnail by maybe only about 32px x 32px.

Before we export any images, we have to create a new SVG file. Maybe it’s a little frightening to start your SVG with writing code, but in the end, it is not too complicated. Pinky promise. All we need is an opening and a closing tag like this:

Welcome to the May 2018 release of Visual Studio Code. You will notice several new features available for Preview in this milestone. Give them a try and let us know what you think. Some of the key highlights include:

You need 4 things to make a PWA: HTTPS hosting, a service worker, a properly configured index.html file, and a web app manifest.json file. The examples below are geared towards React but are similar for any framework.

A challenge in configuring your app is understanding the difference in how iOS and Android use the meta tags in index.html and the web app manifest. We’ll explain how each option is used below.

One painful part to this process is creating the massive number of splash screens for iOS: one for each screen size and orientation you want to support, otherwise users will see a white screen while your app loads.

Improves quality of life, but can still begrudgingly livewithout them.

Prettier is in a similar vein to ESLint described above, in that its purpose is to try to enforce and standardize coding style, with this specific plugin allowing it to be used directly within the editor. The thing that separates Prettier from ESLint is instead of listing the error (although ESLint does have a --fixoption), Prettier provides a reprinted version of how the code should be formatted. This is great when used with pre-commit workflows, as it can automatically reformat the code and save it to match required styles with every

In his Performance as User Experience presentation at An Event Apart in Seattle, Aaron Gustafson shared a number of ways to optimize Web page performance. Here's my notes from his talk:

Our jobs as designers is to reduce friction for our users. Poor performance causes friction and can negatively impact key metrics like conversion and revenue.

How do Web pages load: when you enter an address in a URL bar, a DNS look-up replies with an IP address, then there's a TCP handshake followed by the actual request for files/data, once there's a response the browser can actually do something.

Now go here to get the source code for Brain.js. Copy & paste the whole thing into your empty brain.js file, hit save and bam: 2 out of 4 files are finished.

Next is the fun part: deciding what your machine will learn. There are countless practical problems that you can solve with something like this; sentiment analysis or image classification for example. I happen to think that applications of M.L. that process text as input are particularly interesting because you can find training data virtually everywhere and they have a huge variety of potential use cases, so the example that we’ll be using here will be one that deals with classifying text:

Environment variables are a fundamental part of Node development, but for some reason I never bothered with learning how to properly use them.

Maybe because they are called “Environment Variables.”

Just the words “Environment Variable” trigger a PTSD-laced flashback in which I am trying to add the correct path to the Java Home directory on Windows. Does it go in PATH or JAVA_HOME or both? Do I need to end it with a semicolon? WHY AM I USING JAVA?

In Node, environment variables can be global (like on Windows), but are often used with a specific process that you want to run. For instance, if you had a web application, you might have environment variables that define:

Today, we’re excited to launch the Figma Platform, a way to improve design workflows by connecting Figma to other tools, scripts and even web apps. We’re starting off with a new concept for the design space: A web API.

It’s crazy that a web API is groundbreaking in 2018, but to our knowledge, no one has ever created one for a professional design tool before. The reason? Design traditionally takes place in a world of siloed, offline desktop software, whereas Figma lives online where everything is connected.

By harnessing the open nature of the web, our API lays the foundation for unique forms of design collaboration. Companies are already using it to craft custom tools that meet their unique needs. For example, Uber created a live feed of what their design team is working on to raise visibility across the organization. GitHub automated part of their icon creation process to improve its efficiency.

Picture this - you’ve created a web application and are now searching for the right web server to host it from.

Your application might consist of multiple static files — HTML, CSS, and JavaScript, a backend API service or even multiple webservices. Using Nginx might be what you are looking for, and there are couple of reasons for that.

NGINX is a powerful web server and uses a non-threaded, event-driven architecture that enables it to outperform Apache if configured correctly. It can also do other important things, such as load balancing, HTTP caching, or be used as a reverse proxy.

In this article, I’ll cover a few basic steps about how to install and configure the most common parts of NGINX.

When you stop trying to over-optimize, you should notice considerably fewer variables in your template files. I recommend that you take that idea a step further and try to avoid variables in template files in general. Not because you should avoid variables themselves, but because of what they’re a symptom of in template files — logic.

While some logic will always be necessary, you can improve the readability of your template files significantly by removing as much as you can.

We’re very excited to announce the stable release of Rekit Studio, a complete IDE for React, Redux and React Router development! Though it’s maybe new to some of you, it has helped us build complicated web apps for more than one year.

The previous version of Rekit Studio was Rekit Portal, which has no ability to edit code. Now thanks to Monaco Editor which also powers VS Code, and prettier, an amazing tool for formatting code, Rekit Studio provides great experience for coding. That’s also why we renamed it from ‘portal’ to ‘studio’.

As an IDE, besides code editing, Rekit Studio provides the capability of code generation, dependency diagram, refactoring, build, unit tests and a meaningful way of code navigation. You will no longer care about how to setup the project, config webpack or organize folder structure. Rekit Studio provides an integrated way to manage the project. That’s what makes Rekit Studio different from other code editors like Sublime Text, VS Code.

In a year lots have happened, I switched from doing PHP full time to doing JavaScript full time. With that change also came the change of editors professionally I mostly used WebStorm and in my spare time, I switched from Atom to Visual Studio Code.

@Microsoft did an exceptional job by creating a super performant and flexible editor. There’s a big community behind it and it’s constantly improving. Besides flexibility and performance, it also offers IntelliSense, interactive debugging and build-in GIT commands.

If you haven’t switched yet, give it a try and let me know what you think about it.