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!
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.
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.
What's new In DevTools (Chrome 88)
New development tools in Chrome 88 appeared, which can boast a vast range of improvements:
- 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
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Search by operators which are hard to google
Cache for forward and backward navigation
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.
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.
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.
- BigInt and logical assignment operators && =, || =, ?? = added
- Optional chaining support implemented
- Support for EventTarget introduced
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.
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.
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.
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.
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
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.
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.
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.
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.
Madge, a tool for visualizing the import graph of project modules
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.