W28Y16 – Fibonacci implementation, compare JS UI frameworks performance, Android viz libraries and Hungarian notation

Fibonacci implementation

Why fibonacci ? Hum, juste because I was asked for this on my last interview and I stupidly failed with it… So, you’ll two different ways of implementing this algorithm:

  • recursive
  • iterative

The first one (recursive), is more elegant but not performant for big numbers (in fact, you’ll crash your memory by doing a recursive fibo for a number like 10000). The second one is in basic iterative loop do/while.

Mathmatics fonction: fibonacci(x) = fibonacci(x-1) + fibonacci(x-2)

Recursive

function fibonacci(n) {
  if (n < 2) {
    return 1;
  } else {
    return fibonacci(n - 2) + fibonacci(n - 1);
  }
}

Iterative

function fibonacci(n) {
  var a = 0, b = 1, f = 1;
  for(var i = 2; i <= n; i++) {
    f = a + b;
    a = b;
    b = f;
  }
  return f;
}

The fibo implementation in a looooot of different languages: http://www.scriptol.fr/programmation/fibonacci.php

JS UI framework perfs

ui_frameworks_comparison My colleague Justin (the tech surveillance killer) just sent me a nice repo about the comparaison most famous UI frameworks you could find. This dashboard allows you to decide regarding performances on:

  • rows creation
  • rows upodating
  • partial rows updating
  • selection of rows
  • swapping
  • etc, etc…

Just follow this link to see the comparison: HERE
And here to see the github repository: HERE

Hungarian notation

The Hungarian notation is very useful for languages with a loosely type like Javascript. This notation method is also used like an identifier to know the expected type of the variable. Some examples of naming variables using this convention:

  • bBusy : boolean
  • chInitial : char
  • cApples : count of items
  • fBusy : float (or flag)
  • nSize : integer (Systems) or count (Apps)
  • iSize : integer (Systems) or index (Apps)
  • dbPi : double (Systems)
  • rgStudents : array, or rangee
  • fnFunction : function name

Wikipedia about Hungarian notation

Android chart/viz libraries

I just tested two different Android chart/viz libraries from this github repo who regroups a good exhaustive list of viz libraries for a lot a languages (including Android of course)

HelloCharts

Very good if you only want to show some column charts, bar charts, lines charts, donuts. Charts are highly customizable :

  • fonts
  • sizes
  • colors (lines, points, axes, …)
  • background
  • with/without points
  • filled spaces
  • etc, etc…

HelloCharts Github Repository

I’ll stress a point, you don’t have any legends for your charts! that’s important because if you want one, you want need to create it manually…

MPAndroidChart

I’ve got some problems while adding MPAndroidChart as a dependency to my Android project, so I switched to HelloCharts. Maybe the wiki was deprecated, in the middle of a new version ?… I don’t know.
Anyway, this library is more complete, and maybe better, so if you are successful on adding this lib to your project: use it!

Animation concept

Nice animation concept by Mario Wahl that you can find on Dribbble.

Because code without design is not really usable, I’ll share, in each weekly article, a design creation that I liked (icon, animation, UI, workflow, …).

preview

W27Y16 – Inbox, Android Studio, Gradle, Chrome shortcuts, Markdown anchors and more.

That’s a transition for my blog: from now, articles will be written in English! (sorry for all the English langage mistakes, it’s the beginning).

Number of different topics for this week: 6

Shortcuts to topics
Prevent the Gmail to Inbox redirection
Chrome useful shortcuts : new / close tabs
Hum, build.gradle problem
Retrieve the dimensions for an SVG element
Use a custom font in your Android app
Anchors in your markdown file

Prevent the Gmail to Inbox redirection

bringbackgmail I was unpleasantly surprise to see that my Gmail account was redirected automatically to Inbox, without my knowing! To prevent this behaviour, you have to go to your Inbox page, in the left panel select “Settings” et uncheck the automatic redirection Redirect Gmail to inbox.google.com.

Chrome useful shortcuts : new / close tabs

cmdplus These two shortcuts are my favorites and I use them very often with Chrome:

  • Cmd + T to open a new tab
  • Cmd + W to close the current tab

Hum, build.gradle problem

gradleversions I just get an error message at the moment I tried to launch the gradle build…

Error:(1, 1) A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.application']
> Could not create plugin of type 'AppPlugin'.

It’s simply because I’ve loaded an old project and my gradle settings had been modified without my knowing… The solution is also to change this settings:

  • Android Studio > Preferences > Build, Execution, Deployment > Gradle

