November was abundant in releases and novelties for both front and back end developers. This digest includes some extra bits for accessibility, and additionally, it introduces a couple of beneficial tools discovered during the previous month. Enjoy the reading!

News

HTTP Archive released Markup draft of Web Almanac

A draft of the Web Almanac report has been released based on a markup of more than 7.5 million pages: doctypes, document size, language, comments, scripts, variety of tags, attributes, viewport, favicons, and others. 

Some unexpected facts have been encountered in this draft, though. For instance, in 2020, nearly 4% of analyzed pages still have a quirky doctype. Follow the link to check out some further trends along with statistics. 

almanac.httparchive.org

Intent to remove HTTP/2 and gQUIC server push

Server Push is an HTTP/2 feature, thanks to which the server can send resources to the browser without waiting for explicit requests from it. GQUIC is a non-standard protocol developed by Google that also allows you to push resources. 

Chromium developers plan to remove server push support for HTTP/2, gQUIC, as well as from the future HTTP/3, due to the low demand for the technology. According to Google statistics, push is used in only 0.05% of connections. Also, the implementation of push notifications in the code is quite complex and expensive to maintain.

groups.google.com

What's new In DevTools (Chrome 88)

New development tools in Chrome 88 appeared, which can boast a vast range of improvements: 

  • Faster launch (~37% faster in terms of JavaScript compilation)
  • Visual gradient editor
  • Ability to turn off support for some image formats for testing purposes
  • Simulation of storage quota size in the Storage pane
  • Web Vitals in the Performance tab, and others

developers.google.com

TypeScript 4.1 release updates

For this release, contributors have prepared a bunch of features, new checking flags, editor productivity updates, and speed improvements.

  • Template Literal Types have been added, which allow describing types consisting of several string literal types. New utility types have been added for string manipulation - Uppercase, Lowercase, Capitalize, Uncapitalize.
  • Keys remapping in mapped types. It can be used to filter the properties of object types, or to create new object types with keys using literal template types.
  • Full support for recursive conditional types is now available, which can be useful for describing the types of recursive structures.

There are several breaking changes. Conditional spreads create optional properties. It is imperative to include the resolve function parameter on promises. And if the falsy-position in the conditional expression returns type any/unknown, then any/unknown will be propagated to the whole expression.

devblogs.microsoft.com

Next.js 10 released: image optimization, internationalized routing, React 17 support 

Next.js new version has got some fancy updates:

  • Automatic optimization images using the new next/image component
  • Built-in primitives for internationalizing your Next.js applications
  • Analytics (incorporating Web Vitals) as well as Next.js Commerce, which is a collaboration with BigCommerce
  • React 17 support as well as CSS import from the third-party React components

nextjs.org


CSS

Responsive web design and browser height 

Ahmad Shadid discussed why testing a vertical adaptation is essential, how it can be achieved with media queries, and of course, supported his statements with plenty of examples and use-cases. Wrapping up, the author suggests taking a break from the focus on the window's width and remembering that you sometimes need to adapt the interface to the height.

ishadeed.com

CSS web design

Prevent layout shifts with CSS grid stacks

Hubert Sablonnière describes a typical issue with layout shift and the problem with conditional content height he faced with a component he worked on. Then he also discusses the limitations of solving it with absolute positioning and the benefits of solving it with the grid. It can be especially useful for the projects with internationalization, where text content changes the layout.

hsablonniere.com

Creating websites with prefers-reduced-data

In Chromium-based mobile browsers, users can enable an option to reduce traffic consumption. On the client's side, you can check the status of this option using the navigator object. The problem is that it is only available from JS. The new prefers-reduced-data media expression enhances page customization by making the current status of an option available at the style level.

The article introduces examples of using prefers-reduced-data. With it, you can make conditional loading of fonts, change or disable the page background, load smaller images, disable automatic loading of new data when scrolling the page, and lots of other things.

Prefers-reduced-data is currently available in Chromium-based browsers under an experimental flag.

polypane.app


A11y

Why ARIA at all? 

The pilot of Haydon Pickering's new video series of Webbed Briefs: what ARIA is, which accessibility problems it solves, at what point to apply it, and how it can be made worse. An interesting fact is that the author abandoned the usage of Youtube. In addition, he offers subscribing to the mailing list.

briefs.video

Not so short note on aria-label usage – Big Table Edition

Steve Faulkner explains how the aria-label attribute works with various HTML elements answering the common questions, such as whether aria-label is allowed for most-used HTML tags. To these, he also adds some specific notes regarding any single tandem usage.

html5accessibility.com

A11Y Websites - a showcase of accessible websites

A renewable collection of websites assessed with both automated and manual testing. The success criteria are those set out in the Website Content Accessibility Guidelines (WCAG) 2.1 to grade AA and higher. Any site can be submitted to the collection on condition that its WCAG accessibility level is at least AA.

