#237: The Dreaded Homepage Redesign

[Robin]: Designing the homepage of a website is harder than learning a new framework, more difficult than building an enormous website, and more challenging than memorizing all the values and properties of CSS. In short, the absolute worst thing about the entire field of web development is designing the homepage. It’s just the worst.

Why? Well, introductions are hard. If you’re a front-end engineer then you probably want to lead with that and maybe where you’re from. But everyone’s website has that stuff! And they all sound relatively the same:

My name’s X and I’m from Y. I like front-end development, interesting activity Z, and coffee.

I’m not trying to make fun of anyone here—my own website is like this, too. I’m simply underlining how difficult this process is. How do we introduce ourselves? How do explain who we are and what we do without sounding like an absolutely unbearable jerk? How do we make our websites unlike anyone else’s and give a brief peek into who we are and what makes us tick?

My advice (to myself) is this: show me what you care about! That sounds kinda dumb and obvious but I’ve found it to be extremely tricky. Looking at examples can help us though.

I’ve mentioned Cassie’s website multiple times because I think it captures her personality and focus extremely well:

You can tell right off the bat that Cassie cares a lot about SVG and animation. You can tell that she likes the nitty-gritty details of web design and UI development and by the writing you can see that she doesn’t take herself too seriously.

Another example I love is Sarah’s website where she kinda kicks in the door right away and doesn’t faff about:

I like how bold and exciting this is, and it certainly doesn’t feel like I’ve seen a website like this before. I guess that’s what’s exciting about it to me; having to scroll down a bit to see who this person is, and not being told right away.

Another homepage that springs to mind is Michelle Barker’s CSS in Real Life where she writes about front-end topics. I like this one because it’s not about fancy animations or beautiful illustrations but because of that color, that luminescent pink that hops off the page and just sticks in my mind.

A lot of sites are pretty forgettable and the choice of using a

Alternatively, I like the story-based approach of Danielle Baskin’s website that shows everything that she’s been working on lately. The sheer amount of white space is also pretty great and gives you plenty of breathing room to enjoy those lovely typefaces:

These sites are inspiring and worth checking out not because we should copy them though, I just want to make that super clear. Instead we need to ask that super annoying question again: what do I care about? And then, harder still: how do I show folks that I care about that?

I could say “I like typography” in a paragraph but how do we show folks that without necessarily telling them? Probably: beautiful fonts, an interesting layout, attention to small typographic details.

So as I’m designing the homepage of my website I think that I need to take my own advice here. Earlier this weekend I popped open Figma and each time I started to riff on a new idea I would make a new frame and copy my previous design, just like this:

These are all different designs of the same page, with big grey blocks signifying images or UI elements that I don’t need to draw right now. I can’t quite remember when I learned this design “hack” but it’s great because after 30 minutes of trying different ideas you can quickly see how you got to where you are now. (In the past I would constantly move UI elements around the page and often retry things that I’d experimented with a dozen times before—this is a time saver).

All this homepage design work is scary and annoying but also fun at the same time. At least, once you realize that you can be smart about how you show yourself off, you can begin to play with typography and animation and layout. You can begin to think about all the CSS properties and weird things you can experiment with. You can begin to make something magic.

Wait, I have to go build the thing now? Wow, sorry dad.


Weekly Platform News

Šime Vidas is back with the weekly platform news which is a roundup of new features that landed in browsers and things that are on the horizon worth paying attention to.

One part that really stood out to me here is where Vidas talks about the browser support for the :not pseudo class which has now shipped in all major browser engines. You might have already heard about this property, which I had too, but did you know that you could do this with it?

/* select all <p>s that are descendants of <article> */
article p { }

/* NEW! */
/* select all <p>s that are not descendants of <article> */
p:not(article *) { }

This sort of fries my noggin a tiny bit as it’s often that I let out a tiny whoa when I read about CSS. But this ability to change the elements that are not descendants of a parent seems like extremely powerful stuff to me. I wonder what weird hacks we can pull off with this new superpower.

Oh, also:

It wasn’t mentioned in the latest “New in Chrome 88” article, but Chrome just shipped the path() function for the CSS clip-path property, which means that this feature is now supported in all three major browser engines (Safari, Firefox, and Chrome).

Yay for more browser support! With this property you can clip an element (say a rectangular img) into a heart or a hexagon or any shape that you can draw with a tool like CSS clip-path maker:

On this note, Mikael Ainalem made this exceptionally lovely demo that shows the promise of it and how we begin to use this property in our projects from here on out:

If you disable this property in DevTools you can see how the clip-path is working above: it’s hiding the bodies of these people so that when you hover over them they move up a tiny bit to show more image, giving you a nice 3D effect.

It’s really smart and I wonder how this is going to change the way I approach using images and animations because—yes—these properties can be animated, too.


