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
coloured shapes

Meet Logike 🔵🔺🔶

This fall, I started building a puzzle app called Logike. It’s a game that focuses on building logic skills, and from a programming and design perspective, it’s also the most challenging project I’ve ever brought to fruition. There’s a lot to talk about, so I broke it down into a few parts 😉

TLDR: If you just want to try Logike, you can here!

The story

With few exceptions, most of the memories from when I was very young are faint at best. One such exception relates to when I was in Kindergarten. We had a lot of “free play” time, as you do when you’re 5 years old, and during that time we could chose from a whole bunch of different activities. Actual examples include: making necklaces with beads, taking apart old broken motherboards using pliers and hammers, or in the more educational department, puzzle games to develop logic skills.

My favourite game involved placing coloured shapes on a grid in order to satisfy a logical conditions on the supplied cards. They’d start out really easy and get progressively more difficult, to the point where they were no longer feasible for the average 5 year old. It was a lot like Sudoku, but the difference was that this game mixed and matched and layered many different and nuanced types of logic. Sudoku games can be solved with the same algorithm each time, whereas the one to solve this game was far more complex and varied.

child playing with legos

Here’s a picture of a kid playing with legos, which will be replaced with a picture of ME playing with legos, once my mom finds it 😂  
photo by Kelly Sikkema

Fast forward twenty years and I’m looking for a project idea to help me learn front-end. I don’t remember what made me think of the puzzle game I played as a kid, but it popped into my mind and I went with it! No-one seemed to have digitized the game, and I realized that through code there were ways to take it even further.

What it looks like

There are two major things that the app lets you do: solve puzzles, and build them. Lets start with the part where the fun happens!

Solving Puzzles

an easy puzzle

Logike’s tutorial puzzle.

Solving puzzles is pretty straightforward: each puzzle consists of a set of logical conditions, and it’s up to you to move coloured blocks onto the board so that all of the conditions will be true.

However, the conditions can become quite complex

The logical conditions for a moderately difficult puzzle.

The logical conditions for a moderately difficult puzzle.

Or downright difficult, like this one…

The logical conditions for a difficult puzzle

The logical conditions for a difficult puzzle

Instead of telling you where specific entities (the coloured shapes in this case) need to be, this difficult puzzle only tells you about entity properties (colours, shapes) that could apply to a slew of different entities!

For now, the logical conditions are:

  • Some entity or property is here.
  • Some entity or property is not here.
  • Some entity or property could be here.
  • Some entity or property is/isn’t/could be here relative to some other entity or property.

Additionally, the grids for the logical conditions can also be smaller than the puzzle board itself, meaning that a 2×2 condition could theoretically apply to one of 4 places of a 3×3 board.

Building Puzzles

As for the puzzle builder, it’s a lot less mature than the rest of Logike, but functionally it does what it needs to. Initially, I wrote all the puzzles by hand in one massive JavaScript class. It was great for prototyping, but it wasn’t ideal for production, so I refactored all of the puzzles into JSON files. This is what one logical condition looks like in JSON now:

one logical condition, in JSON

one logical condition, in JSON

Imagine writing dozens of chunks of code like this by hand, and trying to visualize a puzzle with them. It just isn’t pleasant, so I made a GUI (Graphical User Interface) that writes the JSON for you! 🎉

The builder puzzle

The puzzle builder.

I talked about entities and properties a bit earlier, but it’s really in the builder that they start to shine! By abstracting the different parts of the puzzles above, I realized that the code I was writing could be applied to far more than just coloured shapes.

In the first part of the builder, you can chose a different set of entities than the classic shapes, and you get to chose the size of the puzzle as well! Technically, there’s no maximum size for the puzzle, but it’s currently limited to a 5×5 grid until I smooth out the design to accommodate larger ones.

The logical condition builder.

The logical condition builder, being used with the “animals” entity set.

The most important part of the builder is the part that writes the logical conditions. Each one is comprised of a selector (the entity or property you’re referring to in the logical condition) and a grid filled with conditions. The tool lets you visually build each grid, and see the puzzle as it will appear when someone’s trying to solve it.

When you’re done building a puzzle, it’s time to name it and download it!

When you’re done, you come up with a clever name, rank the difficulty of the puzzle, and the download the resulting JSON. There’s currently no user accounts, or database to deal with storing user-generated puzzles, but this is a good first step. A teacher could technically build a bunch of puzzles and send them to their students, who can load them up on the puzzle selection screen.

Under the hood

In the past, I would go into a programming project head-first, and start coding immediately. While this would be great for my short term motivation (features being built, and fast), in the long run it led to depressingly messy code, and made for unsustainable projects. Logike was the first project where I actually took some time to work on the architecture, and boy did that pay off!

Part of the architecture for Logike.

Part of the architecture for Logike.

This planning allowed me to build the app in the most efficient way possible, given my current skill level. It also made it possible to shrink my puzzle files down to sizes measurable in bytes!

