React Miami 2024: Recap

I love attending developer conferences. They're an amazing opportunity to network, learn from others, get re-energized about our industry, be insipired by what people are working on, and discover what cool new things are possible.

I just got back a few days ago from React Miami and I'm still processing all of the great conversations I had and people I met. The conference was amazing, and I'll absolutely be adding it to my schedule for future years. A huge thanks to the sponsors, volunteers, and the organizers Michelle Bakels, Gabe Greenberg, and Jos Gerards. Conferences like this are not easy to put on by any means, and I appreciate all the work that goes into them every year.

First: The Talks

The conference talks at events like this are usually one of the prime attractions. Between CSS tips from Una, advice from Kent C. Dodds about how to stop lying to your users, or Christopher "Vjeux" Chedeau's dive into how to succeed at open source, there was a lot to take in! I can't easily pick favorites, but here's a sampling of some of what was presented during the weekend:

What's New in CSS?

Or, how can we replace JavaScript with CSS?

Are you familiar with the popover API? Think about the last time you had to build a modal UI. Probably lots of Javascript, right? Una's talk focused on what's coming to the browser (or in this case, already supported!) to help us write less Javascript. One of these powerful tools is the popover API. Instead of needing a bunch of Javascript to handle modals, why not just do it with HTML?

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>
html

Popovers handle many of the concerns of a modal for us, without having to code all the behaviors and interactions by hand!

• Provides promotion to the top layer (no more z-index fighting)
• Light-dismiss functionality built in (i.e. click outside/escape to close)
• Focus management
• Keyboard accessibility built in
• Semantically connected to its trigger
• Can be animated in Chromium (more browsers coming soon 🤞)

Don't Lie to Users, and Use The Web!

Kent C. Dodds talked about lying to users - and not in the way you might think!

The "lie" we often tell our users is that our site is ready for them to start interacting, even if maybe that's not quite the case. For example, images that "pop in" causing layout shift after the rest of the page has loaded, or a form that looks ready, but can't be submitted because javascript hasn't been loaded yet.

Many forms rely on client-side Javascript when it's not really necessary at all! Kent recommends (and I strongly agree!) to "use the web" the way it was designed, and stop relying on so much Javascript to run a simple search form.

<form action="/search" method="get">
  <label for="search">Search:</label>
  <input type="text" id="search" name="query" />
  <button type="submit">Search</button>
</form>
html

No Javascript here, and it's interactive and functional as soon as the UI is rendered!

Images popping in and causing layout shift is a lie too! Your blog post was not ready for the user, and they may have started reading and scrolling, only to have the page move around and lose their place. This is a problem I had to solve here on my blog! Take a look at these inline images:

Notice how they first load with a placeholder that matches the exact size, then become the real image when it's ready? Even though they aren't the same dimensions, each one still fits perfectly in its place. This is thanks to some pre-processing to calculate the image's dimensions, and then a handy CSS property: aspect-ratio.

.imageParent {
  --aspect-ratio: 2.5835;

  display: block;
  position: relative;
  width: 100%;
  z-index: 0;
  margin: 1rem 0;
  aspect-ratio: var(--aspect-ratio);
}
css

Using aspect-ratio ensures that the placeholder takes up the exact amount of space as the final image, and no shifting happens after it's loaded! Check out this playground I built for a live demo of how it works!

On Over-Engineering

Tony Casparro gave some insight into over-engineering: why we do it, and how we can avoid it. In his talk, he posited that we tend to over-engineer for a few reasons:

• We're anticipating future needs (that may never arise)
• We're generalizing prematurely (a generalization that may never be used)
• We're trying to avoid future costs (that may never come)

We have to weigh the probability of these situations arising, and inform decision making based on that analysis.

What's the better path? Build small, avoid pre-optimization, and deliver then iterate. Focusing on what's valuable (like tests) and favoring shipping over perfection allows you to avoid the trap of overcompensating for future needs.

More Than Talks

The talks at these conferences are great, and I always learn something new. However, I also put a huge emphasis on networking and talking to other engineers, and sometimes that can be even more valuable than attending another talk! I've never regretted missing a talk or workshop because I was engaged in an interesting conversation. I've written about this approach before, and it still held true at React Miami.

The second day of the conference was centered around workshops, and a floor of sponsor booths with spaces to sit and work, chat, and have a cup of coffee or a beer together.

I got interesting demos from companies like Codeium and Beeps, and got to participate in a live episode of Syntax.fm, one of the premier web development podcasts.

For every conference I go to, I build a small landing page that I can generate a QR code to link to. This was my landing page for React Miami:

Being able to easily share my socials as well as the content I write here on my blog was convenient, and I made some great new connections this way. I always try to match the conference's branding too, so it ties nicely with the theme.

Looking Forward

I'll certainly be attending React Miami in the coming years if I have the opportunity to. These kind of events always refresh my excitement for our industry, and reset my focus on building cool things. I got to share a lot about how I built my Thirsty Bot app with other developers, and came away excited with ways I can improve it, especially on the AI front.

If you missed the conference, make sure to check out the React Miami Replay on May 3rd!

The next conference I'll be at is Render Atlanta in June. You won't want to miss this one, and hopefully I'll see you there!