a11ywebsites.com


Performance

Site-speed topography

Harry Roberts talks about building a speed map of the website, gathering necessary data, and visualizing it in a presentable way. Furthermore, all of this information can be seen without a need to visit DevTools or view a single line of source code. This is the approach that can be taken on each project you’d like to audit, so you can identify what issues might need investigation first.

csswizardry.com

Timing for bringing page experience to Google Search

A couple of months ago, Google announced that performance metrics would count to the ranking. It is alleged that this will happen in May 2021. Website owners are encouraged to optimize their website based on Web Vitals metrics. Hence sites with good user experience will be highlighted in search results. Moreover, starting from May 2021, not only AMP sites, but also the regular sites working quickly will be included in the news.

webmasters.googleblog.com

TypeScript performance improvements from Microsoft

Daniel Rosenwasser, an active contributor to the TS wiki, has come across some useful tips.  Beyond best-practices, there are several common techniques for investigating slow compilation/editing experiences, some common fixes, and some ways of helping the TypeScript team investigate the issues as a last resort.

github.com/microsoft

Detached window memory leaks

For sure, memory leaks affect the application's performance. A particularly tricky class of memory leak occurs when an application references objects that have their own lifecycle, like DOM elements or popup windows. These types of objects can get unused without the application "knowing" that, which means the application code may have the only remaining references to an object that could have otherwise been garbage collected.

Jason Miller and Bartek Nowerski show how to profile memory in the browser and explain how to deal with references to objects that should be cleaned up in the GC.

web.dev


JS

Three steps to go from JavaScript to WebAssembly

A developer of the Micrio storytelling platform Marcel Duin tells the tale of upgrading their Web client's performance by moving from a pure JavaScript approach to one turbocharged with WebAssembly. He opens up about how he has moved a small piece of the app, expanding to the bigger code blocks, also - about benchmarking, optimization, and conclusions after this experience. 

engineering.q42.nl

Search by operators which are hard to google 

Josh Comeau has prepared a guide to JavaScript operators that are hard to Google because they are made up of special characters. Also, the search includes code snippets and links to MDN.

joshwcomeau.com


Browsers

Cache for forward and backward navigation

Bfcache is an in-memory cache that stores a complete snapshot of a page (including the JavaScript heap) as a user is navigating away. With the entire page in memory, the browser can quickly and easily restore it if the user decides to return, which is supported by Firefox and Safari for a long time.

Philip Walton dives into a bfcache a bit deeper, describing in a nutshell how the mechanism works and how to optimize the web applications for it.

web.dev

New items in Chrome 87 in the review by Pete Lepage

A new Chrome update brought changes that may be interesting for web developers.

For instance, Service workers can now receive chunks of files using HTTP range requests. Previously, different hacks were used for this; since Chrome 87, they are no longer needed.

There is now full support for web cameras with pan, tilt and zoom functions (PTZ - pan, tilt, zoom).

Origin Trials now have support for the Font Access API to access locally installed fonts. It's useful for design programs like Figma, Gravit, Photopea.

Last but not least, there are a lot of changes in Chrome DevTools. A tool for visual debugging of grids has been added along with the Web Authentication API emulation. Lighthouse has been updated to version 6.4 supporting font preloading validation for font-display, optional source map validation and experimental features for detecting large JavaScript libraries.

developers.google.com

Two months after release, Safari 14 official changelog

A new version of Safari was presented at WWDC 2020 in the summer, but only a couple of days ago, an official post with an overview of innovations appeared in the WebKit blog.

Safari now supports Web Extensions, a set of APIs for creating cross-browser extensions using standard web technologies.

Many changes have been introduced to improve browser and site performance. Loading of new pages has become 13% faster, loading of previously visited pages - 42-52% faster. The time for closing tabs has been accelerated from 3.5 seconds to 50 milliseconds. Support for incremental PDF download has been implemented, and support for HTTP/3 has been added.

Also, Safari 14 introduces WebP support. WebP is now supported in all the current browsers.

In addition, the development team has taken actions to prevent unwanted shifting of content while loading responsive images. For that, Safari determines images' dimensions and reserves space based on the values ​​of the height and width attributes.

JavaScript engine has received the following updates: 

  • BigInt and logical assignment operators && =, || =, ?? = added
  • Optional chaining support implemented
  • Support for EventTarget introduced

webkit.org

New in Firefox 83 release

