I made my first React Component! ⚛️

I created a Grid Component.

It accepts an array of arrays in order to structure the cells inside of it, and it automatically resizes to be as big or as small as I need it to be. The cells can contain anything, even other grids!

This is what using the grid looks like in React:


It outputs a table, which is great because coding what you see below by hand in HTML is the very definition of hell 🔥.

a react component that consists of a 3 by 3 grid that cointains other 3 by 3 grids and random content like text and emoji(yes it’s hideous 😉 … there’s no CSS in it yet!)


This was awful to style because tables kind of suck, so I stopped trying and came up with something else.
I made another version of it using divs and Flexbox in the end, and it’s actually beautiful!

Old mac charging new mac

15″ MacBook Pro 2017 Review ✨💻✨

This fall I’m going to be learning a lot of front-end web development. I’m super excited to get started, but my current hardware setup was kind of lagging behind. My 13″ MacBook Pro from 2010 was the first computer I ever bought with my own money, and though it had served me well (and still works great for everyday use, or as a Minecraft server!) I needed something a little more powerful for when I’m outside of the apartment. A 1280 x 800 screen can only take you so far.

I can’t bring myself to sell my old MacBook Pro (we’ve been through so much), but I don’t have the same attachment to my 2013 iMac, so it is currently on Kijiji to finance my new computer. Now the smart thing to do would have been to wait until after I had sold my iMac, but my available credit disagreed, so today I went to the Apple store to pick up a new MacBook Pro.

I was looking for something at least as powerful as the iMac I was selling, and it turns out that the base model for this year’s 15 inch MacBook Pro does slightly better on Geekbench than my iMac does. It also has 350% more memory dedicated to graphics, so it should be able to handle everything better.

The review:

Look and feel:

I was impressed by how light and thin it is compared to my old laptop. It’s nearly half as thick, and despite having a much larger screen, the smaller bezels make for a footprint that feels nearly identical. Given its thinness, it also feels like it should have considerably less computing power.

The Keyboard:

When you start using it for the first time, you immediately notice the new keyboard. The touch bar, while super cool looking, takes a bit of getting used to. It turns out that I had gotten in the habit of resting one finger on the escape key or the play buttons for some reason, but since they’re touch activated on the new MacBook Pros, you can’t do that anymore.

The keyboard itself also feels much different. While my old MacBook’s keyboard felt smooth and buttery, this new one is incredibly firm and shallow. I’m still not sure what I think about it. One of my co-workers said that it makes him feel like he can type faster, and while that seems to be the case, I don’t know if I’m typing better yet.

After about a day, I got used to the keyboard, and I can type at least as fast as I could on my old Mac. I’m still getting used to using some of my custom shortcut keys, but otherwise I have no complaints. The touch bar escape button habit is a non-issue by now.


As for the ports, that’s where things start getting a bit complicated. Apple decided to go ahead with killing off all ports that aren’t USB C. Personally, I think this is a great idea. I have an entire desk drawer that is entirely devoted to cables and adapters that are either obsolete or rarely used. I’d love to see USB C become the de facto cable for data and power transfer, with future iterations keeping the same form factor, but increasing the throughput.

My phone is a Google Pixel, so I’d already started stocking up on USB C adapters. In many ways, the Pixel is much more compatible with the new line of Macs than the iPhone is. It came with the best dongle ever, called the “Quick Switch Adapter”, which was meant to allow people to easily transfer the entire contents of an iPhone to their new Pixel. Unfortunately I can’t find this adapter for sale anywhere on the internet, but it’s excellent and I’ve already used it a ton in the last few days.

The Pixel’s “Quick Switch” adapter

I don’t mind using adapters, and I think it makes for a more flexible ecosystem overall (my Mac at work only has one mini DisplayPort, so I can’t plug a third screen into it), but I feel like the port layout could have been thought out a bit better. If you try to plug in two dongles next to each other, it can be a pretty tight fit, since there’s less than 1cm between the ports. Apple’s solution is to use their dongles, but frankly I find them to be much too big for what they do.

This thing takes up way too much space.

I kind of miss MagSafe as well, which made taking my laptop off a desk feel much more effortless. That being said, charging over USB C is incredible and full of ridiculous surprises!

