//JavaScript - Frameworks - Libs

Announcing TypeScript 3.6

For those unfamiliar, TypeScript is a language that builds on JavaScript by adding optional static types. These types can be checked by the TypeScript compiler to catch common errors in your programs (like misspelling properties and calling functions the wrong way). Tools like the TypeScript compiler and Babel can then be used to transform TypeScript code that uses all the latest and greatest standard features to standards-compliant ECMAScript code that will work on any browser or runtime (even much older ones that support ES3 or ES5).

devblogs.microsoft.com

Hooks are coming to Vue.js version 3.0

Vue Hooks are basically an enhanced version of mixins, if you do not know what mixins are, they are a platform in Vue used to re-use logic between components (you will see a quick demo of mixins in this post). Vue Hooks lets you pass logic from one Hook to another and you can also use state in a Hook from another Hook. So just like in React, Hooks in Vue are defined in functions which can be a cleaner and more flexible way to define and share logic and can return state.

blog.logrocket.com

Optional chaining

Long chains of property accesses in JavaScript can be error-prone, as any of them might evaluate to null or undefined (also known as “nullish” values). Checking for property existence on each step easily turns into a deeply-nested structure of if-statements or a long if-condition replicating the property access chain:

optional chaining

Introducing the optional chaining operator

Surely you don’t want to write code like that, so having some alternative is desirable. Some other languages offer an elegant solution to this problem with using a feature called “optional chaining”. According to a recent spec proposal, “an optional chain is a chain of one or more property accesses and function calls, the first of which begins with the token ?.”.

Using the new optional chaining operator, we can rewrite the above example as follows:

optional chaining operator

v8.dev

Nullish coalescing

The nullish coalescing proposal (??) adds a new short-circuiting operator meant to handle default values.

The nullish coalescing operator (??) acts very similar to the || operator, except that we don’t use “truthy” when evaluating the operator. Instead we use the definition of “nullish”, meaning “is the value strictly equal to null or undefined”. So imagine the expression lhs ?? rhs: if lhs is not nullish, it evaluates to lhs. Otherwise, it evaluates to rhs.

Explicitly, that means the values false, 0, NaN, and the empty string '' are all falsy values that are not nullish. When such falsy-but-not-nullish values are the left-hand side of a lhs ?? rhs, the expression evaluates to them instead of the right-hand side. Bugs begone!

nullish coaleshing

v8.dev

npmfs

JavaScript Package Inspector

Package Viewer — Browse package files at any version.

Package Diff — Compare packages across versions.

Deep Links — Link to specific lines in files and diffs.

Motivations

Published packages don't always include a link to their source on GitHub.

The linked repository is not necessarily representative of published package.

npmfs.com

virtual scroller

This repository hosts explorations for a new web platform feature, a virtual scroller control. The idea of a virtual scroller is to provide a scrolling "viewport" onto some content, allow extremely large numbers of elements to exist, but maintain high performance by only paying the cost for those that are currently visible. Traditionally, we say that the non-visible content is virtualized.

github.com

Hashids

Hashids is small JavaScript library to generate YouTube-like ids from numbers. Use it when you don't want to expose your database ids to the user: http://hashids.org/javascript

github.com

check-imports

Checks import from declarations, import and require calls then updates or removes package.json dependencies (if update option described below is set to true, otherwise you only get informed) from package.json files. Works great with single-package modules as well as with big projects with multiple package.json files (for example if you have a monorepo powered by lerna).

github.com

css-dot-js-loader

