Why mastering Vanilla JS is important before learning any other JS frameworks?

1)If you don’t know the underlying principles of the web, you’ll eventually hit a wall thanks to the evolution of the language itself and the constant arrival of new frameworks.

2)Knowing pure JS will make you a key engineer who can solve complex problems (reason before frantic searching).

3)It’ll make you versatile and productive, both on the front-end and back-end.

4)It’ll give you the toolset to innovate, not just execute.

5)It’ll guide you on when to use a framework or not.

6)It’ll give you a better general understanding of how browsers and computers work.

http://vanilla-js.com/

Advertisements

use ‘strict’ features on JavaScript

List of features (non-exhaustive)

  1. Disallows global variables. (Catches missing var declarations and typos in variable names)
  2. Silent failing assignments will throw error in strict mode (assigning NaN = 5;)
  3. Attempts to delete undeletable properties will throw (delete Object.prototype)
  4. Requires all property names in an object literal to be unique (var x = {x1: "1", x1: "2"})
  5. Function parameter names must be unique (function sum (x, x) {...})
  6. Forbids octal syntax (var x = 023; some devs assume wrongly that a preceding zero does nothing to change the number.)
  7. Forbids the with keyword
  8. eval in strict mode does not introduce new variables
  9. Forbids deleting plain names (delete x;)
  10. Forbids binding or assignment of the names eval and arguments in any form
  11. Strict mode does not alias properties of the arguments object with the formal parameters. (i.e. in function sum (a,b) { return arguments[0] + b;} This works because arguments[0]is bound to a and so on. )
  12. arguments.callee is not supported

Image previews using base64 – Javascript

var fileUpload = document.querySelector('input[type=file]');
var file    = fileUpload.files[0];
var preview = $('.uploaded_file') // img tag
var reader  = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
   preview.src = reader.result // it will set the base64 src to img tag
}

// Be-Aware of browser supports (https://developer.mozilla.org/en/docs/Web/API/FileReader)

Javascript – Object watch (on all browsers)

Javascript’s object.watch is a function which tends to work only on Firefox.. How do we make it work on other browsers? Below is the code snippet to achieve this:-

 

Common JS Snippet for making object.watch to work on all browsers

if (!Object.prototype.watch) {
Object.defineProperty(Object.prototype, “watch”, {
enumerable: false
, configurable: true
, writable: false
, value: function (prop, handler) {
var
oldval = this[prop]
, newval = oldval
, getter = function () {
return newval;
}
, setter = function (val) {
oldval = newval;
return newval = handler.call(this, prop, oldval, val);
}
;

if (delete this[prop]) { // can’t watch constants
Object.defineProperty(this, prop, {
get: getter
, set: setter
, enumerable: true
, configurable: true
});
}
}
});
}

// object.unwatch
if (!Object.prototype.unwatch) {
Object.defineProperty(Object.prototype, “unwatch”, {
enumerable: false
, configurable: true
, writable: false
, value: function (prop) {
var val = this[prop];
delete this[prop]; // remove accessors
this[prop] = val;
}
});
}

 

Code Example:-

//Create an object and assign a initial value

var my_object = { blog_name:  “selvaonrails.wordpress.com” };

//Adding listener (watcher)

my_object.watch(‘blog_name‘, function (id, oldval, newval) {
console.log(‘my_object.’ + id + ‘ changed from ‘ + oldval + ‘ to ‘ + newval);
return newval;
});

Now changing the value of blog_name will print the console statement:-

my_object.blog_name=”SelvaOnRails”

Keyboard Shortcuts using JQuery

Again it is very simple, looks you to feel like a magician if you are done. Just follow the steps :-

Download the shortcut.js file and include it in your layout or view file

http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

<%= javascript_include_tag ‘shortcut’ %>

Then, add the following lines in the layout or view file where you want the keyboard shortcut to work on

shortcut.add(“e”,function() {
        short_modal2(‘/chats’);
 },{‘disable_in_input’ : true});

disable_in_input: true will make sure the shortcut key ‘e’ won’t work when the user is on input field like textbox and textarea. Default is false.

shortcut.add(“Shift+T”,function() {
short_modal1(‘/tasks/new’);
}
);

For adding a shortcut which is already a shortcut key on a browser like ‘/’, ‘Ctrl + F’, ‘Ctrl + S’ etc…,

shortcut.add(“/”,function() {
    $(‘.keyboard-shortcuts’).css(‘display’,’none’);
 },{‘type’: ‘keydown’, ‘propagate’:false, ‘target’:document
,’keycode’ : 191,’disable_in_input’ : true});

The following are the valid keys (you can also make the combination of any two keys from below) :-

  • All alpha/numeric keys – abc…xyz,01..89
  • Special Characters – Every special character on a standard keyboard can be accessed.
  • Special Keys…
    • Tab
    • Space
    • Return
    • Enter
    • Backspace
    • Scroll_lock
    • Caps_lock
    • Num_lock
    • Pause
    • Insert
    • Home
    • Delete
    • End
    • Page_up
    • Page_down
    • Left
    • Up
    • Right
    • Down
    • F1
    • F2
    • F3
    • F4
    • F5
    • F6
    • F7
    • F8
    • F9
    • F10
    • F11
    • F12

