Adventures of in the land of pixels and code

The Quick And Simple DSLR Camera Guide

Written on December 3rd, 2012. Check out the comments and discussion, too!

So you want a DSLR. Those big, hefty, expensive cameras, but with top quality and also a mild fashion statement. You search the web for them… And there are hundreds. So where do you start? What brand do you even pick? And do you even need one?

My short answer: Get a Canon; Only if you take photos.

Yeah, I’m totally biased, but I have reasons. And it’s better to be biased than to not have an answer.

As for which camera? You’ll probably want this baby:

This photo nabbed from Sean Hollister of The Verge — go read that, it’s a good review.

She’s called the Canon Rebel T3i/T4i in some places, or, in Asia, the EOS 600D/650D (they’re similar — more later). Or, if you’ve got more money and want to step up, go for the EOS 6D.

So here’s why — and take note, there are some important things to remember.

First, Canon names their cameras with the lower numbers being better/more expensive. So yes, the “best” one you can get is the EOS-1D for some $5000. Yes, you can get, like, 3 top-end laptops for that much.

Second, the inter-generation changes are often tiny. The Rebel, for example, changed very little between the T2i, T3i, and T4i (that’s the 550D, 600D, and 650D in Asia). There are a few changes, like the touchscreen display and color tweaks, but they’re not huge bumps. For that, you need to hop between consumer levels. You have the low-ends like the 1100D, the average 650D/Rebels, the somewhat-pro 60D (overpriced Rebels, skip ‘em), the higher-up 6D, and the ridiculously high-end 1D. Get the idea?

The Rebel T3i/EOS 600D, or one of its older siblings, is probably good for most DSLR needs. It’ll take the clean photos you need, without breaking your budget.

It costs about $600 for the base kit — these things come in kits with their lenses (or you can buy just the body, if you want). There’s also a second, overall-better kit choice with a different lens. Indonesians, you can nab it from Bhinneka right over here. Remember: don’t worry too much about the price. I’ll show you why later.

The Rebel series, again, don’t have much differences. Here’s a Verge comparison page.

Now, if you really want to level up, you can go for the “full-frame” 60D. A full-frame camera, aside from being generally “better”, naturally has a wider angle of view. It does sport the additional benefits of better structural integrity, and minor bumps here and there. For a price.

But read on before picking.

Hang On a Sec, Do I Really Need One?

So now that you’ve seen the pretty camera, do you actually need it?

DSLRs take much better photos than your average smartphone. No matter what Apple, Samsung, Nokia or whoever says what, they’ll almost always lose to DSLRs. And even the really, really epic ones — like the insane Nokia 808 Pureview.

Yeah, seriously, a phone took that. The 808. Photo by Vlad Savov of The Verge — more photos there. Man I love these guys.

That’s because DSLRs are single-goal tools: they take photos and video. They practically always have better battery life, storage options, and adjustments than any “camera-on-a-phone” tool. And even if the phone tries, DSLRs are heavy, and that’s good for image stability. You just can’t have a heavy phone.

Now, DSLRs are a bit above the price of a good smartphone. So choose wisely. They’ll always take photos better than your phone, but image quality doesn’t always matter — it won’t mean much if the photos get squashed to 640x480 and uploaded to Facebook.

What To Check On A Camera’s Spec Page

Like other gadgets, DSLR spec pages are wildly scattered with numbers and code. It’s important to make sure you know what to look for.

Don’t be fooled by megapixels. You know this from smartphone cameras and those “pocket digital cameras”. Always, always check out the other specs.

Shooting speed. This is a big deal — and you’ll usually have to google this, because manufacturers don’t always tell you. This refers to the delay between photos if you hold down the button. The Rebel T4i, for example, takes 5 per second, while the T3i only takes 3.7. This is especially important if you need to snatch quick-moving shots like sports, animals and “candid” humans. Sometimes you just gotta get the shot at the perfect time, and “3-2-1-cheese” just won’t do (and rock bands are notoriously bad at posing for photos).

ISO. ISOs are basically “brightness settings”, though that’s a terrible oversimplification. Higher ISOs let you shoot when it’s darker, but they add more noise. Lower ISO shots are less noisy, but often darker, especially indoors. Now, a lot of cameras offer huge ISO settings — but again, think about what you’re doing. Will you do a lot of night photography?

GPS and Wifi. You alone know if you need those features. I like GPS for tagging my photos automatically, but you don’t really always need that, unless you take a lot of photos and location is important. Like if you take wildlife shots or landscapes.

And… What About Accessories? Lenses?

Bad news. Remember when I said not to get too affixed on the camera’s price? It’s because the good lenses are far, far, far more expensive. But the one with your kit is decent, and there are some cheap-yet-good lenses.

The first Canon lens you probably want is the Canon EF 50mm f/1.8 II. It’s a very simple-to-use, somewhat-telephoto-ish lens. It’s surprisingly cheap — less than $150 (Indonesians, here’s your link). Cheap, practical, loved. Why not.

A few things about lenses. The “IS” stands for Image Stabilization — basically, the lens will stabilize itself. The “USM” marker means it has a more quiet motor when it autofocuses.

So what lens do you need? Well, depends on what you’re shooting. For example, sports and wildlife photography love telephoto lenses (warning: expensive). Scenery shots will like bigger-angle lenses. There are separate macro photography lenses. And playful fisheye lenses. My favorite technique is to hunt down cool photos on flickr, and see what lenses people use.

Get one or die trying. Link below.

Get a tripod. I’m waiting for my shipment of the amazing Folding Tripod from Photojojo. Not expensive, but also not that sturdy — but mobile enough for me. You should also get bigger, more stable tripods if you can. These are especially important for low-light shots, because they blur easier. (Tip: Don’t use a lightweight one with kids around unless you want to see a lot of money in shattered-glass-and-plastic form. Still great — just be careful.)

You may also be interested in getting a microphone if you take video, especially if your lens isn’t labeled “USM” — it’ll make sounds when it focuses.

Oh, and make sure you get a lens cap.

So Why Canon?

Big lens ecosystem, and pretty good support if something goes wrong with your camera. I won’t mess around. Many other manufacturers have really cool cameras too. Check em out. Do your homework. You won’t really go wrong by getting a good Nikon, Pentax, or Sony.

I just stuck to Canon because…

Buy One And Get Over It

Like many gadgets, a lot of people are afraid of their camera going out of date, falling behind on some new feature or generation, or something like that. Good news: That’s not really an issue in the DSLR space.

DSLR technology, while progressing, is very incremental. And for good reason: the technology is basically near-perfect. Sure, they’ll improve speed or focus or capacity or megapixels, but they’re already using premium technology like solid-state memory and high-quality optics. There aren’t very many huge improvement you can do to a camera. And as I just showed, even the years-old Rebel T2i is a fair camera. So don’t worry. Grab one and start taking good pictures.

I’ll add a follow-up post on flash, tripods and other lenses soon, when I have enough to compare.

A Web Developer's Ultimate Hardware Toolset

Written on November 23rd, 2012. Check out the comments and discussion, too!

I started developing with a rusty ol’ 15-inch LCD screen and an ancient Windows computer. I eventually learned a lot from my fellow craftsman — most importantly, that I’m missing out on a lot.

Sadly, a lot of developers don’t realize this — especially the guys trapped in a corporate cubical somewhere.

I’m going to throw out what my friends and coworkers suggest in terms of hardware. They’re not cheap, but they’re also not ridiculously expensive. They’re basically just my favorites.

It’s also not, obviously, exhaustive.

P.S. There’s a very pretty surprise waiting for you at the end. I’m serious.

Keyboard: The Das

Ah, the Das Keyboard. Also known as the “no, you can’t borrow my computer” keyboard.

I mean, just look at it.


I’ve found that using the Das keyboard improved my coding time — and typing skills — considerably. It helps me trust my fingers more, which in turn speeds up work. It also has amazingly sharp feedback upon every key press.

I won’t lie, it takes a while to get used to the nonexistent labels. Some less-used keys can be a bit hard to reach. But when you do get used to it, everything changes.

I’m also a fan of the standard Apple keyboard for normal use, but I’m edging closer to use the Das full-on.

Price: $120, and quite a few stares. Here it is on Amazon.

Chair: The Herman Miller Mirra

The Mirra, next generation after the classic Aeron. Look at this baby.


Fully adjustable and really, really comfortable.

I believe in purchasing good furniture, even before buying any electronics. You’re going to keep that tablet or desktop for 3 to 5 years, tops. But a top-notch chair can easily last 8 to 10 years, if not more. So if you’re already buying $1500 computers, why skimp off a good chair?

A good chair, along with good ergonomics, can easily save you a lot of time flexing your wrists and getting massages. This is seriously a big deal. Your elbows, wrist and back are some of your biggest assets.

