W38Y16 – Setting up ADB on OSX, Android app icons generation, catch key press with Angular & DIY french webserie

Set up adb on Mac OSX

ADB is the command line tool to manage your Android phone and so install and run apps or different ROMs for example. Setting up ADB on Mac OSX is not quite easy and I lost time to configure it, so the line below will help you if you have to set it.

echo 'export PATH=$PATH:/Users/[yourusername]/android-sdks/platform-tools/' >> ~/.bash_profile

Generate icons Android app

Link Launcher icons for Android apps are requested to be in several formats, and you’ll spent a lot of time if you want to build them in all the sizes. Here, you can find a tool from Roman Nurik where you just have to upload your image in a good format (512×512 minimum I think), and it will generate it for you in all those formats:

xxxhdpi
xxhdpi
xhdpi
hdpi
mdpi
web
hi-res

In addition, you can add some effects like square, circle, vertical/horizontal rectangle etc. Try it!

Bring life to TextView

Yes, it’s possible and it’s very nice! Thanks to HTextView, you can add some animation effects to your TextView fields. You only have to add the lib dependency to your project:

compile 'hanks.xyz:htextview-library:0.1.5'

and add the element to your xml layout:

<com.hanks.htextview.HTextView
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#000000"
    android:gravity="center"
    android:textColor="#FFFFFF"
    android:textSize="30sp"
    htext:animateType="anvil"
    htext:fontAsset="fonts/font-name.ttf" />

You can find HERE, the github repository to this project hosted by hanks-zyh. Star and share it to your network!

Catch key press with Angular

If you want to provide some assistance using keyboard shortcuts in your web app (using Angular as front-end framework), I recommand to use a bower library called angular-keypress (you can find the Github repo HERE). Get it from bower:

bower install --save angular-keyboard-shortcuts

Use it simply like this:

<a ng-click="goToPreferences()" keyboard-shortcut="control+,">Preferences</a>
<a ng-click="openSettings()" keyboard-shortcut="s">Open Settings</a>

Very useful and enjoyable for users, really.

DIY French webserie

A short webserie (8 episodes) about DIY projects is proposed by Arte. It’s called “Fais-le toi-même” and it’s about creativity and inventions by makers. If you are passionate by Arduino and RaspberryPi stuffs or simply curious about it, go to check it!

All episodes are available HERE

One Week Of Hits – Prenez en main les tâches qui trainent!

Have an accomplishment to report every day

Après avoir lu le livre de Chad Fowler, « The Passionate Programmer » qui récapitule un ensemble d’anecdotes, de bonnes pratiques et de résolutions pour les développeurs – un passage a retenu mon attention.

Ce passage parle d’une méthodologie qui consiste à se fixer un but journalier : prendre en main les tâches qui trainent et qui vont vous faire gagner un temps fou! Vous allez donc “faire bouger” UNE TÂCHE QUI TRAÎNE au sein de votre équipe CHAQUE JOUR. Vous savez les trucs qui traînent, que personne n’a encore pris le temps de terminer (où même de commencer d’ailleurs…).

Vous allez les prendre en main!

Etape 1 : Isoler

Pour commencer, il faut bloquer 30 minutes en fin de semaine (le vendredi par exemple) et se mettre dans une salle avec une feuille + un stylo : rien de plus! (ne soyez pas interrompu et ne quittez pas la salle avant 30 min)

Etape 2 : Lister

Pendant les 30 minutes vous allez lister toutes les choses qui pourraient améliorer votre quotidien et celui de votre équipe (pensez aux choses qui sont relevées lors de vos scrum meetings par exemple). Pensez aux tâches qui feraient gagner du temps chaque jour et que personne n’a encore eu le temps ou l’énergie de développer (« ça serait cool d’automatiser ça… », « il faudrait cleaner ça… », etc.)

Etape 3 : Evaluer

Maintenant que vous avez une bonne liste de tâches rébarbatives, il va falloir les coster en fonction de leur « gain productivité / coût de développement ». Les tâches qui ont le meilleur ratio doivent être planifiées pour la semaine à venir (c’est évident :))

