Joe Bell @joebell_ Twitter profile

Pinned Tweet

Joe Bell

@joebell_

6 months

Brushed Buttons

12

2

149

Last Seen Profiles

@aomrealfake

@bokeplokalmalam

@shrumarathe

@lean_raz

@SrVarela1919

@LTE08

@xenofobia_peru

@bokeplokalmalam

@shokugeki_anime

@OhTheLies2

@Nandeya_nen819

@FilharmonicPH

@NiellTommy

@fxnt8mzFN

@tgmartins

@FabiooVal

@jsdhzay_

@sugarscanho

@RWBAMusicDept

@Meiyxtxin2

@tx_x2

@stw_pdg

@bokeplokalmalam

@a_kitto

@itirafet_korkma

@PatOshell

@SebeNkambule

@CSCIColumbia

@kyuikyuikyui_

@anatalizio0523

@ki_rosemar

@xTiiqu

@artvinvaliligi

@boycesmith_12

@iwwon_official

@Kneko__

Joe Bell

@joebell_

2 years

54

453

5K

Joe Bell

@joebell_

4 years

why order imports alphabetically when you can order them a e s t h e t i c a l l y

55

248

3K

Joe Bell

@joebell_

2 years

Why show your users a loading spinner when you can give them a “loading disco”?

51

134

2K

Joe Bell

@joebell_

5 months

I'd genuinely love to understand how people use Discord without feeling like they're in a constant state of sensory overload

118

117

2K

Joe Bell

@joebell_

2 years

I urge you to stop what you’re doing and feast your eyes on @simeydotme ’s mesmerising “Pokemon Cards” One of the most mind-blowing CSS effects I’ve ever seen Demo:

36

163

1K

Joe Bell

@joebell_

3 years

Using the Next.js <Image/> component? Don’t forget to make the most of the `onLoadingComplete` callback to add some delicious transitions ✨ e.g.

27

83

978

Joe Bell

@joebell_

2 years

Thrilled to share that I'll be joining the design team at @vercel next week ▲

64

17

975

Joe Bell

@joebell_

1 year

Playing around with @astrodotbuild 's experimental support for View Transitions – it's a thing of beauty ✨

28

82

913

Joe Bell

@joebell_

2 years

That awkward moment when you read a tweet bashing @tailwindcss and realise its your code

Razvan Caliman

@razvancaliman

2 years

This is astonishing! What series of events leads to such markup? Because CSS this is not.

109

72

629

37

23

725

Joe Bell

@joebell_

9 months

Small life update: she said “yes”

72

7

657

Joe Bell

@joebell_

1 year

9

50

500

Joe Bell

@joebell_

2 years

Use TypeScript barrel files in @nextjs ? Reduce your bundle size with this one weird trick 💸

19

61

486

Joe Bell

@joebell_

2 months

repeating-linear-gradient 🤝 mask-image

10

6

455

Joe Bell

@joebell_

3 years

@ekiansyah @NoContextBrits funnily enough, I'm not a fan of this one

2

1

400

Joe Bell

@joebell_

4 years

Ever wondered if it was possible to create *pure CSS* blurred image placeholders? ✨ Introducing "Plaiceholder" 🖼 Transform your images into beautifully lightweight placeholders, with ease

Plaiceholder

Beautiful image placeholders, without the hassle.

plaiceholder.co

7

45

362

Joe Bell

@joebell_

1 year

Spent the last few weekends giving a much-needed polish 🧼 Here's a thread of highlights…

17

7

324

Joe Bell

@joebell_

3 years

Today's whacky idea… What if UI Designers and UI Engineers spoke the same language? @Figma Auto Layout === <AutoLayout />

24

13

310

Joe Bell

@joebell_

11 months

Excited to share that next week I’ll be joining the design team at @ClerkDev 🥳 Can’t wait to jam with @PixelJanitor , @jamesm and co.

Clerk | Authentication and User Management

The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.

clerk.com

29

4

303

Joe Bell

@joebell_

3 years

Here's a tiny collection of some of my favourite "date pickers" from across the web... 🧵

23

32

298

Joe Bell

@joebell_

2 years

Live Location 🌐

7

14

287

Joe Bell

@joebell_

2 years

