Creating a catalog of the movies in our video library

View the project

My wife is a big movie buff and so over the years we’ve amassed a large amount of videotapes, DVDs, BluRays and streaming service purchases. It was way back in 2004 that I first got her a Netflix account as a Christmas gift back when they would mail DVDs to your house based on your selections. It might be the best gift I’ve ever given her as we’re still members after 21 years. We’ve certainly gone through the tech conversion process as well — buying DVD versions of videotapes and then buying digital downloads of DVDs. All of which means we have a mishmash of movie formats scattered around — binders full of DVDs, boxes full of videotapes and digital purchases across a variety of streaming services. It’s a bit of a mess despite her valiant attempts to organize the collection to make finding a particular title easier.

So recently…while I was digging around deep in the archives of some old hard drives, I came across an unfinished attempt to build out a movie catalog for us. From the file dates, it looks like I grabbed a design concept from 2008 and used it as a basis for an initial catalog build in 2011. With the recent (somewhat) build (success?) of the virtual library of all our books, I decided to revive this old movie project and finally to bring it to life.

The Design

I’ve been kind of in love dark UI color themes recently — grabbing screenshots and building out example palettes for using in some future project. Finding this old design file turned out to be the perfect project to scratch that dark UI color itch and better yet, it came with a preset colors. Turns out long before theme switching became a thing on the web, I was designing dark UI patterns.

The design is a centered, basic table with the data surrounded on the left, right and bottom with artwork. The artwork style is very much of the early 2000s or at least, very much of the style I was drawing back then. I guess you could call sort of a floral trash glitch. Lots of scroll work with tech elements with noise and grime textures overlapped on top. The bottom artwork is a silhouette of an industrial building, but flipped upside down so that the scaffolding and smoke stacks point downwards.

The Development

The two development challenges were converting the old HTML to a modern layout and switching out of the obsolete Adobe Spry framework the original page was using. Keen readers may remember that I used the Spry framework for the retro client list page I created way back when.

The Colors

Working through all the colors led me down a side quest to create swatch cards for each color. This is not a new idea as I’ve done it before for other projects such as the Pattern Pattern project. This time around though, I wanted to replicate a tool I built for use at work. Namely, incorporating some data attributes and a bit of Javascript to allow for visitors to copy the color values for use elsewhere. Taking it a step further, I converted the hex color values over to OKLCH which is a bit of an aspirational nod to the future (present) to remind myself to really start exploring and using OKLCH values. I’ve tried to make it a bit generic for use with other projects and I’ll probably continue to tweak it and make it a template of sorts. For example, the buttons probably could use some announcement UX improvement.

The Layout

Back on track, I stared updating the HTML structure and layout. The original old file has a single background image. The image pushed the art to each side leaving the middle as a single flat color. The HTML then centered the data table in the center of the page and therefore, on top of the center of the background image. It was a common technique back then, but obviously not relevant today. Centering the HTML on the page is trivial, but updating the layout mean breaking up the single background image. Of course, in the original old files I could only find a Photoshop source file and not the individual illustrations used to create it. Since I wanted to update the raster image to SVG, this led me to reverse engineering the original to convert it back to vector. Maybe someday I’ll find the original files and recreate the complete vector illustration, but for expediency, the new version is not technically identical to the old version.

The Typography

The original used Arial because custom fonts and font loading were in their infancy while services like Google Fonts weren’t even available. System default font stacks were still the quickest option for little projects like this concept. The one trick in the original design was to reduce the type size of Arial significantly which gave it an almost bit mapped or mono space appearance. For the new version, I took this visual quirk and better defined it by switching to an actual mono space font, specifically one of my new favorites, Space Mono. It’s still small to help maintain the look and actually works better as the characters forms are more legible increasing readability and accessibility.

The Content

With the graphics, layout and basic HTML structure updated and in place, it was time to get the massive list of movies into the HTML table. It only took a few minutes of copy pasting movie details into HTML blocks, duplicating the HTML and repeating it all over again for me to realize the manual process was too cumbersome for me to ever finish the project.

So what’s the solution? Like any good craftsmen, it’s to build your own tools, your own jigs. It’s a common enough approach in the carpentry and the idea is finally coming around to web development. Here’s a good post about the connection between craft, tools and jigs and another post with an example jig a designer built for their use. I can relate to both posts as I’m now finding new little parts of the design/build process that need a custom tool or jig to make things easier (and often better). Realistically, I’ve been doing this forever. Every time, you learn a new code pattern, you often reuse the pattern elsewhere. Code building upon code. The color swatch panel is an example. I made it for one specific use case, but I keep finding other opportunities to use it as well as continuing to tweak the features.

In order to speed up the data entry, I built a form. A regular old HTML form with some PHP to handle the inputs and dump them in to a JSON file. This was the jig, the single purpose tool to help me craft the final output. With the form up and running, things became much easier. I was able to flip through binders of DVDs and then tab through the form fields to quickly enter the data. I kept a browser tab open with our Prime video account so that I could jump over there to figure out a movie genre, double check spelling or look up a title. It was a tremendous time saver to say the least. Using the form got quicker with each entry as the browser remembers previous inputs and then allows you tab through the entries. After a few times, I didn’t have to type in the genre anymore, but merely tab through the browser suggestions. Super quick and easy.

