JavaScript

ZendCon 2010 – JavaScript for (real) beginners

Warning: this is not a real post…
It is more ‘some notes’ I’ve took in one of the morning sessions in ZendCon 2010


* In php associative array are very powerful – in Java script the keys will be integer.
You can have the same ‘associative’ if you build your own object that contain the features.

var obj1 = new Object();
obj1['foo'] = 'momo';
obj1.foo2 = 'bobo';

var obj2 = {
‘foo’ : ‘bar’,
‘confObj’ : ‘bla-bla’
}
console.log(obj1);
console.log(obj2);

* Nice way to use array {key1: “value”};
* The ‘this‘ keyword – what it point to now? A good question with more then one answer.
* ‘new‘ – create a copy from the function/obj and assign it.
* instanceOf – are X is instance from Y? (return as string)
* typeOf – lots of return options.

*

functions

both as objects and as contractor or procedural

as Procedural


function ff(str) {
console.log('ff is:' + str);
}

as an Object


var foo2 = function(str){
this.str = str;
this.say = function(){
console.log('inside say let see what is str:'+str);
}
this.say();
}

prototype – a way to let you inheritance
* jQuery (Mr. Rasig) show a nice way to do a way of ‘class’ / obj and standard inheritance.
For example:

var Robot = function(name){
this.name = name;
this.say = function(){
console.log("bla bla my name " + this.name );
}
}
myRob = new Robot("momo");
// refine say
myRob.say = function() {
console.log("Yo - my name " + this.name );
}

// lets add to the ‘class’ definition a new function – it will be in all the obj. we created from it
Robot.prototype.showDown() = function(str) {
console.log (‘bye bye ‘ + str);
}

Useful sites/resource to keep learning the core of JS (and not just some ‘cool’ animation):
** eloquentjavascript.net
** mozilla – core and ref
* nczonline.net
* wtfjs.com

Books:
* JavaScript: The Definitive Guide – David Flanagan
* JavaScript: The Good parts – Doulas crockford
* JavaScript Patterns – Stoyan Steganov
* High-Performance JavaScript – Nicholas C. Zakas

On twitter you can find more #zc10 or #zendcon

Standard
Business, JavaScript, webdev

Chrome Extentions – IMHO, Very Cool Technology

Last week we had our 2nd FedEx day here at High Gear Media HQ (yes – we like to think big like Google, Yahoo and Atlassian). So we gave our developers lots of good pitza (tradition is tradition!) and some choose to hack on a new iPad application that we are going to ship soon. Some others, choose to check out the new Chrome App Store (or in its current status – chrome extension).

It was an excellent 24h and I hope we will have the video soon on youTube.

Here is the first chrome extension that took me less then one hour! It’s very cool that Google choose to take all the skills that any web developer will have (HTML, CSS, JS) and build their concept around it. When you take the new goodies that HTML5 is giving you (check this html5rocks for all the amazing capabilities) and you think that this new app store will be the way to users to install applications on their chrome OS ‘iPads’ – you start to see the huge potential.

Here is the 2nd extension that let you set your own car and get news/recall alerts on it. Cool, no?

We have some more ideas and with local storage, Geo location and other great HTML5 features we will ship some more extensions to the table. Our new APIs let us build these applications very quickly. I hope that we will be able to open most of them to the public so others could build on top of them. For now, if you feel like hacking on the best automitive API that is out there… try:

Something like: http://feeds.highgearmedia.com/?tags=sport – to get all the ‘sport’ information that we produce. Or http://feeds.highgearmedia.com/?tags=prius if you own one.
Of course you can change the ‘prius’ with any make-model that you own and still get all the content for that. If you are into ‘Green’ and want to check what is the new progress with specific model you can use: http://feeds.highgearmedia.com/?tags=camry,green

All these will bring you feeds (ATOM) that you can consume easily. Enjoy.

What is FedEx day?

This is our version of Google 20% time to work on ‘cool/new’ stuff.

