Tilap.net

Développement web

Projets

Quelques projets publiques réalisés pour mon compte.

Slack Panels: une extension Chrome pour Slack

Une extension Chrome permettant d’augmenter encore un peu plus votre productivité sur Slack.

Slack panel Chrome extension

Lire la suite »

Granny-sms: des SMS depuis le web pour ma mamie

Un projet anecdotique mais qui me tient à coeur: envoi de SMS depuis le web pour ma mamie.

Contexte

Ma maie a bientôt 90 ans. c’est une super mamie. Elle s’est mise à « l’ordinateur » il y a 3 ans pour pouvoir parler à tous ses enfants et petits enfants. Elle utilise Skype, mais aussi l’email ou encore rédige le courier « légal » sur papier. Parce que c’est plus lisible. Et parce que « c’est dommage qu’on ne puisse pas tout faire avec des emails ».

Envoyer des SMS depuis le web?

Denrièrement, elle a réalisé qu’il y avait aussi les SMS. Et comme elle a « peur de déranger », elle a eu envie d’essayer. Sauf qu’aujourd’hui, un téléphone avec un clavier adapté, et une autonomie de plus d’un jour, ça n’existe pas. Le monsieur chez Orange confirme.

Du coup, je lui ai fait une page web où elle peut envoyer des SMS dans une interface dédiée simple, avec une liste de personnes pré-enregistrées.

A quoi ça ressemble

C’est une une page unique, un champs pour les contcts, un champs pour le texte, un indicateur du nombre de caractères, un bouton envoyer.

granny-sms-main
granny-sms-main

Rien de foufou techniquement. Le champs de contact est basé sur Select2, car ma mamie a un carnet d’adresse long comme le bras. Les alertes, pour être bien visible et explicites, sont faites avec Sweet alert. Et coté SMS, l’API d’OVH est claire, bien documentée, à prix raisonnable, et à livraison immédiate. 10 minutes montre en main pour la connecter…

Et encore une fois, rien de foufou techniquement: app one-page, koaJS en back, un peu de less en front, 2 plugins jQuery dans du jspm (ouais faut pas déconner non plus… ok, j’aurais pu faire encore bien plus simple… ). Mais ma mamie est super contente et ça n’a pas de prix. Et Elle nous envoie maintenant des petits mots :)

je ne pense pas une seconde que ça serve à quelqu’un d’autre, mais sur demande, je rendrai le code open source.

BirdyBot: un bot Slack pour utiliser Twitter

Slack est un outil hype de communication, qui par con ergonomie est une petite révolution. Sa vrai force est la possibilité d’y adjoindre des « bots » pour accentuer encore plus son gain de productivité. Il permet de base d’y lire des flux Twitter, mais pas d’interagir avec ceux-ci en tweetant, likant etc. C’est bien dommage, que ce soit à titre individuel, mais aussi car il pourrait apporter une grande force collaborative si, depuis un chan donné, plusieurs utilisateurs pouvaient justement « commander » le compte Twitter.

De là est né BirdyBot. C’est une application Slack, installable facilement, qui vous permet de connecter un ou plusieurs compte Twitter. Vous pouvez rendre ces comptes Twitter dans un chan privé individuel où vous seul aurez le contrôle. Et dans un chan multi-utilisateurs (privé ou publique) permettant ainsi à quicquonque de publier de façon collaborative sur Twitter.

birdbybot

Promesse de BirdyBot

Publier, retweeter, liker, … sur un ou plusieurs comptes Twitter à titre personnel ou en équipe depuis Slack.

La cible: tout utilisateur de Slack étant actif sur Twitter.

Les fonctionnalités de BirdyBot

BirdyBot permet à l’heure actuelle:

Lire la suite »

PicMeMore: partager ses photos facilement

Après des vacances entre amis, une soirée, on aimerait récupérer les photos de chacun. On se donne rendez-vous, on échange des clés USB, en espérant que tout le monde y pense, … Bref, c’est compliqué. On peut aussi faire des dossiers partagés sur dropbox, google drive, ou encore créer des albums Facebook. Oui mais voilà, tout le monde doit avoir un compte, être « amis », et savoir utiliser ces systèmes de partage.

Et puis il y a Picmemore

La homescreen de Picmemore

Promesse de Picmemore

  • Promesse du produit : Partager simplement des images de façon collaborative, sans avoir à créer de compte ni avoir de pré-requis technique quel qu’il soit
  • Cible : toute personne ayant accès à Internet et voulant partager des photos de façon simple
  • Solution existante : aucune de connue proposant une interface simple et sans compte

Découvrez Picmemore »

Les fonctionnalités de picmemore

Lire la suite »

TripMeMore : Vietnam 2015