I can plug my new MacBook into my old one, and it will charge. It won’t charge fast, it might even discharge slowly if you’re suing it at the same time, but theoretically all you need is a USB A to USB C cable and you’ll be able to charge nearly anywhere. I can use the Pixel’s USB charger, or the old USB 2.0 (or maybe even 1.0 ?) charger for my first phone. They all just work, and it’s beautiful.

I can also use my Pixel to charge my MacBook, which is a terrible idea and will drain the battery in minutes, but it works! 

Connecting two USB C ports to each other tricks your Mac into thinking it’s charging itself. Beautiful.

My old MacBook charging the new one

There’s tons of new and freakish charging configurations that are now possible thanks to USB C! I’m looking forward to the day where we’ll be able to plug 10 MacBooks into a power bar via USB C and run a microwave on battery power! At 100W per USB C connection, this is theoretically possible!


In terms of speed and performance, It’s a bit faster than my iMac, and it definitely blows my old laptop out of the water. I have had a strange issue with Chrome though, where CSS isn’t loading on pages at a much higher rate than usual, but a refresh always fixes that. It’s been less of an issue as I’ve used the machine a bit more, and I know it’s not unique to this Mac model.

I haven’t really found anything that it can’t handle, performance wise anyway. It runs hundreds of Minecraft mods simultaneously with excellent frame rates, and even fairly intensive tasks like video calling don’t destroy the battery life in the same way as on older macs. The 7th generation processors really make a difference!

I imagine that the maxed out Macs would perform even better, but so far I’ve been pretty happy with the base model. Worst case scenario, if I need more power I can get an external GPU.

The Touch Bar:

Ah yes, this has been a huge source of contention! People have been calling it useless, or worse, a gimmick. I don’t think it’s either of those things, but I’ve also played around a lot to make the touch bar into a tool worth paying for.

Out of the box, it was a bit lacklustre for someone like me who doesn’t use a ton of the stock Apple apps. This is what the touch bar looks like in Chrome:

The MacBook Pro Touch Bar while using Google Chrome

The MacBook Pro Touch Bar while using Google Chrome

I already have the shortcut keys for every single one of these functionalities in muscle memory.

Safari fares a bit better, with some really useful previews of open tabs:

The MacBook Pro Touch Bar while using Safari Tabs

The MacBook Pro Touch Bar while using Safari with multiple tabs open

But it’s lacking widespread developer support:

The MacBook Pro Touch Bar while using Safari

On top of favicons, developers have to add another set of graphics to their sites if they want them to show up nicely on the touch bar.

Not to mention the fact that Safari is missing a bunch of key features like user profiles or favicons on tabs and bookmark items. If they had this, I’d use Safari instead of Chrome.

Where the touch bar really starts to shine is in apps that have implemented it well. Sketch is one of those apps.

The MacBook Pro Touch Bar while using Sketch

The MacBook Pro Touch Bar while using Sketch

In Sketch, the keys change dynamically depending on which elements are selected. Many of these are common shortcut keys, but some aren’t, so it really helps to speed up your workflow.

Photoshop has a similarly rich touch bar experience, with colourful sliders popping up whenever you need them.

Not all apps have touch bar support though, and some of the ones that do aren’t as customizable as you might like sometimes. This is where third party tools come in!

Better Touch Tool is, as the name implies, a tool to make touch based interfaces better. It isn’t free, but it also isn’t expensive ($2.99), and considering all that it does, it’s certainly worth it. It allows you to contextually remap your touch bar, keyboard, mouse, or other input devices to de a slew of custom commands. For instance, there was a shortcut key missing in Sketch for a common command (toggling smart guides), so I just made a new key for it.

The MacBook Pro Touch Bar using Better Touch Tool in Sketch

I created a custom key to enable/disable smart guides in Sketch

All this does is navigate through the menu tree, and finds the command I’m looking for. A 3 click operation can now be done with a single press of a button, and it could have also been mapped to another shortcut key.

In the Finder, I’ve created custom keys to help me with my developer workflows.

The MacBook Pro Touch Bar using Better Touch Tool in Finder

Some of the contextual buttons I’ve created to help me with my developer workflow

