Great truths about computer programming

After sitting around with a few programmer friends of mine we came up with the following truths about computer programming.

  • Programming is 99% self-taught. See all that stuff you learned in that Python class? Yeah, you’re going to relearn it all when working on a real project.
  • There’s no such thing as a simple bug. A stupid mistake like leaving out a semi-colon or misspelling a variable name can easily take a week to find and fix and can cause significant loss of sleep.
  • The more code you write the more you shut up about what’s possible and what’s next to impossible. And the more you pity those newbies with that “Of course it’s possible!” mentality.
  • The language you use doesn’t matter. There’s so much fuss about which language is better for x or y. At the end of the day what matters is can you solve the problem? As a company manager, I’ll want to see a running system. Not a running (insert language name here) system.
  • Six months later, you wouldn’t recognize your own code. Documentation and comments are more of a survival tactic than niceness to whoever encounters it next.
  • Programming isn’t sexy at all. Try taking that girl home by telling her your heroic tale of saving an entire department by rewriting a recursive function to take advantage of a feature in the new server Intel chips to scale up their online orders. Then tell me how it goes.

Convert an image to a data URI with your browser

You probably know that you can use data URIs in just about any browser now, but how do you convert an image to a data URI? It turns out, most browsers can do it for you.

What is a data URI?

Data URIs are all the rage these days. They let you reduce HTTP requests by putting small images right in your HTML or CSS. For a full overview of what they are and how to use them, check out this post on CSS Tricks.

Here’s what they look like in case you need a refresher:

Now I’m going to show you how to generate these URLs using a tool that every web developer has: your browser.

Chrome & Opera

This trick works in Chrome and newer versions of Opera, since they use the same rendering engine.

1. Load the page that contains your image (loading the image directly won’t work) and right-click on it. Select Inspect Element.

2. You’ll see the console appear. Now click on the value of the src attribute.

3. The console will switch to the Resources tab and highlight the image. Right click on it and select Copy Image As Data URL.

4. Now just paste it into your HTML or CSS!

Firefox

Firefox is the easiest because it works for images on a webpage as well as images loaded directly in the browser. There’s also one less step compared to Chrome/Opera.

1. Load the image or the page containing your image and right click on it. Select Inspect Element.

2. The image will appear highlighted in the DOM. Right click on it and select Copy Image Data-URL.

3. Paste it into your HTML or CSS.

Safari

Safari is similar to Chrome, but the UI is a bit different. It’s the same number of steps, and it won’t work if you load the image directly in the browser—it has to be on a page.

1. Load the page that contains your image and right-click on it. Select Inspect Element.

2. The console will appear with the image highlighted. Click on the value of its src attribute.

3. The image will be shown in the console. Right click on it and select Copy Image.

4. Paste it into your HTML or CSS.

Internet Explorer

Alas, I haven’t found a way to copy an image as a data URI using IE9, 10, or 11, but you can use a free online tool instead.

A free online tool

Another easy way to generate data URIs is to use a free service. DataURL.net lets you drag and drop an image and gives you the resulting code instantly. So if you don’t like the in-browser method (or if your browser doesn’t support it) you’re not out of luck.

How to get the dominant colors of an image with JavaScript

color-thief

You know how Dribbble shows a color palette for each shot users upload? They always look perfect right? Here’s a tool that can give you the same quality results using pure JavaScript.

I played with Color Thief a few months ago but surprisingly never posted about it. For me, something that’s easy to use and has consistently great results is pure gold. Here’s how it works.

Getting the dominant color of an image

Generating a color palette from an image

Learn more about how Color Thief works and try it out with your own photo. The project was created by Lokesh Dhakar and licensed under the Creative Commons Attribution 2.5 license.

What about a PHP version?

It’s amazing that JavaScript can do all these great things, but if you’re running PHP on the backend then you’re out of luck. In that case, there’s a PHP port of Color Thief that you can use for similar results.

Handle REST easily using PHP

Managing a RESTful application in PHP can become a headache if you are new to REST but I have developed a reusable class function that will save you hours of development time shown below.  Feel free to reuse it.