What’s next?

The daily creative accountability challenge is nearly over, and it’s been quite an experience! I just wanted to take some time to do a little wrap-up, talk about what went well and what was difficult, and propose something for the next chapter.

I consider that I’ve reached the initial goal that I’ve set out to achieve (1 post a day on average during the challenge period) but the results were not evenly distributed. Some days I didn’t post anything. Some days 2 posts came out. Some posts were incredibly long and content-rich. And some were sparsely furnished.

So what went well?

  • The blog is running again, and I intend to keep it that way.
  • I got a bit of drawing into the mix.
  • The project forced me to get more organized and audit everything that had been left unfinished.
  • I definitely cut through a lot of bullshit excuses that I had (the challenge is called Break Up With Your Bullshit after all)
  • It was inspiring to see what others were doing during the challenge (mostly through the private Facebook group)

In the to be improved upon department:

  • The production rate (1 post a day) was not sustainable. Not even close. In order for a daily challenge to succeed you need to be able to arrange your life to set enough time aside every day, and also have some sort of back-up plan or pressure-release in place for the days that aren’t so easy. I was already going through some major life changes before the challenge started, so from the get-go I wouldn’t say my tank was full, energy wise.
  • Related to the above point: I can be really stubborn about achieving some of the goals I set, to the point of sacrificing a lot of sleep to “make it work”. I’m seriously considering doing a temporary pivot with the blog just to address this issue, that’s how important I think it is.
  • I didn’t program anything. Not even a tiny codepen 😔To be fair, I don’t think the sample is big enough for me to say this is a problem as such, but I should I’m going to make it a priority to dive back into some JavaScript in the short term.
  • The daily format was not conducive to the core intent. Posting something daily is a lot of overhead, and doesn’t leave a lot of space for actually advancing my projects. There is value to doing regular check-ins for accountability, but the ratio has to be just right.
  • By the end of it (and right now 😭) I was squeaking out posts at like, 1:00am, and not posting about it on Twitter because everyone’s asleep. Just… Why?????

Coming soon, to a blog near you (this one!):

I think it’s obvious that I won’t be maintaining the daily blog format. Going forward I’m going to commit to a weekly one, with some extra content that might show up if I’m in the mood for it. The next major post will be on Nov. 28, because I am rewarding myself with a break. I’ll also need to think about how I’ll bake accountability structures into the mix, and what changes that might mean for the blog. The fact that it’s just one giant stream of linear content just reinforces the need for a redesign.

So yeah, that’s it for this very intensive chapter of the blog, and I’m looking forward to sharing the next one with everyone who’s reading ☺️

(If you see any typos in this it’s because I published without proofreading in order to get to bed sooner 😬)

Icebergs🧊

The initial goal with the blog reboot was to make an average of 1 post a day, for the first 2 weeks, and adjust the rhythm afterwards. This was supposed to be an input goal, meaning that the end result isn’t what’s important.

A blog post, at least in a daily format, is not a very good input goal. It’s an iceberg; you don’t know exactly how big it’s going to be until you start writing, and the things I’m writing about are also icebergs. As a result, some posts took well over 4 hours, which anyone working full-time can’t sustain daily without cutting corners somewhere.

And that somewhere has been sleep.

Uh oh. 😳

I didn’t move any of my personal projects forward today, and that’s ok. It would be disingenuous to paint a rosy picture where every day is perfect, and I don’t think that kind of content helps anyone. Anyway, off to bed! 😴

Tungsten day 2

I didn’t make a ton of progress today, but I still want to document 📋
The colour palette got some orange added, to simulate that big warm glow that incandescent bulbs make.

And I made some super rough filaments, with a few nested layers of glow to make that white-hot effect. These will be custom SVGs, but the glass parts of the bulb should be fairly doable in CSS.

Tomorrow: the bulbs 😬. Not gonna’ lie, I’m not entirely sure how I’ll pull that off to make a complete bulb. The reflections on the glass will be tough!

Monday progress

Finally, some progress!

Today I spent some time on steel! 🏗 First off, I made a mini-moodboard to set the tone of what I’m going for.

Next, I started drawing rectangles, then adding shadows/highlights using gradients and masks, and eventually making the different parts into components. Usually when I design something I also end up creating a bunch of discarded ideas and dead-ends in my wake, but today was fairly straightforward.

I made a quick diagram to show the relationships between the different components I made in Figma. This might seem overly complicated, but if I want to change the shape of the bolts and/or make some new plates with more or less bolts, it would be easy. It’s also closer to how I’ll be writing my CSS.