That’s it. Rock the world…

Comparition of Adopting Unobstructive Javascript and XSS in Rails 2 & 3

Cross-Site-Scripting in Rails 2

<%= @post.body %> –> Unsafe
<%= h @post.body %> –> Safe

Cross-Site-Scripting in Rails 3

<%= @post.body %> –> Safe
<%= raw @post.body %> –> Unsafe

Adopting Unobstructive Javascript
Example 1 :

Rails 2:

<%= link_to_remote ‘Show’, :url => post %>

Will generate a HTML like,
“<a href=”#” onclick=”new Ajax.Request(‘/posts/1′, {asynchronous:true,
evalScripts:true, parameters:’authenticity_token=’ +
encodeURIComponent(‘9sk..44d’)}); return false;”>Show</a>”
Rails 3:

<%= link_to ‘Show’, post, :remote => true %>

Will generate a HTML like,
“<a href=”/posts/1″ data-remote=”true”>Show</a>”

Example 2 :

Rails 2:

<% remote_form_for(@post) do |f| %>

Will generate a HTML like,
“<form action=”/posts” id=”new_post” method=”post”
onsubmit=”new Ajax.Request(‘/posts’, {asynchronous:true,
evalScripts:true, parameters:Form.serialize(this)}); return false;”>”
Rails 3:

<% form_for(@post, :remote => true) do |f| %>

Will generate a HTML like,
“<form action=”/posts” data-remote=”true” id=”new_post” method=”post”>”

Example 3 :

Rails 2 & 3:

<%= link_to ‘Destroy’, post, :method => :delete %>

Will generate a HTML like this for Rails 2,
“<a href=”/posts/1″ onclick=”var f = document.createElement(‘form’); f.style.display = ‘none’;
this.parentNode.appendChild(f); f.method = ‘POST’; f.action = this.href;var m =
document.createElement(‘input’); m.setAttribute(‘type’, ‘hidden’); m.setAttribute(‘name’, ‘_method’);
m.setAttribute(‘value’, ‘delete’); f.appendChild(m);var s = document.createElement(‘input’);
s.setAttribute(‘type’, ‘hidden’); s.setAttribute(‘name’, ‘authenticity_token’); s.setAttribute(‘value’,
‘9skdJ0k+l9/q3PWToz6MtfyiB2gcyhnKubeGV6WFL44=’); f.appendChild(s);f.submit();return false;”>Destroy</a>”

And Will generate a HTML like this in Rails 3,
“<a href=”/posts/1″ data-method=”delete” rel=”nofollow”>Destroy</a>”

Example 4 :

Rails 2 & 3:

<%= link_to ‘Destroy’, post, :confirm => ‘Are you sure?’, :method => :delete %>

Will generate a HTML like this for Rails 2,
“<a href=”/posts/1″ onclick=”if (confirm(‘Are you sure?’)) { var f = document.createElement(‘form’);
f.style.display = ‘none’; this.parentNode.appendChild(f); f.method = ‘POST’; f.action = this.href;var m =
document.createElement(‘input’); m.setAttribute(‘type’, ‘hidden’); m.setAttribute(‘name’, ‘_method’);
m.setAttribute(‘value’, ‘delete’); f.appendChild(m);var s = document.createElement(‘input’);
s.setAttribute(‘type’, ‘hidden’); s.setAttribute(‘name’, ‘authenticity_token’); s.setAttribute(‘value’,
‘9skdJ0k+l9/q3PWToz6MtfyiB2gcyhnKubeGV6WFL44=’); f.appendChild(s);f.submit(); };return false;”>Destroy</a>”

And Will generate a HTML like this in Rails 3,
“<a href=”/posts/1″ data-confirm=”Are you sure?” data-method=”delete” rel=”nofollow”>Destroy</a>”

Example 5 :

Rails 2 :

<%= f.submit ‘Create Post’, :disable_with => “Please wait…” %>

Will generate a HTML like ,
“<input id=”post_submit” name=”commit” onclick=”if (window.hiddenCommit)
{ window.hiddenCommit.setAttribute(‘value’, this.value); }else { hiddenCommit =
document.createElement(‘input’);hiddenCommit.type = ‘hidden’;hiddenCommit.value =
this.value;hiddenCommit.name =
this.name;this.form.appendChild(hiddenCommit); }this.setAttribute(‘originalValue’,
this.value);this.disabled = true;this.value=’Please wait…’;result =
(this.form.onsubmit ? (this.form.onsubmit() ? this.form.submit() : false) :
this.form.submit());if (result == false) { this.value =
this.getAttribute(‘originalValue’);this.disabled = false; }return result;” type=”submit”
value=”Create Post” />”

Rails 3 :

<%= f.submit :disable_with => “Please wait…” %>

Will generate a HTML like ,

“<input data-disable-with=”Please wait…”
id=”post_submit” name=”commit” type=”submit” value=”Create Post” />”