Say hello to 🙋🏼‍♂️ The new and improved – long overdue – home for "Class Variance Authority" documentation Now with *real* working examples for @reactjs , @sveltejs , @vuejs , @tailwindcss and more…

cva

Class Variance Authority

cva.style

25

28

276

Joe Bell

@joebell_

5 months

@ndrsn Disabling the majority of product’s features just to make it usable is so bizarre to me

16

0

260

Joe Bell

@joebell_

3 years

Introducing Plaiceholder 2.0 🖼 Create beautifully lightweight *pure CSS* blurred image placeholders, and more... Now with: 🔥 90% less CSS 🌐 Remote images 📏 Size customisation 🧹 New and improved API 🆕 A shiny new @tailwindcss JIT plugin

GitHub - joe-bell/plaiceholder: Beautiful image placeholders, without the hassle.

Beautiful image placeholders, without the hassle. Contribute to joe-bell/plaiceholder development by creating an account on GitHub.

github.com

3

33

259

Joe Bell

@joebell_

2 months

Clerk × Vercel (+ friends)

20

9

240

Joe Bell

@joebell_

1 year

me watching someone's html get publicly ridiculed on twitter for using @tailwindcss

9

3

241

Joe Bell

@joebell_

2 years

I used @tailwindcss because I was able to build something that looks super slick super quick I didn’t build this to be read in “Inspect Element” lol

5

4

234

Joe Bell

@joebell_

3 years

Am I allowed to love @nextjs *and* @remix_run ? I’m just here for a good time

20

6

228

Joe Bell

@joebell_

4 years

Building a "Card"? Don't use a button/anchor to wrap content; a semantic and accessibility nightmare. "Break out" the interaction instead, as explained by @SaraSoueidan ¹ and @hankchizljaw ²: 1. 2. Seen on :

8

28

224

Joe Bell

@joebell_

2 years

Personal update: next month I’ll be moving on from Vercel Grateful that I had the chance to work closely with such a lovely, wildly-talented set of people — I’ll miss you terribly Prioritising some downtime, then open to opportunities from mid-April ✌🏼

10

0

223

Joe Bell

@joebell_

1 year

After months of late nights, early mornings, weekends, flights, and train journeys... cva @1 .0 is now in beta

Class Variance Authority

beta.cva.style

9

16

218

Joe Bell

@joebell_

7 months

<Card /> 🗂️

10

7

207

Joe Bell

@joebell_

6 months

9

5

204

Joe Bell

@joebell_

6 months

<Pageviews /> (powered by @astrodotbuild DB)

12

11

203

Joe Bell

@joebell_

4 months

<Field /> ✍🏻

8

6

198

Joe Bell

@joebell_

11 months

Friendly reminder that you can "block" some AIs from crawling your website content via `/robots.txt` (credit to )

6

32

192

Joe Bell

@joebell_

1 year

Just shipped: v3.0🐟 After 1,060 days, ~1.9k stars, and a brief period as a small SaaS app; the project has finally reached the finish line It's been a wild ride

Plaiceholder

Beautiful image placeholders, without the hassle.

plaiceholder.co

2

18

190

Joe Bell

@joebell_

3 years

I'm looking for my next role 👋 • UI / Front-end engineer with a soft spot for design systems + semantic HTML • Currently enjoying React.js via Next.js • Don't mind how you write CSS (as long as it’s consistent) I’d love to hear from you!

12

45

176

Joe Bell

@joebell_

3 years

experiment: blurring low-res image placeholders to create a “glow”

6

7

177

Joe Bell

@joebell_

3 years

I've been working a 4-day workweek – with no salary sacrifice – for over a month now and I already know I'm *never* going back 📈 Productivity up 📉 Stress level down

8

5

177

Joe Bell

@joebell_

2 years

For a while I’ve wanted to write a long tweet or blog post about the everlasting debate on “the right way to write CSS” Everything from CSS-in-JS to Tailwind… Honestly? Now I just think it’s all a huge waste of energy and I don’t really care anymore

19

4

175

Joe Bell

@joebell_

10 months

There are literally no downsides to crediting the people that inspired or contributed to your work

5

12

172

Joe Bell

@joebell_

4 years

You asked, I provided… Introducing "eslint-plugin-aesthetic" ✨

11

168

Joe Bell

@joebell_

4 years

