This document is a JavaScript digest from April 2018. It provides summaries and links for topics including the V8 release v6.6, what to expect in Node.js 10, using const and let, CSS Grid layouts, and libraries like Pico.js and filepond. It also explores differences between classes and factory functions, and links versus buttons.

1. JS Digest
April 2018
by Oleksii Boyko ,
Software Developer

2. www.eliftech.com
Agenda
News:
▪ V8 release v6.6
▪ What You Can Expect From
Node.js 10
▪ Future opportunities of
JavaScript
▪ Efficiently load JavaScript with
defer and async
▪ How to escape async/await hell
▪ const and let
▪ Top JavaScript VSCode
Extensions
▪ Class vs Factory function:
exploring the way forward
▪ Ruby Sass is dead
▪ The Holy Grail Layout with
CSS Grid
▪ Links vs. Buttons in Modern
Web Applications
Useful libs:
▪ Pico.js
▪ filepond
▪ is-thirteen

3. www.eliftech.com
V8 release v6.6
▪ Function.prototype.toString() now
returns exact slices of source code
text
▪ The catch clause of try statements
can now be used without a
parameter.
▪ V8 now implements
String.prototype.trimStart() and
String.prototype.trimEnd()
▪ Asynchronous performance
improvements

4. www.eliftech.com
V8 release v6.6
▪ Asynchronous generators
improvements
▪ Array performance improvements
▪ GYP is gone
▪ Code caching after execution
More info here

5. www.eliftech.com
What You Can Expect From
Node.js 10
• N-API: No Longer
Experimental
• HTTP/2 in Node.js 10
• ESM and Node.js
• Continued Adoption of Async
Hooks
• Node.js 10 "Dubnium" LTS:
Coming Soon
More here.

6. www.eliftech.com
Future opportunities of JavaScript
▪ Optional Chaining
▪ Nullish coalescing
▪ Pipeline operator
More info here

7. www.eliftech.com
Efficiently load JavaScript with defer and async
When loading a script on an HTML page, you need to be careful not to harm the loading
performance of the page. Depending on where and how you add your scripts to an HTML
page will influence the loading time
Performance comparison:
▪ No defer or async, in the head:
▪ No defer or async, in the body
▪ With async, in the head:
▪ With defer, in the head:
More info here

8. www.eliftech.com
How to escape async/await hell
So what a promlem?
Bad practice:

9. www.eliftech.com
How to escape async/await hell
Better way:
More info here

10. www.eliftech.com
const and let
▪ const doesn't do sh*t and we all know it
▪ The linters can't save you now

11. www.eliftech.com
const and let
▪ No it's not useful for compilers
▪ So what should we actually use const for?
More info here

12. www.eliftech.com
Top JavaScript VSCode Extensions
▪ Prettier
▪ Settings Sync
▪ Bracket Pair Colorizer
▪ JavaScript (ES6) code snippets
▪ Import Cost
▪ GitLens
▪ Indenticator
▪ Auto Close Tag and Auto Rename Tag
More info here

13. www.eliftech.com
Class vs Factory function: exploring the way forward
Class-based OOP means:
▪ classifying all the objects in the
application using custom types
defined by classes
▪ aiming for static typing by using a
language that offers that, and then
transpiling it to JavaScript
▪ using interfaces
▪ using composition and inheritance
▪ little use or interest in functional
programming
Classless OOP means:
▪ no custom types. There is no
instanceof in this paradigm.
▪ dynamic typing
▪ no interface. We are only concerned
that an object has the property we
need. It can be built by any factory
function.
▪ using composition, but not
inheritance. Copying all members
from other objects is an option by
using Object.assign()
▪ using functional programming
More info here

14. www.eliftech.com
Ruby Sass is dead
Ruby Sass to be put to pasture on March 26, 2019
It's a little unfortunate LibSass isn't up-to-date with current
canonical Sass, but I think it's on freeze as it's been stated that
LibSass will never be canonical Sass. Update: it's not on freeze. It
was actually Ruby Sass that was once on freeze with the intention
of allowing LibSass to catch up. As I write, LibSass is at 3.5.2, so it's
close.
Dart Sass just went 1.0.0, and is now 100% compatible with Ruby
Sass 3.5.6. They announced that Ruby Sass has now begun
deprecation and—after March 26th, 2019—will no longer be
maintained.
More info here

15. www.eliftech.com
The Holy Grail Layout with CSS Grid
The Solution with CSS Grid:
The Holy Grail Layout is a web page
layout that consists of four sections - a
header, footer, and a main content area
with two sidebars, one on each side.
More info here.

16. www.eliftech.com
Links vs. Buttons in Modern Web Applications
Buttons
▪ Receive keyboard focus by default
▪ “Click” with the Space key
▪ Submit form data to a server
▪ Reset a form
▪ Be disabled with the disabled
attribute
▪ Instruct a screen reader with the
implicit button role
▪ Show :focus, :hover, :active, :disabled
Links
▪ Create hypertext, a network of online
resources
▪ Navigate the user to a new page or
view
▪ Change the URL
▪ Support page jumps with internal
href attributes
▪ Deep-link client-rendered
applications
▪ Are focusable by default with the
href attribute
▪ Register a click with the Enter key
▪ Can’t be disabled like buttons but
More info here

17. www.eliftech.com
pico.js
pico.js: a face-detection library in 200 lines of JavaScript
▪ approximately 200 lines of pure JavaScript
▪ see https://tkv.io/posts/picojs-intro/ for details
▪ real-time detection demo available at
https://tkv.io/posts/picojs-intro/demo/
More info here

18. www.eliftech.com
filepond
A JavaScript library that can upload anything you throw at it,
optimizes images for faster uploads, and offers a great, accessible,
silky smooth user experience.
Core Features:
▪ Accepts directories, files, blobs, local URLs, remote URLs and
Data URIs.
▪ Drop files, select on filesystem, copy and paste files, or add files
using the API.
▪ Async uploading with AJAX, or encode files as base64 data and
send along form post.
▪ Accessible, tested with AT software like VoiceOver and JAWS,
navigable by Keyboard.
▪ Image optimization, automatic image resizing, cropping, and fixes
EXIF orientation.
▪ Responsive, automatically scales to available space, is functional
on both mobile and desktop devices.
More info here

19. www.eliftech.com
Is-thirteen
An npm package to check if a number is
equal to 13.
More info here

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