Fred Hasselot

Développeur web

Chargement en cours...
Je m'appelle fred Hasselot, je développe pour le web et les supports mobiles, je dessine des trucs (quand j'ai le temps mais ça arrive de moins en moins et ça me lourde un peu), j'aime les synthétiseurs, je suis végétarien, regular et ma couleur préférée est le orange.

Ici, je vais parler d'un peu tout ça.

Connexion

Version de l'application: v131

Déployée le: sam. 13 janv. 2018 17:38

[21/12/2017] Le blog est en cours de refonte...

Heroku

et variables d'environnement

Modifier le: vendredi 12 janvier 2018 12:11

Je viens de rajouter une mini fonction (et d'autres qu'on ne voit pas en front').
Alors j'en profite pour faire un billet rapide.

Chez Heroku il est possible d'activer certaines variables d'environnement telles que le numéro de version et sa date de création. à chaque déploiement heroku met à jours ces variables. Il y a de la doc ici[...]


Nouveau format d'article

2018 tac tac

Modifier le: jeudi 11 janvier 2018 10:45

Voila une première version des nouveaux articles sans la possibilité de commenter pour l'instant. Je rajoute dans la foulée. Mais j'ai plein de choses à faire en même temps. priorirtairement.

Je me suis basé sur Draft.js de Facebook pour créér un Editeur Wysiwyg sous React. (Oui à l'heure ou j'écris ces quelques lignes, les solutio[...]


Chargement en cours...

Ci-dessous, les anciens billets:

( Sans vos nombreux commentaires sur les articles les plus anciens, parce que j'ai changé la structure des articles... et parce-qu'on s'en fout aussi. )

Chantiers

vendredi 29 décembre 2017 11:12

Bonjour,

Ceci est un dernier billet avant la refonte totale des articles.

Refonte qui a commencée.

Bientôt il va y avoir de nouvelles possibilités ici. Comme par exemple la consultation de ma ToDoList, le planning avec mes dispos et le moyen de caler un rendez-vous directement dessus, un contact etc... plein de choses supères.

J'ai des articles à écrire sur pas mal de choses qui se sont passées, une FAQ et aussi sur la suite probable de mes activités. Ca va être incroyable :)

À très bientôt!

Bon mais en vrai je teste un billet très très brut aussi.


Tips atom

mercredi 27 septembre 2017 18:06

J'ai pleins de news à poster et j'ai jamais vraiment le temps.

Mais je donne rapido un petit truc pour atom (l'éditeur de code)

Le truc cool avec React et le JS moderne es6 ou es7 et quand on code sous atom(mais ca doit être kif kif sur les autres éditeurs) c'est d'utiliser eslint qui va afficher les erreurs de syntaxe et d'indentation dans le code directement lors de la saisie. Un peu comme un correcteur d'orthographe pour le code quoi. C'est hyper pratique.

Perso j'utilise les règles de rallycoding (mais les règles d'airBnB sont sûrement très bien aussi).

Il faut installer le package localement en mode dev.
et ensuite créer un point .eslintrc dans le projet.
Et y mettre au minimum ça:

{
  "extends":rallycoding
}

(rebooter atom au besoin) et hop c'est parti pour coder tout propre, tout bien indenté.

Cooloss!


Panique sa mère

lundi 20 mars 2017 14:36

H-2:30 ...

J'écris en avant première ce billet sur mon blog perso, pour annoncer la mise en ligne du blog de Claire Loup et John Brushh.
J'ai codé le backend sous Ruby on Rails et le front sous Meteor/React.

Il s'agit d'une version 1 dans laquelle il manque encore plein de fonctionnalités qui vont venir, mais avec déjà le principal.
Les supers textes de CLair Loup et mes gribouillages.

Je suis hyper fière de cette colaboration!

à H-2:30 je suis même un peu ému... Un peu comme lors du concert d'adieu de Johnny au zenith de Paris en 95... mais moins quand même.


Nouvelle version [v2]

samedi 5 novembre 2016 16:33

J'ai recodé le blog.

Cette fois ci on est sur une application React/Meteor.
C'est définitivement le meilleur combo.
Et puis ça fait du bien de coder en JS orienté objet sans se taper les contraintes d'un framework.

L'appli tape toujours dans l'API d'une app rails. Et c'est récupéré coté front par react (j'utilise axios pour la requête asynchrone).  Le truc cool c'est qu'une fonction en JS tourne côté Meteor et actualise la récupération des articles toutes les 20 secondes. Pas besoin de rafraichir la page et en même temps on ne surcharge pas la machine de l'utilisateur avec une fonction JS qui s'executerait en boucle... C'est le server qui gère ça et actualise la collection MongoDB. Du node ultra simplifié et 100 fois moins low level, grâce a Meteor. 

Et maintenant on se connecte via Facebook, Google ou Twitter.
Les commentaires sont stockés sur l'appli Meteor et non plus sous l'app rails mais on conserve quand même les anciens.

On a une sorte de pagination au scroll. Comme ça se fait beaucoup de nos jours.

Je vais rajouter sous peu, mes quelques refs que jai envie de montrer dans l'onglet project, qui est en cours de dev. Et j'ai viré le site qui faisait office de portfolio.

On peut considérer que c'est une V2 du blog.

Et sinon j'ai abandonné le projet de radio.
C'était vachement bien mais ça allait me croûter des sous que je n'ai plus.
Et puis surtout, personne n'en a rien a foutre...

La suite plus tard...

 


SoRad.io

mercredi 5 octobre 2016 17:43

J'ai avancé. Un peu.

J'ai eu une coupure de web pendant 3 putains de semaines...

Mais c'est reglé et du coup j'ai ajouté des fonctions cools.
Comme une chatRoom rudimentaire (pour l'instant).

Bientôt j'ouvre l'upload et le vote aux utilisateurs.

Stay tuned (désolé j'ai révé d'employer ce terme y'a longtemps)

https://its-so-rad-io.herokuapp.com/


Un BD d'aventure et d'action

mercredi 5 octobre 2016 17:25

J'ai promis, il y a quelques temps, de poster des news au sujet de mes gribouillages.

Vers le mois de Juin je me suis amusé à dessiner moi et ma famille sous forme de bd...
au départ sans but précis.
ça allait devenir une sorte de pilote...


Et puis comme mon pote Gregoss à liké sur Facebook j'ai dessiné une suite :)

Graphiquement, sur le pilote je m'étais dit je vais faire juste des aplats. Par ce que j'avais vu un type que j'admire faire ça...

Mais c'etait pas vraiment moi et puis on s'ennuit quand on veut faire bien. Sur les suivants je me suis pas fait chier. j'ai dessiner comme d'hab dans mon style.

d'après photos, vaguement... au crayon sur papier puis j'encre sur ordi. voila c'est tout ce que j'ai a dire sur le making off. juste que suivant les jours ou je fais ça, je m'attache à ce que ce soit plus ou moins ressemblant.

Peut être qu'a terme je vais "cartooniser" les personnage (nous).c'est ce que je me suis dit au tout début mais maintenant je sais plus trop. ça serait plus rapide pour raconter une histoire. par ce que... comme d'hab mon problème c'est le temps :)

voila donc la suite, il y a 4 planches:

voila ... et puis après que j'ai posté ça sur Facebook j'ai eu des messages qui m'ont fait plaisir alors j'ai dessiné une suite :)

 

Voila voila... y'a quelques coquilles qui trainent dans le texte.
je corrigerai quand mon éditeur lancera l'impression.

... Monde de merde (je suis fan de george abitbol, oui)

La page est là sinon: https://www.facebook.com/johnbrushh


It's So rad... yo

vendredi 9 septembre 2016 11:05

Hello world!

Récemment j'ai eu l'idée de faire une appli du genre radio qui stream en direct un flux audio et auquel tous les utilisateurs pourraient se connecter.
Ensuite l'idée ça serait de rajouter des fonctions cools pour que les gens puissent voter pour les morceaux à ajouter sur la playlist à venir.

En fait j'ai fait un truc similaire en 2010 (par là) mais c’était codé en php / javascript (vanilla) et je streamais un flux audio qui sortait de shoutcast. c’était cool parce que je pouvais switcher du direct (flux envoyé depuis n’importe quel client de n'importe où) aux playlists que les utilisateurs faisaient... En cas de non playlist c'est le serveur qui faisait une playlist random. et en plus de tout ça les utilisateurs pouvaient upload et le serveur encodait au bon format (mp3)

Bon ok... mais comment faire tout ça en 2016 et avec les technologies modernes? Et surtout sans avoir la conf du serveur à gérer (ce que je faisais à l'époque).

Faire tourner shoutcast ça fait chier parce qu'il faut un serveur dédié et j'ai pas les moyens pour l'instant, et en plus ça utilise des technologies devenues archaïques. Mais comment streamer un flux sans shoutcast? icecast ? sans relay? sans serveur? WTF?

Je me suis dit et si on faisait tourner du JS coté serveur (sur un cloud type heroku) et qu'on pouvait faire jouer une playlist de mp3 tout simplement. (en omettant le coté traitement de l'upload coté serveur pour l'instant pour la compression/ conversion des fichiers en mp3)
Hmmmm... oui mais alors là non! on fait pas tourner un mp3 coté serveur... Nawak!

Ok mais alors si je simulais le décompte de la durée (en seconde) des mp3 de la playlist... hmmmm... et on enregistre le décompte chaque seconde dans un objet de mongoDB(base noSQL).

J'ai donc fait ça :)

Et du coup le scénario est le suivant pour l'utilisateur (pour l'instant) : La personne se connecte, le script est en train de tourner coté serveur et enregistre la position du mp3 en cours de lecture (fake de lecture), à partir de là il place le curseur de la balise audio au bon endroit et si l'utilisateur décide d'écouter le flux il lance la lecture... ainsi chaque utilisateur écoute la même chose au même moment(c'est le principe de la radio non?) (au même moment, à ceci prêt qu'il y a possiblement une marge d'erreur de une seconde. c'est à dire le laps de temps entre 0 et 1 seconde. car j'enregistre la position toutes les secondes et que le mp3, lui, il tourne a la milliseconde prêt... mais admettons pour l'instant).

 

Je crois que cette approche est inédite :)

bref... j'ai fait un uploader pour les admins (moi seulement temporairement) et je vais améliorer le concept. mais je peux upload des mp3, puis faire une playlist, et streamer tout ça... comme une radio. la suite c'est d'avoir le système de vote comme au bon vieux temps et donner la main aux utilisateurs.
l'upload c'est coté client et il y a zéro traitement. c'est pour ça que dans l'absolu il faudrait un traitement sous python par exemple... je ne pense pas que rails soit très adapté pour ça. (la dessus j'aimerais bien avoir l'avis de connaisseurs en python ou Java)

Voila voila...

l'adresse c'est là, temporairement: https://its-so-rad-io.herokuapp.com/  et pour l'instant on se connecte via facebook (puis google et github bientôt)

(Hebergement gratuit alors il faut attendre le reveil du serveur)

La suite quand j'ai le temps...

EDIT: je bosse encore dessus alors il peut y avoir des trucs... cheulous :)

EDIT2: C'est codé sous Meteor avec React ... et plein de js vanilla plus ou moins ES6 :)


Arrow function

samedi 9 juillet 2016 17:27

Un post rapide au sujet d'ES6 (ou ES2015) la dernière norme en vigueur pour écrire du javascript.

C'est + un pense bête qu'autre chose mais on s'en fout :) Les nombreux lecteurs comprendront ...
Je voulais écrire un mini post/mémo sur les arrow functions que j'utilise forcement 350 fois par jours avec React.

Qu'est ce que c'est une arrow function ? (ou fat arrow comme certains disent... apparemment... les subtilités de la langue anglaise m'échappent parfois)

Et bien c'est une nouvelle façon de déclarer les fonctions en JS qui permet de résoudre un problème avec la relation à la clef 'this' dans une fonction.  Et puis ça raccourci le code. c'est plus élégant du coup...

Exemple:

Un tiens vaut mieux que deux qui la tiennent ... non c'est pas ça... on peut tromper un exemple mille fois mais... oh pis merde...

En Jquery à la façon d'ES5 on aurait par exemple put écrire:

 $('.unBouton').on('click',function() {
      $(this).toggleClass('on');
 });

Jusqu'ici tout va bien.
Juste on ajoute ou retire la classe "on" sur this et this c'est (par exemple) un bouton avec la classe "unBouton".
Admettons qu'on ajoute un setTimeout pour différer le changement de classe.

$('.unBouton').on('click',function() {
      setTimeout(
        $(this).toggleClass('on');
     , 1000)
    });

Si on fait ça, ça ne fonctionne pas comme on voudrait.
Le bouton ne va pas changer de classe une seconde après le clic comme il devrait.
Parce que 'this' ne désigne plus le bouton.

le petit hack c'était d'écrire ça:

 $('.unBouton').on('click',function() {
      var that = this;
      setTimeout(function() {
        $(that).toggleClass('on');
      }, 1000)
    });

Jusqu'ici en tout cas...

Mais avec une arrow function on résoud ce problème plus élégamment, comme suit:

    $('.unBouton').on('click',function() {
      setTimeout(()=> {
        $(this).toggleClass('on');
      }, 1000)
    });

'this' désigne bien le bouton... magique.

 

En gros on écrit comme ça :

(Arg) => { }

au lieu de :

function (Arg) { }

... woila ...

Sinon dans un prochain post j'aimerais bien écrire sur le framework Meteor que je trouve absolument génial. En ce moment j'essaye de le coupler a React. c'est certainement le futur de Meteor puisque les dev du projet l'intègrent déjà... et puis j'écrirais surement à nouveau à propos d'ES6 et plein de trucs qu'on avait sous le nez en JS depuis mille ans et qu'on redécouvre sympathiquement.

To be continued...
 


Version 0.0.1

mercredi 15 juin 2016 18:12

Voila une première version.

J'ai reskinné l'interface.
Et je modifierai quand j'aurai le temps


Inscription sur ce blog

mercredi 15 juin 2016 12:55

Voila les inscriptions sont ouvertes.

Pour l'instant c'est le processus traditionnel avec confirmation par e-mail.
Bientôt je vais rajouter un lien "mot de passe oublié" mais il est déjà possible de s'inscrire depuis le frontend.

Maintenant je vais revoir la gestion des commentaires et nettoyer un peu le code.

To be continued...


Angular & SEO

mardi 14 juin 2016 09:21

J'ai modifié plusieurs choses sur le front du présent blog.
Je vais détailler un peu.

Le problème avec les applications web a requêtes asynchrones telles que les SPA sous angular c'est que vu que le navigateur génère la source après l'exécution du DOM, la source générée n'est pas SEO friendly.

La solution c'est d'avoir un hashbang en fin d'url pour indiquer aux robots qu'il s'agit d'une app asynchrone.

Mais ça ne suffit pas.
Il faut aussi précompiler la source.
Pour ça j'utilise un prerender qui s'execute sous node.
prerender.io

Pour voir ce que les robots sont censés voir il faut rajouter ceci : ?_escaped_fragment_=
en fin d'url et ensuite regarder la source qui est générée par le navigateur.
On peut voir qu'on a bien tout ce que nécessite le SEO en clair. 

Dans un prochain post je donnerai ma méthode pour tout ce qui est meta-name dynamique.

 


Wyswig

lundi 13 juin 2016 14:53

J'ai ajouté un éditeur html wysiwg coté back.
Il y a une bonne gem pour ça.

le classic Ckeditor pour rails.

Il y a toutes les options d'edition de texte et on peut ajouter des images.
J'ai configuré Ckeditor pour interagir avec carrierewave qui gère l'upload des images sur amazon
 

La je test un titre...

Comme toujours c'est simple sous Rails...
magique je devrais dire laugh

(Oui j'abuse exprès des styles de texte et des smiley)

La suite bientôt ...


Token Authentification rails / angular

samedi 30 avril 2016 18:27

Voila...

j'ai mis mille ans mais j'ai enfin réussi l'authentification par token entre mon app rails et  mon app angular.
J'ai un peu tout essayé et le mieux au final c'est de custom la gem "devise"

Maintenant je vais changer de wysiwyg
et rajouter l'inscription via angular vers devise sous rails.








Le secret de ma réussite

dimanche 27 mars 2016 09:43

C'est la première fois que j'essaye de tenir un blog rien qu'à moi.

Ce blog est en cours de développement et sert de laboratoire pour expérimenter des nouvelles choses.
J'utilise Rails et la gem devise en guise d'espace admin et l'application crache une API qu'une application Angular, complètement séparée de l'application Rails, utilise. C'est l'application que vous voyez.

Je vais maintenant rajouter les fonctions CRUD de base.
et rajouter un token.

Je détaillerai tout un peu mieux plus tard.

et la je vais tester un gif :
 

Bisous


Hello world

samedi 26 mars 2016 17:01

Bonjour tout le monde ?