Alfred and other apps for the programmer

relaxing in a pool by snow mountains
Tools conserve cognitive resources for the actual tasks! Image: Robson Morgan

I now recall that about a year ago, I was introduced to the productivity app called Alfred. I tried it but couldn’t understand why anyone found it useful, and swiftly proceeded to uninstall it within the week.

I learned about the Alfred app listening to Tim Ferriss interview a man named Noah Kagan on his podcast. Noah has had an illustrious career spanning the early days at Facebook and, and he eventually founded his own tech company, SumoMe. He is now one of hundreds of interviewees on the Tim Ferriss Show podcast, one of my favourite podcasts of all time.

But I’m not going to talk about podcasts here; I want to talk about the tremendous quality and quantity of tools that are available out there on the world wide web at our disposal.

Let’s do a stock take right now. Since I began attending classes at General Assembly two weeks ago, I’ve downloaded a number of tools that purport to make my life better (as a programmer):

  • Atom code editor
  • Atom external packages: JSLinter, Emmet, highlight-selected, standard-formatter
  • Dash offline documentation dashboard
  • Slack app for team/community chats
  • ColorZilla extension for Chrome
  • Alfred app

In two weeks I’ve downloaded these and more, and they’ve been quite helpful in specific ways.

Atom code editor has integration with my command line and Git, so whenever there are “uncommitted” changes in my code files I can see them at a glance.

The various external packages are even more powerful. JSLinter constantly reads my JavaScript file for missing semicolons, undefined variables that are meant to be defined, functions defined that haven’t been used anywhere in the code, and more. Emmet is the most beautiful implementation of an open source tool I’ve come across so far, replacing this:

With this:

With Emmet, 12 lines of HTML can be generated with one sentence. A simple tab will expand the sentence into all that HTML. The time savings is enormous.

Another tool I’m already starting to fall for is Dash. It allows me to continue to code with reference to official documentation while I’m disconnected from the internet. Talk about liberating.

A guy—I think is called Jensen—who works at ThoughtWorks introduced it to us two days ago, and I’d already found a use for it yesterday. At 7am, alone at a Subway store in Marina Square that wasn’t even open, I was working on a project and needed to refer to the Emmet documentation—to generate 100 spans with unique IDs—but had no access to the internet. Dash came in extremely handy.

Today I’m going to bring Alfred for a test drive. If I don’t feel compelled to uninstall it by the end of the day, I think it’ll join my rapidly growing repertoire of tools. It’s amazing that all these are available for free. I couldn’t be happier. Maybe one day I’ll pay my debt to the community by working on an open source tool…

Programming is an exercise of freedom

Projects that I’m used to working on are entrenched in structures (as in structure versus agency) that inevitably hold me back from full expression.

Say I’m trying to run an environmental awareness campaign. To pull it off I’d need to bend to the rules, protocols of the organisations that we have to partner, and even whims and vagaries of disgruntled bosses. To comply with these is crucial not just for the success of the project, it is fundamental to even have a project to talk about and work on. So no funny business.

When it comes to software, there is a lot more space for movement and expression. Sure, the technologies and frameworks that have been widely adopted set all new programmers down particular paths, but the beauty of programming is that you can choose to ignore all of it and still build something useful. The core utilities are open to appropriation however you like – nobody can stop you.

(Besides, whoever came up with the idea that everything you do has to be useful (usually in the narrow sense of bringing convenience or other kinds of profit) must be a really boring person.)

screenshot of rattyduck's interactive website
Rattyduck, our instructor’s friend, coded this. It’s fun and feels like a work of art!

Consider this with the fact that software has very little overhead to create and deploy (compared to other kinds of projects); it’s enough to make me walk with a skip in my feet, that’s for sure.

Programmers have the magical ability to conjure something useful out of nothing. How fascinating!

Substantial juxtaposition in Keong Saik

To juxtapose elements in a scene against others is to pick on contrasts. In Duxton where I’m having programming classes, the contrast is stark at every corner: newly erected skyscrapers behind two-storey shophouses that have stood since Singapore was a British colony; adults, mostly corporate workers, walk around the old streets dressed in clothes that are up to date.

When we get into the frame of mind of juxtaposition, contrasts are highlighted in our minds, and we marvel at how things came to be. Today, as I rode down the gentrified Keong Saik Road in Duxton, it dawned on me that Singapore underwent some dramatic transformation since independence 50 years ago.

keong saik road singapore
Keong Saik Road, Singapore

Perhaps our government planners decided it would create just this effect of juxtaposition that they splurged on the mega Housing Development Board project The Pinnacles @ Duxton. It worked on me!

