Should I have spent 8 hours building a Pagination component with @framer motion? Probably not. Did I do it anyway?
53
62
1,727
162,213
I’m addicted to @GabrielVergnaud ’s ts-pattern: with only it as a dependency, here’s a quick relative time difference formatter. No moment, no dayjs, no date-functions.
5
16
217
18,851
first three are replacements to TOOLS, not people. You phrased it as if "Need a musician? Try slamming your hands on the table! 🤷"
4
3
188
You have an interest to push for mediocrity. You sell a mediocre web dev course for a living. This is hard stuff to make, and your alumni will not be able to learn that.
I can see why you don’t appreciate intricacy.
11
173
23,250
One could say ‘on the left, a single file gets you a page styled, on the right you only see half the story and need another tab in another programming language, and translate names to behaviours back and forth’
9
108
17,360
oh it’s just the streaming platform, I thought it was the main logo that had changed phew
1
86
2,217
UI designers finally discover what a ligature means. on the next episode: tabular vs linear figures
1
64
2,232
Hate manually typing your page props on @nextjs ? Here's a snippet that will infer the props from whatever you return from it. Covers notFound and redirects too.
#TypeScript #FrontEnd #ReactJS #nextjs
5
10
53
you:
- don’t know their performance metrics and are guessing you’re better than them purely for ego purposes
- proved my point by celebrating how you lazily put a rubbish website online to sell a lazy course
- think $20k is a lot of money
44
3,366
Creating a UI library for my company. Having prior experience with @chakra_ui enabled me to value (and shamelessly copy) the ComponentWithAs type so much. Chakra is so well made, and have aged like fine wine 🍷
3
8
41
some caveats:
— pixel aligning your capitals potentially misaligns your lowercase
— most professional typefaces have worked on hinting to make sure this is not a big issue
— modularity is broken so you need fine tuning on everything
— you’re disregarding overshoot!
3
1
41
Nah mate I'd kill for designers at my company to be this visually interesting — it's mostly buttons and plain text with bland pictures in squares :(
1
1
37
yep, it’s a sub par junior dev today, but what about in 6 months? i’m both stoked to be writing issues and reviewing PRs as they come, and afraid companies will jump ship and have super small, overworked teams of maestros and not devs
6
39
17,686
have your git history be pure madness if you can revert and react to stuff quickly. 0.01% of the time you’ll stare at your repo’s commit history, caring about its aesthetics is petty
2
33
18,186
the dev community in general is very hostile towards non _truly_ organic dissemination, and next 13, the app directory and RSC feels a little forced down our throats via good marketing. I also share this natural aversion as of late. It’s a great tool but too much going on!
1
34
4,650
jokes on you they have more skeuomorphism now than in ios6 era. Everything is draggable, physics feel real. Visual skeuomorphism may have been dramatically reduced but overall apple devices are far more skeuomorphic now than they were.
2
27
9,150
ISR is truly where Next.js shines. with on demand i’ve managed to completely turn a SSR website into a static, always up to date website with reduced TTFB
2
29
Never seen so many rules and ‘should’s in a single thread. I agree with you but not in those extremes. There are lots of uses of react in surgical spots on legacy websites, or SPAs that make sense. What I fully agree with is: don’t set up your own tooling, use Vite.
26
5,652
the @shadcn ui brings me joy. I feel like shopping for components and my terminal is the trolley. and everything is free and organic.
25
16,968
the css vars is not the reason for the 7 seconds. that’s a correlation without causation. send us the website and let’s analyse the waterfall — i bet £10 css files play little to no part in the loading of this website
27
1,534
@Reddit’s new native app top bar has such a good feel to it — I tried replicating it on the web using @framer motion, and this is looking 🔥!
play with it: codesandbox.io/s/reddit-tabs…
1
25
2,070
graphQL can be a dangerous abstraction if it makes three data sources from three locations feel like a single call. Only rely on graphQL if you know extensively the origin your requests are being served from.
1
24
One of my latest UI challenges at @windenhq was creating this filter menu component. Accessibility, keyboard navigation, CSS defensiveness and cool animations were a very fun rollercoaster. @radix_ui + @framer motion + 🧁vanilla extract for styling.
Play: ui-docs.winden.co/?path=/sto…
4
3
29
6,183
rebase is MUCHHH more work to do, much easier to fuck up! Merge is the way and if it’s a PR you can squash and merge and never look back at that merge commit you’ve added. Or just carry on, got history is supposed to be historical
20
5,205
Ill be honest I tried mechanical keybs but my typing speed on the apple ones is unparalleled and the key layout is the same when i’m on the sofa and on my desk so it works very well
4
21
8,194
the perceived speed of a @remix_run + @prisma app on serverless vs. on a traditional VPS is DRAMATICALLY different. The zero cold starts and collocation of db+server are shocking. I’m so glad I tried lol
2
23
4,139
not a crypto guy but would use this browser like crazy for the UI itself. @family is my go-to reference for UI design; their masterful execution of object permanence and snappy-and-classy animations is what I dream to be able to deliver to everything I create!
Fun little detail when navigating between the start page and tabs page in the new @family browser
1
20
3,017
@rauchg we’re migrating our app from CRA to Next 12 motivated by middleware. All in all, we’re reducing our code base by 4000 lines and keeping the same functionality! Not bad at all ;)
2
18
and by your logic you can extract it all to a single class on body and style everything with nth-child locators xd. It’s all tradeoffs. There’s a comfortable middle ground for each one of us, it’s fine you prefer raw CSS but not everyone has to follow
1
16
2,149
I know it’s not that simple, but wouldn’t it make sense for the browsers collectively support TS syntax parsing out of the box? I would see a bright future if TS is natively supported and only the tooling is transpiled (unrealistic much)
2
16
8,388
Is this legal react???
I wrote this and feel like someone could sue me at any second. @mattpocockuk any way around so many casts? I mean it doesn't matter that much but looks dirty
2
18
11,282
1. web dev is platform agnostic
2. you dont need any software to write a html page
3. I’ve done a bit of game dev, a lot of web dev and have never even heard of raylib
4. this website makes it a hard sell, it’s ghastly
1
17
1,649
idk man I think it's just resistance but code looks more organised with colons. It gets rid some ambiguity like return and others. I might just be old
1
17
learn to think in rems, it pays off. this conversion breaks accessibility and defeats the purpose of the unit. 1 rem = 1 highly legible font size
2
15
3,857
I need help with getting higher quality video outputs on twitter. The video I uploaded is much much sharper than the artifact-ridden mess you see here 😢
2
16
4,533
contrasts were baddddd back then. settings looks ghastly! bad spacing, horrible feedback as to what’s selected etc. UI design surely came a long way since then
16
2,341
I love the idea, but we could _always_ do this with dynamic imports. There’s quality of life improvements for sure, and the API with generators looks cute, but this isn’t something that has just been made possible — in fact Google has been doing that for search for a decade now
3
16
3,974
or use ts-pattern, which will make your markup better looking and type safe even for deeply nested objects: github.com/gvergnaud/ts-patt…
1
16
2,565
yet the landing page for your course that has literally one section still has bad layout shift 😆
zeroto💩
16
3,990
sorting imports is not an eslint job. it’s purely aesthetic, non-bug-introducing.
if you’re watching this video just use prettier (github.com/trivago/prettier-…) or biome for this. it’ll be faster to run and with fewer false errors.
(or just treat imports as cattle and not pets)
2
2
13
998
should just not have default on the base interface, to begin with. It’s not being implemented why add a default? xd
1
16
10,681
ts-pattern is such a great tool for writing semantic, scalable JSX. I find myself not using ternaries or short-circuits anymore, just match the fuck of everything — it reads better! Pitching it to the team nonstop.
@GabrielVergnaud awesome job.
1
16
1,708
@chakra_ui users can use this quick snippet to set it according to `colorMode` and instantly enhance their UIs.
(copy the image alt text for the code)
ALT import { useColorMode } from '@chakra-ui/react'; import { Global } from '@emotion/react'; const ColorMode: React.VFC = () => { const { colorMode } = useColorMode(); return ( <Global styles={`:root { color-scheme: ${colorMode} }`} /> ); }; export default ColorMode;
If your site has a dark theme, make sure to set:
:root {
color-scheme: dark
}
So scroll bars are also dark.
1
1
14
now change the sizing scale from increments of 4 to increments of 6! Tailwind is not a replacement for CSS, it's a design system css framework on top of.
Comparing it with a lower level is like saying "why make apps in react if I can make them in vanilla"? IT’S MODULAR!
1
15
1,935
that’s cursed, very easy to go wrong. Checkbox now has a wrapper if children exist, which will behave very differently in flex containers or grids. The label also needs to take in a unique id and have `for`.
imho just always have a wrapper if needed, stop reinventing the wheel
1
1
14
3,023
Poppins, never seen a more disgusting typeface. Terrible kerning, laughable stroke thicknesses. It’s only used because it’s a free version of something that looks a little like Circular, GT Walsheim
2
15
how it lets people build over engineered stuff with too much js. Just stumbled across a 200+ solution to a scroll navigation bar with shallow routing, 2 useEffects, states for keeping track of current menu item etc. Could’ve simply used the URL hash.
3
14
3,901
what a PHENOMENAL read. I can see myself in so many moments mentioned. Proudly I’m exactly this kind of geezer today:
14
3,347
by an average developer*
you can 100% have peak UX with a react SPA, but most single responsibility principle driven devs will have each screen, each button, each emoji load separately from its own API call and get to spinnageddon. Hoping RSC helps with this
15
2,164
That's an excellent idea, I might make a primitive à la @radix_ui
2
13
2,337
I’d move the object literal map to outside the component to avoid redeclaring it again every time (and also it's a constant, just keep it outside the function scope)
1
12
4,267
besides terrible spacing and icons, it sort of aged well??? looks more polished than the average google UI. and the scale of blue is stable!
10
1,074
devs are weary creatures: if we feel you just wanna sell us stuff we back off immediately. RSCs have had poor naming and are too closely tied with an for profit infrastructure hyped org.
the concept of serialising VDOM is awesome, but the general perception is ‘SSR in next’
10
1,987
regulation has literally saved the world countless times. the EU might be the first to impose AI rules but they will not be the last. hopefully we’ll see these rules develop and mature as we have a better understanding of the tech
not regulating is how you get school shootings
10
431
@markdalgleish vanilla extract’s API is so good! Building my first UI library with it, and making use of all the goodies like sprinkles for utility classes and recipes for variants feels like cheating. All the component styling logic now has become a single js object!
1
2
11
I like tailwind, but to me the best way to style anything was always Stitches by @peduarte and team. Just so ergonomic, maintainable and type-safe.
The next great thing was Vanilla Extract, which shared some of the ergonomics.
Now @panda__css JOINS THE BEST AND IMPROVES ON IT!
1
11
1,645
how do you feel considering yourself a designer but not being able to understand visual proportion and perception? Eyes aren’t mathematical. Have a quick look at Helvetica’s stroke widths and you might have a stroke yourself if that’s what you believe is right.
11
with the best intentions in mind I think Rome is AWESOME but visually it falls short of feeling like a tool for, or from, the future. It has that web 2.0 vibe and looks a bit too corporate! @vercel 's a shining example on how to be cutting edge _and_ look the part!
1
11
really bullish once we see someone else (probably @remix_run but we never know, @tannerlinsley is on fire lately, let the boy be bored for a weekend and we might have it) implement RSC completely differently it’ll make a lot more sense.
1
10
511
good job! I’d just rename to FirestorePath, singular. The type may _look_ like an array but in fact it’s a collection of "or"s, with one being used.
Look when you declare the consts you’re annotating them with a plural word and using a string — feels misleading doesn’t it?
1
11
553
not QA but i just wrote TS code for two hours without running it. Architected an API, created lots of types, handlers, and only after it, wrote unit tests to run it. Types gave me confidence I wouldn’t have even to write a simple two layer handler.
i’d say TS even for tiny stuf
7
1,307
although your point is good, more libraries is not a testament to good or bad, it’s simply that react is more barebones, less opinionated.
the whole js ecosystem is based off reinventing itself with faster/better tools, so the less your tools are intertwined the best
1
8
3,847
Raycast+AI has the potential to be an all powerful assistant for desktops, the future looks bright
1
9
1,013
stitches was the hero of css-in-js frameworks. so many quality of life techniques were pioneered by it. it’s still my favourite way of styling but it’s time to move on!
i’ll be using a mix of tailwind/cva and panda to patch the hole in my heart left by stitches. GOAT.
Stitches is officially no longer maintained
I'm really proud of the impact @stitchesjs had on the space, and how many new styling solutions were inspired by it
Alongside with Radix, it's one of the projects I'm most proud of
Thank you all for the support
Lastly, a huge shoutout to @jon_neal — without him, Stitches would've ended up very differently
1
10
1,118
When I purchased @alignui I didn’t expect it to also contain a design system course 🤯 so much detail from semantic tokens to depth via shadows.
It’s shaping up unbelievably well.
1
1
9
3,508
border radius on number 2’s bottom bar is 1 or 2 units less than it should, leading to a flat end at the sides :(
7
2,039
woah @figma auto generates react components now and they come typed with React.FC I hear @mattpocockuk fuming 😂
1
9
5,656
Being a mid-weight was when it felt the most like it — picking up tickets from the Todo lane (main quest), sometimes picking up some other tasks that people entrust you into doing (side quests), talking to NPCs (product owner) 🤣
2
7
start with all in the resolver, if it gets to cognitively complex, I break ‘statements’ into their own calls. e.g.: getUserRole(); authorise(role); createTask(task); notifyOnSlack()… so it all feels like a simple thread!
9
i’m using it right now to power a game engine that’s sending websocket messages for each step
of a turn based system. couldn’t imagine any other way of engineering this without it
5
308
I always use `.repeat(100)` to test for CSS defensiveness. Whenever there is user input required, there is unpredictability in string lengths.
2
9
590