Algolia

What’s Algolia? Chris explains:

Algolia is for search. Literally any website can take advantage of Algolia-powered search. You put JSON data (“records”) in, and then you can search them at lightning speed. The magic of Algolia is that they help you with both of those things: getting data in and getting search results out.

My first thought after reading that was nope! this search stuff must only apply to big WordPress projects or to enormous React web apps where I have to pull in some library or plugin and hook up ten million doodads to get it working, right?

But: nope to my nope! It’s not only possible but relatively easy to add search to a Jamstack site with this Netlify Build Plugin from Algolia:

The Algolia Netlify plugin is an easy way to add search on your Netlify website, allowing you to add an Algolia search experience in just a few lines of code. One advantage is that after setup, the search results provided by the plugin will evolve with your website content, automatically refreshing each time you publish a new version of your site, which removes the hassle of maintaining the search index. Each time you publish a new version of your site the plugin triggers a crawler that browses and extracts your website’s content and pushes it into an Algolia index.

This sounds like magic to me. And I guess it catches my eye because most of the time I’m working on smallish websites made with a static site generator like Eleventy. But Algolia can support React, Vue, Angular, WordPress, etc.

I think I’m going to experiment with all this on my own personal site— being able to search through a big index of blog items could come in handy and make things feel more like a true archive.


Introducing Open Web Docs

Not so long ago Mozilla announced that they would halt work on MDN and fired the staff. This was awful for many reasons and last week it struck me how awful this will be for the community in the future—I realized I had used MDN three times over the course of 24 hours.

But this is remarkable stuff: Open Web Docs is a community effort that plans to contribute to MDN and ensure that it’s being supported for at least the next 12 months:

Open Web Docs was created to ensure the long-term health of web platform documentation on de facto standard resources like MDN Web Docs, independently of any single vendor or organization. Through full-time staff, community management, and our network of partner organizations, we enable these resources to better maintain and sustain documentation of core web platform technologies. Rather than create new documentation sites, Open Web Docs is committed to improving existing platforms through our contributions.

This is extremely good to hear and we’ll all benefit from it, one way or another. They’ve got a staff of folks contributing full time and are funded by the folks who are going to directly profit from this documentation: Microsoft and Google.

Feels like every big tech company should sponsor them because we all rely on docs in one form or another and this would help make the web considerably easier to build.


The Surprising Things That CSS Can Animate

Not so long ago I wondered aloud here in the newsletter about 3D spaces in websites and why we hadn’t seen many of them up to now. But this little experiment from Will Boyd has made me want to really go back and think about how to create 3D interfaces on the web.

Here’s an example where Will experiments with animating the z-index properties of this Big Boo:

Looks familiar! [Chris]: I had the same thought after I learned this from Zoe Gillenwater.

Each of those purple walls have a z-index of 1 through 5. But an even better demo of this is where Will creates a demo of overlapping sushi cards where selecting a card will push the other one into the background to deselect it:

Gah, I love this example because it sort of unlocks a whole bunch of possibilities in my head for showing the state of something without having to put a big green button on it or stamp enormous “SELECTED” text somewhere.

Anyway, there are a lot of other interesting notes in that blog post but that’s the note that I’ll remember for the future.


Kintone Developer Program

Need a web database for your Hackathon project? Read through this step-by-step tutorial to learn how to spin up Web Databases ridiculously quickly for your projects using drag-and-drop GUI! Get your free developer license now — no credit card needed!


Netlify

Connect your repository. Add your build settings. Deploy your website. Netlify is the fastest way to get a site live and supports any type of site with a Jamstack architecture. With static global CDN hosting, it is the fastest possible way to host.


[Chris]: I enjoyed Jason Lengstorf’s story of framing a product pitch (even to internal teams) in order to help it gain traction. If you tell someone, hey look, I built this for you, it takes all the complexity you dealt with and boxes it up so you don’t have to deal with it, there is a good chance they don’t buy it. Boxing up my complexity means that it’s all the harder to unbox when I need to. But maybe that “boxing up” was actually a poor way to describe what they thing you built does. Maybe it actually removes complexity or smooths out a processes such that there is no need to unbox (debug) anything. In Jason’s story, the re-framed pitch didn’t pitch a box the same size as the previous complexity, it pitched a teeny tiny lil’ box as a replacement, and that simple visual metaphor was all that was needed to get people adopting and move the project along.

Speaking of building software, it’s probably also a good idea if the thing you build is good, right? Here’s Li Hongyi on Building Good Software.

… the root cause of bad software has less to do with specific engineering choices, and more to do with how development projects are managed. The worst software projects often proceed in a very particular way: The project owners start out wanting to build a specific solution and never explicitly identify the problem they are trying to solve.