Here’s the thing: manufacturing juxtaposition, with buildings as an example, can reek of pretence if the whole was not true. I’m reminded of scenes in variegated Chinese cities that have giant skyscrapers next to poverty stricken neighbourhoods.

The Duxton HDB project doesn’t give off that vibe because as a whole, Singapore is really high up on the totem pole of development after years of hard work and strategic governance. Instead, when I see the giant among dwarfs in Duxton I see a symbol of how far we have come. HDB, itself at the pinnacle of government agencies providing public housing, shines through the juxtaposition. Substance exists in the contrast.

I don’t know why exactly, but I’m feeling slight–just slightly–proud of the sight.

How programmers work together from every part of the world

The label ‘digital nomad’ exists because people whose job was to write programmes have become so fluid in the workplace that they can work from virtually anywhere in the world on the single, simple condition that there is an internet connection.

With Dropbox as ubiquitous as it is nowadays, it might be easy to overlook just how difficult it is for multiple ‘devs’ (short for developer) to work on a single project at the same time. But think about it: what happens when your friend works on the same Word document on Dropbox as you are right now, and saves her file?

Conflict, right? Dropbox’s programme will detect the conflicts and automatically save one copy—your friend’s or your copy, depending on circumstances—as a “conflicted copy”, for you to sort out later and merge them manually.

Programmers, being programmers, use a much more sophisticated versioning protocol and software. It’s called Git (pronounced as ‘geet’)- and it is the utility that empowers programmers to work remotely with one another. It is also the single biggest enabler of the open source movement. Here, I’m going to go into the technicalities for a bit so if you’re not interested in that kind of thing, feel free to drop out now!

Git is a version management software that handles the complex distributed workflow of distributed teams. While it’s powerful, it is also quite difficult to grasp at the beginning. But as with any tool, once you understand how to use it, life becomes much less burdensome.

Every web project has many files, sorted into various folders like ‘css’, ‘javascript’, and ‘images’. This isn’t far from the projects most of us are already used to. What’s different is the fact that in a file that contains code, like ‘main.js’, which contains JavaScript code, lines are linked to one another through what is written.

If someone makes changes from line 12-20, that change might have a ripple effect on every other line, and if this is not updated in the second programmer’s computer in time, and the programmer starts to work on the now-outdated version of the project, things can get chaotic very quickly. Bugs will crawl throughout the programme…

That’s one of the many situations where Git saves the day. Let’s say I’m the first programmer mentioned above:

I would execute the above commands (each line being one) in my command line interface (Terminal for Mac) to synchronise my work to the cloud. Broken down, it goes something like this:
– Save my code on my computer (cmd + s)
– Put the changed files into a figurative cart (git add .)
– Pass the cart through the cashier who will write in her logbook the message “Created resetButton function to reset game” (git commit -m …)
– Strap the cart to a rocket and launch it into the clouds. (git push origin master)

Once this is done, the latest version of our team project is on Github. Let’s say now I’m the second programmer…

The only the difference is that I now have to enter the command git pull to fetch the latest version before starting work.

What happens if programmers 1 and 2 are both working on the file at the same time, at 10:30pm on a Saturday night? This is when things can get tricky. Thankfully, Git makes the process much simpler.

Git is smart, so it will look compare the files that a programmer pushes into the repository (hosted on Github) with the ones originally in the repository, which are now outdated.

If programmer 1 finishes work first, he will push his changes to the repository without obstacles (assuming only two of them are working on the project at this time). But when programmer 2 finishes his work 30 minutes after that, a problem arises – programmer 1’s work, which did not exist in the file when programmer 2 started, is now the updated version on the repository on Github. So what happens when programmer 2 tries to send his finished work to Github?

This is the part that differentiates Dropbox from Git – instead of accepting both copies and renaming one as a ‘conflicted copy’, Git will see the discrepancy and prevent programmer 2 from being able to git push to the repository! Instead, he’s prompted to do a git pull to retrieve the latest version of the project. What happens now?

Programmer 2 now has two versions of the project. Without Git, he’d understandably be at a loss, confused over what to do. But Git knows a bit of magic – when a file has edits that are different from the one in your computer, it attempts to auto-merge them. To achieve this Git actually compares the contents of each file with one another. If the file that both programmers worked on has a total of 800 lines and programmer 1 worked on lines 1-200 and programmer 2 added lines 800-1000, Git would very likely understand that as work on two separate parts of the project and, without bothering the programmer in question, add them both to a single, merged file automatically. Isn’t that wonderful?

Of course that leaves with us a few other situations that are a little less magical. If a conflict occurs (say, Git detects that you’ve both been working on the same lines of code), what needs to be done to restore order?

