Frontend Weekly Digest #214 (7–13 June 2021)

Web-development

• The right tag for the job: why you should use semantic HTML
• 5 Frontend Problems You Shouldn’t Ignore

• Tools
  • Three Front-End Auditing Tools I Discovered Recently
  • Useful Front-End Boilerplates And Starter Kits
  • Introducing the Memory Inspector
  • Introducing Astro: Ship Less JavaScript
  • 7 Tools for Faster Frontend Development in 2022
• Performance
  • Frontend performance optimization for newbies. Part 1/n. How browsers render the page
  • Part 2/n. What can we do to improve FMP and TTI?
  • Part 3. Event loop, layout, paint, composite, call stack
  • Serving sharp images to high density screens
• Accessibility
  • whocanuse: Who can use this color combination?
  • Fixing contrast issues, on your own site and elsewhere
• Effects
  • Adding Shadows to SVG Icons With CSS and SVG Filters
  • Thumbnail Hover Effect with SVG Filters

CSS

• Complete CSS Grid Tutorial with Cheat Sheet 🎖️
• CSS System Colors
• CSS defines color values that follow system preferences
• Media Queries in Times of @container
• Let’s Learn About Aspect Ratio In CSS
• CSS size-adjust for @font-face
• Equal Columns With Flexbox: It’s More Complicated Than You Might Think
• Multi-Column Sortable Table Experiment
• Meet :has, A Native CSS Parent Selector (And More)
• A Cornucopia of Container Queries
• Generating `font-size` CSS Rules and Creating a Fluid Type Scale

JavaScript

• How to Build a Full Stack App with Supabase and Next.js
• Implementing Private Fields for JavaScript
• Forever Functional: Memoizing Promises
• How to Implement SOLID Principles in JavaScript
• Automate formatting and fixing JavaScript code with Prettier and ESLint
• Modern JavaScript
• Going Beyond ESLint: An Overview of Static Analysis in JavaScript
• Trusted Types API for JavaScript DOM Security
• How to create NFTs with JavaScript
• Rust from a JavaScript perspective

• React
  • The Plan for React 18
  • An overview of React State Management Techniques in 2021 ⚜️🌐
  • Redux Alternatives in 2021
  • Cloudflare Pages tutorial: Deploying a React app via GitHub
  • React Icons: A comprehensive tutorial with examples
  • Trying Out React 18 Alpha Release
• Vue
  • Home Rolled Store with the Vue.js Composition API
  • What is State Management? Hands-On Vuex for clean Nuxt.js Applications.
  • Vue.js vs. React — Not Your Usual Comparison
• Angular
  • Angular NgClass Example — How to Add Conditional CSS Classes
  • Deploying single-page Angular apps to GitHub Pages
  • Build more accessible Angular apps
  • Faster Perceived Response Time with Angular Material to tackle Need for Speed
• Libs & Plugins
  • Introducing libSquoosh. It’s Squoosh, but as a Node library.
  • nanostores — A tiny (152 bytes) state manager for React/Preact/Vue/Svelte with many atomic tree-shakable stores
  • flexsearch — Web’s fastest and most memory-flexible full-text search library with zero dependencies.