As usual, there have been minor browser releases at the beginning of the summer. However, Safari beta mentioned along with Typescript and Angular a big update for a quite major release. In addition to the coverage of these updates, the following digest includes a separate section with the articles related to the architecture aspect of software development.
Bootstrap 5’s very first alpha has arrived!
Bootstrap 5 is no longer dependent on jQuery and does not support Internet Explorer. Now it uses custom properties and has an updated look. In Mark Otto’s article, you can learn more about these and other changes to the alpha version of the major update.
Announcing TypeScript 4.0 Beta
Daniel Rosenwasser goes about key changes in the major update: labels for tuples, tuples with a variable number of elements, improved type determination by the flow of execution, assembly acceleration, custom JSX factories, and others.
Ecma International General Assembly Approved ECMA262 Specifications
Version 10 of Angular Now Available
This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI. It is smaller than typically - only four months have passed since version 9.0 of Angular has been released.
Support for IE9, IE10 and IE Mobile has been deprecated and will be removed in the future version. Also, dependencies have been updated: TypeScript updated to version 3.9, TSLib to version 2.0, TSLint to version 6.
Puppeteer v4.0.0 Released: The Node API for Chrome
The popular way to remotely control a headless Chrome instance gets a major version bump. Its main breaking change is that Puppeteer no longer uses Node’s EventEmitter library in order to make it more environment-agnostic. It’s also now “much better at killing lingering browser processes.”
A new stable Firefox version is rolling out
Version 77 comes with a few new features for the web developers: improvements in JS debugging, overflow settings for Network and Debugger, network data preview improvements. Now, the debugger will respect the currently selected stack when stepping. Also, this new version goes with the web platform updates like replaceAll() and accessibility improvements.
Deep dive into lazy loading images
Carles Nunez looks at the source code of Chromium and shares his observations as for when to use native lazy loading.
Safari 14 Beta Release Notes
Get acquainted with the following Safari 14 novelties in upcoming macOS and iOS releases: WebP, web extensions, HTTP / 3, abandonment of Flash, BigInt, logical assignment and public class fields, custom EventTarget, advanced image-set in CSS, pseudo-selectors: is () and: where (), image-orientation, performance and security updates.
Background Patterns, Simplified by Conic Gradients
Simplify background patterns with conical gradients. Ana Tudor shows how to create interesting geometric patterns using conic-gradient ().
Global and Component Style Settings with CSS Variables
Sarah Suidan shares her way of organizing and using styles through CSS variables. Heads up: using scoped CSS variables has also performance benefits because setting and modifying variables defined on a global scope can be expensive & have performance pitfalls due to the large amounts of style recalculations.
Opportunities review of CSS Houdini
Here, Vincent De Oliveira shares his overview of both opportunities and challenges that the Houdini project solves. Be aware of its limitations and growth points.
CSS Trigger Table Guide
Here is Table with CSS properties along with information on how they affect the performance of browser engines.
Multi-colored stripes are showing the following indicators:
- Layout: recalculation of the layout
- Paint: drawing a layout
- Composite: composition of the layout
Is micro frontends architecture a silver bullet?
Luca Mezzalira opens up about when and why developers should take a closer look at the new application architecture for the front-end. Here, you will find some helpful pieces of advice, covering lots of points - from abstraction to implementation.
Everything you ever wanted to know about side effects
Sergio Gomez talks about how to help bundlers resolve dependencies between modules and make an effective use of tree shaking.
Let your PWA act like a native application
Thomas Steiner shows APIs that reduce the distance between native capabilities and web platform capabilities, providing the Apple Podcasts application as an example.
Google Chrome’s upcoming major security update with a redesigned section and a bunch of new tools
Google has announced the release of Chrome's largest browser security update during the recent years. It brings about new tools as well as a redesigned Chrome privacy and security settings section aimed to help with better security control.
React security vulnerabilities you should never ignore
That’s Prayaag Kasundra’s extensive article on vulnerabilities and issues which can affect almost each React application from a security perspective: attacks, authentication leaks, OWASP non-compliance. In brief, the author explains the ways to fix Reactjs Security Vulnerabilities that minimize the chances of security flaws accumulating over time in the web application.
Fighting external link vulnerability
Do you use target = "_ blank" in external links? Sounds innocent, but did you happen to know that the page that the user accesses this way gains partial control over the linking page? Through this link, attackers can carry out a phishing attack using window.opener. In the provided article, the author shares a quick tip on how to prevent interception.
An interactive Cross-Site Request Forgery (CSRF) demo
How the CSRF attack works and how to prevent it: a hands-on beginner's guide in the form of an interactive demonstration of vulnerability from Victor Zhu. You will learn what types of CSRF attacks exist and how to prevent them.
Complete React form validation solutions overview
Here, you can find the overview of the most popular solutions for the form management and validation in React. Supported with the basic usage examples, exhibiting pros and cons, it allows you to compare and select the most appropriate tool for your practice.
Exploring the state of reactivity patterns in 2020
Ryan Carniato reflects on the reactivity of modern libraries. As an analogy, he turns to React, Vue, Svelte and Solid, based on a fine-grained reactivity pattern.
Awesome Vue 3 - A curated selection of Vue 3 resources
What can be better than the repository which includes a set of articles, useful packages and video links? Here you can find it. On top of that, the content is being continuously supplemented.
Svelte basic tutorial notes by a Svelte beginner
In case you decided to give this framework a try, this quick introduction to basic constructions and patterns in Svelte, followed by examples, may come in handy.
Solid is a lightweight and fast React analogue that does not use a virtual DOM and compiles to direct DOM instructions like Svelte. The GitHub project description includes a wide range of ready project examples where you can check the possibilities and key features of the library yourself.
Event listeners and garbage collection
It is useful to get yourself acquainted with a couple of examples of memory leaks when working with asynchronous functions. Besides, you can learn here how to leverage the garbage collector to solve race conditions.
Which extensions slow down your Chrome?
DebugBear has analyzed 1000 popular browser extensions and made conclusions based on the following markers:
- Main thread lock time
- Delayed page rendering
- Processing time in the background
- The amount of memory consumed by the browser
If there are no extensions, the nominal site will load in 40 ms. If you install Evernote or Grammarly, the download time will jump to 500 ms. But before you begin to massively eradicate extensions (or even ad blockers), take a look at their article.
Prefetching? At This Age?
Tim Kadlec figured out the reasons for the strange behavior of prefetch on Netlify and opened up about his findings in the article.
The author connected the Instant.Page library, which helps to load pages in the background using prefetch, tracking the mouse hover over the links and user taps. And if the site was hosted on Netlify, the loaded pages were not taken from the cache after clicking on the links. Instead, they initiated reload. The article explains this behaviour for the popular browsers.
Fixing performance issues in the Node.js web framework Hapi - a performance deep-dive
Mathias Buus covers the full cycle of finding and fixing performance problems with the help of benchmarks, changes in the plugin initialization logic and other stages. After applying all the fixes, Hapi's performance has improved by 30%.
Serverless Express: Easy APIs on AWS Lambda and AWS HTTP API
A component of Serverless Framework focused on deploying Node Express.js APIs to AWS Lambda., serving them up via API Gateway’s new HTTP API approach. Great news to the developers who prefer to focus more on apps rather than infrastructure complexity.
How to Track Your AWS Spending
The AWS-billing-to-Slack tool now can send daily expense reports to AWS in any of the Slack channels. The accounts are categorized, and notifications setup is as simple as possible.
Why you would like to switch from yarn to pnpm
Apart from npm and yarn, there is another little-known package manager called pnpm. Andrew Sprouse wrote an article where he clarified the reasons they chose pnpm for their project.
Having a number of problems with phantom dependencies and given the complication of checks in the CI system, the team compared yarn 2, lerna and pnpm and decided to stick with the latter option.