The document discusses various topics related to JavaScript, including web caching explained through the analogy of milk purchasing, improvements to workflow using the JavaScript console, and new features in Node.js such as multi-threading support in version 10.5. It also covers the recent hack of the eslint-scope library, the reasons why certain JavaScript functions may not work as expected, and introduces useful libraries like Shepherd and Docz for developers. Overall, it provides insights into advances in JavaScript and best practices for web development.

1. JS Digest
By Oleksii Boiko,
Software Developer
July 2018

2. www.eliftech.com
Agenda
Browsers:
▪ Web Caching Explained by
Buying Milk at the Supermarket
▪ How you can improve your
workflow using the JavaScript
console
Front-end:
▪ HTML element methods you’ve
potentially never heard of
▪ The CSS Paint API
Node.js
▪ Multi-threading support in Node.js
10.5
▪ eslint-scope v3.7.2 has been
hacked
▪ Why creating an array through a
map doesn`t work in JS, and how
to solve it
Useful libs:
▪ Shepherd
▪ React-scrollbars-custom
▪ Docz

3. www.eliftech.com
Browsers news

4. www.eliftech.com
Web Caching Explained by Buying Milk at the
Supermarket
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

5. www.eliftech.com
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.
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.

6. www.eliftech.com
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.
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!

7. www.eliftech.com
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.

8. www.eliftech.com
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.
More info
here

9. www.eliftech.com
How you can improve your workflow using the
JavaScript console
▪ Console.log, Console.error, Console.warn
and Console.info

10. www.eliftech.com
How you can improve your workflow using the
JavaScript console
▪ Console.group
▪ Console.table

11. www.eliftech.com
How you can improve your workflow using the
JavaScript console
▪ Console.count, Console.time and Console.timeEnd
▪ Console.trace and Console.assert
More info here

12. www.eliftech.com
Front-end

13. www.eliftech.com
HTML element methods you’ve potentially never heard of
#1 table methods #2 scrollIntoView()
#3 hidden
#4 toggle()
#5 querySelector()

14. www.eliftech.com
HTML element methods you’ve potentially never heard of
#6 getBoundingClientRect() #8 insertAdjacentElement()
#7 matches()
#9 contains()
#10 getAttribute()
More info here

15. www.eliftech.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:
More info here

16. www.eliftech.com
Node.js

17. www.eliftech.com
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 here

18. www.eliftech.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.
More info here

19. www.eliftech.com
Why creating an array through a map doesn't work in
JS, and how to solve it
More info here

20. www.eliftech.com
Useful libs

21. www.eliftech.com
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.
More info here

22. www.eliftech.com
react-scrollbars-custom
▪ Fully customizable
▪ requestAnimationFrame for 60fps
▪ No extra stylesheets necessary
▪ Cross-browser
▪ Native scrollbars on mobile devices
More info here

23. www.eliftech.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!
More info here

24. www.eliftech.com
Subscribe not to miss next month JS digest!
Find us at eliftech.com
Have a question? Contact us:
info@eliftech.com