Comment les concepteurs devraientils apprendre à coder? Git, HTML / CSS, principes d'ingénierie (partie 2)
À propos de l'auteur
Paul Hanaoka est directeur du design chez Liferay, basé dans la banlieue de Los Angeles, et au service des équipes nord-américaines. Sa passion est à l'intersection de… En savoir plus sur Paul …
Dans Partie 1 Paul a expliqué les bases du terminal, partagé quelques hacks de productivité pour vous aider à démarrer et comment choisir un éditeur de code. Dans cette partie, il continuera avec les sujets du contrôle de version (Git), HTML et CSS, le code sémantique et une brève introduction à certains principes d'ingénierie clés.
Littéralement, les tomes ont été écrits sur le contrôle de version. Néanmoins, je commencerai par partager une brève explication et d'autres contenus d'introduction pour vous mettre en appétit pour une étude plus approfondie.
Contrôle de version ( à ne pas confondre avec historique de version ) est essentiellement un moyen pour les gens de collaborer dans leur propre environnement sur un seul projet, avec une seule source principale de vérité (souvent appelée la branche «maître»).
Je vais passer en revue aujourd'hui est le strict minimum dont vous aurez besoin connaître pour télécharger un projet, apporter une modification, puis l'envoyer au maître.
Il existe de nombreux types de logiciel de contrôle de version et de nombreux outils pour gérer et héberger votre code source (vous pouvez avoir entendu parler de GitLab ou Bitbucket). Git et GitHub sont l'une des paires les plus courantes, mes exemples feront référence à GitHub mais les principes s'appliqueront à la plupart des autres gestionnaires de code source.
Mis à part :
Collecte de données, The Powerful Way
Saviez-vous que CSS peut être utilisé pour collecter des statistiques? En effet, il existe même une approche CSS uniquement pour le suivi des interactions de l'interface utilisateur à l'aide de Google Analytics. Lire un article connexe →
Votre première contribution
Avant de faire ces étapes, vous aurez besoin de configurer quelques éléments:
Une tolérance élevée à la douleur ou un seuil bas pour demander de l'aide aux autres.
Étape 1: Fork (Obtenez une copie du code sur votre compte GitHub)
On GitHub, vous bifurquerez (fork = créez une copie du code dans votre compte; dans l'illustration suivante, les lignes bleues, orange, rouges et vertes montrent les fourches) le référentiel (repo) en question.
En créant des branches hors du maître, il est possible pour plusieurs personnes de contribuer à différents domaines d'un projet, puis de fusionner leur travail ensemble. ( Grand aperçu )
Pour ce faire, accédez à le dépôt dans GitHub et cliquez sur le bouton "Fork", actuellement dans le coin supérieur droit d'un dépôt. Ce sera «l'origine» – votre fork sur votre compte GitHub.
Voici la fourche GitHub de victorvalle. ( Grand aperçu )
Étape 2: Cloner (télécharger le code sur votre ordinateur)
Dans votre terminal, accédez à l'endroit où vous souhaitez stocker le code. Personnellement, j'ai un dossier / github dans mon dossier / user – cela me facilite l'organisation de cette façon. Si vous souhaitez le faire, voici les étapes – après avoir tapé ces commandes dans votre fenêtre de terminal, appuyez sur la touche ↵ pour exécuter:
cd ~ / ## vous commencerez généralement par votre répertoire racine, mais au cas où vous ne le feriez pas, cela vous y mènera
mkdir github ## cela crée un dossier "github" - sur OSX il sera désormais localisé dans users / votre-nom d'utilisateur / github
cd github ## cette commande vous permet de naviguer dans le dossier github
Maintenant que vous êtes dans le dossier / github vous allez cloner (télécharger une copie du code sur votre ordinateur) le repo. [19659027] clone https://github.com/yourGitHubUsername/liferay.design[19659028[Unefoisquevousentrezcettecommandevousverrezuntasd'activitésdansleterminal-quelquechosecommececi:
Clonage dans 'liferay.design «...
à distance: énumération des objets: 380, terminé.
à distance: Total 380 (delta 0), réutilisé 0 (delta 0), pack-reused 380
Réception d'objets: 100% (380/380), 789,24 Kio | 2,78 Mio / s, terminé.
Résolution des deltas: 100% (189/189), fait.
Étape 3: installation (exécutez-le sur votre machine)
Accédez au dossier / project . Dans ce cas, nous allons saisir cd liferay.design . La plupart des projets comprendront un fichier README.md dans le dossier / root c'est généralement le point de départ pour l'installation et l'exécution du projet. Pour nos besoins, pour installer, entrez npm install . Une fois installé, entrez npm run dev .
Félicitations! Le site est désormais disponible sur votre ordinateur local. En règle générale, les projets vous indiqueront où il fonctionne. Dans ce cas, ouvrez un navigateur et accédez à localhost: 7777 .
Étape 4: validation (effectuez des modifications et enregistrez-les)
Une validation est un ensemble de modifications que vous effectuez; J'ai entendu dire qu'il enregistrait vos progrès dans un jeu. Il existe de nombreuses opinions sur la façon dont les commits doivent être structurés: le mien est que vous devez créer un commit lorsque vous avez accompli une chose, et si vous supprimiez le commit, cela ne casserait pas complètement le projet (dans des limites raisonnables). 19659007] Si vous ne venez pas à un repo avec un changement à l'esprit, un bon endroit où aller est l'onglet 'Issues'. C'est ici que vous pouvez voir ce qui doit être fait dans le projet.
Si vous avez une idée de changement, allez-y et faites-le. Une fois que vous avez enregistré le (s) fichier (s), voici les étapes requises pour créer un commit:
git status ## cela imprimera une liste des fichiers dans lesquels vous avez apporté des modifications
git add path / to / folder / or / file.ext ## ceci ajoutera le fichier ou le dossier au commit
git commit -m 'Résumer les modifications que vous avez apportées' ## cette commande crée un commit et un message de commit
Astuce : La meilleure recommandation que j'ai jamais vue pour les messages de commit est extrait de « Comment écrire un message de validation Git » de Chris Breams. Une ligne d'objet de validation Git correctement formée doit toujours être en mesure de compléter la phrase suivante: «Si elle est appliquée, cette validation [your subject line here]». Pour plus d'informations sur les validations, consultez « Pourquoi je crée des validations atomiques dans Git » par Clarice Bouwer.
Étape 5: appuyez sur (Envoyez vos modifications à votre origine)
Une fois que vous en avez fait les modifications sur votre ordinateur, avant de pouvoir les fusionner dans la branche principale (ajoutées au projet), elles doivent être déplacées de votre local vers votre référentiel distant. Pour ce faire, entrez git push origin dans la ligne de commande.
Étape 6: Tirez la demande (demandez que vos modifications soient fusionnées en amont)
Maintenant que vos modifications sont passées de vos doigts à votre ordinateur, à votre référentiel distant – il est maintenant temps de demander leur fusion dans le projet via une requête pull (PR).
La façon la plus simple de le faire est d'aller sur la page de votre référentiel dans GitHub. Il y aura un petit message juste au-dessus de la fenêtre du fichier qui dit "Cette branche est X s'engage à l'avance nom-repo: branche" puis les options pour "Extraire la demande" ou "Comparer".
En cliquant sur l'option "Extraire la demande" ici vous amènera à une page où vous pourrez comparer les modifications et un bouton qui dit "Créer une demande de tirage" vous amènera ensuite à la page "Ouvrir une demande de tirage" où vous ajouterez un titre et inclurez un commentaire. Être bref, mais suffisamment détaillé dans le commentaire, aidera les responsables de projet à comprendre les modifications que vous proposez.
Il existe des outils CLI comme Node GH (GitHub a également récemment publié une version bêta de leur outil CLI ) qui vous permettent d'initier et de gérer les demandes d'extraction dans le terminal. À ce stade, vous préférerez peut-être utiliser l'interface Web, et c'est génial! Moi aussi.
Les options «Pull request» et «Compare» apparaîtront une fois que votre fork aura divergé du référentiel en amont. ( Large preview )
Étape bonus: Remote (Link All The Repos)
À ce stade, nous avons trois références de référentiel:
en amont : le référentiel principal que vous suivez, c'est souvent le référentiel que vous avez créé;
origine : le nom par défaut de la télécommande que vous clonez;
local : le code qui est actuellement sur votre ordinateur.
Jusqu'à présent, vous avez les numéros 2 et 3 – mais le numéro 1 est important car il s'agit de la source principale. Garder ces trois choses en ligne les unes avec les autres va aider à garder l'historique des validations propre. Cela aide les responsables de projet car il élimine (ou du moins minimise) les conflits de fusion lorsque vous envoyez des demandes de tirage (PR) et vous aide à obtenir le dernier code et à maintenir à jour vos référentiels locaux et d'origine.
Set An Upstream Télécommande
Pour suivre la télécommande en amont, entrez dans votre terminal les informations suivantes:
git remote add upstream https://github.com/liferay-design/liferay.design[19659026[Maintenantvérifiezpourvoirquellestélécommandesvousavezdisponible-entrez git remote -v dans votre terminal, vous devriez voir quelque chose comme: origine et en amont sont les étiquettes les plus courantes pour les télécommandes - «origine» est votre fourchette, «en amont» est la source. ( Grand aperçu )
origine https://github.com/yourGitHubUsername/liferay.design (fetch)
origine https://github.com/yourGitHubUsername/liferay.design (push)
https://github.com/liferay-design/liferay.design (fetch) en amont
https://github.com/liferay-design/liferay.design (push) en amont
Cela vous permettra d'obtenir rapidement la dernière version de ce qui est en amont - si vous n'avez pas travaillé dans un référentiel depuis longtemps et que vous ne souhaitez pas conserver de modifications locales, voici une commande pratique que j'utilise:
Sur le Web, il existe une infinité de ressources pour apprendre le HTML et le CSS. Pour les besoins de cet article, je partage ce que je recommanderais en fonction des erreurs que j'ai commises de la façon dont j'ai appris à écrire le HTML et le CSS.
Que sont le HTML et le CSS?
Avant nous allons plus loin, définissons HTML et CSS.
HTML signifie HyperText Markup Language.
Hypertext:
"Hypertext est du texte affiché sur un écran d'ordinateur ou autre dispositifs électroniques avec des références ( hyperliens ) à d'autres textes auxquels le lecteur peut accéder immédiatement. »
Au cas où vous ne savez pas non plus ce que signifient beaucoup de ces mots - en bref, HTML est la combinaison de références (liens) entre documents sur le Web et balises que vous utilisez pour donner une structure à ces documents.
Il existe une balise HTML5 pour à peu près n'importe quel élément de base - sinon vous pouvez toujours utiliser un div ! ( Grand aperçu )
Pour une introduction approfondie au HTML et au CSS, je recommande fortement les Introduction au HTML et CSS premiers pas tous deux sur le Mozilla Developer Network (MDN) documents Web. Cela, ainsi que les excellents articles que des sites Web tels que Astuces CSS 24 façons et d'innombrables autres fournissent, contiennent essentiellement tout ce dont vous aurez besoin de faire référence en ce qui concerne HTML / CSS
Il existe deux parties principales d'un document HTML : le et le .
- Le contient des éléments qui ne sont pas affichés par le navigateur - des métadonnées et des liens vers des feuilles de style et des scripts importés.
- Le contient le contenu réel qui sera rendu par le navigateur. Pour afficher le contenu, le navigateur lit le code HTML, fournit une couche de base de styles en fonction des types de balises utilisés, ajoute des couches supplémentaires de styles fournis par le site Web lui-même (les styles sont inclus dans / référencés dans le ou sont en ligne), et c'est ce que nous voyons à la fin. (Remarque: il y a souvent aussi la couche supplémentaire de JavaScript mais cela sort du cadre de cet article.)
CSS signifie feuilles de style en cascade - il est utilisé pour étendre le HTML en facilitant le rendu et la convivialité des documents. Une feuille de style est un document qui indique au HTML à quoi les éléments doivent ressembler (et comment ils doivent être positionnés) en définissant des règles basées sur des balises, des classes, des ID et d'autres sélecteurs. La mise en cascade fait référence à la méthode pour déterminer quelles règles dans une feuille sont prioritaires dans le cas inévitable d'un conflit de règles.
«'La mise en cascade' signifie que les styles peuvent tomber (ou cascade) d'une feuille de style vers une autre, permettant d'utiliser plusieurs feuilles de style sur un même document HTML. »
CSS a souvent une mauvaise réputation - dans les sites avec beaucoup de feuilles de style, il peut rapidement devenir difficile à manier, en particulier s'il n'y a pas de méthodes cohérentes documentées utilisées (plus à ce sujet plus tard) - mais si vous l'utilisez de manière organisée et en suivant toutes les meilleures pratiques, CSS peut être votre meilleur ami. Surtout avec les capacités de mise en page qui sont maintenant disponibles dans la plupart des navigateurs modernes, CSS n'est pas aussi nécessaire pour pirater et combattre qu'il l'était autrefois.
Rachel Andrew a écrit un excellent guide, Comment Apprenez CSS - et l'une des meilleures choses à savoir avant de commencer est que:
"Vous n'avez pas besoin de vous engager à mémoriser chaque propriété et valeur CSS."
Ne vous inquiétez pas de mémoriser la syntaxe de la propriété d'arrière-plan et don ne vous inquiétez pas si vous oubliez comment aligner exactement les éléments dans Flexbox (le Guide des astuces CSS de Flexbox est possible y l'une de mes 10 pages les plus visitées, jamais!); Google et Stack Overflow sont vos amis en ce qui concerne les propriétés et valeurs CSS.
Une de mes nouvelles fonctionnalités préférées dans Firefox 70 est l'indicateur de règles CSS inactives . Cela vous fera gagner des heures à essayer de comprendre pourquoi un style n’est pas appliqué.
Les enfants de nos jours le font si facilement! ( Grand aperçu )
Sémantique
Commençons par code sémantique . La sémantique fait référence à la signification des mots, le code sémantique fait référence à l'idée qu'il y a un sens au balisage dans une langue donnée.
Il y a plusieurs raisons pour lesquelles la sémantique est importante. Si je pouvais résumer cela, je dirais que si vous apprenez et utilisez du code sémantique, cela vous facilitera la vie car vous obtiendrez beaucoup de choses gratuitement - et qui n'aime pas les trucs gratuits?
Styles par défaut Par exemple, en utilisant un titre pour le titre de votre document le fera ressortir du reste du contenu du document, un peu comme le ferait un titre.
Avantages en termes de performances Clean HTML est le fondement d'un site hautement performant. Et un HTML propre mènera probablement à un CSS plus propre, ce qui signifie moins de code dans l'ensemble, ce qui rendra votre site ou application plus rapide.
Il y a des tonnes d'applications , tangentes et niveaux que nous pourrions explorer sur le concept d'abstraction - trop pour cet article qui vise à vous donner une brève introduction aux concepts afin que vous en soyez conscients pendant que vous continuez à apprendre.
L'abstraction est un fondement paradigme d'ingénierie avec une grande variété d'applications - aux fins de cet article, l'abstraction sépare la forme de la fonction. Nous l'appliquerons dans trois domaines: les jetons, les composants et le principe Don't Repeat Yourself.
Jetons
Si vous avez utilisé un outil de conception moderne pendant une longue période, vous avez probablement rencontré le idée d'un jeton . Même Photoshop et Illustrator ont désormais cette idée de styles partagés dans une bibliothèque centralisée - au lieu de coder en dur des valeurs dans une conception, vous utilisez un jeton. Si vous connaissez le concept des variables CSS ou SASS, vous connaissez déjà les jetons.
Une couche d'abstraction avec les jetons consiste à attribuer un nom à une couleur - par exemple, $ blue-00 peut être mappé sur une valeur hexadécimale (ou une valeur HSL, ou tout ce que vous voulez) - disons # 0B5FFF . Maintenant, au lieu d'utiliser la valeur hexadécimale dans vos feuilles de style, vous utilisez la valeur du jeton - de cette façon, si vous décidez que blue-00 est en fait # 0B36CE alors vous n'avez qu'à modifier en un seul endroit. C'est un bon concept.
Les jetons de couleurs du composant Lexicon Alerts permettent de garder les choses au SEC. ( Grand aperçu )
Si vous prenez ce même paradigme d'abstraction et allez plus loin, vous pouvez token-ception - et affecter une variable à une valeur fonctionnelle. Ceci est particulièrement utile si vous avez un système robuste et que vous souhaitez avoir différents thèmes au sein du système. Un exemple fonctionnel serait d'attribuer une variable comme $ couleur primaire et de la mapper à $ blue-00 - vous pouvez donc maintenant créer du balisage et au lieu de faire référence au bleu, vous ' re référençant une variable fonctionnelle. Si vous souhaitez utiliser le même balisage, mais avec un style (thème) différent, il vous suffit de mapper $ primary-color à une nouvelle couleur, et votre balisage n'a pas besoin de changer à tout! Magic!
Composants
Au cours des 3-4 dernières années, l'idée de composants et de composants est devenue plus pertinente et accessible aux concepteurs. Le concept de symboles ( lancé par Macromedia / Adobe Fireworks plus tard développé par Sketch puis porté au niveau supérieur par Figma et Framer), est désormais plus largement disponible dans la plupart des conceptions. outils (Adobe XD, InVision Studio, Webflow et bien d'autres). La composante, plus encore que les jetons, peut séparer la forme de quelque chose de sa fonction - ce qui contribue à améliorer à la fois la forme et la fonction.
L'un des premiers exemples les plus notables est le composant d'objet média de Nicole Sullivan . À première vue, vous ne réalisez peut-être pas qu'une page entière est essentiellement composée d'un seul composant, rendu de différentes manières. De cette façon, nous pouvons réutiliser le même balisage (formulaire), en le modifiant légèrement en passant des options ou des paramètres et des styles - et en lui fournissant une variété de valeur (fonction).
Don't Repeat Yourself [19659111] DRY ( Don't Repeat Yourself ) est l'un de mes principes préférés - créer des choses qui peuvent être réutilisées encore et encore est l'une des petites victoires que vous pouvez avoir lors du codage.
Bien que vous ne puissiez pas souvent ( et sans doute ne devriez pas ) s'efforcer d'appliquer le principe DRY à 100% du temps, à chaque fois - il est au moins bénéfique d'en être conscient afin que lorsque vous travaillez, vous pouvez réfléchir à la manière de rendre ce que vous travaillez plus réutilisable.
Une note sur la règle des trois: Un corollaire au principe DRY est la règle des trois - essentiellement , une fois que vous réutilisez (copiez / collez) quelque chose trois fois, vous devez le réécrire dans un composant réutilisable. Comme le Pirate's Code il s'agit davantage d'une directive que d'une règle stricte et rapide, et peut varier d'un composant à l'autre et d'un projet à un autre.
Méthodologies CSS et de style: atomique vs BEM [19659002] Il existe de nombreuses façons d'organiser et d'écrire du code CSS - Atomic et BEM ne sont que deux des nombreux que vous rencontrerez probablement. Vous n’avez pas à en choisir un seul, ni à les suivre exactement. La plupart des équipes avec lesquelles j'ai travaillé ont généralement leur propre mélange unique, basé sur le projet ou la technologie. Il est utile de les connaître afin qu'au fil du temps, vous puissiez savoir quelle approche adopter en fonction de la situation.
Toutes ces approches vont au-delà du "CSS" et du style, et peuvent souvent influencer l'outillage que vous utilisez, la façon dont vous organisez vos fichiers, et potentiellement le balisage.
Atomic CSS
À ne pas confondre avec Atomic Web Design - atomic (peut-être plus judicieusement appelé «fonctionnel») CSS, est une méthodologie qui favorise essentiellement l'utilisation de petites classes à usage unique pour définir les fonctions visuelles. Quelques bibliothèques notables:
Ce que j'aime dans cette méthode, c'est qu'elle vous permet de styliser et de thèmener rapidement les choses - l'un des plus gros inconvénients est que votre balisage peut devenir joli encombré, assez rapide.
Fondamentalement, tout qui peut être réutilisé est un bloc. Les blocs sont composés d'éléments, quelque chose qui ne peut pas être utilisé en dehors d'un bloc, et potentiellement d'autres blocs. Les modificateurs sont des choses qui décrivent le statut de quelque chose ou la façon dont il ressemble ou se comporte.
Personnellement, j'aime la théorie et la philosophie du BEM. Ce que je n'aime pas, c'est la façon dont les choses sont nommées. Beaucoup trop de traits de soulignement, de traits d'union et cela peut sembler inutilement répétitif ( .menu .menu__item etc.).
Une fois que vous maîtrisez suffisamment ces sujets, ne vous inquiétez pas, il reste encore beaucoup à apprendre. Quelques suggestions:
Programmation fonctionnelle et orientée objet Nous l'avons abordé légèrement, mais il y a beaucoup plus à apprendre au-delà de CSS.
Langages et frameworks de niveau supérieur Typographie, Ruby, React, Vue sont les prochaines choses que vous aborderez une fois que vous aurez une bonne maîtrise du HTML et du CSS.
Interrogation des langages et utilisation des données En savoir plus sur GraphQL, MySQL, les API REST prendront votre codage
Conclusion: Designers Who Code! = Software Engineers
Avec un peu de chance, cet article vous a montré que l'apprentissage du code n'est pas aussi difficile que vous le pensiez auparavant. Cela peut prendre beaucoup de temps, mais la quantité de ressources disponibles sur Internet est stupéfiante, et elles ne diminuent pas - bien au contraire!
Un point important que je tiens à souligner est que le «codage» n'est pas le Identique à «l'ingénierie logicielle» - être capable de débiter un repo et de copier / coller du code à partir de Stack Overflow peut vous faire avancer, et même si la plupart, sinon tous, les ingénieurs logiciels que je connais l'ont fait - vous devez utiliser votre compétences nouvelles avec sagesse et humilité. Pour tout ce à quoi vous pouvez désormais accéder avec des prouesses d'ingénierie, il y a bien plus que vous ne savez pas. Bien que vous puissiez penser qu'une fonctionnalité ou un style est facile à réaliser parce que - "Hé, je l'ai fait fonctionner dans devtools!" ou "Je l'ai fait fonctionner à Codepen." - il existe de nombreux processus d'ingénierie, dépendances et méthodes que vous ne savez probablement pas que vous ne connaissez pas.
Tout cela pour dire - n'oubliez pas que nous sommes toujours des concepteurs. Notre fonction principale est d'ajouter de la valeur commerciale à travers l'objectif de comprendre les problèmes des clients ou des utilisateurs et de les synthétiser avec notre connaissance des modèles, des méthodes et des processus de conception. Oui, être un "concepteur qui écrit du code" peut être très utile et augmentera votre capacité à ajouter cette valeur - mais nous devons encore laisser les ingénieurs prendre les décisions d'ingénierie.
Quelque chose ne va pas?
Il y a de fortes chances que quelque chose dans ce post était obscur, obtus et / ou obsolète et j'aimerais avoir l'occasion de l'améliorer! Veuillez laisser un commentaire ci-dessous, DM me ou @mention moi sur Twitter pour que je puisse m'améliorer.