The digest of fresh materials from the world of the front-end for the last week No. 379 (September 2 - 8, 2019)

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

Media | Web Development | CSS | Javascript | Browsers | news

---

Media

• CSSSR Podcast: News 512 - Chrome 77, Django 3.0, More on Github Actions, CSS Grid Gantt and Apple Presentation

• Podcast Frontend Youth (18+): # 106 Senior knows the price of govnokode

• Frontend Weekend podcast # 97 : Vsevolod Rodionov on how to build a development career instead of a sailor’s career

• Podcast “Devshahta / Night Frontend” # 94 : Pavel Malyshev defends and promotes Svelte

Web development

• Accordion, faq, spoiler and other drop-down widgets

• New types of micro-marking for advanced interactive snippets

• Frontend Architecture: Middle Circle

• Apple just launched web components on production, and you probably missed it

• Instruments
  
  • Custom theme in Chrome DevTools
  
  • What's New in DevTools (Chrome 78)
  
  • TypeScript Debugging in Firefox DevTools
  
  • Webpack Boilerplate - minimum Webpack 4 boilerplate with Sass, ESLint, Hot Module Replacement and development / production optimization
  
  • 5 Tips for Firefox DevTools - Storage Inspector
  
  • Chrome 77 - What's New in DevTools
  
  • "Globalization Tools - The State of the Web." New video on google developers channel with Andrei Sitnik as an invited guest
  
  

• Availability
  
  • Inclusive components: theme switch
  
  • So, you are being sued for non-compliance
  
  

• Performance
  
  • Features of Google PageSpeed: improved site rating and search ranking
  
  • Web Performance Audit Checklist
  
  • Web Performance: Minimizing DOM Reflow / Layout Thrashing
  
  • Why do I preload the font, even if there is no need
  
  

• Effects
  
  • How to dynamically change the colors of product images using CSS Blend Mode and SVG
  
  • Configurator for creating custom distortion effects on WebGL
  
  • Creative Inspirational Websites Roundup # 8 creative selection
  
  • How to create Webcam Audio Visualizer using Three.js
  
  

CSS

• Everything You Need to Know About CSS Margin

• Tool for comparing CSS frameworks

• Crop and visual data loss in CSS

• Understanding CSS Specificity

• Using PostCSS to Automate Your Workflow

• Various methods for expanding a rectangle while maintaining border-radius

• My favorite CSS hack

• CSS Variables for IE11: True Polyfill for Custom Properties in IE11

• What are CSS developers doing and why are they needed?

Javascript

• Animation of links in the browser bar using JavaScript and emoji

• The 5 Commandments of TypeScript Developer

• How to optimize your JavaScript application with the service of workers

• Should the site work without JavaScript?

• Simple Homemade JavaScript Obfuscator

• How JavaScript Works

• Theory
  
  • Professional use of the DOM
  
  • How to do trim lines in JavaScript (ES2019)
  
  • How to speed up the spread statement in JavaScript
  
  • Asynchronous JavaScript: An Introduction to JavaScript Promises
  
  • 8 Habits to Avoid When Developing in Javascript
  
  • JavaScript Iterators and Generators: Asynchronous Iterators
  
  

• React
  
  • 14 Tips for Writing Clean React Code: Part 1 , Part 2
  
  • Model-Based Testing in React with State Automata
  
  • Why is React doing this?
  
  • Documentation and preview of ReactJS components with JSDoc
  
  • Adding a progress bar and notifications to your React app
  
  • Migrating from JavaScript to TypeScript on a real React project
  
  • React Microfrontends and Monorepos: the perfect combination
  
  • All reports with React Rally 2019
  
  

• Vue
  
  • Passing data to Vue.js - how does it work?
  
  • Hooks in Vue.js version 3.0
  
  • Functional components of Vue.js: what, why and when?
  
  • Experience of using Vue.js in "Edil": how to use and why did not choose React
  
  • How to work with the DOM in Vue
  
  • Lazy loading of individual Vue and prefetching components
  
  • Dynamic SVG markers for Google Maps in Vue.js
  
  • How to use environment variables in Vue.js
  
  • How to use Google Maps in applications on Vue.js
  
  • Vue PWA: A Progressive Web Application Example with Nuxt
  
  

• Angular
  
  • GraphQL Beginner's Guide with Angular and Apollo
  
  • Angular Dependency Injection Tips
  
  • How to use form builders in Angular 8 to validate reactive forms
  
  • Component sharing with Angular and Bit
  
  

• Ember
  
  • Ember concurrency
  
  • Commit Porto '19: Prosperity Through the Advertising Cycle: A History of Ember.js (Ricardo Mendes)
  
  

• Libs & plugins
  
  • The story of how the popular JavaScript library began to display ads in the terminal
  
  • hashids.js - A small JS library for generating YouTube-like identifiers from numbers.
  
  • O-GL - Minimalistic WebGL Framework
  
  • spacetime: a utility for working with time zones
  
  • Create live avatars (such as Animoji) using face-api.js
  
  

Browsers

• Firefox 69 release

• Firefox update will reduce the power consumption of macOS-devices by three times

• Mozilla says that WebExtensions API updates will not damage blockers in Firefox

• Mozilla started blocking cookies to track user activity in Firefox

• New Yandex Browser released: music, notifications, page search

• Advertising campaigns offer an alternative to cookies amid Mozilla’s ban on user tracking

Entertaining

• Deepfake: how neural networks strip celebrities and drive us crazy - and how dangerous it is

• Google 2019 ranking factors - Rand Fishkin research

• Types of machine learning

• In a nutshell about fonts. Part one

• Google has opened a library code for confidential data processing

• Apple criticized Google’s iPhone vulnerability report and accused the company of creating the illusion of mass threat

• Why not write comments in code?

A.

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

Last week's digest .

Material prepared by dersmoll and alekskorovin .