My first hackathon: do_action_montreal 👨🏼‍💻

A few months ago I attended my first hackathon. For those who are unfamiliar with the term, a hackathon is an event where people who may not know eachother get together and build something for a common cause. They’re pretty popular in the tech community, and typically last a few days at most (though there are exceptions). The hacking is more of a reference to putting together something quickly than of breaking into the mainframe, or at least that’s my understanding of it.

I’d been a bit hesitant to go to this kind of event in the past, mostly because I was still learning the ropes and I was afraid to slow my team down. Imposter syndrome is real.

One day, I see a post in the Pitonneux Slack for something called do_action_mtl. What stood out with this particular event was that they were specifically looking for designers, and since my foundations are in design, I signed up.

The goal of do_action_mtl was to make a WordPress site for non-profits with limited technical knowledge. The non profit that my team was paired with was called Beigne Oui, which is French for Donuts Yes, and also a pun. 🍩

Donuts? YES!

The day started way too early for my liking (Saturdays are made for sleeping in), but there was plenty of free coffee to compensate. We met our teammates, and got started as soon as we were sufficiently awake. We had a full day to make a site powered by WordPress, populate the content, and make sure everything looks polished.

It quickly became clear that when faced with exacting time constraints, being able to think on one’s feet is far more important than technical prowess. As the designer on the team, I had to make sure that everyone had specs early on so as to not waste time. But that proved to be quite challenging.

Usually, when I design something for a client, I like to spend a bit more time up front to really figure out their needs. In this case, Corin from Beigne Oui was there, but we couldn’t afford to let the rest of the team just sit around, so a lot of stuff was improvised on the spot. I found a good compromise was to sit next to her while I worked, that way I’d get instant feedback along the way.

I also typically build WordPress sites from scratch, using Pinegrow. That gives me incredible control of my design compared to doing something based off an existing theme, and I can split my page elements into components that can be used across different projects. This is perfect for the one man show I’m used to when building sites, but it’s not the most well adapted to a hackathon. Not to mention the fact that most people don’t even make WordPress sites like that. In the end we chose a free theme that was being given by one of the event sponsors, and we just tweaked it as needed.

Once we knew which direction we were headed in, things went relatively smoothly. The entire afternoon part of the day was a big rush of making final designs, building them, and polishing. Near the end when my designs were done I got my hands dirty with some of the CSS too, to speed things up a bit.

In the end this is the site we delivered, which is not bad for a chaotic day’s work volunteering!

Our team for do_action_mtl

Our team for do_action_mtl … Not my best selfie 🙃

Would I do it again? Yes!

Would I change anything? Oh yeah!

Had I done something like this before, I would have started designing something basic before the hackathon itself. Nothing major, but I would have gotten all of the info ready and made a few sketches so I could hit the ground running on the day of the event.

I also would have put some more thought into how to divide some of the work. I’m used to building what I design, but not necessarily passing those designs to a developer. Since the hackathon this is actually something that I’m doing a lot more at my job, and I’ve definitely improved.

Hackathons have tons of transformative potential, both for the participants and the causes they support. I’d recommend them to anyone! 😊

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:

<Grid cells={THE_ARRAY_OF_CELLS_GOES_HERE}/>

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!)

UPDATE:

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.

USB C:

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!

Performance:

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.

Upgradeability:

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

Or…

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! 😄

 


Image

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!