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.

Update: I’ve revisited the project and created a showcase for the icons.

There’s a natural ebb and flow to projects. An initial burst of inspiration creating momentum that slowly fades as the hard work and all too often, the insecurity sets in. This is one of those projects.

Originally drawn in 2017, it’s hard to recall the exact source of inspiration, but in hindsight, they seem a reaction to both the political landscape at the time as well as the sugar saturation of skeuomorphism in the standard emoji world. Like in my symbology project, these are a study in the reduction of the extraneous to reveal the core.

I think the other goal, given their simplicity, was always to animate them. The only question, and this is where the project ebb started, was how to best create the animation. And so, what started out as an excuse to learn new software applications — a tedious task which sucked any joy out of the project via frustration — led to stagnation. It was only recently when my web work sparked the idea of animating these via CSS. Now, there was still a ton of learning to do with this CSS only approach, but at least I had a stronger foundation having done it before with small things and these icons are in essence, a gr0up of small things.

Here’s a quick video demo of the animation.

And for those more inclined, here’s a Codepen with all the HTML/CSS.

See the Pen
Unsmilely Icon #1 by strongest (@strongest)
on CodePen.

The full collection on Codepen is available here: https://codepen.io/collection/XjoBzV

Or download the complete set to get the images.