TF #30 | Your weekly frontend digest

🗞 Article of the week : What PWA Can Do Today. A showcase of what is possible with Progressive Web Apps today

---

Frontend 🎨

CSS

• Modern CSS for 2024: Use Cases for :has()

  

• What forces layout/reflow. The comprehensive list

• How I'm Writing CSS in 2024 | Lee Robinson

• Designing better target sizes

  

• The most hearted Pens of 2023 | Codepen

• Nested Dark Mode via CSS Proximity

• Using CSS Houdini to extend styling and layout capabilities - LogRocket Blog

• About subgrid and colored grid lines

  

MISC

• Hello Developer: January 2024 - Discover - Apple Developer

• Exploring visionOS Accessibility: VoiceOver Gestures

• What PWA Can Do Today

• SolidStart: A Different Breed Of Meta-Framework — Smashing Magazine

• 2024 Predictions by JavaScript Frontend Framework Maintainers

• Frontend predictions for 2024 • Buttondown

• Ultimate Guide to Magic Links

  

• JavaScript Frameworks - Heading into 2024 - DEV Community

REACT

• How to Get Rid of “Window is Not Defined” and Hydration Mismatch Errors in Next.js | by Eric Burel | Dec, 2023 | Medium

• 28 Advanced NextJS features everyone should know | Code Driven Development

• Oskar Kwaśniewski - Bringing React Native libraries to Apple Vision Pro

• The Two Reacts — overreacted

• More Than You Need to Know About ReactDOM.flushSync | JulesBlom.com

• Common mistakes with the Next.js App Router and how to fix them – Vercel

  

• Thoughts on Remix | Viget

• React Native's 2023 Highlights and 2024 Outlook Intro - TechBullion

VUE

• My Journey from React.js to Vue.js

  

• Understanding Composables in Vue3

  

UX / UI📱

• The Eight Golden Rules of Interface Design

• What should we ship?

• AI Vertigo: where do we go from here as designers?

  

• A Global Design System | Brad Frost

• Blur radius comparison

• Use these principles to drive UI/UX success

• Tell Better Stories by Jeremy Connell-Waite | Business Storytelling

• Story Mapping: The Game-Changer in UX Design

  

Work / Productivity 📇

• 7 Challenges with Long-Term Projects and How to Manage Them

• Product Managing to Prevent Burnout

• 10 Things Software Developers Should Learn about Learning

• The engineering mindset | Will Larson (Carta, Stripe, Uber, Calm, Digg)

• Think more about what to focus on

• Architects & Tech Leads

🤩 If you find this newsletter useful and satisfying, please support us by and sharing it with others! Thank you.🙏

Misc 📇

• The Website vs. Web App Dichotomy Doesn't Exist

  

• Where have all the websites gone?

• 9 years of Apple text editor solo dev

• Software Quality - by Abi Noda - Engineering Enablement

• Weird things engineers believe about Web development - Brian Birtles’ Blog

  

• Do we think of git commits as diffs, snapshots, and/or histories?

• How Google perfected the web

  

• Security at Startup

Tutorials 💻

• How to Implement SSO in Remix using GitHub and Remix Auth

• Build an X clone w/ Nuxt UI

  

Tools & resources 🔧

• apyhub.com Discover our diverse range of APIs, from simple utilities to cutting-edge AI-powered solutions. Shared by @iamspathan. Thank to him!

---

• Env: A utility for verifying environment variables are present

  

• unrot•link | Prevent and reverse link rot with a single script

• Remote-storage: remoteStorage is a simple library that combines the localStorage API with a remote server to persist data across browsers and devices.

  

• Pagination: Simple Pagination Library

  

• The AHA Stack | AHA Combine Astro, htmx and Alpine.js to create modern web applications sending HTML over the wire

• TWC is a lightweight library to create Tailwind CSS Components in one line, write less code and build faster.

• TSDiagram - Diagrams as code with TypeScript

• CSS Hooks Inline styles doing what we thought they couldn't.

Videos 📼

• HTMX For React Developers in 10 Minutes

  

• React server components from scratch!

• Nuxt vs. Nitro - What does what in your App

Podcasts, talks...🎙️

🎧 Find our list of the best English and French podcasts here

• Google & MS Duopoly, Frontend to Fullstack, Where to Put Business Logic + more(Potluck) - Syntax #715

• JS Perf Wins & New Node.js Features with Yagiz Nizipli - Syntax #716

  

• JavaScript Jabber - JSJ 615 | Iterating on Open Source

• htmx: a new old way to build the web with Carson Gross & Alex Russell (JS Party #307) |> Changelog

• 597: How Many VS Code Plugins, Poor Charlie’s Almanack, and Where to Start in 2024? – ShopTalk

• Online learning on the rocks - Front End Happy Hour

  

• Tech Conferences, Remote Work and the Intersection of AI and Web Design with Clark Sell - Whiskey Web and Whatnot - Episode 125

The French corner

• IFTTD #253 - DDoS : À écouter massivement ! avec Mathieu Menut

• Les Technos Episode 429 : Quel langage de programmation choisir ?

  

Fun 👾

• drawing.garden

• Nestflix

  

---

💌 If you like this newsletter, don't hesitate to subscribe, to share it and support us! We are also on Twitter/X and BlueSky, come and say Hello! We share content throughout the week in advance. Thank you

Comments

[Sohail Pathan]

Fantastic list of resources, @tech-foutraque! I would like to suggest another tool that should be a part of every developer's toolkit: ApyHub. It is a catalog of 70+ APIs that can help developers implement complex and time-consuming functionalities in minutes. Frontend developers can easily integrate it directly into any UI framework.

[tech foutraque]

Thank you @iamspathan! I just taken a look at your link. Seams amazing resources too ! Thank you for sharing, I'll add your link in an update!

[Sohail Pathan]

That will be great! Thank you :)