Twittorama

Hello tout le monde !

Je poste rarement ici, alors c’est pas sans un certain frisson que je viens le faire

Récemment, j’ai voulu me confronter au web. Étant développeur plutôt embarqué / système que web, vous vous doutez bien que c’était pas loin du défi pour moi Mais bon, mon experience de dev' ZdS m’a réconcilié avec toutes ces technos et mon amour de python m’a donnée envie d’essayer de développer un vrai petit projet, tout seul comme un grand dans mon coin. Du coup laissez moi vous présenter Twittorama !

Comme je le disais, l’idée derrière ce petit projet est d’avoir deux choses :

• Un bac à sable concret pour faire du dev' web (parce que bon, les projets Hello World j’en ai un peu marre) ;
• Le plaisir d’avoir réussi à porter un truc de l’état "d’idée-qui-me-plait" jusqu’à sa publication en ligne (et son évolution derrière).

Twittorama, qu’est ce que c’est ?

Twittorama est un peu site/service internet qui vous permet de visualiser les médias d’un compte twitter sous une forme de galerie. Certains comptes Twitter me plaise beaucoup pour leur caractère graphiques, mais visualiser leurs photos sous forme de liste avec du texte ne me plaît pas plus que ça. J’ai donc créer ce petit site qui exploite l’API Twitter pour créer des galeries d’images.

Par exemple, voici le compte de SpaceX vu sur Twittorama :

Lorsque vous cliquez sur une image, cette dernière s’affiche en grand et des liens pour la télécharger ou la voir sur Twitter sont proposés.

Point de vue technique

Point de vue de la technique, je fonctionne avec le micro-framework Flask en backend et du JQuery pour m’aider en frontend. Pas de framework CSS, c’est tout fait à la main de ce côté là !

Ne voulant pas m’enquiquiner à faire de l’admin serveur, je suis parti sur une solution d’hébergement mutualisé chez Gandi. Le code est quant à lui chez Gitlab (pas open source).

Évolutions à venir

J’ai encore pas mal de choses à faire avant d’être content, mais il faut bien se lancer publiquement à un moment ou à un autre sinon c’est la porte à l’abandon ! Parmis les choses qui m’intéresse à faire :

• Corriger les moults bugs déjà identifié et les comportements sous-optimaux point de vue UX ;
• Tirer parti de l’architecture CI/CD de Gitlab pour automatiser les mises en prod' ;
• Essayer de passer sur du Vue.js (pour pouvoir jouer avec un framework js moderne) Ca c’est fait ! ;
• Nettoyer mon js qui est très crade cf. point précédent ;
• Faire un mécanisme de cache en BDD pour limiter les appels à l’API Twitter ;
• Mettre en place les galeries par recherche de hashtags fait! ;
• Implémenter un espace utilisateur pour pouvoir sauvegarder les images favorites ;
• Violemment améliorer la page d’accueil à base de "Twittos of the week / month" par exemple ;
• M’implémentez des outils de supervision de la consommation de l’API et autres métriques ;
• Probablement d’autres trucs que j’ai plus en tête ;

Bref, j’ai de quoi m’occuper encore un moment

Voilà pour mon dernier petit side-project en date ! Je suis content de vous le présenter, n’hésitez pas à m’en faire la critique (construite), je saurais vous écouter !

À bientôt !

https://twittorama.com/t/zestedesavoir
https://twittorama.com/t/eskimon_fr

Hey mais c’est vraiment pas mal en fait !

Un moyen peut-être de s’y abonner par flux RSS ?

Hey mais c’est vraiment pas mal en fait !

.

Ton projet est sympa !

Merci

Une petite suggestion d’amélioration (si l’API twitter permet cela) : avoir une autocomplétion sur le champ de recherche d’un compte twitter, comme dans la barre de rechercher de twitter.

L’API le permet, je note cette idée !

Un moyen peut-être de s’y abonner par flux RSS ?

Tu imagines quoi ? Un flux qui te post les nouvelles images d’un compte ?

Yup. Parce que je ne crois pas qu’on puisse suivre de compte twitter avec un flux RSS, sauf à passer par un service externe.

Je n’utilise pas du tout twitter, mais tu m’a fait découvrir des trucs sympa qu’on peu trouver dessus

