400 Bad request

Learning Node.js and Express

The best way to learn a language is to build something with that language.

I’ve been slowly learning Node.js for a couple of months and this was a very simple “Hello World” style app to develop as there isn’t much needed server-side.

Node.js is very light weight and fast. If you’re interested in learning it (and Express, a framework for Node) take a look at these tutorials and examples:

• Install Node.js
• Express examples you can run in your browser
• A simple todo app with Node.js and Express
• Deploying Node.js apps to Heroku

Real time data storage with Firebase

The other thing I wanted to experiment with for this project was Firebase. It feels like every day there’s a new headline hitting Hacker News that involves Firebase in some way. It’s an exciting product.

View this on Dribbble

Firebase enables you to very quickly store data, so you don’t even need your own server. Perfect if you’re a Designer like me who doesn’t like managing servers and databases. On top of that, any data changes are real time.

It’s just a matter of including the Firebase script on your page. Their documentation is very straight forward. Check out this 5 minute Firebase tutorial.

Results

There are a couple of tools that already enable code sharing, and there are even some real-time solutions, so I tried to make it simple enough that all the focus was on the code editor with little effort needed to create or share code.

Use it for sharing snippets of code, debugging or teaching others how to program.

There’s no sign up and it’s free to use.

Launch CodeShare.io

Would love to hear any feedback or feature requests you have below or you can join the discussion on Hacker News.

It’s a great guide to lean product development and a useful read for entrepreneurs, startups, designers, product managers or anyone involved in the product development life cycle.

Lean

I started paying attention to lean principles when I was working with Sharethrough. Rob Fan and Dan Greenberg backed the thinking, and Eric Ries was an advisor to the company.

When I moved to Orange County I had the pleasure of meeting and talking product with Patrick Vlaskovits, who co-authored The Entrepreneur’s Guide to Customer Development, and is an active member of the Lean Startup scene.

The Lean Entrepreneur is Patrick’s latest book, co-authored with Brant Cooper.

The book

The Lean Entrepreneur is useful whether you’re seasoned in lean thinking or you’ve never heard of it.

There are great examples from real startups including Kissmetrics, Sharethrough, Hubspot, 500 Startups, TaskRabbit, and the book explains all the key terms, techniques and strategies you should know: life cycle adoption curve, pivot, vanity metric, product-market fit, MVP etc.

Anyone who runs a business, one day wants to run a business, is entrepreneurial, runs a team, is involved in product development, maker, starter, builder, someone that ships; you’ll find this book useful.

Minimum viable product

Being a big believer in MVPs, I’ve selected a few choice excerpts from a section on the topic.

You should be building out product features only if the following applies to you: You know.

If you are still learning, you should not be building features; you should be building experiments (which may contain features). It’s an important distinction.

…

Think of your product as having an intrinsic feature threshold. This threshold maps to the pain or passion of your market segment; once that threshold is met and the pain is resolved, adding more features will not resolve more pain. Increasing stuff that doesn’t add value dilutes existing value. Period.

…

Your minimum viable product is comprised of the least amount of functionality necessary to solve a problem sufficiently such that your customer will engage with your product and even pay you for it, if that’s your revenue model.

It will take more than one try. You’re not going to nail it the first time out. In fact, you’re never done. In today’s value-creation economy, there’s no such thing as done, which is why you might as well get your product in the hands of a few customers as soon as possible. You won’t learn what you’re missing or getting wrong until you let someone try and use it. Hence the minimum in MVP.

…

Releasing early to early adopters is the most efficient way to learn what’s required. Too much product hides the specific functionality that provides viability. The core functionality that provides value such that customers are satisfied because the product fulfils its promise forms the foundation of your future business.

Buy The Lean Entrepreneur on Amazon.

It’s a beautiful device. At first I didn’t think it would make a big difference but after using for a day it’s hard to go back to other displays. It’s like the transition from VHS to DVD or SD to HD.

The first website I designed while having the Retina display was Runnable.com and of course I was now more inclined to design for high-resolution screens as I notice the results on a daily basis.

Below are just a few techniques I learned while designing for high-res devices.

1. Use media queries for high-res CSS styles

Using CSS media queries you can target any device with a high-resolution screen and provide it with alternate styles.

It’s very straight forward, and some what similar to providing responsive or alternate mobile styles.

