L'intégration d'exemples de code avec des scripts tiers conduit souvent à un suivi ou à des cookies. Nous avons toujours voulu avoir un site Web simple avec une bonne UX, donc configurer des cookies sans raison n'était pas une option pour nous. Maintenant, avec Indiepen, nous sommes fiers de présenter une alternative respectueuse de la vie privée.
Lorsque nous implémentons des sites Web aujourd'hui, nous sommes confrontés à beaucoup de choses dont nous devons nous occuper. Idéalement, nous voulons avoir un site Web rapide, sécurisé, accessible et équitable. En même temps, nous voulons avoir un site Web interactif avec des commentaires, des sondages, des vidéos, des exemples de code et bien d'autres.
Avec un ami, j'ai lancé un blog technique l'année dernière et nous avons rencontré exactement ce problème. Nous voulions avoir une solution simple pour intégrer des exemples de code HTML, CSS et JavaScript, mais les solutions existantes incluent souvent le tracking, les cookiesune tonne de fonctionnalités ou de mauvaises performances. Après quelques recherches, nous avons réalisé que nous devions créer une alternative.
Regardons :
Indiepen est une solution respectueuse de la vie privée, légère, et accessible pour intégrer des exemples de code . En fait, nous ne définissons aucun cookie ni suivi !
Commencer
Indiepen peut prévisualiser chaque site Web qui suit une convention très simple. Vous devez fournir un site Web avec la structure de fichiers suivante :
.
index.html
main.js
└── styles.cssDéployez l'exemple de code avec votre hébergeur préféré (par exemple GitHub Pages, Netlify ou Vercel) et copiez l'URL. Après cela, accédez à notre page de démarrage et utilisez le générateur d'extraits de code.
Le code généré ressemble à ceci :
Vous pouvez maintenant utiliser l'extrait de code et l'intégrer sur votre site Web. C'est ça! Vous devriez maintenant voir votre exemple de code avec un éditeur pour découvrir le code.
Under The Hood
Cela semble un peu étrange de nos jours, mais nous n'avons utilisé aucun framework JavaScript comme React ou Vue.js. Il s'agit de pur HTML, CSS et JavaScript avec l'aide de Prism.js de Lea Verou pour la coloration syntaxique. Ces bibliothèques sont très utiles pour implémenter et maintenir des applications Web complexes, mais dans notre cas, nous n'avons que trois fichiers que nous devons récupérer et transmettre à Prism.js.
De plus, nous avons trois boutons dans le coin supérieur droit pour basculer entre les vues HTML, CSS et JavaScript. En introduisant un framework d'interface utilisateur, nous ne pouvions pas fournir une solution légère avec une taille inférieure à 20 Ko. Pour nous, ce fut un bon apprentissage, que les bibliothèques d'interface utilisateur sont importantes dans nos activités quotidiennes, mais nous devons les examiner attentivement et ne pas oublier le bon vieux JavaScript vanille.
Final Words
Indiepen est notre premier projet open source et nous sommes très heureux de partager nos idées avec vous. Nous aimerions avoir des commentaires et avoir des discussions sur un Web équitable. Contactez-moi sur Twitter ou consultez le projet sur GitHub.
Enfin, je voudrais mentionner qu'Indiepen a une portée limitée et nous voulons pour rester simple par conception. Si vous devez traiter des exemples de code plus complexes, des préprocesseurs pour CSS ou JavaScript, ou si vous souhaitez bénéficier d'une plate-forme pour partager vos idées, alors envisagez des solutions plus sophistiquées comme CodePen ou JSFiddle.
Bon codage à tous !
(vf, yk, il)