The first autumn digest introduces useful features that many developers have expected for so long, such as GitHub CLI, as well as some essential notices that engineers should keep in mind for taking the right actions, such as the news about the End of Moment.js support. Also, September turned out to be rich in performance-related articles and the best practices, which are valuable for all of the software development parties.


News

Moment.js to suspend its work

The development team of Moment.js, one of the most popular date and time library, has officially announced suspension of the development and active work that lasted for nine years.

Starting from September 2020, new features will no more be added to Moment.js, tree-shaking issues will not be discussed anymore, and there will be no significant changes. Thus, the engineers do not recommend Moment.js for the new projects, suggesting Luxon, Date.js, date-fns and js-Jode instead. 

momentjs.com

Safari on iOS 14 and iPadOS 14 for PWA and web developers

Maximiliano Firtman composed a vast, about 21 minutes-to-read article about the iOS 14th edition's novelties. The most significant article bullet points are the following:

  • Apple now allows setting your system-wide default browser (a feature available with Edge and Chrome).
  • Support for service workers in third-party browsers has been provided.
  • PWAs use registered service workers and CacheStorage from Safari.
  • Experimental HTTP / 3 support has been added and can be enabled in the settings.
  • JavaScriptCore adds support for BigInt, EventTarget, Logical assignment operator, and Public class fields.
  • Support for WebP image format has been added as well.

firt.dev

Yarn 2.2 version released

This release promises to be lighter and faster. In addition, the new yarn dedupe command is introduced, which aims to deal with duplicates and solve version conflicts and issues with incompatible ranges.

dev.to/arcanis/yarn

GitHub CLI 1.0 is finally available

Recently, the first release of the GitHub CLI 1.0 toolkit has taken place, which provides the ability to manage projects directly from the command line. By leveraging this tool, it is possible to track error messages, create pull requests, display the status of reviews, form issues to releases, and much more.

The tool also involves scripting using the GitHub API. Assemblies are available for Windows, macOS, and Linux (deb, rpm). The code is open under the MIT license.

github.blog

GitHub CLI news

“President Ose” 8.0.0 version of PostCSS

PostCSS 8.0 brings out a new plugin API, node_modules size reduction, better source map support, and CSS parser improvements. Besides, ES6+ sources in the npm package are served without Babel compilation, and the support of some of Node versions has been terminated.

github.com


Frameworks

v3.0.0 One Piece - the major Vue release is here!

The major Vue's development took two years. The codebase was written entirely in TypeScript. The whole framework was split into modules, and any part of the framework can be used in any other framework if desired. Moreover, the framework was developed with three-shaking support in mind. Here is the list of just a few of the updates introduced:

  • support for TS in templates has been added;
  • a new rendering system has been implemented by integrating template compilation into optimized Virtual DOM rendering functions;
  • server-side Rendering has been accelerated;
  • a new composition API has been added to improve the reuse and organization of the component code;
  • in terms of bundle size, performance has been significantly improved compared to Vue 2.

github.com/vuejs

Comparing React and Web components

Matias Huhta builds a simple application using Lit-Element and React and compares these two approaches in three different environments: React, Lit-Element, and HTMLElement (vanilla JS).

In the article, he tells about a simple implementation of a small form, in which a user can insert the desired width and height of a random cat picture and then receive it by querying the PlaceKitten API. He also took care of the starter kit and instructions that are available for everyone interested in this "trick”.

matsu.fi

Expanding single-page apps into multiple browser windows

The article introduces the neo.mjs framework, whose main feature is dividing the SPA into related parts that you can work with from different windows/tabs. 

Neo.mjs under the hood makes extensive use of SharedWorker, a special kind of worker that can be accessed from different browser contexts. 

This framework leverages the use of at least three different workers:

  • VDOM Worker (working with Virtual DOM);
  • Shared App Worker (general application state);
  • Shared Data Worker (working with data).

medium.com/swlh


Performance

A high-performance blog template for 11ty

Eleventy (11ty) is a static website generator that is actively gaining popularity. Google, Khan Academy, Netlify use it. Malte Ubl, an engineer at Google, recently posted a template for 11ty that has been optimized for building high-performance websites, which allows:

  • generation of different image sizes and their insertion into srcset;
  • extracting the dimensions of the images and using them in the width and height attributes (Cumulative Layout Shift problem overcome);
  • usage of inline CSS and automatic removal of unused styles;
  • fonts preload and lots of other useful things.