This Webpack loader allows to generate static CSS code via JavaScript. It's created for cases when you want to get all the power of JavaScript (loops, regular variables, functions etc) and use it to generate your CSS file. The loader doesn't replace CSS preprocessors (such as Sass or PostCSS) but helps you if you want to avoid weird and rigid syntax which is made to bring programming features into CSS (personally me don't like Sass control directives at all). Surely, you can use the loader without any other pre-processors and generate pure CSS code.

github.com

Zebu

Zebu is a JavaScript library for building little languages with tagged template literals. Here are some examples of little languages built with Zebu.

github.com

//Browsers - Web

69.0 - Firefox Release - September 3, 2019

Enhanced Tracking Protection (ETP) rolls out stronger privacy protections:

The default standard setting for this feature now blocks third-party tracking cookies and cryptominers.

The optional strict setting blocks fingerprinters as well as the items blocked in the standard setting.

The Block Autoplay feature is enhanced to give users the option to block any video that automatically starts playing, not just those that automatically play with sound.

For our users in the US or using the en-US browser, we are shipping a new “New Tab” page experience that connects you to the best of Pocket’s content.

Support for the Web Authentication HmacSecret extension via Windows Hello now comes with this release, for versions of Windows 10 May 2019 or newer, enabling more passwordless experiences on the web.

Support for receiving multiple video codecs with this release makes it easier for WebRTC conferencing services to mix video from different clients.

mozilla.org

Experimenting with same-provider DNS-over-HTTPS upgrade

As part of long standing commitment to making the web safer to use, we will be conducting an experiment to validate our implementation of DNS-over-HTTPS (aka DoH) in Chrome 78. As the name implies, the idea is to bring the key security and privacy benefits of HTTPS to DNS, which is how your browser is able to determine which server is hosting a given website. For example, when connected on a public WiFi, DoH would prevent other WiFi users from seeing which websites you visit, as well as prevent potential spoofing or pharming attacks.

blog.chromium.org

WebGPU and WSL in Safari

WebGPU is a new API being developed by Apple and others in the W3C which enables high-performance 3D graphics and data-parallel computation on the Web. This API represents a significant improvement over the existing WebGL API in both performance and ease of use. Starting in Safari Technology Preview release 91, beta support is available for WebGPU API and WSL, our proposal for the WebGPU shading language.

web gpu and wsl in safari

webkit.org

Using rel=”preconnect” to establish network connections early and increase performance

Adding rel=preconnect to a <link> informs the browser that your page intends to establish a connection to another domain, and that you'd like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them.

The graphic in the post does a good job of making this an obviously good choice for performance:

rel=preconnect to establish network

css-tricks.com

//Html-Css

Using requestAnimationFrame with React Hooks

Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.

TLDR: Pass an empty array as a second parameter for useEffect to avoid it running more than once and pass a function to your state’s setter function to make sure you always have the correct state. Also, use useRef for storing things like the timestamp and the request’s ID.

css-tricks.com

cascadia-code

This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.

cascadia code

cascadia code characters

github.com

//Tegnology

Text to speech in the browser with the Web Speech API

The Web Speech API has two functions, speech synthesis, otherwise known as text to speech, and speech recognition. With the SpeechSynthesis API we can command the browser to read out any text in a number of different voices.

From a vocal alerts in an application to bringing an Autopilot powered chatbot to life on your website, the Web Speech API has a lot of potential for web interfaces. Follow on to find out how to get your web application speaking back to you.

twilio.com

Document and preview ReactJS components with JSDoc

JSDoc 3 is an API documentation generator for JavaScript, similar to Javadoc or phpDocumentor. You add documentation comments directly to your source code, right alongside the code itself. The JSDoc tool will scan your source code and generate an HTML documentation website for you.

medium.com

Webpack Boilerplate

Minimal Webpack 4 boilerplate with Babel, Sass, ESLint, Hot Module Replacement, and development/production optimization.

github.com

Package Diff

Package Diff displays a diff between two versions of the same npm package.

diff.intrinsic.com

Graphology

graphology is a specification and reference implementation for a robust & multipurpose JavaScript Graph object.

It aims at supporting various kinds of graphs with the same unified interface.

A graphology graph can therefore be directed, undirected or mixed and can be simple or support parallel edges.

Along with those specifications, one will also find a standard library full of graph theory algorithms and common utilities such as graph generators, layouts etc.

graphology.github.io

Automatically compress images on Pull Requests

Calibre’s new GitHub Action allows you to compress raster images with minimal setup automatically. Never ship unoptimised graphics again.

GitHub Action

calibreapp.com

//News

Design system of state sites of Ukraine

This design system helps to create accessible and simple government web services.

Here you will find practical guidelines that remain with our designers, developers and testers, content editors, managers and website owners.

design.gov.ua

Caniuse and MDN compatibility data collaboration

Today announcing the integration of MDN’s compat data into the caniuse website. Now all search results can include support tables for MDN compat data. This includes data types already found on caniuse, specifically the HTML, CSS, JavaScript, Web API, SVG & and HTTP categories. By adding MDN data, the caniuse support table count expands from roughly 500 to 10,500 tables!

hacks.mozilla.org

npm bans terminal ads

JavaScript community's negative reaction to recent experiment kills potential avenue for funding open-source projects.

log rocket

After last week a popular JavaScript library started showing full-blown ads in the npm command-line interface, npm, Inc., the company that runs the npm tool and website, has taken a stance and plans to ban such behavior in the future.

zdnet.com

//For fun

Debouncing and Throttling in JavaScript

This article talks about two important techniques, Debouncing and Throttling, to enhance your website performance. Learn about both concepts with the help of real-life examples and see how you can implement them yourself.

telerik.com

Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative?

As our phones are getting bigger, we need to adjust how we build and design our websites. Is there something to learn from app design and tap bars? Can we fix the mobile navigation of our websites to have a lower interaction cost?

smashingmagazine.com

Can I email  … ?

can i email

caniemail.com

Hello darkness, my old friend

Overhyped or necessity? Learn everything about dark mode and how to support it to the benefit of your users!

safari normal mode

safari dark mode

web.dev

How we learned to stop worrying and love GraphQL

This is the first part of the story of GraphQL experiment at Revolut.

This part will explain:

  • Why started using GraphQL
  • How hacked the proof of concept phase of the adoption
  • How you can do the same in your project

medium.com