Il n’y a pas que le dev dans la vie, il y a aussi les vacances et le voyage. Et puis au retour des vacances… je développe un site pour parler de mon voyage. Que voulez vous, la passion du développement et du voyage :)

Tripmemore Vietnam 2015
Tripmemore Vietnam 2015

Un carnet de voyage pour raconter une histoire

Je ne suis pas un exemple en terme de communication, que je limite souvent à son essentiel.
Mais dans les objectifs de ce projet, j’ai voulu me prendre au jeu de « raconter une histoire, partager mon expérience ».

Dynamisme de lecture

D’abord parti sur la piste du skeuomorphisme en cherchant à me rapprocher de l’idée old school de « carnet de voyage », j’ai vite fait marche arrière pour aspirer à une ergonomie plus légère (flat dirons certains) pour faciliter la lisibilité. J’ai dynamisé la lecture en faisant des blocks de contenus bien distincts (couleur de fon et espacements verticaux), et en déclinant les contenu: centré, image à gauche, image à droite, sans tomber dans l’excès.

Les couleurs

Lire la suite »

Timeline sociale en 58 minutes

J’ai réalisé une page web permettant d’afficher mes dernières activités sur les réseaux sociaux Twitter, Instagram et Soundcloud. Il est aussi utilisable en l’état par n’importe qui sans aucune programmation pour peu que vous preniez le temps de faire un peu de configuration (voir en fin de l’article).

Remarque: c’est un projet minute sans aucune ambition, juste pratique pour moi et ma famille

Social timeline

Lire la suite »

Zizimap reload

Zizimap est un side-project réalisé il y a bientôt 2 ans en moins d’une heure, pour m’amuser.

Sans lui avoir apporté de modification depuis, il fait son petit bonhomme de chemin. Le site cumule sans effort plus de 800 partages sur Facebook, et a 2.200 visites uniques mensuelles. Soit plus de visite que de caractères dans le code source.

Si ce n’est pas un succès à proprement parler, il a le mérite de faire sourire pour un coût de réalisation ridicule, et c’est pour moi la plus belle récompense (#peterpan). Donc pourquoi ne pas lui donner un petit coup de pouce pour aller plus loin ? Voilà donc venir une v2, le pourquoi et le comment.

zizimap-tablet
zizimap-tablet

Lire la suite »

Plugin Chrome pour SCRAPfy, le pair programming facile

Scrapfy est un service en ligne vous permettant de coder à plusieurs en simultané dans votre navigateur web. C’est très pratique pour du pair programming que ce soit lorsqu’on est plusieurs développeurs à quelques milliers de kilomètres de distance ou bien dans le même bureau.

scrapfy

Par ailleurs, SCRAPfy est doté de coloration syntaxique, d’édition avancée (édition multiligne, …), de raccourcis clavier, d’un chat audio et texte et de la possibilité de sauvegarder votre code dans un gist en 1 clic.

L’extension Chrome améliorée

SCRAPfy avait déjà une extension Chrome très basique. Elle ajoutait un bouton à votre navigateur web dans la toolbar. Il permettait d’ouvrir un nouveau document vierge Scrapfy sans avoir à passer par le site puis à cliquer sur le bouton « Créer un document ». Un clic en moins, c’est bien.
Mais ensuite, il vous fallait coller votre bout de code, puis partager le lien pour inviter des gens à coder avec vous.

Lire la suite »

POC UI autour d’un carnet de voyage

J’ai publié il y a quelques temps un POC tentant de répondre à plusieurs questions d’UI. J’ai pris comme exemple d’application un carnet de voyage, car c’est un sujet qui me tient à coeur depuis plusieurs années. Mais cette UI est adaptable à bien d’autres types de contenus.

Tripbook poc by Tilap
Tripbook poc by Tilap

Objectifs du POC

A travers ce POC, j’ai tenté de répondre aux problématiques suivantes :

  • comment tirer parti de la surface horizontale des écrans actuels: pour une bonne lisibilité, les contenus textes ne peuvent s’étaler sur toute la largeur d’un écran. Comment occuper intelligemment le reste de l’écran ?
  • le découpage d’un écran en plusieurs colonnes peut-il avoir un sens ? Comment conserver une navigation compréhensible ?
  • comment enrichir du contenu sans en alourdir sa lecture ?

Lire la suite »

Frast, pour coder des mockups rapidement

Frast
Frast
Je développe souvent des landing pages ou des maquettes de site pour des clients depuis plusieurs années. Avec le temps, je me suis construit un environnement me simplifiant le travail, intégrant une boite à outil rapide et simple à utiliser. Je viens de la publier en open source sous le nom de FRAST, cntraction de Front et Fast.

A quoi ça sert ?

Frast permet d’initialiser un environnement de développement front flexible, de développer rapidement grace à du live reload et des helpers pratiques, et de publier sur github.io ou d’exporter une tarball du rendu optimisé.

Lire la suite »

Welean.it : rebranding

Nouvelle home de Welean.it
Nouvelle home de Welean.it

Il y a un an, je parlais du projet Welean.it : des développeurs fous, qui réalisent votre projet web en 2 jours. Initié par des technophiles, le concept a évolué au fil des sessions en se tournant beaucoup plus sur le produit.

La landing initiale, faite très rapidement, avait un aspect très tech (quelques screenshots cont visibles ici). A évolution du concept, évolution du branding.

Lire la suite »

Zizimap : la taille des pénis par pays sur une carte du monde

Zizimap est un site web indiquant la taille moyenne des pénis par pays à travers une mapmonde et un selecteur de taille afin de visionner simplement les pays entrant dans vos critères de selection.

Si je vous en parle, c’est que je l’ai fait avec mes petites mains (et pas autre chose) hier soir en réalisation minute (voir plus bas le concept « 58 minutes pour vivre »).

zizimap

Lire la suite »

Plugin jQuery Smoothscroll : défilement doux

Les plugins jQuery permettant de faire défiler (scroller) la page en douceur pour les liens internes ne manquent pas. Cependant les plus basiques s’appliquent automatiquement à tous les liens de la page, quand les autres nécessitent de pointer lien par lien. Et d’autres encore posent souci sur certaines version de Webkit…

En ayant un peu marre de trouver le plugin jquery qui me conviendrait et me ferait gagner du temps, j’ai coder rapidement le mien.
Il est :

  • facile à utiliser : c’est un plugin jQuery tout ce qu’il y a de plus normal ;
  • sans souci de compatibilité : il est écrit avec le constructeur jQuery ;
  • personnalisable pour la vitesse de scrool ;
  • ajustable : on peut affiner la position final de scroll par une correction d’offset supérieur.

En gros, ça répond à tous les besoins standards et récurent, et j’espère qu’il pourra vous être utile.

Le code est open source, disponible sur bitbucket si vous souhaitez le modifier ou en faire tout autre usage.

Pour télécharger directement la dernière version non minifiée, c’est par ici.

Le code source du projet

Dessine moi un mouton

Un ancien collègue actuellement en SSII et que nous nommerons Bernard(1) travaille sur un projet personnel informatique depuis plus d’un an. Ce projet est venu aux oreilles du client, qui est intéressé par les fonctionnalités offertes.

Ni une ni deux, Bernard souhaite publier son projet sous licence open source et me demande une « mascotte » pour son produit. Le brief ? « Un mouton qui soit cool et mignon »

Le résultat

monmouton
monmouton

Laetitia Bisch : site professionel

Accueil-Laetitia-Bisch-0152181
Accueil-Laetitia-Bisch-0152181

Laetitia Bisch est comédienne, improvisatrice, et modèle photo. Sans avoir la notoriété des quelques rares comédiens qui brillent sous les feux de la rampe au premier rang, elle n’en reste pas moins une comédienne active donnant des représentation dans des théâtre tels que Le petit Gymnase et une improvisatrice de talent, connue dans le milieu.

Comme beaucoup de ses collègues, sa présence sur le net se résumé essentiellement à Facebook, une page sur Book.fr, et depuis peu une page sur Allo Ciné, plutôt pauvre. Le reste de ce que l’on pourra trouver sur la comédienne en cherchant sur Internet relève essentiellement de la promotion pour ses pièces et prestations. Et son Book.fr, moche à souhait (pas elle, le book !).

Ce personnal branding assez pauvre est plutôt dommage, quand on sait le talent reconnu qui lui est attribué.

Laetitia m’a donc sollicité pour lui réaliser un site web, lui permettant de se présenter, de publier, et de référencer son actualité afin de mieux se vendre, se faire connaitre, et de se démarquer de ses collègues sur Internet.

Lire la suite »

Plugin jQuery NiceMultiSelect

Besoins

Dans le cadre d’un projet personnel, j’ai eu besoin d’utiliser l’élément HTML « multiselect ». En effet, pour une selection de plusieurs éléments par un utilisateur, le DOM web nous offre comme choix soit le multi select, soit une liste de checkbox. Lorsque l’on a beaucoup de choix à proposer, les checkbox deviennent simplement anti-ergonomique et favorisent les erreurs utilisateurs : oubli, case « d’à coté » cochée, …

J’ai donc opté pour le multi select. Cet élément est peu courant dans les pages web, tant son utilisation est fastidieuse et peu intuitive : une liste déroulante, dans laquelle on peut selectionner une ou plusieurs options en utilisant les touches Ctrl (ou Pomme) et Shift.

J’ai donc développé un plugin jQuery permettant de rendre l’utilisation d’un multi select bien plus naturelle.

Voir la démo ou le site du projet

Lire la suite »

X