JavaScript news and tips: browsers, front-end, Node.js, useful libs. Enjoy our latest JS digest!

Browsers news

Web Caching Explained by Buying Milk at the Supermarket

Few points from great explanation of web caching by Kevin Kononenko:

If you have ever bought milk at the supermarket, then you can understand server-side and browser-side caching.

Without caching, you are limited by the computing power of your servers. Caching is used to load static assets, like:

  • Images
  • CSS
  • Static HTML files
  • JavaScript files

What is server-side caching?

Back to our farm scenario. Know what would make it a LOT easier to run a successful dairy farm?

A supermarket with refrigeration!

That way, people will not need to show up to your farm and consume the milk immediately. You will be able to keep it safely stored for a couple weeks at a time.

server-side caching

The supermarket removes a lot of the stress on your farm, because your cows will not be expected to produce in real-time. The supermarket will handle the demand. You just need to keep the cows productive on a daily basis. Even better, residents of all the surrounding villages can now buy milk from your farm, because it will always be available in the refrigerator.

What is a CDN?

So far, there is one grocery store selling your milk. Although that is a big improvement, you still have no way to get your milk to people outside the range of this local store. You are going to need to add more stores if you want to scale up your operation.

So, let’s say you start distributing your milk to more supermarkets. Now, you can satisfy customers across a much larger geographic range. This is similar to a content delivery network, or a CDN. A CDN is a series of proxy servers (like we discussed above) located all over the world.

CDN network

As an end-user, you probably feel that high-speed internet allows most sites to load very quickly. However, this is only because they use CDNs to deliver static files at rapid speed!

What about browser caching?  

Now, people across the country (or the world) can bring home cold milk from your farm. There’s just one issue — they have no way to store it in their own homes. Your customers still need to drink the milk pretty quickly after they buy it, and then return to the grocery store for more. So, this system still doesn’t serve customers particularly well.  The solution? A refrigerator!  With a fridge, you can store the milk locally and avoid a return trip to the supermarket. In caching terms, we’re talking about a completely separate location for storing static assets since it is on the client-side, or on the same computer as the browser. Our proxy server was located in a remote location.  

Chache expiration date

One key thing to note — we are NOT saying that milk magically arrives in your refrigerator! You still need to make that initial request that reaches either the server or the proxy server. After that, you can cache some of the files locally.

How does your browser know when to request new files from the server? Otherwise, you would never experience updated versions of these local files.

Well, just like milk producers put a date on their milk packaging, servers will add some sort of identifier within the HTTP response header. The scenario shown above closely resembles the “expiration date” method. Some of the other methods still require your browser to check with the server before sending the cached file.

Learn more on dev.to.

How you can improve your workflow using the JavaScript console  

Console.log, Console.error, Console.warn and Console.info

Console.log, Console.error, Console.warn and Console.info

Console.group

Console.group

Console.table

Console.table

Console.count, Console.time and Console.timeEnd

Console.count, Console.time and Console.timeEnd

Console.trace and Console.assert

Console.trace and Console.assert

Learn more on medium.freecodecamp.org

Front-end

HTML element methods you’ve potentially never heard of

#1 table methods

const tableEl = document.querySelector('table');
const headerRow = tableEl.createTHead().insertRow();
headerRow.insertCell().textContent = 'Make';
headerRow.insertCell().textContent = 'Model';
headerRow.insertCell().textContent = 'Color';

const newRow = tableEl.insertRow();
newRow.insertCell().textContent = 'Yes';
newRow.insertCell().textContent = 'No';
newRow.insertCell().textContent = 'Thank you';

#2 scrollIntoView()

document.querySelector(document.location.hash).scrollIntoView();

#3 hidden

myElement.style.display = 'none'
myElement.hidden = true

#4 toggle()

el.classList.toggle('some-orange-class', theme === 'orange');

#5 querySelector()

myElement.querySelector('.my-class') 

#6 closest

myElement.closest('article').querySelector('h1');

#7 getBoundingClientRect()

{
x: 604.875,
y: 1312,
width: 701.625,
height: 31,
top: 1312,
right: 1306.5,
bottom: 1343,
left: 604.875
}

#8 matches()

if (myElement.matches('.some-class')) {
// do something
}

#9 insertAdjacentElement()

parentEl.insertAdjacentElement('beforeend', newEl)

#10 contains()

const handleClick = e => {
if (!modalEl.contains(e.target)) modalEl.hidden = true;
};

#11 getAttribute()

el.getAttribute('href')

More info on hackernoon.com

The CSS Paint API

The API is just one part of a whole suite of new specifications all under the umbrella of what is known as CSS Houdini. Houdini, in essence, gives developers lower level access to CSS itself. No kidding.    The CSS Paint API specifically allows you to call a paint() function wherever you would normally write a value where an image is expected. A common example is the background-image property, where you might use the url() function to a link to an image file, like this:    

area { 
background-image: url('assets/myimage.jpg');
}

Read more on  css-tricks.com

Node.js

Multi-threading support in Node.js 10.5

Version 10.5.0 of Node.js was released and one of the main features it contained was the addition of initial (and experimental) thread support.

This is interesting, specially coming from a language that’s always pride itself of not needed threads thanks to it’s fantastic async I/O. So why would we need threads in Node?

The quick and simple answer is: to have it excel in the only area where Node has suffered in the past: dealing with heavy CPU intensive computations. This is mainly why Node.js is not strong in areas such as AI, Machine Learning, Data Science and similar. There are a lot of efforts in progress to solve that, but we’re still not as performant as when deploying microservices for instance.

More info on medium.com.

eslint-scope v3.7.2 has been hacked

A hacker has gained access to a developer's npm account and injected malicious code into a popular JavaScript library, code that was designed to steal the npm credentials of users who utilize the poisoned package inside their projects.

The JavaScript (npm) package that got compromised is called eslint-scope, a sub-module of the more famous ESLint, a JavaScript code analysis toolkit.

Find our more on bleepingcomputer.com.

Why creating an array through a map doesn`t work in JS, and how to solve it

Why creating an array through a map doesn`t work in JS, and how to solve it

Learn more on jem-space.ru  (article in Russian).

Useful libs

Shepherd

As a web developer, you probably realize that creating an application is often the easy part – presenting it to the world is an uphill task in itself. Some prefer creating presentations, some others make videos. Wouldn’t it be nice if you had something to help you walk your users through your app?

Enter Shepherd, by HubSpot. Shepherd is a simple JavaScript library which helps you guide your users through a tour of your application. It helps you direct your users to the right place, just like a shepherd takes care of his flock of sheep.

Shepherd

More info on github.com.

react-scrollbars-custom

  • Fully customizable
  • requestAnimationFrame for 60fps
  • No extra stylesheets necessary
  • Cross-browser
  • Native scrollbars on mobile devices
import React, { Component }  from 'react';
      import Scrollbar from 'react-scrollbars-custom';
      
      class App extends Component
      {
          render() {
              return (
                      <Scrollbar style={ {width: '100%', minHeight: 300} } >
                          <p>Hello world!</p>
                      </Scrollbar>
              );
          }
      }

Find out more on github.com.

Docz

Docz has some built-in components that help you to document your things. Using the power of components and some AST parsing algorithms to source data for that components, we can render your components on the fly, create tables with contents, custom getters by traversing your file, etc. The sky is limit here!

Docz

More info on docz.site.

That’s it for now. Stay tuned and and subscribe to our newsletter not to miss next month JS digest!