For testing, I wrote up a script that took the JSON file and generated the HTML table. This helped catch any errors and typos before they got hidden too deep in the list. Of course, the page was then dependent on the Javascript. No Javascript (due to loading error or visitor setting) and then there’s no table. For the final production page, I took the testing page live output and copied the entire table, pasting it into a new HTML file. This extra step keeps the page static eliminating the table build step. The only Javascript then is for the extra functional upgrades and if it doesn’t load, the table data is still available. This also let me alphabetize the list by title prior to creating the new static page which was handy as the data as originally entered was anything but organized. And yes, that does mean that the build process for this static page is…me, building the page. I’m the build process.

Sadly, I do have to add an aside here: “building your own tools” is not a “website builder,” “vibe coding” or any other artificial “intelligence” no code bullshit. I hand code the tool to help me hand code the output.

The Upgrades

As the list got longer and longer, I took the opportunity to add a few features to help my one potential user, my wife, find a film. This meant two upgrades: search and sorting the table by columns.

The search was a modified version of the one I built for the virtual library. Again, another example of reusing (and modifying) a code pattern for a new project. For this version of the search, I switched from using data attributes to just the text values of the table cells.

For the sorting, I’m not sure where I dug up the script, but it’s certainly a pattern I’ve used before in other projects. Nothing fancy, just a little text comparison, but definitely can help with such a long list.

Summary

Overall, it’s nice to get this project up and running to bring this design to life. I find there’s something really attractive about the table cell separation. It just feels…right. A bit of extra polish for an otherwise ordinary table. The same is true for the mouse over / hover effect on the table rows. It doesn’t do anything, but it’s fun. It’s almost a functional deceptive pattern although I wouldn’t go that far. The cursor doesn’t change indicating a hyperlink and the text itself can still be selected. But it’s a fun highlight effect that might help with readability. It also fits with the retro style. I can almost hear the small beep, chime or click sound as you move up and down the table rows. Hmm…maybe I should add in a sound effect and some tab key navigation in the next revision.

View the project

Helping a Vietnam Veteran share his photos and stories from the war

View project

On March 8th, 2024 I was able to launch a side project for my father-in-law Bruce Tester that has been banging around between us for years. We get excited, get distracted, get busy, get back to it and the cycle would repeat. This post is a summary of the design and development of the site as well as the history of all our fits and starts.

The Background

Bruce is an accomplished photographer and with my design background, we’ve spent countless hours geeking out over Photoshop, the latest digital cameras, scanners, printers and all manner of photography related equipment. Many times, I’ve happily ended up being his de facto photographer’s assistant lugging around gear and setting up for a golden hour landscape shot or a time lapse night shoot. Bruce is humble about his photography and despite filling his house with gorgeous prints, he doesn’t really promote his photos. My wife and I have always loved his work and would (gently) push him to display them somewhere, but to no avail. Finally, for one holiday gift, I bought him his own domain, set up hosting on my account and volunteered to set up a site for his photos.

First Attempts

For quick setup and ease of use, I installed WordPress for him and threw a couple of his photos in place using a free photography theme. I tweaked the type a bit, created a quick logo of sorts and posted some photos to show him what was possible. And that’s was where it sat. For years. We both got busy with life and it was always more fun to take photos versus building a photography website.

Getting Serious

Once Bruce retired, he finally had the time to begin digging through his photo archives, retouching and organizing thousands of photos. This is when we came back to the idea of creating a web archive for his photos. The collection that was in many ways, most important to him, were his photos from his time in Vietnam. Since we already had WordPress installed, he began feeding my sample photos and I started setting up test pages.

Of course, like many projects, as we reviewed and discussed the test pages we found the site wasn’t quite accomplishing what he wanted. I had even given him some basic WordPress training, so he could upload photos and create pages, but it just wasn’t working out. He wanted to write more about each photo, write more about his time in the Marines and organize the photos into subsections to better tell his story. In short, the theme wasn’t working out. I searched for other themes and tried several, but the more we talked, the more it dawned on me — we needed to build it from scratch. It would certainly be a ton more work, but we create something unique, personalized and beautiful.

The Design

The decision to finally build the site by hand was in many ways, a huge relief. While I’ve used WordPress for years and years (and still do for this blog), I’ve grown beyond the framework and it’s limitations are now irritations. Starting from a blank page was freeing and more inline with the majority of my recent efforts. Hand crafted instead of framework dependency.

Overall, the design inspiration was really about the time period — the 1960s. And not the free love, hippie, psychedelic day glow lettering 1960s. The other America. The more conservative 1950s generation with buzz cuts and starched shirts. Looking through the command diaries and cruise book Bruce provided really got me thinking about what “official” document design looked like back then. I started researching other government publications.

