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.
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
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
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.
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.
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
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.
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
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]
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.
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.
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.
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
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
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.
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.
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.
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
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.
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
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.
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
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.
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.
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.
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.
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
