Rookie Geek

Tuesday, 6 August 2013

JavaScript Regular expressions made easy

VerbalExpressions is a JavaScript library that helps to construct difficult regular expressions.

https://github.com/jehna/VerbalExpressions

Animated line drawing in SVG

http://jakearchibald.com/2013/animated-line-drawing-svg/

7 JavaScript Basics Many Developers Aren't Using (Properly)

http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly - by David Walsh

1. String.prototype.replace: /g and /i Flags

Javascript String's "replace" method only replace the first occurence. To replace all, us a regular expression and the global flag "/g":

// Mistake
var str = "David is an Arsenal fan, which means David is great";
str.replace("David", "Darren"); // "Darren is an Arsenal fan, which means David is great"

// Desired
str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great"

To ignore case, use the "/i" flag:

str.replace(/david/gi, "Darren") // "Darren will always be an Arsenal fan, which means Darren will always be great"

2. Array-Like Objects and Array.prototype.slice

Convert Array-like objects like arguments, NodeLists, and attributes into true array:

var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div")); // "true" array of DIVs

var argsArr = Array.prototype.slice.call(arguments); // changes arguments to "true" array

Cloning an array with splice: < br/>

var clone = myArray.slice(0); // naive clone

3. Array.prototype.sort

Noraml sort use:

var clone = myArray.slice(0); // naive clone

More powerful use of sort:

[
    { name: "Robin Van PurseStrings", age: 30 },
    { name: "Theo Walcott", age: 24 },
    { name: "Bacary Sagna", age: 28  }
].sort(function(obj1, obj2) {
    // Ascending: first age less than the previous
    return obj1.age - obj2.age;
});
    // Returns:  
    // [
    //    { name: "Theo Walcott", age: 24 },
    //    { name: "Bacary Sagna", age: 28  },
    //    { name: "Robin Van PurseStrings", age: 30 }
    // ]

4. Array Length for Truncation

JavaScript's pass-objects-by-reference nature can be confusing, therefore to remove an array:

var myArray = yourArray = [1, 2, 3];

// :(
myArray = []; // "yourArray" is still [1, 2, 3]

// The right way, keeping reference
myArray.length = 0; // "yourArray" and "myArray" both []

5. Array Merging with push

Merging array with push:

var mergeTo = [4,5,6],
var mergeFrom = [7,8,9];

Array.prototype.push.apply(mergeTo, mergeFrom);

mergeTo; // is: [4, 5, 6, 7, 8, 9]

6. Efficient Feature/Object Property Detection

How we normally detect a browser feature:

if(navigator.geolocation) {
    // Do some stuff
}

While that works correctly, it isn't always efficient, as that method of object detection can initialize resources in the browser. In the past, the snippet above caused memory leaks in some browsers. The better and more efficient route is checking for a key within an object:

if("geolocation" in navigator) {
    // Do some stuff
}

7. Event preventDefault and stop Propagation

A bad way to stop the behaviour when clicking on a link:

$("a.trigger").on("click", function(e) {
    e.stop();

    // Do more stuff
});

It's best to simply use preventDefault:

$("a.trigger").on("click", function(e) {
    e.preventDefault();

    // Do more stuff
});

Wednesday, 31 July 2013

Amazing HTML5 Canvas - A map of Stars near Earth

A colleague of mine, my Master of OCM - Gareth Fox, was brushing up his Canvas skills and developed a map of stars within 15 light-years of Earth.

So much to learn so little I know...

Tuesday, 30 July 2013

Setting up Sublime Text 2 for Velocity (HTML) + BracketHighlighter

Sublime Text 2

1) Download Sublime Text.

2) Go to "Preferences" --> "Browse Packages..."

3) Create a new file called "Velocity (HTML).sublime-settings" with this content:

{    
    "extensions":
    [
        "vm",
        "tpl"
    ]
}

4) Do "Ctrl + Shift + P"
5) Type in "SS Velo" and select "Set Syntax: Velocity (HTML)"

Viola! Sublime text can recognise velocity (vm) files.

BracketHighlighter

1) Download the BracketHighlighter Zip from Github
2) Go to "Preferences" --> "Browse Packages..."
3) Unzip BracketHighlighter to the Sublime Packages folder.
4) Rename the file to "BracketHighlighter"

Viola! You have highlighting for open and close quotes.

Monday, 29 July 2013

Ruby Warrior!

https://www.bloc.io/ruby-warrior#/

A TRIUMPHANT QUEST OF ADVENTURE, LOVE & DESTINY
ALL WITHIN A FEW LINES OF RUBY CODE

Monday, 22 July 2013

Online applications - Tools for network, Web Development and Security

http://www.myriap.com/

Myriap is a collection of free little online applications. You will find here tools for the network, the web development, security.

List of available applications: