Hard day at work!

Hard day at work!

JS Performance: 10 Commandments

1. Don’t touch the DOM
2. Cache DOM reference in local vars
3. Use selectors API
4. Cahce the length when looping collections
5. Update the DOM offline
6. Batch style changes
7. Don’t ask for layout info excessively
8. Minimize reflow areas
9. Use event delegation
10. Don’t touch the DOM

Java examples: Enhanced For Loop

	public static void enhancedForLoop(){
	int[] arr = {1, 2, 3, 4, 5, 6, 7, 8, 9};
	System.out.println("\nEXAMPLE: Enhanced For Statement");
	for (int temp: arr){ // Create a temporary variable, same type as array values. For
	// loop assign array value to the temporary variable
	System.out.println("Enhanced = " + temp);
	}
	}

view raw Java examples: Enhanced For Loop Statement.java hosted with ❤ by GitHub

Java examples: Switch Statement

	public static void witchStatment(int num) {
	System.out.println("\nEXAMPLE: Switch Statement");
	switch(num){ //Check the value
	case 0:
	System.out.println("Case = " + num); // Execute this if 'case' matches the 'value'
	break; // Stop the statement
	case 1:
	System.out.println("Case = " + num); // Execute this if 'case' matches the 'value'
	break; // Stop the statement
	case 2:
	System.out.println("Case = " + num); // Execute this if 'case' matches the 'value'
	break; // Stop the statement
	case 3:
	System.out.println("Case = " + num); // Execute this if 'case' matches the 'value'
	break; // Stop the statement
	case 4:
	System.out.println("Case = " + num); // Execute this if 'case' matches the 'value'
	break; // Stop the statement
	default:
	System.out.println("Default = " + num);
	}
	}

view raw Java examples: Switch Statement.java hosted with ❤ by GitHub

Java examples: While Loop vs ‘do’-while loop

While Loop

	public static void whileLoop(){
	System.out.println("\nEXAMPLE: While Loop");
	int num = 0;
	while(num <= 20) { // Check the while condition first, Then execute the loop
	// Then while 'l' is less than or equal to '0'
	System.out.println("num = " + num);
	num++; //increment 'l' by 1
	}
	}

view raw Java examples: WhileLoop.java hosted with ❤ by GitHub

‘do’-while loop

	public static void doWhileLoop() {
	System.out.println("\nEXAMPLE: Do While Loop");
	int num = 0;
	do {
	// DO the work... Execute the loop first
	System.out.println("num = " + num);
	num++; //increment 'l' by 1
	} while(num <= 20); // Check the conditions
	}

view raw Java examples: 'do'-while loop.java hosted with ❤ by GitHub

Java examples: Fizz Buzz

for (int i = 0; i <= l; i++){

    boolean f = i % 3 == 0, b = i % 5 == 0;

    String output = f ? b ? i + " FizzBuzz" : i + " Fizz" : b ? i + " Buzz" : i + "" ;

    System.out.println(output);

}

CSS3 Only Simpsons :D

This is pretty Awesome 😀

Advertisement

Self Invoking Function (Tutorial – JS)

Self invoking functions are used to stop global scope pollution and ensure the code doesn’t conflict with other code in the page.


(function (a, b) { //Temporary name space for all
// the variables within the function

//code goes here

}() //Invoke the function

); //Without this enclosing parenthesis JS
//will identify this as a function declartion statement only

 

Working example – JSFiddle

var p = 8;
var q = 7;

(function (a, b) {
var x = a * a ;
var y = b * b;
var z = Math.sqrt(x + y);
var r = p + q; // Effects of global scope pollution
console.log(r);
console.log(z);

}(3, 4));

console.log(p); // declaration of variables outside polluted the global scope
console.log(z); // “ReferenceError: z is not defined” = Global scope is not polluted

Semantic Snips – Update

I am having some spare time. So I am taking the liberty to compile Semantic Snippets.

I’m using few handpicked resources to ensure everything is consistent. So all the code will be mash up of

• WHATWG
• W3.org
• WAI-ARIA
• Schema.org
• BBC Future Media Standards & Guidelines
• Google webmaster academy
• HTML 5 Doctor
• Dive in to HTML5
• Initializr
• Twitter Bootstrap
• Baseline Grid

At this stage I do not intend provide comprehensive guide to how html5 should be used as above resources are more than enough. Just compilation of snippets inline with best practice for different use cases with references to additional reading materials.

Some of this issues may be subjected to debate. I certainly welcome that

You can view the progress here:

https://github.com/Shavindra/SemanticSnips/

HTML5 Jungle – Semantic Markup

Last few weeks I’ve been looking deep in to various issues related to web. One specific area which I am militant about is semantic markup. I strongly believe that documents should be laid out in proper manner in a way that machines can understand and interpret it. Even though for the layman may not realise this.

With HTML5 designers/developers are really spoilt with markup (there are 104 HTML5 compatible tags). But that’s just the easy part! Throw in Global attributes and values then it becomes more interesting. Then add other markups like schema, WAI-ARIA spec etc… then things can drive you insane.

I am pretty sure those who actually care sometimes struggle to determine how this new markup should be used. Easier option for us it to ignore the markup and go back to the basics. However this does not help the progress. So this mean we spending time to understand the content as well as deciphering HTML5 spec in order to find best fit markup.

Boilerplates

There are plenty of boilerplates out there which we can use readily. Danger is it’s very easy to take this for granted and be lazy and build a website/app and ignore the website use cases also miss out on rich experiences we create because we are not aware of it since it’s not in boilerplate.

Truly understanding the HTML5 spec (and browser capabilities) allow designers/developers to implement well thought site architecture.

For example how to design layout of an article with headings content and pictures. Like we do with a print design to put in to perspective. Then use appropriate tags to mark sections like <time> so that machines and robots (SEO, Screen readers etc) can understand and in turn allow us to build better rich user experience for users.

So I’ve decided to spend time building/compiling an extensive snippet library and concentrate on Semantic markup to explore all the possibilities of HTML5 and how it can be used in different contexts/user case without bloating the code.

SemanticSnips

There are plenty of tutorials and discussions revolving around HTML5 Semantics like HTML5 Doctor, HTML5 Rocks etc.

Issue I personally have with these kind of posts is they can be sometimes too long to read. So idea here is compile list of markups which can be mixed and matched.

I will be doing these snippets as modules which can be interchanged without upsetting semantic markup and  allowing the code to be adopted to rapidly to work with overall unique user cases that may arise.

Github: https://github.com/Shavindra/SemanticSnips

A word of Caution

I like to iterate a point regards to this. That these snippets can be subjective and depend on how you perceive the content and may not work out.

For example just look through here you will understand what I mean and Dr Richard Clark perfectly summed it up.