The primary goal of the site was of course, to focus on the photos. The site hierarchy was a basic thumbnail gallery leading to individual photo pages. Nothing crazy there. Navigation is a simple masthead with a drop down menu along with a breadcrumb link navigation at the bottom of each interior page. The breadcrumb links expose the structure and allow for jump navigation. Within each photo page there is also a previous/next link navigation so you can alternatively progress through the site in a linear fashion.

Framing the photos and lifting them off the page a bit was another design choice to help separate and define the content, directing attention and focus. The site colors were all muted tones: blacks, whites and warm grays — all in service of the UI and not to interfere with the photos.

The typography was chosen to split between the site UI (menu, navigation, etc.) and the content. For the UI, the Inter font family was perfect. It’s got lots of options, it’s very legible and modern, but also not showy. Like the UI colors, it’s not going to distract from the content. For the text content itself, I loved the look and feel of the typewriter style fonts used in the command diaries. Going with a monospace font like Courier New helped anchor the content in it’s original time.

The one page where I did have a bit of fun was on the About page. I was able to grab a few of the military stamps (“Confidential”, “Unclassified”) from the command diaries along with a bit of texture to add to the background. I think these little touches help to keep the page from being too clean and sterile.

The Development

The site is super old school in terms of development — semantic HTML with CSS for style. The only Javascript used is for the main drop down menu and that’s just for the button event to show and hide the menu. Choosing this direction rather than the latest framework flavor was important as the site is a historical document. I always had to keep in mind that i was building for the future. Keeping it simple and using the proven standards that the web was founded on would help ensure that the site would work well into the future. The entire project is essentially a library archive to help tell part of American history. It was a responsibility I did not take lightly.

Accessibility and the Audience

Accessibility is always a requirement, but as we worked through initial pages, it became even more important as we really considered the potential audience. Given the historical content (and using Bruce himself as a tester), we realized we needed to add design elements to cater to an older audience. Adding numbers to each photo in a category, not only helped us in production, but also gives a reference anchor for visitors. The same is true with the text overlay that appears on hover for each thumbnail. The “click to view” instructions help guide visitors to the full size photos. This was a great exercise in recognizing and adjusting our bias — just because we’re click happy youngsters doesn’t mean folks over the age of 70 would understand the implied navigation. Similarly, adding some “how-to” text to the home and about pages helps to make it obvious.

Education and Production

One of the other parts of the development process was education. Bruce has no idea about the mechanics of good website structure, accessibility or SEO and nor should he. He’s the photographer. This lead to some back and forth as I taught him about <h1> tags, why they were important and why we needed one written for every page. All 400 plus pages. So the production process was Bruce writing and reviewing test pages while I focused on batch image formatting, resizing, optimization and even naming for better SEO. The same was true for the HTML side. Sessions of duplicating files, updating the content and links while capturing and handling any unique content that a specific page might have.

One production and accessibility aspect that I also tackled was writing the alt text for the photos. This let Bruce focus on the photos, titles and the overall story. Now, writing descriptions for 400 photos was no small task and at times it did seem overwhelming. After about twenty, you start to burn out and your eyes blur over. Admittedly, some of the descriptions might sound a bit lazy and in a twist, the WebAIM WAVE tool flags some of them as being too long. I do take a bit of pride in providing good alt text, so it’s a warning I’m willing to set aside especially as this is a photography site.

Other production notes include creating open graph images and the site’s favicon. The challenge for the open graph image was to come up with the text to help “package” the entire project. Given Bruce’s other landscape photography work, I could envision adding new sections to the site and moving this entire project to a sub directory. Thinking about that possible future helped me to consider this project a “collection” which then made the open graph designs fairly easily. Designing the favicon, on the other hand, was much more difficult. The site is personal, so it doesn’t have a logo per se. With no logo and a fairly subdued color palette, there wasn’t any material to rely on. I wanted something dramatic, probably because I suffer from too many browser tabs being open at a time. Initial inspiration came from the Marine Corp itself. Namely, the colors. The red and yellow combination is certainly dramatic and jumps out in a browser tab. The second bit of inspiration was the idea of old camera lens iconography. I worked through a few different, more classical lens shutter icons before settling on an abstract approach.

Performance

Things could always been improved and you can chase down minor improvements for a long long time. Overall though, Google PageSpeed is happy with scores of nearly 100 across the board for desktop (the intended profile). The results for mobile are also impressive if a bit lower for the performance metric.

Performance reports from GT Metrix and YellowLabs also confirm the site is doing pretty well.

Likewise, the site HTML and CSS both validate without issues. Interesting to note that the WebAIM WAVE tool shows the thumbnail hover text as failing color contrast even when the color combination is well above the WCAG 2.2 Level AA ratio. Turns out it’s due to the opacity being zero. Once the thumbnail is hovered, the text opacity changes to 100%, so the error is a bit of a false positive.

Conclusion

Overall, I’m really happy with the way the site turned out. It feels very professional and I think I’ve lived up to the responsibility to tell the story. As the grandson of a history teacher and as a child born during the Vietnam War, I feel passionately about accurately telling stories like this for the future. Heck, I think I bought Bruce the web domain for Christmas back in 2008! It only took us 16 years to build something really great. Hopefully, it’s also worthy of Bruce and the all men and woman who served in the war.

