Frontend Weekly Digest #180 (12–18 October 2020)

Web-development

• Web components: The ultimate guide
• 11 Frontend tricks that most Frontend Developers don’t know about
• How Real-Time Communication in Web Development Made

• Tools
  • Presenting v7.0.0 of the npm CLI
  • webpack Tutorial: How to Set Up webpack 5 from Scratch
  • Useful techniques for debugging code using Chrome DevTools
  • Webpack 5 Headache
• Performance
  • Core Web Vitals: A Guide to Google’s Web Performance Metrics
  • Will A Static Website Generator Make My Site Faster?
  • Faster Web App Delivery with PRPL
  • Largest Contentful Paint: measure and optimize it
• Accessibility
  • Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences
  • Checka11y.css — A CSS stylesheet to quickly highlight a11y concerns.
  • Alternative Text for CSS Generated Content
• Effects
  • Coding the Mouse Particle Effect from Mark Aappleby’s Website
  • How to Recreate the Ripple Effect of Material Design Buttons
  • A Collection of Interesting Parallax Effects
  • How to Create a Realistic Motion Blur with CSS Transitions
  • Scroll Animations for Image Grids
  • Pure CSS Character

CSS

• The -​-var: ; hack to toggle multiple values with one custom property
• “Responsive” Font-Size Using Vanilla CSS
• Logical layout enhancements with flow-relative shorthands
• The :focus-visible Trick
• 20 Pure CSS Animated Page Loaders
• min(), max(), and clamp(): three logical CSS functions to use today
• Layoutit Grid: Learning CSS Grid Visually With a Generator
• The New CSS Image Function
• User-Tracking With CSS Only

JavaScript

• Why Should You Use Top-level Await in JavaScript?
• Getting Started with Modern JavaScript — Proxy
• The Journey to Isomorphic Rendering Performance
• Documenting Your TypeScript Projects: There Are Options

• React
  • Supercharge Testing React Applications With Wallaby.js
  • Framer Motion — beautiful animations and interactions for React. 🤤
  • Managing Long-Running Tasks In A React App With Web Workers
  • Wouter: A Minimalist Alternative to React Router
• Vue
  • The Easiest Way to Use Snackbars in Vue
  • Evading defences using VueJS script gadgets
• Angular
  • How to Lazy Load a Component in Angular
  • Bring reactivity to your Angular templates with the LetDirective — Part 1
  • Migrate from .CSS to .SCSS stylesheets for an existing Angular project
• Ember
  • Making a modal dialog using yieldable named blocks
• Svelte
  • Svelte for Sites, React for Apps
  • Build an Image Carousel with Svelte
• Libs & Plugins
  • Detect GPU — Classifies GPUs based on their 3D rendering benchmark score allowing the developer to provide sensible default settings for graphically intensive applications.
  • dragmove.js — A super tiny Javascript library to make DOM elements draggable and movable
  • Getting Started with Malina.js
  • 3 Reasons to Use Fewer JavaScript Libraries