Frontend Weekly Digest #339 (27 November — 3 December 2023)

Web-development

• Web Development Advent Calendars for 2023
• Design System Wisdom 2023
• How GenAI Transforms the Landscape of Front-End Development
• SVG Tutorial — Learn to code SVG images step by step
• HTML Web Components Are Having a Moment
• Should AVIF be the dominant image format on the web?
• Weird HTML Hacks
• You don’t need JavaScript for that
• Sluggish CATs: Category Pages Have the Worst Responsiveness (INP) on e-Commerce Sites

• Tools
  • Announcing Deno Cron
  • Vite adoption guide: Overview, examples, and alternatives
  • Prettier’s CLI: A Performance Deep Dive
  • A simple WebSocket benchmark in JavaScript: Node.js versus Bun
• Effects
  • 3D Glass Portal Card Effect with React Three Fiber and Gaussian Splatting
  • How to Create Animated GIFs from GSAP Animations
  • Create Dynamic Web Experiences with Interactive SVG Animations

CSS

• 🧙‍♂️ CSS trick: transition from height 0 to auto!
• Create an Overlay and Transparent Scrollbar that is Visible on Hover using CSS
• The `hanging-punctuation` property in CSS
• Pure CSS infinite autoplay carousel — no text duplication
• CSS Hooks — Inline styles doing what we thought they couldn’t.
• Creative use of CSS gradients
• oklch() retains perceived lightness for different hue angles
• Oh No, Overflow!
• Scoping CSS inline styles with css-scope-inline

JavaScript

• How JavaScript Promises Work — Tutorial for Beginners
• JavaScript in 2023: A Year of Surprises and Transformations!
• Let’s learn how modern JavaScript frameworks work by building one
• Fastest Way of Passing State to JavaScript, Re-visited
• Web Components Eliminate JavaScript Framework Lock-in
• Implementing advanced features with the navigator.share API
• 8 tips to reduce unused JavaScript

• React
  • A convenient way of dealing with sessionStorage/localStorage in React
  • How To Share States Between React Micro-Frontends using Module-Federation?
  • What do we know about React Forget
  • Add user management to a Next.js site with React server components, server actions, and AuthKit
• Angular
  • Angular ReactiveForms: Things About enable() and disable() That Could Surprise You
  • Angular State Management: Exploring Subject, BehaviorSubject, ReplaySubject And AsyncSubject
  • Crafting Custom Pipes in Angular: From Formatting to Filtering (2023)
  • Local Change Detection in Angular
• Libs & Plugins
  • 5 best JavaScript multidimensional array libraries