I’m pretty proud of the end result! I might add some very subtle textures for realism, but It’ll really depend on how prominent I end up making steel in my final layout.

Side note: STOP WHINING, WordPress! 😫 PNGs weren’t born yesterday 🙄

The Design System Name Generator 🏭

A while back, at work, I had a meeting with the rest of the design team about the design system that we were trying to put in place. Without going into details about what a design system is right now, in that meeting we touched on the idea of naming our system. Most of the really cool systems also have cool names. For instance, Bulb, a British electrical company, has an amazing one called Solar, and Shopify’s system is called Polaris.

A good name is one that’s aligned with your system’s (and by extension your designers’) values. Polaris is the north star, which sailors and explorers used to guide them when they were lost, and this is likely something that resonated with Shopify’s design team. When I got out of that work meeting, I started to think of what values our team held, and what words might be associated with those values. It wasn’t long before my devsigner brain kicked in and came up with THIS sketch:

If you associate values to random words, you can theoretically generate a good design system name based on those values. “ice cream” would register higher under the “fun” value than, say, “broccoli.” So if your design team valued “fun”, ice cream would come out the winner, but if they valued “health” or something like that, broccoli would win. This is a pretty simple example, but it can also work with multiple values, or even ranked values!

I don’t know why, but my brain just imagined a big hulking steam-powered machine that took in values on one end and spit out words on the other! After sketching this, I immediately bought a good domain name, and in the following weeks I set to work making the drawing a reality. I set up a database in Firebase, and hosted all of the frontend on Github pages, and eventually ended up with this:

I also ended up tagging over 500 different words by hand using the Tagging Machine:

I actually came very close to publishing this! I just had another 200 or so words left to tag before I felt ready to put this wacky contraption into the world, and I’d even written a whole (unpublished) blog post detailing everything about the project. For some reason I never did that.

If you want, you can try it out, at designsystem.name , but taking a step back now, I’d like to take the design of this silly idea just a little bit further before doing an official launch. In terms of complexity, this is definitely in the top 3 of all the projects I’ve programmed, but I also want it to look good since it’s made for an audience of designers. I kind of just styled everything on the fly, directly in the code editor, and that’s not a very good way to design something.

So I made a new Figma project where I’m really starting from scratch with the design process. I made a mood board with a bunch of stolen pictures, I turned that into a colour palette, and I’ve been doing a materials study. I’m particularly proud of my polished-concrete texture. One of the great things about designing in Figma is that I know that everything I do can be translated into code, as long as I’m willing to put in the time to push those pixels with CSS and sweat the details.

The concrete material study. I looked at a lot of photos of polished concrete floors to figure out how the light bounces off the surface, and I’m pretty happy with the result! The window reflections should be more distorted, but Figma doesn’t have the tools for that right now.
It’ll be easy in CSS though.

I also found my dream loft, and later discovered that it was actually just a 3d render, and doesn’t exist in the real world 🙃 But like, #goals amirite?

I have a few more material studies left (tungsten, steel, and refining the aluminium and brick studies I started), then I’ll move on to components (all the buttons and levers) and then finally a responsive layout. It’s a lot of fun figuring out how to paint somewhat realistic materials with what will eventually be code.

This post is just a status update, but the next ones will be real, fresh design (and likely much shorter! 😉). Steel beams, here I come! 🏗

Next steps 👣

Ok, so I wrote a few posts, and drew a few things, but I havent programmed or designed anything 😱! All I’ve been doing is talking about things I’ve done or that I plan on doing, and that sort of goes against the whole purpose of this blog reboot. Anyway, I feel like I need to make a plan, even if it’s a simple one.

So for the next week, it’s going to be all about the Design System Name Generator. I’ll start with a deep dive about where I’m at with the project, then spend a fixed amount of time daily (about an hour) moving some of the design forward, and journal my progress. If I make it to the programming part, great, but I’m not going to rush the process.

See you tomorrow! 👋

CSS Hoothoot 🦉

Last winter, I was a tech mentor for Technovation, a non-profit that teaches girls to code and build apps. Being a mentor got me thinking a lot about motivation and learning, and how we can better adapt resources to a given audience.

So, One of the classic front-end projects used in workshops is a to-do list app. It can work with kids. Most of them will follow along, and enjoy what they’re building, especially if coding is new to them and they can experience the wow factor of pushing pixels on the screen. That being said, you’ll still lose some of them along the way. Kids usually don’t make to-do lists for fun.