Taskmaster got me through 2020

4

6

159

Joe Bell

@joebell_

2 years

Here’s what it renders… As for the source; it's using “cva” so it looks nothing like the output (see ) Anyway that’s not the point; the point is I really couldn’t care less because it’s my own damn website

GitHub - joe-bell/cva: Class Variance Authority

Class Variance Authority. Contribute to joe-bell/cva development by creating an account on GitHub.

github.com

Joe Bell

@joebell_

2 years

Why show your users a loading spinner when you can give them a “loading disco”?

51

134

2K

9

3

157

Joe Bell

@joebell_

2 years

Re-introducing 👨🏼‍🚀 Built with @astrodotbuild , @tailwindcss and @vercel edge functions

16

7

154

Joe Bell

@joebell_

7 months

Jamming with @alvishbaldha on form validation 💅🏼

6

154

Joe Bell

@joebell_

1 year

@BBCBreaking Classic

4

6

148

Joe Bell

@joebell_

3 years

What if I told you that you could create a pure CSS LQIP on-demand by writing a @tailwindcss class? Say hello to Plaiceholder's Tailwind JIT plugin 🚀 Coming soon… Coming sooner if I get more "Pro" members...

9

21

151

Joe Bell

@joebell_

2 years

I'm so socially awkward about working on my personal site in public (e.g. planes, trains or cafés) that I made an "awkward mode" to hide any content about me

11

1

147

Joe Bell

@joebell_

2 years

You know when you join a public WiFi and sometimes that pesky login page just never pops up? Well here's a little shortcut to force it open: (pro-tip: run via @raycastapp )

6

8

145

Joe Bell

@joebell_

3 years

Introducing my newest open-source adventure… "cva" (class variance authority) ✨ Create type-safe variants for your components, without being tied to CSS-in-JS

GitHub - joe-bell/cva: Class Variance Authority

Class Variance Authority. Contribute to joe-bell/cva development by creating an account on GitHub.

github.com

12

16

146

Joe Bell

@joebell_

2 years

me opening twitter to see what's new in the world, only to read the exact same @tailwindcss drama that's been regurgitated every other week for the last 5 years

7

5

144

Joe Bell

@joebell_

3 years

@dabit3 The best developers I know have less than 200 followers and aren't active on Twitter

11

7

132

Joe Bell

@joebell_

3 years

4

15

136

Joe Bell

@joebell_

3 years

Pro tip for @stitchesjs 🧠 Add a `motionSafe` breakpoint to avoid playing transitions/animations to users who've requested not to see them (borrowed this one from @tailwindcss )

4

9

133

Joe Bell

@joebell_

2 years

Just dropped plaiceholder v2.5.0 🚀 • Up to 30% smaller Base64 placeholders by default • Customize transparency, brightness, saturation and more… • More examples and refined docs and finally, a huge thanks to @vercel for sponsoring hosting 🖤

GitHub - joe-bell/plaiceholder: Beautiful image placeholders, without the hassle.

Beautiful image placeholders, without the hassle. Contribute to joe-bell/plaiceholder development by creating an account on GitHub.

github.com

5

8

130

Joe Bell

@joebell_

3 years

Didn't really plan on sharing this publicly, but fuck it… Just finished my first month on antidepressants, and it's so nice to feel like myself/human again 💆🏼‍♂️ My only regret: not seeing a doctor sooner

7

1

128

Joe Bell

@joebell_

2 years

Friendly reminder: "cva" isn't just for Tailwind Love CSS Modules, but want fully-typed variant props? Don't sweat it.

12

11

123

Joe Bell

@joebell_

2 years

@AdamRackis “Ah shit, you got me! I went through your whole bullshit interview process — 7 tech tests, technical essay and 4 prior interviews — because I’m not interested in this position”

2

119

Joe Bell

@joebell_

3 years

contrary to popular belief, open-source maintainers don't consider your use-case or "blocker" more important than their personal lives

3

10

122

Joe Bell

@joebell_

2 years

Update! Now includes: • An open-source example • Some background on where the idea came from (which you can scroll straight past) Feel free to copy, remix, and improve to your heart's content ✌🏼

Loading Disco

An alternative to the loading spinner

joebell.studio

Joe Bell

@joebell_

2 years

Why show your users a loading spinner when you can give them a “loading disco”?

