[Robin]: Jamstack Conf 2021 wrapped earlier this week and I’m slowly catching up on the videos from the event. There’s lots of good stuff in there, so make sure to bookmark that for later, but here are some quick notes from what I’ve watched so far.
I enjoyed watching Zach Leatherman’s talk about The State of Eleventy in 2021 and everything that’s new and fancy, particularly the very first Eleventy 1.0 beta release. I also really enjoyed Matthew Phillips walkthrough of Astro, which we’ve written excitedly about over the past few months.
An interesting slide that caught my eye was this one though:
This is taken from a blog post by Jason Miller called “Islands Architecture” where he writes:
The general idea of an “Islands” architecture is deceptively simple: render HTML pages on the server, and inject placeholders or slots around highly dynamic regions. These placeholders/slots contain the server-rendered HTML output from their corresponding widget. They denote regions that can then be “hydrated” on the client into small self-contained widgets, reusing their server-rendered initial HTML.
Thinking about these different sections as apps feels buck wild but also correct to me? I love that with Astro you can create these islands of server-rendered HTML and then other, separate islands in the UI that are partially hydrated with JavaScript.
Perhaps my favorite talk so far is Rich Harris talking about Transitional Apps. First up, he explains how there’s a big argument going on right now between multi-page apps—typically a server-rendered website but one that struggles when it comes to adding stateful or JavaScript-sprinkled interactivity on top of it—and single-page apps—enormous behemoths created all on the front-end where we hurl megabytes of inaccessible JavaScript at our readers and forget about the markup altogether (these are the caricatures that we have of these approaches, at least).
Rich makes a list of the pros and cons…
…and then bemoans the current state of the web:
If the best front-end engineers in the world can’t make text and images work without 5mb of JavaScript, perhaps we should give up on the web platform.
Oof. And as Rich argues in his talk, we can dunk on each other all day long and yet it’s hard to argue that there aren’t benefits and problems with each approach. Instead, we should focus on the middle ground between these approaches rather than create all these caricatures and flame wars.
That’s where this “Transitional App” stuff comes into play. The idea here is that we don’t have to pick sides but instead we should build websites with the advantages of Multi-Page apps and Single-Page apps together. Rich explains how by digging into the tooling that’s coming down the pipeline to make that easier, including his own work on Svelte which incorporates some of these ideas, too.
Anyway, all this is super interesting stuff and Jamstack Conf reminds me that we’re in a real exciting time when it comes to static site generators, sure, but most importantly I think it’s an exciting time because folks are reimagining how they build websites from the ground up. We’re reimagining what websites even are to begin with. And that’s just neat.
😈
Speaking of single-page apps, here’s a great piece by Baldue Bjarnason that goes into even greater detail about the advantages and disadvantages of SPAs as well as all the arguments in between:
Single-Page-Apps can be fantastic. Most teams will mess them up because most teams operate in dysfunctional organisations. Multi-Page-Apps can also be fantastic, both in highly functional organisations that can apply them when and where they are appropriate and in dysfunctional ones, as they enforce a limit to project scope.
After thinking about this stuff all weekend it’s becoming clear to me: we need to stop arguing about winners and losers here and focus instead on making great websites without all the spicy hot drama about which acronym is best.
⭐️⭐️⭐️
I spotted this bonafide CSS trick from Ahmad Shadeed earlier this week where he noticed a curiosity in Facebook’s styles: the border-radius for card components is not set with pixels like this…
.feed-item {
border-radius: 3px;
}…which is how I’ve always thought of them and used the border-radius CSS property in the past. Instead, the Facebook folks have this completely inscrutable bit of code in there:
.feed-item {
border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
}…what the what? Why is this border-radius property trying to hack me and steal my credit card information with CSS?
Joking aside, Ahmad then wrote a great post about what he calls conditional border-radius in CSS and describes what the code above does: it only adds a border-radius when the card is not taking up the full viewport width of the browser.
It’s extremely nifty and a smart solution to the problem—definitely a CSS trick for the ages—but I can’t help but feel that it’s a little too smart? I get what the Facebook team is doing here and I understand why you can’t use media queries to fix this problem AND why you can’t use container queries yet, but dang, this feels like overkill to me.
Here’s why: I think one of the greatest powers of CSS is its readability. You look at a line of code and all but the most extremely complex stuff you can grok without having to learn the fundamentals of CSS. background: red is something that a junior CSS person can look at and understand. But now if every little property becomes as complex as the launch codes for a nuclear arsenal then I can’t help but feel that we’re doing something wrong here, that maybe the language is headed in the wrong direction.
I dunno, perhaps I’m just being cynical jerk here. It’s neat and all, yes, but is code like this sustainable/legible?
📘📘📘
Did you know that Stripe has its own printing press? It’s lovely and weird and extremely neat all at the same time because I wouldn’t expect a financial services startup to publish books about flying cars and community building:
Stripe Press highlights ideas that we think can be broadly useful. Some books contain entirely new material, some are collections of existing work reimagined, and others are republications of previous works that have remained relevant over time or have renewed relevance today.
Weird, huh? Well, I mention all this because the website for Stripe Press is my favorite thing this week: instead of a big introduction with a flashy graphic of a person holding a book and a quip about how “Books are the future” or something, they show which books they’ve published in this fancy <canvas> element that animates each one as you click:
Animations like this often feel pretty overwhelming to me and so I’m not entirely sure why these are pitch perfect. Perhaps it’s because of the subject; seeing a faux book swirl around makes it feel a tiny bit more like a physical book that you can touch and open up. It’s also about setting expectations: because each of these options looks like a book, of course I should click them and flip them over to see the cover.
Either way, I love this website. Also: heck yeah, books rule.
🔠
Speaking of animations, Mary Lou made this buck wild kinetic typography page transition which sure is neat. I like that the loading screen is essentially a bunch of letters flying all over the place and it definitely makes it feel like this is some kind of prestigious magazine that I should lean in and pay more attention to:
Mary was inspired by this example on Dribbble by Hrvoje Grubisic where letters are spinning around and clicking together, animating up and away. It’s very eye catching and I could definitely see this being used for big ol’ advertising campaigns or magazines.
But using that same idea for a navigation loading example? That’s just a flash of genius.
Sponsor
Detect, diagnose, and resolve errors with ease
Stop relying on log files or support tickets with incomplete information. Get deeper insights into the root cause of errors and crashes with diagnostics that take you down to the exact line of code.
Sponsor
Trustpilot Reviews for WooCommerce
Trustpilot’s integration for WooCommerce lets merchants trigger service and product review invitations to customers automatically. Use our TrustBox tool to drag-and-drop reviews and ratings widgets on your site at key conversion points.
[Chris]: Squarely within the “things Chris will definitely like” bucket is “art made out of HTML elements.” Bryan Braun played with this the other day making webcam output with <input type="checkbox"> which is 🧡🧡🧡:
Reminds me a little of this beauty from Henry Desroches not long ago, playing with CSS’ newish accent-color:
And I can never see anything like this without thinking of Hakim El Hattab’s DOM tree:
