Frontend beer
@fulltimevue
34 subscribers
15 photos
3 files
516 links
SOFU
Download Telegram
About
Blog
Apps
Platform
Join
Frontend beer
34 subscribers
Frontend beer
https://x.com/mattpocockuk/status/1744320298743108031?s=52&t=HHPE0yPKLMDJXVppPVq0nw
36 views
Frontend beer
https://x.com/jh3yy/status/1746406856573284785?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
jhey ▲🐻🎈 (@jh3yy) on X
Future CSS Trick 🔮

Had some questions about what if the tabs are different sizes? 👀 You could combine :has() with Anchor Positioning

.tabs label:nth-of-type(2) { anchor-name: --two; }
.tabs:has(:checked:nth-of-type(2)) { --anc: --two; }
.tabs::after {…
34 views
Frontend beer
https://x.com/wesbos/status/1745847941628101119?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
Wes Bos (@wesbos) on X
Native CSS Scoping is starting to hit browsers.

One handy way to use the API is to just pop a style tag inside your component, and the styles will only to applied to that element's scope.
35 views
Frontend beer
https://x.com/mattpocockuk/status/1746857014255403499?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
Matt Pocock (@mattpocockuk) on X
Here's how to get a fully type-safe fetch function in just a few lines of (admittedly mind-blowing) generic code.

Full implementation below.
41 views
Frontend beer
About modals https://modalzmodalzmodalz.com/
Modalzmodalzmodalz
Modalz Modalz Modalz
All the reasons you don't need a modal — and what to use instead.
40 views
Frontend beer
https://twitter.com/wesbos/status/1783864009030070515
X (formerly Twitter)
Wes Bos (@wesbos) on X
Maaaaan, React 19 is packed with goodies!

Here are 5 new things

The use() API for promises, the new context API, and the <head> tag hoisting are very welcome additions!
39 views
Frontend beer
https://x.com/adamwathan/status/1787906540730528060?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
Adam Wathan (@adamwathan) on X
This week we released Headless UI v2.0 for React ⚛️

Includes tons of new stuff driven by our work on Catalyst —

⚓ Built-in anchor positioning
✅ New form element components
🔮 Combobox list virtualization
💅🏻 New docs website

...and a bunch more 🎉

https…
34 views
Frontend beer
https://x.com/jh3yy/status/1791212316341465481?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
jhey ▲🐻🎈 (@jh3yy) on X
Responsive magnetic link effect using CSS anchor positioning 🧲

nav li:nth-of-type(2) { anchor-name: --i2; }
nav:has(li:nth-of-type(2) a:hover) { --a: --i2; }
ul::before { /* indicator */
left: anchor(var(--a) left);
width: anchor-size(var(--a) width);…
40 views
Frontend beer
https://react.dev/learn/react-compiler
react.dev
React Compiler – React
The library for web and native user interfaces
41 views
Frontend beer
React has published it’s compile and is available from version 19
43 views
Frontend beer
https://x.com/janm_uiux/status/1809572565033058310?s=52&t=HHPE0yPKLMDJXVppPVq0nw
35 views
Frontend beer
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
Joshwcomeau
An Interactive Guide to Flexbox in CSS • Josh W. Comeau
When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm…
31 views
Frontend beer
https://x.com/jh3yy/status/1815172630107869308?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
jhey ▲🐻🎈 (@jh3yy) on X
CSS scroll to unblur text ✨

.word {
--start: calc(var(--i) * var(--pxPerWord));
--end: calc((var(--i) + 1) * var(--pxPerWord));
animation: fx;
animation-timeline: --section;
animation-range: var(--start) var(--end);
}
@​keyframes fx { 0% { filter: blur(20px);…
36 views
Frontend beer
https://x.com/sebastienlorber/status/1815762246326194685
35 views
Frontend beer
Have been exploring different ways to compose the UI and make parts more re-usable, found headless component pattern where components which manage business logic only forward props and business logic to children see https://www.martinfowler.com/articles/headless-component.html and one of the implementations of this pattern is Headless UI and you can also find it implemented in Shadcn
martinfowler.com
Headless Component: a pattern for composing React UIs
Separates state management logic from the visual representation
44 views
Frontend beer
https://x.com/passle_/status/1818290642797096974?s=52&t=HHPE0yPKLMDJXVppPVq0nw
44 views
Frontend beer
That’s insane that one package can cost 440gb of network transfer - if there are quick wins take them before doing npm i
44 viewsedited  
Frontend beer
https://x.com/bramus/status/1825589261829120324?s=52&t=HHPE0yPKLMDJXVppPVq0nw
42 views
Frontend beer
Have you been dreaming and making ambitious plans to use D3 in your favorite project for visualizations, here is a great resource you can build up your skills to do so using d3 and react + d3
* https://d3-graph-gallery.com/
* https://www.react-graph-gallery.com/
D3-Graph-Gallery
The D3 Graph Gallery – Simple charts made in d3.js
The D3 graph gallery displays hundreds of charts made with D3.js, always providing the reproducible code.
34 views
Frontend beer
https://bsky.app/profile/joshwcomeau.com/post/3lep2n3euok22
Bluesky Social
Josh W. Comeau (@joshwcomeau.com)
🎊 Happy New Year!

I discovered a lot of very cool dev stuff in 2024, from libraries to devtools to educational resources. Thought it’d be fun to share them all, to help kickstart your 2025!

Let’s go through the list. 🧵
15 views