I got mine from XTRA, over in Singapore. The normal price is around $500. Come on, that’s cheaper than a good display.

Speaking of displays…

Display: Apple’s, or Dell UltraSharps

Oh, boy. Apple (do I really need to link that?) displays are known to be quite well calibrated. As a designer, color calibration and sharpness is crucial. I cannot understate this — most everyday displays are crap. And there’s nothing more embarrassing than seeing a print-out in a completely different color from what you were planning.

You can color-calibrate most decent screens. But not all of them can actually get to good color accuracy. In reviews, they tend to check this in terms of “92% of sRGB” or something like that.

Also, you want an IPS display. In-Plane Switching allows you to have better viewing angles, and colors that break up less as you move around. This is even more important if you have multiple displays, which you totally should. Have at least 2 displays.

Apple displays are always pre-calibrated out-of-the-box (which is, well, expected, given they also make the OS), have good color accuracy, are IPS screens, and are about the correct brightness. Note that I said “Apple display”, not just “MacBook” or something — this is because the iPad has a seriously accurate display from the 3rd generation and above. Many tablets I’ve tested have badly matching displays, once I hold them up next to a calibrated screen. This means you can get away with using an iPad for color checking.

Now, if you don’t like Apple (and if anyone screams “OVERPRICED” at this point, they’re going to look silly), you can take a look at the Dell UltraSharp line.


These are Dell’s top-of-the-line screens. And boy are they pretty. I have one sitting alongside my iMac right now. They have the same basic properties as Apple displays, but with a wider range of sizes and resolutions.

Additionally, many of them allow you to swivel to portrait view, which is awesome for code. They also support various other input types, unlike Apple’s Thunderbolt display which just allows, well, Thunderbolt.

You’ll notice that the prices are practically identical for Dell and Apple — so you can really just go in and do a feature-by-feature comparison.