industrialempathy.com

Performant front-end architecture of the SPA applications

The DebugBear has published an article with an overview of performance improvement techniques, where they showed a bunch of factors that can slow down the SPA page at different stages of the loading process and described a couple of ways of overcoming performance issues. The majority of recommendations seem to be apparent, but are still great to keep in mind, especially for beginners:

  • avoid sequential render-blocking request chains;
  • skip the network with service workers;
  • consider using server rendering.

debugbear.com

How to leverage Content Delivery Networks (CDNs) to improve site performance

CDN (Content Delivery Network) is a geographically distributed network infrastructure that improves website performance using a distributed network of servers. Since CDNs reduce server load, they also lower the costs and can be used for handling traffic bursts.

This article explains how CDNs work, examines image optimization, caching, TLS 1.3, HTTP / 2, HTTP / 3, and much more.

web.dev/content-delivery-networks

CDNs Leveraging


How Goibibo's PWA improved conversions by 60%

Goibibo, India's leading online travel booking portal, shared the insight on how the PWA creation affected the Indian flight business search engines: a detailed overview with the results of implementing specific APIs like Contact Picker or Web OTP. A small bulletin: Goibibo achieved a 60% increase in conversions compared to their previous web flow.

web.dev/goibibo

Core Web Vitals: Wix vs. WordPress, Shopify vs. Shopware... Which is the fastest?

Johannes Boyes published the results of the performance analysis of a large number of sites. The study includes 18 million domains with statistics on the technologies used (CMS, CDN, programming languages, etc.) and data from different devices.

Among the CMSs, Jimdo and Typo3 demonstrated the best performance metrics, while WIX turned out to be the slowest, followed by WordPress. As for the frameworks, Ruby on Rails boasted superior results, while the sites that use Angular turned out to be extremely slow instead. Even though the author puts a special emphasis on the data gathered in the UK, global data here is nor less representative. By no doubt, this is a must-see resource on the topic of performance.

sistrix.com


Security

More safe and private browsing experience with Secure DNS

Google officials claim that the Android version of Google Chrome 85 will soon support DNS-over-HTTPS (DoH), which encrypts and secures DNS queries to improve user privacy. In order to get a more insightful look into the specifics of its work and the benefits it offers, it is a great idea to check the article by the link provided below.

An interesting fact - DNS has been around for 35 years, and the implementation of DoH in Chromium has taken two years since there was a risk that a rushed execution could damage services using old DNS behavior. Finally, the feature has been presented, and it is undoubtedly worth trying.

blog.chromium.org

How to ensure REST API security

Web API calls make up over 80% of all the web traffic, and mostly, cybercriminals choose APIs as the main target. Thus, securing web APIs are of vital importance. 

REST API is the most common type of Web API for web services, so this article covers a vast amount of simple tips on how to protect APIs: response security headers, content type validation, API access control, etc. These commonplace recommendations may seem too easy, but following them contributes significantly to resource protection. 

netsparker.com


CSS

Comparison of the most popular CSS frameworks: 2020 edition

This blog post covers the group of trending CSS frameworks, based on user reviews of the popular dev platforms and resources, like GitHub, Stack Overflow, and StackShare. It reveals the basic information about each framework: core concepts, size, features, grid characteristics, and learning curve. Pros and cons, assembled in the article, aim to help web developers select the most suitable CSS framework among the full-featured frameworks (Bootstrap, Bulma, UI Kit, and Foundation) or Material Design based ones (Materialize CSS).

dev.to

The definitive guide to stroke text in CSS

John Negoita wrote an article with a versatile approach to creating stroke text by means of different CSS properties such as -webkit-text-stroke, text-shadow, CSS SVG filters, or SVG text outline. Moreover, plenty of examples and code pens include the cases with HTML5 Canvas, which altogether opens the doors to opting for the proper attitude and becoming a CSS stroke text jedi!

coding-dude.com

Stroke Text SVG

Building website headers with CSS Flexbox