The Chrome icon just opens a new Chrome window from anywhere (without having to right click on the Chrome icon in the dock or switching Spaces). The binoculars toggles hidden files in Finder (without me having to enter the commands manually in Terminal). These are fairly simplistic commands, but they can be more elaborate as well.

For instance, when I have the folder of a React project selected, the React button opens a Terminal window and cds into the selected folder, opens the project in Atom, resizes Atom to be on the left of the screen (where I like it), opens a Chrome window on the right of the screen, and then starts the local React server in Terminal, to launch the preview. This saves a huge amount of time! Any Terminal command or AppleScript can be run from the touch bar (or other shortcut keys) so the possibilities are pretty big!

It’s also pretty cool for anyone who wants to program in Emojicode, which is clearly the programming language of the future!

In terms of things I would improve with it, haptic feedback would be a great addition. Sometimes it’s not clear whether you’ve actually pressed on a virtual key or not, and while there is a third party app that uses the haptic engine of the trackpad, it’s not close enough to the touch bar to feel particularly believable.

Apple also needs to let me enter emoji in any text field, in any app, without having to use a third party emoji picker. It doesn’t make sense to have to rely on app developers to implement this in each app individually.


The RAM and SSD are soldered to the logic board (WHY⁉️), so they are impossible to replace without changing the entire logic board.

The battery on the other hand looks like it’s technically replaceable, but it’s pretty difficult and would require some kind of solvent for the glue. With my current usage, I only go through about 10 battery cycles a month, so iFixit has 8 years or so to come up with a battery replacement kit for it! The Lithium batteries in the Macs are rated for about 1000 cycles.

With my 2010 MacBook Pro, I upgraded the RAM twice, along with the hard drive (SSDs weren’t commonplace in 2010). I also ended up changing the fans, which I ruined by rendering videos every night for 2 years, and the battery, because it inflated and had a very high cycle count.

I don’t wear the battery down in the same way as I did with my old Mac, so that shouldn’t be an issue, but I am a bit worried about the RAM, especially looking at current trends in memory usage. If we can make external GPUs, maybe external RAM isn’t far fetched?

Final thoughts:

Despite the fact that it’s kind of pricy, I still think it was worth it. Once you’re set up, everything is pretty frictionless, and I feel like whether I’m on a couch, in a bus, or at a desk, I can get a lot done with this machine.

Thanks to the touch bar and USB C it’s also the most hackable Mac I’ve ever owned, in the sense that I can reprogram and reconfigure pretty much all of the inputs if I want to. It’s a huge advantage over a static physical keyboard

9/10, would buy again… but let me upgrade the RAM please.

I don’t hate WordPress anymore! 🎉

For the last couple weeks A few months ago, I’ve been building I built a WordPress site for a project that I’m doing with a friend.

Ah WordPress… 😄

It’s a CMS that’s the backbone to over a quarter of all the websites on the internet, and a source of endless grief for many, but does it actually deserve it’s reputation?

For those who haven’t used a CMS before, it basically makes it possible to easily change the content of a website, or even run a blog, without having to write code each time. In the case of WordPress, the initial setup may or may not involve any coding, depending on what kind of site you want.

This blog for instance is powered by WordPress, and besides a bit of CSS and some JavaScript I added to the header and footer, there wasn’t a ton of programming involved.

The site I built from scratch on the other hand is another beast entirely. It started out as a static HTML page, one with no content that could change dynamically, and with the help of a great piece of software called Pinegrow, was turned into a full fledged custom WordPress site. The process was simpler than I had expected, but still quite a bit more complex than the setup for this blog.

Turns out, a WordPress site is a collection of about 1500 different files, lots of PHP, and some database stuff that I still don’t fully understand. Usually all that code runs on a server somewhere and somehow generates the HTML pages that show up in the browser. It’s also possible to run this kind of server locally.

But, if you wanted to build a WordPress site from scratch without any special tools, there’s a good chance that it would be kind of painful. You’d have to download the WordPress software, know PHP, run a local server, and learn all of the intricacies that go with building the theme. It’s all documented, but it’s also quite a bit more difficult than writing a static piece of code. I personally wouldn’t attempt it without a better grasp of PHP, and I’d need a pretty compelling reason to not just use Pinegrow.

