FRONT-END WEEKLY DIGEST (AUGUST 6 - AUGUST 12, 2018)

Element hiding techniques in CSS, custom site performance reports with the CrUX dashboard, 15 Angular performance tips & tricks, the “Perfect” CSS System, icon fonts vs SVGs, and more. Enjoy reading!

Web Development

• Icon Fonts vs SVGs – Which One Should You Use In 2018?
• Sara Soueidan: “SVG Filters: The Crash Course”
• Google AMP — A 70% drop in our conversion rate.
• How to make a beautiful, tiny npm package and publish it
• webhint: a hinting engine for the web

• Performance:
  • Reduce JavaScript Payloads with Code Splitting
  • Custom site performance reports with the CrUX Dashboard
  • Browser painting and considerations for web performance

• Accessibility:
  • Caring about webform accessibility
  • Navigating accessibility in two dimensions
  • Securing Web Sites Made Them Less Accessible

• Animations:
  • Dot Menu Animations
  • Westworld Slider

CSS

• Line-height Crop — a simple CSS formula to remove top space from your text
• Being Aware of Initial Values in Your CSS
• Switch font color for different backgrounds with CSS
• CSS Grid layout: multiply & conquer — or how to actually design using The Grid.
• Element Hiding Techniques in CSS
• Creating the “Perfect” CSS System
• Changes on CSS Grid Layout in percentages and indefinite height

JavaScript

• How to deal with dirty side effects in your pure functional JavaScript
• Fixing Variable Scope Issues with ECMAScript 6
• Sticky, Smooth, Active Nav
• A Practical Guide to Regular Expressions (RegEx) In JavaScript
• Divide and conquer! Lazy loading for your SPA 

• VueJS:
  • Vue CLI 3.0 is here!
  • Speed Up Development with Prototyping and Vue
  • Building a long press directive in Vue

• React:
  • Data fetching in Redux apps — a 100% correct approach
  • mauerwerk - A react-spring driven masonry-like grid with enter/exit and shared element transitions.
  • React's Render Props Pattern - Children as a Function

• Angular:
  • Angular 6 - Creating a Webpack Configuration from Scratch
  • The PRPL Pattern for Progressive Web Applications using Angular 6+
  • Animate Dynamic Components in Angular
  • Creating Reusable Animations in Angular
  • 15 Angular Performance Tips & Tricks
  • Angular Console - the user interface for the Angular CLI.
  • 10 Useful Angular Features You Might Not Have Heard Of

• Libs & Plugins:
  • Splitting - a JavaScript microlibrary with a collection of small plugins designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!
  • Pts - a typescript/javascript library for visualization and creative-coding.
  • lazyestload.js - load images only when they are in (and remain in) the viewport in only about 350 bytes of javascript.
  • SuperSlide.js - A flexible, smooth, GPU accelerated sliding menu for your next PWA.