A 27-inch screen — probably the biggest you’ll want for a dual-monitor setup — goes for about $1000 (both the Dell UltraSharp 2711 and the Apple Thunderbolt Display.

Note: There’s a new iMac just out, which includes a fancier body shape and USB 3.0 ports. We don’t know if they’ll update the Thunderbolt Display to match, but it may be worth a wait.

Coming Up

In the next section: Mice, “companion screens”, drawing tablets, wall mounts, lamps, paper, and more. Much more.

For now, have a peek into the future and check out the absolutely fantastic Leap Motion.

Yes, I’ve pre-ordered it. Yes, it’s real — here’s a hands-on by David Pierce of The Verge:

… Yeah. $70.

Creating Smooth Blurs

Written on November 12th, 2012. Check out the comments and discussion, too!

Blurs are now the hotness for backgrounds when you need to showcase a tasty design, like a button. They’re especially popular over on dribbble:


They’re actually really easy to make. Some people start from photographs - and as I’ll show later, this is a great thing to try - but building them form scratch is also really easy.

This is a mini-tutorial of under a minute.

This is actually so straightforward that it’s really easy to get to something decent. And, like most visuals, it’s all about honing the concept into something pleasing.

You start off with a blank canvas, and then you start plonking strokes on it. This is easier if you have a drawing tablet, but hey, you’ve got a iPad, Surface or Nexus on you, no? That works too!

You can use whatever application you like, but you’ll probably want Photoshop (or something of that calibre) for the actual blurring effect later on.

Here’s where I started. Click for full-size.


It’s important to have a good base. Remember, like any painting, you need a focal point — in this case, it’s the “horizon” with a strong, bright highlight. You’ll also notice a concentration of darker spots towards the edges. This produces the vignette effect that helps sell the blur’s depth.

I also used some splashes of different hues to add variance. Be careful not to add too much, though, or it’ll become noise!

Remember what I said about starting from a photo? Simulating a real-life scene is key in making a convincing blur. You don’t want to just splash colors around randomly. Blurs are nice because they’re reminiscent of real life, without attracting too much attention away from the subject.

This is why a lot of blurs look like horizons, clouds, or landscapes. Imitate something you’d see in real life, or go with a simple general gradient as a base. When in doubt, pull up some reference photos from Flickr.

Now, the technique….

… Is just a bunch of Gaussian blurs. Take big radiuses, of 50 pixels and up. Wasn’t that complex, was it? Keep blurring until you end up with a smooth blur. And, finally, tweak it with some curves and color adjustments.


Remember that these blurs are best suited for backdrops. They need a focal point, an object for the viewer to pay attention to, or they quickly becoming boring. Typography is often a great companion. Again, you can click to see it in full-size.


And, as per the usual adage, keep practicing to make more and more convincing effects. Here are a few additional things I do:

  • Use subtle textures and effects like glass.
  • Apply a bit of noise to make it look less computer-generated.
  • Create multiple layers, each with different blur levels, and combine them with interesting blending modes.
  • Use colors from a harmonious palette, like one from COLOURlovers.

Have fun!

(The above blur is licensed under Creative Commons. Or, well, just do whatever you want with it.)

Look Pretty & Be Loved

Written on November 12th, 2012. Check out the comments and discussion, too!

A little while back, I was looking for a jQuery plugin that stretches an image across the whole window background. I stumbled upon two plugins, both of which did exactly the same thing.

There’s Backstretch, and this is how the page looks:


And then there’s fullscreenr, with this page:


They both do the same thing and work pretty much the same way. But one looks more convincing. Of course, I’m not saying the other looks bad — it’s a nice minimalist layout, and the guy behind it is clearly more of a coder.

But in my gut, the difference is astounding.

My “instinct” was immediately to try Backstretch first. It simply “looked” better — and again, remember, the two scripts basically did the same thing. There were some more features in Backstretch, but they’re not a huge deal. It’s especially interesting because fullscreenr has a lot going for it. It has the “social aspect” of comments, backing up its credibility. It has no ads, unlike Backstretch.

But it was lacking… Something. I don’t blame the site. I know there are lots of awesome programmers who’re just too busy doing crazy stuff to prettify a blog.

It’s that gut feeling.

Having a better-looking site does wonders to that gut feeling.

Because that polish shows how a person truly loves their product.

You don’t have to polish it — but boy does it count. It should be noted that lack of polish doesn’t indicate something bad. A colorful cake could look tastier, but that doesn’t mean a simple brownie always tastes bad.

People are also really good at noticing “incomplete” polish - like system76’s website:


They’re a pretty cool company, and it’s nice to see a Linux service step up to the plate. But a great deal of us know exactly of another, far more famous, site with the same model…


System76 might not have tried to copy Apple — the grid layout is pretty common, and a stable of design. But wandering customers stumbling upon the site will probably recognize it, and regardless of that innocence, their gut decision is very easy to sway.

Similarly, people are very good at noticing stock images at work, and random “kinda-related” photos.

Keep in mind, though, that polish doesn’t mean the product is actually better. It just gives an extra push. If the product turns out to be bad, it can easily backfire and trigger distrust. Be careful with it.

Be honest and unique foremost. Then tidy up with all the spit and polish you can muster. People really see the difference.

Under A Second

Written on October 27th, 2012. Check out the comments and discussion, too!

You know what users hate? Waiting. It feels ridiculous to them — why would I have to wait 5 seconds just to post a message to my friends? Services are making this easier than ever. Nowadays you can even tweet with just your voice… Instantly.

It’s a huge trend — the easier and faster it happens, the better people like it. I’m writing this post from a file on my desktop, and they’re instantly pushed to my blog. It’s done through Dropbox, symlinks, a web server, rsync, Apache, and a pile of other elves. But I don’t care. All I know is everything’s magically fast.

And if you’re slow, your users hate you.

We need to start making pre-emptive applications. Here, have a peek.

It’s not hard for a well-designed app to read minds. Each screen, page or form on an app should be designed with one goal in mind — like sending a message, downloading a file, or publishing a photo. Once you know what your app needs to do on any particular screen, you’re halfway there.

Here’s a common scenario: A user wants to write a new blog post.


Have you heard of that “real-time application” concept? This is where that comes from. The server and the user are always looking at the same thing. The user’s client doesn’t wait till the user clicks “Save” before telling the server it’s halfway done.

This way, the server has a backup of the text, and, probably most importantly, the server can alert the user of any problems when it happens, instead of afterwards. This removes the barrier of finding error messages upon hitting “Save”. Something wrong midway? Tell the user immediately. They’ll appreciate it.

So when the user hits “Save” or “Publish”, they get what they want. Immediately. No errors.

Probably the coolest part is how none of this is new. Auto-saving and inline verification are old ideas. They’re easy to implement — especially with today’s modern Javascript. There’s no reason not to start doing this today.

For most people, anything over one second delay can be a problem. How fast is your application?