The digest of fresh materials from the world of the frontend for the last week №326 (August 6 - 12, 2018)

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

Media | Web Development | CSS | Javascript | Browsers | Entertaining

---

Media

• Podcast "Web Standards", Release №133: New Chrome 69, reading semantics, CSS without cascade and Houdini, API for accessibility, burnout.
• Podcast "Frontend Weekend" # 65 - Igor Sheko on how to become a prominent team leader from a serial startup
• Podcast "CSSSR" News 512 - Issue number 18 (06.08 - 12.08)
• “Devshakhta Podcast”: # 45 - When the fender becomes a devops
• Podcast "Frontend Youth (18+)" # 60: Sergey Berezhnoy: Fractal life , # 59: Let's talk about javascript

Web development

• Use AMP as a general purpose library for creating fast dynamic sites.
• Icon Fonts vs SVGs - which one should I use in 2018?
• “SVG Filters: The Crash Course” - intense from Sara Soueidan
• Google AMP - loss of 70% of our conversion
• How to create a beautiful little npm package and publish it
• webhint: tool for a comprehensive analysis of the site with suggestions for improving it (formerly sonarwhal)
')

• Performance:
  • Reducing JavaScript load by splitting code
  • Custom performance reports using the CrUX panel
  • Browser page rendering and web performance reflections
  

• Accessibility:
  • Caring for the availability of web forms
  • Two-dimensional accessibility for maps and web navigation systems
  • Providing ubiquitous access to websites makes them less accessible
  

• Animation:
  • Dot Menu Animations
  • Westworld slider
  

CSS

• Fresh updates of CSS drafts: Level 3 overflow, Level 3 lower case layout, Level 2 grids
• Line-height Crop is a simple CSS formula for eliminating top indent in text.
• Awareness of the initial values ​​in your CSS
• Automatically change text color for different backgrounds using CSS variables
• CSS hiding techniques
• Creating a “perfect” CSS system
• CSS grid layout: multiply and conquer - or how to actually work with grids
• Changes in CSS Grid Layout in percent and undefined height
• Do not write CSS - customize it with tailwind

Javascript

• This keyword in javascript for beginners
• How JS works: custom elements
• Comparing React and Vue on a practical example
• [bookmark] 23 recommendations for the protection of Node.js applications
• 7 recommendations on the design of the code in JavaScript
• How to deal with dirty side effects in your pure functional javascript
• Fix problems with the scope of a variable in ECMAScript 6
• Chris Koyer on creating sticky page tracking scrolling
• A Practical Guide to Regular Expressions (RegEx) in JavaScript
• Divide and rule! Lazy loading for your SPA

• Angular:
  • Angular CLI Reference
  • Angular 6 - creating a Webpack configuration from scratch
  • PRPL template for progressive web applications using Angular 6+
  • Animation of dynamic components in Angular
  • Creating reusable animations in Angular
  • 15 Angular Performance Tips and Tips
  • Angular Console - user interface for Angular CLI
  • 10 useful properties of Angular, which you may not have heard
  

• VueJS:
  • Vue CLI 3.0 is here!
  • Accelerate development with Vue prototyping
  • Creating a long-click directive in Vue
  

• React:
  • Data acquisition in Redux applications - 100% correct approach
  • mauerwerk - masonry style grid layout on react
  • React's Render Props Pattern - child as a function
  

• Libs & Plugins:
  • Pts - typescript / javascript library for visualization and creative coding
  • lazyestload.js - loads images, only if it appears in the viewport, only 350 bytes of js code
  • SuperSlide.js - flexible, smooth slide menu for your next PWA
  • Splitting - a javascript micro library with a collection of small plugins designed to split lines into smaller entities — words, characters, and other options.
  

Browsers

• Firefox has begun testing content recommendation systems based on user activity
• Opera integrates the cryptograph in the desktop version of your browser
• New Mozilla experiment: Firefox Advance extension, which analyzes the history of network activity for the selection of potentially interesting sites and articles
• Chrome 69 Beta: Lots of CSS improvements and more.

Entertaining

• How to choose a font for media
• "No way back": In Android 9.0 Pie, Google deprived users of the ability to return to older OS versions
• Dart 2.0 language update has been released, an alternative to JavaScript from Google
• The neural network learned how to create a portrait of a person using a text description
• How a generation grew up in China that did not know Google, Facebook and Twitter
• Funny and scary things. We recall the most spectacular hacks IoT over the past few years
Go

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 last week
Material prepared by dersmoll and alekskorovin