View project

Updating my library for a better future

Visit the library

Now, I’ve been around the web a while and I’ve played the SEO game with many different search engines. Consequently, along the way, I became a big fan of structured data. It just clicked in my head as an easy way to provide additional context to our content. A way to enable a richer experience without mucking up the presentation.

Of course, with the big boy on the block, that meant using the JSON-LD as that’s what they “recommend.” And to be fair, it is easy to add to a page and then to update and maintain — especially on large websites.

Of course, on my own little website, there’s not a whole bunch of data to…well…structure, so the JSON-LD is more of a general description of ownership. Still, I’ve been adding it to all my pages for a long time.

<script type="application/ld+json"> 
{
	"@context": "http://schema.org"
	"@type": "WebSite",
	"name": "Strength of One // Library",
	"url": "http://strengthofone.com/library/",
	"image": "http://strengthofone.com/soo-icon.png",
	"description": "Find out more about my virtual library.",
}
</script>

All fine and good. I was recently plugging along making updates to the library (to add and update links) when I came across an article on microdata for books. Andy Dalton‘s article for the HTMLHell advent calendar switched on the light bulb and I realized I had the perfect page for playing around with structured data in a more expansive way by incorporating microdata directly in the HTML.

When I first started learning about structured data (long ago), I remembered thinking microdata actually made more sense than JSON-LD because it was more closely aligned with the actual content. The main reason I never started incorporating it into my pages (beyond the Google influence) was that my content didn’t seem appropriate. I wasn’t writing up recipes, movie reviews, promoting events or anything that really fit the value pairs approach. With my library though, adding the microdata directly inline made perfect sense. Each library card is already presenting information that could be connected to a Schema.org value.

I started slowly with a few entries and validating each as I completed it, quickly getting the hang of it and gaining confidence. I think the only edit to the HTML structure I had to make was to wrap the author in a <span> element so that it connected with the itemscope in the parent <p> tag. From there, it became a production chore to copy/paste/find/replace for each book as I watched some football and relaxed. Here’s a sample book entry with the microdata in bold. (And yes, the fact that the code is not indented drives my designer brain crazy, but in this narrow blog column, it’s easier to read when the lines don’t wrap so much. I’ll probably write another post about the woes and wails of code formatting for designers.)

<article class="book-card fiction paperback" itemscope itemtype="https://schema.org/Book">
<div class="book">
<h2 class="title"><cite itemprop="name">The Lord of The Rings</cite></h2>
<h3 class="subtitle">Special Edition</h3>
<p class="author" itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">J.R.R. Tolkien</span></p>
</div>
<div class="book-details">
<ul>
<li class="category">F</li>
<li class="category" itemprop="bookFormat" itemscope itemtype="https://schema.org/Hardcover">HC</li>
<li class="link">
<a itemprop="url" href="https://openlibrary.org/books/OL38062258M/Lord_of_the_Rings" title="View at the Open Library">
<svg viewBox="0 0 24 24" aria-hidden="true"><title>View at the Open Library</title><path fill="currentColor" d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"></path></svg>
<span class="visually-hidden">View at the Open Library</span>
</a>
</li>
</ul>
</div>
</article>

I also took the opportunity to clarify the difference between “authors” and “editors” for several books. I removed the distinction from the content and put it into the microdata instead. This does seem wrong in a certain sense — providing the value for machines and obscuring it from humans, but it does make the design cleaner and more consistent. It’s probably something I’ll have to tackle in a future update though. The same is true with some of the other UI details such as the category labels in each book card. Looking at them with fresh eyes, I should probably include some sort of legend or maybe a tooltip. Along the same lines, I can now probably refactor the CSS a bit to style the content using the microdata attribute selectors instead of my custom classes (eventually).

Using structured data in this way also tracks with the “less Javascript is more” idea I’ve been working towards. Adding a <script> tag to the HTML for JSON-LD still feels like regular ol’ Javascript and as such, overkill (even if it isn’t).

Working through all the books, I then circled back for the comics which had a similar pattern but with a few differences unique to them. Namely involving how to indicate each issue number in the series. One or two more production sessions and I was able to update all those entries as well. Again, like with the author’s name, the only change to the HTML was adding an extra <span> for the issue number. Here’s an excerpt from one of the comic book cards.

<article class="book-card fiction comic" itemscope itemtype="https://schema.org/ComicSeries">
<div class="book">
<h2 class="title"><cite itemprop="name">The Uncanny X-Men</cite></h2>
<h3 class="subtitle" itemprop="hasPart" itemscope itemtype="https://schema.org/ComicIssue"><span itemprop="issueNumber">#170</span></h3>
<p class="author" itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">Chris Claremont</span></p>
</div>

<!-- more stuff -->

</article>

One of the weird things I noticed when reading up about using microdata versus JSON-LD was the criticism based solely on the the microdata making the HTML “messy.” And by weird, I mean ridiculous. Given the popularity of utility based CSS frameworks (ahem, Tailwind) filling HTML elements with long strings of classes, it’s a bit silly to criticize microdata for “messy” HTML. And by silly, I mean stupid.

