The rise of ECMAScript – Goodbye 2015

What is ECMAScript?

toptal-blog-image-1435169544237-7137138c9b6badce17ca1e6094598255

As per Wiki-  ECMAScript(European Computer Manufacturers Association) is a trademarked [1] scripting language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. We use various implementations of ECMAScript for client side scripting on web. Examples are JavaScript, ActionScript and Jscript.

ECMAScript was developed by Brendan Eich- Father of JavaScript. It was named Mocha, then Livescript and finally JavaScript.

ECMAScript7: The rise of compilers

babel

After ES6 (2015), there was huge rise in number of developers switching from traditional way of writing JavaScript to start using compiled code generators. Compiled code generators compiles code written in other languages to JavaScript. Our favourite JS code compiler is Babel(https://babeljs.io/) as it is actively supporting ES7 (ECMAScript 2016). For example Babel compiles following code:

const input = [1, 2, 3];
console.log(input.map(item => item + 1)); // [2, 3, 4]

to

var input = [1, 2, 3];
console.log(input.map(function (item) {
return item + 1;
})); // [2, 3, 4]

which will run in any JavaScript environment.

 

Some more examples are Opal(http://opalrb.org/) for Ruby, Pyjamas(http://pyjs.org/) for Python, Perlito(https://github.com/fglock/Perlito) for Perl, j2js(https://github.com/decatur/j2js-compiler) for Java, Blade(https://github.com/vannatech/blade) for C# and so on.

Gulp and Grunt: Automate your workflows

gulp-grunt

Measuring programming progress by lines of code is like measuring aircraft building progress by weight. – Bill Gates

With active usage of tools like Gulp and Grunt companies and developers started automating workflows for JavaScript applications. These tools helped developers in doing lot of automated tasks like library upgrade, automated testing, folder structure creation and so on. If you didn’t use Gulp and Grunt in your projects till now and make a New Year resolution to automate your build process and automate JavaScript tasks for an easier life.

The incredible Node.JS

node

Node.js foundation grew to more than 3 million users. Companies like Intel, IBM and Joyent used Node.js to create software architectures, real-time location tracking services and IoT. With npm lives of developers became lot easier as they could do a lot of heavy architecture creation using CLI. Also I heard companies switching from traditional Java/PHP technology stack to next gen Node.js for their active products.

How rise of ECMAScript revolutionized cross-platform apps

This year we saw a lot of people moving from native to cross-platform and vice versa. Keeping same codebase across all platforms helped companies and developers to launch their products in really less time when compared to writing code in different languages for each platform. With tools like npm creating a Cordova application became one liner.

</pre>
$ cordova create hello2016 com.example.hello2016 Hello2016
<pre>

We can’t wait to see what ECMAScript7 will bring in for developers working on IoT and next generation apps in 2016. Wishing all readers Techie-Happy New Year.

Advertisements

Video Advertising: Tips, how to play and pause YouTube videos on scroll and story behind Adele’s Hello

A lot of start-up advertisers and enthusiasts ask me about importance of video advertising. Recently, I met one friend who wanted to embed video ads in his app and website, the kind of ads you see on Gaana.com or auto play videos on Facebook which auto start and pause when you scroll.

Businesses also ask what kind of videos will work for their business. Here are few tips.

  1. Shorter is better – watch trailer before you go for movie

    length-matters-2
    Video length significantly determines how many people are going to watch your video. Just like you prefer to watch movie’s trailer before planning to spend 2 hours to watch entire movie, people prefer to watch 30 seconds trailer about your business, if they like the trailer they will definitely watch 30 mins video about your business and maybe turn to your loyal customers.

  2. Quality of video – short creative motivating story

    After length its quality of video that you are putting on your website or app. A short creative story that motivates customers to go for your business rather than other players in market is the key.
    online-video-marketing

  3. Viral – market your video using various channels

    This is one term that is viral over internet. I remember when people used to share videos over email, when YouTube was not there. “The Spirit of Christmas” was distributed over email and it led to creation of adult comedy animation series “South Park”. Now you have got lot of channels like YouTube, Facebook, Twitter and other social media platforms. Utilize them well.
    going-viral007

I feel, video advertising is in huge demand right now but there is no inventory. There are a lot of online tools that you can use to create good videos for your business. I am pasting small list here.

Now let’s go core technical and play and pause a YouTube video on scroll.

  1. In your script tag load the iframe Player API code asynchronously
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var &lt;span class="mceItemHidden" data-mce-bogus="1"&gt;&lt;span class="hiddenSpellError" pre="var " data-mce-bogus="1"&gt;firstScriptTag&lt;/span&gt;&lt;/span&gt; = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  2. after the API code downloads, create a YouTube Player
    var player;
    function &lt;span class="mceItemHidden" data-mce-bogus="1"&gt;&lt;span class="hiddenSpellError" pre="function " data-mce-bogus="1"&gt;onYouTubeIframeAPIReady&lt;/span&gt;&lt;/span&gt;() {
    player = new YT.Player('player', {
    height: '390',
    width: '640',
    &lt;span class="hiddenSpellError" pre="" data-mce-bogus="1"&gt;videoId&lt;/span&gt;: '&lt;span class="hiddenSpellError" pre="" data-mce-bogus="1"&gt;769SeL9QiFw&lt;/span&gt;',
    events: {
    '&lt;span class="hiddenSpellError" pre="" data-mce-bogus="1"&gt;onReady&lt;/span&gt;': &lt;span class="hiddenSpellError" pre="" data-mce-bogus="1"&gt;onPlayerReady&lt;/span&gt;,
    '&lt;span class="hiddenSpellError" pre="" data-mce-bogus="1"&gt;onStateChange&lt;/span&gt;': &lt;span class="hiddenSpellError" pre="" data-mce-bogus="1"&gt;onPlayerStateChange&lt;/span&gt;
    }
    });
    }
  3. On player ready set window.onscroll to check for video position on scroll
    function &lt;span class="mceItemHidden" data-mce-bogus="1"&gt;&lt;span class="hiddenSpellError" pre="function " data-mce-bogus="1"&gt;onPlayerReady&lt;/span&gt;&lt;/span&gt;(event) {
    window.onscroll = function() {&lt;span class="hiddenSpellError" pre="function " data-mce-bogus="1"&gt;checkIfToPlayVideo&lt;/span&gt;()};
    }
  4. Check scroll position and play pause video
    function &lt;span class="mceItemHidden" data-mce-bogus="1"&gt;&lt;span class="hiddenSpellError" pre="" data-mce-bogus="1"&gt;checkIfToPlayVideo&lt;/span&gt;&lt;/span&gt;(){
    if(window.pageYOffset&amp;amp;amp;gt;200){
    player.playVideo();
    }
    else if(window.pageYOffset&amp;amp;amp;lt;200){
    player.pauseVideo();
    }
    //console.log(window.screenY);
    }
  5. Add div that will get replaced by YouTube iframe
    
    
    &amp;lt;div style="height:&lt;span class="mceItemHidden" data-mce-bogus="1"&gt;&lt;span class="hiddenSpellError" pre="" data-mce-bogus="1"&gt;800px</span></span>;position:relative;"&gt;&amp;<span class="hiddenSpellError" pre="" data-mce-bogus="1">nbsp</span>;
    <h1>Scroll down to play Video</h1>
    
    
    
    <div id="player"></div>
    
    
    <div style="height:800px;position:relative;">&nbsp;
    <h1>Scroll to top to pause Video</h1>
    </div>
    
    
    

    Great, you created Facebook like video experience. You can manipulate viewport based on your requirements. You can also check live demo here.

    Story behind Adele’s latest hit ‘Hello’

    There were rumours that Adele wrote this song after her breakup. As per her official interview if she would have written ‘Hello’ for her lost love it would be full of pain. But this video was not intended to be on ‘dark side’. The other side is not dark. There was a girl in her 20’s going through bad phase and people called her immature, emotionally stable on social media and compared her to Taylor Swift and there is a mature lady writing from a place out of her comfort zone and singing ‘Hello from the other side’.

    Happy Advertising and Coding! Enjoy ‘Hello’ in demo.

Image copyrights
http://wistia.com/
http://emarketingblog.nl
http://crispvideo.com

Advanced Javascript: Introduction To Server Side Javascript Using Meteor

Server Side Javascript has come long way, and after launch of Node.js in July 2011 gained lot of popularity as idea of using same language on client and server bought in code and software architecture uniformity in software applications. Even though Brendan Neich‘s Netscape already had vision to use same programming language on client and server but at that time people were using Pentium I/II processors which were not powerful enough to support Javascript Interpreters. In case you don’t know Brendan Neich he’s creator of Javascript and co-founder of Mozilla. In present generation of more than 2 billion smartphones you can get Phone with 1.2 GHz processor for less than $40. Seeing boom in processing speed of devices software developers started integrating Javascript interpreters like SpiderMonkey & Rhino in their applications. Some started using Jaxter server that embeds entire Mozilla Firefox Browser Engine in web server giving access to Ajax and Javascript within application.

Now when we have brief history of Javascript let me explain how to setup Meteor and create a simple server side Javascript application.

Go to this link and install Meteor.

Once you are done with setup go to command like and create a directory named bluefish if you would like to follow remaining series of tutorial.

Nikhils-MacBook-Pro:bluefish nikhil$ meteor create bluefish
Created a new Meteor app in 'bluefish'.
Nikhils-MacBook-Pro:bluefish nikhil$ cd bluefish/
Nikhils-MacBook-Pro:bluefish nikhil$ meteor
Started proxy.
Started MongoDB.
Started your app.  
App running at: http://localhost:3000/

Screen Shot 2015-10-24 at 4.10.07 pm Screen Shot 2015-10-24 at 4.16.08 pm

Now navigate to http://localhost:3000/ and if everything if fine you will see following webpage-
Screen Shot 2015-10-24 at 5.07.16 pm

Now you can use your favourite code editor to change HTML and CSS and see if changes are getting reflected in your application without refreshing browser. If you can see updated HTML in your browser, congrats you deployed your first Javacsript Server Side Application. It’s called hot code push.

Now lets dig in a little and make our first bluefish list.

Edit your HTML and change it to

<head>
  <title>bluefish!</title>
</head>
 
<body>
  <div class="container">
    <header>
      <h1>bluefish!</h1>
    </header>
 
    <ul>
      {{#each fishes}}
        {{> fish}}
      {{/each}}
    </ul>
  </div>
</body>
 
<template name="fish">
  <li><img src={{imageurl}} height="80" width="100"/>{{text}}</li>

</template>

Change your Javascript to

if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    fishes: [
      { text: "pygmy angelfish",imageurl:"http://www.seascapestudio.net/reference/fishes/centropyge_argi.jpg" },
      { text: "blue dot grouper",imageurl:"http://www.richard-seaman.com/Underwater/Egypt/Highlights/PeacockGrouper.jpg" },
      { text: "blue line grouper",imageurl:"http://www.aquariumdomain.com/images/fish_marine/grouper_blueline2.jpg" },
      {text:  "teira batfish",imageurl:"http://www.aquariumdomain.com/images/fish_marine/tieraBatfish8.jpg"},
      {text:  "convict blenny",imageurl:"http://www.roslyndakin.com/wp-content/uploads/2011/01/convictadult.jpg"}
    ]
  });
}

You can write your custom styling in CSS file.

Screen Shot 2015-10-24 at 5.02.14 pm

For further information, visit https://www.meteor.com/tutorials/ or wait for next chapter of tutorial. Happy coding!

Image credits-

http://www.seascapestudio.net/
http://www.richard-seaman.com/
http://www.aquariumdomain.com/
http://www.aquariumdomain.com/
http://www.roslyndakin.com/

References-
https://developer.mozilla.org/ja/docs/Web/JavaScript/Server-Side_JavaScript
https://www.meteor.com/