51

134

2K

4

6

121

Joe Bell

@joebell_

6 months

Absolutely bonkers stats for 📈

8

1

120

Joe Bell

@joebell_

2 years

Life update: we're going nomad ✈️ First stop: Sri Lanka 🇱🇰 (April 11th) Next stop: No idea ❓ Signed up to @NomadList and I'm ready to gooo

11

0

104

Joe Bell

@joebell_

3 years

Personal update: today I started a contract role at @MonographHQ 🥳 Can't wait to go to work doing what I love most; building tasty UIs with @stitchesjs , @radix_ui and Next.js

10

8

103

Joe Bell

@joebell_

8 months

Clerk Design: Faro From Home

5

102

Joe Bell

@joebell_

2 years

Today, I’m kicking off “Sketches”; a series of posts exploring polished interfaces Sketch №1: “Bias Lighting” Ambilight for the web

2

6

95

Joe Bell

@joebell_

3 years

At the risk of sounding like a complete suck-up: Learning @nextjs genuinely changed my career for the better 📈 If you would've told me – a UI engineer – 3 years ago that I would build open-source Node.js packages, APIs and full-stack web apps, I would've laughed at you

8

1

98

Joe Bell

@joebell_

1 year

Today's the end on an era ▲ Heading offline for a long-overdue break

Joe Bell

@joebell_

2 years

Personal update: next month I’ll be moving on from Vercel Grateful that I had the chance to work closely with such a lovely, wildly-talented set of people — I’ll miss you terribly Prioritising some downtime, then open to opportunities from mid-April ✌🏼

10

0

223

4

0

97

Joe Bell

@joebell_

2 years

Just shipped 🔟 Spent some of my downtime studying the legendary work of Dieter Rams, and his "Ten Principles of Good Design" really resonated with me So here's a super tiny site for future reference

Ten Principles for Good Design

Dieter Rams' Ten Principles for Good Design

tenprinciples.design

5

10

97

Joe Bell

@joebell_

3 years

*I'm no longer looking for my next role 🙆🏼‍♂️

Joe Bell

@joebell_

3 years

I'm looking for my next role 👋 • UI / Front-end engineer with a soft spot for design systems + semantic HTML • Currently enjoying React.js via Next.js • Don't mind how you write CSS (as long as it’s consistent) I’d love to hear from you!

12

45

176

9

0

94

Joe Bell

@joebell_

3 years

Introducing "astley" A better way to build web applications ✨

11

13

95

Joe Bell

@joebell_

2 years

@razvancaliman Hey, I’m the author of this code 👋🏼 Feel free to check out the page for yourself: Some missing context: 1. It’s my personal site 2. It’s an isolated prototype with themes 3. Semantic, accessible + performant animations 4. source !== output

Loading Disco

An alternative to the loading spinner

joebell.studio

3

0

91

Joe Bell

@joebell_

2 years

4 years ago today, I was in Tallinn finishing up a small consultancy gig and getting ready to head back to the U.K. I went on a Bumble date and life took a turn for the better 💙🖤🤍

Joe Bell

@joebell_

3 years

3 years ago today, I was in Tallinn finishing up a small consultancy gig and getting ready to head back to the U.K. I went on a Bumble date and life took a turn for the better 💙🖤🤍

0

25

5

0

90

Joe Bell

@joebell_

3 years

