Actual Algorithms (Are Fun)

As a computer scientist, I get pretty annoyed with the constant cultural usage of the term algorithm. There seems to be an unwritten rule that whenever a technical concept is brought into the mainstream cultural discussion, it will be bastardized into the void away from its original meaning. Nowadays it’s used to denote “that internet code.” People talk about the YouTube algorithms, the Facebook algorithm, the Google algorithm, the Amazon algorithms, the Twitter trending algorithm.

I hate these people. Ha, I try not to hate the people, just the behavior. Yet that is certainly one of my pet peeves – people using technical words without conveying what the words actually mean, commonly because they themselves don’t actually know. Poor usage spreads and the word loses meaning. To contrast, you can check wikipedia on algorithms. It’s dry reading and believe me, that’s a feature and not a bug.

To those who are always talking about “the algorithms”, kindly be a little more wary. Most of your online experience nowadays is governed by machine learning statistical engines with very big tables and very fancy heuristics, but it’s really arcane and not very algorithm-y, which is near the root of many of the controversies. For instance, a trainable neural network that you can teach to recognize written numbers is easy enough to do but no expert doing it knows how, and it only works most of the time. If we did, we’d have much cooler algorithms. We don’t, so Google uses their I’m-not-a-robot CAPTCHA to force you to help them train their bots by labeling crosswalks and stop signs. Algorithms are an actual thing, not fancy models that work most of the time.

Precise definitions of the word algorithm can convey to someone educated on relevant subjects a whole rainbow of ideas, thoughts, and worlds. The word algorithm should be like the word library, a word that can connote the Dewey Decimal System, that crazy lady you feared when your books were overdue in school, or rows and rows of books above your head, and that lovely smell of old books – there really is nothing quite like it. Algorithms, similarly, should connote to people titans of technology, pioneers like Turing or Knuth, magical answers to age-old problems, famous puzzles and thought experiments, and math tricks to solve the unsolvable.

Let’s make a definition, what should be denoted:

Algorithm – a finite sequence of well-defined instructions, typically to solve a class of problems or to perform a computation, in a finite amount of space and time, in a well-defined formal language.

This is my own definition, contrived from that wikipedia article I told you to look at. There isn’t an agreed upon precise definition philosophically, partly because of its extremely meta-abstract (even the abstractions are abstract!) nature. (See arcane bickering here).
I’ll emphasize a few things here then we’ll move on:

1. It’s finite. That means it can be complicated but not infinite.
2. well-defined. A good one is like 2+2, there’s no nuances.
3. “instructions” is a great almost-synonym.
4. it’s instructions to compute or solve a problem.
5. it’s useless unless it uses finite (not-infinite) space and time. This is a big attribute I’ll detail in a bit.
6. “in well-defined formal language” they are somehow logically defined, and Spock must approve on the minutia.

If math is mostly playing with nouns, algorithms are mostly verbs. In some sense, algorithms are the playing.


How is this fun? I hear you. I want to talk about what the word should connote, rather than denote. I want to give you a feel, not a definition. Let’s talk about the most fun and easy introduction to algorithms: sorting.

Sorting problems are every computer science nerd’s first fun project. Given a list of random items, like socks or numbers or people of different height, what’s the fastest way to put them in order?

Simple problem, right? WRONG. As it turns out, which way is faster depends on the data set and what ways of shuffling them around you have available. Some of the fastest ways of sorting are actually terrible if they’re already almost in order. And then if you have extra space to make copies or take notes as you sort, you might be able to sort faster in less steps. That’s called a space-time trade-off. Towers of Hanoi is an old puzzle game that on the other extreme makes you sort with as little space as possible. It can be converted into binary because it literally can’t be smaller. (More on Towers of Hanoi and math)
More variables and options is more space, and more steps is more time, and you might decrease one by increasing the other.

Here is a brief introduction to sorting algorithms. I’ll summarize a few classics and have a link for more info. Gifs will make them fun. Wheeeee.

Bubble Sort
Are we done moving yet?

Bubble sort is the sort almost everybody thinks of first. If you haven’t read ahead, come up with your own sort first and see if it’s this one. It sucks, but don’t be ashamed. It’s a start.
Step 1: pick a pair of things and swap them so they’re in order.
Step 2: repeat moving groups around until they’re in order.
It sucks because it’s O(n2), which is math talk for saying twice as many things to sort will take 4 times as long. You want your sort to take O(n log(n)) or O(n) if you can manage it (and the O(n) ones are usually theoretical or complicated).

Insertion Sort
Brrrrrrrrrrrr

Insertion sort also sucks (O(n2)) and is like another flavor of bubble sort with its simplicity.
Step 1: Grab the first two items and sort them
Step 2: Repeat adding the next item and putting it where it goes

