About a year ago, Vercel released Next 13.4, becoming the first React framework to be built on top of React Server Components (RSC). ✨

This is really exciting, but also, a bit concerning for folks who use CSS-in-JS libraries like styled-components.

Let’s talk about it. 🧵 The core idea behind RSC is that we can split our components into two types: Server Components and Client Components.

Server Components run exclusively on the server. They don't even get downloaded by the browser!

✨ 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!

joshwcomeau.com/css/center-a-d… I think that my best blog posts are accessible to beginners while still having some gold nuggets for more experienced devs, and I think I've nailed that here. Even if you have years of CSS experience, I bet you'll learn something new. 😄

I've been experimenting with the native <dialog> element for modals in React. It's pretty good, but there’s one big problem.

It uses the “top layer”, a native browser feature that guarantees it'll sit above everything else. This *seems* like a great idea… …but sometimes, I need something else to sit above it!

For example, I'm building a “Create coupon” modal. Some of the inputs have little help circles, which can be hovered to show a tooltip.

Those tooltips wind up sitting behind the modal. Totally invisible. 😬

Question for y'all!

For folks living in countries with significantly lower purchasing power, I offer regional licenses for my courses. The deal is that you can get the course for 35-75% off, but then the course can only be accessed in that region. Sometimes, someone will buy the course using the regional license, and then they'll move to a higher-cost-of-living country.

My system provides a bit of a grace period, but ultimately, the person would have to upgrade their license to continue accessing the course.

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. 🧵 The first thing to understand is that variables are *labels*.

I remember learning that a variable was like a box. We create a container called "person" and then drop an object into it. But this isn't the right way to think about it.

I'm on bluesky now! Same handle as here 😄 My initial impressions:
• Seems well-built, everything is snappy and reliable so far.
• I wish it had more personality. Feels *super* generic 😬.
• Mobile-only for now, which is sort of a huge problem for the sorts of things I generally share 😅

Working on a fun lil’ feature for my course platform: Lesson segments are now connected by rings, like a notebook! Some context might help: the main metaphor in my course platform is “pages in space”. The lesson content is on a white page, floating in a dark UI.