The whole thing is built in React, so it’s a mix of HTML, CSS, and JavaScript. Additionally, anything that isn’t part of the core application logic is JSON. All of this lives on a free Heroku server, at least for now.

As far as technologies go, there’s not much fancy programming witchcraft going on, but that doesn’t mean that the project itself is simple. There were a bunch of technical challenges that had very little to do with the tech used, the biggest one was making the code sufficiently generic.

I could have taken a bunch of shortcuts and just hard-coded everything based on the coloured shapes and left it at that, but then I’d be missing out on the chance to make a much more powerful too. So I ended up with a bunch of classes like this one:

// an Entity is the main element that is manipulated in the puzzle.
// it has properties, a name based on the properties,
// a common name which may differ from the name, and an image
// ex: red square, potato, JK Rowling

class Entity {
    constructor(commonName, properties, img) {
        this.properties = properties; // an array;
        this.name = Object.values(properties.map((property) => {
                return property.name
            }
        )).join("-");
        this.commonName = commonName; // for display purposes ONLY
        this.img = img;
    }
}

export default Entity;

With all this abstraction, consistent and meaningful naming becomes super important, and at a certain point collisions can occur between your app’s logic and the programming language’s reserved keywords and pattern names.

  • Entities could have been called objects, but Object is a pretty important keyword that’s part of JavaScript.
  • Properties could have been called parameters, or attributes, but parameters are found in JavaScript functions, and attributes are found in HTML tags. Technically, in React, props stands for properties, but no-one writes it out the long way, even in their code, so this was the safer option.
  • Selectors are used in CSS, but at least they behave the exact same way in Logike’s logical conditions, and it wasn’t a reserved keyword.

The second biggest challenge was validating the pure logic found in the puzzles.

This is a bit of code that validates whether an individual logic cell in the logical condition is being respected.

// returns false if the selector is found in a place it's not supposed to be. Otherwise returns true
    const validateLogicCell = (selector, ansCell, logicCell) => {

        var matchesSelector = false;
        // checks to see if the answer matches the selector
        if (selector === ansCell) {
            matchesSelector = true;
        } else if (selectorIsPartial(selector, entities)
            &&
            ansCell.includes(selector)
        ) {
            matchesSelector = true;
        }

        var selectorCanBeHere = false;
        if (logicCell == null || logicCell === "empty") {
            selectorCanBeHere = true;
        }
        var selectorIsHere = false;
        if (logicCell === true) {
            selectorIsHere = true;
        }

        if ((matchesSelector
                &&
                (selectorCanBeHere || selectorIsHere))
            // matches selector in specific cell, therefore the cell needs to contain true or null
            ||
            (!matchesSelector
                &&
                (!selectorIsHere || typeof logicCell === "string")))
        // doesn't match selector, therefore the cell must contain false or another selector
        {
            return true;
        }
        else {
            return false;
        }
    };

Does your head hurt? 😂

Validating that a blue circle is in the top-right cell is easy. Validating that and every other thing I’ve mentioned is a whole other story, and likely makes a terrifying looking flowchart!

How to try it

The puzzle app lives at logike.confusedretriever.com and eventually at logike.app once I figure out how SSL works.

It works on desktop or mobile, though there’s some features that are restricted in the puzzle builder on iOS for the moment.

Let me know what you think, and if you make some cool puzzles be sure to share them with me! 😄

What’s next

What I’ve made so far is just the tip of the iceberg. I see a lot of potential with Logike, so I’d like to keep developing it.

Here’s the current to-do list, more or less in order:

  • Puzzle Builder design improvements
  • enable editing logical conditions
  • enable reordering logical conditions
  • Persistent save state after end of browser session (accounts + database?, Cookie?)
  • Ability to share puzzles without downloading/uploading.
  • JSON V2 (remove ALL duplicate data and add IDs to entities and properties instead)
  • more robust entity validation (unique names that aren’t based on properties)
  • Creating new puzzles
  • Tweaking old puzzles
  • improving entity set images
  • Fixing nasty iOS bugs
  • Fixing toast jitters
  • Improve test suite
  • Validation improvements (duplicate entities, more robust property selection)
  • Puzzle builder validation (to give feedback preventing impossible puzzles)
  • Ghost images to fix sizing issues
  • Design improvements to support large puzzles
  • Shuffle-able logical conditions
  • Onboarding flow
  • Entity set builder
  • URLs that lead to specific parts of the app (builder, specific puzzles, etc)
  • logike.app SSL

For now I’m taking a bit of a break from the puzzle app to work on Compass, but I plan on alternating between the two projects until I feel like Logike is pretty mature.

Phew! 😌 That was a lot!

Thanks for taking the time to give this a read, and I’ll keep posting updates here whenever I start chipping away at the next next Logike release 😊

Until then, keep being awesome! 🌠

Image

🔒

So I was trying to add SSL to logike.app, because you need to use SSL to make the new .app domains work, and I accidentally added SSL to the blog! 

