Performance

Google PageSpeed Insights: The Truth About Scoring 100/100

Extensive article on ways in which the website Google PageSpeed Score does and doesn’t matter, includes guidelines for putting the platform’s recommendations to work in order to improve its performance.

kinsta.com

Dealing with memory leaks 

Memory leaks in web applications may often go unnoticed, but if they are - it becomes a problem when someone pays extra attention to the production performance metrics. This blog post covers few approaches that may help to identify memory leaks and ways to avoid them

nolanlawson.com

In-Browser Performance Linting With Feature Policies

Post describes performance checks in the browser using Feature Policies. Tim Kadek tells how, using the relatively new feature - Feature-Policy header, server can prevent the browser from working with non-optimized resources

Interesting

This category will further consist of some open-source project implementations with unusual approaches, creative thinking and features, which didn’t fit any other category :)

Lightweight JS Jira twin

Simplified Jira twin built with Babel flavored JavaScript and React, while the API is built with TypeScript and Express, TypeORM. Amusing showcase where you can find features, which may be adopted to personal projects. Demo included

github.com

Musical JS

Interesting projects help to study the topic with much more enthusiasm. Here is another such project for training: fully functioning piano keyboard using vanilla JavaScript.

freecodecamp.org

Modest collection of cheatsheets (not only JS)

A selection of 383 cheatsheets and tips for various technologies - CLIs, DevOps, browsers and many others. Page includes syntax explanations which are worth bookmarking.

devhints.io

What’s like to build an own purpose browser?

Can front-end developer create its own browser? Kilian Valkhof shares his experience in developing a Polypane browser tailored for front-end tasks

kilianvalkhof.com

An extremely fast JavaScript bundler and minifier

Esbuild - experimental bundler and minifier for JavaScript projects, written on golang. The benchmarks look pretty promising comparing with other similar tools.

github.com

Repo with AWS security configurations and best practices

A free repository with list templates for secure cloud infrastructure. Includes customizable AWS and Terraform security configurations and best practices

asecure.cloud

New

GitHub CLI is now in beta

Supercharge your command line experience: GitHub CLI is now in beta. It brings pull requests, issues, and other GitHub concepts to the terminal next to where you are already working with git and your code. The quick sample of usage: to view detail on any command, use

gh [command] [subcommand] --help

  • gh pr [status, list, view, checkout, create]
  • gh issue [status, list, view, create]
  • gh repo clone <repo> [flags]

cli.github.com

A flexible, type safe routing library - Type Route

Beta version of Type Route, new routing library built on top of the same core library that powers React Router. In addition, its developers claim that Type Route's API was designed to fully leverage TypeScript's type inference power. Check the documentation and examples to see the library in action.

type-route.org

Prepare yourself for Web NFC

Developer tutorial here

Web NFC aims to provide sites the ability to read and write to nearby NFC (Near Field Communication) tags in a secure and privacy preserving manner. New experimental API for NFC-tags is presented to implement such interaction.

github.com

An experimental JavaScript toolchain Rome is growing!

The creator of Babel and Yarn introduced Rome, an experimental set of tools designed to cover all the needs of JavaScript development: compilation, linking, formatting, bundling and even testing.

github.com

New Chrome 80 release

The new Chrome 80 in Pete Lepage review: modular workers, optional chaining, periodic background synchronization, Contact Picker API, scheduled notifications, notification triggers and others. Read more in the article or check out the video

developers.google.com

Firefox - 73 version is out as well

New release of Firefox - 73 version is out! Two major improvements of this release:

  • Firefox has offered a page zoom feature for more than a decade that allows users to set the zoom level on a per-site basis. This option is available in about:preferences under "Language and Appearance" and can be scaled up or down from 100% as needed and sets the default zoom level for all sites. 
  • Introduced a “readability backplate” solution which places a block of background color between the text and background image. Now, websites in High Contrast Mode are more readable without disabling background images.

Other features:

  • Improved auto-detection of legacy text encodings on old web pages which don’t explicitly declare the text encoding.
  • Dev Tools: CORS errors now appear as errors in the console (and no longer as warnings) giving them the appropriate visibility
  • CSS: added properties overscroll-behavior-block and overscroll-behavior-inline, the logical mappings for overscroll-behavior-x and overscroll-behavior-y
  • DOM: The innerWidth and innerHeight properties on Window objects have been updated to return the width and height of the layout viewport in all situations

hacks.mozilla.org

Electron gathers momentum - check Feb release