This might be the other one you thought of. It’s not that bad IRL. Very little to keep track of if you don’t struggle making room each time.

Selection Sort
And the next one, …

Selection sort sucks even worse than the above because it’s O(n2) in the best case. The other ones can be more like O(n) if you’re lucky.
This is the first one I think of.
Step 1: grab the biggest or smallest thing and put it on the end
Step 2: grab the next biggest or smallest thing.

The problem is you have to spend your time looking at everything for the next one, every time. It’s a good one to think about however, because if you managed to keep track of what you found as you compared them the first time, you might be able to make a space-time tradeoff.

Quicksort
Kids in the front! Smile Timmy!

Enter Quicksort. The name is a dead giveaway. This is the not-so-humble “hahaha rekt” sort that kicks butt most of the time. Don’t think of it as the fastest sort. Think of it as the arrogant sort that has weaknesses but is usually so good it makes other sorts mad. It divides and conquers.
Step 1: pick one thing. call it the “pivot”. Pick the middle or randomly, people argue over how to pick a pivot.
Step 2: move smaller ones to the left and bigger ones to the right.
Step 3: Take each half and repeat, going deeper. When you only have 2 left, put them in the right order and you’re done with those.

It’s a devilishly elegant O(n log(n)), but can take O(n2) if unlucky. Sometimes the hare takes a nap and oversleeps.

Mergesort
Alright gang, let’s split up!

Mergesort can go almost as fast as Quicksort, but it doesn’t trip at the finish line at random. The idea is divide and conquer O(n log(n)) like Quicksort, but from the other direction where you combine and conquer.
Step 1: Split in half, then repeat until it’s all groups of one.
Step 2: Go backwards to the last step and combine those two sorted, then three or four, until you’re done and it’s sorted.

It requires you to keep track of a bit more, but I’ve heard it said operating systems can do it fast with files. Notice it may use more space, and takes less time! I’m sure I could make a Fullmetal Alchemist joke here about the law equivalent exchange.

Heapsort
Like I said, complicated.

Remember when I noted some faster ones were more complicated? Heapsort is a last one I’ll mention. Remember when I said Selection Sort was good to think about because it’s easy to improve? This is where you can end up if you chased that white rabbit (wild goose?) of keeping track of what’s sorted. It can compete with Quicksort and Mergesort.
Step 1: Build a heap.
Step 2: Sort it by swapping one not sorted with the top and trickling down
.
What’s a heap? It’s a binary tree like you’ll see in the gif. You build this tree and then sort them so the big ones are at the bottom, by finding a little one compared to its parent and then swapping it with the top one and bubbling it down. The secret is mathematically the number of changes you have to do is O(n log(n)) once you’ve built the heap, because as you move each new one down into its right spot, you only have to look at a few, you forget about the other branches. Do some more research if this is the only one that confuses you. There are several ways of doing it.

Takeaway

Learning algorithms is a lot like taking a ride through a series of thought experiments and seeing how fast or high the roller coaster is. It’s educational to realize how many different ways you can solve a simple problem, and that crucially, not all ways of solving problems are remotely equal. And if you find a better way than anyone else, you’ve added to humanity’s genius.

Let me know what you think because if I can get people interested in the subject I’d love to do a series on algorithms. Searching graphs and hard problems and puzzles and riddles that if you solved unlock secrets of the universe are worthy of talking about. Algorithms are at the heart of our best known ways of solving problems. It’s a good mental exercise to answer a question correctly multiple different ways. It might even make you smarter.

Material Design: Meta-Aesthetic for Noobs

I’m still stuck on a problem with my React Native code handling events, so for now let’s…talk about something else. Design.

One of the skills everyone who has modern dreams of making things needs to have is design. Unfortunately, too many artistic people get so wrapped up in their own aesthetic they make things horrifically unwieldy. Incidentally, the same problem happens with scientific and rational people, who get so caught up with abstract functionality they too can bury it in plain sight.

Google decided the world needed to merge the arts and the techs into something that made sense in all resolutions, so they started a project that I still revisit again and again, and it’s called Material Design.

You’ve seen it before. It’s an attempt to make user interfaces on apps for desktop, web, mobile, tablets, … pick your screen, to not be terrible. Apple are the only big holdouts trying to do their own thing, but if you use anything else, you’ve seen it. Windows 8 onward uses parts of it. It’s not the only design system. What’s important to understand is that it is a very good system that gives the average person an easy go-to for making something usable.

