Digest of fresh materials from the frontend world for the last week # 437 (October 12 - 18, 2020)

We bring to your attention a selection with links to new materials from the frontend area and around it.

Media     |    Web Development     |    CSS     |    JavaScript

Media

• Podcast "Web Standards" # 251. Chrome 86, Safari and Firefox, the beginning of the UI kit, SSR and Next.js, about Zara and JS marathons

• Podcast "Make Me Beautiful" Issue # 45: 18+ Cool Front End Stories

• CSSSR Podcast: Webpack 5 and Module Federation, Chrome 86, npm 7, Event Loop & Call Stack, Python 3.9, a11y materials

Web development

• We make web applications for the sake of economy - but this path leads us into darkness

• Dark mode: Hello darkness, my old friend

• From HTTP to HTTP 3 - the Internet of the future

• 11 front-end tricks that many front-end developers do not know about

• Web Components: The Complete Guide

• How Real-Time Communication Is Built With Socket.io & Node.js

• 
  
  • :
  
  • NPM 7.0
  
  • webpack: webpack 5
  
  • Webpack 5
  
  • Chrome DevTools
  
  

• 
  
  • Core Web Vitals: - Google
  
  • ?
  
  • - PRPL
  
  • Largest Contentful Paint:
  
  

• 
  
  • CSS , 2:
  
  • Checka11y.css — CSS .
  
  • , CSS
  
  

• 
  
  • , Mark Appleby
  
  • Material Design
  
  •
  
  • Motion Blur CSS Transitions
  
  • -
  
  • CSS
  
  

CSS

• CSS Variables - Young Fighter Course

• 10 Modern Layouts in One Line of CSS

• Advanced CSS-in-TS

• Choosing a CSS Layout - Grid or Flexbox?

• - -var :; hack to toggle multiple values ​​with a single custom property

• Responsive font size using vanilla CSS

• Boolean property enhancements with shortcuts

• The: focus-visible trick

• A selection of 20 animated loaders in pure CSS

• min (), max () and clamp (): three boolean CSS functions to use today

• Layoutit Grid: Visually Explore CSS Grid with a Generator

• New CSS image () function

• User Tracking with CSS

JavaScript

• WorkBox: your toolkit in the world of service workers

• What is WeakSet in JavaScript and how does it work

• Why should you use Top-level Await in JavaScript?

• Getting Started with Modern JavaScript - Proxy

• The Journey to Isomorphic Rendering Performance

• Object Oriented JavaScript: A Little Practice

• Documenting Your TypeScript Projects: Options

• React
  
  • D3 React
  
  • . Part 1
  
  • React Wallaby.js
  
  • Framer Motion — React.
  
  • long-running React -
  
  • Wouter: React Router
  
  

• Vue
  
  • Nuxt Content ( )
  
  • Vue
  
  • VueJS script gadgets
  
  

• Angular
  
  • Angular DI,
  
  • Lazy Load Angular
  
  • Angular LetDirective — 1
  
  • .CSS .SCSS Angular
  
  

• Ember
  
  • yieldable named blocks
  
  

• Svelte
  
  • Svelte , React
  
  • Svelte
  
  

• Libs & Plugins
  
  • Convenient platform for the selection of JavaScript libraries and frameworks - openbase
  
  • Detect GPU - Detects GPUs based on their results in 3D rendering performance tests, which allows the developer to provide reasonable default settings for graphics intensive applications.
  
  • dragmove.js - A tiny Javascript library for dragging and dropping elements into the DOM
  
  • Getting started with Malina.js
  
  • 3 reasons to use fewer JavaScript libraries
  
  

Digest for the last week .

Material prepared dersmoll and alekskorovin .