These are a few of my favourite things – Part I (Javascript)
So, it turns out that I have more than 300 favorites on Twitter. Twitter doesn’t make it easy to categorize or find your favourite tweets. As someone once said – “Finding a tweet is like trying to find a fart in a room full of farts“. I’ve decided to move my favourites here. The motivation for this post is purely selfish. I want to be able to find these easily. If you find them useful too, then that’s a bonus. My first post in this series will list all my favourite Javascript resources – in no particular order.
Moment.js: is a handy dandy lightweight Javascript framework for parsing, manipulating and formatting dates.
Backbonescreencasts.com is a place to have fun and learn all about how to build Backbone.js applications from the ground up. At time of writing, there are two screencast up there – “Backbone.js Quickly” and “Backbone.js on Rails“. You gotta pay for them, but they won’t break the bank at $9 each. I’ve watched and enjoyed “Backbone.js Quickly”.
Backbone Training is a great pointer to a load of useful backbone.js resources – some paid and some free.
List.js: If you want a 7KB cross browser Javascript plugin that makes your plain HTML lists super flexible, searchable, sortable and filterable, then look no further.
DropKick.js: It is generally accepted that styling drop down lists are a pain. DropKick.js is a plugin that makes the job easier, and it plays nice in older browsers.
Money.js is a currency conversion library and it’s just 1KB in size.
Stripe.js is a super simple Javascript API for handling credit card payments. It impressed John Resig, so it must be good!
jQuery boilerplate: jumpstart your jQuery plugin development.
jQuery Performance Tips and Tricks: When Addy Osmani speaks, you should listen. Performance optimisation is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bear in mind. In Addy’s talk, he looks at some of the best practice, tips and tricks for improving the performance of your jQuery code.
Filter.js: is a client side search filtering using JSON and jQuery.
TodoMVC – Developers these days are spoiled with choice when it comes to selecting an MVC framework for structuring and organizing JavaScript web apps. There are so many options, including: Backbone (my own personal favourite), Spine.js, SproutCore 2.0, JavaScriptMVC, Sammy.js, Steve Sanderson’s , KnockoutJS, AngularJS … and the list goes on!
The question then is, how do you decide on which one to use in a sea of so many options? To help solve the problem, Addy Osmani created TodoMVC, a project offering the same Todo application implemented using MVC concepts in most of the popular JavaScript MVC frameworks, so you can select the one you feel the most confortable with.
Recurly.js: Secure, PCI Compliant Transaction forms with fully customizable CSS.
jsPerf: a JavaScript performance playground. jsPerf aims to provide an easy way to create and share test cases, comparing performance of different JavaScript snippets by running benchmarks.
jsFiddle: This is a playground for web developers. It’s an online editor and allows you to write snippets of HTML, CSS, and JavaScript. These snippets can be shared with others, or embedded in a blog, etc.
Douglas Crockford’s jsLint: jsLint is a JavaScript verifier takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location.
Chosen.js: is a JavaScript plugin that makes long, unwieldly select boxes much more user friendly.
BoxJS - package up your JavaScript and make your website faster.
.appendTo Training – learn Javascript and jQuery for Free.
MicroJS - a useful collection of copy and paste snippets for various micro frameworks and JavaScript libraries.
Formly – a form glamorizer for jQuery. Useful plugin to add style and validation to your HTML forms.
Tooltipsy - is a jQuery tooltip plugin for control-obsessed designers. It give you complete control over the CSS, animation and position.
Yet another tooltip plugin – another nice tooltip jQuery plugin.
Learn JavaScript: Mozilla’s overview of materials from various sources. It is broken down into Beginner, Intermediate and Advanced, so you should find something useful here whatever your level.
jQuery UI Map – a Google Maps plugin for jQuery UI and jQuery Mobile.
JavaScript Gotchas – an introduction to the weirder side of JavaScript for developers new to the language.
JavaScript InfoVis Toolkit – the JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.
MobilyMap - is a jQuery plugin that can create a Google Maps-like, draggable interface from any image. It’s possible to add location-based markers and display information when any of the markers are clicked.
JavaScript from Null – *free* videos series up on Nettuts. If you haven’t already, go check out Nettuts. It’s always the first place I look when i’m learning something new.
Bye bye working from home. Hello Coworking!
So, today will be my last day working from home. I’ve come to realise that working from home has its drawbacks. The Oatmeal had quite a funny cartoon illustrating how working from home can be both awesome and horrible all at once. In fact many of the advantages of working from home are also disadvantages. I could take any pro and turn it into a con, and that’s not because I’m a “cup is half empty” type person.
Let me explain. One could say that one of the advantages is that you don’t have to stick to the 9 to 5 regime. While this is true, I have found that my day could start at 8am and go on until 8pm or 9pm. The next day, might be a “typical” working day, while the following day could be 10am to 2am. It is something to consider if you are thinking about home working. I have found that the close proximity to my office, i.e., the spare room, means that I feel like I am constantly working. In other words, working, and sticking, to a strict 9 to 5 regime is not all bad. As commander in chief of an army of one at Solutionware, it is not always possible to stick to a 9 to 5 work day.
I am lucky that my “workplace” is quiet. Quietness is great for certain tasks. However, it can be counterproductive at other times. Sometimes it’s nice to bounce ideas off a fellow colleague. Sketching out ideas or schemas on a whiteboard is far more fun with 2 or more people! Working in isolation can stifle creativity.
So! On Monday, my laptop and I will be moving to AMWorks, a coworking space located in Dublin. Coworking? Huh? My understanding of coworking is that it is a reasonably priced space where like-minded individuals, freelancers, start-ups etc, work independently, but together, sharing knowledge and ideas. For more check out the AMWorks website.
I went along to AMWorks during the week to check it out. The place itself is located just off Capel Street, Dublin so it is not a million miles away from the nearest Luas stop. The office itself is open-plan, and the brickwork is quite interesting looking! There was a nice vibe about the place. I made my mind up pretty quickly and signed up for the full time membership. They have some very flexible membership plans. For more details, rates and pics go to amworks.ie.
As it happens, next Monday marks the beginning of European Jelly Week! And no, Jelly Week is not a week long festival for jelly loving geeks! A jelly is a casual working event – where people come together (in a person’s home, coffee shop, or office) to work for a day. AMWorks are taking part in Jelly Week, on 21st January. So why not come along! For more go here.
Exciting times ahead….!
Zen Coding
I just wanted to share a handy dandy tool with you all. It’s called “Zen Coding“, and the plugin (for Visual Studio) can be found here. Zen Coding is an editor plugin for high-speed HTML, XML, and XSL (or any other structured code format) coding and editing.
So, what will it do for me? Well, suppose you want to write some HTML. You know that the page will have one of the new HTML5 header elements. The header element will contain a child div called “logo”. The “logo” div will contain an unordered list called “nav”, and will contain 5 list items. Each list item will have a class, named after the index of the list item, and each list item will contain a link. Rather than write all this HTML out by hand, you can lean on the plugin and instead write:
html:5>header>div#logo+ul#nav>li.item-$*5>a
and the plugin will produce the following html:
Some useful links: