Digest of fresh materials from the frontend world for the last week # 425 (20 - 26 July 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" # 240: MoscowJS, beta Chrome 85, TypeScript in Svelte, typing and dumps in CSS, what is Numl

• Podcast "Frontend Youth (18+)" # 147: Jenkins takes the code from the Mediazone

• CSSSR podcast : Chrome 84, Safari 14 Beta, Ember Roadmap 2020, Yandex UI Kit, Open Prioritization, Oracle Update

• Podcast "Make Me Beautiful", Issue # 38: Tuples in js, pre-optimization useCallbacks and a pit with SPA

Web development

• It's time to lazy loading offscreen <iframe> s

• Right-hand interface: adapting controls to right-to-left languages

• Yaml for web developers

• Authorization and authentication for everyone

• Google postponed the transition to mobile-first indexing until March 2021

• Full HTML in GitHub README with SVG foreignObject

• Introducing the Jamstack: Building Secure, High-Performance Sites

• Use Chrome DevTools as a Senior Frontend Developer

• 5 Service Worker Caching Strategies for Your Next PWA Application

• 
  
  • HTML/CSS
  
  •
  
  • ADA Website Accessibility Compliance
  
  

CSS

• Modern solutions to old CSS problems: Keeping the footer at the bottom of the page , Elements of the same height: Flexbox vs Grid , Scaling images with CSS

• Native way to color SVG icons

• About Sass conflicts and relatively new CSS features

• Explanation of keywords initial, inherit, unset and revert to CSS

• @property: superpowers CSS variables

• Modern CSS techniques to improve readability

• keyframes.app - a visual online tool that makes it easy to create CSS for animations

• Using Flexbox with text ellipsis

• Animated CSS Underline

• How to use multiple backgrounds in CSS

• When do you use inline-block?

• Online generator of images of three-dimensional books in CSS

• css-media-vars - A new way to write responsive CSS. Named breakpoints, DRY selectors, no scripts, no assemblies, vanilla CSS.

• Beyond Screen Sizes: Responsive Design in 2020

• Realistic CSS Blobs

JavaScript

• Choosing JavaScript dependencies

• A way to understand template literals in JavaScript

• Reactive jQuery for spaghetti code

• Importing non-ESM libraries into ES modules with vanilla JS

• 
  
  • JavaScript
  
  • JavaScript —
  
  • VanillaJS
  
  • ?
  
  

• React
  
  • Debouncing React Hooks:
  
  • React Router. 3— , props +
  
  • SVG React
  
  • React- 3 ?
  
  • Styled-Components React
  
  • React —
  
  • React, 2: React Testing
  
  • 4 React
  
  

• Vue
  
  • Vuex Vue 3
  
  • Electron Vue
  
  • Vue Slots
  
  • Vue 3.0 -!
  
  • Chakra UI Nuxt.js
  
  • Code Coverage Vue
  
  • SVG Vue
  
  

• Angular
  
  • Angular
  
  • Change Detection Angular
  
  • Angular DI:
  
  • 5 , Angular
  
  • Angular + CSS Modules
  
  

• Ember
  
  • The Ember Times — Issue No. 157
  
  • , ember
  
  • Ember.js,
  
  

• Svelte
  
  • Svelte <3 TypeScript
  
  • Svelte TypeScript — - !
  
  

• Libs & Plugins
  
  • doom-scroller.js - a fun JavaScript library that will help you get rid of endless scrolling by adding elements from Doom
  
  • mailgo - a new concept of modal windows for mailto and tel links
  
  • Perfect Arrows - A set of functions for drawing perfect arrows between dots and figures.
  
  

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 .