Etape 4 : Affecter

Les 5 premières tâches doivent être affectées à chacun des jours de la semaine. Par exemple:

Lundi – Automatiser la build!
Mardi – Ecrire des tests sur le resultset
Mercredi – Clean dépendances projet
Jeudi – Script déploiement de la web app
Vendredi – Fix des warnings de la compilation

Etape 5 : Agir

Voilà, votre planning est prêt! Le lundi d’après, vous allez prendre la première tâche de la liste et agir – Bien sûr, pas la peine de passer des heures dessus et de réaliser la tâche en entier, il faut simplement que ça bouge! Qu’il se passe quelque chose et que vous soyez actif au sein de votre équipe et pas seulement sur les tâches auxquelles on vous attend.

Le dépassement des objectifs est un très bon facteur de progression à tous points ; il faut alors communiquer sur les efforts réalisés, se rendre visible, et puis c’est tout naturellement que vous deviendrez une référence.

Une application ?

Et puis sinon, j’ai pensé à en faire une application (Android ou Chrome, je ne sais pas encore) puisque d’après mes recherches ça n’existe pas encore. Si quelqu’un est intéressé pour donner un coup de main au dev, je peux partager le repo Github une fois qu’il sera lancé.

La FNAC, viens prendre ton bonnet d’âne du SAV

En novembre 2015, j’ai fait l’erreur d’acheter le dernier Google Nexus 5X qui venait de sortir sur le site de la FNAC au lieu de le commander sur le Play Store, pour profiter du retrait en magasin dans les jours à venir au lieu d’attendre l’importation des US qui allait durer plus longtemps… jusque là j’étais plutôt content… mais maintenant que le téléphone a un problème et ne s’allume plus (ça peut arriver, pas de soucis de ce côté là), je me rends compte de l’importance que peut avoir un SAV au moment de l’achat…

Eh oui, on est en 2016 et vous savez quoi ? Les entreprises qui se foutent du “service client” existent encore et la FNAC en est une! Ils ont un pseudo-monopole et ils se permettent donc de négliger l’après-vente. Ils vendent et après y’a plus personne, en cas de problème, c’est l’enfer.

A titre de comparaison et pour mieux comprendre le retard de service qu’ils ont, voilà le SAV Google vs le SAV Fnac concernant la prise en charge, le prêt, le niveau d’information etc. pour un Nexus 5X.

	Fnac	Google
Prise en charge	NON, à ramener en magasin	OUI, retrait à domicile gratuit
Test(s)	NON, emballage, feuille à signer, au revoir	OUI, plusieurs tests/manipulations par téléphone
Prêt de matériel	NON, “ah nan désolé, on n’a pas”	OUI, prêt téléphone identique au moment du retrait de l’appareil défectueux
Feedback/Statut	NON, après 15 jours, toujours aucune nouvelle	JE NE SAIS PAS

En gros :

Délai interminable
Prêt de matériel ? Connais pas
Des infos sur le statut de la réparation ? On s’en fout il a déjà payé
etc.

UNE VRAI BOITE NOIRE LEUR SAV!

Avant de faire cet article, j’ai remonté mon mécontentement et le mauvais service après-vente de leur enseigne mais aucune nouvelle de leur part. Ils ont autre chose à faire.

Et quand je vois le nombre de gens frustrés par un tel service après-vente, je me dis qu’il y a réellement un problème…

Set up Google Cloud Platform + MEAN stack in 5mins

I believe in Google products, so it’s thus quite naturally that I use Google Cloud Platform to host my websites, apps, etc. GCP proposes a lot of pre-configured images for all your needs: blog, os, database, crm, or developer tools and infra like:

Jenkins
GitLab
Trac
NodeJS
MEAN
MySQL
Ruby
Cassandra

Images are delivered with all the tools you need to work efficiently! For example, the MEAN stack came with MongoDB, NodeJS, Express, Git, etc.

Well 🙂

But, a little configuration is needed to make your app listening on your custom port (3000 for example)

Steps

