This is a great step-by-step guide to HTML by Estelle.
This is a great step-by-step guide to HTML by Estelle.
All twelve are out, and all twelve are excellent deep dives into exciting web technologies landing in browsers now.
At the end of next week, I will sally forth to California. I’m going to wend my way to San Francisco where I will be speaking at An Event Apart.
I am very much looking forward to speaking at my first in-person AEAs in exactly three years. That was also in San Francisco, right before The Situation.
I hope to see you there. There are still tickets available.
I’ve put together a brand new talk that I’m very excited about. I’ve already written about the prep for this talk:
So while I’ve been feeling somewhat under the gun as I’ve been preparing this new talk for An Event Apart, I’ve also been feeling that the talk is just the culmination; a way of tying together some stuff I’ve been writing about it here for the past year or two.
The talk is called Declarative Design. Here’s the blurb:
Different browsers, different devices, different network speeds…designing for the web can feel like a never-ending battle for control. But what if the solution is to relinquish control? Instead of battling the unknowns, we can lean into them. In the world of programming, there’s the idea of declarative languages: describing what you want to achieve without specifying the exact steps to get there. In this talk, we’ll take this concept of declarative programming and apply it to designing for the web. Instead of focusing on controlling the outputs of the design process, we’ll look at creating the right inputs instead. Leave the final calculations for the outputs to the browser—that’s what computers are good at. We’ll look at CSS features, design systems, design principles, and more. Then you’ll be ready to embrace the fluid, ever-changing, glorious messiness of the World Wide Web!
If you’d a glimpse into the inside of my head while I’ve been preparing this talk, here’s a linkdump of various resources that are either mentioned in the talk or influenced it…
New from Mr. Vanilla JS himself, Chris Ferdinandi:
A learning space for people who hate the complexity of modern web development.
It’ll be $29 a month or $299 a year (giving you two months worth for free).
I’d recommend going in the order HTML, CSS, JS. That way, you can build something in HTML, add CSS to it as you learn it, and finally soup it up with your new-found JS knowledge.
Excellent advice for anyone new to web develoment.
A very comprehensive collection of standalone little tools for web design and development—tools that do one thing.
This is a great (free!) course on learning CSS from the basics up. Nicely-pitched explanations with plenty of examples.
A very comprehensive directory of accessibility resources.
Vitaly has rounded up a whole load of accessibility posts. I think I’ve linked to most of them at some point, but it’s great to have them all gathered together in one place.
Scott is brilliant, therefore by the transitive property, his course on web performance must also be brilliant.
…for old CSS problems.
A collection of articles and talks about HTML, CSS, and JS, grouped by elements, attributes, properties, selectors, methods, and expressions.
Everything you ever wanted to know about variable fonts, gathered together into one excellent website.
This site is not meant to be exhaustive, but rather a useful guide—our FAQ for design understanding. We hope it will inspire discussion, some questioning, a little soul searching, and ideally, a bit of intellectual support for your everyday endeavors.
The Design Questions Library goes nicely with the Library of Ambiguity.
I got an email recently from a young person looking to get into web development. They wanted to know what languages they should start with, whether they should a Mac or a Windows PC, and what some places to learn from.
I wrote back, saying this about languages:
And this is what I said about hardware and software:
It doesn’t matter whether you use a Mac or a Windows PC, as long as you’ve got an internet connection, some web browsers (Chrome, Firefox, for example) and a text editor. There are some very good free text editors available for Mac and PC:
For resources, I had a trawl through links I’ve tagged with “learning” and “html” and sent along some links to free online tutorials:
After sending that email, I figured that this list might be useful to anyone else looking to start out in web development. If you know of anyone in that situation, I hope this list might help.
The 2019 edition of Cody Lindley’s book is a good jumping-off point with lots of links to handy resources.
I gave a new talk at An Event Apart in Seattle yesterday morning. The talk was called Going Offline, which the eagle-eyed amongst you will recognise as the title of my most recent book, all about service workers.
I was quite nervous about this talk. It’s very different from my usual fare. Usually I have some big sweeping arc of history, and lots of pretentious ideas joined together into some kind of narrative arc. But this talk needed to be more straightforward and practical. I wasn’t sure how well I would manage that brief.
I knew from pretty early on that I was going to show—and explain—some code examples. Those were the parts I sweated over the most. I knew I’d be presenting to a mixed audience of designers, developers, and other web professionals. I couldn’t assume too much existing knowledge. At the same time, I didn’t want to teach anyone to such eggs.
In the end, there was an overarching meta-theme to talk, which was this: logic is more important than code. In other words, figuring out what you’re trying to accomplish (and describing it clearly) is more important than typing curly braces and semi-colons. Programming is an act of translation. Before you can translate something, you need to be able to articulate it clearly in your own language first. By emphasising that point, I hoped to make the code less overwhelming to people unfamilar with it.
I had tested the talk with some of my Clearleft colleagues, and they gave me great feedback. But I never know until I’ve actually given a talk in front of a real conference audience whether the talk is any good or not. Now that I’ve given the talk, and received more feedback, I think I can confidentally say that it’s pretty damn good.
My goal was to explain some fairly gnarly concepts—let’s face it: service workers are downright weird, and not the easiest thing to get your head around—and to leave the audience with two feelings:
I deliberately left time for questions, bribing people with free copies of my book. I got some great questions, and I may incorporate some of them into future versions of this talk (conference organisers, if this sounds like the kind of talk you’d like at your event, please get in touch). Some of the points brought up in the questions were:
If you attended the talk and want to learn more about about service workers, there’s my book (obvs), but I’ve also written lots of blog posts about service workers and I’ve linked to lots of resources too.
Finally, here’s a list of links to all the books, sites, and articles I referenced in my talk…
Following on from that proposal for a browser feature that I linked to yesterday, Tim thinks through all the permutations and possibilities of user agents allowing users to throttle resources:
If a limit does get enforced (it’s important to remember this is still a big if right now), as long as it’s handled with care I can see it being an excellent thing for the web that prioritizes users, while still giving developers the ability to take control of the situation themselves.
Chris Ferdinandi is a machine!
A vanilla JS roadmap, along with learning resources and project ideas to help you get started.