When my group was learning HTML and CSS, I ended up making some fun practice projects that they could put together without feeling constrained creatively. One of the projects was to make their favourite Pokémon using CSS! It made coding feel more like drawing or painting (which it kind of is), so it was a lot more engaging. If you look up Pikachu on Codepen, you’ll find a ton of variety. Some people are trying to be as close to the original as possible, while others made adorable works in their own style, like this floating Pikachu!

I’m a big proponent of creative coding, and I don’t think fun projects should be reserved only for kids. I personally find it a lot more engaging to learn in this way. Yes, I might have a goal to improve some of my technical skills, but why not have some fun while I’m at it?

I ended up making Hoothoot in CSS, because I like the cute and round Pokémon ☺️It was challenging getting all the positioning right, but I’m pretty happy with the results. The gears around it’s eyes can be rotated too, so I might also turn this into a clock at some point 😄

See the Pen Hoothoot by Jonathan Lahue (@JCLaHoot) on CodePen.

Damage Report!

So here’s the situation: as I said in the last post, I have a bit of a problem where I start more things than I finish. Today I’m going to air out the dirty laundry, so to speak, and do an audit of sorts. This is just going to be a list of all the projects that I have on the go, along with their status and a short description. The only criteria for inclusion is that it can’t be something that I find boring, and it has to last at least a full day.

🏭 Design System Name Generator

What: A tool that generates a name for a design system based on the values that are important to you and your team. It’s supposed to have the look and feel of a big ol’ steam-powered contraption! 🏭
Status: It works, but the design is ugly (I programmed it directly without having a real design phase). The redesign is already in progress!

🏷 Word Tagging Machine

What: A sister project for the Design System Name Generator. It’s a web-app that lets you visually rank different words based on the values it makes you think of. For example, the word “hug” would probably rank highly in kindness. It uses the same core UI as the name generator.
Status: It works, but the design is ugly. Also there’s like 200 words in the database that need to be tagged, and that’s kind of time-consuming. This will be released alongside the name generator.

👨‍💻 Devsigner Explorable Explanation

What: Nicky Case started a movement of sorts around something called explorable explanations. Essentially it’s a way to tell a story or teach something that’s highly interactive, and leverages the power of tech. I wanted people to be able to experience what it actually means to be a devsigner, so I came up with a scenario with lots of fun animations and interactions based on the Explorables format. I also wanted to challenge myself to doing everything in pure Javascript. This was a mistake.
Status: The script is written (though likely a bit outdated), and the programming is probably about 40% done. I over-estimated the complexity of making complex animations and interactions purely using Javascript. It works, but it’s extremely labour-intensive, and I think I should improve my dev skills before going further with the initial idea. The design could use some more polish as well.

🧭 Compass App

What: This is the project that got me into the tech space in the first place. Compass is a quantified-self app whose goal is to help you find balance in your life. At it’s core, the app is just a glanceable dashboard that lets you visualise anything that you have data on. If I can get it to the level I want it to be, it will allow you to offload nearly any kind of thought-process that requires sifting through lots of data. There’s some really cool systems-design and architecture challenges in this project, as well as some big UX ones.
Status: The Android version of the app still works (somehow) but it’s painfully outdated and ugly. Also, I haven’t programmed any Java in 4 years. My plan is to start from scratch and make a web version. There is no need to make a native app for what I want to do.

⚛️ React for Designers

What: A design focused intro-level React workshop that I made for some co-workers and never ended up using.
Status: This is already built! I literally just have to find some people who are interested in the workshop, and see if the format is effective. I could publish this right now!

🏠 Loft Design Showcase

What: I moved into a huge loft last year, and as a result faced a very big interior design challenge. before the move, I ended up learning SketchUp, and modelled the entire place in 3D. I consider it to be one of my most successful design projects. Sadly, I no longer live there, but the place still inspires me to this day.
Status: The SketchUp file is done, and I have lots of photos + video of the finished result. I just need to write up something about it!

🦆 Quackoverflow.com Redesign

What: Have you heard of rubber duck debugging? What about Stack overflow? This site is just a rubber duck that squeeks. That is all. Also, stackoverflow ended up stealing this idea for April Fool’s one year! 😱
Status: Everything is done. The new design has been online for months. I just need to write about it!

🚇 STM network simulator

What: Basically, I just want to prove some STM social-media managers wrong. They claim, after I complained numerous times on Twitter about missing my transfer by half a second, that it is impossible to synchronise the Montreal metro trains to optimize for transfers. They are wrong, and I am willing to go to great lengths to prove it.
Status: I made a powerpoint for a work social event where I proved that my theory has merit, and it’s definitely possible to increase the number of seamless transfers within the metro network.

