Menu

HTML

Some Innocent Fun With HTML Video and Progress

April 30th, 2020

The idea came while watching a mandatory training video on bullying in the workplace. I can just hear High School Geoff LOL-ing about a wimp like me have to watch that thing. But here we are. The video UI was actually lovely, but it was the progress bar that really caught my attention – or…

How to Redirect a Search Form to a Site-Scoped Google Search

April 28th, 2020

This is just a tiny little trick that might be helpful on a site where you don’t have the time or desire to build out a really good on-site search solution. Google.com itself can perform searches scoped to one particular site. The trick is getting people there using that special syntax without them even knowing…

SVG, Favicons, and All the Fun Things We Can Do With Them

April 24th, 2020

Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the ability to use SVG as…

Front-End Challenges

April 17th, 2020

My favorite way to level up as a front-end developer is to do the work. Literally just build websites. If you can do it for money, great, you should. If the websites you make can help yourself or anyone else you care about, then that’s also great. In lieu of that, you can also make…

Better Form Inputs for Better Mobile User Experiences

April 17th, 2020

Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and autocomplete attributes. 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….

Learn Eleventy From Scratch

April 7th, 2020

The latest edition of Andy Bell’s Piccalilli landed in my inbox this morning with a sweet offer: preorder Andy’s course on learning Eleventy from scratch at a third of the price. Why the plug? No, not sponsorships or anything like that. I just happen to hear a heckuva lot about Eleventy these days. Like how…

Why Do Some HTML Elements Become Deprecated?

April 2nd, 2020

The internet has been around for a long while, and over time we’ve changed the way we think about web design. Many old techniques and ways of doing things have gotten phased out as newer and better alternatives have been created, and we say that they have been deprecated. Deprecated. It’s a word we use…

How to build a bad design system

March 31st, 2020

I didn’t realize this until it was far too late, but one of the biggest mistakes that are made on a design systems team is a common mismanagement issue: there are too many people in a meeting and they have too many dang opinions. Is there a conversation about the color of your buttons that’s…

Creating a Pencil Effect in SVG

March 28th, 2020

Scott Turner, who has an entire blog “Exploring procedural generation and display of fantasy maps”, gets into why vector graphics seems on these surface why it would be bad for the look of a pencil stroke: Something like this pencil stroke would require many tens of thousands of different elements.  Basically each little blob of…

What Does `playsinline` Mean in Web Video?

March 18th, 2020

I got myself confused about this the other day, went around searching for an answer and came up empty on finding something clear. The answer actually is quite clear and I feel a little silly for not knowing it. With it in place, like this: <video src=”…” controls playsinline></video> Mobile browsers, will play the video…