RSS

Tools and technologies

by Stephen Fulljames

Getting started on a new project is also a great time to try out new tools. Until recently, advanced development software has had more to do with back end technologies – with a text editor often being the best tool for writing HTML or CSS. As Javascript, and CSS pre-processors, become more prevalent the tooling has needed to change and there are some great new apps and sites out there to work with.

  • Cloud9

    An online web IDE, running on Node and fast becoming ‘Google Docs for code’. Not only can you cut code here, it will integrate to Github and also run up test sites without needing seperate hosting.

  • PHPStorm / WebStorm

    If you prefer your IDE on the desktop this is one of the best we’ve found for web work. Great source control integration, and a cross-compatible project environment for Windows, Mac and Linux users.

  • Github / Unfuddle

    Once you start using source control then tools to share it with your team or the wider world are essential. Github is the gold standard for git, but Unfuddle also offers SVN and more private repos on lower plans.

  • Kodery

    Created by our very own Paul Adam Davis, Kodery is a brilliant place to store those snippets of HTML, CSS and Javascript you depend on.

  • JSBin / JSFiddle

    Using Javascript to try out Javascript, these sites offer an enviroment to quickly test and share ideas – often a better way to get a point across than trying to explain it.

  • Dabblet

    A very slick CSS equivalent to the Javascript test sandbox sites.

There are also some excellent sites out there offering tutorials and inspiration on a regular basis.

  • 24 Ways

    Now a staple of Christmas web reading, 24 Ways condenses a year of internet into 24 concise article on the most interesting stuff out there.

  • 12 Devs of Xmas

    The new post-Xmas equivalent to 24 Ways. Focusing more on development topics and a great way to get some ideas for the new year.

  • .net Magazine

    Tutorials, news and community for web design and development. They even print it on paper if that takes your fancy!

  • Smashing Magazine

    A nice combination of design and development tutorials, along with interesting discoveries and industry commentary

We’re not going to tell you what to learn, after all we don’t know what your particular interests are. But for those who want to get an idea for what up-and-coming technologies are out there we can offer some suggestions…

Starting out

  • HTML5

    Without a doubt the biggest thing in web development at the moment, even if the term has been used (and abused) to cover a wider range of new technology. The language itself is a great thing to get to grips with, and the barriers to adopting it are shrinking all the time.

  • CSS3

    The visual counterpart to HTML5′s nuts and bolts. Browser support is variable but there’s a core of solid stuff you can use today, as well as techniques to bring them to older browsers and more advanced stuff like animation and transitions.

  • Javascript

    Not really the newest kid on the block, but an understanding of the fundamentals of Javascript is as important as ever.

Moving On

  • jQuery / YUI / DOJO / Mootools

    Fast becoming one of the web’s building blocks, Javascript libraries such as jQuery have revolutionised how people use Javascript. But knowing what they do, how they work and how to pick the right tool for the job are essential to avoid performance problems and security risks.

  • Responsive Design and Media Queries

    One of the hottest topics of 2011 and bound to grow in importance this year. Responsive Design isn’t just the new CSS capabilities that make it possible, its also the principle of designing for any size of screen to give users a great experience whatever they’re viewing your site on.

  • Canvas

    Only one of the new HTML5 elements, but a real change to how content can be presented on the web. There’s enough exploration here to keep you busy for months!

  • LESS / SASS

    Once you’ve got the measure of CSS, bringing in a pre-processor to sharpen up your code can be a great help. They’re not for everyone but certainly worth a look.

Going Advanced

  • QUnit / Jasmine

    When you start building large Javascript applications (or even small ones), solid engineering practices such as unit testing become essential. And getting going with unit testing in Javascript isn’t as hard as you might think.

  • Node

    For those with a background in client-side development, Javascript-based Node makes a huge amount of sense as a server language. It’s finding favour with experts in other technologies too, and can make real-time communication simple.

  • Coffeescript

    Just as LESS is to CSS, Coffeescript is to Javascript. A pre-processor that makes JS syntax simpler and more flexible, its even starting to influence development of the underlying language.

Of course there’s a near inexhaustible list of other web technologies you could try out. Some more favourites of ours recently have been: Rails, PHP, Sinatra, Code Igniter, ASP.net MVC, Knockout, Ender, MongoDb, Underscore, Jade, Mustache.

Why not let us know what you’re most interested in?

4 Responses to “Tools and technologies”

  1. sniffer - January 2nd, 2012 at 11:34

    2012 is all about JavaScript for me. From learning the advantages and disadvantages of new libraries such as Knockout, Underscore, Backbone & Spine, to teaching myself how these libraries work by writing performant object-orientated JS, to finally unit-testing my JS using QUnit or Jasmine.

    First stop for me is the second section. Learning how to write OO JS by deconstructing other libraries. A couple of resources I’ll be using to get started:

    JS libs deconstructed: http://www.keyframesandcode.com/resources/javascript/deconstructed/

    Paul Irish: 10 things I learned from the JQuery source:
    http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

    Paul Irish: 11 more things I learned from the JQuery source:
    http://paulirish.com/2011/11-more-things-i-learned-from-the-jquery-source/

    If anyone has any more resources, please let me know!

    Finally, I haven’t really found a series of articles that teach you how to write OO JS in an way that easily makes sense to me. If this project can help in this, it’ll be one (of hopefully many) major success(es).

  2. aprillins - January 3rd, 2012 at 13:45

    The references being spread here are very time savers. Especially the JSBin and Dabblet. Thanks a lot!

    For HTML5 and CSS3 I would like to let you know that HTML5 & CSS3 For The Real World (Sitepoint) book by Alexis Goldstein is very comprehensive. I admit HTML5 section on the book is not too rich to learn, but when you see CSS3 section you’ll find the gold there.

    Oh, the Canvas, SVG, and Drag and Drop is available on page 265 and It’s particular part.

  3. Robert O'Rourke - January 9th, 2012 at 12:02

    Just as another resource for using LESS that may be worth mentioning (plus shameless self promotion) – I put together a compiler that can be used in WordPress themes or plugins as an include.

    http://github.com/sanchothefat/wp-less

    You include the script in your theme and then use wp_enqueue_style() to reference .less files. The compiling happens automatically so it removes an extra step from your development cycle – just edit the LESS then refresh the browser :)

  4. Baswazz - January 10th, 2012 at 13:25

    What about HTML5 Boilerplate

    http://html5boilerplate.com/

    I did not have time to do research about it, but maybey a good topic for 12412