Digest of fresh materials from the frontend world for the last week # 422 (June 29 - July 5, 2020)

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

Web development

• An overview of scrolling technologies

• Stop coding, let's hit the layouts with automation

• Google launched a beta plugin for publishing AMP stories in WordPress

• The complete guide to dark mode on the web

• Dark times of web development

• Highlighting a fragment of text: how to link to specific piece of text on a web page and highlight it

• Progressive Web Apps: A Practical Guide

• 
  
  • npm 7 package-lock.json?
  
  • ESLint, Prettier TypeScript
  
  • tooling.report — - ,
  
  • DevTools (Chrome 85)
  
  

• 
  
  • 5
  
  • Browserstack SpeedLab:
  
  • JavaScript- ?
  
  • Core Web Vitals, Addy Osmani
  
  

• 
  
  • 6 ( )
  
  •
  
  

• 
  
  •
  
  • 3D ScrollTrigger
  
  • «UI Interactions & Animations Roundup #8»
  
  

CSS

• TailwindCSS - another framework or a new evolutionary step?

• Simplify background images with conical gradients

• Styling containers for web page content

• Create a simple landing page in 5 minutes using ready-made CSS tailwind blocks.

• Accordion Rows in CSS Grid

• Performance - CSS Painting vs. CSS Houdini Paint API

• Custom Shaped Links Using Subgrid

• Get CSS Translate Values ​​Using JavaScript

• Align Logo Images in CSS

• Dynamic CSS Imports

• Fancy CSS Properties

• Responsive images in variable proportions of the container

• When the line does not break. About options for implementing forced hyphenation in lists

• New in Chrome: CSS Overview

• When Sass and new CSS features collide

• A complete guide to CSS media queries

JavaScript

• Lazy loading device in popular front-end frameworks

• How to get screen, window and web page sizes in JavaScript

• Hut on backward-compatible legs - compile JS for the desired browsers

• Tuples in JS / ES and TypeScript in 2020

• Why the vanilla approach JavaScript first "may NOT be the best choice

• A technical guide to SEO with Gatsby.js

• Your blog doesn't need a JavaScript framework

• Learning Regular Expressions: A Beginner's Guide

• 
  
  • ?
  
  • Var, let const?
  
  • double-bang (!!) , JavaScript /
  
  • JavaScript
  
  

• 
  
  • Node 14
  
  • React Web SpeechRecognition API
  
  

• React
  
  • , React,
  
  • React React Testing Library
  
  •
  
  • Typed React Component
  
  • Push- Firebase React
  
  • Server Side Rendering React App Deno
  
  • React
  
  

• Vue
  
  • localStorage Vue
  
  • Vue Demi — , Universal Vue Vue 2 3
  
  • Nuxt Content
  
  • 9 Vue JS ,
  
  • Vue 3: 2020
  
  • Vue
  
  

• Angular
  
  • Angular 10
  
  • Angular Dependency Injection:
  
  • Angular resolvers
  
  • Angular 10
  
  • Angular
  
  

• Svelte
  
  • Building a Notification Center with Svelte
  
  

• Libs & Plugins
  
  • emoji-picker-element - A simple emoji picker distributed as a web component.
  
  • parallax-effect: Parallax effect in javascript using face tracking can be used to enhance 3D scenes
  
  

Browsers

• Firefox 78 release

• Firefox 78 , technical details for developers

• New Chromium-based Edge is distributed with forced OS updates and is intrusive

• Google Chrome has broken its own record, and Windows 10 continues to grow

We apologize for possible typos or broken / duplicated links. If you notice a problem - please write in a personal, we are trying to quickly fix them.

Digest for the last week .

Material prepared dersmoll and alekskorovin .