Friday, January 30, 2015

The Super Bowl - The Only Use For Roman Numerals!

Alright, so today's comic is my poor attempt at humor combining Super Bowl advertising with online advertising. The Super Bowl is a big deal. I had to at least mention it in the comic.

The Super Bowl is actually the only sports program I watch. I hardly watch any television at all. I gave it up a few years ago and don't regret it. The only thing I really miss is seeing interesting and funny commercials. Fortunately, the Super Bowl rarely disappoints in that category.

But why would the frogs run a Super Bowl ad? Even they aren't sure what their company does, but it seems to be related to the latest trendy technologies. Tech companies have a long history of running Super Bowl commercials, going all the way back to 1984 with Apple's famous ad.

This year, a 30-second spot is said to cost $4 million. Any "normal" company would have a hard time justifying that much marketing money for one commercial. But for today's super-successful technology businesses, $4 million is nothing. Why not have some fun with a Super Bowl ad? Do something really creating and people will be talking about it for weeks. Apparently, people have already started talking about one of GoDaddy's ads...

What I find really interesting is how television commercials for things like web hosting companies have become so mainstream. I remember when the Internet was just for nerds. Nerds who never watched the Super Bowl.

Amphibian.com comic for 30 January 2015

Wednesday, January 28, 2015

I Won't Stand For This

A Standing Desk
I sit a lot. Most of the day really. I sit when I drive to work. I sit at work when I write software. I sit when I eat lunch. I sit when I drive home from work. I sit when I eat dinner. I sit after dinner when I write blogs and comics and sometimes other software. Always sitting.

In today's comic, the frogs are picking a new chair of the board, which to them means a new thing to sit on when they have their meetings. Frogs also sit most of the time, but they aren't bipedal. Humans are designed to stand up on two legs. So why do we sit so much?

It turns out that sitting all the time is probably taking years off my life. The sedentary lifestyle that so many of us have is dangerous. I need to sit less. Could a standing desk be the answer?

If you are unfamiliar with standing desks, they're basically just really high desks. Instead of a chair in front of it, you stand up to use it. You can write or type on it. Supposedly they are better for you than sitting at a normal desk all day.

I found this article on Lifehacker than can help me find the perfect standing desk:
Five Best Standing Desks
Then I found this other article on Lifehacker that can help me deal with pain caused by standing all day:
Take the Pain Out of Standing All Day
Draw your own conclusions.

Amphibian.com comic for 28 January 2015

Monday, January 26, 2015

Your Browser is Lying to You

There's a little trick I do on my comic to make sharing easier. Since the content changes three times per week, if you send someone the link to "amphibian.com" and they don't click on it until 2 days later there's a good chance they'll see a different comic than you did. That's why as soon as you navigate to amphibian.com I re-write the URL to include the id of the latest comic. Then when you copy the contents of your browser's location bar into the "share" field on Facebook, everyone will see the same thing you did - even if they don't click on it for a year.

And speaking of Facebook, you may have noticed this trick there as well. When you click on a picture, it will show up larger and cover most of your news feed. If you take note of the URL in your browser, it will change to a direct link to that picture. Copy that URL and use it later, or give it to a friend, and it will take you right to that picture.

You are looking at www.facebook.com...
...but click on that picture and the URL changes!

But technically speaking, your browser never left the page it was on before you clicked on the image. Just like amphibian.com doesn't redirect you to a new URL when you first visit the site or even when you navigate around using the "Previous" and "Next" links - the URL bar can lie to you!

Doing this yourself is fairly simple. Look at this code:

var newPath = "whatnot";
if (history.replaceState) {
    history.replaceState({
        nowShowing: newPath,
        yourData: "whatever you need",
        storeIt: "in this object"
    }, "page title not really used", newPath);
} else {
    // you are using an old Internet Explorer
}

The history.replaceState function is what makes the magic happen. You should check to see if it exists (I still hate you, IE 9) before calling it, but I haven't found a good fallback option or polyfill. There are some that try, but in my opinion they aren't worth the hassle. Anyway, let's unpack this a little. The replaceState function takes 3 parameters. The first is an object. Any object you want. More on this later. The second parameter is the page title for the new URL. Nothing is really done with this, but it may be used someday according to the browser documentation. Just put some text in here and forget about it. The third parameter is the new path. In my example it's "whatnot" - so if you were to execute this on www.example.com, the URL would change to www.example.com/whatnot.