A Firefox team has made a fresh release in the middle of the month with the following novelties:

  • A new optimizing JIT compiler Warp (or WarpBuilder) has been added to the SpiderMonkey - Firefox JS engine. Thanks to it, page loading got accelerated by 15%, and the overall memory consumption was reduced by 8%
  • Firefox introduces HTTPS-Only Mode. With HTTPS-only enabled, all the established connections will use HTTPS. If a secure connection cannot be established, an error message will be displayed with the option to navigate to the resource via HTTP
  • Firefox can now fill out, save and print AcroForm PDF forms using the built-in PDF viewer
  • Added pinch-to-zoom to Windows (for touch displays) and macOS (for touchpads)
  • Improved screen sharing interface

However, the share of updates for developers' part is not big enough here: in case you want more, you can also check the second link.

mozilla.org

developer.mozilla.org


Frameworks

How to manage user preferences in React

One more article about user preferences, and this time it is about some particular React implementation alternatives. Hugo Giradel offers the React solutions that will allow you to conveniently take into account and limit animation and traffic or choose a suitable light or dark theme, depending on the browser settings.

hugogiraudel.com

Marko.js - SSR-first framework from eBay

Marko.js is not as popular as Angular, React.js, Vue.js, or Svelte. Marko.js is an ebay.com project that has become an open-source property since 2015. In fact, the eBay website is built on this library, which clearly states that it is worth our attention.

On the main page, developers specify quite promising benchmarks of performance comparison with the frameworks mentioned above. Anyway, Marko.js offers high speed and can be a savior for high-load solutions.

markojs.com

Version 11 of Angular now available

This version of Angular brings many improvements, such as the following:

  • Improved infrastructure for testing components
  • Improved display of reporting and logging information about the build process
  • Improved Hot Module Replacement (HMR) support
  • The build is now faster thanks to the migration to TypeScript 4.0 and improvements in Angular compatibility compiler (ngcc)

Additionally, experimental support for Webpack 5 appeared. TSLint is officially deprecated, so it is recommended to switch to ESLint. Support for IE9, IE10 and IE mobile has been finally removed.

What is remarkable is that the Angular team is starting to work more with the community and have presented a public roadmap. 

blog.angular.io


Node

NodeJS November releases updates

Over the last month, there have been a couple of minor releases on Node.

Node 15.1.0 presented a new experimental module - Diagnostics channel, which provides an API to create named channels to report arbitrary message data for diagnostics purposes. It is also now possible to set the local IP address used by a Resolver instance to send its requests. V8 and Worker instances got additional mechanisms for profiling and performance analysis. 

The further releases of v15.2.0 and v15.3.0 are smaller and include the following novelties:

  • An abort signal to stop an ongoing read or write with fs.writeFile (example) or fs.readFile introduced
  • Support for abort signal added to http.request
  • A cancel() method to the promise Resolver added

github.com/nodejs

Best practices for designing pragmatic REST APIs 

A language agnostic article by Vinay Sahni about essential things to take into consideration when creating API design. A pretty comprehensive overview of key requirements, planning of API urls, documentation, versioning, HATEOAS, error handling, and many other useful topics.

vinaysahni.com

Socket.io 3.0 released -  realtime bidirectional communications framework for both Node and browser

 Socket has been around for many years and has been the ‘go to’ system for bidirectional browser/server communications working in almost every browser. It still works great, and, happily, the question of why you might still use socket.io (plus some alternatives if you don’t) is answered in these release notes. 

Besides, this major release includes a couple of palatable updates, like auto-reconnection, broadcasting data to a given set of clients, and fallback to HTTP long-polling if anyone still needs it.

socket.io


Tools

Upptime - GitHub-powered open-source uptime monitor and status page 

Upptime is a tool that utilizes Using GitHub Actions in order to monitor web pages every 5 minutes and stores version-controlled response time stats. It provides an excellent status page powered by Svelte with outage history and long-term trend charts, and the icing on the cake - integration with Slack, Telegram, and custom webhooks.

upptime.js.org

Upptime tool


Typesense - an open source search engine for fast and relevant results 

Typesense, a free, open-source alternative to Elasticsearch and Algolia for fast search implementation, offers many out-of-the-box advantages, like typo tolerance, curation, merchandising options, sorting, filtering, and, of course, speed.

typesense.org

Madge, a tool for visualizing the import graph of project modules

Madge is a development tool for generating a visual graph of your module dependencies, finding circular dependencies, and giving you other useful info. It works for JavaScript (AMD, CommonJS, and ES6 modules) and CSS preprocessors.

github.com/pahen


Final Thoughts

The festive mood is approaching us despite the harsh 2020 year. Probably, December will not meet us with many updates and releases, so it can be a great time to participate in 12 CSSBattle by the 21st of December.

Besides, if you aren’t a front-end lover, have some fun and check out this video covering absurd NPM packages that would rather not exist: is-odd, is-is-odd (yes), if, emoji-poop, and other masterpieces of the NPM ecosystem.