Hurray, I guess! 🎉

#IHaveNoIdeaWhatImDoing

Web dev 1.0 – The Process 🌱✨👨🏼‍💻✨🌱

For the last 3 years or so, I’ve been immersed in the world of code. What started as a simple workshop to help me build an MVP for an app turned into a full fledged rabbit hole, and before I knew it, I was working for a kick-ass EdTech company and spending my weekends sipping and writing Java. I’ve learned a ton, but the journey definitely hasn’t been linear.

Learning to code during evenings and weekends is great, and got me a working prototype of my Android app, but it has it’s limits. No amount of passion or drive can replace putting in the time, and I wanted to find a way to learn more, faster, without necessarily going back to school.

It just so happened that at the same time that I was feeling this urge, Les Pitonneux, a non profit that helps people learn to code, had a new cohort for their Lab12 program that was about to start. I’d already done a series of Android workshops with them, and I’d gotten a lot out of it, so I figured it was worth a shot.

Lab12 is twelve week “un-bootcamp” for self learners. There are no classrooms, no lectures, and certainly no fixed curriculums. You start out with a goal, usually a specific project, and with the help of mentors and your peers you work towards it for the duration of the program. It’s good to have a sizeable amount of time to dedicate to learning each week as well.

In my case, I wanted to make an interactive logic puzzle, while using modern web development tools that are similar to what’s being used where I work. The puzzle is something that could be integrated into Netmath, but more importantly, the whole process would help me become more familiar with the possibilities and constraints that come with building web apps. Design that’s informed by development is more robust, so I asked to be able to dedicate some time in my usual work-week to learning JavaScript and React.

A mural near Notman House that I like. It’s kind of chaotic, just like that front-end programming landscape!

Lab12 was divided into 3 parts for me: ideation, knowledge acquisition, and building. First I needed to figure out what exactly I wanted to do. Yes, I wanted to build a puzzle app, mais encore? I needed to scope the project into something that was achievable in 12 weeks, and also map out how all of it would be organized and what technologies I needed to learn.

The learning part is tricky, because I found that this is where motivation can take a bit of a dip. Optimal learning happens when you build onto prior knowledge bit by bit, applying what you learn as you go along, but it can be tempting to just go out on a limb and keep learning a bunch of things that you aren’t going to use right away.

One of the resources I was using, Eloquent JavaScript, had some particularly thorny bits that, while fascinating, were utterly useless for the first development phase of my project. I read on a bit further than I had to, and during that week where the puzzle app wasn’t moving forward I felt a big dip in my energy. It’s a tricky dance to balance learning and progress, but when you get the mix right it feels almost magical!

Dance magic dance!✨🕺✨👨🏻‍🎤✨💃✨

I spent a little over a month learning quite intensely, then came the building phase. There isn’t a ton to say about it other than the fact that it’s one of the most rewarding phase of any project. It’s when your planning and learning finally come to fruition, and you prove to yourself that you can do more than just follow along with a tutorial or copy/paste Stack Overflow. This is where I usually show off what I can do on Twitter. 😂

(By the way does anyone know the proper punctuation of emoji in a sentence? Do they replace the period, or go before/after it?)

At the end of the 12 weeks, I had a working prototype that was actually pretty fun to use. There were a few bugs in it, as is the case with most software, but nothing particularly worrisome. Setting aside the extra time to code made a huge difference and gave me a nice boost of momentum for my learning goals. I’ve taken the puzzle app even further as well, by making a puzzle builder, but that’s a whole story in itself!

I guess the takeaway is that if you feel like you’re in a bit of a rut or you’ve hit a plateau, there’s probably a way to fix that and take your game to the next level. In the immortal words of Enrique Iglesias, Baillamos! 💃

Status

Something wonderful has begun 🚀

After a few months making puzzles, I’ve officially started working on Compass again! This time however, I decided to do things right and actually plan a bit before I code! 😅

post-its mapping out the inner workings of compass

Mapping out the inner workings of my app.

When I was building the puzzle app, having a clear map🗺 was invaluable. Instead of wasting time questioning my architecture, I was coding it, and checking off boxes in my diagrams as I went along.

I could also show others how my app worked, without diving into the code itself and being like “see this function? It does X… that class lets you talk to Y… what do you mean you don’t understand?! THERE ARE COMMENTS!

the architecture of the Logike app, mapped out with sticky notes

The architecture behind the Logike app

I currently have a love/hate relationship with code architecture. On one hand, I just want to hunker down, learn Typescript, and spit out my gem💎 in the making! On the other, it feels a lot like a game of Risk or Ticket to Ride, and I love a good strategy game.

By mapping out your project, you can be very strategic about the code you write and avoid going back and changing the same lines every couple weeks. Obviously no path is perfect, but it feels really cool to be able to make and educated guess about which one is best, something I definitely wasn’t able to do a year ago! 🎉