W31Y16 – Twitter REST API, Speech recognition for your web app, Angular DOM loaded and nice web switch animation

Twitter REST API

One of the REST API that I very like simply because it’s well explained, with samples, etc. The official Twitter REST API. If you would like to use it on a web project using NodeJS, there’s the plugin you need, twit.

Before using the Twitter API, you need to follow some instructions for the app creation but it’s pretty simple… Here, I found a good tutorial or on the official documentation.

An example of use if you want to make a search about the word “android”

var Twit = require('twit');

var T = new Twit({
  consumer_key:         '...',
  consumer_secret:      '...',
  access_token:         '...',
  access_token_secret:  '...',
  timeout_ms:           60*1000,  // optional HTTP request timeout to apply to all requests.
});

T.get('search/tweets', { q: 'android', count: 100 }, function(err, data, response) {
  console.log(data);
});

Speech recognition

If you want to make your web app more interactive, just add the annyang library to your project! It allows you to call your actions with the voice instead of clicking buttons. For exmaple, if you have to control. Just test to the online demo. Import the lib and add your own commands is pretty simple… just take a look.

Import the lib

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.4.0/annyang.min.js"></script>

Implement your own commands

var commands = {
  'go to google': function() {
    redirect('http://google.com');
  }
};
annyang.addCommands(commands);
annyang.start();

You have some additional options like debug or language settings who could be very useful to see what is really captured and be more precise.

annyang.debug();
annyang.setLanguage('en');

Angular, DOM loaded ?

For some reasons, you need to know when your DOM is loaded to start actions, right? The easiest solution to do this with Angular is to add the code below in the controller of your view. As you can see, the controller will print in the console and the loader will be hidden.

// Execute after DOM loaded
angular.element(document).ready(function () {
    console.log('loading finished');
    $('#loading').hide();
});

Design of the week

I love this animation designed by Oleg Frolov. It would be nice to implement this to switch a night/light mode for an interface for example… The source code is available here, let me some minutes to add it in my own project! 🙂

enable

And now, holidays:

  • Translate My Sheet update
  • DIY projects.