I’m afraid Git can’t make decisions of which version of a block of code to retain and which to discard – that responsibility is too heavy to carry, I suppose. The programmer who receives the conflict (programmer 2 in our case, who finished his part of the work 30 minutes after his partner) must resolve the conflict manually.

That said, Git inserts markups into the file with both versions of a block of code—one that programmer 1 worked on and the other by programmer 2—that visually delineates the two versions for ease of comparison by the programmer who is doing the de-conflicting. So programmer 2 has to delete the lines of code that he knows are old, save, and upload that final copy to Github. Order will then be restored.

Is it overly complicated? At this point I’d say it isn’t. Even though I think I haven’t used half of its features, I’ve used some of the most frequently used ones and so far, it enhances my workflow as a solo programmer and on a small team that is physically close. When I eventually work on a remote assignment, I can see how Git and Github will make things smoother and make my life as a programmer slightly easier.

Quick deployment via Github Pages

Finally, I also learned about a Github feature called ‘Pages’ today. I’ve been using Codepen to do what it does so far, which is to deploy a project to the web so that it is accessible to more than just, well, my local machine.

Pages seems to offer more convenience, since deployment is executed directly from the command line rather than a web interface, but I’ll have to play around with it before giving my verdict. For now though, I like how cleanly it deploys my project online without the bells and whistles that Codepen presents by default (like the Editor view, which allows any visitor to see the source code that may taint the user experience).

Github Pages is only suitable for projects that don’t need custom server-side code!

My first game of Tic Tac Toe!

I think every aspiring programmer gets extremely excited when they create their first game. No, just me? Huh…

It’s my first weekend at General Assembly as a web development student, and as a gift, our loving instructors told us to create our first game – the classic Tic Tac Toe.

Present this task to me just a month ago and I would break out in cold sweat. This weekend was different – what a challenge! I savoured every bit of it (pun very much intended).

Here’s the pseudo-code to make a game like Tic Tac Toe for the web:

  • Create a 9-box square grid in HTML, each doing something when clicked.
  • Write a function that…
    • keeps track of turns for two players.
    • adds a “X” or “O” to a box when clicked based on whose turn it was.
    • checks every possible winning combination after every turn is over.
    • updates a sentence displayed in the browser with info about whose turn it is.
    • resets the game to the start state when reset button is clicked.

That’s more or less what is needed to put together a game like Tic Tac Toe. It is quite straightforward. Whenever I got stuck while coding, I just used pen and paper to rework the logic and write the code accordingly.

Meet Blue: my own little AI

There’s a second part to the challenge, which is rather open-ended if interpreted by an over-achiever (thankfully I’m not one). It reads, harmlessly:

Add a simple AI to support one player vs computer mode. Note that randomly selecting a space would count as “simple”. Try that and iterate from there.

Though not an over-achieving type, I set out to create the so-called “simple AI”. It took me about an hour to write the function that made a random box selection in vanilla JavaScript, and another 2 hours to integrate it into the existing 1-player game. After some restructuring, it worked.

tic tac toe game gif
A dialogue box pops up to announce the winner (doesn’t show up here)

I witnessed, for the first time, a computer programme that I created playing against me. It was beautiful. I smiled even though I was the only person in the room. A moment to savour!

This is the code that contained the “simple AI”, which probably won’t make sense to you without seeing the rest of the code:

Lines 221 to 238 made up just 17 lines of code. With JavaScript, that was enough to make a programme play a game with a user. Just imagine what we can do with 100 lines and greater depth of knowledge!

At this point I can already see that the next step is to write code that makes Blue—yes I named this AI after the one IBM nerds made that defeated the world’s number 1 chess player in 1997—play defensively. It should be able to block winning moves when a threat is detected (eg. when the opponent is one move away from victory). I haven’t quite come up with a way to do that without having to write out every possible threatening situation (when two of the same symbols are next to each other).

Then the logical next step after that is an actual AI that learns the best move. It should play defensively when threatened, and play aggressively to win when it senses no threats. Most importantly it should learn as it plays by having the ability to recognise patterns.

From here, those flags look so far away. Yet they are in sight, albeit a little fuzzy as to make me wonder if they are flags at all. But in that direction I will venture.

Just because it’s so fulfilling to have made it here!

Always get the basics first

classroom of students at general assembly singapore learning programming
Week 1 at GA Singapore is trying to get the very basics of HTML, CSS, JavaScript

Whenever learning something new, start with the basics. Web programming has become a mature enough industry to have its own set of community-made tools that purport to help make coding easier, but it’s a mistake to learn those before nailing down the basics, as I did.

I started learning to code on my own, in the comfort of my pyjamas at home, using Free Code Camp (my learning profile here). (Well, that was my first real push to learn anyway.) To be clear, Free Code Camp does not encourage students to pick up jQuery before understanding doing a lot of JavaScript exercises.

No, I decided to extend my projects by using libraries like jQuery (to supercharge JavaScript) and Bootstrap (to enhance CSS) on my own. It felt nice to have to write less and still have things somehow work. I didn’t think much into it then, but now that I’m enrolled in a proper web development course, I’m beginning to see how problematic this approach can be.

I never had figured out how grids work when I used Twitter Bootstrap.

I never knew how cumbersome and difficult it is to read document.getElementById(‘id’) and how .addClass() in jQuery is actually .classList.add() in vanilla JavaScript.

I never even knew that web developers ought to know that there’s such a thing as ‘vanilla JavaScript’. The community is just so active in making things easier for one another—by creating libraries like jQuery and Bootstrap and hundreds or thousands more—that a newbie would think it’s natural (and the right thing to do) to use all that are necessary for their projects. As long as it makes things easier, we’d be foolish not to use them, right?

Well, you probably sensed by now that I’m going to say, “wrong!”

Without first knowing that a grid is made up of simpler blocks—like divs, one may run into perplexing problems using Bootstrap’s grid system, which formats things into blocks nicely straight out of the box.

Similarly, using $(“idName”).on(“click”, function(){code}) in jQuery without first knowing its extremely lengthy but somewhat more detailed vanilla cousin, document.getElementById(“idName”).addEventListener("click", function(){code})), the concept of an event listener might just fly over one’s head.

And we haven’t even touched on dependencies. What happens if you created a kick-ass web app that was built on these libraries, without knowing vanilla JavaScript, and the host servers get shut down? What happens if Twitter decides, as Facebook recently attempted by adding a sneaky clause into the React.js open-use license, to revoke your startup’s license to use Bootstrap (which it developed)?

Having dependencies can create vulnerabilities for your business. Knowing the basics means being able to circumvent becoming a victim of corporate bullying by creating projects built on what is truly open-source. (Vanilla JavaScript will never be inaccessible to anyone, I don’t think, unless Mozilla wants to take down the entire world wide web!)

Boiled down, the point here is that every newbie programmer should pick up the basics of each language (HTML, CSS, JavaScript, Java, Python, etc.) before strapping booster rockets to their projects. That way you won’t ever find yourself like a penguin halfway up the stratosphere.

Nice to have a brain

classroom with people at general assembly singapore
In class at General Assembly Singapore

With the advent of affordable personal computers came a defeatist belief that “we can never beat the machines” in terms of memory and processing power. A computer’s ability to download information into its “brain” is stupendous compared to a human’s, limited by the number of transistors its motherboard contains, which has expanded exponentially for decades and only starting to plateau as scientists recently stopped being able to squeeze more transistors on the same-sized chip.

By comparison our brains look primitive. The speed at which I’m downloading information from my instructor’s speech and GitHub exercises is thousands, if not millions of times slower than the Macbook I’m typing on right now. Atom—the code editor that I’m using to write programmes—remembers all the available methods I can use on a string. Me? I probably remember less than half at this point, and will only ever get slightly further than that. To write a programme I believe I’ll always need to refer to my notes and google.

That said, it’s nice to have a brain and the memory that comes with it. When I do something for the first time, I am effectively depositing something—an etching inside the walls of my skull—in there that should be accessible information within a few days after my first encounter.

This is profoundly important. Without it I would have to take copious amounts of notes to ‘remember’ every single thing. Of course, I wouldn’t be remembering anything at all, just making notes that remembers them for me. Imagine if that was the way our brain worked – able to understand concepts but never able to store things to our memory. We would be much further back in the timeline of evolution because we’d be busy referring all the time.

Repeated access of a piece of information, neuroscientists say, will establish new neural pathways. When that happens it becomes easier, and easier, and easier… to recall something. By then, you become what society calls, an expert, a guru, a “god”.

Becoming a “god” in an industry (or more modestly, becoming remarkably effective), then, is only a lot of practice away.

What I always forgot when I pitted my brain against a computer’s is this: my brain is a million times better than a computer’s at comprehension. The choke point for us as a species is data, not concepts.

So choose which datastream you jump into wisely, because time limits us, but trust that while the download speed will be slow, your rendering speed and complexity will be phenomenal by computers’ standards.

Even though Chrome has debugging tools, it never actually debugs code for you – it relies on the programmer for that.