No Code : On teste l'open source ? ❤️ #56

Apprend à intégrer un projet open source sur Webflow avec Uncode School

Cette semaine sur la chaîne d’Uncode School, je voulais être un peu plus technique que les vidéos précédentes et te montrer comment on pouvait intégrer un projet open source sur Webflow.

En l’espèce, on va essayer d’intégrer la librairie particles.js, créée par Vincent Garreau il y a quelques années déjà, dans un projet Webflow.

Quel est l’intérêt ?

Il s’avère que ce type d’effet n’est pas disponible de manière native dans Webflow. Il faut donc pouvoir coder ce type d’effet. Or, pour ma part, j’en aurai été proprement incapable. Toutefois, cela ne veut pas dire que tu ne peux pas en bénéficier sur ton site créé sur Webflow.

Qu’est-ce que tu vas apprendre ?

1 - Tu vas apprendre à utiliser une librairie JavaScript hébergée sur un compte Github

2 - Lire la documentation d’un projet open source

3 - Intégrer la librairie particles.js sur Webflow

Cela faisait longtemps que je voulais faire ce tutoriel parce que je trouve l’effet vraiment très sympa. C’est l’occasion pour toi d’aller un peu plus loin dans ton apprentissage Webflow et de repousser les limites de cet outil !

J’espère que cela te plaira autant que moi !

N’hésite pas à t’abonner à la chaîne Youtube d’Uncode School et à partager si cela t’a plu 🤗

Voir la vidéo


Une image du responsive engine de Bubble

On dirait que ce titre est un teaser du prochain Marvel 😅

Je ne saurai dire si c’est vraiment de l’avant-première ou non, mais pour ma part, je n’avais pas encore vu ce à quoi allait ressembler le nouveau responsive engine de Bubble.

Pour rappel, il s’avère que sur Bubble, la gestion du responsive est peu orthodoxe par rapport à ce qui est connu sur le web. En d’autres termes, créer des applications responsives sur Bubble est parfois complexes et peu pratique. Ce qui fait que de nombreuses personnes sur Bubble ne maîtrisent pas le responsive sur leurs applications ou le délaissent tout simplement. Ce qui est très dommage quand tu sais que plus de 50% du trafic du web est réalisé sur mobile…

Pour pallier ce souci, Bubble travaille depuis déjà pas mal de temps sur un nouveau moteur de rendu pour le responsive et il est d’ailleurs terminé d’après ses fondateurs. Ils sont d’ailleurs en ce moment en train d’effectuer des tests auprès de bêta testeurs et on peut espérer sa release pour la fin de l’année si les tests se sont avérés concluants.

Ce nouveau moteur va mettre en place la gestion des éléments via flexbox. N’ayant pas moi-même testé, il m’est difficile de te donner un avis. Sache que sur Webflow, tu peux utiliser les propriétés Flexbox ou Grid pour placer tes éléments. Tu peux donc aller t’entraîner avec Webflow pour appréhender Flexbox puisqu’il semble que Bubble emprunte plus ou moins leur système.

Dès que j’y ai accès, bien évidemment, je te ferai une vidéo sur le sujet.


Frames : un nouveau Design System de Bubble par Gregory John

Le fameux Gregory John de Builcamp vient de sortir un nouveau Design System pour Bubble nommé Frames.

Le principe de Frames est simple. Avec l’extension Chrome Frames, tu as accès à différents layouts responsives et pixel perfect réalisés par la team Builcamp. C’est une initiative intéressante qui vise à aider les Bubblers à améliorer leur design et à donner plus de consistance et de structure à leurs projets.

Pour t’aider, Frames embarque des layouts très classiques, mais très bien réalisés et qui font bien souvent l’affaire. De ce que j’ai pu voir sur l’extension on est plutôt sur des layouts type Landing Page ou site vitrine avec un blog.

Pour ma part, je préfère réaliser mon propre design system sur mes projets, mais force est de constater que cela prend (beaucoup) de temps et que du temps, c’est souvent ça qui manque…

Je ne conseillerai pas à un débutant de démarrer par Frames parce que je pense qu’il est d’abord primordial de bien pouvoir comprendre la façon dont “fonctionne le design sur Bubble”. Quand cela est fait et si tu dois gagner du temps, Frames peut être intéressant pour certains de tes projets.

À tester si le sujet t’intéresse.

P.S. : je ne suis pas pour ma part convaincu que Bubble soit le meilleur outil pour faire une landing page efficace. Un outil comme Webflow, Dorik, Squarespace ou même Wix sera amplement suffisant et probablement plus simple d’accès si tu cherches faire ta première landing page.


GrapeJS : Et si on avait enfin un début d’open source à la sauce Webflow ?

Pour ceux qui me connaissent, vous savez que je suis assez fan d’open source et que j’essaye d’en parler régulièrement sur NoCode Station avec les outils alternatifs no code que je trouve.

Clairement, le projet date puisque la version alpha de GrapeJS date de 2016. Toutefois, je n’entends quasiment jamais parler de ce projet auprès des différentes personnes qui pratiquent les outils no code et je voulais donc te le faire découvrir si tu ne le connais pas.

Pour faire simple, GrapeJS c’est Webflow, mais en open source (et en moins avancé). Avec GrapeJS, tu peux te faire ton propre builder personnalisé que cela soit pour créer ton site web ou ton builder de newsletter.

GrapeJS intègre des fonctionnalités bien connues de ceux qui travaillent sur Webflow : drag and drop, layouts responsives, gestion de la structure de ta page, custom code, export du code… Bien évidemment, une API est disponible pour que tu puisses également créer tes propres modules.

L’intérêt de GrapeJS, c’est que tu peux avoir ton propre builder hébergé chez toi (en France). Cela a donc un double intérêt :

- Tu as la main sur l’hébergement et donc tu peux plus facilement satisfaire aux exigences de la réglementation tout en donnant un outil simple à tes employés. Le revers de la médaille, c’est que cela va être à toi de gérer ton hébergement.

- Tu peux personnaliser l’outil comme tu le souhaites pour que ça corresponde exactement à tes besoins.

Certes, GrapeJS n’est pas encore au niveau de Webflow. Il manque encore la partie transitions, la partie CMS… Toutefois, je crois que cet outil prend véritablement la bonne direction pour devenir un outil qui compte dans l’univers no code open source.

Bref, tu l’auras compris, je suis assez enthousiaste sur cet outil et ça me donne bien envie de m’impliquer (à mon niveau bien sûr) sur ce type de projet. Au plaisir d’en discuter avec toi !


🚀 Un job dans le no code !

Tu recherches un job dans le no code ? Voici les offres de cette semaine auxquelles tu devrais postuler.

Ils recrutent dans le no code cette semaine…

Alegria recherche un UX/UI Designer en freelance qui connaît bien les outils no code. Voir l’offre.

Si tu recrutes également, n’hésite pas à me contacter (en répondant à ce mail) ou sur Linkedin pour proposer un poste aux no codeurs inscrits à la newsletter. Merci d’envoyer un lien avec le plus de détails possible.

J’espère que cette rubrique t’intéressera et qu’elle sera porteuse d’opportunités pour toi 🚀


Si cela t’a plu n’hésite pas à m’ajouter sur Linkedin, m’écrire un petit message en répondant à cette newsletter ou encore partager pour m’encourager à continuer 😎

Si vous aimez cette newsletter et que vous pensez que quelqu’un de votre entourage pourrait être intéressé, n’hésitez pas à la partager. 👇

Share NO CODE STATION

Si à l’inverse, un ami vous a transféré cette newsletter et que vous l’avez apprécié, vous pouvez vous abonner. 👇