Opinions aside, I’m really excited to get this all in place and to keep using it as I add more books. Even though search engines seem to be dying of self-inflicted AI wounds, I’m still a firm believer that structured data will always be beneficial. Somehow, adding this microdata makes the me feel like the the page is more robust and future-proof. Heck, if it helps one person find a book, it’s all worth it.

Visit the library

A review of the progress and discoveries.

Read last year’s inaugural post or view the updated photo gallery.

Coming out of last year’s post on the project and my efforts, I was feeling a bit defeated. There’s just so much to clean up that the task seems insurmountable and the effort insignificant. But I still love going out in the woods and I’m not going to ignore a problem I could help to solve. Overall progress was a bit lighter in 2024 for two main reasons.

1. Recovery: After 2023’s massive effort, we needed to let the forest heal from the scars of removing all that large scale commercial debris. Overall, less disturbance to the forest meant less trash removed. This was particularly true over the summer.
2. Terraforming: It seemed like the maintenance and upkeep of our own little forest wildflower yard garden took a lot more time than in 2023. I imagine this is somewhat cyclical and 2024 was just one of those years where the long term tasks all needed attention. It also seemed like a really hot summer which led to exhaustion earlier in the day and less hikes into the forest.

The Trash

With the reduced emphasis on tackling the commercial dumping, I was really just picking up small loose items to fill my pair of trusty five gallon buckets.

Using the same conservative estimates from 2023, 50 pounds per bag comes out to 650 pounds for the bags. For the buckets, 5 gallons at 8.33 pounds per gallon comes out to 41.65 pounds. The more conservative estimate per bucket is probably around 20 pounds. This leads to a total of 1,060 pounds of trash put in buckets. All combined for a total estimate of 1,710 pounds of trash removed in 2024. Nearly one ton (0.855) of trash removed from the forest. Not bad at all.

Given that the effort was not on the large scale commercial dumping grounds, but rather on the small bits of trash and debris, there weren’t many “wow” items pulled out. This also led to fewer photos in the gallery, because…once you’ve seen a photo of a beer can, you don’t need to see them all. One fun item was the cast iron water main cap that I’m now using as a cigar ashtray.

• Car seat (2): Not a child safety seat, but actual seats from cars with metal frame, fabric, foam, etc.
• Bottles
• Cans
• Plastic
• Styrofoam
• Broken glass
• Paper
• Scrap metal
• Construction debris
• Golf balls
• Toys
• Balloons
• Tools

The Design

No significant changes to the design of the gallery this year. I’m still happy with the look and feel, so it was just a matter of updating the typography for the year subheads.

The Development

The code for the gallery did get an overhaul this year, most notably from my recent foray into using srcset on the img tags. Taking what I learned from building my new photo page, I started creating the different necessary image sizes, but decided not to go as crazy. The grid items in this design are much more consistent across larger viewports, so I didn’t need to create as many image options for the browser. I settled with three sizes: 220px, 460px and 1440px for the modal.

<img srcset="img/02-10-2024-220w.webp 220w, 
    img/02-10-2024-460w.webp 460w" 
    sizes="(max-width: 479px) 460px, 220px" 
    loading="lazy" src="img/02-10-2024-220w.webp" 
    data-img="img/02-10-2024.webp" 
    alt="A silver dented car wheel hubcap." class="thumb" loading="lazy">

I also found another responsive image testing tool, but it seems…too opaque? There’s really no indication what it’s testing against or what’s going on. I remain skeptical.

This change also meant a rewrite of the Javascript for the modal popup. Previously, the modal grabbed the image source path and used it. With multiple image sources — and wanting to have a larger image size just for the modal — I switched to pulled the correct image path from a new data attribute. Data attributes are great and I really find them to be helpful in connecting the dots between design and function.

This works great, but does introduce a bit of a delay as the image loads — particularly on subsequent images. The first time you click on an image, it loads fine, but close it and click on a second image and you’ll see the first image appear briefly before the second image loads. I’m not sure if it’s due to the lazy loading I added to all the images or just a caching issue or something more granular with the JS where data attributes take longer to load than a direct image path. In any case, it’s something I can live with (for now). Perhaps I can modify it with a CSS transition to make the image swap seamless instead of so jarring.

As an aside:

This is a common scenario for web designer/developer/engineers in the corporate world. “I can’t change the functional code, so I’ll try to improve the interface with a bit of slight of hand to make the experience less irritating.”

There were also some other small performance upgrades as well.

• Switched to serving the main typeface locally rather than via a third party.
• Changed all the image formats from JPG to WebP. (I kind of wish we could start using the JPEG XL format, but there’s not enough browser support.)

All of these updates also meant going back and updating all of last year’s content. All new images sizes and code edits for all of the 2024 images. Not difficult, just work. Good to do while watching sports or binging some other trash TV. Just a little visual/auditory ambient distraction as you tackle each little production task.

Looking Ahead

