Sign in with Twitter


Josh ✨ @JoshWComeau Montréal, Québec

Instructor @concordia_btcmp. Previously @gatsbyjs, @khanacademy, @unsplash. Passionate about educating. @apapenheim's partner 🌈 He/Him

1,940 Following   17,722 Followers   16,856 Tweets

Joined Twitter 1/24/14

[New blog post!]: The failed promise of Web Components This started as a series of tweets…
Retweeted by Josh ✨This is such a powerful, awesome tool. And this release looks 💣 💣 💣 @_pierremouchan Looks great!
@seaofarrows @smashingmag Hm, I have a bunch of interactive widgets in my blog, though most of them should stop ani… tutorials by @JoshWComeau: ✨ Animated Sparkles in React 🧙 Magic Rainbow Gradien…
Retweeted by Josh ✨
Woaah this is great! Complex gradients are stunning, but hard to create. This makes it a lot easier! @akd_io Oh no! How did it break? Just no more confetti, or something funkier?Whoops, forgot to credit @eric_waetke!"vue-sparkles", a Vue component that adds sparkly effects to whatever you wrap it around! Inspired by my "Animated… @webkit_ interesting 🤔 thanks for the report! @timobile Yeah, spring for the whole thing, if they're animating at the same time. Ideally, you could stagger them…
@MaximeHeckel Your post is awesome!! Super informative and accessible @hankchizljaw Thanks Andy 😄 @stevefink That’s the plan 😊Video alt: a cute illustrated weight sits at the end of a spring. A mouse cursor drags it down and releases, causin…🎉🎉🎉 New interactive tutorial: “A Friendly Introduction to Spring Physics”. It teaches the fundamentals of using sp… @thisismahmoud_ Technically elbows, used to just be one but now it’s both. Haven’t been able to type or use a mouse… send post previews in my newsletter, if that kind of thing interests you! this in ~an hour. SUPER excited, one of the most in-depth/interactive posts I’ve created. Also the fir… @knowkalpesh Thanks :D
After twelve hours on a website, the next link click will be a full page reload to get new code:…
Retweeted by Josh ✨
Colors of noise. Click to play: Made with use-sound by @joshwcomeau and react-spring v9 by…
Retweeted by Josh ✨ @Jwnathan_W So the cool thing about clamp is it works with any values, not just width! You can use it on height the…
@__jrm_filipe That’s just for explanation; the way that it works is that browsers ignore invalid values. So IE won’…🚨 It's launch day! 🚨 useEffect Over Lunch is now available! ⏰ Learn useEffect in under an hour 🥪 While eating a s…
Retweeted by Josh ✨ @wesbos Haven’t tested it, but it seems like it’d work? 🤷‍♀️ @wesbos What I plan on doing: a tweak to the “<Link>” component which switches from client-side navigation to a typ… @ThomasWang I have a media query, it becomes a full-page thing with a different layout. Didn’t show it since I thou…, you could use min-width, width, and max-width if IE support is important to you. The cool thing about cla… @kingkool68 True! Though I prefer the semantics of clamp, it’s clearer what the intent is. And it’s more universal… @joshuazeltman The really cool thing about clamp is that it can clamp arbitrary values. For width, it’s true that w… @kilianvalkhof @wulforr Ah, I actually am using width, not sure why I wrote max-width! Though yeah it also doesn’t… support for `clamp` it is pretty good, though it's missing Internet Explorer. If you need to support IE, I… clamp is so magical. This modal is set to fill 70% of the viewport width, but clamped between 550px and 750px.…
"Progressive Enhancement with WebGL and React", a wonderful write-up of how to deliver cool blobby experiences on t… @beaussan Essentially it’s to protect against contextually problematic CSS. Another example is stacking contexts; m… @beaussan It really depends on the container, but yeah one example is if the parent has overflow: hidden, and the t… you're looking for a silver lining to 2020 it has been good for self-published #webdev ebooks. I've picked up a…
Retweeted by Josh ✨If you're just getting started with @GatsbyJS, I'd like to learn about your experience so far. So far we've talked…
Retweeted by Josh ✨ @blainekasten @RocketLeague I only play Rumble, and very casually 😅 I keep getting to Diamond 1 and then demoted ba… @sergiodxa Yeah, so I discuss that trade-off near the bottom a little bit. I’d rather be explicit with the nodes, f… @_diondiondion Ohh interesting! TIL, will update. @keithkurson @romelperez07 Only other one I can think of is this: And related:… so I definitely added alt text to this, but I don't see it now. Maybe because I scheduled it? cc @TwitterDev A…🎉 New snippet published: <InPortal>, a utility component for working with portals in React. • 🚀 Ergonomic API • ✨… the level of detail in this sci-fi React framework is next level ("out of this world" 🥁). So many subtle ani… @blainekasten @RocketLeague It’s so much harder to queue for a second game now :/ no idea why they got rid of the o… @jdunck @ifonlyalabama @Altimor Khan Academy is a non-profit - they pay reasonably well and have attracted incredib… :o
⭐️ The incredibly talented @aaroniker_me strikes again, with this adorable star toggle 🤩🤩🤩 @samanthabretous Hah, thanks! I had a lot of fun with that. @venikunche Thanks for sharing :D @0xca0a @haywirez It’s still alive and well! Myself and a bunch of folks still use it, the community is fairly acti… years I've used and loved, this is essentially that, but built into the browser 😮🔥 Chrome and Firefox both feature awesome Bézier curve editors. These tools offer lightning-quick feedback, so you… the little icons are called “hashflags”! @FPresencia Yeah, I feel like jpeg artifacts REALLY bug me, whereas I don’t mind the webp blurriness. So I’m probab…
It took me a while to wrap my head around reduce in JavaScript (and it comes up a ton in technical interviews!). He…
Retweeted by Josh ✨Learning that this isn’t the feel-good story I thought it was. Plz be kind to open-source maintainers. @MatchuSaysHi Eep yeah I hadn’t thought about that 😬I personally haven’t used moment in years. My current toolkit consists of date-fns ( and th…😮 It’s the end of an era! Moment.js is deprecating itself, and encouraging developers to use a more modern alternat… @swyx @ossia Ah that would be amazing! Quincy, if you happen to see this, let me know if you’d be interested! The… @amber1ey I’ve circulated it at my local bootcamp, but nothing beyond that! I wonder how I’d do it more broadly 🤔 @mrcalexandre Thanks so much 😊 @FPresencia I did a bunch of testing when I implemented it in my blog and it saved quite a bit over jpg! I was comp… @trostcodes Hah, appreciate it! @Daajust Right, so you'll want to use a <picture> tag, so that you can still serve the png/jpg for browsers that do… @AndreasPizsa Huh, I've never heard of this! Interesting :o @AnTheMaker Ahh yeah it might not yet be worth the effort, especially if you have to update a bunch of individual image tags! @AnTheMaker In fact it can! My thread has a second tweet:'s all I've got! If you'd like to learn more about the book (or share it with an aspiring-developer friend!), y… think the biggest challenge has been that the book is aimed at folks looking for their first or second job, peopl… terms of conversion rate, about 1 in 3 people who visit the landing page go on to download the book. I'm surpris… posted twice on HN since I forgot the "Show HN" the first time, and it was too late to delete) I didn't even tr… had zero success on other channels. I got downvoted on the "learnprogramming" subreddit, presumably for self-prom… has come primarily from two channels: my twitter audience, and word-of-mouth. I tweeted about it twice. My… book is published in 3 formats, so I guess lots of people downloaded multiple? Google Analytics notoriously un…'s hard to know exactly how many people have downloaded the book: my guess would be about 6000. According to Goo… also broadcast it to my existing subscribers, ~4700 people. 28% of them downloaded the book, about 1300 folks. I… book is sent as a reward for joining my newsletter, so my main metrics come from ConvertKit (email software).…📈 It's been one week since I published my guide on effective portfolio sites ( Overall it… @karlymsdev Thanks so much :D Portfolio site looks great, I’m into the waving hand emoji! Project descriptions are… gorgeous CSS piece by @rolivaalonso ❤️
Retweeted by Josh ✨Men in tech, please learn to start referring as developers in general in a more gender neutral way. Not all of us a…
Retweeted by Josh ✨
Browser support: it just landed in chrome, no other browser. But that’s OK! Thanks to the <picture> element, we can… the web has a new picture format, .AVIF, and it’s about half the size of .webp (which is itself half the size of… @SawyerBlatz @SlackHQ 🎉 Congrats Sawyer! @joyancefa Bring it up with your team! Maybe everyone will agree. @lachlanjc Afraid I’m not sure either 😅 I’ve heard good things about, and I think Kent C Do… @kaleman15 Right, yeah I mean specifically “console.log”. Since that’s what I’m searching for. Definitely in favour of logging services! @kuizinas Any log that isn't an error/warning, and that isn't for debugging purposes. Eg. the "Server running on ${… might say that the better solution is to never have any "permanent" logs, but they always seem to crop up! Ofte…🔥 For "permanent" logs, use ``. That way, when it's time to open the PR, you can blanket wip…
🐉 I've been mad busy recently so I haven't done any @codepen-ing in a while. But the '100 divs' #codepenchallenge
Retweeted by Josh ✨
@MrDarrenV @LittleKope But yeah my hunch is that portfolio sites matter less; work experience matters more than per… @MrDarrenV @LittleKope I felt qualified to write the junior-dev book since I’ve coached a whole bunch of bootcamp a… @MrDarrenV @LittleKope Not currently planning on that, but maybe I should 🤔 though the problem is that when it come… @LittleKope I recognize that it’s confusing, since my personal site is very different from what I advocate for in t… @LittleKope This is a lovely idea! But it’s not quite what my book is about 😅 my book is really about curating and…