Josh W. Comeau
@JoshWComeau
Followers
127,506
Following
2,173
Media
3,322
Statuses
29,362
Indie hacker and educator. Blogging at . Previously @gatsbyjs , @digitalocean , @concordia_btcmp , @khanacademy . He/Him 🌈
My React course →
Joined January 2014
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
メイドの日
• 474503 Tweets
ONGSASUN CONFLICT
• 254850 Tweets
Whindersson
• 220284 Tweets
メイドさん
• 162911 Tweets
Kyungsoo
• 140432 Tweets
メイド服
• 123245 Tweets
Joost
• 94155 Tweets
スタンド
• 69291 Tweets
#PLEDIS_TREAT_JUN_BETTER
• 57016 Tweets
#WHEREISJUN
• 56750 Tweets
Felipe Neto
• 56711 Tweets
トニオさん
• 52297 Tweets
#ساعه_استجابه
• 39472 Tweets
TREAT YOUR ARTISTS EQUALLY
• 36739 Tweets
Gill
• 35932 Tweets
Copa América
• 33897 Tweets
密漁海岸
• 32511 Tweets
露伴先生
• 29620 Tweets
Steve Bannon
• 26706 Tweets
高橋一生
• 23693 Tweets
イタリア料理
• 19657 Tweets
Palermo
• 17738 Tweets
#CSKvsGT
• 14936 Tweets
الامم المتحده
• 13972 Tweets
JUN DESERVES BETTER
• 12993 Tweets
Trenes Argentinos
• 11839 Tweets
Militão
• 11475 Tweets
Pinned Tweet
🌸 I'm having a “Spring Sale”! For the first time since its release, The Joy of React is officially on sale 😄.
I'll share a bit of info about the course in this thread, but you can also learn more about it on the course homepage:
7
29
151
🔥 `box-shadow` doesn't work well with transparent images. `filter: drop-shadow` does what you'd expect, adding a shadow to the image's contents.
.my-img {
filter: drop-shadow(1px 2px 3px black);
}
CSS filters are so rad 🥰
Pen:
80
1K
7K
🎉 Announcing “Operator Lookup”, a search engine for JS operators 🥳
Why? Because they're *ungoogleable*: search engines ignore special characters. I can never remember what these things are called, or how they work!
Try it now:
105
2K
6K
⚠️ Friendly reminder: If you work on internationalization, please do not use the user’s location to decide what language to serve your content in. Use the “Accept-Language” header instead.
Users can't set their IP address, but they can set their OS’ language setting.
88
616
6K
🔥 You know that annoying thing when you're scrolled to an anchor and the site's sticky header covers it up?
That's fixable in 1 CSS declaration now 🎉
.heading {
scroll-margin-top: 72px;
}
51
811
5K
As some of y'all know, I've been coding hands-free for a while now. I'll be releasing a blog post about it soon, but here's a quick sneak peak!
(Sound on plz! 🔊)
126
855
5K
✨ Introducing: “An Interactive Guide to Flexbox” ✨
It's a brand new interactive blog post with 20+ demos that help you build an intuition for how Flexbox works. 🔥
I've never been more excited about a blog post 😄
→ Check it out:
103
780
4K
Can we leave "auto-select" in 2023 please?
Let users select the text they want. Don't try to help them by selecting everything.
105
219
4K
If you program with a mouse and keyboard, I just assume you’re a junior developer.
157
265
3K
So you know those super cool swirly gradients that Apple and Stripe has been using recently?
Evidently, they're called “mesh gradients”, and I found a tool to generate them ✨
38
361
3K
🌠 One of the trickiest modern-day layouts: having a fixed-width center column that allows specific children to break out and fill the page.
✍ I found a super nice solution to this problem using CSS Grid, and I break it down in a brand-new blog post!
45
403
3K
I'm building my own course platform for my CSS course, because I want it to feature interactive minigames. Being able to tangibly play with concepts is the best way to build a working mental model / an intuition.
I'm so excited 😄
51
149
3K
Oh this is cool! CSS now has `lh` units. `1 lh` is equivalent to the total computed line height. So you can size something according to the text it sits next to, for example.
19
560
3K
🎉 Brand-new blog post just published, all about creating lush, life-like shadows in CSS.
Check it out here:
→
Or, keep reading for some highlights. 👇
40
419
2K
So my course pre-launch has officially closed, and what a week it's been 😅
4773 people bought the course, for a grand total of US$574,371 in orders (after refunds).
Happy to answer any questions folks have about the launch! 😄
274
121
2K
🐠 Guppy has been open-sourced! 🐠
Guppy is a desktop application that replaces your command-line for React development. Meant to remove barriers for learning how to build awesome, modern web apps!
This is a super-early Alpha release, MacOS only.
58
555
2K
🎉✨ Announcing “Shadow Palette Generator”, a tool to help you create lush, realistic shadows in CSS.
`box-shadow` can look *fantastic*, but it requires a bunch of crafty tricks. This tool builds those tricks in, and makes them easy to use. 😄
→
35
377
2K
🔥 This is such an amazing resource: “react-use”, a collection of 100+ custom hooks to solve all sorts of common React problems.
Community-developed and battle-tested. 🌟
30
317
2K
✨🥳🎉✨ WE’RE LIVE!
After more than a year of full-time work, CSS for JavaScript Developers is completed, and ready to go. 😄
Learn more:
👉
103
400
2K
One of my favourite lil’ tricks: I use different favicons in development and production, so that I can quickly tell which is which.
Here's what I use on my blog:
80
95
2K
😮 It's amazing what you can do with modern CSS. These icons are all filters, gradients, clip-paths, and inset box shadows.
Check it out:
Created by
@One_div
, discovered in
@FrontendHorse
.
31
304
2K
🔥 The new `aspect-ratio` CSS property is brilliant. Any element can be given a proportion. As its width changes, its height scales (or vice versa!).
aspect-ratio: 3 / 2;
Just landed in Chrome, coming soon to Safari. Other browsers to follow 🤞🏻
Demo:
22
309
2K
🌠 I'm in love with the CSS `clamp` function. It lets you clamp a value between a min and max, *across units*. Check this out:
h1 {
font-size: clamp(
24px, // min
5vw, // value
48px // max
);
}
✨ Text scales with the screen width, but only to a point
19
324
2K
🎉 VERY excited to announce what I've been working on these last couple months:
✨ CSS for Javascript Developers ✨
It's a comprehensive online course that will teach you the skills to tackle all sorts of designs with confidence.
➡️➡️➡️ Learn more:
86
272
2K
I'm publishing a blog post tomorrow morning, and I'm *super* excited about it. 😄
Here's a lil’ preview:
18
82
2K
Happy New Year!!
I know many of you work on side-projects, projects where you don't have the benefit of a product & design team. I'm betting a bunch of y'all have goals to create something new in 2020!
Thought I'd share a thread with all my favourite resources:
39
568
2K
✨ “An Interactive Guide to CSS Grid” is now live! ✨
I've just published one of the most ambitious blog posts I've ever written. It's a deep dive into the CSS Grid layout mode, with tons of interactive demos!
Check it out:
51
370
2K
Yay I made an over-the-top "Like" button with React hooks! 🎣
⇢ Tracks your cursor, when it's nearby
⇢ Gets all happy when you click it
⇢ Doesn't like being toggled off, although it gets over it pretty quick.
Code:
(messy/experimental 🐉)
32
259
2K
The `const` keyword in JavaScript is used to create a constant. Many of us learn that a constant is a variable that can't change.
And yet, when applied to an object or array, we *can* make changes to it!
Let's dig into this. 🧵
76
269
2K
✨ New blog post: “The Rules of Margin Collapse” ✨
Sometimes margins overlap, sometimes they don't, and it's often surprising and bewildering!
Learn how it works with this comprehensive, interactive tutorial that covers the 8 rules of margin collapse.
30
336
2K
🔥 "100vh" is a bit frustrating to use, since it doesn't factor in the dynamics of modern mobile browsers 😬
Fortunately, new units are on the way! "Long" and "short" viewport units will let us pick which size we want.
Awesome writeup by
@bramus
:
23
342
2K
🎉 Just published a new blog post: “An Interactive Guide to CSS Transitions” 🎉
It's a deep dive into `transition`, the CSS motion workhorse. We'll discover different timing functions, learn about UX and performance best-practices, and more! ⚡️
→
35
326
2K
A few months ago, I deleted a file. Today, I realized that actually, I need it!
I picked a random commit 6 months ago and found the file… but hm, what if it changed after that point? How do I find the *final* version of that file?
✨ Here's the Git command I used:
24
183
2K
PSA: If you want to crop an image, you don't have to do that thing where you make it a background image anymore! Instead, you can use a real image and `object-fit`.
This way, users can still right-click to save the image, plus you can add an alt tag for screen readers!
31
286
2K
🔥 New blog post: “Make Beautiful Gradients”
I'm SO excited to share this one. We look at how to make lush, vivid gradients, using alternative color modes and some CSS trickery.
It even includes a little bonus at the end. 😄🎁
Check it out:
41
218
2K
At a couple jobs now, I've been tasked with reviewing incoming applications, so I've read _a lot_ of cover letters. IMO, a lot of them miss the mark 😬.
Today I thought I'd share some cover letters I've written which led to an offer, + some cover letter tips.
See thread 🧵 👇
28
265
2K
A couple years ago I built a project called Tinkersynth. It's an open-source tool for creating generative art!
When you're happy with your creation, you can download high-res .png or .svg for free. Makes a great phone background 😄
32
184
1K
“What triggers a re-render in React?”
It seems like a simple question, but there are *so many misconceptions* about it. I know, because I held many of these misconceptions myself, even after years of React experience 😬
✨ My shiny new tutorial explains:
29
282
1K
🔥 In my projects, I use a handful of “hidden gem” NPM packages. These club-ready bangers have really helped me out, but aren't super well-known. I thought it'd be fun to share some of them. 😄
Here are 5 of the secret weapons in my armory ⚔️
🧵
24
209
1K
🔥 JS is getting a super fancy new date/time API, Temporal.
• Immutable design
• Moment-style date arithmetic
• Timezones!
• Ranges (getting the distance between two dates)
@rauschma
has a wonderful exploratory blog post on the subject:
22
290
1K
I have done it. I have made the world's worst link.
Behold:
121
58
1K
If you've ever tried to build HTML emails, you know it's gnarly as heck. 😬
Email clients don't support modern CSS, so we need to use 90s-style <table> layouts. Plus, there are SO MANY email clients, each with their own rendering quirks.
I wanna share the solution I built 💖🧵
30
150
1K
😮 The team behind MUI / Base UI is working on a zero-runtime CSS-in-JS library.
I've been playing with it, and it's fantastic.
It's still very early, but it seems really really promising. I'm excited. ✨
52
134
1K
🌠 Did you know you can make any DOM element resizable like a <textarea> with 1 line of CSS?
.resizable {
resize: both
}
• 💡 Can be restricted to a single axis (`resize: horizontal`)
• 📏 Can be constrained by max-width / max-height
• 👀 Observable with ResizeObserver
12
209
1K
🔥 Well this is pretty cool! Charts.css, a CSS-driven data visualization library.
→
12
184
1K
🌠 Did you know HTML includes a native progress-bar element, <progress>?
<progress max="100" value="66"></progress>
Here's what it looks like in Chrome. More fun stuff in thread! 🧵
37
260
1K
🔥 this is cool! Firefox is working on native CSS masonry layouts. Here's the CSS to create this screenshot:
.grid {
display: grid;
grid-gap: 1em;
grid: masonry / repeat(auto-fit, minmax(20em, 1fr));
}
The numbers represent DOM order. It stacks items like this 😮
13
248
1K
📣✨
CSS for JavaScript Developers has *officially* entered Early Access!!
Learning the right mental models totally changed my experience with CSS: it went from frustrating to FUN.
I've packaged that transformation into a self-paced course.
👇👇👇👇
73
326
1K
☄️ New blog post just dropped!
It's a deep dive into the world of React Server Components. We'll explore what it is, how it works, and what some of the advantages are.
40
267
1K
🔥 Set your form inputs to have a font-size of 1rem (16px) or larger to prevent iOS Safari from automatically zooming in when tapped.
Makes such a big difference from a UX perspective!
19
213
1K
🌠 All of the major browser manufacturers (Google, Apple, Microsoft, Mozilla), along with other orgs, have committed to working together in a project called “Interop 2022”.
The goal is to ship a bunch of highly-requested features in a compatible / coordinated way.
18
176
1K
Just published a new blog post: “The End of Front-End Development”. 🔥🔥🔥🔥
It's about what I think LLMs like GPT-4 will mean for developer jobs.
(Spoiler: the title is tongue-in-cheek, and I'm actually pretty optimistic!)
50
283
1K
Building a little interactive widget to teach Flexbox alignments 😄
Current plan is to use this fella to learn how the browser renders items in a Flex container under various conditions.
Animations made possible by Framer Motion ✨
21
123
1K
🎉 After months of work, I'm thrilled to announce the release of my new book: "Building an Effective Dev Portfolio".
Its goal is to make job-hunting a bit easier for junior devs 😄
Best of all, You can download it ✨ for free ✨
47
294
1K
PSA: Web browsers only understand pure, unadulterated CSS. All of the fancy tools we use — Bootstrap, Tailwind, Sass, CSS-in-JS libs — produce vanilla CSS for the browser.
If you want to be productive with these tools, you *need* to understand how CSS works.
35
146
1K
It's been exactly 1 year since OpenAI launched GPT-4, along with the “hand-drawn sketch to code” demo.
I remember my twitter feed being full of people confidently proclaiming that front-end was solved, that we'd all be out of work within months.
🧵
19
74
1K
🌠 One of my favourite little tricks: use a different favicon for localhost.
Makes it super easy to tell which environment you're working in, so you don't accidentally delete production data thinking it's dev stuff 😅
24
118
1K
So, 2022 is almost over, which means your professional development stipend is about to expire! ⏰
If you work at a company that has this perk, I've collected some suggestions in this thread! Books and courses I've been impressed with, or excited by.
30
158
1K
💖 Thrilled to announce that my New Thing has a name and a landing page. Introducing… The Joy of React!
It's a comprehensive beginner-friendly course that covers everything you need to know to become a happy & productive React developer 😄
Check it out:
60
145
1K
🔥 If you draw an SVG shape right up to the edge, it'll likely get truncated, since the strokes will be half outside the viewBox. 😬
You can solve this with One Weird Trick:
svg {
overflow: visible;
}
Now, your SVGs can spread their wings. No need to do funky maths. 🌈
28
143
1K
🔥😮 CSS variables can be used *within CSS keyframe animations*!
Here, 3 boxes use the same “bounce” animation, but bounce by different amounts by each defining their own “--bounce-height” value 😄
Code:
19
177
1K
✨ This is one of my favourite lil’ tricks.
If a background-color is blocking something it shouldn't, `mix-blend-mode` can change how that color is mixed with the stuff behind it.
No z-index / opacity hacks required!
15
87
1K
For *years* now, I've wanted to write a blog post about JavaScript Promises, but they’re so hard to explain.
I think I've finally figured out how to do it. Getting really excited about this one. 😄
76
19
1K
CSS clamp is so magical. This modal is set to fill 70% of the viewport width, but clamped between 550px and 750px.
The CSS:
.wrapper {
max-width: clamp(550px, 70vw, 750px);
}
More info:
12
204
1K
The most infamous CSS rule is:
button:focus {
outline: none;
}
This style removes the "ugly" focus ring on inputs and links, but it means keyboard users can't navigate; it totally breaks the experience for them (and any non-mouse users) 😬
A thread with some solutions 🧵
20
135
1K
If you work as a developer and don't have a college degree, I'd love to hear the story of how you got your first job! What convinced employers to take a chance on you?
(RT for reach? ♥️)
373
444
1K
🚀 Houston, we have liftoff! The Joy of React is officially available for purchase.
This has been my main focus for the past year, and I'm *so friggin’ thrilled* to finally ship it. 😄
Check it out:
→
90
175
1K
🔥 My favourite icon pack is Feather Icons. They're beautiful and whimsical. But it's not quite as comprehensive as other icon packs.
Just discovered Lucide, a fork of Feather Icons that takes the # of icons from ~300 to 800+!
→
25
99
1K
📢 Introducing my latest project, Waveforms! 📢
An interactive, explorable explanation about the peculiar magic of sound waves.
Built with React, styled-components, canvas, and SVG.
Repo:
〰️ 🎚 🎛 🔈 🔉 🔊 〰️ 🎉
87
362
1K
So, this week, I've been working on a lil’ tool to help illustrate the difference between state and refs in React.
It's been surprisingly challenging, but I'm really happy with the results 😄
Here's a quick preview, I'll walk you through it in thread!
27
116
1K
Guppy projects can take 25-30+ seconds to be created, and it's not something I have much control over. So I decided to make the installation process more fun, with this straight-outta-Windows-98 download animation.
Oh and it's interactive :D
20
136
1K
❤️🔥 Just published a new blog post, “My Custom CSS Reset”.
I share the set of styles I apply to all my new projects, and we dig into how they work and why they're helpful.
32
229
1K
🔥 CSS scroll snapping is SO nice.
Hard to tell from the GIF but scrolling "snaps" into place, artists are always left-aligned in the container 🎉
Done in 3 lines of CSS:
scroll-snap-type: x mandatory
scroll-snap-align: start
scroll-padding: 32px
Demo:
17
188
1K
The next major version of React, React 18, just launched. There's some *really* cool stuff in this one, and it sets the stage for even more stuff in the future! 😮
Gonna share some of the things I'm most excited about in-thread. 🧵
12
183
1K
✨ Sneak peek at the GUI project manager I'm building. ✨
There's still a ton to do / clean up. Copy is all placeholder, some animations need smoothing. But I'm really happy with this onboarding experience overall :)
42
109
1K
🔥Protip: Multi-line ellipsis is possible in CSS now, for all major browsers except IE!
15
259
1K
😁🎉 Working on a new feature for my blog, I'm calling it "Link previews". Pops up a little screenshot, to give you a sense of what this link holds.
• Captures all external links
• Generates screenshots daily
• Totally integrated into my Gatsby process, zero manual steps!
47
80
1K
Well this is pretty cool! CSS is getting a “when” at-rule that will allow us to set up if/else-if/else chains.
More info:
18
189
1K
🌠 PSA: if you nest elements with rounded edges, you need to tweak the radius! Otherwise you get chunky corners.
✨ The formula I use:
outerRadius = innerRadius + (outerSize - innerSize) / 2
Live demo:
8
156
1K
🤯 Well this is pretty cool! A table that has a sticky header *and* a sticky first-column.
Pure CSS solution too, via `position: sticky` and some clever stacking orders. No JS required!
Full walkthrough on
@css
:
16
160
1K
Yesterday, I sent an email about my new Pride-themed tutorial. The results are about what I expected: a few grumpy replies, and ~3x more unsubscribes than usual.
It's sad that such a mundane email is polarizing, but ultimately, I'm glad these folks are seeing themselves out.
11
24
999
OK this is friggin' cool: Using an SVG turbulence filter and different blend modes, we can create “grainy” gradients in CSS.
Wonderful article by
@jimmmy
on CSS Tricks:
19
105
994
🔥 Well this is cool! Chrome now has a Flexbox panel helper.
The little icons provide hints as to what the properties do, and they even reorganize themselves based on the flex-direction!
19
194
989
UX tip: don't use the `disabled` attribute on buttons.
Disabled buttons don't provide any feedback. It's better to allow the form to be submitted at all times, and to let users know *why* their submission is invalid.
More info from
@adambsilver
:
53
134
987
OMG try liking this tweet. Something neat happens, at least on the iOS app :0
#HappyThanksgiving
17
15
975
🔥 Little trick to make your modal animations smoother: Use a two-stage fade:
1. Fade in an empty shell
2. Fade in the content
Avoid the nasty text-over-text thing that happens otherwise 💯💯💯
All the gory details shown in this slo-mo clip 👇🏻
15
83
975
I feel like there's a lot of hype about web3 on Twitter, and it might give folks the impression that they *need* to switch gears and start learning this stuff if they want to stay relevant.
I wanna push back on this a bit. I think you'll be just fine if you ignore the web3 hype.
39
144
964
Woah! So you know how a fixed/sticky header will cover up headings when they're linked to?
I have a wildly elaborate fix for this, but apparently the solution is really simple now:
scroll-margin-top: 90px;
Fixed by the platform 🎉
24
164
967
Are you interested in teaching stuff to developers? Maybe through a blog, or a workshop, or an online course?
🧵 This thread is a quick summary of some of the most-critical stuff I've learned, over years of blogging, teaching at a bootcamp, and working in edtech at Khan Academy.
23
175
958
🔥 So you know that thing where your CSS declaration isn't working, and you have no idea why? It's likely that there's an ✨ implicit dependency condition ✨ that isn't being satisfied.
Happily, Firefox now helps you diagnose + fix it.
Walkthrough in-video (🎶 sound on!):
41
147
949
🎉 New interactive post on my blog: Folding the DOM.
This hands-on post dives into 3D transforms and how, with some trickery, you can create nifty fold effects like this.
»
23
138
953
Each module in my CSS course is getting a custom 3D illustration. Enjoying the collection so far 😄
33
36
947
😬 The worst thing in the world† is when hover animations stutter, because moving the cursor causes it to enter/leave.
🔥 Fix it by separating the _trigger_ from the _visual effect_. Listen for hover on the parent.
Codepen:
† Very slight exaggeration.
15
115
948
✨ I just published a brand-new blog post: “How to Center a Div: The Ultimate Guide to Centering in CSS”.
It's interesting, I started this post because I thought it'd be funny, and could serve as a good intro. But it became *so much more* than that!
74
153
890