🎭 Eevee for Vendetta Shirt

What: I made a drawing a few years ago and turned it into a cool shirt. My shop got taken down because Spreadshirt doesn’t understand fair-use.
Status: I need to find the original graphic and a service that will do print-on-demand. Then write about it!

🧠 Front-end Practice Projects

What: When I was mentoring for Technovation, I came up with some little open-ended projects to help the girls flex their coding muscles in fun and creative ways. Rather than copying tutorials, it’s a lot more engaging for kids to do things like “make a mini-game” or “draw your favourite character” and figure out how to do it along the way. The ideas I came up with are also great for anyone learning fron-end web development.
Status: The first set of practice projects and starting instructions are already made! What’s missing is some example code, to 1. test out the concepts that haven’t been tested yet, and 2. provide hints for anyone who’s lost.

📆 100 days of ____ challenge

What: 100 day challenges are a lot of fun, and you learn a lot. I’d love to do the 100 days of code. 100 Days of design could be interesting too, though my day-job is already pretty design-heavy. This could work well with drawing too
Status: Just an idea for now.

🦉 CSS Hoothoot

What: This is one of the frontend practice projects: “make your favourite Pokemon in CSS”.
Status: It’s done, and on my Codepen. Once again, I need to write about it!

📖 Blog Redesign + Restructuring

What: The blog is currently just a WordPress theme that was OK-I-Guess, and a custom colour palette that I came up with. I’d like to redesign the whole blog, and restructure confusedretriever.com to include 4 main sections: the blog, a portfolio, hosted projects, and a contact page. I’d also like to ditch WordPress if I can, because it’s a pain to deal with.
Status: I’m in the process of redesigning it. I’ve already come up with the concept and the core of the artistic direction. I’m being picky about some interactive elements, so it’s making it a pretty challenging design.

🏋️‍♂️ Lose It! App Redesign

What: Every few weeks I tweet Lose It!’s social media team to make some sort of product improvement suggestion. At this point it would be more effective to just do a design case-study in Figma and send it to them. Lose It! is a food tracking app that I use to track macros and balance the fact that I eat excessive amounts of OREOs.
Status: It’s just an idea at this point.

😻 Catbic-bezier

What: Ok, this is going to sound dumb, but I noticed that my cat’s ears are the most perfect bezier curves! So I figured, why not make a site where you upload a photo of your cat, and using some handles or sliders or whatever, you mould a cubic-bezier to the shape of one of your cat’s ears! Then it outputs the value of the catbic-bezier, which you can use in your CSS!
Status: Just an idea, but a very fun one!

🌿 Eco-Brutalism Study

What: I had this oddly specific architecture dream, where my brain came up with the idea for a building that I now feel compelled to design. There’s a square concrete staircase that spirals up at least 3 floors, a giant skylight at the top, and lots of plants. I want to live there.
Status: I made a first sketch of this fictitious place that I will live in one day… mostly just to capture the memory of the dream so that I can build on it later.

🔺 Logike Redesign

What: Logike is a puzzle game that requires logic to solve. I used this project to learn React, and I’m really proud of the JavaScript I wrote for it. That being said, it’s a code project, and it never had a proper design phase. I want to make something that’s significantly more polished and that really showcases my devsign skillset.
Status: It’s available online now. I already wrote about it extensively. I haven’t started a redesign.

🏡 Apartment Design

What: Another interior design project, but this time it’s for where I live now! Same idea: I’m going to make a 3D model, design everything, then make it happen 🙌
Status: Already started the 3D modelling and most of the important furniture has been purchased.

💪 Lifting Bench Restoration

What: One of the old tenants for my new apartment left me a nice gift in the storage locker: A Proform 738 workout bench, along with 260lbs of plates! This bench can be inclined, declined, or flat. There’s a rack to bench-press, a preacher curl pad, an attachment to do leg extensions or leg-curls and maybe even seated-calf-raises by the looks of it! The catch? The storage locker floor is somewhat damp, and some of the metal pieces were left directly on the floor. As a result, some of them are quite rusty, though structurally intact. I’ve made it my mission to bring this bench back to life, and then get totally ripped 💪
Status: I bought some wire brush attachements for my drill and scrubbed off most of the rust. Next I need to melt off the rest with vinegar, scrub it down again, get some rust paint to cover the bare metal, and maybe order some new foam pads because they still smell like basement.

And that is it! Those are all the things I have on the go in some way or another. In the process of writing this, I learned that I’ve kept a surprising amount of creative projects to myself, and I’m not entirely sure why. There’s definitely something to look into there 🤔