Alright, so what's up with that generic, whatever-you-want, first parameter object? It comes into play when the browser's back button gets used after you've changed the URL. To have consistent behavior, you need to handle what happens when the user wants to return to where they were before you changed the URL. For example, I change the URL to www.example.com/whatnot, based on something on which the user clicked. Then I change it to www.example.com/something when they click on something else. Then they hit the back button. The browser takes them back to www.example.com/whatnot - but they didn't really never left the page. I have to know how to re-create what I had on the screen when I made up the /whatnot path in the first place.

To handle situations like this, bind a function to the "popstate" event on the window object. This function will be called whenever the back button is used. In it, you can access that object you made when you replaced the URL. Just put enough information in there to recreate the user experience you created the first time you changed the URL. Here's an example which uses jQuery for the even binding:

$(window).bind("popstate", function(event) {
    var s = event.originalEvent.state;
    if (s && s.nowShowing) {
        console.log("welcome back to " + s.nowShowing);
    }
});

Your object that you passed in to replaceState is now available via the event.originalEvent.state object. So when /whatnot becomes the URL again, you'll know as long as you put some identifying information in that object. In my example, the field nowShowing contained the path.

These tricks are often useful when developing something like a single-page web application and you want to gracefully handle the back button, but clearly they have other applications as well. Just another browser/JavaScript feature to think about when you are looking for creative solutions to web-based problems.

Amphibian.com comic for 26 January 2015

Friday, January 23, 2015

Portmantoad

Not since the spork has a portmanteau been as beloved by the tech industry as the acqui-hire. These days, it seems like the best way to get a job at a big-name Silicon Valley company is to start your own small, insignificant company and wait to get acquired.
For Sale: Team. Used but in good condition.

There is some debate over whether or not the practice of buying a company just to get its employees really works. I think the biggest benefit has to be the fact that the larger company can immediately get a team of people who already work well together. If they can keep that team together and redirect them to some other (possibly related) project, it could be much easier than trying to put together a new team. The downside is that they may be paying more for the team that it is really worth.

I believe team dynamics have been overlooked for too long when explaining why some projects succeed and others fail. But think about your own experiences. I know when I have been forced to work with people who just didn't get along, it didn't matter how talented each of us might have been individually. The project fell apart. That doesn't mean that anyone in particular was to blame, but the team as a whole just wasn't right for the task.

But when I am able to pick my own team, or when I work with friends on a project, it seems like nothing can go wrong! Or at least, nothing that we can't overcome.

Getting the right team together is difficult. When a company is small, the team grows by current employees getting their friends to come join them. Thus the team tends to work well together. At a large company, a team can be formed by a manager picking people out of a database of names and skills. It doesn't have to be like that, however. If the manager had access to some sort of personality profiles along with skill profiles, algorithms could be used to select better teams. It would be a bit like online dating - employees fill out profiles and get matched up with other employees with whom they would work well. I am not aware of any companies that have tried this, although there may be some.

The frogs have their own unique take on this practice today.

Amphibian.com comic for 23 January 2015

Wednesday, January 21, 2015

The Origin of Toads.co

Today's comic got a little complicated. So some sinister-looking toad has started a new company to compete with Amphibian.com and has hired away all the worker frogs. Since everybody's over at the other company today, the comic is actually at the toad's company website - toads.co.

I thought it would be simple to point toads.co to the same server as amphibian.com and have the application just use a different stylesheet when the toads URL is detected. As it turns out, it wasn't really that simple.

One of the things I forgot about was how picky browsers can be about cross-domain loading. While there's no issue with sourcing images or JavaScript from other domains, I ran into a minor issue with Font Awesome loading font files cross-domain.

If you haven't heard of Font Awesome, you should check it out. By creating a custom font of pictures (remember Wingdings? It's like that, but useful) it essentially gives you a library of scalable vector icons that can be customized with CSS.