I highly recommend, if you have any desire for taste at all, that you spend some time with it (if you haven’t heard of it). You don’t need to be in my line of work. It’s about learning how to convey a brand or identity. Start here. They offer seven studies they did, seven comprehensive thought through examples across industries and products, to design fictional apps to show what it would look like.

Seven Designy Samples

Basil is a cooking and recipe example with an eye to food. It’s green and orange on yellow scheme is one that would make little sense anywhere else. It’s all in on evoking something memorable and showing off a list-making app of ingredients and instructions with pictures. It’s a catalog architecture, like a library.

Crane is a travel and booking example. If anything it shows that even purple can be made professional. It’s a great education on calendaring, communicating options with locations, outings, and availability. They show off picking an airline seat and timetables, and then cover doing a checkout or browsing resorts. It relies on a flow architecture, the pattern of having a linear process of steps for the user to walk through.

Fortnightly is a news example. Simple enough. Wouldn’t surprise me at all if you’re more familiar with apps designed like this. It’s all about content, content, content. Articles everywhere, a search, and readability maxed a user can get through what’s being said. I think it’s a good way to show having a memorable brand while still being super mininal, and out-of-the-way “read-friendly”. It’s also a catalog structure like Basil.

Owl is an education example. It goes hard for vibrant primary colors. The spirit of it is to have totally different main colors depending on what you’re doing, giving you a way to have multiple aesthetics within your one aesthetic. They use yellow for customizing, blue for browsing, and a red/magenta accent for the learning process, which shows a plain white or dark mode for learning/reading and watching videos. The architecture is hub and spoke, where each section has a hub, and each hub has leaf nodes – the “spokes” are the lessons in a course hub. Think of it as a tree structure, but designed as if it’s just a couple tiny ones, each root is the hub, with a bunch of immediate leaves.

Rally is a money example. It takes night mode and runs with it. The color emphasis is subtle gray variants, with a rainbow of thinly used palettes, using one accent here, and another there. The focus of this one is data representation. Bars, pie charts, graphs, wheels, goals, up/down fluctuations, and transaction listings. It also focuses on doing good warnings and other notifications. It’s a hierarchical structure.

Reply is a communication example. It’s modeled after an inbox and smells like GMail (gee, i wonder why /s). Man if only GMail was as nice as this however. It’s plain like Fortnightly, but picks excellent accents. This one shows off a text-with-pics communication medium. It shows a way to cram people into an interface with nice little avatars or “to:” fields.It has an inbox-like architecture, we’ve all used one. You have inbox,trash,drafts, etc.

Shrine is a retail example. Kinda has an Etsy or Pinterest vibe, but soft pink. It puts emphasis on how to give each image maximum attention, with some very unusual organization approaches. It does color and size selection components, but the primary goal is to give way to the products themselves, to make whatever image is placed on it pop. One pattern it shows is having a cart. As you might guess, it’s a catalog architecture.


Each of them gives you a different example of how to take a very particular kind of data and make it do its job. Basil is recipes(lists+instructions), Crane is linear signup, Fortnightly is journalism, Owl is schooling, Rally is number crunching, Reply is socializing, Shrine is sales. The seven can show a how-to, plan, read, learn, calculate, correspond, or buy design setup, respectfully.

One of the most painful parts of seeing good design studies is you’ll wish you could use these very apps that are pretend. I love Fortnightly’s aesthetic so much I’d wish to see it repurposed for something bigger than mail. I would have to put Shrine as least impressive myself, but it’s not meant for people like me so maybe I’m biased. Which one is your favorite? Least? Which one do you think does its job best?

MOAR Three.JS

I am going to be writing a lot of articles about code in the coming months, and I’m doing some of one project in Three.JS.

Three.JS is (in my opinion) the first good raw JavaScript 3D rendering library and I find it to be the bomb dot com. It leverages WebGL stuff that’s been around a long time but hasn’t been super duper well kept up with or used in most mainstream web applications to my knowledge, which I find to be an absolute travesty.

Well, you might be interested to know that means I’ll be trying to include some interactive 3D rendering in my articles like this. If it ever stops working I ask that you let me know, but I think it’s going to stick around and be epic.

With thanks to ThreeJSFundamentals.org for this one, I figured I’d demonstrate this as a quick proof of concept for how far you can go with articles. Who needs to stick to flat test or even mere pictures when you can embed an entire videogame in your article if you wanted to?
Let’s GOOOOOOOOOOOOOO (note to self: get DOOM as an embed)

We’re living in a new age where crazy things are becoming possible, and I really want to open people’s minds to the possibilities, and I think this is one way to do it.