As usual, Ahmad Shadeed has written a great post covering useful stages of layout creation. In this particular case, he examines building headers with Flexbox, which, in the author's opinion, offers a bunch of advantages, such as simplicity and fully responsive design.

The step-by-step instructions and versatile viewpoints described in the article are likely to push you to refactor some of your header menus.

ishadeed.com

CSS Values: a book of reference for web developers

CSS Values is a handy resource that lets you search for almost any CSS property and easily get a list of possible values. For now, it includes 397 filtered properties and categories available on the first page, along with the clear-cut descriptions, browser support, and references to MDN and W3C.

cssvalues.com

Easy-to-implement 3D typography for the web

It is not really about CSS, but this tool looks very entertaining in the context of fonts subject. It works with all the fonts and makes life easier for those who find a similar UI solution but are not eager to go with Canvas or WebGL libraries.

bennettfeely.com


JS

Prepare to the support for native private fields and methods in JS

In this article, Mahdhi Rezvi shares some insights into private class fields and methods, which get supported by many browsers. An underscore and the rest of “workarounds” for identifying fields as private, which were previously used, are now replaced with a hash. Even though it doesn’t work as smoothly as in the other languages and the article describes some of the pitfalls, this is still an excellent feature to test out.

blog.bitsrc.io

An introduction to running Lighthouse programmatically

Katy Bowman gives a brief introduction to Lighthouse, discusses the advantages of running it programmatically, and examines the basic configuration. Besides, she offers an instructive example of an automatic Lighthouse launch for more efficient website quality monitoring.

smashingmagazine.com

Features "real-time" overview: ECMAScript 2021

Should you be interested in the upcoming features to be included in the ECMAScript 2021, check out a list of features compiled by Axel Rauschmayer, where the info gets regularly updated. Once the feature has reached stage 4, it can be used safely. However, even then, it is better to check if your engines support it. Additionally, there is a list of potential "candidates" - features that reached stage 3 and can be accepted further.

2ality.com


Testing

Writing a Debug Script

Hugo Giraudel shares a set of snippets to help determine environment settings like internet connection, VPN access, detecting Mac version or nvm, or latest npm installed, identify whether Docker is running, and many more other settings. This info can be highly useful or even crucial in case you cannot access this data from remote or need to share it across the team rapidly.

hugogiraudel.com

Detox - gray box end-to-end testing and automation library for mobile apps

Detox will be useful for mobile app developers who want to leverage automatic E2E testing platforms. It allows you to test your mobile app while it's running on a real device/simulator, interacting with it just as a real user. Besides, Devox has a bunch of noteworthy advantages:

  • It is cross-platform ( iOS and Android)
  • It gets automatically synchronized
  • It is CI focused
  • The test runner is independent and debuggable.

github.com/wix


Node

Top 11 Node.js ORMs, query builders & database libraries in 2020

Choosing an ORM or a query builder for the website can be daunting. But the Prisma team did a great job and summarized the most popular Node.js query builders, ORMs, and database toolkits using such criteria as popularity, repo activity, developer support, project maturity, and stability. 

Furthermore, the article includes the list of notable features and even code snippets for a wide-spread and not too big libraries such as Mongoose, Knex.js, Sequelize, Bookshelf.js, and, obviously, for Prisma itself. 

prisma.io

Node.js resiliency concepts: recovery and self-healing

Andrei Gaspar from AppSignal goes on about some tools and concepts which can help servers become more resilient and reliable. Besides, there is a variety of ways of improving process management and server management skills with tools like Docker, Kubernetes, pm2, and supervisor.

blog.appsignal.com

A TypeScript ORM for Node - MikroORM 4 version is out

MikroORM is a TypeScript data-mapper ORM with Unit of Work and Identity Map, which supports MongoDB, MySQL, PostgreSQL, and SQLite drivers. It was released this month. The key features of the ORM are the following:

  • Implicit transactions
  • ChangeSet based persistence
  • Identity map

With a new edition, there are plenty of improvements and features worth trying out.

medium.com/dailyjs


Final Thoughts

As usual, the work on open-source projects continues, and this month, everyone is encouraged to join the community and participate in Hacktober fest. Contribute to the open-source, and get your reward - a new limited-edition T-shirt.