The digest of fresh materials from the world of the frontend for the last week №352 (February 11 - 17, 2019)

We offer you a selection with links to new materials from the front-end area and around it.

    Media     |    Web Development     |    CSS     |    Javascript     |    Browsers

---

Media

• Frontend Weekend podcast # 88 - What has changed over the year from Sergey Popov (on the creation of League A and the problem of front-enders without experience)
• Web standards podcast, Issue No. 161: Chrome 73 and CSS 2019, SVG, tables, grids and buttons, the future of Photo Frames.
• devschacht podcast: 69: I am Frontend
• Frontend Youth (18+) podcast # 83 Switch to the star stack
• CSSSR podcast News 512 - Issue No. 38 (09.02 - 15.02)
• Tournament: “The best JS-feature 2018 "(PART 2)
• Frontreview Podcast No. 5: The Right Resume and Developer Junior Portfolio
•Ember.js: documentary (official release)

Web development

• HTML that we lost
• About linters, code quality, quality in general and quality management
• Short plan for learning the frontend, or # 100DaysCode
• HTML5 Boilerplate updated to version 7
• Bootstrap 4.3.0 . Release of the new version, in which they refused to support jQuery
• Introduction to WebBluetooth
• Complete guide - How to speed up GIF-video on the Web

• Performance:
  • Improve web font performance with a real-world example
  • Prioritize resources - use browser help
  • Pre-load fonts and priority puzzles
  • DOM performance example
  • Third-party-web - selection with brief information on the degree of influence of third-party scripts on websites
  

• Tools:
  • Build a bundle of dreams using Webpack
  • Meet: pika / pack - a new way to manage npm packages
  • What's new in DevTools (Chrome 73)
  • Puppeteer - my new development server
  

• Accessibility:
  • Uncanny A11y
  • Tips for making interactive elements accessible on mobile devices
  • Designing the interfaces of the future: inline SVG
  

• Spectacular Web:
  • Effects of filtering SVG. Part 3. Image posterization effect using feComponentTransfer
  • Effects of filtering SVG. Part 4. Two-color images using feComponentTransfer
  • SVG Filter Effects: matching text with surface texture using <feDisplacementMap>
  • Grid background fill effect using Anime.js
  • Water and Lemons - detailed picture in pure CSS
  
  

CSS

• New polling #StateOfCSS 2019 from the creators of StateOfJS
• The dark side of grids (part 1)
• New approach to utilitarian visibility classes based on CSS variables
• 10-step Flexbox tutorial
• Constructed style sheets: seamless reusable styles
• User interface design implementation from the example of the site header
• CSS selectors level 4
• Introduction to font metrics with a detailed explanation of the details of each aspect
• On the Grid or on the Flex?
• CSS Scroll Snap - how it works
• What is the difference between the Flexbox and the Grid?

Javascript

• 10 console commands to help debug the JavaScript code like a PRO
• Reliable JavaScript: chasing the myth
• Practical application of AST tree transformation using the example of Putout
• Informatics in JavaScript: doubly linked lists
• 5 ways to create applications in real time using JavaScript
• How to get JavaScript off the web in 2019
• JavaScript: funny moments
• How I got rid of new sponsored Facebook posts.
• ES5 to ESNext - here are all the features added to JavaScript since 2015

• Theory:
  • Everything you need to know about async / await. Cycles, flow control, restrictions
  • Status management . A series of five video lectures by Illya Klimov
  • Visual guide to the definitions and areas of use of JavaScript variables
  • Basics of defining and ascending variables in JavaScript
  • Learn pure functions with JavaScript
  

• TypeScript:
  • clean-code-typescript - Clean Code concepts adapted for TypeScript
  • ReasonML vs TypeScript: comparing their typing system
  • How to use Typescript with React and Redux
  

• React:
  • Why did React Hooks worry me so much?
  • Creating a React autofill component from scratch
  • Animation in React
  • The magic of multi-step forms on React
  • All you need to create a custom React Hook
  • How to achieve accessibility support in React applications
  • What I learned after studying React over two nights working with angular
  

• Angular:
  • Angular Universal: everything an SEO specialist needs to know
  • Manage image breakpoints with Angular
  • Angular Console Tour
  • Create a tooltip on the Angular CDK
  

• VueJS:
  • VueJS 3.0: Revolution? . Ilya Klimov's opinion
  • Creating a SPA on Vue.js for selling T-shirts
  • Transforming static SVG drawings into interactive widgets and infographics with Vue.js
  

Browsers

• Mobile Opera has acquired free VPN
• New Opera browser interface is introduced
• Samsung Internet Browser has overcame 1 billion downloads on Google Play Store
• Microsoft employee: do not use Internet Explorer by default
• Chrome will support links to individual words and phrases in the text
• Saving memory in Brave: a reduction of 33–66% compared to Chrome

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

Digest from last week .
Material prepared dersmoll and alekskorovin .