Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 16 2013


Easy Ways to Contribute to Open-source Projects

When the jQuery project first started, I remember how passionate the team was about helping developers use the jQuery JavaScript library. It was a labor of love with all of us putting in countless numbers of hours, day and night, to help grow the project and the developer community. And we did those for free because we just loved doing it. But as the project grew, so did the expectations from the community in terms of features and support. And this is where most open-source efforts fail to scale.

I think most developers that put out OSS software do it for altruistic reasons wanting to give back to the community something that may solve a critical problem.

As community needs grow, you need to find ways to have more time to focus on features. You can do this by growing your team but that’s not always a solution. On the jQuery project, we increased team size and delegated work but even so, being a volunteer-based effort meant the project was reliant on other people’s availability. And with all of us having full-time jobs and many with family responsibilities, I can say that we managed to accomplish a lot with very little availability.

The other option that manifested was the ability to fund time to focus on working on specific tasks. This typically came in the form of sponsorships from name-brand companies that had made substantial internal investments into jQuery and wanted the project to succeed. This actually worked well because it allowed team members to be able to specifically focus on meeting the community needs and focus their abilities on the tough areas that required a lot of dedicated attention.

Now please don’t think this just came about overnight. It took a long time before anyone wanted to contribute to the project and proving the value of the effort was the critical component to that. jQuery is an important part of many sites and products but that following developed over years of hard work and consistency and is not the norm for most OSS projects. And most OSS projects will never enjoy the level of success and notoriety jQuery has simply because of timing or even being “too niche”.

And there’s absolutely nothing wrong with that. I think most developers that put out OSS software do it for altruistic reasons wanting to give back to the community something that may solve a critical problem. So how do these projects get a leg up like the jQuery project did?

Let’s explore this.

OSS Consumers vs. Contributors

I’ve not met someone (both offline and online) who hasn’t used some open-source software. That’s a pretty big deal because it shows that OSS is everywhere. Developers rely on it to start-up their next great idea. Companies leverage it to lower costs. And governments use it to ensure their meeting the needs of their communities. To say it’s pervasive would be an understatement.

The one thing I’ve felt for a long time, though, is that there’s a definite imbalance between consumers and contributors. The ease with which someone can grab a piece of OSS software and run with it due to flexible licensing and little to no cost makes it incredibly easy to forget that someone out there is actually writing and supporting that software. If you simply consume without considering the time, effort and costs involved in that piece of software, there’s a strong likelihood that down the road you’ll be impacted when the project fails. The road to OSS is littered with failed and abandoned projects created by developers with all the right intentions but just didn’t have the resources to keep it going.

How to Give Back

It’s not to say that you need to go all-in like Facebook did with PHP but there are many ways of helping a project from which you’ve taken something that’s valuable to you and your business. Some low hanging fruit are:

  • Contribute code – Most projects use GitHub which makes creating pull requests insanely easy
  • Contribute time – Projects are always looking for people to help with documentation, support and evangelism
  • Write a blog post – Easy enough to write something that makes using a tool easier for others
  • Ask your employer for time – If you’re using a piece of OSS software at work, ask your employer for company time to contribute back
  • Ask your employer to donate back code – Along the same lines, if you’re extending functionality consider contributing it back under the same license of the project

Many projects have pages similar to this that explain specifically how to contribute.

If for whatever reason you can’t offer any of these, you should consider helping to fund some of these efforts. “How?” you ask.

Donating Online

There have been platforms springing up that are designed to solve this problem and we’re going to take a look at two of the most populars ones.

Bountysource – The OSS Projects Funding Platform


Recently, I came across a fundraiser for RVM (Ruby Version Manager). If you’ve ever coded in Ruby on Rails, then I’m pretty sure you know how important RVM is. Unfortunately, it’s main sponsor was ending its support and the project needed to find another sponsor so they took to a novel site called Bountysource which aims to provide a funding platform for open-source software.


I found this totally awesome because there really wasn’t a resource like this for the jQuery project (or MooTools, Prototype, et al) that could allow a project to spin up a fundraising page with all the tools to collect donations. And of course, it allows individuals to browser projects they’d like to help fund and donate via PayPal or Google Wallet.

What really impressed me is that fact that a project can list out the things they want to accomplish and through crowdsourcing, the community can help to fund the completion of the specific features through developer payouts (called a “bounty”). So say that you really wanted $.Deferred functionality in Zepto.js. You could contribute to the feature request to entice the community to implement and once it’s done, the bounty would be paid out to the person(s) who did it.


The service addresses the need of the project, even to the point of breaking down the bounties to specific tasks and values but also allows the community to decide what’s important and fund the development of that feature. It’s a bit of a KickStarter for open-source. Very cool.

Gittip – Crowdfunding People Who Inspire You


Gittip is a service I found out about because of John Resig. He’s been a real advocate of the service and that says a lot.


To quote John:

I saw a great opportunity for the development team at Khan Academy to give back to the Open Source community in ways that were not just code-related.

It’s very different from Bountysource in that it’s meant to offer small weekly cash gifts to individuals that you feel are providing you a value. You can give any amount you want up to $100 per week. This is actually a great resource for those single-man projects where the lone coder is adding features, answering support emails and working the community. It might seem inconsequential but even donating five dollars per week to that developer may be what he/she needs to ensure they know their work is appreciated.

There are over 650 communities listed on Gittip and choosing one will display all of the top givers and receivers:


This also allows you to drill-down into individual profile pages to allow you to contribute to some who inspires you:


And in keeping inline with its OSS ethos, Gittip even allows you to checkout its source code via its Github repo.

More “Do” than “How”

The point of this article is to drive home the importance of contributing back to open-source. If you’re a consumer, then you should seriously evaluate how valuable that library or tool is to you and figure out how to support it. If the project isn’t on Bountysource or Gittip, why not reach out to the project owner and ask them to join so you can donate.

And just because you may not be interested in contributing code doesn’t mean you can’t leverage other skills to help a project grow. In my opinion, the single biggest need of an open-source project are people who know how to work with a community. Soft skills are so important and from my experiences, sorely lacking.

The main thing is that there really is no excuse not to contribute back when you find something valuable. Just because it’s “free” doesn’t mean that a lot of investment wasn’t placed into it and if you don’t support it, it may just go away some day.

December 05 2013


Kickstarting Your Rails Education

It's been a long time since I last coded on the server-side. In fact, if you've read some of my tutorials, you may have noticed that I use ColdFusion as my application server. While ColdFusion still works great, it definitely doesn't have the panache and coolness of newer server-side technologies like Ruby on Rails. Wanting to be a bit more modern, I've decided to jump on the Ruby on Rails train. Both Ruby and the Rails framework are proven technologies that are stable and widely embraced so I think it's a great direction to head to in my server-side renaissance.

Picking it is the easy part. The hard part is actually learning how to properly use RoR and finding good resources learn from, the latter being the hardest part of it. With so many sites coming and going or not being maintained, it can be difficult to find information that's relevant and useful.

Luckily for you, I've done a lot of homework recently and started to collect a list of current. up-to-date resources that have been recommended to me and look really promising.

Let me share these with you.

The Ruby Language

You've got to walk before you can run and learning the ins-and-outs of the Ruby language will help you get a leg up. I'm a firm believer that having a good understanding of a programming language will make leveraging complementary technologies (e.g.: Rails) much easier and allow you to build maintainable code from the get-go. I know it may seem obvious but I've seen plenty of cowboys out there that learn something half-assed in a weekend and throw up production code the following Monday.

The great thing about the web is the abundance of interactive tools available for learning. The slogan for Try Ruby is:

Got 15 minutes? Give Ruby a shot right now!

And they hit the mark by providing an interactive editor that takes you step by step through the learning process. You follow some simple exercises, enter your answers in the editor and get immediate feedback.



Like Try Ruby, RubyMonk takes an interactive approach but they've also broken down the learning into skill levels. Each tutorial is listed by which level the content applies to allowing you to scale your learning appropriately. The site even offers an in-progress tutorial on using Rails.

Why's Poignant Guide to Ruby

When you first hit this site, you may actually think you've landed in the wrong place or a hipster book club. Don't be fooled. Go ahead and click on the book, then follow the pages. Initially, the imagery and cartoons may be confusing but as you get further along, you'll see it's just the author's eccentric style of writing meant to make his presentation of Ruby topics more inviting. The books is actually very good from what I've seen and a good resource to have.


As you learn Ruby, you'll see how rich the language can be. Being "rich" also means there's a lot to learn and language APIs to get comfortable with. This is where Ruby documentation project comes in. It is absolutely invaluable and you will live in this as you start to ramp up in Ruby. Seriously, bookmark it now.

Programming Ruby 1.9 & 2.0 (4th edition): The Pragmatic Programmers' Guide

Affectionately called the "pick axe" book, this is the must-have reference guide for Ruby. It's like the holy grail of the language and the one I found recommended all over the place. The key thing to keep in mind is that it's a "reference" and meant to complement your learning efforts as opposed to actually walking you through the learning process.

The Rails Framework

Once you feel you have a good grasp of the Ruby language, next it's time to jump into the Rails framework. Currently at version 4.0.x, it's become a mainstay for most startups that want a robust framework to get them up and running quickly. From what I've seen, it's very opinionated about how it does things, focusing on a lot of abstractions to make common tasks (e.g.: database access and interaction) easier.

Ruby on Rails Tutorial by Michael Hartl

In terms of learning Rails, this tutorial by Michael Hartl is one of the most complete I've seen and amazingly, he offers it up for free. He does offer some other niceties like screencasts and ebook versions for a cost but unless you want to place the book on your Kindle, reading it online should suffice.

What I love about this is that it covers every major aspect of the Rails framework and is updated with each major Rails version including v4.0.x. It's the reason that I listed it as the first Rails tutorial to check out.

Rails Guides

The tutorials in the Rails Guides will give you a solid foundation to work from. Looking through the Getting Started tutorial, it looks to cover the basics well but it does feel like Michael Hartl's stuff is a bit more comprehensive. Nonetheless, it's still a great option to learn by.

The Rails 3 Way

Obie Fernandez is a Rails guru and this book is recommended by everyone as the must-have Rails reading material. So I bowed to peer pressure and got it. Can't say yet if it's awesome but enough people I know who are good Rails developers said it's good so I'll go with that.


Online Courses

Sometimes having someone walk you step-by-step through the learning process works better. Thankfully, there are some free courses available that provide a nice walk-through of Ruby on Rails and help make piecing things together a bit easier.

Tuts+ Premium Courses

I'd be remiss if I didn't mention Tuts+ as a great place to crank up my Ruby and Rails education. I also think Jeffrey Way would totally disown me as well!

Jose Mota's course, The Fundamentals of Ruby is a great example of the high-quality courses available for aspiring Rails developers like me.


RailsCasts was created by Ryan Bates and currently lists over 400 instructional videos. Most of them are short and cover very specific topics allowing you to zero in on what you'd like to learn about.

Lots of Goodness to Learn From

Well that's my list. I think it's a pretty solid one at that. I know there are a ton of other blog posts, newsletters, sites and resources that aren't listed but that's okay. This is a list to get things kickstarted and as with any new thing, it's easy to get overwhelmed with too much information. I actually wrote about how hard it can be to stay on top of emerging technologies and finding time to learn new things in my op-ed, The Learning Conundrum.

I'm trying to keep things nice and tidy so I can focus and set realistic learning goals. I find this list to be short and sweet providing a good balance of reading material and interactive learning. But if you feel like I'm absolutely missing out on a good learning resource, mention it in the comments.