Next.js just deprecated my `next-google-fonts` library (and I couldn't be happier!) Always bet on @vercel ⚡️

Tim

@timneutkens

3 years

Next.js 10.2 is out now! Super excited to roll out webpack 5 to a majority of Next.js users by default while keeping backwards compatibility for apps that did customization. This has been a multi-month effort in ensuring you can upgrade your Next.js app as smoothly as possible

11

47

390

4

2

90

Joe Bell

@joebell_

2 years

just hit 2000 stars ✨

6

3

89

Joe Bell

@joebell_

1 year

@shadcn @eliotovele Probably a good time to say that v1 is currently in progress with some big features to come — stay tuned ✌🏼

cva

Class Variance Authority

cva.style

3

7

88

Joe Bell

@joebell_

11 months

PSA: you can reduce the opacity of any color in CSS via the well-supported `color-mix()` function 🏁 Particularly handy for colors defined as custom properties

3

6

86

Joe Bell

@joebell_

2 years

dream styling solution: type-safe css, written in .css css-in-ts-in-css?

17

2

84

Joe Bell

@joebell_

9 months

Confession: I’ve always been so paranoid about framer-motion’s bundlesize that I’ve never really considered using it I’m only now realising just how much fun I’ve been missing out on 🫣

14

0

81

Joe Bell

@joebell_

3 years

It took 10+ years of coding for fun and work, but today the confidence finally hit me… I can build absolutely anything from absolutely nothing

5

0

81

Joe Bell

@joebell_

1 year

When dark mode is enabled, image brightness and saturation is reduced to avoid eyestrain

6

1

76

Joe Bell

@joebell_

2 years

@dendekky @t3dotgg @tailwindcss I don’t think it’s fair to call them a troll for a different opinion! I’d just rather prioritise my development experience, semantic markup, and user experience, over their “inspect element” experience

3

0

77

Joe Bell

@joebell_

6 months

5 years ago today, I was in Tallinn finishing up a small consultancy gig and getting ready to head back to the U.K. I went on a Bumble date and life took a turn for the better 💙🖤🤍

Joe Bell

@joebell_

2 years

4 years ago today, I was in Tallinn finishing up a small consultancy gig and getting ready to head back to the U.K. I went on a Bumble date and life took a turn for the better 💙🖤🤍

5

0

90

3

0

79

Joe Bell

@joebell_

7 months

“any reason why there hasn’t been an update to in months?” the reason:

10

0

78

Joe Bell

@joebell_

2 years

@razvancaliman 5. It’s designed for the user, not your dev tools If anyone here feels angry about how my code output looks that’s totally fine, but I promise you it’s a waste of energy The right way of writing CSS is the one that brings the best out of you

4

0

77

Joe Bell

@joebell_

6 months

There's nothing more humbling than trying to style a `table` element

5

2

78

Joe Bell

@joebell_

2 years

☑️ Day 1

Joe Bell

@joebell_

2 years

Thrilled to share that I'll be joining the design team at @vercel next week ▲

64

17

975

7

1

76

Joe Bell

@joebell_

2 years

just hit 1000 stars on GitHub ✨

5

0

76

Joe Bell

@joebell_

3 years

Ever wondered how to auto-generate "themed variants" in @stitchesjs ? 👨🏼‍🎨 (sauce: )

2

11

77

Joe Bell

@joebell_

4 years

📝 New post: “How to Shave a Yak” Getting distracted from my goals reinvigorated my personal life and my career in tech I poured my heart into this and I’d love to hear what you think

How to Shave a Yak

Getting distracted reinvigorated my personal and work life

joebell.studio

5

13

73

Joe Bell

@joebell_

3 years

happy friday to everyone except the person who decided it should be… React.forwardRef<Ref, Props>((props, ref) => …) instead of… React.forwardRef<Props, Ref>((props, ref) => …)

5

3

70

Joe Bell

@joebell_

1 year

Recently spent some time experimenting with "Concealed Inputs"

6

1

72

Joe Bell

@joebell_

2 years

Shipped something pretty exciting at @vercel today 🥹

3

1

71

Joe Bell

@joebell_

11 months

"Generate a grid of dashed lines with 2 conic gradients" Absolutely mind-blowing technique by @ChallengesCSS

1

7

71

Joe Bell

@joebell_

3 years

2

4

68

Joe Bell

@joebell_

4 years

Introducing “raam" 🚢 Flex-based layout primitives with support for `gap`

GitHub - joe-bell/raam: Beautifully boring cosmetic-free primitives for structure and layout.

Beautifully boring cosmetic-free primitives for structure and layout. - joe-bell/raam

github.com

5

10

67

Joe Bell

@joebell_

5 years

Me in 2016: Why would anyone use CSS-in-JS? This is outrageous. Me in 2020: Why would anyone not use CSS-in-JS? This is outrageous.

4

11

65

Joe Bell

@joebell_

1 month

These days I’m finding it increasingly hard to justify spending my free time working on side-projects or open-source, when I can also earn $0 MRR going outside on my bike

3

1

65

Joe Bell

@joebell_

2 months

My social battery is depleted, but my heart is full. Thank you #Config2024 ❤️

3

1

65