@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
  /* High-res styles go here */
}

This should be enough, but if you want to target other highish-res screens, you can read up on Chris Coyier’s Retina Display Media Query post here.

2. Have two versions of your CSS sprites: standard dimensions and @2x

Maykel Loomans wrote a very useful post last year on using CSS Sprites to optimize your website for Retina displays.

Loomans recommends having two sprite files, one for standard and one for high-res.

Using the media query I shared above, simply change the background image reference and then resize the background image.

@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
  .logo{
    background-image:url(assets/sprite@2x.png);
    background-size:500px 500px; /* This replicates the original standard sprite dimensions, and assumes the actual dimensions of sprite@2x.png are 1000x1000px */
  }
}

3. Serve up larger html embedded images with Javascript

The sprite solution above is only good for assets referenced in your CSS. But what about images on your page?

Imulus developed a useful plugin Retina.js that solves this for you.

The script will check your server to see if you have any image source with @2x at the end.

For example:

<img src="/images/my_image.png" />

Retina.js will look for:

"/images/my_image@2x.png"

See their documentation on how to implement.

4. More detail doesn’t necessarily mean more data

Daan Jobsis conducted a very interesting experiment last year looking at pixel quality, image dimensions and compression.

More pixels = better display. But, more pixels doesn’t necessarily have to mean 4 or 5 times more data. More detail can be accomplished with less kilobytes.

The bottomline is that heavy compression doesn’t affect the final image as much as you would expect. This is because of the greater amount of pixels in the Retina image, compression artefacts are scaled down and therefore almost unnoticeable.

Basically an image can have larger dimensions, but can also be compressed more and you still get great results on a high-res screen.

You can see various image dimensions, file size and quality comparisons in Daan’s follow up post here.

5. You can just use the same image assets for both standard and high-res screens

I’ve talked above about how to serve up alternate assets for high-res screens. The downside of this is having to maintain two versions of graphical assets and images.

Turns out you can use the same assets.

For example, with CSS sprites you can use the @2x version for all users, and let your CSS do the resizing for all users. Or every embedded image can have larger dimensions than needed, and then you explicitly set the width of that image.

The pros of this are that you maintain one version.

The cons, depending on how you compress the assets, your users may have to download larger files than they actually need.

Bonus: Don’t forget your Retina-ready favicon

Nothing is more telling whether a website has invested in support for high-res screens than your favicon. And it’s a very simple fix.

Ensure your favicon is 32x32px and you’re golden.

Use iConvert to convert a PNG to ICO.

Conclusion

High-res screens, in particular the MacBook Pro with Retina display, are fantastic and I highly recommend Designers invest in them.

More and more devices have high-res and if you want your product or website to look professional to users of these devices, you should put some thought into how they look.

My preference is to only maintain one version of each graphical asset instead of two (I’m lazy), so I’ll typically have an @2x sprite that I resize for all users. I’ll also try to save highly compressed images in large dimensions for web so they look good when resized in the browser.

Some other, more obvious, techniques that I haven’t mentioned above are making good use of CSS, @font-face, icon fonts and SVG, instead of relying on bitmap images.

Have you any other advice designing for high-resolution?

Why make (another) task management application?

I was watching Ryan Bates’ screencast to learn CoffeeScript and he uses a sortable list as an example project.

After following his screencast, I already had a basic to do application started.

Around the same time I had a need to create and share a list with a friend for a project we were working on. I knew of lots of task management apps, but they all required sign up, download or payment.

I just wanted to quickly create and share a list, with no barriers to entry. So I built Flask.

• Create to do lists
• Add as many tasks as you want
• Re-order, edit and delete tasks
• Share your lists for others to access
• Access from anywhere
• Use any device
• No sign up required
• Nothing to download
• It’s free

No sign up required

There are tons of to do list and task management applications out there but they all have one thing in common; you’re required to sign up to use them.

Sign up sucks, and typically straight after signing up your inbox gets spammed with “Welcome to…”, “We just released…” and “It’s been a week…” emails.

Flask doesn’t require sign up so don’t worry about spam or emails you have no need for.

If you want to collaborate with a friend, just share the URL. No formal invitations or requiring them to sign up.

Flask works on desktop and mobile devices. No special native downloads required to make it work and you can access lists from anywhere.

And it’s free, just give it a whirl.

