Frontend Weekly Digest #346 (15–21 January 2024)

Web-development

• Web Components 2024 Winter Update
• Working with IndexedDB
• New HTML Control Lands in Safari
• The Color Input & The Color Picker
• Learn SVG by drawing an arrow
• The AHA Stack: Combine Astro, htmx and Alpine.js to create modern web applications sending HTML over the wire, replacing the SPA JS-heavy approach with a much simpler set of mental models and workflows.

• Tools
  • 67 Weird Debugging Tricks Your Browser Doesn’t Want You to Know
  • console.delight
  • What is Vercel’s AI tool, V0.dev and how do you use it?
  • npm in Review: A 2023 Retrospective on Growth, Security, and Quirky Facts
• Accessibility
  • Money Talks! Formatting Currency in Web Content
  • Accessible notifications with ARIA Live Regions (Part 1)
  • Accessible notifications with ARIA Live Regions (Part 2)

CSS

• Illustrated CSS: Values and Units of CSS
• Illustrated CSS: CSS Box Model
• The Complex But Awesome CSS border-image Property
• Scrollbar styling
• Why do reflows negatively affect performance?
• A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()
• My take on fading content using transparent gradients in CSS
• Making CSS View Transitions Easy with Velvette

JavaScript

• 10 print chr$(205.5 + rnd(1));:goto 10 in JavaScript
• WebSockets Unlocked: Mastering the Art of Real-Time Communication
• D3.js adoption guide: Overview, examples, and alternatives
• Exploring Effect, a meta-state RxJS-like framework
• Compiling a standalone executable using modern JavaScript/TypeScript runtimes

• React
  • React Libraries for 2024
  • Kind of annoyed at React
  • React, where are you going?
  • Streams and React Server Components
  • Frontend Masters: Solid Principles in React / React Native
  • 5 Advanced Data-Fetching Techniques in React for Enhanced User Experience
  • How to Build a High-Performance Tab Component in React
  • How to Copy to Clipboard in React
  • Exploring Redux Toolkit 2.0 and the Redux second generation
• Vue
  • The Building Blocks of a Greenfield Vue Application in 2024
  • Modern Vue.js Development with Vite: Best Practices and Tips
• Angular
  • Safely accessing the DOM with Angular SSR
  • Examples of new signal inputs in Angular
  • Signals are VALUES, not EVENTS