This has been a rough year for people’s optimism and I think we all need to be reminded every now and then that we are living in the greatest time in humanity’s history SO FAR. We’re just going crazy stuck at home or bored, or having issues with an unstable job market and tough finances. We’re seeing negative things people of ages past couldn’t see, which wouldn’t have to affect us but that we let make us anxious and depressed. We need to be looking for the good in the world around us because there’s plenty of that present too.

Stuff is cool and technology is awesome if you learn how to leverage it. Who knows, maybe I’ll write articles with the sole purpose to give you mini-games to play with when you’re bored. I’ll have to take a few weeks and make a template first so I can spin them up quickly, but if I can manage such a project, you and I are gonna have a lot of fun together, dear reader. Who knows, maybe I’ll start a trend and be the first blog of many like this?

I think we have a great opportunity ahead of us in coming years where we’ll be able to have another generation of the internet much like the flash-games era of so many years ago. At least some of us like myself miss those days. Those were good times. New technologies are being designed all the time and improvements to make it easier for people to develop.

Again, let me know if you can’t see it rendering. It should be rendering on mobile too. It’s well supported by all the browsers now. If you’re interested in learning more, you can go play with the threejs.org toys. Go have fun! there’s a bunch of them. You can play a french pinball or just go on this acid trip, headphones on.

Into the Bloggerverse

Want to start your own site? I’ve been wanting to put this site together for a while and I just never really got around to it until now, but it’s overdue and definitely time. Here I’ll mention some of the adventures so far.

I expect to focus primarily on my technical adventures in computer wonderland, and this blog is one of them so LET’S GET META.
I’ve only dabbled in WordPress a little bit and I’ve never set up my own instance so the setup is going slower than I like. What’s nice is they use the same exact interface components as wordpress.org/themes on the backend so I’m able to have friends help me dig through the layouts until I find one I like. I want to keep it minimal and user friendly, I don’t want to hit you in the face with massively useless pictures nor walls of text. I want to be helpful.

We’re on Day 4 and so far we have the server up, secured, stylized, and now I’m beginning to add other content pages. I’m going to try and write something every day. Here’s a few technical considerations I’ve encountered:

I owned the domain name I bought from Register.com for a few years, and the one thing that took a few days was realizing to have it work and the HTTPS lock, I needed to update my IP properly on register.com’s site and then change the name servers on that awful site to point to the DigitalOcean ones, in addition to using the letsencrypt.org tools on the command line.

I love DigitalOcean. You can run a website for $5-$10 a month, the cost of a music or TV subscription. Not getting paid to say this but I definitely recommend them, they’ve been reliable for me for years, and they have automatic preset installs like WordPress. I just had to say go and in under a minute I had a new Linux server to log into and fiddle with, that mostly worked as WordPress already. Be sure to update from the WordPress user interface, but if you focus on that side you should be able to get most of the setup happy using WordPress plugins and not worrying about the Linux side too much.

I’ll pick a lesser-known plugin to tell you about since I’m here: take a look at WP Night Mode. I made my site have a Night Mode toggle and set it on by default. Those who know, know. And to the rest who want it light: what’s wrong with you? and also you’re welcome. It takes a little setup of the colors you want it to use and you’ll want to use the shortcode wherever but I can’t recommend it more.

Some “fiddly” items of business you’ll want to deal with:
1) Go into customizing/themes and get to site identity and make sure you have an icon other than the WordPress one. Try to brand yourself a little bit.
2) Get stock images at Pexels, Unsplash, or Pixabay. I recommend searching them all when you’re looking for something specific. I’m traditionally a Pexels user but Unsplash is really coming through this week.
3) Find a plugin (I settled for the Yoast SEO one) that will put the featured image for your article in a link preview on social media. Test that and make sure it works, you want to come off professional and not a data-less link.
4) Find your menu and your sidebar for widgets and get those looking half decent. Get rid of any theme clutter you don’t explicitly want and organize the site so people can get around it easy. Remove any redundancy.
5) I’ll restate what I said above, get that HTTPS and lock icon ASAP so you don’t seem sketchy. You can grade your server at SSL Labs. Use other browsers and incognito to test because caching will make it act up even if it’s fixed. I took SSL Lab’s advice and disabled TLS 1.0/1.1 on my server.
6) Sort out Settings->Permalinks immediately. Once you decide how URLs are done it’s somewhat permanent or you break all your links on the web. I had to install Redirection to fix the ones already out there in the wild.
7) Under users you will find your avatar. Apparently you set it by making an account on Gravatar and it will show up soon once you have that set up.
8) Figure out how you are going to do categories and tags quickly. Don’t be using that stupid “Uncategorized” one. Categories are genres, and you should only have 2 or 3. You might even only have one. All else is a matter of tags. It takes time to figure out what they should be, but once you have a dozen or so posts, you should have more than enough info on what they should be.