Exo Ape’s website design is a class of its own: a super smooth scroll experience with lots of meaningful details and impeccable visuals. Our pick this week.
Also prefer fundamental CSS knowledge over hypes? Then join CSS Day, a deep-diving CSS conference in Amsterdam, NL. Our speakers treat CSS topics that the attendees can geek out on. On 9th & 10th of June, after a two-year silence, we’ll host our 8th edition.
CSS magician Ben Evans pulled off an incredible demo: an interactive 3D Mario with only CSS! Note that Safari can’t handle this coolness. Don’t miss the making-of video.
Still in the early stage of development: Metarank is a low-code Machine Learning tool that personalizes product listings, articles, recommendations, and search results.
DiskerNet (codename PROJECT 22120) is an archivist browser controller that caches everything you browse, a library server with full text search to serve your archive.
Cassidy Williams writes about Incremental Static Regeneration or “hybrid web development” and how it can improve and scale sites “beyond the Jamstack”.
Handy makes defining and recognizing custom hand poses in WebXR a snap. It recognizes 100+ hand poses, including ASL finger spelling. Built on Three.js.
Read how from the release of the page experience algorithm, there is no longer any preferential treatment for AMP in Google’s search results, Top Stories carousel and the Google News.
This seems like a good time to plug our very own little :nth Tester tool. It definitely helps me understand what something like (2n+1) means in English. You can type in any string you like and see what effect that has on your site:
Anyway, back to Eric’s post. As he mentions, his technique is pseudo-random in that it looks like a random image on the page but it technically isn’t. Either way, I think it’s a really lovely technique! And it certainly breaks up the visual monotony that happens when you’re looking at a website for too long.
Here’s what it looks like in practice:
Lovely stuff!
Another way to do this is to use random numbers in CSS. For example, we could set a variable in JavaScript and then apply it with CSS custom properties. Or we could put all the images in a single sprite file and change the background-position based on a random number.
This is definitely one of those things in CSS where there are no wrong answers; just different ways to do the same awesome thing!
The end result of Eric Meyer's tutorial on creating this row of slanted images is pretty classy. But it's more about the journey than the destination (there isn't even really an isolated demo for it). Eric does an amazing job at talking it through like a thought process.
We did that recently, only ours was sort of fake/generic which Eric's was for a real-world design.
This is a row of boxes, so flexbox. Eric pondered if grid would have been as good or better of a choice since the widths are known and either can be made to accept more/less boxes without adjustment. I agree it's a tough call here.
Since the image dimensions being manipulated, object-fit is a must, and the less-used object-position is used here to help with a focal point.
The captions are just pushed to the bottom of the boxes naturally by the images.
The slanting is done with clip-path, but it involves some trickery. The boxes need to be enlarged to clip without leaving blank space, then pulled together with negative margin. Percentages are used all around to keep things flexy.
Still more tweaks are needed to keep from clipping the captions, and then there is still opportunity for more clever design bits.
Sad that this is probably the last time I'll link to 24 ways.
I had so much fun at An Event Apart Seattle! There is something nice about sitting back and basking in the messages from a variety of such super smart people.
I didn't take comprehensive notes of each talk, but I did jot down little moments that flickered my brain. I'll post them here! Blogging is fun! Again, note that these moments weren't necessarily the main point of the speaker's presentation or reflective of the whole journey of the topic — they are little micro-memorable moments that stuck out to me.
Jeffrey Zeldman brought up the reading apps Instapaper (still around!) and Readability (not around... but the technology is what seeped into native browser tech). He called them a vanguard (cool word!) meaning they were warning us that our practices were pushing users away. This turned out to be rather true, as they still exist and are now joined by new technologies, like AMP and native reader mode, which are fighting the same problems.
Margot Bloomstein made a point about inconsistency eroding our ability to evaluate and build trust. Certainly applicable to websites, but also to a certain President of the United States.
Sarah Parmenter shared a powerful moment where she, through the power of email, reached out to Bloom and Wild, a flower mail delivery service, to tell them a certain type of email they were sending she found to be, however unintentionally, very insensitive. Sarah was going to use this as an example anyway, but the day before, Bloom and Wild actually took her advice and implemented a specialized opt-out system.
This not only made Sarah happy that a company could actually change their systems to be more sensitive to their customers, but it made a whole ton of people happy, as evidenced by an outpouring of positive tweets after it happened. Turns out your customers like it when you, ya know, think of them.
Eric Meyer covered one of the more inexplicable things about pseudo-elements: if you content: url(/icons/icon.png); you literally can't control the width/height. There are ways around it, notably by using a background image instead, but it is a bit baffling that there is a way to add an image to a page with no possible way to resize it.
Literally, the entire talk was about pseudo-elements, which I found kinda awesome as I did that same thing eight years ago. If you're looking for some nostalgia (and are OK with some cringe-y moments), here's the PDF.
Eric also showed a demo that included a really neat effect that looks like a border going from thick to thin to thick again, which isn't really something easily done on the web. He used a pseudo, but here it is as an <hr> element:
Rachel Andrew had an interesting way of talking about flexbox. To paraphrase:
Flexbox isn't the layout method you think it is. Flexbox looks at some disparate things and returns some kind of reasonable layout. Now that grid is here it's a lot more common to use that to be more much explict about what we are doing with layout. Not that flexbox isn't extremely useful.
Rachel regularly pointed out that we don't know how tall things are in web design, which is just so, so true. It's always been true. The earlier we embrace that, the better off we'll be. So much of our job is dealing with overflow.
Rachel brought up a concept that was new to me, in the sense that it has an official name. The concept is "data loss" through CSS. For example, aligning something a certain way might cause some content to become visually hidden and totally unreachable. Imagine some boxes like this, set in flexbox, with center alignment:
No "data loss" there because we can read everything. But let's say we have more content in some of them. We can never know heights!
If that element was along the top of a page, for example, no scrollbar will be triggered because it's opposite the scroll direction. We'd have "data loss" of that text:
We now alignment keywords that help with this. Like, we can still attempt to center, but we can save ourselves by using safe center (unsafe center being the default):
Rachel also mentioned overlapping as a thing that grid does better. Here's a kinda bad recreation of what she showed:
I was kinda hoping to be able to do that without being as explicit as I am being there, but that's as close as I came.
Jen Simmons showed us a ton of different scenarios involving both grid and flexbox. She made a very clear point that a grid item can be a flexbox container (and vice versa).
Perhaps the most memorable part is how honest Jen was about how we arrive at the layouts were shooting for. It's a ton of playing with the possible values and employing a little trial and error. Happy accidents abound! But there is a lot to know about the different sizing values and placement possibilties of grid, so the more you know the more you can play. While playing, the layout stuff in Firefox DevTools is your best bet.
The idea is that even though brainstorm sessions are supposed to be judgment-free, they never are. Bad ideas are meant to be bad, so the worst you can do is have a good idea. Even better, starting with good ideas is problematic in that it's easy to get attached to an idea too early, whereas bad ideas allow more freedom to jump through ideation space and land on better ideas.
Scott Jehl mentioned a fascinating idea where you can get the benefits of inlining code and caching files at the same time. That's useful for stuff we've gotten used to seeing inlined, like critical CSS. But you know what else is awesome to inline? SVG icon systems. Scott covered the idea in his talk, but I wanted to see if it I could give it a crack myself.
The idea is that a fresh page visit inlines the icons, but also tosses them in cache. Then other pages can <svg><use> them out of the cache.
Here's my demo page. It's not really production-ready. For example, you'd probably want to do another pass where you Ajax for the icons and inject them by replacing the <use> so that everywhere is actually using inline <svg> the same way. Plus, a server-side system would be ideal to display them either way depending on whether the cache is present or not.
Jeremy Keith mentioned the incredible prime number shitting bear, which is, as you might suspect, computationally expensive. He mentioned it in the context of web workers, which is essentially JavaScript that runs in a separate thread, so it won't/can't slow down the operation of the current page. I see that same idea has crossed other people's minds.
I'm sad that I didn't get to see every single talk because I know they were all amazing. There are plenty of upcoming shows with some of the same folks!
I'll be there in Seattle for the kickoff, giving a talk about how to think like a front-end developer. I've been working on it for ages, and I think I have a talk ready that helps set the stage for where we are at in the world of front-end development, through the lens of tons of other front-end developers I admire in this industry. I hope it'll be an entertaining romp through all their minds and how they think.
Just check out this Seattle lineup!
This is like my dream lineup. Except that jerk who kicks off Day 2.
Jeffrey Zeldman The Zen of Whitespace: Slow Design for an Anxious World
Margot Bloomstein Designing for Slow Experiences
Sarah Parmenter Designing for Personalities
Eric Meyer Generation Style
Rachel Andrew Making Things Better: Redefining the Technical Possibilities of CSS
Jen Simmons Designing Intrinsic Layouts
Chris Coyier (me!!!) How to Think Like a Front-End Developer
Una Kravets From Ideation to Iteration: Design Thinking for Work and for Life
Scott Jehl Move Fast and Don’t Break Things
Luke Wroblewski Mobile Planet
Beth Dean Unsolved Problems
Dan Mall Putting the ‘Design’ in Design Systems
Jeremy Keith Going Offline
Sarah Drasner Animation on the Bleeding Edge
Val Head Making Motion Inclusive
Derek Featherstone Inclusive, by Design
Gerry McGovern The Customer-Obsessed Professional
Another neat little feature of the 2019 lineup is a screening of the documentary Rams that after lunch on Day 2. Like movie night. For us designer types. During the day. It's gonna be awesome.