Explore JavaScript news, updates and releases in the latest edition of JS digest.

V8 release v6.6

  • Function.prototype.toString() now returns exact slices of source code text

 

function /* a comment */ foo () {} 
      // Previously: foo.toString(); 
      // → 'function foo() {}' 
      // ^ no comment 
      // ^ no space 
      // Now: foo.toString(); 
      // → 'function /* comment */ foo () {}'

 

  • The catch clause of try statements can now be used without a parameter.

 

try { 
      doSomethingThatMightThrow(); 
      } catch { // → Look mom, no binding!
      handleException(); 
      }

 

  • V8 now implements String.prototype.trimStart() and String.prototype.trimEnd()

 

const string = ' hello world ';
      string.trimStart(); 
      // → 'hello world ' 
      string.trimEnd(); 
      // → ' hello world' 
      string.trim(); 
      // → 'hello world'

 

  • Asynchronous performance improvements
Asynchronous performance improvements
  • Asynchronous generators improvements
Asynchronous generators improvements
  • Array performance improvements
Array performance improvements
  • GYP is gone
  • Code caching after execution

More info here.

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

Read more here.

Future opportunities of JavaScript

Ecma TC39
  • Optional Chaining

 

console.log(data.user?.address?.street); // undefined

 

  • Nullish coalescing

 

value ?? 'default value';

 

  • Pipeline operator

 

let result = "hello"  
      |> doubleSay
      |> capitalize
      |> exclaim;
      result // => 'Hello, hello!'

More info here.

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:
without-defer-async-head
  • No defer or async, in the body
without-defer-async-body
  • With async, in the head:
with-async
  • With defer, in the head:
with-defer

More info here.

How to escape async/await hell

So what a promlem?

How to escape async/await hell

Bad practice:


      (async () => {
        const pizzaData = await getPizzaData()    // async call
        const drinkData = await getDrinkData()    // async call
        const chosenPizza = choosePizza()    // sync call
        const chosenDrink = chooseDrink()    // sync call
        await addPizzaToCart(chosenPizza)    // async call
        await addDrinkToCart(chosenDrink)    // async call
        orderItems()    // async call
      })()

Better way:


      async function selectPizza() {
        const pizzaData = await getPizzaData()    // async call
        const chosenPizza = choosePizza()    // sync call
        await addPizzaToCart(chosenPizza)    // async call
      }
      
      async function selectDrink() {
        const drinkData = await getDrinkData()    // async call
        const chosenDrink = chooseDrink()    // sync call
        await addDrinkToCart(chosenDrink)    // async call
      }
      
      (async () => {
        const pizzaPromise = selectPizza()
        const drinkPromise = selectDrink()
        await pizzaPromise
        await drinkPromise
        orderItems()    // async call
      })()

More info here.

const and let

  • const doesn't do sh*t and we all know it
  • 
          const THIS_SHOULDNT_CHANGE = { right: "?" };
          THIS_SHOULDNT_CHANGE.right = "wrong";
          THIS_SHOULDNT_CHANGE.fucking = "deal with it";
          
  • The linters can't save you now
  • 
          import { mutatesProp } from './mutatesProp';
          const FOO = { prop: true };
          mutatesProp(FOO); // no lint err :(
          
  • No it's not useful for compilers
  • So what should we actually use const for?

          const I_ACTUALLY_GIVE_A_SHIT_IF_THIS_CHANGES = 42;
      

          const HERE = "is okay";
      
      function nested() {
        const NOT_HERE = "never seen a reason to";
      }
      

More info here.

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.

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.

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.

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.
Holy_Grail_CSS_Grid

      .hg__header { grid-area: header; }
      .hg__footer { grid-area: footer; }
      .hg__main { grid-area: main; }
      .hg__left { grid-area: navigation; }
      .hg__right { grid-area: ads; }
      
      .hg {
      	display: grid;
      	grid-template-areas: "header header header"
      	                     "navigation main ads"
      	                     "footer footer footer";
      	grid-template-columns: 150px 1fr 150px;
      	grid-template-rows: 100px 
      						1fr
      						30px;
      	min-height: 100vh;
      }
      
      @media screen and (max-width: 600px) {
      	.hg {
      		grid-template-areas: "header"
      		                     "navigation"
      		                     "main"
      		                     "ads"
      		                     "footer";
      		grid-template-columns: 100%;
      		grid-template-rows: 100px 
      							50px 
      							1fr
      							50px 
      							30px;
      	}
      }
      

More info here.

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.

pico.js

pico.js: a face-detection library in 200 lines of JavaScript

sliding window example picojs

More info here.

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.
filepond animation

More info here.

Is-thirteen

An npm package to check if a number is equal to 13.


          var isThirteen = require('is-thirteen');
      
      // PLEAS READ THE SOURCE CODE BECAuse we moved fast and broke things
      
      i̶s̶T̶h̶i̶r̶t̶e̶e̶n̶(̶2̶5̶)̶;̶ ̶/̶/̶ ̶f̶a̶l̶s̶e̶
      i̶s̶T̶h̶i̶r̶t̶e̶e̶n̶(̶1̶3̶)̶;̶ ̶/̶/̶ ̶t̶r̶u̶e̶
      

          var is = require('is-thirteen');
      // Now with elegant syntax.
      
      is(13).thirteen(); // true
      is(12.8).roughly.thirteen(); // true
      is(6).within(10).of.thirteen(); // true
      is(2003).yearOfBirth(); // true
      
      // check your math skillz
      is(4).plus(5).thirteen();      // false
      is(12).plus(1).thirteen();    // true
      is(4).minus(12).thirteen();    // false
      is(14).minus(1).thirteen();    // true
      is(1).times(8).thirteen();    // false
      is(26).divideby(2).thirteen();  //true
      

More info here.


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