Meilleure pratique HTML, CSS et Javascript: extension Chrome

Pour les personnes qui viennent de terminer Codecademy.

Lorsque vous étudiez la programmation, le moyen le plus efficace d’auto-étudier consiste à développer un produit. Cette approche est beaucoup plus rapide que de suivre n'importe quel cours de programmation pour améliorer vos compétences en programmation.

Normalement, les gens commencent à apprendre à programmer avec HTML, CSS et Javascript basique dans la programmation Web. Toutefois, avant d’atteindre la partie serveur, il est difficile de créer une application utile.

Donc, j'ai toujours essayé de convaincre les étudiants comme ça,

Ce sera amusant si vous commencez à apprendre le côté serveur et à lancer une application. S'il vous plaît, n'abandonnez pas.

mais de nombreux étudiants arrêtent d'apprendre la programmation au stade HTML et CSS.

(Peut-être que commencer par HTML n'est pas une bonne idée pour encourager les gens à étudier la programmation.)

Un jour, j'ai ouvert mon navigateur Chrome pour commencer à travailler. Ensuite, j'ai réalisé que j'utilisais réellement la meilleure application que vous puissiez créer à l'aide de HTML, CSS et Javascript.

Élan

Pour résumer, si vous installez cette extension sur Chrome, chaque fois que vous ouvrez un nouvel onglet, un message de bienvenue s'affiche sur une photo super cool. Le nombre de téléchargements est déjà de plusieurs millions. Si vous ne l’utilisez pas, je vous recommande fortement de l’installer. Vous ne rencontrerez peut-être cette application que 2 à 3 secondes par nouvel onglet, mais vous pourrez vous détendre un instant.

Essayons de cloner cette application!

Phase 1: choses à préparer

  • HTML
  • CSS
  • Javascript
  • Belle photo: de unsplash
  • manifest.json (à charger depuis Chrome)

J'ai rapidement développé l'application en me concentrant sur le présent et non sur l'avenir. Bien sûr, il est important d’avoir un plan concret lorsque ce n’est pas votre projet solo. Mais! La durée de vie de l'auto-motivation est très courte, donc quand vous avez envie de développer quelque chose, vous feriez mieux de le finir très vite. Si vous commencez à penser à d’autres options susceptibles d’améliorer votre produit, vous ne finirez jamais votre projet.

Gardons les choses simples.

Nous créons un site Web avec une grande image, un grand message de bienvenue et peut-être l'heure actuelle.

Trouver une photo

Si vous allez sur le site Web Unsplash, vous pouvez trouver des tonnes d'images superbes sans licence.

Depuis que je suis en Norvège, j’ai décidé d’utiliser cette photo.
Merci, Vidar Nordli-Mathisen. (Il est toujours important de reconnaître leur talent.)

Photo de Vidar Nordli-Mathisen sur Unsplash

Faire un projet

Simple Simple Simple

Un fichier HTML, un CSS, un Javascript et un fichier manifeste.

C’est tout ce dont nous avons besoin.

Ok, c'est la première version.

Ceci est une simple page Web. Maintenant, pour être chargé à partir de Chrome, vous devez ajouter le fichier manifest.json suivant.

“Chrome_url_overrides” est la propriété la plus importante de cette application.

Aller à la page d'extensionCliquez sur le bouton Cliquez sur le bouton de sélection à l'intérieur de votre dossier de projetNotre humble extension…Chaque fois que vous ouvrez le nouvel onglet, votre page Web simple s'affichera.

Voilà, nous venons de terminer notre premier projet.

Vous pouvez l'utiliser uniquement avec cette fonctionnalité. Peut-être que vous pouvez éditer le texte en quelque chose avec lequel vous voulez vous motiver, tel que «l'impossible n'est rien», «il suffit de le faire», «nous sommes le monde», quelque chose, quelque chose. Ou peut-être pouvez-vous mettre votre photo de famille à la place.

Mais faisons-le mieux que cela.

Phase 2: choses à ajouter

  • Heure actuelle
  • Fonction de changement de nom
  • Fonction de changement d'image

Pour inclure ces trois nouvelles fonctionnalités, j'ai modifié le fichier HTML comme ci-dessous.

CSS devrait être changé aussi.

Ensuite, la nouvelle page sera comme ci-dessous.

Oh, je pensais que c'était Momentum :)

Mise à jour de manifest.json

Nous allons maintenant ajouter deux fonctionnalités.

Tout d’abord, nous allons ajouter un formulaire de saisie à cette application afin que les utilisateurs puissent y mettre leur nom. Nous ajouterons ce formulaire sous le message «Hello, Jungwon Seo».

C’est moche, corrigeons-le

Nouveau style pour la balise input.

Ok, beaucoup mieux.

A partir de maintenant, nous devons réfléchir à la manière de stocker ces informations.

Nous allons utiliser «cookie», mais vous ne pouvez pas utiliser «cookie» si vous ouvrez simplement le fichier HTML à partir du navigateur Chrome. Essayez de tester après le chargement en tant qu'extension Chrome.

Il y avait des informations incorrectes sur l'autorisation de stockage dans le post précédent. Vous n’avez pas besoin de l’autorisation ‘stockage’ pour utiliser ‘Cookie’.

De plus, comme je préfère toujours utiliser jQuery, ajoutons-le.

J'ai essayé d'ajouter jQuery CDN, mais…

Ne vous inquiétez pas, nous avons juste besoin d’ajouter une propriété supplémentaire dans manifest.json.

Bien, nous sommes maintenant prêts à coder dans le fichier script.js.

Ce que je veux faire en premier est:

  1. Faire en sorte que les utilisateurs tapent leur nom.
  2. Stocker dans un cookie (n'utilisons que le code le plus populaire)
  3. Fondu en sortie du formulaire de saisie et fondu dans le message d'accueil.

C'est la première fois que nous devons penser comme un vrai développeur.

Cas 1: Lorsque vous l'ouvrez pour la première fois.
Cas 2: Lorsque vous l'ouvrez après avoir tapé votre nom.

Nous devons décider de ce qui devrait être visible et de ce qui ne devrait pas être.

Cas 1:
Heure: heure actuelle
Message de bienvenue: Quel est votre nom?
Formulaire de saisie: visible

Cas 2:
Heure: heure actuelle
Message de bienvenue: Bonjour, !
Formulaire de saisie: invisible

Et la manière de différencier ces deux cas est de vérifier si le cookie a la clé "nom d'utilisateur".

Avec la fonction de mise à jour temporelle, le nouveau script.js sera comme ci-dessous.

Avant de taper le nomAprès avoir tapé le nom

Ok, ça a l'air de marcher.

Bien sûr, il y a encore des choses à améliorer, comme les effets de transition.

Mais je vais vous le donner.

Maintenant quoi d'autre?

Nous devons ajouter la fonctionnalité qui permet aux utilisateurs de modifier leur image.

API Unsplash

Vous pouvez facilement enregistrer votre application et obtenir un jeton à partir de cette page.

Pour utiliser l’API Unsplash, vous devez enregistrer votre application dans leur page de développement.

En cliquant sur

Pour le produit de démonstration, vous serez autorisé à utiliser jusqu'à 50 demandes par heure. Et cela suffit pour nous.

Il suffit de remplir le formulaire ci-dessous comme vous le souhaitez.

Tapez n'importe quel nom

Si vous créez l’application, vous verrez la partie "Clés" du site Web redirigé.

J'ai supprimé cette application, donc inutile de l'essayer.

Il vous suffit de copier ‘Clé d’accès’ et d’affecter à votre variable javascript «ACCESS_KEY».

Nous allons utiliser l’API de recherche.

Voici le scénario. Toutes les personnes ont des intérêts différents. Je souhaite donc d'abord leur demander leur intérêt, puis je rechercherai cette image à l'aide de l'API Unsplash. Après cela, je continuerai à mettre à jour l’image toutes les 12 heures (même mot clé, image différente).

Donc, la fonction AJAX sera comme ci-dessous.

Et cette fonction sera appelée après la saisie de votre intérêt.

Ensuite, comme vous pouvez vous en douter, nous devons redevenir un développeur.

Cas 1–1: Très première fois
Cas 1–2: Après le nom
Cas 2: Après avoir tapé votre intérêt
Cas 3: 12 heures plus tard.

OK, décidons un par un.

Dans les cas 1 à 1, il suffit de masquer toute la partie liée à l'image. Passer ceci.

Dans les cas 1–2, affiche uniquement le formulaire de saisie de l’intérêt.

Dans le cas 2, appelez AJAX et enregistrez les informations sur l'image.

Dans le cas 3, fixons simplement le délai d’expiration à 12 heures et, si le cookie est vide, appelez à nouveau la demande AJAX.

Mot clé: Londres

Oui, ça marche.

Phase 3: touches finales

Il n’est pas obligatoire de créditer le photographe, mais pourquoi pas?

Nous pouvons écrire quelques lignes de code supplémentaires et créditer le nom et la page du photographe en haut à gauche.

Pour que nous puissions utiliser les informations du photographe lorsque vous vérifiez le cookie pour la première fois.

Une dernière chose, que se passe-t-il si quelqu'un veut changer son intérêt?

Ajoutons cette fonctionnalité qui permet aux gens de retaper leur intérêt.

Avant de cliquer sur le bouton

Voilà. Si vous cliquez sur le bouton «Choisir un nouvel intérêt», vous devrez ouvrir le formulaire de saisie où vous avez déjà saisi votre intérêt.

Après avoir cliqué sur le bouton

Phase 4: Fabriquez votre propre produit.

Je veux juste que vous expérimentiez le processus du début à la fin. Néanmoins, vous devez le développer vous-même pour réellement assimiler les compétences que vous avez acquises.

Selon vous, il serait bon d’inclure certaines fonctions, telles que la manière de choisir l’image aléatoire. Ou vous pouvez penser que certains de mes codes sont inefficaces. Vous pouvez améliorer votre version du même produit avec un meilleur code.

Bonne chance et n’abandonnez pas!

La version complète peut être trouvée ici: https://github.com/thejungwon/MyChromeExtension

Cette histoire est publiée dans Noteworthy, où plus de 10 000 lecteurs viennent chaque jour pour se renseigner sur les personnes et les idées qui façonnent les produits que nous aimons.

Suivez notre publication pour voir plus d'histoires de produits et de design présentées par l'équipe de la revue.