What features is it missing?

If you find it useful I’ll definitely add more features. Feel free to request features and give me feedback here.

I thought I’d document my design process in poster form using Check This.

You can check out the poster here.

The website has received some significant traffic over the past 365 days.

• Visits 1,516,429
• Unique visitors 1,143,399
• Pageviews 5,196,460
• Avg. visitor duration 02:51

On average that’s around 4,000 visits a day. A lot more than expected to be honest.

It has made its way around the world, starting from UK/Ireland, to Europe, US, South America, Middle East, Japan. Most recently it’s been very popular in Saudi Arabia.

Last year it got some initial coverage from Mashable, but because of my shawdy programming the servers couldn’t handle it and it constantly crashed. This resulted in me throwing more web dynos at Heroku (which gets expensive very quickly).

I spent the last couple of weeks debugging and optimising with help from Airbrake and New Relic, so it should be much more reliable now.

To help with performance, the website only calculates the outcome of who you love once and then saves and caches it.

As Valentine’s Day 2013 is here I’ve wiped the database clean so you can try it out again.

See who you love on Twitter

Happy Valentine’s Day.

My design process has evolved since then but it’s easy to fall into this trap; get briefed, jump into Photoshop, mockup some comps, send them over for review, then pass them onto dev.

The problem is this skips the essence of a good design process, which is about solving problems and building a usable product.

Skinning a product and getting subjective feedback isn’t good enough

Typical feedback you’ll get from a Photoshop comp is about colour, type, shape, layout, texture etc. Mostly subjective feedback.

Feedback you risk missing out on:

• Is this aligned with what stakeholders want or envision?
• Is it feasible for the dev team to make this given the technologies and resources available?
• Is this something users can identify with, will use and be able to use it easily?

As a designer you play bigger role in the process

If your role in the project is visual interface or graphic design only, then that’s probably ok. But if you’re a UX, interaction, lead and/or only designer working on a project, then you play a bigger role.

Sketching enables you to brainstorm, explore multiple ideas, define flows, communicate with team members all why being quick and cheap.

Prototyping enables you to get out of the building quicker, talk to users, validate assumptions, ensure expectations are meeting stakeholder needs, while spending as little time as possible worrying about polish.

Benefits of sketching and prototyping

• Validate assumptions
• Discover problems early
• Brainstorm ideas
• Design more iterations
• Conduct early usability testing
• Cheaper & faster to implement
• Shorten the feedback loop
• Disposable
• Explore alternatives
• Helps communication between the team
• Ensure the right thing is being designed

Ensure sketching and prototyping plays an important role in your design process and worry about pixel perfection later.

Further reading

• Tools for designing high fidelity prototypes
• Designing with pen and paper
• Jacob Gube wrote a great post about prototyping being an essential step in your design process

I hope that by writing them down there’s more chance of me actually doing them.

Life accomplishment of 2012

I married this lovely lady.

New software/apps/tools for 2012

Some of these apps I had used before, but in 2012 I found myself becoming more reliant on them and working them into my daily routine.

• Rdio for streaming music
• Beats headphones for listening to music and getting in the “zone”
• Hammer for Mac (and Anvil) for smaller lightweight websites that don’t require a back-end
• MacBook Pro with Retina Display which makes more of a difference than I originally thought
• Several user experience tools including Qualaroo and Mixpanel which I find indispensable
• Heroku for hosting web apps

Things I learned and/or put into practice in 2012

• Started learning Coffeescript for a small Rails project
• Shared some of my code on Github for the first time
• Shipped my first product to Heroku
• Started learning Node.js
• Started designing for retina displays
• Learned how to develop an iPhone app using Titanium
• Shipped a new website and iPhone app for Kareo, along with several software updates
• Shipped a novelty Twitter website Twit Amore for Valentine’s Day

Other things I did in 2012

• Moved to San Francisco to join a startup
• Got a Fitbit and tracked my fitness

Books read in 2012

• Icon handbook by Jon Hicks
• Steve Jobs by Walter Isaacson
• Designing for emotion by Aaron Walter
• Information dashboard design by Stephen Few
• The happiness project by Gretchen Rubin
• The elements of content strategy by Erin Kissane
• The 4-hour body by Timothy Ferriss
• Design is a job by Mike Monteiro

Goals for 2012