The new year has started with a burst of renewed energy and it looks like I’ll be able to clear out a ton (literally) more trash this year including more of the large scale commercial debris items. Although, it’s harder to find ground items in the winter, the lack of vegetation allows for more visibility into areas that are completely overgrown in summer. Plus, there’s no (or very little) home terraforming chores to handle. I’ve already scoped out two new areas in need of help and added them to my ongoing list. I’m mostly waiting for the ground to thaw out before starting. Here’s to making your little piece of the world a little cleaner, a little brighter and a little healthier for the future.

Please don’t litter.

View the updated photo gallery

Revisiting an old project to create a showcase for the illustrations.

FYI: Here’s the original blog post about the project.

As I build out single page sites for projects, both new and old, I remembered this emoji icon set was only really hosted over on Codepen. Yes, you could download the icon set from the original blog post and yes, you could even see the animation inline via a video or the Codepen embed, but it wasn’t exactly a showcase. I really like having these little single page projects, so naturally, this one deserved the same treatment.

View the project showcase.

Design

Color scheme is still using the Flexoki palette I’ve been obsessed with, but scaled back to be very minimal. The key color update was to adjust the icons themselves. The originals were in pure black and white. For the showcase, I removed the white backgrounds to let the warmer, paper tones through as well as adjusting the blacks to be a bit softer.

Fonts are inspired from the main site and the blog, so DIN 2014 for the body copy (condensed) and Titillium Web – Black for the headings.

The layout is also fairly true to the setup of these other projects, but with a couple of updates. I removed the main site link text subhead from the header and instead, dropped in my logo (with main site link) into the footer. This was one of those, “now that you see it, it’s the obvious solution” moments. Of course, the main site link should be in the footer and of course it should be via the logo.

Development

Nothing dramatic in terms of the layout as again the CSS grid sets up all the responsive container items. There are a few updates to the original emoji CSS as well as some new ideas incorporated. One interesting little bug was discovering that the CSS for the responsive positioning within each emoji was conflicting with the page CSS grid. At certain breakpoints, the emojis were busting out of their grid containers. Adding a couple of media queries to reduce the CSS variable used for the emoji sizing units seems to have cured the issue, but honestly, I didn’t spend a ton of time obsessing over breakpoints. I checked a few sizes based on Macbook viewports (from the awesome screensiz.es) and then moved along. It allowed me to take care of a dev chore I’ve been putting off — adding those custom viewport sizes to my Firefox dev tools. A little gift to future me when debugging sites and needing to see additional viewport sizes.

I also realized that the original animations were all set to only play once on page load. That was fine for the Codepen, but on this new page layout, the animations were often off screen meaning you might not even see the animation happen. Adding a replay icon button was a quick solution. It works great, but admittedly uses some hacky Javascript. There are definitely better ways to code it, but whatever, it works here. It also led me to learn more about the limitations of CSS animations and there’s certainly more to learn as I go forward.

The other development update circles back to the philosophy of “owning your content” which is the whole point of creating this single page in the first place. Yes, the original blog post did show some of the art, but the animated versions were all hosted on a third party service — Codepen. Now, even if you like the third party service (and I do like Codepen), there is always the chance the site will go down, get sold to venture capitalists or more recently, start stealing your content for AI. All of which are beyond my control and in the end, only serves to cause me future headaches.

Contrary to all of that of course, is the fact that I’ve also added the code to my Github account. Yes, another corporate third party site. As antithetical as that is, it doesn’t dilute or detract from the project page. It was really just an effort to start learning more about Github. I use it daily for work of course, but in a narrow fashion. Bulking up my personal Github account with more repos will (hopefully) get me to tinker and learn more about it. It’s definitely one of those powerful, yet opaque technologies.

All in all, I’m happy with the outcome and more importantly, glad to have it showcased here on my own site, in it’s own page.

View the project.

How an inside joke turned into a environmental cleanup

View the photo gallery

Background

When first moving into our house, my wife and I would find little items while digging around our yard. Antique nails from when the house was first built, marbles and toys from the kids who lived here before us, a hinge off of one of the shutters — just little things like that which I started calling “local archeology”. If we found something interesting, I would photograph it and post it on Instagram. Nothing too special and without any real plan. It was just an inside joke between us that I started using as a hash tag.

We’re lucky enough to live across the street from a state nature preserve and as we settled in to our new neighborhood, I began noticing more little things. Most notable was the trash and litter that would build up on the fence line with the preserve. Now, as I would stand around in the yard enjoying a cigar, this really started to bother me. I wanted to enjoy the expanse of forest in front of me without the eyesore of litter ruining the experience. Being of the “see a problem, solve a problem” persuasion, I started wandering across the street and picking up any bottles, cans or plastic bags that I would find along the fence line in front of our house.

Unfortunately, the more I looked beyond the fence deeper into preserve, the more trash I saw. A bit disappointing, but still rather ignorantly undaunted, I started heading into the park with a couple of five gallon buckets to pick up the trash along the roads near the house. The deeper I wandered through the trees through, the bigger the scale and magnitude of the problem became and the true beginning of this project began. What started as just picking up a stray beer can or coffee cup became pulling out large scale commercial and industrial waste from illegal dumping.

