As I type in disbelief that Friday is already upon us, I'm finding it difficult to drop any major weekend projects on folks since a few million humans in the U.S. have been impacted by the recent hurricane that just happens to be #4's namesake. We're also well-into leaf peeper season, and I'd rather y'all go outside and marvel at nature's colors (check the map to see where to head).

So, instead of a seven course project drop, you can pick and choose from three "tapas" plates.

Nightdrive

We seem to be enthralled when someone very talented walks you through the process they went through to design and build something. This is evidenced by the continued success of channels like HGTV, and the myriad of YouTube 'splainer videos.

This first drop — Night Drive by James Stanley, is something you can read through, marvel at, and then clone and re-create or modify based on the suggestions in the blog post.

Using only javascript, the HTML <canvas> element, and some maths, James built a passive (you just watch it) driving simulation that uses only circles (⚪️ 🔴) to convey the sense of movement. He starts the 'splainer on literal graph paper, walks you through the plan and the maths, starts small, and makes incremental changes, until the project is finished.

The javascript code is quite readable, and James offers some ideas for how to build upon it, but I'd also suggest just doing your own riffs too. Unlike, say, a physical carpentry project, you can't mangle anything a git reset HEAD~ cannot undo. As Henry Ford said, "failure is an opportunity to begin again more intelligently".

And, I'm being quite earnest about the "just make changes"!

For example, what does changing one or more of these variables do?

Have some fun while learning, and drop a link if you do build upon James' work.

Leave a comment

John Doe

Today's middle section is the polar opposite of the mega projects from the past few weeks. Rather than fire up an npm project into VS Code and layer in complex javascript+css frameworks, I'm just going to suggest you head over to this neocities page, save the single source HTML, CSS file, and boilerplate image (I guess you can clone it if you really want to as well), grok how it works, and layer in your own changes.

The “thing” you're modifying is a small, single-page website by @cadars, dubbed "John Doe", that simply uses the #anchor suffix and the :target CSS selector to show and hide pages/content. No databases. No javascript.

The author describes it as builds**t-free (notice the 'build', not 'bull'), so you can edit your website with a text editor and just upload it somewhere "like a normal person."

It's a great way to learn more about CSS, and how modern HTML works.

Share

Tidy Git

It's never too late to do some Spring cleaning, and this last section drops a spiffy 'cheat sheet' made by Tim Green with scads of things you likely did not know about git and/or GitHub, that should inspire you to comb through your repos and freshen things up a bit.

For instance, did you know (I did not) about git instaweb? Fire it up in a git repo, and you get a locally hosted git web server. It's no Git[Hub|Lab|tea], but it is pretty neat, and has inspired me to ensure the description file in any project's .git directory (yep, you have one too) is populated with something better than "Unnamed repository; edit this file 'description' to name the repository.".

After digesting the link list, I'm also on a tear to see how I can incorporate git stripspace into workflows.

There are many more tips to dig into and apply. Your repos will be all shiny and new when you're through.

Share

FIN

Programming note: I'm toying with the idea of having actual titles vs just the date stamps, so you may notice that change starting next week.

If you’re able, please consider supporting one of the hurricane relief efforts. I'm partial to World Central Kitchen, but there are many reputable ones to choose from. ☮