Bits, Blocks & Pixels

Text

Want to be more secure? Build two-factor authentication into your webapp

After the hacking of a former Gizmodo writer’s Apple account, a lot of discussion has been going on concerning turning on two-factor authentication on services like Google Apps. I absolutely recommend doing so, but I also think that’s not enough. A good majority of the people who read this blog are creators of webapps of some description. It’s time for us to start building two-factor authentication into our products.

Off the top of my head, I know of two well-documented methods of implementing two-factor auth, and after some googling I found one more:

Authy - They launched a few days ago, but their API looks really solid. For most people (meaning for people with webapps under 100,000 people), this service is free, too.

AlterEgo - The venerable team behind MailChimp built this one. I’ve used it on my MailChimp account for a while now, and it hasn’t ever caused me any problems. The main draw of this is that it’s completely free.

Duo Security - This looks by far to be the most comprehensive solution, however this comes at a price. They have a free tier, but unless you have fewer than 10 users on your application, this won’t cut it.

Google Authenticator (thanks @tbyehl) - The Google Authenticator app uses open standards and can be used by anyone. The upsides of this implementation are that it’s free and people who use two-factor auth most likely already have the Google Authenticator app on their phones.

Some more provided by some users on Twitter: YubiKey (thanks @typelife, @oskarpearson and @ArondeParon),  SecureAuth (thanks @STS_Hayes), Perfect Paper Passwords (thanks @halffullheart)

(Did I miss a service? Ping me on Twitter if you know of any more)

Not every webapp needs two-factor authentication. It’s up to you to gauge whether or not you think the data on your service needs this much security. But, if you have some spare development time, it doesn’t hurt to add one of these services as an option. Oh and I beg of you; use a password manager.

Let’s hope Apple step up their game, but just because they haven’t yet doesn’t mean you shouldn’t, either.

Text

After a day of using the alpha, here are my thoughts on App.net