Due to the way Cross-Origin Resource Sharing is designed, a server is expect to specify in a response header if the requesting domain is allowed to use a web font. The header is called Access-Control-Allow-Origin. If amphibian.com is hosting the font, by default only pages at amphibian.com can use it. But if I add the special header to the response when I serve the font, I can specify other domains that are allowed to access it.

My goal, therefore, was to set the "Access-Control-Allow-Origin" header to "http://toads.co" so my social media icons wouldn't be missing when viewed from toads.co. Initially I wasn't sure how to do that, since all static content is served automatically by Express's static middleware. This is the only middleware that is still "built-in" to Express, but it is really just a wrapper for the serve-static module.

To add a certain response header to only some files, I had to supply a setHeaders function when I set up the middleware.

app.use(express.static("public", {
    "setHeaders": function(res, path, stat) {
        if (path.match(/\.(ttf|ttc|otf|eot|woff|font.css|css)$/)) {
            res.setHeader("Access-Control-Allow-Origin", "http://toads.co");
        }
    }
}));

Personally, I think the name of the function is a little misleading. While the intention is certainly to give you a place to set headers, you can pretty much do whatever you want inside. You get access to the response object, the path of the request, and the file stat for the file at that path. There's a small caveat - because the function doesn't return anything, you can't really make any asynchronous calls that defer any processing. You have to do whatever you need to do synchronously. Set the headers you need to set and move on.

My method simply checks to see if the requested file ends with one of the font extensions, and if it does the special header gets set.

I set out to do something that I thought would be simple, and ended up learning something new. Not a bad deal. I hope those frogs got as good of a deal at their new jobs...

Amphibian.com comic for 21 January 2015

Monday, January 19, 2015

Do Crazy Perks Attract Crazy Employees?

At my job we get two perks in addition to our salaries. One, we get free coffee. And two, we get the privilege of working there.
I Love Free Coffee!
Photo by Nevit Dilmen

Once I worked for a guy who constantly reminded us that he shouldn't even really be paying us. We were learning so much from him, he said, that we should have been paying him to work there. I guess since he couldn't find people to take him up on that offer, he had to resort to paying me.

Needless to say, I'm really not accustomed to the crazy perks people get while working for Google or other trendy and cool software companies.

Still, looking at the list of benefits Silicon Valley software companies are offering makes me jealous at times. Free lunches. On-site barber shop. Massages on demand. Free dry cleaning. Free bus to work with on-board WiFi. Almost makes me wish I went to a better university so I'd have a chance at employment with one of those companies. I guess I'd have to be really smart too. And an amazing software engineer. Oh well...

The cynical side of me wonders if the companies really offer those perks because they want to make their employees so totally dependent on them that they can never quit. If you always get your hair cut at the Google barber and get all your laundry done at work, you seem pretty dependent on your employer for more than just your paycheck. The line between home and work is blurry. Your whole identity is wrapped up in the company for which you work. Could be dangerous.

But I don't have to worry about any of that. Perks are overrated. I don't have to pay my employer rent for my cubicle space, so I'm happy.

Amphibian.com comic for 19 January 2015

Friday, January 16, 2015

At Present, I Present to You This Present.

Venn diagram by Cmglee
Which, of course, means right now I'm giving you a gift. What is the gift? Knowledge!

Today's comic, while wrapping up the frogs' experiment with streaming music, presents you with some homographs that are heteronyms. Huh?

Jokes based on heteronymic homographs really only work in print. Homographs are words with different meanings but the same spellings. You need the context in which they are used to guess at the correct meaning, and I purposely used ambiguous context.

But if you were to hear the words spoken there would be no ambiguity - at least in this case. That's because the words used in this comic are also heteronyms (or sometimes called heterophones). That means that they are pronounced differently.

Homographs are either heteronyms or homophones, and if they are homophones they are also homonyms.

Homophones are pronounced the same but have different meanings - and depending on if they are spelled the same will be either homonyms (same spelling) or heterographs (different spelling).

I think the Venn diagram helps.

Puns, which I use extensively, usually involve homophones. Phishing and fishing, for example (and they're heterographs).

The downside of this comic is that it probably only works in English. Anyone using Google Translate will most likely be disappointed. Or confused. Perhaps both.

Amphibian.com comic for 16 January 2015