Frontend Weekly Digest #294 (16–22 January 2023)

Web-development

• 6 Common SVG Fails (and How to Fix Them)
• SSSVG — Interactive SVG Reference
• How to Secure Your Site Against Web Scrapers
• How to get your design system under control
• History of Web Browser Engines from 1990 until today
• Optimizing The Image Element LCP

• Accessibility
  • Comparing Manual and Free Automated WCAG Reviews
  • New York’s First Cannabis Retailer Sued over Website Accessibility
• Effects
  • Rotating Twisted 3D Typography with Three.js and Shaders
  • On-Scroll Typography Animations
  • Interpolation and Animation
  • CodePens 2022: GSAP edition

CSS

• More Real-World Uses for :has()
• CSS Tip: Style your Radio Buttons and Checkboxes for Printing
• Solved With :has(): Vertical Spacing in Long-Form Text
• OKLCH Color Picker & Converter
• Using :is() in complex selectors selects more than you might initially think
• Line heights in CSS work better with ratios
• How to create a double border in CSS
• The truth about CSS selector performance

JavaScript

• JS Promises #3: Garbage collection and memory leaks
• How the Document Object Model Works in JavaScript — DOM Tutorial for Beginners
• Routing in Next.js
• A Beginner’s Guide to JavaScript async/await, with Examples
• Socket.io vs. Pusher — A Comparison
• precedent — An opinionated collection of components, hooks, and utilities for your Next.js project.
• The gotcha of unhandled promise rejections
• JavaScript Meets Genetics: How to Create Genetic Algorithms
• Using Contentful CMS with Next.js
• Introducing the WebAssembly JavaScript Promise Integration API
• A Beginner’s Guide to Unsplash API in JavaScript

• React
  • How to Have Fun Building React Apps
  • Understanding Redux-Thunk for React: The Big Picture
  • Doing pagination with React Query
• Vue
  • Vue.js “3x3”: a Mental Model for Building Fast
  • Matching static and dynamic patterns in Nuxt 3
  • Using vue-clamp to truncate text in Vue apps
  • Creating Vue.js masked input fields
• Angular
  • Improve page performance and LCP with NgOptimizedImage
  • Everything you need to know about route Guard in Angular