Electron 8.0.0 Released — The popular cross-platform desktop app development toolkit takes more steps forward, mostly in the area of dependencies, by moving to Chrome 80 (which only came out this week itself), V8 8.0, and Node 12.13. IPC communication now uses a new algorithm which is a lot faster for large and complex objects too. Offscreen rendering is currently disabled, however, so don’t upgrade if you depend on it.

electronjs.org

Improvements of Ionic 5

Ionic 5 release includes iOS 13 design updates, a brand new API for creating its own custom animations, revamped Ionicons, updated Ionic colors, new starter designs, improvements to component customization, and more!

All of these changes are made in the core of Ionic Framework, which also applies to Angular, React, and Vue (beta) integrations.

ionicframework.com

The latest TypeScript upgrade emphasizes type-only imports and exports and ECMAScript standards compliance. Other improvements promised in TypeScript 3.8 include:

  • “Fast and loose” incremental type-checking, featuring a compiler option, assumeChangesOnlyAffectDirectDependencies. This option can reduce build times in certain files, as TypeScript will recheck/rebuild only files that have changed as well as files that directly import them. It is recommended for large code bases where developers are willing to defer full project errors until a later time.
  • Implementation of the export as * ns syntax, providing a single entry point to expose all members of another module as a single member.
  • Top-level await, an upcoming ECMAScript feature to remove restrictions on using an await expression at the top of a file under specific conditions.
  • A watchOptions field in tsconfig.json and jsconfig.json lets users tell the compiler/language service which file watching strategies to use to keep track of files and directories.
  • Stricter assignability checks to unions with index signatures, a breaking change.

devblogs.microsoft.com

Angular is on Ivy compiler! Check it’s one of biggest updates in last 3 years

Angular 9.0.0 released. Stephen Fluin talks about key changes: 

  • moving to the Ivy compiler, which brought dozen of improvements: smaller bundle sizes, improved type checking, debugging and testing
  • improving of CSS class and style binding
  • Improved build times, enabling Ahead-of-Time compiler by default and others

blog.angular.io

JS

Visualizing memory management in V8 Engine

Deepu K Sasidharan has written a series of articles where he worked on demystifying core concepts and working principles of V8 and JS. IN this article he gives an extensive insight to memory management in V8 Engine (JavaScript, NodeJS, Deno, WebAssembly) with visualisation blocks.

deepu.tech

Tools

Check out an updated version of the Grafana App for Kubernetes plugin

DevOpsProdigy KubeGraf — an updated version of the Grafana App for Kubernetes plugin, this plugin allows you to visualize and analyze your Kubernetes cluster’s performance. It demonstrates in graphics the main service metrics and characteristics of the Kubernetes cluster. It also makes it easier to examine the application’s life cycle and error logs.

Detailed info how to use it can be found via link

grafana.com

Css

A super handy list of 300+ CSS properties with samples

There are more than 500 CSS properties but the browsers only support around 300+ properties. Enthusiasts from Web4College created the list of 300 CSS properties with values which the current browsers support along with examples.

web4college.com

How browsers resolve competing CSS styles

The CSS Cascade is one of the most powerful parts of CSS. To reveal more information on  how browser selects which of competing styles declaration to apply - check the article of Amelia Wattenberger

wattenberger.com

CSS Custom Properties for dark mode

Michelle Barker shares knowledge on how to make a dark theme option and how it  can be beneficial for accessibility, as some people experience headaches or visual difficulties from excessively bright screens, or have trouble reading for long periods on a light background.

css-irl.info

Lesser-known CSS display values you probably didn’t know

Right now, display property single-value syntax feels kind of incomplete and doesn't always let you specify both inner and outer display type explicitly. Sometimes it's hard to figure out right away how the element behaves. Ekaterina Vujasinoviс explains work of lesser known CSS display properties inline-flex, inline-grid, flow-root, list-item, contents and ruby, which may help you to achieve desired layout behavior.

dev.to

Testing

Baretest - an extremely minimalistic alternative to Jest

Baretest is a fast and simple JavaScript test runner. It offers near-instant performance and a brainless API. It makes testing tolerable.

Despite the fact that Jest is currently the most popular option and developers seem to value it's speed and ease of use, baretest is an alternative for developers who genuinely value performance and usability.

volument.com

Browsers

Demystifying Browsers: guide

Revealing the secrets of browsers: Eric Lawrence from the Microsoft Edge team with an overview of resources that will help you learn how browsers are organized and work.

textslashplain.com

Could browsers fix more accessibility problems automatically?

Thoughts on how browsers could help to overcome a bunch of accessibility issues themselves and what can probably happen in upcoming browser releases

hiddedevries.nl