Screen Shot 2014-12-11 at 11.26.30 AM

Adopting Node.js

Scott Nonnenberg wrote a great post about how Node.js is not magical.

I totally agree that Javascript is “a bit tricky.” A lot of times
people that I work with think they know javascript better than they actually do. However, I’m also noticing that it is becoming a lingua franca – more people know it.

Another good point that Scott makes: Taking the time to do tests right is hard. In my opinion writing automated tests is necessary for shipping good node code. As a developer, I try to include it in my estimate whenever possible. It’s been hard figuring out how to test all the asynchronous code, but worth it to make sure code works fully before shipping it.

If you’re just getting started with Node, see Scott’s post for some helpful links.

For me, Scott’s #3 (async by default) is the big gotcha. I just don’t think 80% of server code needs to be asynchronous. It’s not worth the complexity it adds to writing and testing your code. I always think code should be simple, not clever, and written for non-geniuses to understand. Computers are cheap, and brain power is expensive (at least for now) – so if you have a server-side function that retrieves data from a database, does a few other things, and then returns it to the client – it doesn’t need to be asynchronous to have sub 100ms response times.

Many web data services do enough I/O to benefit from the concurrency.  But, I don’t think node is the right choice for human-facing websites. I still prefer Ruby on Rails (unless your team only knows javascript).

Related:

javascript compare strings

For reference, this is all you need to know.

“0” < “A” < “a” < “aa”

In other words, first numbers, then capitalized words, then lower case words.

Here’s how you javascript compare strings

If you are sorting an array of strings, simply use the Array.prototype.sort() function as above.

If you want to write your own function to compare strings, use something like …

function(a, b) {
if (a < b) {
return -1;
}

if (a > b) {
return 1;
}

// a must be equal to b
return 0;

}

 

Stuck in the dark in minecraft

I’ve been playing minecraft to understand what my nephews like about it. The biggest problem is I keep getting stuck in the dark (in a pitch black hole). Either I dig straight down, or night comes, or I fall into a lake.

Minecraft

The key to getting out was to go to the options menu and turn up the brightness. I’m playing using the Mac desktop version of the game. Other articles I found told me to dig stairs to get out, but I couldn’t even see which way was up or down.

Apparently there used to be some kind of /home or /kill command but they don’t work for me in the current version. The only solution was to increase the brightness of the screen and dig stairs (in an upwards diagonal direction) to climb out.

How to look like an open source dev superstar

As a developer, your Github profile is quickly becoming your new resume. Hiring companies look at your Github activity as a measure of your skill and experience.

Github contributions

 

 

 

 

 

 

 

 

How did I become a contributor to the Ember.js website even though I’ve never used the framework, and without writing a line of code? Here are the 3 easy steps you can follow to become an open source superstar.

  1. Find a prominent open source library. Or, just pay attention the next time you’re following one of those “How to install this” README.md guides.
  2. Read the readme and look for typos, spelling errors, or confusing grammar. Or, follow the instructions for installing something. Find confusing parts of the documentation where you can add more detail.
  3. Submit a pull request! Github makes this extremely easy for text files (like README.MD). Just click “edit” and Github will fork the repo and guide you through creating a pull request. Fix up the documentation, commit it, and submit your pull request. Here’s one I did to make the Ember.js documentation more clear.

Bonus

The steps above are good for open source in general, and also make you look good. If you want to make yourself look good in a more superficial way, how about keeping a public repo and contributing something daily. Or, write a robot to do it!

Screen Shot 2014-07-18 at 10.13.57 AM

Programming tips

I do a lot of technical blogging using Github gists. Github gists (and small public repos) are a great way to share code snippits. Here are a few I’ve made recently that you may find useful.

Please comment on these Gists so I can make them better.

 

Startup Developer Team Agreement

Five times now I’ve worked for a startup as it went through a growth phase (major round of funding). When it worked well, each new team member made the team stronger. When it didn’t work, the company was a revolving door. For development teams, it’s a tricky time.

Early developers enjoy high individual productivity as they work with the technology they know (or have pioneered). Adding more developers does not mean an immediate increase in productivity. More team members requires more interaction, planning, and code interfaces.

Developers are a quirky bunch. There are geniuses that come to work when they want (or not at all). There are verbally challenged code generators that turn out code faster than the team can agree what to build. Lone wolves that go off on all nighters and don’t come back with ship-able code. Work-from-homers that need to be “skyped in.” And the loyal guys that do what the boss wants today without finishing what he wanted yesterday. Not to mention the “leader” that rarely takes his headphones off.

For the people I currently work with, don’t worry – I’m not thinking about you ;-).

In this storming, forming, and norming process the team needs to set guidelines on how to work together. I’ve written before about 10x developers – a similar concept applies to productive teams. I’ve never been trained as a manager, but there are a couple things that keep coming up. It is critical to establish a team agreement centered around communication. What kills startups are the things that left unsaid, so nail down a few specifics with a “team agreement” document.

Example agile team agreement

  • Goals

    • Work on the right things for the business

    • Increase leverage by improving our skills and using the right tools

    • Ship code that works

    • Have unit tests and be able to ship often with confidence

  • Work day

    • Stand-up meeting at 10AM M-F: 1 minute to report on what you did the previous day, what you are doing doing, and what you are blocked on

    • If you can’t attend, send in your status update via email

    • Be available on Skype when you’re working

  • Sprint planning and process

    • A weekly sprint to complete top priority items from the backlog

    • Tasks recorded in Trello (or sticky notes, or whatever works)

    • Task complexity discussed prior to or during planning

    • Stick to your assigned tasks during sprint

    • Any time something gets brought into the sprint, notify the team and create a task to track it

There’s many other things to go into with team-building, but a couple other tangible things keep coming up.

1. Coding standards, including: why spaces are better than tabs. Make a decision as a team, convert your code once, and stick to it. This project samples Github code to determine what the standards should be.

2. Git collaboration workflow. Nailing this early will help. By all means take the time to make sure everyone understands Git as well as deploying code.

What makes your team uber-productive? Leave a comment and let me know.

Converting PNG to SVG (Vector) for Retina Displays

I’ve been working on a web site that is often viewed from iPads. iPads have a retina display (higher pixel density), which makes low-resolution images look grainy. Here’s an example, zoomed in to exaggerate the effect.

Screen Shot 2014-03-02 at 1.32.15 PM.png

The problem is the images are raster (bitmap or pixel) based, not vector (line art) based. Now that I recognize the problem, I see it everywhere. Even the Google search looking glass.

Screen Shot 2014-03-02 at 1.33.33 PM.png

Anti-aliased pixel-based PNGs are the standard. For web developers, the problem is, once they  flatten an image to a pixelated PNG, the browser can’t enlarge it again. This is a problem with the widening array of mobile display resolutions.

Unfortunately, a common fix is to swap in a 2x resolution image. This is a dumb approach for icons, logos, and buttons – anything that is not a photograph. All you are doing is downloading a second set of larger files to handle another fixed resolution.

All major browsers support SVG (Scalable Vector Graphic) files now, but before leaping on board, there are a couple performance considerations.

One consideration is the file size. Especially when developing for mobile web pages, for complex icons, a larger-dimensioned PNG may be smaller in file size than a vector representation. For most icons, logos, and buttons, SVG files will be smaller than the PNG. PNGs are actually not that small, since it is a lossless format.

The second consideration is CPU time to render and composite the image (often on top of something else). I haven’t done any performance tests. For maximum performance, scaling and compositing bitmap based icons will be the best. However, my guess is that unless your vector is crazy complicated, or your phone a few years old, using vectors will be fine.