Pour Vue.js j’ai eu l’occasion de l’utiliser dans plusieurs projets, et c’est vraiment pas mal

Je me demandais pourquoi je ne voyais pas les images, j’ai fini par trouver. La protection anti-traqueurs de Firefox bloque le chargement des images :/

Sur mobile lorsqu’on clique sur une image :

• On peut continuer à scroll le fil des images alors qu’on est sur une image.
• C’est dommage de ne pas pouvoir cliquer sur la description ou le lien en dessous de la description.
• Et c’est dommage de ne pas trouver dessous un bouton : répondre/tweetter/liker et même un système pour ne pas quitter la page serait top.

Et petit plus écolo : Mettre un chargement des images intelligent.

Sinon j’aime bien le projet. J’espère que c’est compatible avec beaucoup de compte Twitter (dans le sens où on ne tombe pas sur des images de type concours ou GIF que twitter nous propose d’ajouter dans un tweet).

Sinon j’aime bien le projet. J’espère que c’est compatible avec beaucoup de compte Twitter (dans le sens où on ne tombe pas sur des images de type concours ou GIF que twitter nous propose d’ajouter dans un tweet).

J’ai pas compris

Le chargement des images ne semble pas fonctionner sur Firefox 63.0.1 en navigation privée. Je plussoie Vue.js.

Comme disais Phigger un peu plus tôt :

Et je ne peux rien y faire. Les images sont chargées depuis les serveurs de Twitter, donc je ne peux pas contourner l’anti pistage de firefox.

La fonction anti-traqueurs repose sur un système de blacklist. Je ne sais pas si il y a moyen de contourner en utilisant un autre lien redirigeant vers la même API. Pour info, ça utilise la liste de Disconnect.me (version light en réglage de base).

Si ca peut t’aider j’ai trouvé un bug : au scroll pour recharger une deuxième volée d’image , après chargement le deuxième set d’image s’affiche bizarrement :

Ma config : W10 / Firefox 63.0.1 64 Bits / Ublock Origin activé

Yeah ! J’aime beaucoup l’idée

Le rendu est super sympa ! Je suis un peu dans le même cas que toi, récemment j’ai fais un side-project et je me suis dis pourquoi pas en python. Un tutoriel sur le microframe work Flask ferait du bien à ZdS. Si un jour je le maitrise suffisament, alors j’essayerais d’en faire un.

Sinon, au niveau du site, je ne peux pas lancer une vidéo ni agrandir les images, je n’ai pas de souris et impossible d’y cliquer avec les plugins « d’accecibilités » ^^"
Une solution serait d’ajouter l’attribut tabindex=0 afin d’ajouter les images au navigation flow.

Mais même sans ça, ça en jete !

Ce que je voulais dire c’est que tous les comptes twitter n’ont pas une certaine cohésion dans leur média

Chouette projet,

Par contre, ne jamais mettre Legal et Contact dans un infinite scroll

Si ca peut t’aider j’ai trouvé un bug : au scroll pour recharger une deuxième volée d’image , après chargement le deuxième set d’image s’affiche bizarrement

@alliocha1805 C’est bizarre, ca c’est un truc que j’avais mais il y a bien longtemps. On dirait que le cache du serveur t’as servi un vieux fichier. Si tu veux retester, j’ai purgé ce dernier.

Ce que je voulais dire c’est que tous les comptes twitter n’ont pas une certaine cohésion dans leur média

@A-312 Oui mais là ca sort de mon cadre de simple affichage (ou alors tu as une idée derrière la tête ?)

Merci Oui je sais, mais je savais pas où les mettre et comme ils étaient là au début ils ont pas rebougé ensuite

Effectivement ça fonctionne beaucoup mieux

Je me demande si on peut faire la même chose pour Mastodon, et si le projet peut réutiliser du code pour gérer les deux sources.

Chouette projet.

J’aime bien l’idée et je trouve ça chouette.

On voit a quel point le compte Twitter de ZdS n’est pas très graphique.

Le code est quant à lui chez Gitlab (pas open source).

Par curiosité, pourquoi pas open source ? Ça pourrait intéresser des gens, voir aider a porter le projet sur autre chose que Twitter.

Je suppose que oui, très résemment le lead dev de mastodon a publié ca : https://mastodon.social/gallery/

Parce que j’en suis pas très fier pour le moment, il est vraiment pas clean