The more I looked, the further I explored, the more I found. Each time I returned from a collection hike, I would regale my wife with whatever weird piece of trash I found and if it was interesting, I would snap a photo and post it. The local archeology inside joke moved from our yard to encompass the preserve. As I discovered the serious commercial waste, my wife recommended I start documenting everything — even the mundane. The photo gallery is a summary of many (but not all) of the trash we’ve been pulling out the forest.

The Trash

Starting in March 2023, I started recording how many trash bags I packed full of litter on each hike. Here’s the break down.

Each bag has a 33 gallon capacity, so with one gallon weighing 8.33 pounds, it’s a maximum total of 275 pounds per bag for a total of 18,700 pounds or 9.35 tons of trash. In reality, every bag wasn’t always full and there’s no way I (nor the town sanitation staff) could even lift a bag that heavy. Let’s be conservative and say each bag averaged out to around 50 pounds for a total of 1.7 tons. Tons. Nearly, 3,000 pounds of trash collected into bags and removed.

And that’s just trash. We still need to factor in recycling. Every time it’s feasibly possible, I’m also sorting items into our local recycling bin for pickup. In a busy month of hiking, our 35 gallon bin is completely full and 90% of that would be pulled from the preserve. Certain weeks, I’m also including multiple smaller bags full of metal, glass and plastic. While I don’t have any hard data on the exact volume, I’d estimate a full bin about 30 times in 2023 for around 8,700 pounds or 4.35 tons of recycling removed from the park. 4.35 tons of trash that was just rotting in the woods.

Beyond the little stuff you can pick up and put in a bag, there’s also the big stuff. All the larger items that need to be dragged out, picked up by the city or taken to the county dump. Here’s a (partial) list of some of those big ticket items.

• Gas stove (2)
• Car frame
• Car hood
• Car rear differential
• Car seat (2)
• Window frame (2)
• Cast iron bath tub
• Cast iron sink
• Car batteries (7)
• Lawnmower
• Exercise bicycle
• Oil drum (5)
• Planter
• Tires (12)
• Tractor engine
• Fencing
• Pipes
• Cast iron tractor wheels (2)

It’s not until you start to see the totality of the situation that you begin to understand the level of damage. As I said, the numbers aren’t precise, but the pictures speak for themselves and I’m continually astounded (and dismayed) by what I find. I could go on and on about all the little weird things I’ve found.

The Gallery

Despite posting many photos of the smaller interesting finds on Instagram, I realized that many more were filling up my phone and hard drive. Hence the idea for a gallery to really show the effort in full. With only a couple of exceptions from 2022, the photos are all from 2023 and for the most part in chronological order.

The Design

The art direction doesn’t stray far from the general template I’ve been using recently for other single page projects. A header linking a back to the blog post, the main body of content and a footer with links off to other projects. From there, it’s a matter of styling and customization to fit the project theme.

The general inspiration comes from some of the archeology publications and sites. Sadly, they weren’t very inspiring as they’re designs were often outdated. About the most I could take from their pages was the serif headline, sans serif body copy pairing which, of course, isn’t very unique.

The color palette is Flexoki which is my new favorite as it speaks to my experience in print graphic design. The muted colors are warm and balanced. Admittedly, the design doesn’t take advantage of the full palette only using a few of the colors. It does use both light and dark themes depending on your settings. I’m fairly sure I’ll use the palette in future projects to really explore the full color set to see how they work across different design themes.

The fonts are Playfair Display for the headline (served locally) and Gibson for the body (served via Adobe). I really do love a heavyweight serif face and Playfair really looks great to convey a level of academic prestige (even if it’s a false notion). Gibson is used more sparingly as the gallery doesn’t really have much text. Again, the heavyweight version of the face are just fantastic and I really like how it looks for the subheads.

The Code

Like with the design, the basic template is the same as other recent projects using a CSS grid for the responsive layout. The only difference this time was to experiment with some column/row spans to mimic a masonry effect and showcase larger versions of some of the more interesting finds. It’s not a true masonry grid, but at certain viewport sizes, all the items nest and align nicely. At other sizes, gaps do appear, but that’s expected. There are Javascript libraries to achieve that true masonry effect, but here, where all the photos are the same aspect ratio, the JS overhead and complexity didn’t seem worth it.

Each photo has the opacity dimmed a little which normalizes on hover. This lets the photos blend a bit more with the color palette. On mouseover, they transition to appearing brighter and more rich which gives them impact. The photos can also be clicked on to open larger in a modal window. I’m using the a11y dialog script for the modal behavior. I experimented with adding a keyboard activated previous/next behavior to the modal, but kept getting the array numbering messed up in my Javascript, so I left it out. An update for another day or another project.

The Impact

It’s a fair question to ask: Is this work having a positive or negative impact on the preserve? I’d argue that it’s having a positive impact. I work from the motto of yes, there may be some short term disruption, but it results in long term benefits. Similar to the idea of “leave no trace,” I work to repair any soil disturbance and contrary to the “archeology” title, there is no digging of any kind. Likewise, I rotate the areas I work in over days and weeks to allow the wildlife to reclaim the space. I’m also time limiting my work, so that I’m not in the area for more than an hour or two at most.

