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