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 .