The Goal
We are coming to the office early on FedEx day and ship something over one day of work, hence Fedex Day – “We deliver”.

The Rules

  • From 8.30 to 9 we brainstorm everyone’s ideas of what could be done, and developers sign up for tasks.
    This can be around a ‘theme’ or a bigger idea/project we want to push.
  • Developers can either work alone or in pairs.
  • The development task must be something “out of the ordinary”. This is hard to define – but basically the spirit is that you can’t do something you would normally do. It’s a chance to attack all those “I wonder if XYZ would work… “, “It would be nice if we could… ” small development tasks that always get pushed off in the heat of battle.
  • The development task must be deliverable in one day. This doesn’t mean it has to be finished, polished and shipped (although it’s awesome if we can get there), but it can’t be an “open engine”. It must do something and work to some extent. It must show enough promise that we should continue working on it, or can it.
  • Pizzas/Drinks are ordered in, support is handled in advance and all other assigned tasks are obviated for the day so that developers have nothing to do but code.
  • At about 5.30, we’ll meet up for a “show off” meeting where developers get to show off what they’ve done, combined with chocolate cake and beer.
Standard
JavaScript, webdev

jQuery 101 – Quick Good Presention with Examples

I saw this one few days ago… very cool pretension that will give you the power of jQuery in less then 5min.

Like the best things out there. Their power is lay in a simple philosophy they are based on. In jQuery case:

1. Find some DOM elements. For example: $(“p”)

2. Do something with them. For example: $(“#myDiv”).html(“<h2>Yo yo – this is very impressive bike</h2>”);

The power is the simplicity and the way you can chain functions. Example: $(“#myDiv”).html(“foo bar!”).fadeIn(slow); <– yes, this will make the addition fading into the screen in a nice slow animation. Try to think how many lines of JavaScript you need for that. There are lots of other goodies in the pretension – so give it a ride.

Last but not least (for every developer, designer and well… human) – coffee. I know some will say Starbucks is NOT coffee. But nevertheless, this ‘poem’ on the cup got my attention. As we know, it’s not about YOU…

You and starbucks

Standard
JavaScript, life, webdev

Advanced jQuery & Javascript For Your Web App

This is an excellent 25min that (the one and only) John Resig gave at the Future of Web Apps conference in Miami 2010.
If you don’t know when to use the new features of jQuery 1.4.2 like: .live and .delegate events – you must see it.

Main points to take home with you:

  1. Event delegation –  Event delegation is a technique that routes around the traditional method of binding events. You must understand it and start using it if you have apps that use a lot of DOM elements. The example he gave was of a table with 10,000 cells. You do not need to bind the event to each cell but rather one event to the table element and by using the bubbling of events in the browser these events will be executed with less code and more efficiency.
  2. Use CDN. What is a CDN you ask? Well, A CDN is short for Content Delivery Network and what that effectively translates into is a bunch of geo-position data centers around the globe. Not all of us have the finances to build a whole bunch of data centers all around, but there are a number of great services that handle this. Amazon CloudFront is one that we (at High Gear Media) use and they are good and cheap.
  3. Minifying and gzipping your JavaScript. Easy and save lots of time. Performance – performance – performance (like Steve balamer like to say).
  4. Use jQuery UI and don’t re-invent the wheel. jQuery UI is a set of components and set of widgets that you can use, you can drop into your application, and they will just work. I’ve used them over and over again and each time they are getting better and better with a great API that let you (the developer) all the power to customize and work with them.
Standard
JavaScript, webdev

jQuery 1.3.3 (almost 1.4) – main improvments

These guys are just doing it RIGHT…

Here is a short (relatively) presentation that give you the highlights from the jQuery Conf. that took place in Boston last weekend.

I personally like the new separation that we now see in the core.js and of course the new selector engine (Sizzle). As we all know – faster === happy users.

As for more generic topic of Java Script Testing – here is a very good intro:

I’m strong believer in test driven development and the option to do it with better methodology and tools is most welcome.

Standard