A look back at the goals I set this time last year.

1. Be more mobile focused Success. Designing responsive websites and with mobile in mind is now a baked in standard and I managed to ship a couple of mobile apps.

2. Release an iPhone app Success. All be it a basic app, I built What Would Marty Do? iPhone app.

3. Compete in a triathlon Fail. Didn’t even get around to buying a road bike.

4. Snowboard Success. This was a lot of fun and thanks to Kris Davis for teaching me.

5. Release at least 3 side projects Fail. 2/3 isn’t bad but there are 4 projects that I started in 2012 and failed to ship.

Areas of focus for 2013

After reading Peter Bregman’s article, I decided that it might be better to have areas of focus as opposed to setting goals I can’t keep.

1. Shipping
I love shipping products and getting stuff out there for the world to see. You learn so much through the build, measure, learn process. Hopefully some of those projects I started last year will come to fruition.

2. Contribute more to open source
Last year I started sharing stuff on Github. I plan to do more of that this year, whether it be on Github, my blog, Codepen or elsewhere.

3. Write less
Usually every January I tell myself I’m going to write more, which tends to lend to me not writing at all. Hopefully if I focus on writing less and shortening my posts I’ll be able to publish more often.

4. Read less
Same goes for reading. Between books, Twitter, RSS feeds, email, Instapaper there is too much to consume and keep track of. Plus most of it is useless or repetitive. Debating whether to give up on the RSS feeds and stick to Twitter or a tool like Sidebar to help focus on the newsworthy articles.

That’s it. Exciting year ahead.

• What font should I use for the headings?
• How will this typeface look alongside this one?
• What em size should the main paragraph be?
• Are there Typekit fonts that would suit this design?

With Typecast you can easily design type in the browser and experiment with different type styles.

Designing type in Photoshop is poor

Photoshop is a great tool, and it’s an application I have open all day every day, but designing type for the web has always been poor.

The options of Sharp, Crisp, Strong and Smooth don’t translate to CSS or browser interfaces. You don’t truly know how the content will look and feel until it is marked up.

“Designing in the browser”, in its typical sense, isn’t ideal either. It means going back and forth from browser to CSS editor and to test a font from Typekit, Google or Font Deck, you have to go to that service, set something up and/or copy a new Javascript snippet.

Typecast solves the problem of designing type for the web

The guys at Front recognised the need for designers to have a better way to design type. So they made Typecast.

Designing should be a joy, not a chore, and we deserve the freedom to follow a last minute inspiration, try an even better idea, or completely change creative direction without fear that it might ‘waste’ project time or money.

Typecast is a great tool for experimenting with different fonts, sizes, spacing, colours and more.

It integrates seamlessly with Typekit, Font Deck, Google Fonts so you can compare all sorts of typefaces.

The app also spits out a hosted CSS file so you can rapid prototype locally with the fonts you’re experimenting with in the product. This CSS can then be passed onto developers for use in production.

The Typecast team have taken the time to write lots of great tutorials on how to use the product and on designing type. 4 Simple Steps to Vertical Rhythm and Designing with Web Fonts are worth a read.

Try it today

Typecast is currently in private beta and will be launching soon. You can sign up for a beta invite today. The service is currently free while in beta, so you’d be mad not to sign up.

There are several advantages to using icon fonts.

1. Scale them with CSS
2. Color them with CSS
3. Add shadows with CSS
4. Change opacity with CSS
5. Rotate with CSS
6. Basically make any changes without opening Photoshop and editing a sprite
7. They automatically scale for retina displays

See for yourself. Chris Coyier put together a fantastic tool help you see how awesome icon fonts are.

List of icon fonts

Icon fonts are getting more and more popular. A few of my favourites:

• Signify Lite
• Font Awesome
• Foundation
• Symbolset
• Pictos and Pictos Server

How to apply icon fonts

Drew Wilson put together a useful article on how to use icon fonts.

In summary:

HTML

<a href="" class="icon" data-icon="G">My Link</a>

CSS

@font-face { 
	font-family: Signify; 
	src: url('signifylite-webfont.ttf'); 
} 

.icon:before {
	font-family: 'Signify';
	content: attr(data-icon);
	-webkit-font-smoothing: antialiased;
	vertical-align: text-bottom;
	margin-right:5px;
}

Are you using icon fonts yet?