There’s also the issue of plugins and updates. Plugins are third-party add-ons that extend the basic functionality of WordPress. It can be simple stuff like making buttons that look pretty, to full fledged e-commerce solutions. Like all third-party software, there’s always a certain amount of risk involved, especially for smaller, less popular plugins. Like all software, every time you update it there’s a chance that it will break, and WordPress is no exception. Plugins, while useful, are possible points of failure during updates. Use them, but it’s probably not a good idea to install tons unless you need to.

When I first wanted to start this blog, I was incredibly reluctant to use WordPress. I’d heard nothing but bad things about it, presumably because the tools to develop for it weren’t always as good as they are today, and I was quick to try to find an alternative. After trying it out and giving it a chance however, I’ve actually started to like it! From a blog like this one that could be set up in under an hour, to a complex publication like TechCrunch or The New Yorker, it’s only as difficult and complex as you want it to be, which is why I’ve decided to stop hating it.

Momentum 🍟

Despite the relative silence on the blog lately, I’m not dead! 😉 I was just tired a few weeks ago from working on too many projects, and didn’t feel like writing that week’s post…

Or the next week’s


You get the idea.

This kind of thing has happened to all of us. We start going to the gym regularly, or getting into some other good, healthy habit, and then life happens.

That’s fine.

Michelle Akin was living though something similar lately, and in her newsletter she correctly pointed out something that we often forget: we’re not robots. 🤖

It’s normal to mess up and not be 100% consistent, and we shouldn’t beat ourselves up for it.

That being said, it’s by no means a free pass to drop the ball.

It’s the strangest thing, but whenever we feel like we’ve messed up in some way, messing up a bit more just doesn’t seem like such a big deal.

Let’s say you’re setting out to eat healthier, and you’re tempted by the exquisite Quebecois delicacy known as poutine. You’ve been eating lean and sticking to your goal perfectly for several days, but you cave even though your cheat day is still some ways away (who wouldn’t amirite?)

Your level of guilt towards your goal might be something like an 8 out of 10 (it was a really good poutine!)

Then maybe your awesome co-worker brings in homemade butter tarts… Tons of them.

You obviously can’t help yourself, because let’s be real here, butter tarts are amazing. 5/10 for guilt since you’d broken your streak anyway.

And then you get home to find out that your partner has made a cheesecake on their day off.

You’re down to maybe 2 or 3 on 10 for guilt towards your goal? I mean, what’s a slice of cheesecake when you’ve already had a poutine and a few too many butter tarts?

While I’m in no way advocating for you to beat yourself up over your mistakes, we all do it to some extent so there’s no point in pretending it doesn’t happen

Poutine, some butter tarts, or some cheesecake will individually have similar negative effects on one’s healthy eating goals, but depending on the context they present themselves in, our perception of them can change greatly. The human cognitive bias known as the contrast effect is at work here, and the only thing you can really do to offset it is to try to be aware of it.

After missing a week’s blog post it feels like less of a big deal to miss the next, and the same can be said of all of my projects that require consistency.

And since writing the above text, I literally missed another month! Guilt level: minimal. Momentum: lost.

It’s kind of a shame though…

Momentum is such a magical thing. It’s the compound interest on your efforts, and it makes all your hard work seem so much more worthwhile.

Let’s get it back 😉

RIP Blob Emoji 🙃

BREAKING NEWS! Google is getting rid of the blob emoji in Android O and replacing them with monstrosities!

While this may be a polarizing issue for some, I firmly believe that the flat design of the blob emoji is superior to what they will be replaced with in the next Android version. Flat Design, and its offshoot Material Design, have become synonymous with all things Google. Whether it’s the Inbox app, or stock Android itself, the design style is so prevalent that you instinctively know where its from.

It’s recognizable, and a stamp of quality. I’m applying Material Design to my app (which is available for anyone who wants to test it 😉 ) because it makes it look and feel a lot more clean and professional, while still allowing a lot of room for creativity.

The new emoji design is the opposite of recognizable… lets take a closer look.

emoji comparison chart

emoji comparison chart. Source: Emojipedia

I will admit that the police officer in Android 5.0 looks like a slug, but the Android O emoji look like Google is trying to be more like Apple, and failing. They added unnecessary lines, colours, and gradients, which just make the design more complicated for nothing.

