www.joshwcomeau.com
Open in
urlscan Pro
76.76.21.241
Public Scan
Submitted URL: http://www.joshwcomeau.com/
Effective URL: https://www.joshwcomeau.com/
Submission: On January 04 via api from US — Scanned from DE
Effective URL: https://www.joshwcomeau.com/
Submission: On January 04 via api from US — Scanned from DE
Form analysis 1 forms found in the DOM
<form class="sc-8f45fa89-0 brqsRC">
<div class="sc-8f45fa89-1 loYxgE">
<div class="sc-ec733807-0 bgwRpA"><label for=":Rdqcm:" style="color:var(--color-text);opacity:1" class="sc-ec733807-1 gzJNaj">First Name</label><br><input autocomplete="given-name" id=":Rdqcm:" class="sc-ec733807-2 fKuylC" value="">
<div class="sc-ec733807-3 koCZAl"></div>
</div>
</div>
<div class="sc-8f45fa89-2 rNmVy">
<div class="sc-ec733807-0 bgwRpA"><label for=":Rlqcm:" style="color:var(--color-text);opacity:1" class="sc-ec733807-1 gzJNaj">Email</label><br><input required="" autocomplete="email" type="email" id=":Rlqcm:" class="sc-ec733807-2 fKuylC"
value="">
<div class="sc-ec733807-3 koCZAl"></div>
</div>
</div>
<div class="sc-c8e6784c-0 fjBGoo"><button type="submit" style="width: 175px; --magic-rainbow-color-newsletter-signup-button-0: hsl(325deg, 100%, 48%); --magic-rainbow-color-newsletter-signup-button-1: hsl(325deg, 100%, 48%); --magic-rainbow-color-newsletter-signup-button-2: hsl(325deg, 100%, 48%); transition: --magic-rainbow-color-newsletter-signup-button-0 1625ms linear 0s, --magic-rainbow-color-newsletter-signup-button-1 1625ms linear 0s, --magic-rainbow-color-newsletter-signup-button-2 1625ms linear 0s; background: radial-gradient(
circle at top left,
var(--magic-rainbow-color-newsletter-signup-button-2),
var(--magic-rainbow-color-newsletter-signup-button-1),
var(--magic-rainbow-color-newsletter-signup-button-0)
);" class="sc-ac600c13-0 sc-66964c78-0 gEahXK gQMbbF"><span>Subscribe</span></button></div>
<div class="sc-c473a104-0 jSpzMq"><label for=":R1qcm:">Do you agree to the terms?</label>
<p>If you're a human, please ignore this field.</p><input name="accept-terms" type="checkbox" id=":R1qcm:">
</div>
</form>Text Content
Toggle mobile menu Latest Tutorials React Animation CSS Goodies Courses Skip to content JoshWComeau * Latest * Posts * Goodies * Courses RSS Feed JOSH W COMEAU HOMEPAGE RECENTLY PUBLISHED AN INTERACTIVE GUIDE TO CSS GRID CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest đĄ lightbulb moments I've had in my own learning journey. Read more UNDERSTANDING THE JAVASCRIPT MODULO OPERATOR One of the most commonly-misunderstood operators is Modulo (%). In this tutorial, we'll unpack exactly what this little bugger does, and learn how it can help us solve practical problems. Read more MAKING SENSE OF REACT SERVER COMPONENTS This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the server. This is a significant paradigm shift, and it's caused a whole lot of confusion in the React community. In this tutorial, we'll explore this new world, and build an intuition for how it works, and how we can take advantage of it. Read more ANIMATED PRIDE FLAGS Happy Pride month! In this tutorial, I'll share a handful of my favourite animation tricks. You'll learn how to build an animated wavy pride flag using CSS keyframes and linear gradients. We'll also see how to make it dynamic using React. đłď¸âđ Read more THE âCONSTâ DECEPTION EXPLORING THE DIFFERENCE BETWEEN ASSIGNMENT AND MUTATION IN JAVASCRIPT The âconstâ keyword in JavaScript is used to create constants, variables that can't change. Curiously, though, we do seem to be able to edit objects and arrays that are created using âconstâ. In this tutorial, we're going to dig into the incredibly-important distinction between âassignmentâ and âmutationâ in JavaScript. Read more THE END OF FRONT-END DEVELOPMENT Large language models like GPT-4 are becoming increasingly capable, at an alarming rate. Within a couple of years, we won't need developers any more! âŚOr at least, that's the narrative going viral on Twitter. I'm much more optimistic about what these AI advancements mean for the future of software development. Read more COMMON BEGINNER MISTAKES WITH REACT PITFALLS, GOTCHAS, AND FOOTGUNS, OH MY! I used to teach React at a local coding bootcamp, and I noticed that students kept getting tripped up by the same handful of things. In this article, we're going to go through 9 of the most dastardly gotchas. I'll show you how to solve these common problems, so you can avoid a lot of potential frustration! Read more DATA BINDING IN REACT As developers, we don't like working with forms, but they're a critical part of most web applications! In this tutorial, you'll learn exactly how to wire up all of the different form controls in React. Never forget how to data-bind a checkbox or radio button again! Read more COLOR FORMATS IN CSS CSS gives us so many options when it comes to expressing colorâwe can use hex codes, rgb, hsl, and more. Which option should we choose? This turns out to be a surprisingly important decision! In this article, we'll take a tour of color formats in CSS, and see which option will serve us best. Read more AN INTERACTIVE GUIDE TO FLEXBOX 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 and learn how to do remarkable things with it. ⨠Read more A WORLD-CLASS CODE PLAYGROUND WITH SANDPACK No developer blog or technical documentation site is complete without an interactive code playground. The CodeSandbox team recently released a wonderful tool called Sandpack, to help us create these live-updating code editors. In this tutorial, I'll show you how I use it on this blog. Read more UNDERSTANDING USEMEMO AND USECALLBACK A ROADTRIP THROUGH TWO OF REACT'S MOST NOTORIOUS HOOKS What's the deal with these two hooks?! Lots of devs find them confusing, for a whole host of reasons. In this tutorial, we'll dig deep and understand what they do, why they're useful, and how to get the most out of them. Read more WHY REACT RE-RENDERS In React, we don't update the DOM directly, we tell React what we want the DOM to look like, and React tackles the rest. But how exactly does it do this? In this tutorial, we'll unpack exactly when and why React re-renders, and how we can use this information to optimize the performance of our React apps. Read more STATEMENTS VS. EXPRESSIONS One of the most foundational things to understand about JavaScript is that programs are made up of statements, and statements have slots for expressions. In this blog post, we'll dig into how these two structures work, and see how building an intuition about this can help us solve practical problems. Read more MY WONDERFUL HTML EMAIL WORKFLOW A POTENT COMBINATION OF MDX AND MJML If you've ever had the misfortune of being tasked with building a template for HTML emails, you know it's tricky business! In this blog post, I share the approach I took to build responsive, client-friendly emails without a single <table> tag. Read more THE SURPRISING TRUTH ABOUT PIXELS AND ACCESSIBILITY âShould I use pixels or rems?â. In this comprehensive blog post, we'll answer this question once and for all. You'll learn about the accessibility implications, and how to determine the best unit to use in any scenario. Read more YOU DONâT NEED A UI FRAMEWORK As developers, it can be tempting to grab a pre-styled UI framework like Material UI or Bootstrap. Seems like a great way to outsource design and save a bunch of time, right? In my experience, this is an unrealistic expectation, and things donât quite work out that way. Read on Smashing Magazine THE FRONT-END DEVELOPER'S GUIDE TO THE TERMINAL If you want to learn a modern JavaScript framework like React or Angular, you better be familiar with the terminal! So many frameworks and tools assume that you're proficient with it, without ever explaining it. This blog post is your missing manual, covering all of the most important fundamentals. Read more UNDERSTANDING LAYOUT ALGORITHMS THE MENTAL MODEL SHIFT THAT MAKES CSS MORE INTUITIVE As front-end developers, we often learn CSS by focusing on individual properties. Instead, we should focus on how the language uses those properties to calculate layouts. In this blog post, we'll pop the hood on CSS and see how the language is structured, and how to learn it effectively. Read more DELIGHTFUL REACT FILE/DIRECTORY STRUCTURE How should we structure components and other files in our React apps? I've iterated my way to a solution I'm really happy with. In this blog post, I'll share how it works, what the tradeoffs are, and how I mitigate them. Read more TOP CATEGORIES React Animation CSS Career Gatsby Next.js Performance POPULAR CONTENT * An Interactive Guide to CSS Transitions * An Interactive Guide to Flexbox * The End of Front-End Development * My Custom CSS Reset * CSS Variables for React Devs * Designing Beautiful Shadows in CSS * How To Learn Stuff Quickly * Why React Re-Renders * Building a Magical 3D Button * Full-Bleed Layout Using CSS Grid A FRONT-END WEB DEVELOPMENT NEWSLETTER THAT SPARKS JOY My goal with this blog is to create helpful content for front-end web devs, and my newsletter is no different! I'll let you know when I publish new content, and I'll even share exclusive newsletter-only content now and then. No spam, unsubscribe at any time. First Name Email Subscribe Do you agree to the terms? If you're a human, please ignore this field. JoshWComeau Thanks for reading! Š 2020-present Joshua Comeau. All Rights Reserved. Tutorials ReactAnimationCSSCareerGatsbyNext.jsPerformanceJavaScript Links TwitterContactTerms of UsePrivacy Policy Š 2020-present Joshua Comeau. All Rights Reserved.