(In “light mode”, at least; there's a dark mode as well. The rings will be light-mode-exclusive).

✨ When I taught React at a local bootcamp, I noticed people kept running into the same issues. Cohort after cohort, I was explaining the same footguns and quirks over and over.

I figured it would make a good blog post, and I've just published it! 🔫

joshwcomeau.com/react/common-b… This new blog post contains 9 bite-sized summaries, describing the issue + how to solve it. Things like:

• Words that are stucktogether
• Trying to access state right after setting it
• Dealing with the annoying key warning (without using the index!)
• Writing async effects

🌠 One of the hot new features in Next 13 is the integration of React Server Components (RSC). I've seen a lot of confusion about how this feature interacts with 💅 styled-components, and other CSS-in-JS tools.

I wanna share what I've learned. Let's start with the bad news: because styled-components has a runtime, we can't take advantage of RSC in any components with styled-components.

But! I'm not convinced that it's a *huge* problem.

The fun thing about Blender is that once you have the models, it's relatively easy to tweak the camera/lighting and create *glamor shots*.

🧵 Here are 4 of my favourites!

https://twitter.com/JoshWComeau/status/1607779830031949828

This one is taken at a sharper angle, and has depth of field. The focus point is set on that black knob near the center.

The glowing pink/yellow squares in the top-right aren't normally visible, but they cast light onto the visible modules.

🌠 Over the past few months, I've discovered a couple products that have helped me stay focused during the day, and get good sleep at night.

I wanna tell you about them! 🧵 I should say first: this isn't a sponsored post. I'm not being compensated in any way. The companies don't know I'm posting this. There are no affiliate links.

I just genuinely want to share stuff I've found helpful, in case it helps you too!

Ok, this is *very* cool. “React Wrap Balancer”, a React component for creating balanced text. By @shuding_ at @vercel.

Avoid awkward hanging characters ("widows") by wrapping text in a <Balancer> component.

→ react-wrap-balancer.vercel.app With stuff like this, my first thought is always “But what about SSR?”.

Packages like this typically run on the client, *after* rehydration. This leads to an awkward flicker where the text "rebalances" a second or two after the page loads.

This package works flawlessly 💯

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. Sarah Drasner recently published a book, "Engineering Management for the Rest of Us"! If you're thinking about exploring eng management, there's nobody I'd rather learn from.

Plus, it shows your employer that you're looking to grow your career. 😄

https://twitter.com/sarah_edo/status/1587077351564640256

So ~13 years ago, I was at a department store, and they had a promotion: Sign up for their credit card, get $50 off your first purchase.

I was buying a $70 thing, so I went ahead and got it for $20, put on my new credit card.

This was a mistake.

🧵

https://twitter.com/AOC/status/1601345320872710144

From what I remember, I paid off the $20 within a couple of weeks, destroyed the card, and forgot all about it.

~10 years later (!!), I get a letter from a collections agency. I owe many hundreds of dollars for unpaid credit card bills.

✨ 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:
joshwcomeau.com/css/interactiv… When you get comfortable with Flexbox, you can build some truly remarkable things. Check out this demo, heavily inspired by @argyleink’s “4 layouts for the price of 1”.

It uses *no media queries*! It's all based on fluid principles.

So, I have some news! 😮

My signature CSS course, CSS for JavaScript Developers, just went on sale for Black Friday.🎈

You can now pick up the full course for ✨ 50% off ✨ the standard price!

Check it out: css-for-js.dev
Or, learn more in thread 🧵 I started tinkering with CSS back in 2007. For a decade, I stumbled my way through it. I was able to get stuff done, but I wasn't confident.

I had my go-to snippets, things I could copy/paste to solve specific problems, but sometimes they didn't work and I didn't know why. 😬

Spent some time over the weekend adding ✨custom animated icons✨ to my course platform. 😄

Little details like this are so satisfying to work on. It's my favourite sort of dev work.

Details in-thread 🧵 The icons are:

1) Reset. This restores the original code, removing any changes. You need to hold it for 1 second, to prevent accidental clicks.
2) Format code with Prettier
3) Open code in CodeSandbox (to get a shareable link)
4) Toggle fullscreen code editor.
5) Refresh iframe

After 20 minutes of annoying me subconsciously, I finally notice that the Photoshop dock icon is bouncing, trying to get my attention.

I switch to Photoshop: they've updated their terms. I don't have time for this nonsense right now, so I hit the red circle.

This was a mistake. Closing this popup doesn't snooze this request, it forces Photoshop to close.

Immediately, another dialog pops up: Do I want to save my open file?

I have no idea what this file even is, I haven't used PS in days. I don't want to be making any of these decisions right now!

🔥 One of the most important pieces for dev blogs / technical docs is the code playground. Being able to tinker with code and see the result is where the real learning happens.

I just published a new article, all about the playground I built for my blog!
joshwcomeau.com/react/next-lev… I rebuilt my playground a few months ago, using Sandpack. It's an *incredible* tool.

Sandpack is built and maintained by the CodeSandbox team, and it uses the same battle-tested bundler that they've been iterating on for years!

🔥 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. 🌟

github.com/streamich/reac… They have a Storybook with tons of demos that show how each hook works / what it does: streamich.github.io/react-use/

For example, the `useIntersection` hook that tracks whether an element is in the viewport:

So, there's an idea I wanna share in my React course. It's one of the most useful things I've learned about building React apps that don't explode in complexity as they grow.

And I need your help coming up with examples!

It has to do with the spectrum of abstraction. 🧵 When I build with React, I imagine a spectrum from concrete to abstract. On the concrete side, we have generic, reusable components (eg. <Button>). On the abstract side, we have stuff like <AnalyticsDashboard>.

It's not binary. There's stuff in the middle.