Launch your server SSH console from Google Cloud Platform (Bitnami)
Clone the project under /home/user/apps/
Open up port 3000 in your Google Compute Network Firewall : Your VMs > Edit > Network > Click on default
Launch your own project on port 3000 (using your favorite grunt/node server command) and test if http://SERVER_IP:3000 works ? If it’s OK, go to step 5
Edit the file opt/bitnami/apache2/conf/bitnami/bitnami.conf and replace the content with the configuration below (it’s only a proxy pass to route your server to the 3000 port)

Virtual Host Configuration

    <IfVersion < 2.3 >
      NameVirtualHost *:80
      NameVirtualHost *:443
    </IfVersion>

    <VirtualHost _default_:80>
    #  DocumentRoot "/opt/bitnami/apache2/htdocs"
    #  <Directory "/opt/bitnami/apache2/htdocs">
    #    Options FollowSymLinks MultiViews
    #    AddLanguage en en
    #    LanguagePriority en
    #    ForceLanguagePriority Prefer Fallback

    #    AllowOverride All
    #    <IfVersion < 2.3 >
    #      Order allow,deny                          
    #      Allow from all
    #    </IfVersion>
    #    <IfVersion >= 2.3 >
    #      Require all granted
    #    </IfVersion>
    #  </Directory>

    # Error Documents
      ErrorDocument 503 /503.html

    # Bitnami applications installed with a prefix URL (default)
    #  Include "/opt/bitnami/apache2/conf/bitnami/bitnami-apps-prefix.conf"

    # Redirect to port 3000 (proxy pass)
      ServerAdmin youremail@gmail.com
      ServerName yourservername.fr
      ProxyPass / http://localhost:3000/
      ProxyPassReverse / http://localhost:3000/
      ProxyPreserveHost On

    </VirtualHost>

    # Default SSL Virtual Host configuration.

    <IfModule !ssl_module>
      LoadModule ssl_module modules/mod_ssl.so
    </IfModule>

    Listen 443
    SSLProtocol all -SSLv2 -SSLv3
    SSLHonorCipherOrder on
    SSLCipherSuite "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !EDH !RC4"
    SSLPassPhraseDialog  builtin
    SSLSessionCache "shmcb:/opt/bitnami/apache2/logs/ssl_scache(512000)"
    SSLSessionCacheTimeout  300

    <VirtualHost _default_:443>
      DocumentRoot "/opt/bitnami/apache2/htdocs"
      SSLEngine on
    SSLCertificateFile "/opt/bitnami/apache2/conf/server.crt"
    SSLCertificateKeyFile "/opt/bitnami/apache2/conf/server.key"

      <Directory "/opt/bitnami/apache2/htdocs">
        Options FollowSymLinks MultiViews
        AddLanguage en en
        LanguagePriority en
        ForceLanguagePriority Prefer Fallback
        AllowOverride All
        <IfVersion < 2.3 >
          Order allow,deny                          
          Allow from all
        </IfVersion>
        <IfVersion >= 2.3 >
          Require all granted
        </IfVersion>
      </Directory>
      # Error Documents
      ErrorDocument 503 /503.html

      # Bitnami applications installed with a prefix URL (default)
      Include "/opt/bitnami/apache2/conf/bitnami/bitnami-apps-prefix.conf"
    </VirtualHost>
    # Bitnami applications that uses virtual host configuration
    Include "/opt/bitnami/apache2/conf/bitnami/bitnami-apps-vhosts.conf"
    # Status
    ExtendedStatus on
    <VirtualHost _default_:80>
    ServerName local-stackdriver-agent.stackdriver.com
    <Location /server-status>
      SetHandler server-status
      Order deny,allow
      Deny from all
      Allow from 127.0.0.1
    </Location>
    </VirtualHost>

Restart apache with this command sudo /opt/bitnami/ctlscript.sh restart apache
Now check your server IP in your favorite browser (chrome probably?), and your project should run there.

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! 🙂

And now, holidays:

Translate My Sheet update
DIY projects.

First
«
1
2
3
4
5
6
»
Last