Sponsored post
09:01 will be discontinued :(

Dear fans and users,
today, we have to share very sad news. will stop working in less than 10 days. :(
It's breaking our heart and we honestly tried whatever we could to keep the platform up and running. But the high costs and low revenue streams made it impossible to continue with it. We invested a lot of personal time and money to operate the platform, but when it's over, it's over.
We are really sorry. is part of the internet history and online for one and a half decades.
Here are the hard facts:
- In 10 days the platform will stop working.
- Backup your data in this time
- We will not keep backups nor can we recover your data
July, 20th, 2020 is the due date.
Please, share your thoughts and feelings here.
Reposted bydotmariuszMagoryannerdanelmangoerainbowzombieskilledmyunicorntomashLogHiMakalesorSilentRulebiauekjamaicanbeatlevuneserenitephinangusiastysmoke11Climbingpragne-ataraksjisauerscharfArchimedesgreywolfmodalnaTheCrimsonIdoljormungundmarbearwaco6mieczuuFeindfeuerDagarhenvairashowmetherainbowszpaqusdivihindsightTabslawujcioBateyelynTabslaensommenitaeliblameyouHalobeatzalicexxxmgnsNorkNork

October 16 2013


The Learning Conundrum

When I started working in information technology professionally in 1989, things were pretty easy in terms of choosing a direction to head into. At least in my area (South Florida), you went into one of the following areas:

  • Network and systems management
  • Database administration
  • Software development
  • Project management-related tasks (including QA work)

ColdFusion was my technology of choice and it too lasted me nearly ten years.

I took the software development route and for a very long time, it was easy to choose a programming language that you could base your career on. In my case, I started with Clipper (a dBase-based compiler) and eventually branched into client-server development using PowerBuilder, the latter being my goto tool for almost five years.

And even when I got into web development, tools and technologies were still easy to choose, primarily because the web was still so young and simple post-back, server-side page refresh style development. ColdFusion was my technology of choice and it too lasted me nearly ten years. And most recently, jQuery and JavaScript have been my focus since 2008.

There's a reason I'm telling you all of this.

The Hamster Wheel

I've been very fortunate to have chosen technologies that have had great longevity but of recent, I've noticed a dramatic change in the industry. The maturation of web development has led to an explosion of new tools that aim to help manage the complex process of building today's sophisticated websites and apps. This is actually a very good thing since for a long time, web development was like the wild west. The formalization of patterns, processes and best practices is certainly a positive thing and will invariably help to build substantially more stable systems.

And a lot of this explosion has been driven by the ease of access to sophisticated programming languages and tools, many offered for free via the open source community. This has enabled developers to rethink the way things should be built and empowered them to build amazing tooling.

This empowerment, though, can be a double-edged sword for the developer community as it feels like we're on a hamster wheel with no brakes that allow us to stop and take things in. It's a bit of a perpetual learning cycle where in many cases, not staying on top of the latest development trends can put you incredibly behind in terms of current development practices. I know I've felt it more than once and in talking with my peers, it seems to be a pervasive feeling.

The Evolution of Learning

I think it's fair to say that software developers have one of the most complex jobs in the world.

You'll hear constantly from others that our field is one of constant learning and that is so true. Developers are rockstars nowadays and it's because we work on cutting edge stuff that makes a tangible impact on large communities of people. And those communities are demanding more information via easier user experiences across multiple form factors. I think it's fair to say that software developers have one of the most complex jobs in the world. So constantly learning isn't a choice anymore; it's a requirement.

Which is why I was mentioning my career path to-date. I think it mimics that of a lot of my peers, where we could comfortably depend on knowing some "thing" for "x" number of years before we had to begin to retrain ourselves. If you're in the web development world, that's no longer the case and in my opinion, a career limiting move. I'm not saying that you need to go off and learn every new library that comes out. Honestly, I think many of the libs and tools being pushed out:

  • Are meant to scratch a very specific itch
  • Replicate an existing tool and offers little additional value
  • Are meant to satisfy someone's ego in a "look at what I built" type of thing

But there is a clear rationale for staying on top of emerging technologies especially when you see your peers chatting about them. And to be clear, I don't define peers narrowly as those I work with. I look closely at people on Twitter, Facebook, Google+, blogs and forums to gauge where their thinking is at. If you're not doing the same, you're doing yourself and your career a disservice.

As you get older (yes I'm touching on age), for most, "time" becomes the biggest limiting factor to staying current. I can attest to this as at age 45 with a ton of family commitments, I have to be extremely regimented in order to dedicate the necessary learning "time" while ensuring I dedicate "time" to my family (which is my number one priority). And I'm confident I'm not alone in this conundrum. I think back to when I was in my 20s and used to write for print magazines (you guys remember those right?) and my colleagues would ask, "How do you have time to do that?". Well, it has come full circle and I find myself asking my 20-something developer friends the same thing.

The thing I've learned is that I can't compare myself to a 20-something because our priorities in most cases are different. A young buck will invariably have more time to focus on the newest stuff allowing him or her to tinker away and even build that next great tool. And that is awesome and I remember those days myself!

As you progress in your career though, it's important not to be lulled into complacency and develop a plan that will allow you to stay up-to-date by being selective of not only the technologies you choose but also the goals you plan on achieving.

Choices, Choices, Choices

As you look at the technologies that are currently available, it's easy to become overwhelmed at where to start, much less what to choose. I empathize with you and you are certainly not alone. Part of the problem is that as developers, we're naturally curious about new technology. I like to call it the "moth to a flame" syndrome:

  • Oh look, there's a new lib to mimic web components! (flutter, flutter, flutter)
  • This influencer just released this new preprocessor! (flutter, flutter, flutter)
  • Oh my god, here's the 4th SaaS that offers real-time backend services! (flutter, flutter, flutter)

The list could go on and on. What I'm trying to get at is that at times, we suffer from attention deficit and try to rationalize it by thinking it will immediately solve a non-existent or future problem for us. In essence, we're technology hoarders doing a "just in case". In reality, it's important to sit back and determine what you're trying to accomplish and how the current suite of tools solve your problems based on where you want to head to.

Part of the problem is that as developers, we’re naturally curious about new technology.

For example, I've heard so many developers say that they want to learn iOS only to find that they have no real plans for building an iOS app. If you have the time to do that for fun, more power to you but if you don't, that's time that should be spent learning things that are actually important.

For example, if you're a front-end web developer and that's what you plan on being for some time, I'm of the thinking that ensuring you're up-to-speed on things such as AMD, ES6, Sass and Yeoman is far more important than diving into IPTables, ActiveRecord, WebView or Amazon EC2. Before everyone loses their minds because of what I just said, let's be clear, if you can manage to learn all of these things (for example, a full-stack developer), more power to you because it will make you more valuable.

What I'm trying to convey is that instead of allowing yourself to become overwhelmed with the thought of learning "the full stack", narrow down the scope into easier to manage goals. Determine where your career focus is, pinpoint a handful of key technologies you should be up-to-speed on, and focus on those in order for you to stay relevant within your career focus.

The front-end developer tract, for example, is involved enough and staying current will keep you busy for a long time. Lou Lazaris wrote a post back in 2011 titled "Skills for Front-end Developers" and in many cases he's spot on. If you look at his list, he's specifically targeted front-end technologies that are important to that role. It reinforces my thinking that it's better to narrow down the scope of what you're learning into manageable chunks within the role you're in. But it's also important to filter down lists like these even further. Do I think that CoffeeScript is critical to my success as a front-end dev? Absolutely not, which is why I've purposely not dedicated time to it.

Again, I'm not advocating not learning as much as you can. Despite me clearly being on the front-end side of things, I'm currently working on learning Ruby and Rails because I'd like to learn a new server-side stack to round out my skills. For me, it means sacrificing learning how to use something like Yeoman but I've taken the time to determine the value proposition of going down this route and I think it's worthwhile for me.

Learn Something

Learning comes in different styles. I learn best by:

  • Reading a book (a real one with actual paper pages)
  • Typing in code examples and seeing results
  • Having a mentor I can ask questions from

Others prefer to simply dive into something and learn by the school of hard knocks. Whichever way you learn, having good resources available is a critical part of the equation.

More and more, I've been leaning towards online courses because they've matured to a point where in many cases they're comparable in quality to their onsite brethren. They also afford the flexibility of allowing you to do things on your own schedule (almost always) and to focus on the technologies that are important to you.

In my case, I recently signed up for One Month Rails which offered me the following:

  • Flexibility: I participate on my schedule without the pressure of having to sacrifice enormous amounts of my personal time
  • Affordability: It's $49 $99 and seems to be well-structured for the price.
  • Mentorship: I can contact the course creator directly and have the support of their community

Regardless of what learning options are available, if you don't set aside some dedicated learning time, it's all irrelevant.

I see this as a jumpstart opportunity that will be complemented by sites like Nettuts+ and Tuts+ Premium as well as books and my community contacts. But ultimately, the flexibility and pace of the course is what I feel will allow me to learn something new in a timely manner. Cost is certainly a factor which you need to weigh versus the anticipated learning benefit and resulting updated skill.

The fact that there are so many online learning options available (many of them free) makes it substantially easier to keep your skill-set current, especially if you're methodical about what you want to learn (for example, don't be a moth).

But you need to carve out the time to learn. Regardless of what learning options are available, if you don't set aside some dedicated learning time, it's all irrelevant. I've personally found that spending one to two hours, two to three times a week immediately after work seems to work well because my mind is still in developer mode. I recently chatted with a friend who finds it better to wake up very early (6am) and focus on learning during the first few hours of the morning before starting work. That way, he's fresh and focused, free of distractions or concerns about his job.

My good friend and badass developer Joe McCann offered this great feedback:

The one bit of knowledge I'll add is that the number one thing I learned studying philosophy in college was not what I was learning, but how I in fact learn things. Truly understanding how one learns, understands, etc. is key to learning a new skill or enhancing current ones.

If someone learns by reading a book or writing down notecards or hearing it via lectures, all of these are available to use now online. It's a matter of understanding how you learn and then going and seeking the proper medium to do so.

Well said.

Learning Resources

It goes without saying that I think Nettuts+ and the various Envato properties offer some of the best online learning options around. In addition, here are a couple of learning sites I've used and recommend:

  • Codeacademy: Learn JS, Ruby, Python and more via their interactive site
  • Ember 101: Ryan Florence did a bangup job creating screencasts that walk you through the process of learning Ember
  • Why's Poignant Guide to Ruby: The style takes some getting used to but it’s definitely a great resource for learning Ruby
  • Focused almost exclusively on AngularJS and recommended by a lot of community members
  • The Ruby on Rails Tutorial: This is the goto tutorial for anyone just starting off with Rails development

If you want something a little more structured and hardcore, a new trend are onsite bootcamps where you will invest a considerable amount of time learning how to use the newest technologies. Just note that many of these require you to move to where the bootcamp is being held and commit full-time to it for a number of weeks. Also, these courses are pricey running into the thousands of dollars in exchange for the more personal learning experience. I've personally participated in the bootcamp but didn't require moving. While I wasn't able to finish it due to time constraints, I would recommend it. Here are some of the bootcamps that have received a lot of positive press:

  • Well structured course that will run you through up-to-date technolgies and provide you with online mentorship via email, chat or voice. Doesn't require you to move.
  • Hacker School: Based in New York, it's a three month onsite bootcamp where you'll work full-time learning programming skills in Ruby and Python
  • The Starter League: Onsite in Chicago, IL and partnered with 37signals (makers of Basecamp) to enhance their learning experience.

The site BootCamper has been aggregating a list of the various bootcamps that are available and providing information about them in a searchable fashion.

Get Unstuck

The main thing is to keep learning and do it at a manageable pace and in a thoughtful manner.

I've been wanting to write something like this for awhile. It's a bit self-serving since it helped me jot down feelings I've had about being overwhelmed with the hamster wheel of learning. Over time, I've been looking at ways to ensure I'm staying on top of things while not burning myself out and I've come to realize that it's impossible to stay on top of everything, even in my own niche. There's just too many devs building too many cools things and not enough "time".

So I've resolved to focus on things that are timely and relevant but may not be bleeding edge and the newest cool toy. I find this to be a much more manageable way of learning for me. And I also think it's important to revisit the tried and true stuff that may not be the latest model car but may have some great surprises for you under the hood. I look back to Jeff Atwood's great post "Why Ruby?" where he discusses his choice for using Ruby to build Discourse and specifically touches on Ruby's maturity and lack of coolness.

The main thing is to keep learning and to do it at a manageable pace and in a thoughtful manner. Really give thought to where you're heading in your career, outline the key things you should be good at within that scope and work towards developing a plan to tackle staying current. There are plenty of flames out there and you don't need to flap your wings to every one of them.

I'd love to learn more from you guys how you stay up-to-date so please be sure to offer your suggestions in the comments.

October 02 2013


Resources to Get You Up to Speed in AngularJS

Some of you may have read my Ember.js series of articles and realized I'm pretty smitten with the framework. But as a professional developer, it's important that I consider other tools and take the time to vet them properly. One of the frameworks that everyone keeps telling me to look at is AngularJS. It aims to make building complex web apps easier but from experience, I know that most frameworks have a learning curve. It's never just dive in and code.

As such, I wanted to complile a list of resources which I've found that I'll be leveraging as I go down the path of learning AngularJS and which I thought might be useful to Tuts+ readers. I've broken them down by categories and included both commercial and freely available resources.

And to be clear, this isn't the end-all, be-all of resources. Invariably, someone will ask why I didn't include a specific resource and that's okay. Just realize this list isn't all-inclusive and solely meant to kickstart my AngularJS learning effort.

AngularJS Official Resources

The AngularJS Project Site

Google has done an excellent job of compiling solid documentation and support resources to help developers work with AngularJS. When you visit the site, the thing that stands out for me is how it immediately drives you to understanding how to begin using Angular. That's important since, as with any MVC-type framework, Angular has a learning curve to overcome and it seems Google are doing their best to help ease any pain associated with it.

Also, being an open-source effort affords you the opportunity to peak under the hood as the code is hosted on GitHub.

AngularJS YouTube Channel

The Angular YouTube channel has a wealth of information available to you to understand specifics about the framework. In looking through the videos, I would consider this less of a beginner's resource as a hub for those who want to dig deeper into specific areas of AngularJS like data-binding. There are some videos that will walk you through building an app but it's not typical courseware that you'd expect from sites like Tuts+ or PluralSight. Nonetheless, the videos are well-done and considering the amount of content, certainly well-worth investigating especially since they're free.

Google Group Support Forum

Support is always the bane of every open source project, mainly because they're typically volunteer-driven so support is basically a labor of love. While there are a couple of ways to get support for your AngularJS questions, this is an official Google medium and it is VERY active.

IRC #angularjs

Want more direct and immediate support? Then jump on into #angularjs on Freenode for some real-time help. When I jumped into the channel, it was jam packed with developers so you should have no problems striking up a chat with someone about Angular.

Online AngularJS Courses

Sometimes you need a jumpstart. Something to guide you through the basics of a technology and get you over the initial hump. Thankfully, there's a nice blend of free and commercial courseware at your disposal.

Tuts+ Premium Angular Course

Obviously a little biased but we're pretty pleased with our AngularJS course by Tom Ashworth which walks you through the important concepts of AngularJS

John Lindquist has produced 49 videos of sheer AngularJS awesomeness and the amazing part is that he's provided them for free. To quote him, "I've never been satisfied with video tutorial sites, so I'm doing something about it."

What I like about the course is that each video is short and concise (average of three to five minutes per video). I loathe overly long videos and prefer quick hits that drill down into a topic to get you the info you need to start hacking.

The team at Thinkster put an interesting twist on their course. They took the excellent courseware created at and combined it with walk-throughs that break down what the video taught you and expand on the topic. This is actually very clever. They even give credit where it's deserved:

We’ve found that the videos are the best starting resource available, so every chapter will lead off with them.

This will be my second resource for learning AngularJS (after Tuts+ of course).

Code School

Code School has an excellent reputation for building online courses. While I haven't done this specific course, in looking at the comments, it seems like it's a solid introduction to the framework.


Another great company that has steadily amassed a ton of great courseware on a variety of topics, Pluralsight also offers a course on AngularJS which from the syllabus appears to be one of the most comprehensive courses available. I especially like that it includes a big section on testing AngularJS apps, something that seems to be an afterthought in most cases.

AngularJS Community Resources

Jeff Cunningham's AngularJS-Learning Repo

If there's one community resource you need to know about, it's the AngularJS-Learning Github page created by Jeff Cunningham. It is one the most comprehensive lists of AngularJS resources I've seen and includes links to blog posts, articles, videos and more. It's also been translated into multiple languages which is icing on the cake.

This truly is a resource to bookmark regardless your level of experience with the framework.


I've been a fan of Alex Young for some time because his site, DailyJS, posts some of the best information about JavaScript on the Internet. I especially love his tutorials where he creates a multi-part series that walks you through using frameworks to actually build something.

In this tutorial series, he walks you through creating a feed reader leveraging several important technologies including Yeoman, BootStrap, Grunt and Bower. So not only do you get to learn about AngularJS but also how it ties into some of the most widely used tools and technologies in use today.

Stack Overflow

The old reliable for support questions, Stack Overflow seems to always be one of the important places to reference when you have issues. Sure, the answers may not always be what you're looking for but at 11k+ AngularJS questions already asked, it's highly likely you'll find the answer you're looking for.

One Hungry Mind

Lukas Ruebbelke's passion for AngularJS resonates in his posts about the framework. With posts dating back to April, 2012, there's certainly plenty of information available to budding AngularJS devs. There's even a post on using AngularJS to build Windows 8 apps!

TodoMVC AngularJS Demo App

Ever wanted to jump into a new technology and wish you had some solid code to use as a reference to learn by? Yeah, same here. That's what the TodoMVC project aims to provide. The project provides a simple but well-written todo app that leverages major libraries including Backbone.js, Dojo and more. Want to learn YUI? There's a todo app for that. Want to learn Kendo UI? Same thing.

Of course, AngularJS is represented here and the framework page provides you not only with source code but a live demo that you can tinker with. Good stuff.

AngularJS Books

Being so new, books on AngularJS aren't common but there are some notables to mention and several that are in production as you read this. The two standouts at the moment are:

Manning is also working on AngularJS in Action. It's currently in Manning's Early Access Program (MEAP) so you can pre-order it and receive the chapter updates as the authors make them available.

Way More Stuff Available

My list is by no means the end all. If you just look at Jeff Cunningham's list you'll find a TON more links to look over. What I wanted to do was narrow down the options to what I felt were good resources to start off with so that I don't get overwhelmed with the volume of information available.

Hopefully this list helps you kickstart your AngularJS learning efforts and allows you to build something really exciting.

June 10 2013


What Are You Using?

We spend a lot of time following the thought leaders in web development, in many cases using the tools and libraries they’ve built, reading the posts they’ve written, articulating cool techniques they’ve learned, and in some cases, attending the defining conference for a specific language. But wouldn’t it be great to learn what they focus on and what they use to build such awesomeness?

I reached out to a group of some of the best and brightest developers in web development to answer those very questions. These are developers that have made strong contributions to the web development community, are highly regarded by their peers for their technical abilities, and continue to help push web development forward via content, code, and leadership. You can check out their bios, below, for more details about them.

These folks are incredibly busy, so I narrowed my questions down to four simple ones:

  1. What’s your primary development focus?
  2. What hardware are you using for development?
  3. Which editor or IDE do you use?
  4. What software can you not live without on a daily basis?

Below, you’ll find the answers they gave and hopefully discover some tools that could make your development much easier. You’ll definitely find common themes (Sublime) and a few nuggets that are new, at least to me.

Scott Gonzalez


Bio: I'm a full-stack web application developer, with a focus on JavaScript. I've been contributing to jQuery since 2007 and I’m currently the Project Lead for jQuery UI. I'm active in the Node.js, WHATWG, and W3C communities as well.

Connect with Scott on his Blog and Twitter.

Q What’s your primary development focus?

Web development, mostly client-side JS and Node.js.

Q What hardware are you using for development?

MacBook Pro.

Q Which editor or IDE do you use?

Sublime Text with TrailingSpaces, Pretty JSON, GitGutter, and Markdown Preview.

Q What software can you not live without on a daily basis?

Git, GitHub, Apache, Chrome, Linkinus, Skype, Node.

Raymond Camden


Bio: Raymond is a senior developer evangelist for Adobe. His work focuses on web standards, mobile development, and ColdFusion. He's a published author and presents at conferences and user groups on a variety of topics.

Connect with Raymond on his Blog and Twitter.

Q What’s your primary development focus?

My primary development focus, in general, is on web standards, Creative Cloud (with a focus on the HTML tools), and typically the "non-sexy" part of client-side dev. I can appreciate CSS, but I get more excited by things like storage, JavaScript, and forms.

Q What hardware are you using for development?

My hardware is a MacBook Pro. I do a lot of mobile development though, so I test with an iPhone, an Android phone, and various tablets. Oddly, the only Microsoft hardware I use daily is my keyboard. I've been using "Natural" keyboards for almost 15 years. I'm addicted to them.

Q Which editor or IDE do you use?

My editor is Brackets, an open source editor we launched about a year or so ago. It's got great ties to Chrome and a cool extensibility layer.

Q What software can you not live without on a daily basis?

Based on what I see in my OS X dock right now, the tools I use every day are my browser, my editor, Tweetdeck, and Evernote. (I keep everything in Evernote, from project stuff, to random tips.)

John-David Dalton


Bio: JDD is the co-maintainer of jsPerf/Benchmark.js, an ES5 compliance evangelist, a JavaScript library enthusiast, a two time Microsoft MVP recipient for IE testing, and a Chakra performance program manager at Microsoft.

Connect with JDD on Github and Twitter.

Q What’s your primary development focus?

Low level utility libs and benchmarking. I'm a libs fan, and dev’ing around them. JS development isn’t my day job at Microsoft, so no client work or anything like that.

Q What hardware are you using for development?

My day job dev’ing is done on Windows 8 and IE10. My personal dev machine is a 13″ MacBook Pro running OS X 10.7.5, with a 2.3GHz processor and 8GBs of RAM.

Q Which editor or IDE do you use?

I use Komodo Edit on OS X and Windows. I love its advanced search. I search by regexp and nested files all the time.

Q What software can you not live without on a daily basis?

I use just about every browser..

Besides my text editor, I use total finder for OS X (this makes its windows manageable). I also have just about every browser; 22 different Chrome versions, five versions of IE, 23 versions of Firefox, 12 versions of Opera, and six versions of Safari. Before I release a version bump, I ensure the given project runs in the environments/browsers that I state it should run in, which is why I have all the browsers. I also have Node, Ringo, Rhino, and Narwhal.

Stephanie Sullivan Rewis


Bio: Stephanie is Director, Web Strategy and Marketing Technologies at Contatta. As a front-end developer, she’s presented sessions at conferences worldwide, including HOW Design, UI16, An Event Apart, Microsoft’s MIX, Macworld, SXSW, Adobe Max, and numerous others. She’s a published author, and while principal at W3Conversions, worked with a wide variety of organizations from Newsweek, MLB, New York Magazine, Adobe, and to Disney’s “TRON” movie site.

Connect with Stephanie on her Blog and Twitter.

Q What’s your primary development focus?

I'm a front-end dev, but I'm wearing a few extra hats due to being in startup mode at Contatta. That means I have the honor of choosing and implementing our new corporate CMS—so I'm digging into PHP a bit, in addition to my usual development.

Q What hardware are you using for development?

I don't use any special hardware. I work on a 17" MacBook Pro (that I haven't upgraded because I don't want to downsize to a 15"). If I'm at my desk, I'm also plugged into a second monitor. I choose to buy my monitors somewhere like Costco, rather than using the high-end models, so that I can view my site like "an average user" does.

Q Which editor or IDE do you use?

Currently, I'm using Sublime Text 2 for daily development. However, if Adobe's open source code editor, Brackets, keeps going in the direction they showed at MAX, I'll probably give it a whirl at some point. I also use Dreamweaver to build my email campaigns in.

Q What software can you not live without on a daily basis?

I give Chrome a daily workout, sometimes with over 150 tabs.

Outside of my editors, I always have CodeKit to compile my Sass and minify my CSS and JS. I use Git for Source control and push my code to the repository via Tower.

I use HipChat to communicate with the rest of the company throughout the day. But the best thing about HipChat is Hu Bot, which handles the deployment from my Git repository to either staging or production. I adore my bot!

My designer uses Fireworks, so I sometimes have that open, slicing and dicing. (Yea, I know Adobe isn't updating it, but it does what he needs, so we'll have to pry it from his cold, dead fingers someday.) I always have Spotify open—usually playing an Artist Radio I make based on my mood or the kind of dev I'm doing (today, it's a Hellsongs station).

Finally, I give Chrome a daily work out, sometimes with over 150 tabs (yes, I have a problem). I use it both for the Inspector and the plugins that I can't live without (1Password, OneTab, ColorZilla, Cache Killer, and Dragdis, to name a few) as well as to house tabs of all the other things I have to keep track of, like Google Analytics, MailChimp, SproutSocial, Google Docs, and anything else I'm currently researching.

Christian Heilmann


Bio: Chris Heilmann has dedicated a lot of his time to making the web better. Originally coming from a radio journalism background, he built his first web site from scratch around 1997 and spent the following years working on lots of large, international web sites. He then spent a few years in Yahoo building products, explaining and training people, and is now at Mozilla. Chris wrote and contributed to four books on web development and wrote many articles and hundreds of blog posts for Ajaxian, Smashing Magazine, Yahoo, Mozilla, ScriptJunkie, and many more.

Connect with Christian on his Blog and Twitter.

Q What’s your primary development focus?

My primary focus is making sure that the next person taking over after me, gets code that is easy to understand and simple to extend. Sadly enough, this is going out of fashion and a lot of focus is placed on "getting it out the door". I really think that we learn the most from each other's work and where better to write clean and understandable code than in our deliveries?

My focus is the web, not just one browser or one closed environment. This means you need to be very flexible in your code. Being very flexible can mean making it work right here, right now, or spending time on making it easily extendable, for new features that may be added in the future. I think after 16 years of web development, we should be at a stage where we stop hacking things together and replacing them continuously.

Q What hardware are you using for development?

MacBook Air, I am always on the go and have little space or time to set up large hardware components.

Q Which editor or IDE do you use?

Sublime Text 2, it’s incredible.

Q What software can you not live without on a daily basis?

Browsers and their developer tools, the command line for Git, an IRC client, Dropbox and Spotify. I have found more and more, that I’ve become independent of fat client software and I use a lot of online services instead.

Ryan Grove


Bio: Ryan Grove is a Sorcerer at SmugMug, a YUI reviewer, and was once an underage model for a Japanese clothing catalog. He likes pie, movies, pie, old style sailing ships, and pie.

Connect with Ryan on his Blog and Twitter.

Q What’s your primary development focus?

I spend most of my time these days building client-side JS components and features for SmugMug. In my free time I write lots of Node.js code and occasionally some Ruby (although JS has really taken over my focus in the last few years). At SmugMug, our framework of choice is YUI 3, and I'm also a core reviewer for YUI, so I contribute a lot of code to it and also review changes from other committers and contributors.

On a typical day, I might write some non-public SmugMug code, some open source SmugMug code, and some open source YUI code. We try to open source as much of our JS as possible, and a lot of that goes back into YUI these days.

Q What hardware are you using for development?

When I’m traveling I use a 13″ Macbook Air.

I work from home on a 2.8GHz Quad-Core Mac Pro with 16GB of RAM, an SSD, and two 30″ HP ZR30w monitors that are fantastic for viewing big gorgeous photos and videos. When I'm traveling I use a 13″ MacBook Air (mid-2011, Core i7), which I love to death. Although, the screen isn't quite as good as my desktop setup for viewing big gorgeous photos.

I also have a ridiculous collection of mobile devices that I use for testing. At least one of every model of iPhone and iPad, several Android devices, a Windows phone, and a Chromebook.

Q Which editor or IDE do you use?

I use Sublime Text 3 for everything. I want to marry it and have its kittens.

Q What software can you not live without on a daily basis?

In addition to Sublime Text, my must-have apps include JSHint (for keeping me honest), iTerm 2, Adium (for IRC), OS X Messages (for iMessage and Jabber), Tower (a GUI Git client), Dropbox and Rsync (for syncing source and data across various machines), Arq (for backup), Gmail, GitHub, and of course Google Chrome as my browser of choice.

SmugMug has lots of remote workers, so we use Google Hangouts for meetings and quick face-to-face chats. Additionally, IRC is an important communication medium for us. SmugMug has its own IRC server with a znc bouncer, and I use the Colloquy iOS app to get push notifications if someone mentions my name or sends me a message while I'm not at my desk.

Charles, cURL, and the REST Console Chrome extension are indispensable for debugging HTTP requests and working with APIs. Oh, and I've gotten so used to using Alfred (an app launcher and search tool) that I can't function when I use a machine that doesn't have it installed. I hit Control+Space and type "mdn [something or other]" about a thousand times a day to look up docs, among many other things.

Cody Lindley


Bio: Front-end/UI/JS engineer and author. Lover of Christ, people, logic, and the dying art of debate, conversation, and rational thinking. Husband and father of three boys.

Connect with Cody on his Blog and Twitter.

Q What’s your primary development focus?

My focus is on front-end code (i.e. HTML, CSS, and JavaScript) used to build thick client web applications and websites for desktop users. I cross over into tablet and mobile web development when necessary.

Q What hardware are you using for development?

My setup for years now has been a MacBook Pro, 27″ Apple Display, Apple Magic Mouse, and an Apple wireless keyboard.

Q Which editor or IDE do you use?

I use the Sublime Text 2 editor.

Q What software can you not live without on a daily basis?

That would be SmartGit, Sublime Text, Divvy, JumpCut, Google (search, gmail, drive, calendar), Skype, Terminal, Chrome, Tweetdeck, Parallels, Textual, Dropbox, Github, Assembla.

Luke Smith


Bio: Locally sourced, (indirectly) grass fed, all organic web developer out of Portland, Oregon. I'm fortunate to work with the amazing and inspiring team at SmugMug. Speaking of amazing and inspiring teams, previously I was a YUI core developer for five years, and am still contributing to the project today. Did I say team? I meant community. Seriously, you all are awesome.

Connect with Luke on Twitter.

Q What’s your primary development focus?

More than anything, really, I like helping people out when I can.

I'm pretty much all JavaScript, all day every day. Specifically, I prefer to work on lower level API stuff, writing abstractions and tools to build other stuff on top of, such as event systems, promises, and XHR/data IO frameworks. I try very hard to make APIs that are intuitive, flexible, and fast. Principle of, least surprise-friendly stuff. But at the same time, I like solving little UI implementation challenges with higher level components. More than anything, really, I like helping people out when I can. I want to contribute more to JS, DOM spec, and standards work.

Q What hardware are you using for development?

13" MacBook Air (one for work, one for personal), 2GHz Core i7 with 8GBs of RAM and a 500GB SSD (personal is 4GB/256GB). My work machine is hooked up to a 22" POS display that I bought years ago for extra real estate, an Apple keyboard, and a magic track pad. I hate the non-split keyboard layout, but love the key shape and action more, so I deal with it. I also hate the use of the word "magic" in the trackpad's name.

As to the Air, I've gone through a number of laptops and desktop units and until the Air, I never had any affection (good or bad) for the tech. The Air is awesome. It's the best laptop I've ever had, the best computer I've ever had. I genuinely love the thing. Fortunately, I haven't pushed its processing limits (yet) to the extent where beefier hardware is necessary. And I suppose I should mention the Yapster headset, since I work remotely. It's good enough for the money vs. how much I use it.

Q Which editor or IDE do you use?

Vim FTW. That is all.

Q What software can you not live without on a daily basis?

I live in Terminal, Vim, Git, and Chrome (dev tools m/). Supporting staff are Shifter (for YUI stuff), Github's pull request and issues systems, VirtualBox, and 1Password. The distractionary cast and crew are: (for lack of a better client), Itsy (minimalist twitter client), Reeder, iOS Reminders app, and Adium. I'm sure I'm missing several that I take for granted.

Chris Williams


Bio: Chris is the VP of Product Engineering at SaferAging and the organizer of JSConf US and RobotsConf. He is the author of the node-serialport, originator of the JS Community Logo, and assists in the creation of amazing tech events like NodeBots and NodeCopter, among others. He is constantly inspired by his wife and two amazing children.

Connect with Chris on JSconf and RobotsConf.

Q What’s your primary development focus?

My focus actually spreads across the entire bow of development these days, from programming and developing hardware sensors, to high availability server infrastructure and development, to frontend information presentation. In a given week, I will be soldering hardware, writing squirrel firmware, monitoring and upgrading servers, and developing new user interfaces and interactions (not necessarily web or visual based). To pick a single "primary" focus is tough because they are all supportive and necessary for creating the products I am working towards or supporting.

Q What hardware are you using for development?

I mainly use Apple products (2010 MacBook Air when on the road, 2008 Mac Pro when at work, 2012 Mac Mini at home) due to their incredible construction quality and visual appeal. I split my time almost down the middle between raw terminal (Fish Shell yay!) use and GUI interface applications, so the fluidity between the two afforded by Mac OS X nicely supports my standard workflow.

Q Which editor or IDE do you use?

I’ll opt for different editors based on the contextual environment I’m working in.

I’ll opt for different editors based on the contextual environment I’m working in. On servers, I’ll use VIM simply because it’s everywhere. On my local machine, I have opted for Sublime Text 3 at this point, though I am always dabbling with others, mainly out of curiosity rather than need.

I use a simple set of plugins (EJS, Emmet, Go, GitGutter, JSFormat, Squirrel) that basically provide syntax highlighting and formatting for me. I find standard IDEs to be too cumbersome and heavy. I get lost in all it provides to be honest. Even with Sublime, I often get lost in the key combos as I just want to get done, what I need to get done, no fluff, no pomp, just optimize on time to complete the task.

Q What software can you not live without on a daily basis?

Sublime Text 3 (as mentioned above), but really that boils down to a raw text editor more than anything. iTerm2 and Fish shell have saved my life on a near daily basis. Wunderlist is something I basically cannot live without because I am just juggling too much stuff in my head at any given point. Outside of software, I couldn't live without my Das Keyboard — typing on anything else these days feels unnatural and discomforting.

Aaron Newton


Bio: Aaron Newton is a jack of all trades and, arguably, king of none. A veteran of numerous startups, most recently Cloudera, he is now Head of Product at Thanx, a mobile loyalty application. As a contributor to the MooTools framework from its first release, he has authored numerous tutorials, a book, and more code than he can ever hope to maintain, most of it being JavaScript.

Connect with Aaron on MooTools and Twitter.

Q What’s your primary development focus?

These days I'm a product manager at Thanx. I'm very technical, so I have a lot of discussions about specific implementations while still doing code reviews and chipping in on development when I can. Our product is primarily a mobile application with a native iOS implementation and an HTML5 version for mobile browsers. We have an Android app which is basically a browser that uses this HTML5 implementation. I tend to contribute on the HTML5 implementation and also to our more traditional web appliations – a dashboard for our customers and internal tools for our own use.

Q What hardware are you using for development?

My trusty MacBook Pro. Everything else runs on AWS / Heroku.

Q Which editor or IDE do you use?

Lately Sublime. I was pretty hardcore about TextMate for years, but finally got tired of not having any updates. I like all the community support for Sublime (and that it can run TextMate plugins), but the two features that finally, really made me switch were the split views and, more than anything, the lightning fast search. Searching on TextMate is the new "my code is compiling so I'm going to go get a coffee."

Q What software can you not live without on a daily basis?

Aside from obvious stuff like web browsers (I use Chrome primarily, but I have Fluid apps for Gmail and JIRA, etc), other tools that come to mind are:
  • Cloudapp – I share files with this all the time. I pay for the pro model and don't give it a second thought when I want to send a screenshot or something somewhere.
  • Jing – most of the time I use the built in screenshot functionality in OSX, but sometimes I want to capture video or annotate the screenshot and that’s when Jing comes in handy.
  • Sequel Pro – aside from being a great, free SQL tool for Mac, I'm in love with the app icon, which is perhaps the best icon for any app, I've ever seen.
  • Jumpcut – this little clipboard saver has removed that nagging sensation that I used to have whenever I hit "copy", that feeling that there's something on your clipboard that you need to put somewhere before you replace the buffer.
  • Total Terminal – I switch to my terminal all the time. Visor locks it to the top of the screen (think of the console in Quake) so it's always only one keystroke away. See also: Total Finder, from the same publisher, which adds chrome-style tabs to Finder (and a bunch of other features).
  • GitX – I use the command line for nearly everything git related… except for staging commits. I still use the command line if I'm staging EVERYTHING, but with GitX it's super easy to take several changes and break it up into small commits, even at the file level.

Ben Cherry


Bio: Ben lives in San Francisco, where he is an Engineer at Pushd, focusing on Ruby and iOS. Previously he built a failed startup on iOS and Node.js, and before that he wrote JavaScript at Twitter and Slide. He maintains a programming blog, mostly about JavaScript, at

Connect with Ben on his Blog and Twitter.

Q What’s your primary development focus?

I spent three years doing heavy JavaScript for Slide and Twitter, but more recently I'm working on iOS and Ruby, while only occasionally working with JavaScript.

Q What hardware are you using for development?

A 13" Retina MacBook Pro with a 27" Thunderbolt display.

Q Which editor or IDE do you use?

SublimeText 2. I Love it.

Q What software can you not live without on a daily basis?

That would be SublimeText 2, iTerm 2, Google Chrome, 1Password, Gmail, Flipboard, Twitter, Facebook, Reddit.

Jacob Thornton


Bio: I write code @medium and I've opensourced a few things (like Bootstrap and Bower). I used to give talks and occasionally, I write about the web.

Connect with Jacob on his Blog and Twitter.

Q What’s your primary development focus?

I suppose I spend most of my time on general front-end (JS/CSS/HTML) development, though I do a good amount of tool/build development and a fair amount of simple server work. I've also been trying to up my accessibility chops – meeting a lot of really rad/super helpful people in this space (like Victor Tsaran from Paypal and Joshua Miele).

Q What hardware are you using for development?

I use a 15" Retina MacBook Pro at work and a 13" MacBook Air at home. I do a ton of testing on different devices though: iPads, iPhones, Android tablets/phones, Blackberry, and even Windows slate.

Q Which editor or IDE do you use?

I use Sublime Text 2.

I use Sublime Text 2. I used Vim (poorly) for a while, but I found most other front-end developers didn't really use it either, and it was weird mentally, always switching back and forth for me. So, I just point and click like a noob now. Honestly, I’m terrible with computers. I know a lot of engineers who are so dope with their computers, and make all of this custom stuff happen, but I literally have no idea what I’m doing most of the time.

Q What software can you not live without on a daily basis?

Rdio – I am useless without music.

Lea Verou


Bio: Lea works as a Developer Advocate for W3C. She has a long-standing passion for open web standards, which she fulfills by researching new ways to use them, blogging, speaking, writing, and coding popular open source projects to help fellow developers. She’s also a member of the CSS Working Group, which architects the language itself.

Connect with Lea on her Blog and Twitter.

Q What’s your primary development focus?

Anything about the client-side: I do HTML, CSS, JavaScript, or even design and UX! However, I have a penchant for CSS, which became even stronger after I joined the CSS Working Group.

Q What hardware are you using for development?

A 13″ MacBook Air Ultimate that I bought last June. I love it. Its touchpad had some issues for the past few months, but I recently got it replaced so I fell in love with my lil’ MacBaby (yes, I have a pet name for it, is there a problem? :) all over again. <3

Q Which editor or IDE do you use?

Espresso. I know there are better text editors around, but its FTP integration is addictively good.

Q What software can you not live without on a daily basis?

Native apps: Espresso, Transmit, CodeKit, Adobe Illustrator, Chrome, Safari, Firefox, Opera, WebKit nightlies, Chrome Canary.

Web apps: Browserstack, Dabblet,,, Workflowy, and Github.

Jonathan Snook


Bio: Jonathan Snook is a Web Designer/Developer who works at Shopify. He can speak, he can write, he can develop websites with all his might.

Connect with Jonathan on his Blog and Twitter.

Q What’s your primary development focus?

These days, I mostly focus on front-end development. HTML, CSS and JavaScript fill up my time.

Q What hardware are you using for development?

I have an 11″ MacBook Air that is my primary machine. When it comes to testing, though, I prefer testing on an actual device as much as I can. I have a Samsung tablet with Windows 8, a Nexus 7, an iPad Mini, an iPhone, and even an older phone with WebOS. Okay, I might not use that last one very much. No BlackBerry device yet. For IE6 through IE9 testing, I use VMWare with Windows XP, Windows 7 and Windows 8 VMs, too.

Q Which editor or IDE do you use?

Vim. It’s so handy and I like having something familiar to use when I’m logged into a remote Linux box.

Q What software can you not live without on a daily basis?

Vim, of course, and my browser of choice these days: Chrome. I’ve been using Google Docs more and more, which has replaced Microsoft Office. Google has really been doing a good job at improving their toolset. I’m starting to buy into the whole Google ecosystem.

Peter Wagenet


Bio: Peter has been developing web applications for nearly fifteen years. He is currently an Ember Core Team member, previously serving on the SproutCore team. He also has extensive experience with Ruby on Rails and has dabbled in iOS development. These days you can find him working for Tilde on awesome projects like Skylight.

Connect with Peter on Twitter.

Q What’s your primary development focus?

I spend most of my time doing Ember development with a bit of Rails thrown in. Right now, I’m consulting two days a week on Ember and the rest is spent working on Tilde projects, mainly Skylight, which is an Ember client with a Rails backend. It also has a Java component, though I don’t work on that.

Q What hardware are you using for development?

I use a 2012 MacBook Air with a 2GHz Core i7 and 8GBs of RAM. I also have a 27″ Cinema Display. I used to have a 20″ LCD hooked up as well with a USB to DVI adapter, but decided to make my desk a little less crowded.

Q Which editor or IDE do you use?

Recently I’ve been using Sublime Text 3. When I first started, I used TextMate, which I loved. However, I got tired of waiting for TextMate 2 and ended up switching to VIM. I fell in love with the VIM keybindings, but was still frustrated by the plugin experience and wished I could have something a bit more polished. For me, Sublime’s Vintage mode gets 95% of what I did with VIM’s keybindings, it has a better plugin architecture, and it’s more polished. I’ve never felt a big pull towards using a full-blown IDE, autocomplete is good enough for me. The only full-blown IDE I’ve used is Xcode and I find that I’m always missing keybindings when I use it.

Q What software can you not live without on a daily basis?

I browse in Chrome.

I browse in Chrome, though I’ve heard some cool things are in works for the Firefox dev tools, so I might be convinced to change. For chat and communication, I use Adium for AIM, GTalk, IRC and Flint for Campfire. I still use plain old and the basic Twitter app as well. I’m not a huge power tools sort of guy, but I’ve been enjoying Divvy a lot recently for positioning windows. 1Password is also indispensable. Since I have a lot of menu bar items, I’ve also found Bartender to be super useful.

In Closing

So, there you go. You now have a nice reference to what many of the leaders in web development are using day in, and day out. We’d like to send out a big “Thank You” to all of the developers who participated!

Feel free to share the tools, hardware, editor/IDE, and software that you use everyday, in the comments.

May 09 2013


10 Tips for Learning a New Technology

We live in a very exciting time. Never before has education been so cheaply available to the masses (if not free). The medium, itself, has made tectonic shifts from a classroom setting, to blogs, screencasts and complete university classes, as a set of videos and interactive forums. Given these resources, there’s absolutely no excuse not to dive in and learn. However, with such a wealth of resources, filtering through the options can often become overwhelming. In this article, I will outline a simple process to kick-start your education.

Although my suggestions will primarily pertain to software development, these principles are certainly applicable to other fields.

1. Overcoming Inertia


Learning something new always begins by first overcoming the inertia to make the first move. This is the same inertia you feel when you want to change the TV channel, but the remote isn't nearby! Thankfully, there are some simple techniques to get excited and motivated. One that has worked really well for me is the concept of Tiny Habits. Rather than becoming overwhelmed by the task at hand, take a tiny step and do something to get started. Using the "get the TV remote" example, start by wiggling your toes, then bend forward, then push yourself away from the couch. Next, try to fall off onto the floor, and finally get up. By following a series of tiny steps, you will overcome your inertia and the task won't seem as overwhelming. This same idea can be applied to learning new skills. It’s all about tiny steps.

2 - Watch the Pros


The first step, when picking up a new skill, is to determine what to learn. This could be anything you feel passionate about, and have a genuine interest in exploring further. It’s important to have this strong inclination, as it will provide you with the necessary fuel, during those low times. Once you decide what to learn, be it a new programming language, an application framework, or a tool, research inspiring work done by their respective communities. You may find it on YouTube, Vimeo, HackerNews, blogs or even from one of your Twitter friends. Reviewing what others have done will give you confidence that you, too, can do it!

3 - Let the Information Flow Begin

Information Flow

Once you cross the stage of convincing yourself about the thing you want to learn, it’s time that become a sponge, and start absorbing knowledge. Begin with some Google searching on "beginner tutorials" related to your topic. As you know, Nettuts+ offers hundreds upon hundreds of tutorials. Check here as well. StackOverflow is one place where you will surely find links to a plethora of resources. Alternatively, Quora is an excellent place to search for answers. Once you sift through these links, you may wish to take a more concentrated dose by looking for the best books on the topic. Personally I refer to Amazon for hunting down highly rated books.

4 - Listen and Watch


As you delve deeper into the pool of knowledge, you will want to add other forms of information – namely, podcasts and screencasts. I encourage you to browse through iTunesU, which offers complete classes on a variety of topics from some of the best institutions in the world. This is particularly helpful for those who prefer an academic setting.

These days, there are a handful of websites that offers online education. Look no further than our very own Tuts+ Premium. Hoping to learn PHP or JavaScript? There’s no better resource on the web. Alternatively, you might consider:

You can also watch conference presentations, such as Google IO on YouTube, or Confreaks for free!

5 - Time for Action


The best way to learn is by doing.

Okay, you’ve read countless tutorials, watched videos, and have a better understanding of the technology that you’ve been hoping to learn. What now? Well, it’s time to put your knowledge to the test. Ultimately, the best way to learn is by doing.

Pick a personal project that you can build using this new technology. Design some simple features and implement them. You will most definitely hit some stumbling blocks. When this happens, research the solution on StackOverflow or Google. You are now on a journey to become an expert in that technology. The more failures and road blocks you encounter, the wiser you will be. There is a saying that "the experts are ones who have made the most mistakes." It means they’ve tried crazy things and pushed the limits of a technology. As a result, they’ve acquired an intimate understanding of how it works. With such insight, they are able to bend the tech to their will and wield Jedi powers (for good, of course).

These powers are also within your reach.

6 - Blogging


As you embark on your journey, it’s helpful to chronicle the steps (or missteps) you took along the way. Blogs are easily the most popular form of expression in the tech community. It’s part of our DNA. When you put a pen to your learnings, you’re forcing yourself to become more cohesive in your thoughts, bringing some structure into the dispersed pieces of knowledge that you have accumulated. Who knows, in the process, you just might be educating someone else on the Internet. Pay it forward when you can.

If you’d like to take things a step further (as writers do every day here on Nettuts+), can take this a step further and create screencasts, which is preferred by most visual learners. Overall, blogging helps you build your communication skills, which is as important as the technology you are learning.

7 - Feel the Pulse


Technology matures when people do crazy and sometimes unthinkable things.

Social Networks have become a universal way of staying in touch and discovering new things. Twitter and Facebook are the primary suspects for information, but there are more focused websites, like the previously mentioned Quora, that have a wide-ranging set of topics, which people may vote and comment on. It’s a great place to find answers and opinions from well-known individuals with real-life experiences. In fact, a quick search on Quora for other perspectives on learning, reveals an interesting set of results.

Scanning the ever-growing set of questions on StackOverflow can also be a fun way to review the way in which others are pushing the limits of a particular technology. In fact, technology matures when people do crazy and sometimes unthinkable things with it.

If you want to feel the pulse of a technology, and determine whether it’s worth learning, try a search on StackOverflow to see the breadth and depth of the community. The Most Voted, Featured questions are excellent candidates for this sort of exploration. You can also carry out a similar exploration on GitHub.

8 - Meetups and Conferences


Although social networks are great, nothing can substitute real human connection. It is quite likely that you have a Meetup group in a place near you, where you’ll find several like-minded folks. You will learn about interesting projects that others are working on, while also getting some of your tricky problems solved!. On a related note, conferences, too, are a great place to share experiences and enrich your already growing skill-set.

9 - GitHub


GitHub is the iconic landmark for the world of open-source projects. It’s a treasure trove of knowledge and creativity, expressed in the form of code. Once you feel comfortable with a particular technology, your next step should be to explore GitHub to find interesting projects. Read the source code. Read as much as you can. In doing so, you can learn a variety of things, such as:

  • How to organize large projects
  • Interesting libraries that projects are using
  • Code patterns and overall design
  • Documentation style
  • Testing patterns
  • Solutions to odd issues, pointed out in the Issues section of the project

All of this knowledge is just waiting to be devoured. Interestingly, and to your benefit, it only comes with a simple price tag: curiosity.

10 - Concentrated Learning


If you worry that the process outlined above is too slow, you might also try a fast-track approach. You may have heard about the "Learn X in 24 hours", but that is not what I am referring to. A more pragmatic time-line is probably a few weeks. If that seems reasonable, you can try something like Seven Languages in Seven Weeks or Seven Databases in Seven Weeks. Although these books refer to languages and databases, you could do the same with other technologies.

A slightly different style would be to learn things the "hard way". The idea here is to accept upfront that nobody can master a skill unless it is practiced daily. So to gain expertise, you practice by working through countless exercises. In a similar vein, you also have Katas and Koans, that encourage solving problems in the language of your choice. These will introduce you to concepts and techniques that may initially be alien to you. That’s the point! If you really want to displace yourself from your comfort zone, give them a shot!

Learn an Orthogonal Skill

Your right-brain processes information in a very different fashion.

Programming is primarily a left-brain activity. It leverages the analytical part of the brain that looks for a step-by-step approach to solving problems. To appreciate the power of the right-brain, take up a creative activity, such as painting, 3D-modeling, origami, playing an instrument, or even building photo books out of your family albums. In fact, programming requires a great deal of creativity. You might have already experienced this, if you’ve ever found solutions to obtuse problems in your sleep. This is because your right-brain processes information in a very different fashion, and can compile ideas from all over the place. Andy Hunt, from the pragmatic bookshelf, wrote a book on this topic: Pragmatic Thinking and Learning: Refactor Your Wetware. If you want to be firing on all synapses, pick up a skill orthogonal to what you already do.


Acquiring a new skill is always exciting. It’s the start of a new experience that will shape your thinking. But first, you must overcome your inertia. Once you do, your journey to absorb knowledge from every facet of the web begins. I hope that the process outlined above has given you some ideas for approaching this long road.

If you have a different approach to learning, I’d love to learn more about it. Feel free to leave a comment, while I leave you with these inspiring links:

Tags: General

March 24 2013


The 11 Phases of a Web Developer’s Career (As Illustrated by Memes)

The career of a web developer is an interesting one with many slopes. Considering a learning curve this steep, you can fully expect to live through periods of frustration, enlightenment, self-righteousness, and every mindset in between. In this article, we’ll have some fun, by reviewing each of these phases through the lens of a meme!

Phase 1 – Noob

Complete Noob

We all have warm feelings for the early days of our careers; the period when you have absolutely no clue what you’re doing. Like a fish out of water, each new line of code is a mystery. Doctype? Huh? What the heck does a <div> do? The first phase is an intimidating, scary, but exciting one. How many dang languages are there?

Perhaps your greatest advantage, though, is that you have no idea how deep the rabbit hole goes. Learning HTML is the baby step.

Phase 2 -The First Steps

First Steps

Though it takes a while, you’ll eventually learn enough to begin taking your first steps into the coding world. While Phase 1 is the overwhelming “how/where do I start” period, Phase 2 is the one in which you slowly begin building your skill-set. Sure, the syntax for defining styles with CSS still feels foreign, but at least you’re able to make a change in your freshly bought code editor and see it reflected in a web browser. That’s a wonderful feeling!

Phase 3 – Complete Frustration

Complete Frustration

Imagine being lost in a cave, shining your flashlight down each tunnel, as you search for a way out. With each step, you hope to see a glimmer of light. Unfortunately, the learning curve in our industry is a steep one. That speckle of light won’t come for a long time, I’m sorry to say. Expect to spend hundreds of hours in this phase, reading technical books over, and over, and over, as you desperately try to make sense of the madness!

If the frustration becomes too overwhelming, find peace in the fact that every one of us felt that exact way at one point or another in our careers. You’re not alone. Stick with it, and, before long, you’ll reach the aha phase!

Phase 4 – The Aha Moments

The Aha Moments

An “aha” moment is one of the greatest feelings in the world: that brief instance when, suddenly, you “get it.” “Ohhhhh, now I see!” Personally, I’ve found that these coding break-throughs occur late at night, when the rest of the world is sleeping. After the eighth read, what was once blurry is now, at least somewhat, clear!

This is the phase when all of the technologies and languages you’ve been learning begin to click.

Phase 5 – Fragile Code

Fragile Code

Like it predecessors, the Fragile phase is a lengthy one. At this point, you are successfully building applications and achieving your desired end result, but the underlying code is one client feature-request away from popping. In this phase, your methods are dozens of lines long, and the concept of testing hasn’t yet entered your brain.

But at least you’re building things! For now, though, keep your GitHub pull requests limited to documentation and typos fixes. Don’t underestimate how helpful that can be!

Phase 6 – Copycat


The copycat phase is an important one. There’s no better way to learn proper coding techniques than to spy on the code that your heroes write – even to the point of reproducing their code line by line. Don’t feel badly; every artistic career has its copycat phase! Luckily, GitHub has made this form of silent envy easier than ever before. Of course, copying will only get you so far, but it’s an excellent start! Mimic the people who inspire you, and, eventually, you’ll begin to develop your own style.

Phase 7 – Cocky


At this point, you’re finally beginning to get into a groove. There’s certainly vast room for improvement, but your confidence is quickly rising – perhaps too quickly! They say that, in the first few years, you still don’t know enough to realize just how little you know!

Resist the urge to become too cocky at this stage. It benefits no one, and will only make your future, far more talented, self look back and shake his head. When you feel the need to leave a sarcastic “learn how to code, dude” comment in a GitHub, Reddit, or StackOverflow thread, don’t. It wasn’t too long ago that you, yourself, were a complete noob. Pay it forward; don’t knock people down. We’re all in this together – just at different phases.

Phase 8 – Learning Vim

Learning Vim

If you’ve ever looked over a fellow developer’s shoulder, and found yourself amazed by the speed at which they maneuver in their code editor, then, chances are, they were using Vim. Though it comes with a massive learning curve, once you’ve reached the top, your workflow, too, will look like magic to onlookers!

This is the phase when you begin harnessing, not only your coding techniques, but your workflow as well. Proper tooling is equally as important as technique.

Phase 9 – When Code Becomes Art

When Code Becomes Art

Though it takes thousands of hours, one day, you will look at your code and the ease with which you breeze through the command line, and realize that it’s nothing short of art. Your code is under version-control, well-abstracted, perfectly testable, scalable, and easy to read. At one point in your career, you might have prided yourself on your ability to write cryptic, confusing, but functional code. Leveraging every possible language quirk or hidden feature is not a sign of a mature developer. Neither is reducing complex logic down to a single line, all for the purpose of patting yourself on the pack for being so clever. It instead signals a cocky developer who doesn’t think about the future maintainer of his code.

Code becomes art when its readability is easily as important to you as the action it performs. In this phase, you code for human beings; not machines.

Phase 10 – Seasoned


When code becomes instinct, you’ve reached the next phase of your career. No longer do you think in terms of language or framework. Instead, you simply see problems, and choose the correct tool from your coding tool chest to provide the solution. A seasoned developer understands why the cowboy path is rarely the correct route. Each new feature is discussed with all members of the project, whiteboards are prepared, stories are written, and tests are generated…all before writing a single line of production code.

You’ve become a mature, thoughtful developer who others want to work with. Congratulations.

Phase 11 – Rock Star


Few make it this level. The rockstar phase is the tip of the mountain. In addition to your day job, you regularly speak at conferences, serve as the lead behind countless popular open source projects, yet still find time to participate and contribute to the future of the web through mailing lists, while simultaneously assisting newcomers on IRC. You’re the type of person who writes compilers and parsers for fun.

You’re what others refer to as rock star or ninja, despite the fact that you hate such labels. You know better than anyone how much more there is to learn!

Tags: General humor

August 22 2012


TextExpander for Web Developers

For those unfamiliar, TextExpander is a fantastic productivity app for Mac that has the potential to save you hundreds of hours over the course of a year, and, with the latest release of Version 4, it’s now better than ever. The basic idea is simple: allow the user to assign abbreviations, which will be expanded to larger strings of text. But, once you really dig into the app, you'll discover just how powerful it can be for web developers.

1 - Basic Usage

Before we dig into some of the more fun techniques, let's first review basic usage for the app.

Let's say that you want to save yourself a bit of time, when creating HTML. Rather than manually typing:


…you instead want to simply enter blockquote, and have that text expand to the HTML snippet above. In TextExpander, that's a cinch.

We begin by creating a new snippet.


Next, within the "Content" window, we can paste in the full text, and specify an abbreviation.


Notice how, in the image above, we also specified, via the %|, where the cursor should be placed after expansion.

We've now created a direct link between the string, "blockquote," and the HTML snippet above. The next step is to determine when we want the expansion to occur. There are a couple of choices:

  • Expand immediately after the abbreviation is entered
  • Expand after a specific delimiter, such as the "Tab" key

Personally, I prefer the latter; otherwise, occasionally, accidental expansions may occur when you least expect it. If you do choose the first method, I encourage you to think wisely about how you name your abbreviations; perhaps a special naming convention will help.

To set a delimiter, choose "Preferences -> Expand Abbreviations," and choose the option that best fits your needs.


Now, try it out! Open a text or code editor, type "blockquote," followed by your specified delimiter (if any), and watch it instantly expand to the HTML fragment, while placing the cursor in the correct location.

Excellent! Very helpful – but we can do more.

2 - The Clipboard

For our next trick, let's imagine that your blog requires specific formatting, when adding images. Perhaps there needs to be a caption, or maybe it should be surrounded by a div – much like we do on Nettuts+.

<div class="tutorial_image">
  <img src="path/to/image.jpg" alt="image">

The only problem is that this is a pain to write manually each time. TextExpander to the rescue!

Create a new snippet, give it an abbreviation of "tutimage," and paste in:

<div class="tutorial_image">
  <img src="%clipboard" alt="%filltext:default=image%">

This looks a bit scary, but TextExpander will help you with the specifics. First, the expansion will assume that you have the source of the image pasted into your clipboard. Then, when you type "tutimage," it'll paste the contents of your clipboard as the value of the src attribute. Notice where we added %clipboard? You'll use this feature often!

But what about that confusing alt attribute section? We can separate this logic into three parts.

  • %% – Represents the beginning and end of the TextExpander logic
  • filltext – The desired command
  • default – The default text that should be applied ("image")

However, if you worry that this will be difficult to remember, TextExpander can auto-populate the data for you.


Now, when creating a new blog post, simply copy the source of the image into your clipboard, and then type, "tutimage." Because we chose for the alt text to be filled in, a pop-up dialog will be displayed.


Either stick with the default, and hit Enter, or set a custom value for the attribute. Once you press Enter, the following snippet will be added to your editor:

<div class="tutorial_image">
  <img src="my-path.jpg" alt="some image">

Nifty! This trick is especially useful, when, for example, copying an image’s source from Amazon S3.

3 - Personalized Messages

It's not that we enjoy form emails (in fact, we hate them), but there are only so many hours in a day. Sometimes, it's easiest to paste in a template and click, "Send." Let's get the best of both worlds instead. We'll use a template, but personalize it for each person.

Create a new snippet, give it an abbreviation of "invoice," and add:

Hey, %filltext:name=person%, 

Thanks so much your business. Please note that I have attached an invoice to this email for $%filltext:name=amount%.

Let me know if you have any other questions, %filltext:name=person%!

Thanks again!  

First, note how we’ve added two `filltext` commands that have the same identifier: “person.” Because the value for each should be identical, when we apply a name for the first fill-in, it will automatically be added to the second occurrence as well.

We’ve also set a fill-in for the amount of the invoice.

Now, when we type “invoice,” along with the delimiter, we’ll see:

Invoice Snippet

These are simple conveniences, but quickly add up to huge time savings over the course of a year.

4 - Vi Fan

Maybe you’re a faithful Vim user, and would like to take advantage of some of those helpful keyboard commands in the browser – perhaps, when creating a new blog post.

Our goal is: when we copy a bit of text and type “s” (for “surround”), that text will then be surrounded with an HTML tag. Let’s make it happen!

Create a new snippet, set the abbreviation to “s”, and add:

<%filltext:name=Tag Name:default=strong%>%clipboard</%filltext:name=Tag Name:default=strong%>

Important: for this to work correctly, make sure that you choose "Abandon Delimiter" within Preferences. Otherwise, the expansion will retain the Tab.

Again, what we have here is really very simple. We let the user specify what the tag name will be (a default of strong), and then we set the contents of the clipboard within the tags.

To try it out, select some text in your code editor, copy it with Control/Command + C, and then type s + Tab.


Once you specify a tag name, hit Enter, and the selected text will now be surrounded with the designated HTML tag.

Okay, okay – it's a bit of a gimmick; but it works!

5 - Those Dang Form Inputs

You hate them as much as I do; create a label, set the for attribute, set the text, create the form input, set the value, name, and id fields. It's all very time consuming. Let's fix that, using an abbreviation of "forminput."

    <label for="%filltext:name=Input ID:default=name%">%filltext:name=Input ID:default=name%: </label>
    <input type="%filltext:name=Input Type:default=text%" name="%filltext:name=Input ID:default=name%" id="%filltext:name=Input ID:default=name%">

Remember: you don’t have to enter this verbatim; TextExpander will provide the necessary menus to make the process as easy as possible.

Now, when we type, "forminput," we get:


If you think about it, there's a lot of duplicated text, when creating labels and form inputs. That's why this technique can be so useful. Set the first for attribute value, and that text will automatically be applied as the label's text, and the input's name and id value.

Now, we end up with:

    <label for="name">name: </label>
    <input type="text" name="name" id="name">

So much easier!

6 – Optional Items

Going back to that previous trick, there might be times when we don’t need a wrapping list item for the label and input. Let’s update the snippet to make those optional, using an “Optional Section.”

Delete the wrapping list item, and choose “Fill-Ins -> Optional Section.”

Optional Items

The key is to make both the <li> and </li> parts optional, but give them both the same name, so that the toggle checkmark affects both.

Here’s the generated output:

%fillpart:name=Wrapping List Item?:default=yes%<li>%fillpartend%
	<label for="%filltext:name=Input ID:default=name%">%filltext:name=Input ID:default=name%: </label>
	<input type="%filltext:name=Input Type:default=text%" name="%filltext:name=Input ID:default=name%" id="%filltext:name=Input ID:default=name%">
%fillpart:name=Wrapping List Item?:default=yes%</li>%fillpartend%

This time, when you trigger “forminput,” you’ll have the option to exclude the wrapping list item.


7 – New File

Mac users: we are all irritated by the fact that there’s no easy way to create an empty new file. Well, here’s a little trick. Even if you’re not typing into a text editor, TextExpander is still listening.

Even better: we can also execute Shell scripts and AppleScripts in TextExpander!

Get where I’m going here? Let’s assign a shortcut of “file,” which will create a new file on the Desktop when triggered.

This time, within the content window, at the top, choose “Shell Script,” and paste in the following:

#! /bin/bash

cd ~/Desktop
touch %filltext:name=file name:default=index.html%

The first line is standard for shell scripts, and points to Bash. Next, as you would do in the Terminal, cd to the Desktop, and create a new file, by using the touch command.

TextExpander Window

That’s it; try it out! Anywhere on your Desktop (even outside of a text editor), type “file” along with the delimiter that you specified. A dialog will popup, with a default of index.html; once you hit enter, the new file has been created!


8 - Markdown

The problem with languages, like Markdown, is that we become dependent upon them. When I’m forced to write regular HTML, whether it be in a browser or Word processor, I silently think mean thoughts. What if we could stick with the same conveniences that Markdown offers, while still immediately outputting HTML? We can – with a bit of trickery.

Let’s consider the use of Github-style code.

echo 'some code';

Let’s create an abbreviation, ```, which will expand to whatever HTML is required to display syntax highlighting for your code. For Nettuts+, we use [language]CODE[/language], but your platform might use pre tags. Let’s take care of the latter method.

Paste in:

<pre name="code" class="%filltext:name=language:default=css%">

And that’s it! Now, type ```, fill in your desired language, and the necessary HTML will be output. Rinse and repeat for all of the other Markdown features you use.

9 - Placeholders

A big part in the initial stages of creating websites is setting placeholders, whether that be the generic “lorem ipsum” text, or image placeholders.

The “lorem ipsum” part will be a cinch. Let’s knock that out right now.

Before we do, though, it’s important that you adopt a system, so that you can remember these shortcuts. For my projects, all placeholder snippets follow a naming convention: the word, “place,” and the name of the snippet.

So, to place a single paragraph of “lorem ipsum” text, I would use an abbreviation of “placelorem1.” And, for two paragraphs, “placelorem2.” If I instead add a placeholder image, then the correct abbreviation would be “placeimage.”

Lorem Ipsum

Well that was easy. Rinse and repeat for as many paragraphs as you need.

For placeholder images, we’ll take advantage of the excellent service. The only problem is that I often forget what the correct URL is. If we instead use TextExpander, that becomes a non-issue.

<img src="" alt="placeholder">

While we’ve set a default image size of 350×150, the popup menu will allow you to override that setting, if necessary. Now, we can add placeholder images to our projects in seconds.

10 - More Options

If you think about the previous placeholder tip, when it comes to image services, there’s a lot of them! Why don’t we modify “placeimage” so that the user can instead select from a variety of choices. As of TextExpander v4, this is now possible.

In addition to single-line fill-ins, TextExpander offers a few others as well, including a Popup menu.

Popup Menu

This allows us to provide a drop-down list of potential fill-ins.

Adding Options

Above, I simply pasted in the correct URLs for several different placeholder services.

<img src="" alt="placeholder">

And, now, when we trigger “placeimage,” we get:


So cool! Anything that allows me to think less, and work faster is a good thing.

11 – Can’t Remember?

If you’re like me, even with a naming system in place, sometimes our brains leak, and we can’t figure out what we named a particular snippet. TextExpander offers some helpful hotkeys for suggesting snippets, creating new ones, and more.

Here’s what I have set for the two that I use most frequently.


Now, if I can’t remember what I called a particular snippet, I press Option + Command + s (“s” for suggest), and now I can search for it. If you’re working along, type “place,” and then see what suggestions it presents.

Suggest Snippet

Once you find the correct snippet, press Command along with the correct number, and your snippet will be pasted in.

Closing Thoughts

I consider TextExpander to be one of the power-house apps in my development toolkit. It only takes a quick peak at the TextExpander Stats to show that I’ve saved an insane amount of time as a result. Give it a try if you haven’t; Nettuts+ gives it a big thumbs up!

July 25 2012


3 New Relic Power Features You Should Be Using Today

You already know that New Relic provides deep performance metrics for your Java, .NET, PHP, Python or Ruby application. But are you familiar with the power features that can bring your knowledge about your app to a new level? Don’t let the name fool you. While these features have serious power, they are easy to get started with. In this tutorial, I’ll get you up and running with three powerful New Relic features you should be using today.

Developer Mode

One of the most powerful features available to Ruby developers is Developer Mode.

Developer Mode gives you high visibility into the transactions being executing on your local development machine.

You’ll be able to immediately see in-depth transaction traces, including response times, individual method calls and SQL queries. Developer Mode jumps straight to the code block that is being executed, something you can’t do on the normal site.

Instead of talking about Developer Mode, let’s just dive in and take a look at it in action. After installing New Relic into your application, and clicking through a few actions, you’ll have a list of transactions to explore at http://localhost:3000/newrelic.

Click on one of the URLs in the list and you’ll get a Summary view of the entire request.

From this view, you can see every step in the request, from template rendering through the actual SQL time. In the example above, you can see that 53% of the request time was spent rendering the show.html.erb template. This is an excellent place to implement some fragment caching to speed up the request.

From the Detail view (as shown below), you can explore each step of the request, starting from the controller and action being called, through each additional method, template and SQL query. Clicking on a line like User#find_by_sql will take you to the exact line of code that made that method call (below, lower).

Finally, you can see every SQL query that a request makes by looking at the SQL view. From there, you can spot any duplicate SQL requests you might have made and go straight to the line of code that is creating it. Or, you can view detailed information about the statement to explore in-depth review of the query for information on the number of tables used, rows scanned and indexes accessed.

Having detailed performance information about your application, down to the line of code, is invaluable during development. The power of Developer Mode can really only be appreciated by using it, so, if you’d like, sign-up for a free 30-day Pro Account and give it a try.

Custom Metrics and Custom Dashboards

The New Relic agent collects a massive number of metrics about your application with very little effort, but knowing how an application is technically performing isn’t the whole picture. You need to know how your business metrics are performing in your application. Custom metrics, such as order value, login attempts and signups/registrations can all be collected within New Relic, and compared against the technical performance of your application.

Custom Metrics are available in all five of the supported languages: Java, .NET, PHP, Python and Ruby.

Below is an example of a custom metric using the Python agent, but the concepts are the same for the other languages.

As you can see in the example above, we’re sending one of two custom metrics whenever an order is processed. If the order succeeds, we send the dollar value of the order. Or if the order fails, we send a counter instead. Recording custom metrics like these can provide a deeper understanding of the impact that your application’s performance has on your business metrics. In the case of the failed orders, by using custom metrics, you can spot problems sooner when you spot a spike in the failing metrics (e.g., your payment processor is down).

You can use custom metrics for recording timing data as well. This is an excellent way to monitor the response time of an external service you depend on.

Custom metrics should always have a name that begins with Custom/* in order to avoid any namespace collisions with the native agent metrics. Once you have these custom metrics, you can get some real visibility by combining multiple native charts with charts of your custom metrics on a Custom Dashboard. If you aren’t already, you should start collecting the metrics that are critical to your business with a free 30-day Pro Account.

Scalability Analysis

It certainly would be nice to know if your app will be able to withstand a sudden surge in traffic before you actually hit the front page of Hacker News. But knowing which component of your application could be the bottleneck is hard. Will it be the application itself? Your database layer? Or maybe even the CPU utilization will be overwhelmed?

The final power feature you should be using today is the suite of Scalability Analysis reports that show you your app performance. In an ideal world, your application performance should hold fairly steady as the load increases throughout the day. You can see in the chart below that as the requests per minute (X-axis) increase, the application response time holds steady (Y-axis).

If, on the other hand, your app is not equipped to scale with increases in request, then you will see a chart with a steep slope like the one below. Here you can see that as the number of requests increases, the database response time also increases dramatically.

These types of trends are very difficult to spot without such rich visualization. Optimally, you want to see the response time grow fractionally with the increased requests. If you find that your application response time is growing geometrically with the increase, then it’s time to optimize. Since you never know when your application is going to need to scale, it’s important that you keep an eye on it’s scalability as it grows. Tools like the Scalability Analysis and Capacity Analysis reports are a great way to easily make performance monitoring part of your routine.

If you haven’t already, you can sign up for a free 30-day Pro Account at New Relic to try these and many more power features that will keep your application performing at its best.

Tags: General

February 14 2012


Attention Developers: NewRelic is your Secret Weapon

While the title of this article may sound like a cliche, hatched in the bowels of PR hell, I’m serious when I say that NewRelic is your secret weapon.

In this article, I’ll talk about the common aspects of web application performance, and then demonstrate how NewRelic makes it blissfully easy to manage.

In the nearly six years that I’ve worked at Envato – previously developing and managing the series of marketplaces and currently managing development of the Tuts+ blog network – I’ve used NewRelic to keep costs down, improve and debug performance problems from the small to the large, and avert potential catastrophes.

If you’re new to this topic, or don’t currently manage a website for someone in any capacity, don’t stress; this article will still be useful. You never know when this knowledge could save your bacon, and I’d wager it’s inevitable that it will – unless, of course, you decide to throw in the hypothetical developer towel and become an astronaut or rancher.

NewRelic in 20 Seconds

Before I launch into a reasonably long tirade on web application performance, it makes sense to quickly sum up what NewRelic is before you trundle off to Reddit or something similar.

NewRelic is a managed service (SaaS) that you “plug in” to your web app, which collects and aggregates performance metrics of your live web application.

The information it provides can help you find answers to questions like: Is my website slow? Who is it slow for? Where is it slow exactly? Do we need more, or bigger servers? What can we do to improve things?

These questions and their answers are oftentimes crucial to your web application’s success or failure. If you’ve never collected performance metrics from your live web app, you’re literally running while blindfolded; at some point you’re going to hit a wall!

Before I take you on a tour of NewRelic’s features, I have to define what web application performance is. Let’s get to it.

What Exactly is Web Application Performance?

Front-end performance is about “perceived” performance.

I like to split web app performance into two conceptual parts: front-end performance and back-end performance. While the two areas do indeed have crossover and affect one another, it’s helpful to draw a distinction.

Primarily, you can think of front-end performance as areas concerning perceived performance, such as how long a page takes to fully render to an end user. Variables that affect this type of performance include:

  • How large your HTML, CSS, JavaScript and images are
  • How many HTTP requests are sent to servers to fetch all of these assets
  • How they are organized in the page to affect perceived performance, whether or not a user’s browser has to re-download assets regardless if they’re the same or not.

I have only seen web applications and websites “fall over” as a result of mismanagement of the back-end.

Back-end performance involves some kind of programming language that runs your code (i.e. PHP, Ruby), and some kind of database server (i.e. MySQL). Generally, most web applications are assembling HTML documents to be sent to your user’s browser, and are made up of data fetched from one or more databases – or even one or more external service (such as the Twitter API). I also typically lump in server resources (such as CPU usage, memory usage, disk IO) into this category, as it’s the code running on your server (not in your user’s browser) that affects these resources.

Why is this distinction so important? Because, in my experience, I have found that a confusion between the two leads to useless effort being applied when trying to improve performance issues. I have witnessed work on the front-end performance of ailing websites when the actual issue has been the backend. On the other hand, I have watched people focus on back-end optimization when the problem has been on the front-end. It’s essential that you understand and appreciate the difference.

On their own, these two subjects can be rather deep and complicated, and it’s a topic for an entirely different series of posts. While I’m decidedly specialized in back-end performance, in all of my professional career, I have only seen web applications and websites “fall over” as a result of mismanagement of the back-end.

Three and a Half Approaches to Managing Performance

There are three ways in which people tend to manage the performance of their web applications:

  1. Write code, deploy it, and hope for the best.
  2. Write code, guess which areas will become bottlenecks, measure and optimize them up front, deploy and hope for the best.
  3. Write code, measure the live application with something like NewRelic, then fix and tune as appropriate.

The first approach is 100% reactionary. If you follow this method, you will only know if your web app is failing or performing poorly when your customers tell you (if they ever tell you).

The second approach is considerably more mature; the developers are preempting problems and attempting to resolve them upfront. While this is admirable, the possibility of spending vital resources optimizing the wrong area, and the lack of ongoing feedback will provide few facts about what is truly going on in the live environment.

The third approach is the almost ideal situation. By monitoring a live web application, you’re able to review how various things are performing, based on what your customers are actually doing. You can write code and receive immediate feedback on how well (or not) it’s performing.

The Ideal Approach

The ideal approach is to follow the third and apply a healthy measure of the second.

It doesn’t hurt to consider performance up front; it is infinitely more useful to have true metrics. The old programming adage, “premature optimization is the root of all evil” may apply here, though, in programming, as in life, axioms are rarely anything more than half-truths.

Measurement & Management: A Balancing Act

There is no such thing as one true method to managing your web application’s performance.

No matter what anyone says (including me!), there is no such thing as one true method to managing your web application’s performance. Depending on your app and customers, there will be different approaches and techniques. Yet one thing remains constant: you have to measure.

So, what do you measure? Again, there isn’t one true list, yet there’ll always be a common number of metrics worth measuring. For example:

  • The number of application requests over time.
  • The wall clock time requests take to complete.
  • The CPU usage of your servers over time.
  • The hard drive reads, writes and utilization over time (known as Disk IO).
  • The number of database queries, and the time they take to run.
  • Queries run on your database that take over two seconds to complete (slow queries).
  • Incoming and outgoing bandwidth over time.

This list, while certainly not exhaustive, will offer significant insight into your web app’s behavior, especially if you’ve never monitored them previously.

Once you have this kind of data, the management of your web application is where all the fun begins. You may find that, once removing a bottleneck in your database (perhaps a few slowly executed queries), you’ll expose another as more server resources are freed up. It truly is a balancing act.

Ultimately, what successful management looks like is something like this: you may double the efficiency of that single server of yours, allowing you to delay purchasing a second. On a larger scale, you may cut your server farm down by a factor of 50%, and on a large enough scale, that can equate to serious money. On a lighter side, you may simply provide good quality of service to your customers with no sudden surprises.

NewRelic: Your Secret Weapon

Now that we’ve covered the “what” and “how” bits, let’s take a look at NewRelic. Once upon a time in software-land, you had to roll your own measurement into an app – if you measured at all (which can be as much work as writing your app itself). NewRelic allows you to simply plug in its agent to your Ruby, PHP, .NET or Python application, and begin collecting real data right away.

Thoughtfully, their product is split up into three core regions:

  • End user monitoring (front-end, the browser)
  • Application monitoring (back-end, your code)
  • Server monitoring (back-end, the servers)

Let’s have a look at each, in the order they were historically released.

The very first feature NewRelic launched was application monitoring. It tracks and reports on ‘Requests per Minute’ (aka RPM), average response times of these requests, and keeps this data for you to analyze. This is particularly useful for discovering trends in traffic over time (e.g. does my site get slower as our page views increase?).

Additionally, the “slow transaction traces” will provide you with a list of recent requests from real users that were disproportionately slow. Inspecting these allows you to drill down and determine why a request took such a long time, giving you the information you need to improve it.

End user monitoring will provide you with insight into how your site is rendering in the users’ browsers. It breaks the total time into chunks, based on things like network time (how long assets took to download), DOM rendering (how long your browser spend figuring out your HTML), image loading (as served by your web server or a CDN).

A neat feature of end user monitoring is that it shows you how well or poorly your application is performing for users in different countries. For example, perhaps 50% of your customers are based in the UK, while the other 50% are in the US. You might discover that front-end performance isn’t too great in the UK, due to the physical distance from your servers. Introducing a CDN or a server in the UK will improve their experience.

The best part of using NewRelic and taking action based on its data is that, once you’ve made any number of changes, you can immediately review if the changes have been effective or not!

The last piece of the puzzle, and the most recent monitoring NewRelic has introduced, is their server monitoring tools. I’ve always remarked that you must correlate your server’s resources with your web application response times to get a fuller picture of efficiency. You may have excellent response times, but you also may be needlessly sacrificing significant server resources to provide them.

I have seen apps with excellent YSlow scores, for instance, but absolutely no headroom for more traffic – even on significant amounts of hardware!

I hope by now you’re starting to see how valuable this kind of information is!

Installing NewRelic

You’ll need to at least be on a VPS and have root access for the PHP agent.

One of my only criticisms of NewRelic is that it’s not easy to install for some types of users. If you are a Ruby on Rails programmer, you’ll find it fairly easy, as it’s a simple Rails plugin.

If you’re a PHP developer and aren’t comfortable goofing around on the command line, you’re going to find it difficult to install, as it’s a PHP extension and requires a daemon to be installed running alongside your web server. However, some PHP cloud platforms, like PHPFog offer NewRelic integration out of the box.

This is unfortunate in my mind, as it’s a hurdle for most people. I hope NewRelic are currently looking to partner with more commodity web hosting providers, so that their product is more accessible to a wider audience. There’s literally no tool like it on the market at present, and they should be making it easy for all PHP developers to use.

If you’re using existing hosting, you’ll need to at least be on a VPS and have root access for the PHP agent. Being completely fair, to spin up a VPS from a provider like Linode, and installing Apache, PHP, MySQL and NewRelic is a short process, but it does requires some comfort and know-how in a shell.

The best way to get started using PHP and NewRelic is to use a tool like Oracle VirtualBox, install Linux, set up Apache and PHP and then install the agent. Then you’ll be able to use NewRelic in your local development environment, at the very least.

I personally haven’t had any experience with the Python agent, and I’ve heard third-hand that the .NET component is easy as pie to get up and running.

How Envato Uses NewRelic

Envato has been using NewRelic since 2008. We’ve used it in the following products with good (and sometimes interesting) results:

The Marketplaces

Initially, we discovered roughly three major slow spots in unexpected places in the marketplaces. We discovered what our highest trafficked requests were, and focused on optimizing them specifically. If 80% of our time was spent in one spot, making it twice as fast increased capacity and saved us from allocating more funds to hardware. We’ve spotted unusual traffic (such as spammers and hackers) allowing us to take precautionary measures sooner than later, thus improving the experience for our real customers. We use it daily to monitor the performance of all our new and existing code.

The Tuts+ Blogs

In 2009-2010, Envato’s blog network had serious stability problems due to a number of architectural problems. It was my job to step in and solve the issues. After performing an architectural analysis and a redesign of it, we plugged in the (then beta!) PHP monitor. We discovered many, many undesirable things!

  • 20% of requests were hits to feeds (which should have been cached or sent to FeedBurner)
  • 3 SQL queries were routinely taking more than 5 seconds to return results
  • Long-running WP-Cron tasks were tying up our web worker pool
  • 404 pages were taking more than 1 second to generate!

Over the course of 2010-2011, we progressively sorted out the issues until they were, more or less, all solved. To this day, we still monitor the PHP blogs using NewRelic. And now, thankfully, the blog network is nice and stable.

The Tuts+ Premium Redesign

When we launched the Tuts+ Premium redesign, we used NewRelic to debug performance problems before the actual launch, on the actual servers they were to run on. This allayed any fears of disaster upon launch. We continue to monitor the site’s performance, using NewRelic.

Today, any important application at Envato has a NewRelic agent plugged in. It honestly has saved us heaps of time and money, and allowed us to provide quality of service to our users and customers.

Other Tools Envato Uses to Augment NewRelic

It wouldn’t be fair to not mention the other tools we use to look after our applications. We currently use ScoutApp for finer-grained server monitoring (it supports user contributed ‘plugins’ so we can monitor specific services like HAProxy, Nginx, etc). We also use AirBrake which logs and aggregates our errors in our Ruby on Rails applications.

Lastly, we have rolled some of our own specialized, custom tools that check things like cache hits, backend requests, revenue, sign ups, notifications when a significant deviation from the trends occur. For example, revenue halting or dropping might mean our payment integration is broken; a change in sign ups means we might have been targeted by spammers creating ghost accounts for later use.

Wrapping Up

If you work on any kind of web application that is business critical, or are tasked with fixing a not-quite-working app, NewRelic is going to be invaluable to you.

If you have any questions, ask away in the comments and I’ll do my best to answer them. Particularly, if there’s interest in a screencast on how to set up a VPS or VM with NewRelic, I’m sure we could arrange one for you.

Become a programmer superhero; use NewRelic!

January 18 2012


The Principles of Web API Usage

Not too long ago, I wrote an article about “The Increasing Importance of APIs in Web Development.” As a follow-up, today, I’ll cover the basics of using Web APIs.

Before we begin: this article does not detail the process of API design or development. That’s for a different article!

Basic Principles

There are a handful of basic principles that should be followed when using Web APIs:

  • Build applications that are social and engaging
  • Give users choice and control whenever applicable
  • Don’t surprise, mislead or confuse users
  • Don’t create or distribute spam; always encourage genuine communication
  • Respect the user’s privacy
  • Be a good partner to Web API providers

Most of these guidelines are listed in the API “terms of service” for Twitter and Facebook, but can be applied to all Web APIs.

Evaluate Your Coding Skills

There are thousands of Web APIs available and most can be either integrated into a website, or to create a mashup. Some Web APIs are fairly simple and require minimal coding skills to implement, while others can be extremely complex and require advanced programming skills.

The programming language you use to integrate a Web API into your website certainly depends on which ones you’re most comfortable with. You’ll find that many Web APIs, such as Flickr and offer language specific toolkits.

Read the Terms and Conditions

Every Web API has specific terms regarding its usage; so it’s incredibly important that the “terms and conditions” are read carefully. They will detail many aspects of Web API usage, including:

  • Copyright Infringement
  • Logo Identity, Branding & Trademarks
  • Content Usage & Guidelines
  • General Restrictions
  • Usage Limitations
  • Use of cache files
  • Privacy Policy

There may be additional “terms of use” information located on separate web pages. For example, there are “Display Guidelines” described in detail on separate web pages for Twitter, Foursquare, LinkedIn and Facebook.

Read the Documentation

Most Web APIs have detailed documentation available, which usually contains important information such as:

  • Features list
  • Available data formats
  • How to request an API key
  • How to use authentication (OAuth)
  • Examples of API calls & data requests
  • Tutorials and sample code
  • API reference page

Use the Latest Version / Versioning

Some Web API Providers recommend the use of a versioning parameter in the API call.

Many Web API providers frequently release new versions of their APIs. These new releases may include the following:

  • Added functionality
  • Increased speed
  • Improved stability
  • Improved accuracy
  • Bug fixes

Some Web API Providers recommend the use of a versioning parameter in the API call. Foursquare for example, accepts the param “v=YYYYMMDD” in API calls. This parameter will help indicate that the client is up to date as of the specified date.

Periodically Check the Change Log

It is a smart idea to periodically check the change log (if one exists) when using Web APIs. Many popular APIs have change logs available, such as Facebook, Google Maps, Google Charts and Foursquare.

Plenty of API providers offer additional ways to keep track of their API revisions:

  • Subscribing to the API Developer blog
  • Following the API on Twitter
  • Joining an API User Group
  • Subscribing to an API email newsletter

Usage Limits

Nearly all web APIs are subject to rate limits; some API providers even charge fees if a user exceeds the API rate limit!

Usage of most (if not all) APIs is subject to rate limits and each API provider has its own API rate limiting policy. Some API providers even charge fees if a user exceeds the API rate limit! Google recently introduced a new rate limiting policy for the Maps API which includes usage fees. Google has also provided additional details regarding the Maps API usage limits on their Geo Developers Blog. Here are links to rate limiting information for a few of the more popular APIs:

It’s incredibly important that you not abuse the API. If you’re website is making an API call for every single page load, and for every single visitor, ask yourself, “Why”? Implement proper caching techniques to improve your website’s performance, and potentially save money.

Caching Data

Using a “cache file” will prevent problems with API Rate Limiting.

Using a “cache file” will prevent problems with API Rate Limiting. In the Nettuts+ post “How to Create an Advanced Twitter Widget,”, there are instructions on how to create a PHP “cache file” script. This script retrieves the Twitter API “GET statuses/user_timeline” information and stores it in a “TXT” file located in a cache directory on the server. This script can be easily modified to work with most APIs. All you would have to do is change the txt file name and the API call. Note that the call in the script retrieves the data in JSON format.

It is important that you read the APIs “terms of use” for any reference to using cache files. For example, the Amazon Product Advertising API has restrictions on caching. Facebook recommends that if you use caching you should try to keep the data up to date.

Data Formats

The two most popular data formats for Web APIs are XML and JSON.

The two most popular data formats for Web APIs are XML and JSON; many providers offer both formats. However, JSON has become so popular among web developers to the point that some API providers, such as Foursquare, Twitter and Google+ offer the JSON data format exclusively.

API data formats are covered in detail in a previous post.

Sign-up for the API

Most API providers require users to sign up for a user account and/or an API Key. For example, Google asks its users to request an API key here. This is usually a fairly simple process and should only take a few minutes to do. You may also be asked to use a developer/application ID when using an API.

OAuth Token

Many APIs require the use of OAuth for specific API functionality.

OAuth (Open Authorization) is an open standard for authorization that allows users to share data and/or files stored on one website with another website.

Many APIs require the use of OAuth for specific API functionality, such as logging in and out of an application. The Google+ API requires ALL API calls to use an OAuth 2.0 token or an API key. Google recommends using OAuth 2.0 as the authorization protocol for Google APIs. Other examples of APIs that require the use of OAuth are LinkedIn, Twitter and Foursquare.

API Calls

An API “call” needs to be used in order for your website application to access a Web API. Depending on the type of application you are creating, you may need to use multiple API calls. Most APIs can be used with a variety of programming languages. The call may need to be modified for different programming languages. For example, in the tutorial, “How to Create an Advanced Twitter Widget”, a PHP “cache file” script is created using the following Twitter API call:

If you’re using JavaScript or jQuery instead of PHP, the call will need to be changed to:

When using JavaScript or jQuery, “&callback=?” needs to be included in the API call, but if using PHP, it needs to be removed or the data will not be generated in a valid JSON format.

Test the API Call

There are several API testing tools available to help you test your API calls:

Platform Status

If you are having unexpected problems with an API, some API providers like Foursquare and Twitter offer platform status updates on status blogs.

Facebook offers a nice “Live Status Tool” that includes:

  • Current platform status
  • Issue history
  • Average API response time chart
  • Error count chart

Twitter also has an up to date “API Status Page” that includes:

  • Known hot issues
  • Recently closed issues
  • Live Current Performance and Availability Status
  • Performance and Availability History


Web APIs are becoming increasingly important in web development, and their popularity and usage has increased exponentially in the past few years. Hopefully, this article has detailed the basics of using Web APIs. If there are additional notes that I have not included, please mention them in the comments.

December 27 2011


Ten New Year’s Resolutions Every Web Developer Should Make

In less than a week, we’ll be in 2012. I know it’s a cliché, but where has the year gone? Naturally, we’re now at the time of year when folks set goals for the new year. While you might have some goals for your “real” life, how about a few resolutions for your developer life?

1 - Learn a New Language, Framework, Or Methodology

Learn a New Language

We must continue learning about the latest technologies.

About the only constant when it comes to developing for the web is change. Take NodeJS, for example: two or three years ago, it didn’t exist, and there was very little (if any) JavaScript being done on the server. Now, you can’t get away from it. Every web developer wants to stay on top of their game. To do so, we must continue learning about the latest technologies. If you’re a back-end dev, that could mean learning JavaScript and Node.js. It could mean taking up Ruby and Rails. For the front-end developer, that could mean really grokking CSS3, or understanding the new HTML5 APIs. Of course, that doesn’t mean you have to use it regularly; just keep yourself learning.

Along the same lines, now is as good a time as ever to re-evaluate your workflow, and learn better and different tools to get the job done more quickly.

2 - Get Better At What You Know

Get Better

Set aside some time to also focus on existing languages and software.

Of course, staying sharp means more than learning new things. It also refers to improving in your use of your daily tools. I know I’ve been guilty of sticking with the patterns and methods that I’m comfortable with, and not learning new ones that might be better for a given situation. How knowledgeable are you about JavaScript design patterns? Do you have a solid understanding of object-oriented and functional programming in PHP? Have you used SQL joins? Are there any features your text editor offers that you aren’t using? These aren’t new technologies, but, if you aren’t using them, they’re new to you! Set aside some time to also focus on existing languages and software.

3 - Explore a New Field


This resolution is a different twist on the first one. Learning a new language, framework, or methodology in your own field is great, and might even be useful to your daily practice. But if you’re like me, you’re fascinated with every part of the web. Try exploring new fields. Back-end devs: look into front-end development. Front-ends, explore usability or user experience more than you have before. If you enjoy writing, you might be interested in content strategy, or fostering that design flare. There are dozens of fields on the web; explore!

4 - Engage the Community


Call it engaging, call it networking, call it whatever your want.

The web is a pretty incredible place: I can’t think of any other phenomenon that has ever made such strong friendships between people so far apart. In 2012, why don’t you try to engage this group of amazing people a bit more? Talk to them on Twitter; read their blog posts and comment or write your own articles in response; contribute to their code via Github, or another code-sharing site. Or, go to meet-ups, user groups and conferences. Call it engaging, call it networking, call it whatever your want; but one thing’s for sure: it will (in most cases) benefit both you and the other person. In addition to building great personal relationships, you’ll likely gain new referrals!

5 - Teach Others


The most beneficial comments are the ones that hurt your feelings.

Going hand-in-hand with our previous point, you should resolve to teach others more in 2012. Why? Well, how does it go, “Teaching something is the best way to learn it”? I’ve been writing for Nettuts+ for close to three years, and I can attest that that statement is completely true. Writing down exactly how a concept works forces you to understand it completely; you’ll be surprised how much you’ll learn about your topic when you try to teach it. On top of that, there’s the incredible feeling you get when you know that you’ve helped someone learn a new skill set.

Undoubtedly, you’ll face a few trolls, pointing out legitimate mistakes ( or just making stabby comments). Not to worry (too much); teaching is a learning process, and you’ll improve the more you do it. The most beneficial comments are the ones that hurt your feelings.

6 - Take Better Care Of Yourself

Take Care

We are the martyrs of the web.

We web developers seem to pride ourselves on our dedication to our craft. We’ll work long hours, hunched over a computer in the dark, so absorbed in our work that we forget to shower or eat. We are the martyrs of the web, suffering to make the internet a better place.

Sounds heroic, but it really isn’t.

At the risk of mommying you, I’m going to suggest that you take care of yourself in 2012. Besides sleeping and eating well, make sure your workplace is ergonomic. It stands to reason that, if you spend a third of your life in your office, it might make sense to make it as comfortable as possible!

7 - Manage Your Time (and Other Resources) Better

Manage Your Time

Over 1 trillion videos were watched on Youtube this past year.

Perhaps this isn’t specificly related to web developers, but it is, nonetheless, something that almost every “knowledge worker” can afford to get better at. For a lot of us—especially freelancers—what you’re doing with your time could be the difference between feasting and fasting. Remember all those fun, new web technologies I recommended you learn about? Well, don’t let their lure limit your bacon-bringing hours to few and far between. Of coures, the internet at large can be just as much of a distraction. I’m sure you saw this recently; it gave pause when I did:

Over 1 trillion videos were watched on Youtube this past year. That's 550 videos per person with internet access. Insane. - John Resig on Twitter

Assuming that the average YouTube video is 2 – 3 minutes long, we’re looking at something to the tune of one whole day. Something tells me I’m not much better off for it.

Of course, “all work, no play” and all that, right? I’m not suggesting you be a slave to your clients, or an unbearably dull workaholic. I’m merely stating that we would all be wise to track exactly where our hours are going and make an effort to use them a little better.

8 - Use Better Programming Practices

Use Better Practices

I don’t think you’ll ever have an issue with over-documentation.

No, I’m not repeating resolution two in different words. This time, I’m talking about the practices that surround the actual coding itself. I can’t tell you how many times I’ve eagerly started a new project, and—half an hour later—said, “Hmmm . . . I should create a branch to try this feature. Oh, wait, I forgot to initialize Git when I started . . .” Making sure I remember to use code versioning from the beginning is something I’m going to be working on in 2012; it keeps your project history so much cleaner.

Another meta-coding practice I usually neglect (to my detriment) is commenting. I’ll conjure up a few clever lines of code, and be tickled for the rest of the day. Next week, I’ll return and spend twenty minutes trying to figure out what it does. This plagues you, too? Do yourself a favor and leave useful comments to yourself, and others. Documentation is right along the same lines as commenting. When I was recently learning Dojo, I found its in-code documentation to be invaluable. Of course, the level of documentation will depend on the publicity of your project, but I don’t think you’ll ever have an issue with over-documentation.

9 - Generate Passive Income

Generate Passive Income

I’m guessing that most of the Nettuts+ audience performs client work, either as a freelancer or otherwise. Well why not make some passive income on the side? Envato has ten (count `em!) marketplaces where anyone with the right skills can profit. Build a theme for Themeforest, write a script for CodeCanyon, the possibilities are close to endless. Of course, if your skills don’t trade on the Envato marketplaces—or even if they do—there are bunches of other ways to make passive income. If you’re a writer, for example, check out Tuts+ Premium. They’re always looking for new passionate teachers.

The manager of Tuts+ Premium, Skellie, recently opened the Passive Income Author blog, where you’ll find great information on self-publishing.

Selling items on a marketplace or personal website is a brilliant way to passively make some extra cash while still doing exactly what you enjoy.

10 - Take a Break

Take a Break
Photo by brettanicus

Put on a completely different hat… sometimes

So far, every resolution has been something you can do to improve your craft as a developer. I’ll close by noting that one of the best things you can do to become a better developer is to not be a developer . . . sometimes. Put on a completely different hat… sometimes. Keep another hobby that’s not even tangentially related to development, and, preferably, doesn’t involve computers. Some play an instrument, some read, some write, some cook. Whatever you do, set aside some get-away time. When you do so, you’ll find that solutions to programming problems often show up on during time off.

I solve so many coding issues while thinking on my way home in the car

Certainly, regular breaks are important, but so are those longer, couple-times-a-year vacation / holiday breaks. Throw a few of those in your annual schedule as well!

Your Resolutions?

Well, that’s my list of ten resolutions all web developers should make. Have any of your own that aren’t on my list? Let’s hear them in the comments!

Tags: General

December 21 2011


From Idea to Market: How We Built Gradient

Retracing the steps you’ve taken is a helpful way to understand how well you’ve executed your vision – whatever that might be. What could you have done better? What should have been avoided? Today, I’ll share what we’ve learned (and are still learning) while crafting Gradient. It’s an experience that has changed everything for us.

First Sketch

Building a product, be it a native app, web app, or service, is always a challenging task. However, once we convinced ourselves to follow a few pieces of advice, we managed to ship something we believed in. And this is what I’d like to talk about.

It All Starts with a Simple Idea

For as long as I can remember, I’ve always felt that great products needed unreachably smart ideas to be built. I was exceptionally pleased to find that this is not necessarily true.

More often than not, if you find a simple way to solve a problem that you personally have, you’re probably going to make other people’s life easier as well.

Turning that solution into something you end up selling or giving away for free (that really depends on your vision, which I’ll talk about later) is the most logical following step.

In our specific case, we were building our own website, which is rich with linear gradients, and I found myself complaining loudly about the tedious process of writing lines and lines of CSS code – all for the purpose of making every browser agree on the fact that you’re actually writing something they can understand.

“What if”, I asked Yari (@yariok, the developer), “we had a native app that took care of it?”

Your Vision Will Lead the Way

Once you have your idea, however simple it might be, you get to decide what goals you’re setting for yourself (or your team).

  • Do you want to make money with your application or service?
  • Do you want to be glorified for your incredible prowess in development or design, while not making a single buck in the process – with the side-effect of becoming a respected authority?
  • Do you simply just want to have fun?
  • Do you desire a one-time release with no further hassle? Or, would you prefer to follow an iterative process

Every choice will be influenced by what you want your path to be.

The investments differ dramatically. Maybe you dream of turning this project into the only revenue source you have and finally get rid of client or office work. Whichever the case might be, stick to that. Every choice will be influenced by what you want your path to be and you will have a much easier time when facing a fork if your vision is strong since the beginning.

Our Choice

Here’s more or less what we decided for Gradient:

  • Paid App: So that we can cover our investment at least in part.
  • Iterative Development: This will allow us to add features gradually and grant exposure for a longer time-span.
  • 100% Custom UI: My fault!
  • Exposure: We want to be recognized as competent in what we do (glory!)

As with anything, there were also a few bonus goals. It would be nice if people I learned CSS from used my app. Also, what if this app created new possibilities with people around the world?

Once all this was set, we did everything we could to make the app a reality.

Have a Plan Before Writing a Single Line of Code

It’s quite simple, actually. If you have a good plan laid out, you can have a measure of how much work is going to be required to develop your project. This means that you can start marking dates on your calendar. This also means that you can begin creating expectations for those dates. Ultimately, this helps if you plan to create some hype among users and the media.

These trivial tasks will undoubtedly turn into huge time sinks.

Many times, especially if you’re not used to promoting or communicating your work, when laying down the plan, you will forget about some apparently trivial aspects. Of course, you’re focused on getting your “creature” just perfect for the launch or beta, and you think the rest will be taken care of in no more than a couple of hours. These trivial tasks will undoubtedly turn into huge time sinks.

For instance, you’re not used to marketing lingo… or you haven’t thought of everything that might happen when your product finally reaches your potential first users…or you forgot about a banner…or the mail you will be sending to your beta testers. Countless little things like this will add up quickly!

A Note on Focus

Often, when you’re excited about what you’re creating, new ideas, beta tester suggestions, and nice-to-have features will come to you during your sleep.

These ideas have the potential to deter you from your planned path.

It happens all the time – and certainly did to us. Take time to consider thoroughly if these new ideas are truly worth the diversion. In most cases, stick to the plan.

Prototype Like There’s no Tomorrow

There’s nothing quite as valuable as building something usable quickly. Weaknesses in the UX design of your product are so much easier to spot when you’re actually using what you’ve built. There’s not much theory here, really. I think this is the most straightforward step.

A couple of hours after my initial complaint, we had the first rough incarnation of the app. It had HEX input and the output was messy code, but the idea was definitely in front of us.

First Incarnation

We added from there, building what we decided was the very basic array of features our first version needed to have, and then refining the usage patterns in order to streamline the user experience as much as we possibly could. We wanted it to be the fastest solution for that problem. We were and are aware of free and well established competition and our focus went on refining those features our competition couldn’t have.

Don’t Be Afraid of Talking to Strangers

In fact, they’re your best friends. There’s no room for introversion, if you plan on creating your own application or service. You absolutely must get in touch with other people, such as opinion leaders and those who you admire (or even intimidated by). But beyond these folks, also connect with lots of geeks like you! You definitely want people to talk about your project and the only way to let them know is to speak to them directly.

Once you do so, expect one of the following reactions:

  • questions / problems / complaints
  • ideas / suggestions
  • thumbs-up / hi-fivers / hugs
  • nothing at all (frustrating, but common with some “celebrities”)

Seek publicly available email addresses, reach out on Twitter, use every instrument you think might be relevant to your target audience (Dribbble, Facebook, you name it), listen to what the others are saying, and engage people in relevant conversations. It’s time consuming but it will make a huge difference.

If executed correct, the pieces quickly fall into place.

For us, this engagement pattern led us from less than 300 followers on Twitter at the beginning of September, when we began our closed beta, to 1000 and counting on launch day in November and a growth in actual amplification that went from no more than 5 retweets on the first beta announcement, to more than 70 retweets and many other support messages from the entire community in November – including many of our heroes. Visits to the website and registration increased exponentially.

Additionally, this led to new interesting business opportunities, connections we could only dream of just a couple of months ago, a lot more visibility and also some new good friends. If executed correct, the pieces quickly fall into place.

There’s a Price

It’s tricky, though – especially for people like us who prefer creating things over pricing them. Again, your vision will help you with this, providing you with at least a range of options.

Studying your market of choice, especially in contexts like the App Store, where the data is mostly kept secret, is difficult and takes time, but, again, rational thought comes in handy. Here are the questions we answered when coming to our decision:

  • What’s the price of similar products? (on the App Store in this case)
  • Do we want it to be an impulse or a well-pondered purchase?
  • Based on the development effort, how much money do we expect to make? Can we estimate how many units we could sell?
  • How much would we be willing to pay for it?
  • What benefit will people have from our app? Is it countable? In this specific case, how much would they be willing to pay for the relevant amount of time saved?

As a reasonable indicator of how things are going, we’re right now evaluating user feedback. Unless what you build is free, there will always be someone screaming at you because your product costs money. However, if some of these buyers reply to you, explaining why the price is reasonable in their eyes, you’ve likely hit a sweet spot. (And you have awesome users.)

Hit the Shelves or the Screens

Building your own product is both a challenge and the most rewarding adventure in our industry.

It’s a wonderful experience; building your own product is both a challenge and the most rewarding adventure in our industry. Ironically, the things you learn in the process serve to be the best prize at the end of your path. The connections you build along the way are extremely valuable. You gain respect, because you demonstrate you’re able to ship. You transition from an idea, to execution.

Once your product reaches the public, a new journey begins, and many new interaction possibilities open up. Still, though, the same rules that you’ve followed still apply. Don’t stray from the path.

We’re sticking to our plan. So far, things are going exactly according to plan!

September 19 2011


14 Ways you can be Sure you’ve Married a Geek

Everyone knows that when you get married, your life changes. When Jeffrey and I recently tied the knot, we were advised by the older and wiser that the first year of marriage is the hardest. But so far, it has been fantastic. Don’t get me wrong; just because married life is proving to be bliss does not mean there haven’t been any of those aforementioned changes. Recently, I realized that the “married life changes” that I am adjusting to are all coincidentally related to the fact that Jeffrey is a web developer, a.k.a Geek.

So I’ve put together a list of the major changes that have surprised and humored me the most. Developers: this one is for your spouses, not you.

1 - I Actually Know What a Web Dev is

I always assumed a web developer was some person who worked on computers and sometimes made pretty web pages. Simple. End of story. I don’t think Jeffrey would have consented to marrying me if I didn’t get it all straightened out. I am proud to say that I now have a mild understanding of Ruby, jQuery and PHP. Oh, and there IS a difference between Flash and JavaScript. That’s a big one.

Editor/Jeffrey’s Note: Sweet pea – not “Flash and JavaScript” … “Java and JavaScript.” Close though!

2 - Sunblock and Aspirin are a Must

Much like vampires, web developers, too, can burst into flames when in direct sunlight.

SunscreenMuch like vampires, web developers, too, can burst into flames when in direct sunlight. Instead of dealing with a burned husband who refuses to leave the safety of his dark, cozy computer lair, I keep a bottle of SPF 70 handy. As for the aspirin? Geeks, especially web dev geeks, spend 75% of their lives looking at screens. Ironically, to take a break from one screen, they often simply migrate to another. My husband will spend the afternoon working on the computer only to suggest we see that new Pixar movie at the cinema later that evening. Screen headaches are bound to happen to even the best of them.

3 - The Bed is a Hub for All Electronics

I think we all remember the great wine spill of 2010.

Somehow, our bed has turned into the charging station for all laptops and portables. The old charging area has now been deemed by my husband as too dangerous. (I think we all remember the great wine spill of 2010.) But, this new bed setup has lead me to have two major phobias. One fear is that I’ll be strangled in my sleep by a laptop charger. There is also the anxiety that, while sleeping, I’ll knock Jeff’s computer or the iPad off the bed and onto the hard floor, smashing it into pieces. Any more gadgets added to the king size charging zone and I may develop a complex.

4 - I Don’t Dress Up to Get his Attention

Rocko Modern LifeWhen we first began dating, I wore sexy little outfits and flirty dresses. Now I find that, if I am surfing for compliments or affection, all I have to wear is a geeky shirt.

I got the hint when he would see a nerdy, retro shirt and immediately purchase it for me. I’ve forgotten how uncomfortable stilettos can be. If I think his computer is getting too much face time, I just slip into a Super Mario, Rocko’s Modern Life, or Star Trek shirt to redirect his priorities (All “presents” from him; note the quotations.)

5 - Back-up Plans A, B, and C are a Necessity


You see, dinner and movie times are dependent on pending export, download and upload times. Too many nights, we have changed dinner locations or seen a different movie because some file is not exporting fast enough.

The most overused phrase is, “Just one more minute and then we can go.”

I am no longer fooled by him. It is never only one more minute. Back up plans are a necessary evil.

6 – I Don’t Care if he Hits on Other Girls

Mass Effect 2

Now before you go and get the wrong idea, we are not swingers. There is a catch.

I don’t care if he hits on other girls…just as long as they are digital.

I love cuddling up on the couch with some popcorn and watching Jeffrey play Fallout, Fable or Mass Effect. It is like watching an action movie or a soap opera, but I get to pick what the main character says, who he kills and who he tries to get into bed with. What fun! I was particularly angry when he messed up his relationships with both the British chick and the blue alien chick in Mass Effect.

Editor/Jeffrey’s Note: Yes, Mass Effect folks; I ended up with the bald chick. It’s not like I wanted it to turn out that way!

7 - That Damn White Space


Whenever I find a new piece of furniture or hang some art on the wall, I am constantly reminded about how I need to be mindful of “white space.” Apparently dabbling in web design makes you an expert in how to properly decorate a house. Bah!

Editor/Jeffrey’s Note: Thanks for using the word, “dabble.”

8 - All Gifts are High Tech

IronWhat I really wanted for Christmas was a good, simple flat iron. What I got was a high tech monster! Sure, it was a hair straightener; but this thing was stainless steel, digital, and, with the right calculations, could contact a space station. I am terrified to let him pick me up any feminine products for fear of what he might bring home. Perhaps the original iPad?

9 - My House is an Enchanted Forest


[...] It is the sound of various media alerts.

Let me clarify. My house sounds like an enchanted forest. From the moment I wake up, all I hear is the sound of trills, chirps and whistles. But unlike a Disney princess, I am not greeted by animated birds, woodland creatures or fairies. It is the sound of various media alerts from Twitter, Facebook, Email, and Yammer that wake me up and fill my home with magic. Even better, the alerts are duplicated across his laptop and phone. Yay!

10 - DVDs are Restricted

DVDsI’ve had to listen to Jeffrey’s predictions about the demise of video rental stores for years, and his criticisms of Blockbuster’s business decisions. Now he has eradicated all DVDs from our home and is forcing me to appreciate exactly how we are able to watch our TV shows and movies. For example, I am required to ooh and aww when the movie we are watching is streaming across our 50mbps local network, into our Mac Mini media center…all without an ounce of buffering.

Editor/Jeffrey’s Note: I wasn’t making “predictions” about Blockbuster years ago. I was reciting events that hadn’t yet taken place. Prophecy…or pre-facts.

11 - 8-Bit Music

Super Metroid

Somehow, video game music is on my iPod. Do you know how weird (at times, embarrassing) it is to be listening to Katy Perry one moment and then the music from Super Metroid begins to play? I’ve almost driven off the road before when the Star Wars Imperial March started blasting out of my speakers!

Editor/Jeffrey’s Note: Super Metroid is the greatest game ever made. You should have thanked me for being nice enough to put that game’s soundtrack on your iPod.

12 - “You Gotta Have Rules”

“Please get off your phone,” is a common phrase.

“Please get off your phone,” is a common phrase, and we don’t even have kids yet. I have to enforce the “no technology” rule on date night and at the dinner table. I know it is work related, but it is necessary for you web devs to take a break from phones and computers on nights out and weekends. I am not above confiscating his phone and hiding it in my massive purse where he could never find it.

13 - Knock Knock Knock, Penny!

I know now why I find The Big Bang Theory such a fun show to watch. It closely parallels my own life. Like Penny, I’ve had to navigate my way through the geek world. The other day, I patiently listened as my husband described a whole episode of STNG (Star Trek: The Next Generation, for the non-geeks among you), and how the crew encountered a temporal anomaly (they sure do encounter a lot of those on that show). When he goes on these tangents, I often think, “What would Penny do?”

Editor/Jeffrey’s Note: Okay – firstly, it was a 30 second story of the episode; hardly a tangent. Secondly, it’s a kick butt episode that you still haven’t watched yet. (It’s the one where the crew keeps repeating the same period of time, ultimately blowing up the ship each iteration.)

14 - Resistance is Futile.

Borg Queen

I have been assimilated. I am now a geek, too.

September 16 2011


Windows 8 Preview: A Developer Reflects

Its finally here. In June, we were given a taste of what Microsoft had in store for users and developers in Windows 8. And finally, after three long months, we have the developer release bits in our hands. Being the geek and developer I am, I wanted to get into the new OS, play with it, develop for it, and get a feel for what is to come.

Disclaimer: These are my own opinions of the OS as it is today. Keep in mind the Windows 8 Developer Preview is pre-beta software. It is buggy. It is not feature complete.


I imagine installation would take anywhere from fifteen to twenty minutes from optical media.

I installed Windows 8 on two machines, both with similar system specs. First is my laptop, a Dell Vostro 1500 with a Core2 Duo CPU, 4GB DDR2 RAM, 500GB HDD, and nVidia 8400 mobile graphics. The second machine is a little Dell Optiplex. It has the same specs, except a 2TB HDD and an ATi 2400 HD. The build I downloaded contained the development tools; it was too big to fit on a 4GB DVD, so I put the files on a USB thumb drive. Setup was a breeze, and very much akin to the Windows 7 installation process. The install process was about ten minutes; naturally, being installed from a USB drive had something to do with the speedy installation. I imagine installation would take anywhere from fifteen to twenty minutes from optical media.

The UI

After the installation completes, and if you’re dual-booting, you’ll find this new, Metrofied boot manager. Once you boot into Windows 8 for the first time, you’ll be prompted to enter either a Windows Live account or a regular Windows account name.

The new Windows 8 Boot Manager

You’ll then be taken to the new Metro Start screen.

Metro is Touchtastic

The Start screen is your new Start menu, so you will launch your apps from this new screen (the old Start menu is hidden away but can be resurfaced with registry tweaks).

Windows 8 is partitioned into two separate UIs: Metro and Desktop.

Metro apps cannot run in the classic Desktop UI, and Desktop apps cannot run in the Metro UI. You can, however, start Desktop apps from the new Start screen; Windows 8 transitions into the Desktop UI when you do so.

The Windows 8 Start Screen

I doubt we’ll see Office, Photoshop, Visual Studio, Quickbooks, or any other huge application on Metro anytime soon.

The obvious question is, “Why two UIs?” Metro is the touch UI. Apps written for the Metro UI are primarily going to be used in a touch environment for content consumption. The Desktop UI is there for backward compatibility, as well as for users who need the full power of Windows. I doubt we’ll see Office, Photoshop, Visual Studio, Quickbooks, or any other huge application on Metro anytime soon. Metro is more for consumption whereas Desktop is more for creation.

This is a developer preview; there is not a lot of fluff in this release. The purpose of this release is to get developers testing and learning the new platform. There are no Metro apps for mail and media in the preview, and the majority of apps installed on the OS are primarily for demonstration. Look to future betas and release candidates for more feature-complete previews of the OS.

I’ll come out and say this: I love Metro. I’ve loved it since playing with my mom’s Zune HD and using the Zune desktop app to sync my Zune. I have a Samsung Focus running Windows Phone 7, and I chose that platform primarily because of Metro. I use MetroTwit for my Twitter client, and look around for other Metrofied apps to look at and play with. So needless to say, I was excited to know that Microsoft is betting big on Metro. I’ve said, and still say, that WP7′s Metro UI is the best touch-based mobile UI currently available. While I do not have a touch device that I can install Windows 8 on, I have almost a year’s experience using the UI Windows 8′s Metro UI is based on (plus watching demo videos). The UI is responsive, and the gestures are intuitive. It is a fantastic touch experience, and touch users will feel right at home in the new Metro portion of the UI.

Metro is Craptastic for Mouse

Unfortunately, the Metro experience as currently implemented by Microsoft is horrible with a mouse.

Unfortunately, the Metro experience as currently implemented by Microsoft is horrible with a mouse. It’s not just the Start screen, but just about all aspects of the Metro experience. What do I mean by horrible? First, the UI is stretched horizontally, and Microsoft thought the best way to navigate these huge horizontal UIs was with scrollbars… really. It’s 2011, and Microsoft implements a touch-based UI for a mouse using scrollbars. You would think Microsoft would implement clicking and dragging to simulate touch (which I’ve witnessed several people try first), or make the UI move with the mouse’s movement (view the live demo of this Code Canyon item in a small window). But no… scrollbars. You can navigate the Start screen using the mouse’s scroll wheel (a plus), but none of the other Metro apps seemed to respond to the mouse wheel.

Second, the Charms (a unified set of functions for settings, sharing, search, etc that are provided by Windows for Metro apps) are activated by moving your mouse to the bottom left corner of the screen. Here’s how they look:

Windows 8 Charms

That in itself isn’t bad, but choosing one of the charms opens its panel on the right-hand part of the screen (as shown in the screenshot below). So you have to move your mouse to the other side of the screen to do whatever it is you wanted to do. I have not installed the Developer Preview on my main machine yet; so, I do not know how that behaves in a dual-monitor environment. But I assume users have to move their mouse across both monitors to do whatever it is they wanted to do with the chosen charm.

Settings pane in Metro apps

Third, zoom seems to be non-existent for mouse users. Touch-based zooming was demonstrated in Tuesday’s keynote, as well as the other sessions, but replicating zoom with a mouse ends in failure. I couldn’t zoom on the Start screen, and the only app I successfully zoomed in is the //Build/ app (with ctrl+mouse wheel).

That’s not to say Metro can’t be great with a mouse. There are many Metrofied applications available today for XP, Vista, and 7 (I mentioned a few above). When done right, Metro is awesome with a mouse. But unfortunately, the mouse experience currently in Windows 8’s Metro is not intuitive. It’s not natural. It’s horrible. I know it’s a Developer Preview, but I expected a lot more for mouse/keyboard users. I hope the mouse experience changes in the beta, especially since all Windows 8 users will have to use Metro.

Desktop Stays the Same (for the most part)

Not much has changed in the Desktop UI, although it did receive a small refresh. Gone are the rounded windows and buttons of XP, Vista, and 7; Windows 8′s windows and buttons return to the squared corners of Win9x and 2000.

Good 'ol Windows UI

There is also the ribbon in the Windows Explorer UI. I personally like the ribbon when used in the proper place. Windows Explorer always had a lot of options buried in menus and dialog boxes. The ribbon brings those options to the forefront, and I’m happy about that.

Final Thoughts on the UI

I am disappointed in the lack of customization of Metro.

I am disappointed in the lack of customization of Metro. While the lock screen can be customized, it seems the background of the Start screen cannot be changed. I hope that is just a feature missing from the Developer Preview.

I’ve always thought Apple had the right idea in separating the mobile OS from the desktop OS, but now I think Microsoft has the right idea in combining the two into one. I do, however, think they took the incorrect approach. While the Start screen is nice, fluid, and beautiful, it’s awkward switching between the two UIs when on a device other than a tablet. I would like to see an option to keep the classic Start menu while still being able to invoke the Metro Start screen at any time. As currently implemented, it is too much work to launch an app from the Desktop UI, but enhancing the mouse experience in the Metro UI would go a long way to making it easier and less cumbersome.


Getting a peek at what’s to come is always something geeks like myself enjoy, but it was the Windows 8 developer story that kept me glued to the keynote. I am heavily invested in the C# language and .NET—be it either a desktop or web app, I write them in C# using the .NET stack. When Windows 8 was first previewed in June, .NET developers, myself included, were in a knee-jerk panic mode regarding our place in Windows 8 development. Metro apps written in HTML and JavaScript were showcased, yet nothing was mentioned regarding .NET. Microsoft’s lack of communication with their development community did nothing to sooth our fears.

Only a fool would think .NET would be suddenly killed in Windows 8, but the implication was that C#, Microsoft’s baby and highly touted language for the last ten years, was being pushed aside in favor of JavaScript/HTML and C++. Thankfully, that is not the case.

Quite naturally, the existing development model still exists for Desktop UI applications. Nothing has really changed there—except perhaps the decline of Silverlight. Metro is a different story; it’s where the new sexiness is. It doesn’t matter if you’re a C++ developer, a .NET developer, or a Web developer, Microsoft is providing the tools and (unified) APIs to write Metro apps. Microsoft is replacing the Win32 API for a new API called WinRT, and it is just as accessible in JavaScript as it is in C++.

But one of the most important concepts in Metro app development, and the one I’m most excited about, is the contract. Contracts are agreements between Windows and Metro apps to support a unified experience for the user. For example, apps that support the search contract open themselves up Windows 8’s search, enabling users to search those apps even when they are not running (or when the user is in another app). Other contracts are:

  • Sharing: shares content across apps or services
  • Play To: plays media on connected DLNA devices
  • Settings: provide context-specific access to settings that affect an app
  • App to App Picking: allows users to pick files from one app directly from within another app

The goal is to provide an experience that looks like one app, but in reality, its many different apps, glued together by Windows 8, working together to give the user the content they want. While it definitely means more work for me as a developer, it pays off with the rich experience users get when my app is installed.

Final Thoughts

Over all, I’m happy with how Windows 8 is shaping up. It’s a step in the right direction for a world filled with many types of devices and form factors. Microsoft definitely needs to work on the mouse experience in Metro—it’s just horrible. If they fix that, then Windows 8 will be fantastic on every device it runs on. I’m also pleased with the development story. We can essentially pick our preferred poison to write our Metro apps, and our apps can coexist in ways previously never seen before on Windows. For larger and more complex applications, we can still use the development model which, for me, is .NET with either WindowsForms or Windows Presentation Foundation (WPF).

Microsoft repeatedly said that Windows 8 is a reimagining of Windows, and it is true. They’re betting big, and it’ll pay off if they do it right.

September 13 2011


Is Conference Pricing Out of Control?

You’ve surely experienced the letdown of registering for a conference, only to find that it costs $1,000 (or more) to attend (not including travel expenses). Isn’t that a bit extreme for two days worth of training? Then again, is that the only way the conference organizers can cover the high costs of planning such an event? Let’s see…

We’ll put the economics of organizing such an event to the side for the time being, and instead focus on the practicality.

Who can afford to spend $1,000 (for the ticket alone) on attending a two day event?

Here’s the thing; unless you’re quite wealthy, or happen to work at a company that will cover the bill (most likely the case), my guess is that most of us simply can’t afford it. Don’t feel badly about this; it doesn’t mean you’re not dedicated to your craft if you’re not willing to fork over $1,000 to attend a conference. In fact, I’d argue that you’re a better person for taking such a stance, while ignoring the incessant conference-specific hash tags on Twitter.

A $1,000 price tag for two days of lectures is exorbitant to the point of being vulgar.

Are you Receiving $1k Worth of Education?

This is the first question you should ask yourself before deciding to attend any conference that charges a high price tag: “Will I receive $1,000 worth of education?”

A common mistake when attending a conference for the first time is assuming that you’re going to drive (or fly) home having greatly increased your understanding of a particular subject.

If I can be so bold, though, you’ll likely find that this is not the case. Oh sure, you’ll come away with some neat new tips and tricks, but if your sole purpose for attending a conference is to “train,” then your money is much better spent elsewhere.

For half the price – $500 – I can give you a stack of books and resources that will teach you the bulk of what you need to know to succeed as a web developer.

In the defense of conferences, training is not their true focus. They’re much more geared for networking (and dare I say, vacations). If you do prefer training, then attend a workshop, which will be a fifth the cost, and five times as educational.

A free open source community cannot survive without a touch of the commercial side to even things out.

The talented Remy Sharp hosts workshops for roughly £200 – a far more appealing price tag. Remember, teachers shouldn’t be expected to work for free. I completely get that. The notion that everything in our industry should be free irks me a bit. A free open source community cannot survive without a touch of the commercial side to even things out.

Let’s use the Tuts+ network as an example. We post roughly 40 free in depth tutorials every single week. The only way we’re able to offer that level of free training, though, is to supplement the sites with an optional Premium program that offers courses, video tutorials, etc. for $9 a month. These extra funds not only allow us to commission higher level, and more in depth tutorials, but they also provide us with the means to continue our primary objective: provide free education to the community. This simply would not be possible without our Premium program.

Notice that our core goal is an admirable one. It’s not to make each editor and the company as rich as possible (though we wouldn’t be against it!). Instead, we want to change the landscape of education entirely. Our asking price is reasonable. I cannot say the same for some conferences, though.

Are These Conference Organizers Bad?

All this begs the questions: are conference organizers, who charge these rates for a 2-3 day event, bad people, or, at the very least, money hungry?

Well, who are any of us to judge? That said, however, let’s consider a few points…for both sides of the argument.

300 Attendees

Assuming the $1k price tag that I’ve noticed around the web, let’s imagine that 300 people attend. That seems to be a reasonable figure, though I could be wrong. At this rate, the conference organizers will gross $300,000 for a weekend conference. This undoubtedly is a huge sum; however, we of course must consider the costs involved in planning this sort of event.

  • Rent the facility (certainly not cheap).
  • Pay airfare, food, and shelter for each speaker. This can add up, if they have around twenty speakers.
  • Pay each speaker. For many conferences – generally those which focus on open source platforms – the speakers offer their services free of charge (other than expenses). However, for a conference that charges $1,000 a ticket, the speakers most certainly receive a paycheck.
  • Design and print the t-shirts, banners, and programs.
  • Provide lunch each day for all attendees.
  • Purchase advertisement spots in magazines and on the web.
  • While many conferences are volunteer based, there will likely be staff involved.
  • A reasonable paycheck for the organizers. They shouldn’t be expected to work for free.

All of the above considered, though, do these expenses add up to $300,000? Maybe so, maybe not; but my instincts say: “If you can’t organize a two or three day event for $300,000, then you’re either making huge mistakes…or huge profits. Even if we cut the number of admissions down to 100, that’s still $100,000 gross.

What’s Wrong with Profit?

Absolutely nothing. As fellow author Jeremy McPeak put it: “…The web is becoming the platform of choice; so demand dictates the price.” Jeremy is certainly correct; demand 100% determines the cost. Why charge $1 when you can get $2?

The various $1k-charging conferences that I see promoted on Twitter so frequently more often than not sell out.

Maybe that’s what, as buyers, we should decide for ourselves; just because you can… doesn’t mean you should. Is the goal to push the web forward, or to make large sums of money? When you charge such an exorbitant price tag, you ensure that the huge majority of those, who would pay the ticket price out of their own pockets, won’t come.

Perk vs. Investment

Companies offer conference trips as perks. In their eyes, they are investing in their staff. What’s $1,000 to a successful company? From the eyes of the staff member, he gets a fun vacation and the chance to network and learn a bit. Win win.

I can’t help but feel, though, that this is somewhat unfair to those who must pay the entry price themselves. I’d wager that these are the folks who are most hungry for knowledge, yet the price tag virtually ensures that the doors are closed to them.

The Question

If it costs a buck, then it’s worth a buck, right?

Perhaps it comes down to this single question: are some conferences simply an excuse to get your company to send you off on vacation, so that you can network with your internet buddies, and, again, learn a bit? The companies will blindly pay the cost, so why not charge four figures?

We associate value with cost. If it costs a buck, then it’s worth a buck. The same must be true for conferences, right? But here’s the thing: some of these conferences are sold under the umbrella of “pushing the web forward.” To me, though, it seems that they’re much less concerned with education, and more about making money. When all is said and done, that’s not a bad thing. Who could blame them?

I suppose you must decide for yourself if this is the sort of conference you want to participate in. Why are WordCamps generally only $50? The upcoming jQuery conference in Boston is $299 – a bit more, but still appropriately priced and reasonable. Airfare must be paid, staff must be compensated, food must be purchased.

The going rate is $1,000 because people will pay it.

My guess is that the true difference in cost stems from the fact that conferences like jQuery’s are much less concerned with making money, and more on raising jQuery’s awareness and teaching one another. Further, other than expenses, speakers don’t receive payment. For some other conferences though, this is not the case, and likely accounts for the increased cost. Your favorite internet celebrities don’t come cheap – nor should they. These guys have spent their entire adult lives acquiring the necessary skills to teach you. That demands some level of compensation. It all comes down to, however, whether or not this compensation comes at the cost of a huge price tag that you likely can’t afford. Then again, maybe such an event wouldn’t be possible with a cheaper ticket price. I find this hard to believe, but, it’s possible. As noted above, though, the going rate is $1,000 because people will pay it.

Each of us is entitled to his own personal opinions. To my eyes, $300 is reasonable; $1000-$2000 is vulgar. But perhaps these conferences aren’t priced for you and me; they’re priced for the companies you work for. They’ll be footing the bill, right?

September 06 2011


The Burden of File Synchronization

First world problem alert! If you have the luxury of using two computers for your day-to-day coding – for example, a desktop for the office, and a laptop for home – you’ve likely found yourself complaining (or cursing) when your files aren’t syncing correctly.

Why can’t my laptop be an exact mirror of my desktop?

I know I have! I’ve even thought to myself, “Why can’t my laptop be an exact mirror of my desktop?” Well, there are ways to accomplish this, but, they’re time consuming and aren’t as consistent as you might hope. Nonetheless, let’s review a few ways that we can sync two computers.

Sync your Home Directory with Dropbox

It’s likely that all of us use Dropbox to some extent. The default installation will create a ~/Dropbox directory; however, we can also use “Selective Sync” to define which folders should be watched.

Selective Sync

Now, we could sync our entire home directory, as exemplified in the image above. There are still potential concerns with this method though:

1 – Space ain’t free, yo!

The basic free Dropbox plan offers 2GB of space – in other words, not very much. If you intend to sync your entire Home directory, you’ll need to commit to either the 50GB or 100GB plans, which will run you $120 or $240 a year, respectively. Yikes! Even worse, if you’re like me, you’ll find that even 100GB isn’t enough.

Dropbox Plans

2 – Endless Syncage

If you do choose to sync your entire home/ directory, you may find that, seemingly at all times, Dropbox is syncing. Download an iTunes movie on your laptop, and, when you turn your desktop computer on, it’ll take an hour to download that one large file. This can be incredibly irritating. Also, while, as I understand things, the process of downloading a large file shouldn’t interfere with small documents being synced at the same time, I’ve found that it often does. If I save a Word document on my laptop, sometimes it can be a good wait before it shows up on my other computer.

All of these small irritations quickly add up.

3 – CPU Intensive?

I must admit that this one is a bit odd. I’ve noticed that, at some points, Dropbox can be a bit hard on my CPU. After checking my computer’s Activity Monitor, I’ve found Dropbox taking up as much as 30% of my CPU, dramatically reducing my computer’s performance.

All that said, this seems to be a sporadic effect. As I write this article, while syncing, Dropbox is using less than 1% of my CPU. It’s certainly odd. Maybe you guys have some notes in the comments?

Use Synchronization with GoodSync


If you require a cheaper way to sync your files, you might look into GoodSync, which allows you to create any number of jobs (free edition is limited to three). For example, I could create a job which, each day, copies all of the files from a particular directory on my desktop over to my laptop. Alternatively, I could also instruct GoodSync to actively watch my Desktop directory and copy files over in real-time. If you choose this route, note that it can affect your computer’s performance a bit.

The obvious advantage to using GoodSync is that you’re not paying a monthly fee.

The service even makes the process of locating the various computers in your local network as easy as possible. If you sign into GoodSync on each computer, your file system will automatically be available across all computers.

Up until now, this is the method that I had been using. It certainly works, but, again, there are sporadic hiccups. Most notably, I still have to wait for the necessary files to copy over, and, again, from time to time, the app seems to falter and miss certain triggers.

It’s Difficult to Sync Settings

While some apps allow us to sync configuration settings and databases, via Dropbox, others do not. For instance, let’s consider an app that allows you to save commonly used snippets (Snippets in my case). You’ve likely found frustration in the fact that a snippet you save to your laptop’s version of Snippets will not be available on your desktop.

Snippets specifically allows you to sync your XML database via MobileMe, but most of us don’t use it – so, back to the drawing board.

The Common Solution

On the Mac specifically, the frequently advertised solution is to create a symlink.

So let’s do one together; our job is to sync the database for Snippets across our two computers with Dropbox. This database XML file will be stored within ~/Library/Application\ Support/Snippets.

First, cd/ to the Application Support directory, mentioned above.

 cd ~/Library/Application\ Support

Next, we’ll copy the Snippets directory over to Dropbox. If you’re not syncing your entire home directory, keep things clean and create an Application Support directory in the root of your Dropbox folder.

 mv Snippets ~/Dropbox/Application\ Support

Now, we’ll create a symlink. Make sure you’re still within the ~/Library/Application\ Support/Snippets directory, and type:

 ln -s ~/Dropbox/Application\ Support/Snippets Snippets

To better understand this line, think of it as: ln -s [path/to/directory/to/sync] [path/to/new/folder].. This code creates a symbolic link, which allows us to store Snippets’ database on Dropbox, but still function as expected. The app will want to find these files in the Application Support/ directory, and this method allows for that.

Repeat these steps for each computer, and then test it! Create a new snippet on your laptop, and watch it show up on your desktop, after Dropbox syncs the file.

So sure, this method works; but it’s not perfect.

  1. It’s time consuming. Will you do this for each app, or symlink your entire Application Support directory?
  2. Not all apps can be synchronized this way. For example, Quicken will kick up a fuss if you use this technique. I’ve yet to find a way to get Quicken to play nicely across multiple computers. There are countless forum threads on this particular topic. It’s easier to use, if it’s available where you live.

Why Complicate Things?

One day, not more than a week ago, as I found myself, again, wishing that my laptop was a mirror for my desktop, I realized that I was complicating things. Why do I need two separate harddrives? How much time have I wasted researching synchronization tools?

From today on, I am now a “one computer” man. I’ve sold my iMac and laptop, and have replaced them with a 15 inch Macbook Pro and a Thunderbolt display. When I’m in my office, I connect the laptop to my monitor, work in the glorious 27 inch fashion that I’ve grown accustomed to. And when, I’m on the couch, or – gasp… in bed working – the laptop is disconnected, and it’s business as usual.

No more synchronization, no more complaining, no more hassles. It took me years to choose the most obvious solution.

My Question for You Is…

If you are in a similar position, how do you personally deal with the burden of file synchronizing?

August 08 2011


On the Cutting Edge with Adobe’s Edge

One of the biggest sources of buzz this past week has been Adobe’s announcement of the Edge preview. People have been talking about it a lot but few seem to really grasp some of the ideas or technology behind this.

Today, I’d like to talk to you a little about the Edge preview and why you should be cautiously optimistic at this juncture.

A Little History

Creating content using a standards based approach is hard. This is where Edge comes in.

Flash’s birth and history can make for a very, very confusing read: it’s incredibly loved or hated depending on who you speak to. The undeniable fact is that Flash is one of the main reasons behind the proliferation of video and interactive media on the web. On the flip side, it’s criticized for its closed nature and performance issues.

While the platform itself isn’t going anywhere in the near future, you can’t help but notice that Flash’s hold on the web has been loosening lately.

Chalk it up the rise of HTML5 and an increasing number of developers embracing open standards or a certain fruit flavored company leading a crusade against Flash, the bottomline is that the web has been looking for an open, standards based alternative to Flash for sometime now. One of the big reasons for the arrival and rise in popularity of HTML5 along with libraries like jQuery can be attributed to antagonism and apathy towards the Flash platform.

Creating content with the new technologies though has been far from smooth. This is where Edge comes in.

What is Edge?

Edge is Adobe’s attempt at being relevant in the post-Flash world.

Edge is touted as an animation tool ideal for designers who want to create web content replete with animations but based on the open standards that prop up the web. According to their site:

Adobe Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Basically, Edge is your ticket to adding animated content without having to resort to external plugins like Flash or Silverlight.

Do We Really Need Another Tool?

In this case, oh, yes we do!

I certainly feel so. Before you look for your pitchforks, let me explain!

Flash developers have access to very mature and very sophisticated design tools. Want to create a simple animation? A few clicks here, some input there and you’re done! They really do enjoy the use of a complete environment when it comes to authoring their content.

What happens when you want to go the standards based way?

It’s not that easy, I can tell you that much. You have to poke around with code, learn a little JavaScript, get bored, learn to use a library like jQuery, get excited again and then find out that you still have to hand code every single animation.

While it’s ok for us dev types, it’s much more of a chore for the artsy designers. Standards based development really doesn’t have to be hard! I realize that enterprising developers have come up solutions for these but none have appeared from the bigwigs of big content.

Edge seeks to streamline this process by reusing common concepts of media creation such as timelines and stages to make the learning curve more gentler, easier and thus, more accessible.

Initial Impressions

The preview is a svelte 65MB download and installs quite quickly. Getting access to the download requires an Adobe account though. It’s free, sure, but adds an unnecessary step to the process. 1999 called, they want their frivolous signups back.

And oh, if you’re still lost as to where to download your copy, you can get it here.

The Interface

Adobe Edge

First impressions of the preview are quite positive. It looks clean, composed and uncluttered. If you’ve used GoLive in the past, or even Flash, the interface should look mostly familiar.

Adobe Edge

The stage or canvas acts as the first DIV and when you add elements to your canvas, they’re added hierarchically with the type of element being displayed on the side.

Adobe Edge

The timeline pane is one of the key portions of any animation suite and Edge doesn’t disappoint. The entire lower portion of the interface is dominated by the timeline pane.

You can view all the properties of the elements you’ve added so far to the canvas in the timeline. Creating an animation is as simple as adding a keyframe, supplying it with the info for the frame and Edge will fill in the rest — tweening works as expected, excellently.

Functionality of the Current Preview Version

This preview is obviously in alpha mode — the first preview’s main focus is on adding simple shapes and animations. That’s pretty much all there’s present in the interface as well.

Users can add text, images and simple shapes with relative ease — just point, click and drag. You can also customize assorted characteristics of the content including color, skewing, opacity, rotation and much more. Take a quick look at the image below to get an idea of what I’m talking about. If you’ve at all been introduced to animation software in the past, you should feel right at home.

Adobe Edge

You can also import premade assets, including images, into your current canvas.

Under the Hood

Since this isn’t really a tutorial on how to use Edge, I’m going to skip ahead and download a premade demo which you can get from here.

Let’s take a look at the directory structure of a sample Edge project:

Adobe Edge

No surprises here. Your animations are now created from your familiar trifecta of web technologies — HTML, CSS and JavaScript.

As opposed to popular opinion, Edge uses a mix of jQuery and CSS3 to animate the contents of its canvas. Yes, you heard that right – jQuery does a lot of the grunt work behind Edge.

Digging into the code with Firebug, you’ll notice that there are a lot of DIV elements being moved around with jQuery. For example, here is the actual code being injected in the example I linked above. Not entirely pretty.

Adobe Edge

Basically, any animation that CSS3 can do is left to it since all CSS3 effects are hardware accelerated, and thus will perform well. The rest is left for jQuery to handle.

Adobe Edge

Digging further into the code, you’ll see that all your element, their properties, tweening information and the rest are stored as a JSON file. I’m assuming the engine basically parses this information and constructs the DOM and attaches the handlers.

As a quick experiment, let’s look at what the browser sees:

Adobe Edge

Uh, oh. There’s literally nothing that makes semantic sense in there. Disable JavaScript and you’re left with a big blob of nothingness. Fans of graceful degradation, get your pitchforks.

Where the Heck is HTML5?

It’s being marketed as a HTML5 tool and well… this is not HTML5 powered. Yet.

I went in expecting to be dazzled by the splendor of canvas or SVG. After a look at the DOM, it’s quite apparent there isn’t even a tiny bit of either in there. Just to make sure, I did a quick search of the JavaScript files searching for the canvas related keyword, getContext . Needless to say, nothing turned up. The biggest blob of HTML5 here is the doctype. Sure, you can import SVG content but you can’t touch the markup so it’s a moo point.

It’s a little puzzling why Edge doesn’t use any of the modern technologies instead. If anything, it’s being marketed as a HTML5 tool and well… this is not HTML5 powered. Disingenuous marketing or signs of features to come? I’m leaning towards the latter whilst really, really hoping the former isn’t true.

Is this Approach the Best Option Moving Forward?


From a development perspective, animating DIVs is the equivalent of using tables for layout — it works but at the cost of elegance and semantics. Canvas and SVG are precision engineered to do exactly what Edge does here and make more sense in the long run.

Even if canvas performance is piddling on the current mobile devices, there’s no way for the performance to go but up and it really shouldn’t hamper the adoption of new technology.

While one would ideally like to see cutting edge apps actually make use of similar cutting edge technologies, keep in mind that this is still a preview, an early alpha version.

In the words of one of the engineers behind Edge regarding DIV based animation:

We started with DIVs because we wanted to get something out there quickly that folks could play with. I say we ‘started’ there because Edge will be evolving rapidly — the product is by no means feature complete.

That’s a little encouraging! While I’m disappointed with their initial, see what sticks approach, it’s good to know that this is just how they’re kicking off things, not how they plan to do things ultimately.

Remember, this is Still a Preview

The thoughts above may come off as a little negative but that’s not my intention. I, and the rest of the community, have high hopes for this tool and thus very high expectations.

And Adobe on their part isn’t lazing around. They’re already working on the feedback provided by the community so far and have a road map in place for future versions.

Adobe Edge

With Adobe embracing open standards and focusing on producing creative tools instead of boxed-in application platforms, I can’t help but feel they’re on the path towards becoming as relevant to the progress of the web as they were in the past during the height of Flash.

Let us know how you feel about the Edge preview in the comments and thank you so much for reading!

July 07 2011


Should You Start Using CSSLint?

Advertise here

Getting our code reviewed by a pro is a great way of improving code quality but what happens if you don’t have access to a rockstar programmer? You do the next best thing and grab a ‘lint’ for that language.

Today, I’d like to talk a little about CSSLint, a recently released code analysis tool for, you guessed it, CSS. Join me after the jump!

What Exactly is a Lint?

Let’s hit Wikipedia for a definition:

Lint is a tool that flags suspicious usage in software written in any computer language.

Basically, a lint looks at our code and checks for bad programming practices. Undefined variables, inefficient constructs, things like that.

You’re probably wondering why you’d ever need such a tool. Let’s face it: not all of us possess supreme knowledge of what we’re working with or have the luxury of getting our code peer reviewed. In these cases, sticking our code in a lint is the next best option. And unlike clean up tools, lint spits out tidbits about your code and how to improve it.

Introducing CSSLint


Created by Nicholas Zakas and Nicole Sullivan, CSSLint is an open source tool that checks your syntax against a set of predefined rules to root out possible inefficiencies and make sure that your presentation works as expected with little surprises.

After heading over to the CSSLint site, you can merely paste in your source CSS and choose which rules you’d like enforced. Hit the lint button and CSSLint will start eroding your smugness.


If you’re a Node junkie like me, there’s a version for that as well. Just type in sudo npm install -g csslint and you’re good to go!

The CSS Lint Rules

Let’s take a quick look at the rules that CSSLint enforces.

  • Parsing errors should be fixed
  • Don’t use adjoining classes
  • Remove empty rules
  • Use correct properties for a display
  • Don’t use too many floats
  • Don’t use too many web fonts
  • Don’t use too may font-size declarations
  • Don’t use IDs in selectors
  • Don’t qualify headings
  • Heading styles should only be defined once
  • Zero values don’t need units
  • Vendor prefixed properties should also have the standard
  • CSS gradients require all browser prefixes
  • Avoid selectors that look like regular expressions
  • Beware of broken box models
  • Don’t use @import
  • Don’t use !important
  • Include all compatible vendor prefixes
  • Avoid duplicate properties

If you’re anything like me, a few of the rules must have had you flummoxed.

Do the Rules make Sense?

Quite frankly, yes, no and everything in between.

After lurking at a number of discussion boards and IRC rooms, I found out that many developers seem to be in uproar over the rules and maybe right so. Let me attempt to explain why most of the rules make sense but others do not.

The Controversial Rules

Don’t use IDs in selectors

IDs shouldn’t be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It’s much preferred to use classes in selectors and then apply a class to an element in the page.

This one struck a nerve with a lot of developers since we’re quite accustomed to assigning IDs for the main structural components of a layout like the header and footer.

CSSLint argues that the styling for such elements, by definition, can’t be directly reused. If you want dual sidebars on your page, a class lets you reuse styling while an ID will not.

Keep in mind that just because a class can be reused doesn’t mean it has to be. Unique classes are perfectly acceptable and a swell way to reuse styling if the need arises.

Don’t qualify headings

Heading elements (h1-h6) should be defined as top-level styles and not scoped to particular areas of the page.

Most developers, including me, have gotten used to writing context sensitive headers. As in, we define separate styling for headers depending on, say, which page it is being displayed on. An argument in favor of this approach is that it moves all cruft from the markup to the stylesheet. You can merely define a tag and let the CSS cascade accordingly.

CSSLint argues that such an approach compromises the predictability of your design. If someone else were to pick up your design and tried putting in a heading somewhere, he/she would need to be aware of the context and placement of the element. With headings defined unconditionally, he or she can use a heading anywhere confident of its presentation regardless of its parents.

Heading styles should only be defined once

Heading elements (h1-h6) should have exactly one rule on a site.

An extension of the rule above to improve predictability of presentation. Right or wrong, keep in mind that this basically excludes including some sort of reset code within your stylesheet. Every reset sheet works on your headings as well and thus CSSLint will mark it as an error.

The Questionable Rules

Don’t use adjoining classes

Adjoining classes look like While technically allowed in CSS, these aren’t handled properly by Internet Explorer 6 and earlier.

With this rule enabled, CSSLint flags rules like, with the official reason being that Internet Explorer 6 and below don’t play well with the selector. I respect the developers but I have to disagree here. Just because it doesn’t work with Internet ‘Dev-buster’ Explorer 6 is not a great reason to stop working with a useful feature.

Beware of broken box models

Borders and padding add space outside of an element’s content. Setting width or height along with borders and padding is usually a mistake because you won’t get the visual result you’re looking for. CSS Lint warns when a rule uses width or height in addition to padding and/or border.

The box model maybe broken but almost every front end developer I know is intimately aware of the shortcomings and how to overcome the disparities with implementation. Are we really ready to give up a layer of control because some older browsers have a different implementation?

Don’t use too many web fonts

Using web fonts comes with performance implications as font files can be quite large and some browsers block rendering while downloading them. For this reason, CSS Lint will warn you when there are more than five web fonts in a style sheet.

I don’t foresee a situation where I’d be using more than five fonts in a page but I feel that dipping into this territory is a bit questionable. If anything, this is a design flaw than a development flaw. If a developer is referencing five separate fonts in his stylesheet, chances are, it ain’t by accident.

Don’t use too many floats i.e. abstract the functionality away

CSS Lint simply checks to see if you’ve used float more than 10 times, and if so, displays a warning. Using this many floats usually means you need some sort of abstraction to achieve the layout.

While I concur with the creators’ argument that having more than ten instances of float is a bad idea, I also feel that this will affect the markup once past a given size.

For example, in a situation where you’d want to float two elements, traditionally you’d use:

<div class="container-1"></div>
<div class="container-2"></div>

… and the styling, by traditional methods.

.container-1 { width: 70%; float: left; }
.container-2 { width: 30%; float: left; }

The CSSLint method would be abstracting the float like so:

<div class="container-1 float"></div>
<div class="container-2 float"></div>

… and styling like so:

.container-1 { width: 70%; }
.container-2 { width: 30%; }
.float { float: left;}

While I agree that this is a viable approach, I feel that the markup will get significantly crowded once you try to abstract more away. I’d rather see a class containing most of its styling in one place than clutter the markup with 10+ classes. Again, I feel that this is a subjective topic.

The Obvious Rules

  • Remove empty rules
  • Avoid duplicate properties
  • Zero values don’t need units
  • Vendor prefixed properties should also have the standard
  • Parsing errors should be fixed
  • Include all compatible vendor prefixes
  • … rest of the rules

All of the rules above adhere to the current standard practices. Sure, some of the rules have little real world significance, like zero values not needing units, or will be caught by a decent IDE, like parsing errors, but nevertheless these are good rules to have in a CSS test suite.

A Few Concerns

CSSLint is going to help a lot of developers down the road but…

CSSLint is, no doubt, written by developers with great credentials and is definitely going to help a lot of developers and designers down the road.

What I find a little irksome is that a lot of the controversial rules come from Object Oriented CSS, a CSS framework intended to let developers write maintainable CSS. While I have nothing against the framework, and its paradigm, you’d have to agree that it’s a way of doing things, not the way to do things.

As opposed to JSLint where I feel like all the rules make sense, with CSSLint, it feels like I’m being told that one style of writing CSS is right and the others are wrong. It’d be like someone asking me to give up the Beatles because Rolling Stones is their preferred band.

It’s Only a Tool

Tools are just that — tools.

Of course, we, as a group, tend to be rather clingy when it comes to our code. We don’t enjoy hearing that our code could have *gasp* potential issues or be written in an entirely different way.

The main thing to make a note of here is that CSSLint is, ultimately, a tool. It merely lets you know that some of the areas may have errors.

CSSLint doesn’t have to be the iron fist around which you base your entire ego on. There’s no reason to bend over backwards to avoid a warning if you know precisely what you’re doing.

So, Should you Start Using CSSLint?


In CSS, as in integral calculus, there are many solutions to a given problem. There necessarily isn’t a ‘best’ way to do things — you may favor readability while I may favor efficiency. What’s important is that you realize that each and everyone of us have our unique way of doing things.

If you don’t have the same perspectives towards solving a problem, you may disagree with another approach and may even find it questionable.

Having said that, there’s never a good reason for not learning new things. Looking at problems from the perspective of another developer is a great way to see if you can learn something new.

Wrapping Up

What do you think about CSSLint? Find it useful? Confusing? Has it helped with your real world problems? Let us know in the comments.

Be excellent to each other and thank you so much for reading!

June 12 2011


An Introvert Reflects on his First Presentation

Advertise here

“You’re all set to go up in twenty minutes,” the organizer tells me. I quickly flash to myself in front of hundreds of people – frozen, and consumed by anxiety – having completely forgotten what I’m supposed to speak about next. Will that actually happen? Wait a minute; will I make it happen by worrying about it right now? “Hey,” I silently scream to myself. “Stop freaking out!”

As a bit of a self-diagnosed introvert, this was my experience over the weekend, as I prepared for my first presentation at WordCamp Kansas City. So the question is: if the thought of speaking for an hour in front of hundreds of people terrifies you, what’s the solution? Do you accept your emotional limitations, or do you instead force yourself into uncomfortable situations?

I’m willing to wager that, in general, we web developers suffer somewhat when it comes to – ya know – interacting with the outside world. Now, that doesn’t mean we spend our days curled up in the corner, typing “My Precious” into our laptops over and over. We’re not that bad; but, nonetheless, many of us may have chosen this profession because it allows for some form of escape from the real world. Again, I’m stereotyping here, but there’s certainly a reason why it’s a stereotype to begin with!

As we grow, we learn to accept our limitations. During our younger years, we may attempt to become someone we’re not. Who hasn’t tried on a handful of hats in their years?

But, invariably, we return to our core at some point in our 20s. At my core, whether I like it or not, I’m a shy guy (not to be confused with this shy guy). It’s not a trait that I’m particularly proud of, and it makes the process of mingling at parties infinitely more difficult.

As an example, my step father is the type of person who can approach a complete stranger, and find himself still chatting with them twenty minutes later. Sadly, potentially like yourself, this is an ability that I do not possess – try as I may. I’m a good actor, but, still, I’ve been known to answer phones that never rang – all in an attempt to get out of innocuous discussions. Feel free to use the words introvert, anti-social, “that guy who doesn’t talk much,” I.T. guy — whatever works for you. They’re, more often than not, one in the same.

But as we so often do, we come to accept ourselves for who we are. I’m a nice person; I just need to get to know you well before I can genuinely relax and let my guard down. I prefer 2-3 very close friends, as opposed to 50 semi-friends. Are you the same? If so, you’re going to have trouble attending or speaking at web development conferences — particularly if traveling alone, like I found myself doing this weekend. Even the thought of hundreds of people staring at you on stage frightens me!

What’s the Solution?

The best we can do is force ourselves into uncomfortable situations.

When it’s a proven fact that salary and job promotions are linked to one’s people skills, what’s the solution for the introverted among us? Must we accept our fate? Are we destined to make less than the outgoing guy in the office who is far less productive?

Well what do I know? I’m just a guy. But, in my 2.5 decades, I’ve learned something: people simply don’t change. The best we can do is force ourselves into uncomfortable situations as often as possible. If you find yourself bee-lining for the door when an uncomfortable situation arises, the best course of action is to resist that urge as much as possible, regardless of what your brain may tell you. Remember, in social situations, your brain is the problem. Don’t trust it!

So, you’ve followed this advice, and, against your better judgment, you’ve taken the plunge and signed up to speak at a web development conference. How do you keep yourself from being overcome by fear?

Lessen the Anxiety

For the more anxious among you, there are a variety of things that will help mitigate the level of nervousness you feel leading up to your speech.

  1. Valerian Root – Available in any drug store, and “promotes relaxation and tranquil rest.”
  2. Tylenol – Even if you don’t have a headache, a Tylenol or Aspirin will thin your blood and provide a modest level of relief.
  3. Whiskey – No; don’t get drunk before your presentation. That’s not a good idea! But, that said, there’s no denying that a little Jack mixed in with your coke will help alleviate that anxiety “rock” which rests in your stomach. Please be responsible if you choose this route.
  4. Shake it Out – Ten minutes before your presentation, consider excusing yourself to a private place, where you can release as much built up energy and anxiety as possible. Shake your hands rapidly, run in place, give yourself a pep talk. All of this helps! Just make sure nobody sees you. :)

Preparation, Preparation, Preparation

It’s natural for any presenter to worry that he’ll forget his lines.

It’s natural for any presenter to imagine himself forgetting his lines. This fear will remain with you up until those final moments of your speech. The only cure – or prevention – is to prepare like crazy. When nobody else is around, practice your speech in front of your bathroom mirror. A word of caution when doing this, though: ensure that no one else is around! Otherwise, you will endure countless levels of ridicule from family members. Send them out for ice cream, and give the mirror the best you’ve got. Once you’ve finished, start over and do it again.

If you’d prefer to write and memorize your script, that’s okay too, just as long as you realize that, come speech day, you’ll undoubtedly forget many of those lines. Perhaps it’s better to write your script, and then convert it to bullet points when you create your presentation slides. In addition to providing the audience with memorable notes on your speech, your slides can also be used as mental reminders and triggers for yourself. Further, a bonus to this method is that your speech won’t feel as memorized to the audience. A bit of spontaneity is a good thing! If you find yourself going on a tangent during your talk, that’s perfectly okay (in moderation)!

Put on a Mask

Be the person that you wish you could be.

No, no – I’m not suggesting that you literally wear an “Eyes Wide Shut“-like mask during your talk. That would just be…weird. Instead, I’m referring to the way you perceive yourself. Presumably, no one at this conference knows who you are. That means, for one hour, you get to be a kid again! Choose a hat…any hat! Be the person that you wish you could be. Want to be more outgoing on stage? Be an actor, animate yourself, and channel that type of person. All that matters is getting through the presentation, having done as excellent a job as possible. If you need to wear an invisible mask to get it done, then by all means, do!

Don’t Be a Stick

Regardless of how interesting the topic is, no one can deny that it’s difficult to sit and listen to another person speak for an hour. We’re not built that way. In fact, I once read that we humans have trouble retaining focus for any period of time longer than fifteen minutes. As a speaker, though, you make things infinitely worse when you come across as a stick, for lack of better words. As Brian Flannigan’s ex-professor would say, “Speak up; let the class hear you!” Nobody wants to listen to a dull monotoned speech for an hour. Here’s some simple techniques that I found to be helpful when creating a more dynamic presentation.

  • Smile, fool!
  • Adjust your tone of voice from time to time.
  • Don’t stand in the same position for your entire presentation. Walk around — feel the space, as some might say.
  • Make jokes. Even if people don’t appreciate your humor (which they often don’t, as I found with my constant Mr. T references), they at least appreciate that you tried. Better yet, the biggest laughs tend to come when you least expect them.
  • Laugh at yourself. You’re not giving a speech to the world. If you stumble on your words, lose your place, or screw up a slide, laugh at yourself on stage. Nobody expects you to be flawless. Flawless is boring.
  • Fluctuate your pacing. Speak slowly during some portions of your presentation. At other points, pick up the speed a bit.
  • If you have real world examples of your speaking points, take a break and reveal them to the audience. People enjoy these sorts of things.
  • Engage the audience. Ask them questions. Allow them to interject with their own thoughts, clarifications, and questions during your speech. This might throw you off, but it allows for a more dynamic presentation.
  • Drink some water, for goodness sake! I personally fall into that group of people who views any period of silence as tense silence. On stage, ten seconds of silence feels like an eternity…but it’s not. The audience barely notices. So, when you need a moment to gather your thoughts, relax, take a drink of water, and continue on.


Please keep in mind that I’m quite possibly the last person who should offer speaking advice. I am clearly a novice! That said, however, the ideas and techniques listed above will hopefully encourage the fearful among you to dive in and test your limitations. When applied to my own first presentation, I didn’t crash and burn. And well…that’s success for an introvert like me!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...