I’m a fan of simple, concise design. Take a look at this pillow and wall decal from Montreal’s STM:

stm pillow

STM themed pillow that I really really want to buy.

STM metro station wall decal

Wall decal in the style of Montreal’s metro map.

It’s simple, enduring, and as far as I’m concerned, beautiful. All things that the new Android O emoji are not.

On the positive side though, the weird blob shapes will finally be gone! While I have grown fondly attached to them, I recognize that they are super strange and a sore spot for many Android users. For me, the ideal emoji refresh would involve killing the blobs, but keeping the same flat style that makes them great!

Or better yet: letting users change their emoji sets on their own without having to install sketchy themes or other non-native workarounds.

What do you think? Do you care about how your emoji look? Let me know in the comments, and if you like this blog post, don’t forget to subscribe! 😄



Mondays are back! 📈

I’ve been fighting with this graph for a month, trying to figure out what happened to my Mondays. It stubbornly refused to show any labels for them on my X Axis, despite there being plenty of Monday related data available.

It was a stupid conversion problem with floats, but now it’s fixed!

Add some Sass to your website! ✨👓✨

I just restyled the colours of the blog to match the colour palette of my illustrations. It’s kind of a pain changing all the CSS manually, since WordPress themes have a ton of classes that you might not be familiar with, and if you want to change one colour somewhere you have to do it in a dozen more places. I downloaded the CSS and edited the whole thing by hand in Brackets, but that took a while and I figured there must be a better way.

I posted a question in the Slack group for Les Pitonneux, a non profit skills incubator doing amazing work in Montreal, and got this answer:

I’d heard about Sass before, but I was focusing on Android development at the time and kind of overlooked it. Looking at it now, it seems pretty amazing!

Variables in CSS is a huge improvement if you want to make something that’s easy to maintain and that has a coherent design. The whole idea behind CSS is to be able to style your HTML more efficiently than using inline styles, which get messy fast. Variables let you change colours or other values in one central location without having to pinpoint all the different places you might have used them (and inevitably forgetting a few places).

Of course, it would be kind of shady of me to flaunt the merits of Sass without having actually tried it myself, so without further ado lets get Sassy with CSS!


Step 1. Installing it (on a Mac)

According to the installation docs, I can either use some apps, or the command line. Since it’s way cooler and makes me feel like a hacker, I’ve decided to use the command line. On a Mac, the app for this is called Terminal.

installing sass

Nothing says “I have no idea what I’m doing” like using the command line!

The actual command to install it is:

sudo gem install sass

You might have to enter a password, or not, every command is full of surprises! 😂


Step 2. Creating your conversion folders

I’m just doing everything in this guide. First I set up some conversion folders, like so:

sass --watch /Users/jonathan/Dev/sass_in:/Users/jonathan/Dev/css-out

The part before the : is my inputs folder, and the part after is the output, as the name implies. If you’re wondering how to get your filepath into the command line, like I was, just copy/paste the folders from Finder into the command line. It’s that easy! 😄  You can also do the same thing but for individual files, it’s up to you.


Step 3. Writing the code

Basically, you write your CSS in Sass or SCSS, which then does a bunch of the heavy lifting and converts it to normal CSS. I just learned that Brackets works with SCSS and Sass, so that’s cool. I assume that SCSS is just a newer / better version of CSS. Who knows?! 🤷

Because variables is the part of Sass that I care about, lets start there!

Turns out, it’s ridiculously easy. The syntax for a variable is

$variable-name: "some value";

and here’s what it looks like in my code:

$secondary-color: #2C4B5E;

.container {
    width: 780;
    margin: 0 auto;
    background: $secondary-color;

Once I had it set up, I managed to change colours in a fraction of a second. THIS IS AMAZING! 💥

I didn’t even have to rewrite any of my original CSS! I could just duplicate it, change the extension, and add Sass on top of it! 😄

There’s a tons of other features build into Sass, but you’re free to look into those on your own. At any rate, variables alone should be able to drastically simplify your CSS!

I’d also like to give a special thanks to Mateusz Wijas for suggesting Sass as a solution to my problem. I can tell that this is going to save me a ton of time going forward!

Happy coding!