Check the Use default gradle build wrapper (recommended). If the problem persist, I’ve a second solution : go to this link (http://tools.android.com/tech-docs/new-build-system) and get the latest plugin version number and edit your version number in your build.gradle file from your project (classpath ‘com.android.tools.build:gradle:2.2.0-alpha4’ for example).

Retrieve the dimensions for an SVG element

svgdimensions Easy, you only have to call the method getBBox() who returns a JSON object with all the properties you need:

  • x
  • y
  • width
  • height

An example of use…

var element = document.getElementById("box");
var elementbBox = element.getBBox();

Use a custom font in your Android app

fonts To use a custom font, it’s pretty simple. You only have to copy/paste the .tff in the assets folder from your project (this folder location is very important).
Now, you can use it in the activity class like this:

Typeface tfCustom = Typeface.createFromAsset(getAssets(),"Roboto.ttf"); 
tvHelloWorld.setTypeface(tfCustom); // tvHelloWorld is a TextView for example

A good practise is to create a subfolder “fonts” in the assets folder.

Anchors in your markdown file

anchorsmd I think that anchors in big markdown files are very interesting! The use it, first declare your html balise, for example in your H3 title like this:

<a name="myanchor"></a>

Now, add an hyperlink to the word you want to shortcut to this anchor:

[link](#myanchor)

Ajouter la commande git tree à votre terminal

Pour ceux qui utilisent l’outils de versioning Git uniquement en ligne de commande, il est parfois pratique d’avoir l’historique des commits sous forme d’arbre un peu comme c’est présenté dans les outils graphiques comme Git Extensions, SourceTree etc… Il existe la commande “git log” bien sur mais beaucoup trop verbeuse et les commits ne sont pas assez succinct, on ne voit pas les différentes branches etc… bref, c’est pas top.

Un petit “git tree” ça serait pas mal non ?

Pas de soucis, cette commande va ajouter un alias au fichier .gitignore pour qu’il utilise la commande “git tree” à bon escient.

Ouvrez votre terminal et tapez :

[javascript]
git config –global alias.tree "log –oneline –decorate –all –graph"
[/javascript]

Et maintenant tapez :

[javascript]git tree[/javascript]

C’est prêt.

Envoyer des mails en javascript avec nodemailer

Pour un projet perso qui tourne sur un stack MEAN (Mongo, Express, Angular et NodeJS), j’ai eu besoin de notifier des utilisateurs en leur envoyant un mail.

J’ai donc trouvé plusieurs librairies qui font le boulot, mais j’ai beaucoup accroché avec nodemailer qui pour moi est la plus propre et simple d’utilisation. Et d’ailleurs, avec plus de 5000 stars et 70 contributeurs sur Github ça va, c’est assez stable 🙂

Installation

Ajout de nodemailer au projet (le —save pour ajouter a dépendance au package.json)

[javascript]npm install nodemailer —save [/javascript]

Autorisation Gmail

Pour Gmail, et surement les autres aussi, il faut configurer son compte en « Bas niveau de sécurité » pour autoriser une application externe  à lire/envoyer des emails.

(pour ceux qui ne souhaitent pas baisser le niveau de sécurité, il existe d’autres alternatives)

Baisser le niveau de sécurité : https://www.google.com/settings/security/lesssecureapps

Envoyer un email

Au début du fichier, au moment des import, on ajoute une dépendance à nodemailer :

[javascript]var nodemailer = require(‘nodemailer’);[/javascript]

On crée ensuite la variable « transporter » qui contient les options de connexion et de transport pour l’envoi des emails (qu’on réutilisera à chaque envoi de mail)

[javascript]var transporter = nodemailer.createTransport(‘smtps://user%40gmail.com:password@smtp.gmail.com’);[/javascript]

Ensuite on construit l’objet JSON « mailOptions » qui contient les différents champs du mail (les symboles unicodes sont supportés!).

[javascript]var mailOptions = {
  from: ‘Joey Bronner" <mon@email.com>’,
to: ‘yourfriend@email.com, yourotherfriend@email.com’,
  subject: ‘Bonjour’,
  text: ‘Hello world’,
  html: ‘<b>Hello world</b>’
};[/javascript]

Quatre paramètres sont obligatoires et d’autres sont facultatifs:

  • from
  • to
  • subject
  • text / html

Dernière étape, l’envoi du mail!

[javascript]transporter.sendMail(mailOptions, function(error, info){
if (error) {
console.log(error);
}
console.log(‘Message sent: ‘ + info.response);
});
[/javascript]

Pleins d’options (pièces jointes, templates etc…) sont disponibles, donc si vous avez besoin d’envoyer des mails en JS, pensez à nodemailer!

Plus d’informations sur le repository Github : https://github.com/nodemailer/nodemailer

DevDocs pour regrouper et unifier toutes les dev docs de vos APIs et langages favoris

DEVDOC

Pour les utilisateurs OS X, il existe Dash. Pour ceux qui sont sous Windows/Linux il existe l’équivalent Zeal et pour ceux qui ne veulent pas installer de logiciel lourd pour la doc, il existe DevDocs que je présente dans cet article.

En quelques mots, DevDocs est un moteur de recherche pour documentation technique. Il référence plus de 70 APIs donc pas d’inquiétude, que vous soyez développeur web, mobile, backend etc… vous trouverez votre bonheur 🙂

  • AngularJS
  • Bower
  • React
  • Ruby
  • Javascript
  • Python
  • D3
  • PHP
  • C / C++
  • etc…

Les avantages

  • Interface unifiée
  • Outil de recherche intelligent
  • Rapide
  • Plus de 70 APIs/frameworks/libs disponibles
  • Mode Light/Dark

L’inconvénient

Je ne vois qu’un seul et il concerne le ‘mode offline’ puisque les documentations sauvées sont persistées dans le cache du navigateur.

Quand on développe on aime bien vider le cache pour tester un rendu sur une base propre… et ça peut donc poser problème. Si on veut utiliser ces docs hors-ligne il faut penser à les re-télécharger au cas où le cache aurait été cleané avant.

Pour info, c’est un outil fait par Thibaut Courouble, son blog : http://thibaut.me/

Pour résumer, DevDocs c’est simple, c’est propre et c’est super utile pour mes trajets en train où le WiFi n’est malheureusement pas présent.

(Merci Justin pour les liens)