I frequently use CSS multi-column layout (i.e. column-count: 3) for basic list items limited to words or phrases (like my search page tags list), but I’ve always struggled to make the property work with more complex content. And after all, complex pages are where CSS columns would come in most handy—reflowing content in and out of columns across viewport widths to suit:
The first hurdle has always been avoiding module content breaking across columns awkwardly:
In the Codepen below, I added break-inside: avoid; to remedy this, but support is partial. In some browsers, additional whitespace may appear at the top of columns, and in others, content is dispersed unevenly across columns.
As a next step, I added display: inline-block and removed all the break-inside: avoid; funny business. This switch was way desirable, but days later I noticed loads of extra whitespace below the columns (in Chrome at least). The amount depended on the arrangement of the modules and size of the content within, but it was a significant problem.
To remedy the whitespace problem, I came up with my current-final-answer (below). I added a <div> to each module, setting the outer one to display: block and leaving the inner one display: inline-block. The extra whitespace is gone, and the technique seems to be resilient to various types & sizes of content.
I recently discovered a new action game called Glitchskier by Shelly Alon. In case you aren’t aware, flying a triforce(ish) starship through what reminds me of the Stranger Things intro (music and all) blowing up Tron-like villains is right up my alley. I love every detail.
I was inspecting Ethan’s site the other day (as totally normal and well-adjusted people do) and realized he was using one of my favorite tricks where viewport units were combined with em units via calc() for vertical spacing.
Viewport units can help you scale margin and padding across viewport sizes, but they can also grow or shrink beyond what’s intended. To compensate for potential awkwardness, Ethan combined vh with em via calc().
I created a Codepen to show a similar case with vw units.
Note that .viewport-only has 8vw for padding, and tends to grow and shrink too much. .viewport-calc has calc(4vw + 2em) for padding, which scales without overdoing it at extreme widths.
I love Alamo Drafthouse—It’s a big part of what makes Austin home for me, and part of my monthly (sometimes weekly) routine. The recently-updated announcement videos they run during pre-roll are fantastic. They’re extremely well done without coming across as too slick or corporate-y. I could be wrong, but I think I spy some Archive Type in there.
Over the weekend I rediscovered Day of the Tentacle, triggering the biggest nostalgia jolt I’ve experienced in quite some time. I vividly remember playing the game on one of my first PCs in 1993. The illustration style, no-lose style of gameplay, and voice acting is all spectacular. The newly remastered edition is a worthy update.
I’ve logged quite a lot of hours battling databases, plugins, and a GUI editor to write (and occasionally design) blog posts. Wordpress has served me well, but to simplify the process I’ve ported my blog to Jekyll. It’s great to be static! Writing already feels more casual and enjoyable.
Fixed broken paths thanks to find & replace in project
At this point, I decided to leave off comments for now. I’m still on the fence, but am going to experiment with correspondence via social channels and (hopefully) other people’s blogs :)
There are heaps more to optimize and improve, but it’s been an enjoyable experience thus far. The writing process feels great again, and I have a new place to play (even though it’s the same old blog)!
Let me know if you spot any glaring errors or omissions. In the meantime, I’ll just leave this list of ideas for future improvements here for reference:
Clean up (reduce) tags
Research CDNs & caching
Think about sans body type
Experiment with CSS Grid on my homepage
Tie in other articles with more TLC than tags
Build a new layout for non-legacy articles so I can create unique article designs easier
The thing is to be true to the idea. A lot of artists think that suffering is necessary, but in reality, any kind of suffering cramps the flow of creativity. […] Happiness in the doing is so important. And I always say it’s our life going by.
First off, every Every Frame a Painting video is worth your time, but the latest one about the state of cinematic music composition is extra fascinating. I found lots of parallels for any industry that can be tempted to (over)imitate itself—especially when the process includes lots of people and phases.
I love burgers, but wasn’t fully-aware of beef’s tax on our climate/environment. As Pat O. Brown, CEO and founder of Impossible Foods, states:
If you eat a quarter-pound impossible burger instead of a quarter-pound burger made from a cow, you save greenhouse gas emissions that are equivalent to driving 18 miles my yourself in a typical American car, you save water thats equivalent to taking a 10 minute shower, and free up a land area of 75 sqft.
I’ve been thoroughly enjoying Jeff Veen’s new podcast, Presentable. In the latest episode (#7) with Stanley Wood the two discuss how style guides, process, and org structure fit together. One bit in particular that stood out to me was where (at the 32 minute mark) Jeff asked about the Spotify team structure and how Guilds come into play. It seems to break down like this:
Squads are small interdisciplinary teams working on a specific feature
Tribes are organized around a subject like performance or perhaps a business goal
Chapters & Guilds cut across the preceding two groups to enhance communication and standardization around things like design, front-end, or even a platform like iOS
While this may not be totally unique to Spotify, hearing phrases like “cut across” paint a clear picture in my mind of how groups like these need to be able to move laterally across the entire organization as well as how these groups can coexist within the context of business goals and road maps. Great stuff—the entire episode is worth a listen.
Sharp Sans injects some much needed humanism into the Futura model. With its sheered terminals and true italics, Sharp Sans combines the appealing typographic compensation of the grotesque, with the plump circular bowls of the geometric. The result is a typeface suited for both text and display use that breaths life into the genre of the geometric sans.