One-Million Bytes (With A Catch)

It’s been a minute since we’ve had a WPE, so we’re going to ease back into the swing of things with something achievable by anyone. Yes, anyone.

Y’all know I’m passionate about helping to ensure nobody is left behind in the “you really gotta know HTML/CSS/JS” future we’re [headed] in. So, today’s challenge is yet-another “build a web thing” but with some (fun) constraints that should spur both design and technical creativity.

One-Million Bytes

I am not the first blogger to re-blog the One HTML Page Challenge (GH), which is the core mission of today’s WPE.

TL;DR:

• You must write all of your code in 1 single HTML file. See CAVEAT in the last bullet.

• Your file must be less than 1mb (measured by the file size on most operating systems, so it’s really more like 1,048,576 bytes than one-million).

• You cannot import any external files (this means you cannot import images, stylesheets or js files from external sources). See the caveat in the last bullet.

• Due to the nature of hiding lots of functionality behind APIs, you cannot have any incoming or outgoing network requests. (I refuse to add in this limitation, but will note that as long as the API bits are just pulling in/shoving out data it should be 👍🏼.)

• CAVEAT: You are allowed to use libraries! The original challenge suggested any library/framework must be hard-coded into a script tag and still must fit under the 1MB file size. I say you can use import from a CDN, but that the byte count of your HTML file and said framework combined still fit into the total limit.

There are tons of examples on the challenge page-proper that you can get inspiration from.

The Catch

You must use at least one item from the projects listed over at UnsuckJS. We’ve already covered Lit components, and we’ll cover a few more of the others listed there in future Drops.

I really want folks to see what magic can happen when you use lightweight, tightly focused frameworks, and would heartily suggest y’all give strawberry a go for this WPE.

CSS Suggestions & What To Do About Fonts

Both Pico and Milligram are small and handy CSS frameworks that will provide some core functionality without a ton of bloat.

You are welcome to use web fonts without embedding, too (just add the size to the overall count), but they can quickly add some serious heft to their file sized. Here are some small-ish Google font suggestions you may want to use if not going with the system font stack.

• Oswald (51KB)

• Droid Sans (41KB)

• Lato (120KB)

• Roboto (145KB)

• Source Sans Pro (150KB)

• Open Sans (217KB)

• Open Sans Condensed (221KB)

Show Your Work

While I’m not “making” anyone submit their project to the challenge page, you should totally be proud of whatever it is that you put together. You will have created something, and — hopefully — learned a new framework in the process.

A Project Suggestion

Yesterday’s Drop featured a data journalism project on U.S. book bans. There is just enough but not too much data in that project to tell your own stories with it. The provided file is an Excel workbook (ugh) which I’ve made into a (slightly less ugh) gSheet. The first sheet in the workbook is “data science friendly” (i.e., requires no “joins”) so I’ve also published it as a CSV from gSheets that you can use directly.

FIN

I will be making something and posting a URL for it on Monday. Double Bonus Drops coming this weekend! ☮