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 ๐Ÿค”

New Beginnings ๐ŸŒฑ

Hi!

Welcome to my tech blog!

For those of you who’ve been here before, welcome back โ˜บ๏ธ

I originally started this blog to document my journey into the wild world that is the tech space ๐Ÿš€It was a lot of fun, and I loved coming up with ideas for new posts, but at some point (about 2 years ago) life got busy and I stopped writing. I was still spending time in cafes, working on different devsign projects, but it wasn’t quite the same as when I was publishing regular updates.

A couple very different stars aligned in the last months to put me back on the right track.

  • ๐Ÿ“ฆI moved, to an inspiring and cozy apartment, reminiscent of the place I lived when I started the blog. Like clockwork, moving always makes me question my life choices, and introspect in ways that I’m not used to. I also started taking long walks! ๐Ÿฅพ
  • ๐Ÿ’”I’m recently single. At first I thought this was an off-topic thing to mention, but as a result I now have way more time on my hands. This of course means more introspection, and just generally being able to reorganize my life in a way that focusses fully on myself for a while.
  • ๐ŸMichelle Akin๐Ÿฆก, my life coach from years ago when I was still in college, started a new accountability program around creative projects. Well, guess who has some creative projects that just happen to be stalled? ๐Ÿ˜„

As a result of all that, but especially the third point, I’m now rebooting the blog, with the objective of writing a post a day, for the next 13 days. Short-term, my primary goal is to revive a vehicle to keep my projects moving. The cafes are closed and will likely stay that way for quite some time. I need to build new, more resilient habits.

I had a hard time picking a creative project for Michelle’s program, but in the end I looked back on some planning I did last fall for this year. My overarching goal for 2020 was, and I quote:

Finish what you’ve started. This gives future commitments and goals more power.

Hahahahhahahahaha :’) Goals in 2020? How cute ๐Ÿ˜‚

But more seriously, I have this problem where I start bringing new ideas to life before wrapping up the old ones. It’s a common form of self-sabotage, and I think my life will be significantly better once I overcome it. Instead of just picking one half-baked project from the bin-of-partially-executed-ideas, I’d rather try to fix the issues that are causing that bin to fill in the first place.

I want to use this blog as a medium for some of my different creative outlets, namely design, programming, and drawing. The bulk of the content will be devsign based, with some of my illustrations sprinkled into the mix. Making content means emptying that idea bin. ๐Ÿ™Œ

My secondary goalis to show the more human side of the world of tech. I think it’s important to break the stereotype of the “nerd in the basement who stares at a screen all day”. The people in this industry who I respect the most are, above all, people. They have lives, hobbies, feelings, and passions, and they aren’t afraid to let that show because it’s not “on brand” or whatever.

I don’t think that daily blogging is sustainable in the long run, but for the sake of this challenge I’m going to jump-start things, then switch gears to a more reasonable pace later โšก

So yeah, stay tuned, there’s going to be something new here tomorrow!

sprout emerging from the ground