Via Red Giant Design.

Via DeviousMedia.

Via Social Caffeine

Usually we learn the basic “for” loop, and is the most used. Also, we learn the “do-while” and the “while” loop, but we don’t use too often(at least, not me). We have another one, the for-in loop, but it is used to iterate over object properties and not just to control the flow of a program. This loop will be discuss in a future post, as is very specific and is not always the best solution.

Lets start with some examples. The code for a simple for will be:

This will be the same if we do:

As I said, this 3 examples do same, and also, each one run in the same amount of time because, more or less, they are doing the same amount of work, a very simple task as example. But imagine if you have to iterate thru a big amount of items. We could do it better.

One way to improve these loops is to store in a local variable the length of the array. This will speed up the loops as retrieving the value of "vowels.length" each time the loop run is inefficient given that length of the array won’t change while the loop is being executed, and the property lookup is a much more expensive operation than local variable access. So we can do something like this:

We eliminate the property lookup, which is very important when you are working with HTMLCollection objects. We can still improve more the performance of a loop decreasing the iterator toward 0 rather than incrementing toward the total length. This simple change will save execution time. Lets see the example code:

The last improvement we are going to do is to change the decrement operator following the advice of jslint page. You could read there why they suggest that, but the curious part was finding that sometimes the loops run faster after changing the decrement operator "i--" with "i-=1".

One thing to keep in mind is that when you use the decrement operator, you will iterate from the last item to the first one, so a good workaround is doing "vowels[length - 1 - i]" instead of "vowels[i]".

As you can see, there is many ways to accomplish a simple task, so you have to find what you think is best in each case.

To end this post I leave you some test cases on jsperf.com to play with:

• “for” loops test
• “do-while” loops test
• “while” loops test

So, here is my solution. I don’t know if this could be helpful for you, but it could help to test your javaScript skills. Also, if you have any suggestion of have to improve it , let me know.

You can see a live example on the Github page and download the .zip or fork it.

JSON Formatter & Validator

This a great tool that will help you to work with JSON. The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save space, it became extremely difficult to actually read and make sense of it. So it make JSON easy to read and debug by human beings.

Link to JSON Formatter.

Apigee

Do you imagine a console where you can select the a bunch of API’s and make quickly test of them and their capabilities? That is what Apigee is. You can select the API from Twitter, Github, Facebook, Instagram and Foursquare just to name a few.

Link to API Providers.

Google Closure Compiler

The Google Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

Link to Google Closure Compiler.

JSLint

is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool. When you start using, you can get more than one headache learning it, but you will find it very useful when you work in a team and also if you compile your code for production. I also use it in NetBeans as a Plugin.

Link to JSLint.

CSS Lint

At last but not least, I leave you the Lint version for CSS. This is an open source CSS code quality tool and as you can read in the home page it “will hurt your feelings” but also it will help you code better. The UI a lot better than the JavaScript and you just has to put your CSS code and submit, or you could setup some options for the validator. Originally this was written by Nicholas C. Zakas and Nicole Sullivan.

Link to CSS Lint.

Bonus track:

Mergely

Mergely is a powerful online diff and merge editor and javascript library that highlights changes in text. This is not just for web development as it can be embedded within your own Web application to compare files, text, C, C++, Java, HTML, XML, CSS, and javascript. I found Mergely because searching for a similar app to WinMerge on mac. I couldn’t find, at least not free. So, I think is great solution.

Link to JMergely.

The event had a high level and I think the balance is very positive and important for the local developers community.

Here are some of the presentations from different speakers:

Mike Taylor: The Navigator Object: past and future

Luz Caballero: WebGL for JavaScripters

Zeno Rocha: Introducing Canvas, SVG & WebGL

Nathan Rajlich: NodObjC – Bringing Objective-C to Node.js

Pato Jutard: The shift from the web page to the web app paradigm: lessons learned building Mural.ly

Nicolás García Belmonte: JavaScript for Graphics and Data Visualization

Hernán Rodriguez Colmeiro:  Lizards & Cellphones, an introduction to Mozilla Boot2Gecko

Aaron Heckmann: MongoDB y Node.JS

Leo Lanese: Responsive Web Design, Mobile First and Progressive enhancement in action

Juergen Fesslmeier: Wakanda: Integrated Web Application Development with NoSQL and JavaScript

Mario Andrés Pagella: How game development can help us become better web developers

Damián Mendez Romera: Effective Debugging in JavaScript

Jacob Thornton: Borges