I was a pretty early backer of App.net (backer #285 to be exact). So, it should come as no surprise to anybody that I’ve been following the theatrics surrounding the platform. Last night, I was granted access to the alpha by @replying Dalton Caldwell's tweet asking if any backers would like to join, and after a day of playing with the system, here are my thoughts.

The first thing I noticed after receiving my invitation was a global feed. That is, a feed of every post created by every user on the site. In the early days, Twitter used to have one, until activity became too high, and for obvious reasons, it had to be removed. I pinged Dalton on app.net asking whether the global feed would remain and he responded

Given the nature of this service, it may last longer than you would think. I personally really enjoy global feeds as well

There’s something really captivating about global feeds. Even at its peak of usage last night with about 3 or 4 posts per second, it was very easy to scroll through every single conversation happening on the site and jump in with my own thoughts. In Twitter, I find myself only interacting with my immediate circle, but this brought me into having more conversations that interested me. The notion of using Following as a filter for quality content isn’t as prevalent. Right now, I’m basically describing any smaller social network, but I think that’s very important to think about: why does every social network have to be massive? We already have plenty of options for being connected with everyone we can possibly think of, but why not have a social network that has a smaller group of passionate, like-minded individuals?

One of the main conversations going on in the site at the moment is whether or not follower and following counts should be displayed on user profiles. Another conversation is what official terminology should be for certain actions like reposting or sharing. This is a Twitter with an open dialogue. Going into the future, I think it’s imperative that we pick a social network that is completely open to user feedback. As we’ve seen with Twitter in the past few months, they really don’t care what their users (or developers) want right now.

If I had to describe what it feels like to be on App.net, I would say that it’s most similar to being on Quora: there’s a slight focus on tech, but with really high quality discussions. Because people have to pay for their accounts, it really raises the bar for how much people are willing to write meaningful things.

The most important thing is, I’m having fun on a social network again. Granted, there is a novelty factor as it’s been less than 24 hours since I first got access, but I think there’s something really special here. If you have $50 lying around, I’d highly suggest backing the project before it’s too late. Even if you don’t think they will reach the backing goal, it’s worth pledging $50 just so you can try out what it’s like to have fun for once on a social network.

Text

Traffic data after hitting the Hacker News homepage

12 days ago, a post of mine, Some things beginners might not know about Sublime Text, hit the Hacker News homepage with 224 points. It stayed on the homepage for roughly 20 hours, and that amounted to a lot of traffic. Below I’ve put some of the more interesting statistics.

I had launched my site only a day prior to writing this blog post, so what you’re seeing before July 14th is zero visits per day. On July 14th, I got a grand total of 21,676 views, on July 15th, 10,337 and 3,192 and 1,460 the days following that. It has leveled out at about 800-900 visits per day with no further work. 

Most of the visits came from the United States with 15,860 views, followed by the United Kingdom, Germany, Canada, France and then Russia. The average visit duration was approximately 34 seconds. Sounds like a lot of people have very short attention spans!

This is the browser usage breakdown. Chrome is, by far, the victor. It’s interesting to note that greater than ~90% of the Chrome visitors are on version 20 or greater. ~80% of Firefox users were on version 13 or better. ~80% of IE users are on version 8 or better (64% are on IE9).

I’m glad that a bunch of you liked the post; it certainly made for an exciting few hours and 134 more Tumblr followers and over 130 Twitter followers. There are a bunch of other statistics that I didn’t post because I wasn’t sure if they’re interesting. If, however, you have something in mind, you can ping me on Twitter.

Text

My high-DPI image replacement workflow for web apps

Recently, I’ve begun ensuring that all of the images on websites associated with my name have high resolution assets. At the moment, there may only be a few devices (Retina MBP, iPad and iPhone) with insane pixel densities, but over the next year or two, we’re going to be seeing a lot more of them. I thought it would be useful to outline how I go about upgrading the assets on a typical web project of mine because without the right workflow, the process can be daunting.

First, I open the low resolution asset in Photoshop. I set the canvas size to be exactly 2x that of the current canvas size. Using the transform tool, I set the width and height to be exactly 200%. This will act as a guide to ensure that when you’re replacing the low res asset, you don’t have to realign the background-position. Giving the fuzzy layer a bright red color overlay helps you align the images.

Either create or drag in assets that are two times the size of the old assets and line them up as perfectly as possible with the fuzzy, low resolution edges. Using icon sets such as iconSweets2 or GLYPHICONS helps you save time because they are a.) vectors, so they scale infinitely and b.) optimized for certain sizes already.

After hiding the fuzzy layer, I save the image with @2x at the end of the filename (ex. image@2x.png). Then I put that image into the same directory as its low resolution counterpart. 