One great trick I wish I knew before converting a batch of PNG icons last month, was that algorithmic conversion (aka image tracing) from pixel to vector is pretty common. There are several services like http://vectormagic.com/home that will automate your conversion. Vector creation is even built in to Adobe Illustrator’s with the “Live Trace” function.

Beware that for more intricate clip art, algorithmic conversion will not be good enough. But, luckily designers can be easily found on Fiverr to help.

Are you converting PNGs to SVGs? What tools have you found that will help, and what are the gotchas of working with SVG? Please leave a comment below.

How to embed an opt-in form in a Facebook post

Here’s a cool Facebook growth hack I just discovered. This trick allows you to embed a Flash SWF file with buttons and even a form inside it inside a Facebook post. From the little bit of research that I did, it looks like marketers have been doing this since early 2013. The ability to embed Flash has been around since 2011.

Form inside Facebook post

This screenshot is from a site selling the ability to create the posts. I haven’t verified that the site works, so I won’t link to it. I did find some form-enabled Facebook posts in the wild. To create one of these, you post a link to a page that has an open graph meta tags in it that point to the SWF file.

I think playing a video and capturing an email address right inside a Facebook post is a brilliant way to get leads. You could also do interesting things like a mini-game, survey, presentation, or prompt to re-share inline in the post.

Post a comment if you think this is interesting. If I get a lot of interest, I’ll dig further and show you exactly how to create your own.

 

Growth Hacking Haiku Deck

I’ve been working with Haiku Deck (a Seattle Startup that makes free presentation software) for about 7 months. In that time, we’ve cooked up some pretty cool growth hacks to accelerate the growth of their user base.

Luckily, the product is already loved by its users. It is naturally viral since people use it to present their content to all types of audiences. For Haiku Deck, each person to view a presentation is a potential new customer. The best growth hacking occurs when the motives of the company and customer are completely aligned. In this case, the motive is to spread ideas far and wide via inspiring presentations. Plus, we recently removed a huge hurdle – having an $300-500 iPad by launching a web version.

Here are some of the experiments we’ve done to increase page views, signups, and sharing.

1. Move sharing buttons on the playback page, and add sharing from the gallery. An earlier design of the page meant the sharing buttons were not visible (“above the fold”) to many viewers. Sharing is top priority for both the company, and presenter, so we moved it to the top left. We’re now seeing 1,500% (15x) more social sharing than a year ago.

Before

 

After

source: Haiku Deck Blog

We’re constantly evaluating the SEO quality of this page, and have re-worked it multiple times to make sure our customer’s public presentation notes and slide text are visible to google.

2. Start a waiting list for people that don’t have iPads. We replaced a direct link to the app store with a survey and email sign up form that asks people what platform they want us to support. Overwhelmingly, customers have requested Windows. By the time we were ready to launch the web version, we had a huge waiting list of people that previously would never have signed up.

Importantly, we also encouraged a tweet after signing up. This not only allows excited potential customers to recruit their friends, it also lets us see and interact with VIPs in advance of them getting the product.

example tweet:

Awesome #PR pres tool for iPad but ;-) I just requested @haikudeck for Windows. Make your request here: http://t.co/o5Ls3xWuGI

— Jeff Domansky PR (@ThePRCoach) July 7, 2013

 

3. Elbow grease. Catherine Carr, Lisa Ma, and Erin Vondrak deserve massive Hai-5s  for their excellent community outreach, customer support, Pinterest boards, constant blogging, and growing a guru community. They corralled a huge group of influencers (presenters) into our web beta. This personal touch outweighs any feature addition for growing a customer base that talks about your product. The team constantly wows customers with their responsiveness.

 What didn’t work

We experimented with a closed (invitation only) beta for the web app. The idea was to control the quality of our rollout and create a feeling of scarcity around access to the product. We wanted to get the opinions of our most passionate users first. However, because most users don’t need to create a presentation every day, the invitation only aspect added too high of a hurdle to getting feedback (you need both a presentation idea and an invitation code at the same time).