[Robin]: Here are some interesting things I’ve been reading about the web over the last couple of months and I reckon they’re worth adding to your read-later service of choice:
- The Rise and Demise of RSS
- Andy Bell wrote about why you should keep things simple when it comes to writing markup
- Ire Aderinokun described how to set up our first performance budget with Lighthouse (this one is particularly neat because I didn’t realize how much you can automate the budget-setting stuff with Lighthouse.)
- Accessible Icon Buttons is a great post from Sara Soueidan where she explains how to use the correct
aria-attributes so that everyone can access every button in your app. - Video of Ethan Marcotte’s talk called The World-Wide Work is wonderful. In it, Ethan describes how accessibility is much more than just HTML and code — it’s about making a web and a world for all of us.
? From the Blog
JAMstack? More like SHAMstack
(Spoiler alert: JAMstack has got momentum, so far be it from us to stand in the way of that acronym, but if we were gonna change it, perhaps Static Hosting, APIs, and Markup is the crux of it.)
Chris takes a look at what goes into a JAMstack website and what makes it valuable, despite the odd name. I feel like I’ve kinda been sold on the whole idea over the last couple of weeks . I switched my own blog to a JAMstack setup and, although not particularly complex, I suddenly got why cloud functions and static assets kinda change the whole web dev game.
We get all the power of a back-end without having to deal with any of the complexity of building a back-end and incorporating it into our codebase. And there’s something very liberating about that as front-end developers and it’s something that gives us a ton of power, too.
Chris described why this trend is so much more than a trend in his talk about the All Powerful Front End Developer not so long ago, which is certainly well worth watching.
Using DevTools to Improve the UX Design to Development Process
Here’s a love letter to Inspect Element by Lisa Tweedie where she describes all the benefits of learning how to improve the design of a project by learning about DevTools. Lisa writes:
I’d call it “playing with code.” I am definitely not suggesting that UX designers become developers, but at the very least, I think designers would benefit by becoming comfortable with a basic understanding of what is currently possible with CSS and best practices in HTML.
What if we got aspect-ratio sized images by doing almost nothing?
There’s a lot to discuss when it comes to adding the ability for us devs to set an aspect ratio on an image or a video on the web and in this post Chris does just that. And I think this is probably the best description of the problem that I’ve heard to date:
Say you have an image that is 800×600 pixels. Will it actually display as 800px wide on your site? It’s very likely that it will not. We tend to put images into flexible container elements, and the image inside is set to width: 100%;. So perhaps that image ends up as 721px wide, or 381px wide, or whatever. What doesn’t change is that image’s aspect ratio, lest you squish it awkwardly…
The main point is that we don’t know how much vertical space an image is going to occupy until that image loads. This is the cause of jank! Terrible jank! It’s everywhere and it’s awful.
How to Use the Web Share API
I love this post from Ayooluwa Isaiah because it shows what the standards process is really capable of and removes the need for the painfully large third-party social media scripts that are dunked into almost every page on the Internet.
Ayooluwa explains what this API is though first:
In essence, it provides a way to trigger the native share dialog of a device (or desktop, if using Safari) when sharing content — say a link or a contact card — directly from a website or web application.
While it’s already possible for a user to share content from a webpage via native means, they have to locate the option in the browser menu, and even then, there’s no control over what gets shared. The introduction of this API allows developers to add sharing functionality into apps or websites by taking advantage of the native content sharing capabilities on a user’s device.
I’ll be so happy when this API starts to roll out for more browsers.
Prioritizing
Sarah wrote about how she prioritizes her days and her work, what tools she uses to make lists and some tips that she’s learnt along the way. I particularly like Sarah’s idea for making a Notion doc with a schedule of everything that needs to get done on that particular day. And if something doesn’t get done that’s okay, it gets pushed into the next:
Sarah writes:
Most of these systems work for me because I know my strengths and weaknesses and I play to them: I work more efficiently when things are broken down into steps. I work best when my work has the most meaning, and I remove the cruft. I work best when I work along with, not against, my energy levels, where possible.
There’s one more thing I haven’t addressed yet: forgiveness. You’ll be more productive on some days (or hell, even years!) than you will be on others, and that’s OK. Life is full of ebbs and flows.
Netlify
A big shout-out to Netlify for sponsoring this week’s newsletter! We’re big fans of Netlify here at CSS-Tricks. In fact, we’ve launched two sites this year alone that leverages Netlify’s blazingly fast static hosting: one featuring a directory of front-end conferences and another all about the power of serverless sites. Netlify makes it all possible, from managing the content via NetlifyCMS to submitting content via email using Netlify functions.
Can Netlify work for you? Of course! Try it now and have a site deployed in seconds. 🚀
Check out our new Weekly Platform News section on CSS-Tricks, published each Friday courtesy of Šime Vidas at Web Platform News.