At this point, I do one of two things. If the image is inline (ex. <img src=”#” alt=”“>), I convert it to a background image. If that’s not feasible, and it has to remain inline, I don’t give it a high resolution alternative. If the image is already a property of background-image in the CSS, then I write something like this:

Make sure to define the background size to be the same size as the low resolution asset. And that’s it, the image should look crisp and beautiful for all of the devices of the future. Keep in mind, there is an alternative to this called Retina.js (and I’m sure there are other similar ones) which has its merits, but media queries have zero external dependencies. Also, media queries ensure that you only ever load one set of images. There are a few caveats of the method described in this post, though, such as needing to update the @media query once more devices that aren’t using WebKit have high-res screens as well as not being able to replace inline images. Ultimately, it’s up to you to decide what’s best, but this is what works for me 99% of the time. If you really need to replace inline images, Retina.js is probably your best bet. Good luck.

Text

Some things beginners might not know about Sublime Text

I’m a big fan of Sublime Text. As with many Mac programmers, I started on TextMate and then migrated over once Sublime Text 2 was released. When I started, however, there were a lot of things that I didn’t know about ST, so I’ve compiled a list of basic things that are excellent time savers.

  1. Multiple cursors: You can edit multiple lines of code simultaneously very easily by holding down Cmd (ctrl for Windows) and then clicking different lines with your mouse.
  2. Reopening closed tabs: Just as with Chrome, if you accidentally close a file that you’d like to reopen, just press Shift +Cmd + T (or Shift + ctrl + T on Windows). If you keep pressing that key combo, ST will continue opening tabs in the order that you closed them.
  3. Quick file opening: This is perhaps my favorite ST feature. Hold down Cmd + T (or ctrl + T on Windows) to open a textfield that lets you search for files within a project to open. You’ll rarely ever have to use the file tree again.
  4. Jumping to symbols: To quickly jump to specific symbols, hold down Cmd + P (or ctrl + P on Windows) to open up a search field. Type in your symbol and press enter.
  5. Search entire project files: To search the contents of an entire ST project, hold down Shift + Cmd + F (Shift + ctrl + F on Windows).
  6. Jumping between words/lines: This is more of an operating system feature, but I discovered it while using ST. On Macs, if you hold down Alt while using the arrow keys, you jump between words rather than characters. Similarly, if you hold down Cmd while using arrow keys, you jump from the opposite end of a line. Very useful for quickly navigating code without your mouse.
  7. Quickly change settings: Shift + Cmd + P (Shift + ctrl + P on Windows) opens a quick search to allow you to modify Sublime Text preferences.

The following have been additions I’ve seen in the Hacker News comments:

  1. Jumping between word segments: ”If you hold down control, you move by word segment - this is camel-case (and underscore) aware. So, if I am at the front of the word “cakeParty”, I can move to between ‘e’ and ‘P’ by holding control and pressing the right arrow key.” (Thanks hebejebelus)
  2. Move current line up/down:You can also move the curent line up and down the page using Ctrl + Cmd + Up/Down” (Thanks draftable)
  3. Sublime Package Control: “Useful for installing things like themes, syntax awareness, code linters, etc…” (Thanks po)
  4. Quick word editing: “Cmd + d selects the current word. Subsequent Cmd + d presses will select the following instance of the word for editing. Makes it easy to do things such as renaming a local variable or changing both the opening and closing element of a HTML tag.” (Thanks haasted)
  5. Fine-grained find+replace/modify:Another one i’ve found useful is CMD+D / CMD+K+D. CMD+D finds the next instance of the current selection and creates another cursor there (and selects it as well). CMD+K+D skips the current selection and finds the next one.” (Thanks toran1302)
  6. Select all instances: You can select all instances using cmd + ctrl + G (Thanks gryghostvisuals)
  7. Go to a specific line: You can jump to a line by using Ctrl + G and typing in the line # (thanks arkinex)
  8. Duplicate current line:Ctrl/Cmd+Shift+D duplicates line/selected text” (Thanks akinex)
Link

I’ve never backed anything on Kickstarter, ever. Crowdfunding isn’t something I tend to participate in, but this is something I’ve dreamed about for a long time but knew I’d never have the resources or talent to pull off. So I put down $50. In short, App.net would be a universal, free-to-develop-for API for creating Twitter-like feeds. And it wouldn’t be sustained with ads: it would be sustained with payments. Hopefully the paywall doesn’t end up making the system feel like Quora: a wonderful resource but only for the tech industry. If this works out, and as of writing this, it’s only 4% funded, it could really be the system that eventually derails Facebook.

You can read the article that incited all of this on Dalton Caldwell’s blog.

Text

A second shot at blogging

A couple of years ago, I tried to keep up blogging, but I couldn’t. I doubt that I will now, either, but it’s worth a shot. This will be a place where I’ll aggregate content from around the web that I enjoy or simply for things that I have thoughts about. Groundbreaking, I know, but I wanted something that’s a bit more long-form than Twitter and not as inconsequential as Google+. The blog’s theme is one I made for this occasion, and hopefully it’s pleasing to the eye.

Well let’s see how it goes, then.