There is, of course, also an impact on me. I love walking in the woods and coming upon a new debris field or trash pile can turn my emotions upside down. Sometimes it makes me angry and frustrated. Other times, just sad and disappointed. Sometimes, its just too much and I can’t handle tackling an area as it just feels overwhelming. I’m starting to realize I need to work on a better balance to approach the work only when I’m in the right state of mind. On the positive side, there’s is a sense of pride when I’m able to remove a giant piece of junk from the preserve. I’m also stubborn, so I keep going back for more. It’s almost like to trying to finish a video game quest as it taps into your competitive nature. Maybe one day, I’ll come back from a walk with an empty bucket.

The Future

One of things I’ve come to notice is that the forest wants to get rid of the trash. It wants to be healed. Bottles and cans seem to be pushed up from the soil. Storms, rain, snow and animals uncover items bringing them to the surface. I can pick an area clean only to come back a month later to find more. I have to remind myself all the time that I’m not going to find it all today.

Will I continue? Yeah, most likely. There are three areas of commercial dumping (one in a federally protected wetlands) that I haven’t tackled yet. I know those areas will weigh on my mind if I don’t try to clean them up. I’m not going to stop walking in the woods and the benefits of doing that (exercise, fresh air, quiet) make the potential emotional turmoil worth it. I do get to see amazing things on almost every walk and I’m now starting to learn (and report) more on the ecology for my wife and her non-profit.

Finally, a thank you and shout out to the local sanitation department who has unwittingly been helping with this effort. I can only imagine what they’re thinking when the roll up to our house and see what I’ve put out for collection. Same goes for the county hazardous materials recovery facility. They’re always friendly, helpful and accommodating when I bring in a truck load of crazy stuff.

Please don’t litter.

View the photo gallery

Redrawing the original set of civil defense badges from the United States Civil Defense Corps created in the 1940s.

View the project page.

As has become apparent over the last few years (and even decades and centuries before), we are each responsible for our own safety as well as the safety of our communities. It seems this is a lesson we forget and relearn in a cycle of storms, accidents and tragedies. This concept of mutual aid is once again in vogue and becoming more prominent as we begin to see epic environmental changes occurring in our own neighborhoods. When “once in 100 year” events start happening every year, we’ll need to pool our resources and efforts to survive the floods, droughts, storms, fires and freezes.

Luckily, we’ve done this before. During WWI, the U.S. government started what would later become known as the Civilian Defense Corps.

Reading up on the history, I was excited to see that each group had their own badge and more importantly — they were awesome. Really great, simple yet functional pieces of graphic design united in theme and purpose. Unfortunately, as I searched further, I couldn’t find much about the logos nor could I find the badges themselves. So I set out to redrawn them based on an original document from the period. And that inspiration provided another opportunity to work on a little web design and development to showcase the badges.

The illustrations

Redrawing the badges looked difficult at first, but creating a base template for the logo with the appropriate shapes and colors streamlined the process. Are the final results 100% identical to the originals? No, but they are very close and faithful. I didn’t make any creative or editorial decisions (suppressing all my art director experience — I really wanted to realign each). Each was then exported to SVG and optimized for the web.

Design and development

Now that I’ve got a few of these one off pages created, the ramp up process is much quicker. It’s not quite a template, but it is a starter pack of sorts. The Rorsch project was a great starting point given the retro vintage styles used. But…I didn’t want that much retro. I didn’t need the super distressed paper, but did still want the look and feel of that old manual. I pulled a sample of the paper from the manual to set as a background-image and then applied a background-blend-mode of multiply against the base background color. I did the same for one of the standard grit textures I have on file, but with a different blend mode. Being able to set multiple background images via CSS is a real game changer in terms of design possibilities. I’ve used the same technique, but with gradients, in other projects to draw complex backgrounds instead of using a raster file.

The big change for this project was to try out using an SVG filter to add a layer of noise over the entire page. I tried a couple of different ways to get it to work properly and finally ended up putting the SVG filter into the CSS as a background image and then setting the mix-blend-mode to hard-light. I dropped the CSS class onto the html element so that it covered the entire page. Along with the fractal noise distortion, the hard light mode did change the colors a bit, but it works as it almost de-saturates them a bit enhancing the retro style.

For the type, I wanted to match the styles in the PDF source, but…I couldn’t go as far as to use that cursive subhead font. It was just too much. The sans serif headers are Alternate Gothic to get that compressed letter width. The serif is FF Seria and despite only being used once for the intro text, I still wanted to try to match the style of the manual. Both are served via Adobe fonts which isn’t ideal from a performance standpoint, but it is convenient. I do wish Adobe would come up with a self-hosting option for customers.

All the SVG files are loaded via a standard img tag with a figure tag which allows adding a figcaption tag inside to drop in the badge name.

Packaging up the set of SVG files for a download was the final step. Hopefully, we don’t need them in the future, but it’s always a good idea to be prepared!

View the project page