Semantic CSS With Intelligent Selectors

http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/

Attribute selectors

[rel="prev"] {
  /* styling for "previous links" */
}

[rel="next"] {
  /* styling for "next" links */
}

Attribute selectors with simple Regex

a[href^="https:"] {
   /* style properties exclusive to secure pages */
}


[href$=".zip"]:before,
[href$=".gz"]:before {
   content: '\E004'; /* unicode for the zip folder icon */
}

An example of efficient CSS selectors with semantic HTML

/* BAD - The CSS for the class approach */

.new-window-icon:after {
   content: '[new window icon]';
}

.twitter-icon:before {
  content: '[twitter icon]';
}


/* GOOD - The CSS for the attribute selector approach */

[target="_blank"]:after {
   content: '[new window icon]';
}

[href*="twitter.com/"]:before {
  content: '[twitter icon]';
}

Specific selector using attribute

a {
  color: blue;
  text-decoration: underline;
}

a[rel="external"]:after {
   content: '[icon for external links]';
}

Rules for hyperlinks and buttons

• Rule 1: “If it’s a hyperlink, it should have an href attribute.”
• Rules 2: “If it’s a hyperlink and has an href attribute, it should have a valid value.”
• Rules 3: “If it uses a button class, it should be a button — at least in the accessibility layer.”
• Rules 4: “If it is an a element with role="button", then it should link to somewhere when JavaScript is off.”
• Rules 5: “You can’t disable a hyperlink.”
• Rules 6: “Buttons in forms should have explicit types.”
• Rules 7:  “Both hyperlinks and buttons should have some sort of content or an ARIA label.”

Web Assets - Tips for Better Organization and Performance

Basic optimizations and best practices for web development:

http://net.tutsplus.com/articles/web-assets-tips-for-better-organization-and-performance/

HTML5 Please

http://html5please.com/

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

Animation with CSS

Animate.css - examples:
http://daneden.me/animate/

Client-Side Storage

http://tech.pro/blog/1486/client-side-storage-options

• Web (Local & Session) Storage (current with limitations)
  For Local Storage usage example, you can see my post regarding HTML5 Contenteditable and KendoUI.
• Indexed DB - e.g. idb.filesystem.js (near future)
• File System - client (future!)
• Web SQL (deprecated)

Potentially can develop a web-based app (supports mobile & desktop) without the need of an actual native mobile app.

IntelliJ - fix Maven dependency

Steps to go through fixing Maven dependency in IntelliJ -

1. Check the POM - see if the dependency is defined properly
2. Go to File --> Project Structure... and see if which Library is throwing up error
3. Navigation to the Class file that the Library is pointing to, e.g. (in your Maven dir)

   [user_dir]/.m2/repository/[dependency]/[dependency_version]/... 

4. Delete the Library with error in Project Structure.
5. In command prompt, navigate to the directory of the project/Intellij module, run

   mvn install 

   to force download the dependencies
6. In IntelliJ, top left hand corner, go to "Packages" view
7. Right-click on the module --> Maven --> Reimport
8. Go to File --> Project Structure... to see if error persist

Javascript - best practices

http://www.2ality.com/2013/07/meta-style-guide.html?spref=tw

HTML5 Contenteditable Attribute - Front End editing

http://www.hongkiat.com/blog/html5-editable-content/

Try edit something here!

Changes saved.

Note: Changes are saved to Local Storage in your browser.
For WebKit browsers, Chrome and Safari, it is stored under the ‘Resources’ tab.
For Firefox users, go to the DOM panel and search for "localStorage".

Kendo UI - WYSIWYG plugin

http://www.kendoui.com/ - leveraging HTML5 contenteditable attribute for editing content in context, this plugin adds the standard WYSIWYG functionality to it.

This example is based on this.

Try edit here!

Changes saved.

Note: Changes are saved to Local Storage in your browser.
For WebKit browsers, Chrome and Safari, it is stored under the ‘Resources’ tab.
For Firefox users, go to the DOM panel and search for "localStorage".

Raspberry Pi Model B: Hands-on Video

http://www.youtube.com/watch?v=oOuiwo_Qbd8

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
});