Howdy y’all!
[Robin]: This week I got really weird with it. My pal is having a birthday soon (shhhh) and he adores two things in life: text adventure games and Animal Crossing. So, I thought, what if I made a website that’s a text adventure game based in the Animal Crossing universe? Is that too much as a gift? (No! Friendship is eternal!)
I’ve been making this thing with Twine which is “an open-source tool for telling interactive, nonlinear stories.” What you do is write bits of text and then connect them together in their app or on their website:
Then you can export a HTML file with all the markup, styles, and JavaScript bundled inside it. And there you have it: a custom made text adventure game. I knew all I had to do after the export was edit the styles to make it look the way I wanted and then: boom!
My realization this weekend whilst hacking away on this thing isn’t anything technical. It was something else. I knew that a website can be a worry stone, something you throw all your anxiety and stress at. But I didn’t know that a website can be a gift as well. 🎁
Here’s 6 HTML elements you should probably use more
Timothy Miller’s list of elements is a good reminder that HTML is, as Timothy puts it, “a large language, but not a massive language.” His list: address, details, dialog, map, abbr and template.
It’s also a good reminder that we should think twice about using a <div>. Is this an element just for styling? Then sure, that’s okay. But if this element has meaning then we should probably take a minute to think about it.
Lookin’ for a new challenge?
Front-end challenges are a great way to level up as a developer and learn a diverse set of skills—I know that I’ve always found that building something, anything, is more helpful than sitting around theorizing about things. So Chris made a handy list of sites that challenge you a bit.
There’s Front-end challenges club and 100 days of CSS, or Daily UI if you’re interested in learning more about the design side of things.
Pseudo-Randomly Adding Illustrations with CSS
That’s just what Eric Meyer has done with his website redesign, where between each post on his blog one of five of these illustrations below. They really are quite lovely:
Eric uses the nth-of-type CSS property to switch out each image like this:
.entry:nth-of-type(2n+1)::before {
background-image: url(image-1.png);
}
.entry:nth-of-type(3n+1)::before {
background-image: url(image-2.png);
}
.entry:nth-of-type(4n+1)::before {
background-image: url(image-3.png);
}
.entry:nth-of-type(5n+1)::before {
background-image: url(image-4.png);
}If these formulas look like a little intense then not to worry! A while back we made a website called :nth Tester that gives you a good visualization of which child is selected depending on what you pass into it:
Better form inputs for better mobile experiences!
Alex Holachek writes about a simple, practical way to make apps perform better on mobile devices:
…always configure HTML input fields with the correct
type,inputmode, andautocompleteattributes. While these three attributes are often discussed in isolation, they make the most sense in the context of mobile user experience when you think of them as a team.
Alex makes a great point here! So much so that I’ve started noticing when web apps have configured these things incorrectly and now I tend to sigh at a deafening level when hiccups like these get in my way. Forms should be quick, easy to fill-in, and painless. And everything we can do to make that experience easier for everyone involved is absolutely worth doing.
On this note, Alex then went ahead and created completely kick ass website that lets you experiment with the different type values for inputs and how these work across iOS and Android:
A few handy tips for making themable UIs
Dieter Raber tackles something that I’ve struggled with quite a few times when it comes to working on big design systems: how to create color themes. And he does this just by changing the hue of the color with HSL, that’s another way to define a color just like RGB.
Dieter then makes the following example with a magic sprinkling of CSS variables and a dash of JavaScript:
I’ve made giant spaghetti codebases in the past by using plain old Sass to create variants of the same UI and so it’s posts like this that make me genuinely thankful how much work has gone into this side of things.
An introduction to web components
I’ve yet to use web components at all yet — either in production or as a test just for myself — but I intend to fix that this week by reading all about them in this excellent tutorial by Caleb Williams. He dives into Custom Elements (I some idea?), Shadow DOM (please don’t ask me) and HTML templates (I’m going to go for a walk now, good day sir!).
This is a good reminder that the web is gigantic and knowing everything about everything isn’t really important and neither is feeling guilty for not knowing stuff. Being curious is important though. And that we can fix.
Sponsor
Jetpack Instant Search
Do you use WordPress? Does your site have search? You’re gonna want to check out Jetpack’s latest feature: instant search. Flip it on (like we did on CSS-Tricks) and the WordPress search experience is better than ever, sporting a gorgeous full-page layout and search results that display as fast as you can type.
? Hot Links
- Eric Bailey says enough with the resumés in React; Max Böck delivers a template (we’ve done that several times); Zach Leatherman chimes in with fanciness.
- Sarah Higley explains the heck out of what an “accessible name” is, which is very worth wrapping your mind around.
- Dark mode isn’t just for websites and native apps, it’s for emails too, and Lee Munroe covers it.
- Jim Salter: Microsoft Edge is becoming the browser you didn’t know you needed
Sponsor
SmashingConf Online Workshops
We’re starting to see amazing opportunities to attend conferences right from our bathrooms couches as they make the move to online, and SmashingConf is a perfect example. The SmashingConf Austin may be postponed, but there are six stellar online workshops taking place from May to June you won’t want to miss, including ones by Brad Frost, Miriam Suzanne, and Rachel Andrew. Hurry, spots are going fast!
[Chris]: Let’s end with an quick opinion piece by Kev Quirk: Why I Don’t Use A Static Site Generator. Kev uses WordPress:
Want to blog on my iPad? I can. Want to do it on my phone? No problem. On a machine I don’t normally use? Not an issue, as long as it has a browser.
First, I should note that by using WordPress it doesn’t opt you out of also using a static site generator. WordPress has an API, and that opens the door to hit that API during a build process and build your site that way. That’s what Gatsby does.
But I also agree with Kev on a fundamental level. For every reason that he lists, and 1,000 more, it’s a perfectly acceptable and often smart choice to run a WordPress site. I think about it in terms of robustness. WordPress will cover every need you have now and every need that might come up. Need eCommerce? It’s there. Need forms? There are great plugins. Need to augment how the CMS works? You have control over the types of content and what is in them. Need auth? That’s a core feature. Wish you had a great editing experience? Gutenberg is glorious.
Compared to the relatively new world of static sites, every little thing you need can end up a journey of research and implementation, like you’re the 3rd person on Earth to ever do it.
Now all that said, what do I think of static site generators? They are awesome. I think there is a lot to be said about building sites in this way. The decoupling of data and front-end is smart. The security is great. The DX, what with the deploy previews and git-based everything is great. The speed you get out of the gate is amazing.
I can’t wait for a world where we start really seeing the best of both worlds.
