🌠 Keep navigation centered in a lopsided container (logo on one side, nothing on the other) with Flexbox!

“Asymmetrical centering” like this has befuddled me for a long time, but I've cracked the code: `flex-basis` is key 🔓🗝

Demo + Code: codepen.io/joshwcomeau/pe…
When `flex-basis` is set to `0`, it distributes ALL space, not just empty space.

So: we put columns on either side of the nav, make them greedy with `flex-grow`, and distribute the space with `flex-basis`:

.column {
flex-grow: 1;
flex-basis: 0;

(Image credit: w3 dot org) A diagram showing how flex-basis: 0 distributes all space re
(You can also use `flex: 1` instead, but that shorthand obfuscates what's really going on here!)

Another nifty trick: The nav items "fan out" as the window gets larger, thanks to viewport-based gap sizes:

nav {
display: flex;
gap: max(calc(10vw - 60px), 16px);
} Two side-by-side screenshots of a large window and a small o
How it works:

→ `gap` adds space between flex siblings
→ The `vw` unit scales with viewport
→ We crank up the scaling impact by picking a big number (10vw) and subtracting a fixed value (60px) using `calc`
→ To avoid having negative gap on small screens, we clamp it to 16px
I'm currently building a CSS course, “CSS for JavaScript Developers”!

The course features a number of in-depth workshops, and for the Flexbox module, we build an e-commerce webapp! It uses these tricks (among others) for its primary nav 🔥

→ Learn more: css-for-js.dev
Final little note: `gap` isn't supported in Safari, though they just added it to their Technology Preview, so it's on the way! In the meantime, you can use margin:

.nav-item:not(:last-of-type) {
margin-right: max(calc(10vw - 60px), 16px);

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Josh W. Comeau

Josh W. Comeau Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @JoshWComeau

6 Jan
Woaaah — An AI that can generate delightful illustrations from text captions.

This will be GOLD for folks who want custom illustrations to visually explain a concept. The content creator in me is *pumped*.

Heard from some folks that are concerned about the effect it'll have on artists. Wrestling with this a bit.

In my view, it's similar to the effect that Squarespace had on web developers. There's still plenty of demand for us, but it changed a bit.
Essentially things shift upwards a bit. It's less common to get paid $500 to build a website for your local bakery, but still plenty of opportunities building dynamic products for businesses with big budgets.
Read 10 tweets
9 Dec 20
✨ This year I decided to take blogging more seriously. In 2020, I published 30 articles on my blog, joshwcomeau.com.

We're nearing the end of the year, so I thought it'd be fun to do a "Top 10" countdown, sorted by # of views 😄 I'll share some context about each one!
#10 — Boop! joshwcomeau.com/react/boop/

This animation tutorial details how I created a wobbly temporary hover state using React Spring.

I was unhappy with the hover animations on my course platform, and decided to experiment. I was so happy with the results, it became a blog post!
#9 — Embracing Modern Image Formats. joshwcomeau.com/performance/em…

A look at how to use the modern “.webp” image format to shave some KBs off your page, in a backwards-compatible way 😄

Tools like `gatsby-image` and `next/image` are making it redundant, and I'm thrilled ✨
Read 13 tweets
23 Nov 20
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 🧵
First, some quick options:

• Leave them as-is! Outlines aren't so bad.
• Provide an alternative focus style, like changing the background color, or adding a border.

There's a nifty new pseudo-class you may not be aware of, though…
🌠 The `:focus-visible` pseudo-class is just like the `:focus` one, but it only matches when the browser determines that a visible focus state is necessary (eg. not a mouse user).

Keyboard users will see the focus rings, but mouse users won't.
Read 6 tweets
31 Oct 20
For the past week I’ve been using the Xiaomi Redmi 8 as my main phone. It’s the most common “budget” smartphone in India.

In some ways, this thing is shockingly good. In others, downright surprising. But there were some disappointments.

🧵 My experience in-thread: ImageImageImage
For context, I ordered this phone from AliExpress. Cost me $90 USD.

It costs ₹8,000, well below the average Indian smartphone price of ₹12,000 / $160.

Source: statista.com/statistics/809…
Quick caveat: I’m not pretending that my internet experience has been identical to that of an average Indian smartphone-user

The average mobile internet speed in India is 12Mbps, roughly 1/3rd global average. But unless you’re video-streaming, 12Mbps seems OK to me?
Read 16 tweets
6 Jul 20
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 🧵 👇
All cover letters can be read in text here: docs.google.com/document/d/1a6…

Letter 1: Khan Academy.

This letter isn't my best work, but it tells a compelling story about why I'm passionate about the space + the organization. Could be improved by sharing more about my skills/background Screenshot of doc linked in tweet
Letter 2: Glitch

I'm proud of this letter. I cover why I care about their mission (online code education), their product (mentioning specific features), and why my skills/background are valuable to them in their mission / for their product. Screenshot of doc linked in earlier tweet
Read 12 tweets
6 Apr 20
So many folks have lost their job in the last 2 weeks :(

I've been writing a short book on software dev portfolios. It isn't ready yet, but I wanted to share some of the highlights, to hopefully help folks who are job-hunting again!

The most important stuff I know, in-thread 👇
Your developer portfolio is a showcase of your most important projects. I'm using the term "project" loosely, to include:

• Stuff you shipped on-the-job (if not restricted by NDA)
• Side-projects
• OSS contributions
• Volunteer work
Your homepage should list your 2-5 most impressive projects. You should have an image, a brief summary, and a link to a dedicated page to learn much more about this project.

(GIF credit: juliacodes.com)
Read 18 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!