A propos de l'auteur

Paul Hanaoka est Design Manager chez Liferay, basé dans la banlieue de Los Angeles, et au service des équipes nord-américaines. Sa passion est à l'intersection de…
Plus à propos
Paul

Dans la 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 des versions) 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 que vous devrez connaître pour télécharger un projet, apporter une modification, puis l'envoyer au maître.

Il existe de nombreux types de logiciels de contrôle de version et de nombreux outils pour gérer et héberger votre code source (vous avez peut-être 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.

De côté:

Collecte de données, la manière puissante

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 d'effectuer ces étapes, vous devez configurer quelques éléments:

  1. Un compte GitHub,
  2. Noeud et NPM installés sur votre ordinateur,
  3. 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)

Sur GitHub, vous bifurquerez (fork = créer 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 master, plusieurs personnes peuvent contribuer à différents domaines d'un projet, puis fusionner leur travail. (Grand aperçu)

Pour ce faire, accédez au référentiel dans GitHub et cliquez sur le bouton "Fork", actuellement dans le coin supérieur droit d'un référentiel. Ce sera «l'origine» – votre fork sur votre compte GitHub.

Par exemple, la navigation vers https://github.com/yourGitHubUsername/liferay.design devrait montrer votre fork du référentiel Liferay.Design.

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 / github dossier dans mon /utilisateur dossier – il est plus facile pour moi de l'organiser 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 clé à exécuter:

cd ~ / ## vous commencerez généralement dans 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 / github dossier, vous clonerez (téléchargez une copie du code sur votre ordinateur) le repo.

clone https://github.com/yourGitHubUsername/liferay.design

Une fois que vous entrez cette commande, vous verrez un tas d'activités dans le terminal – quelque chose comme ceci:

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-la sur votre machine)

Naviguez dans le /projet dossier. Dans ce cas, nous entrerons cd liferay.design. La plupart des projets comprendront un README.md fichier dans le /racine dossier, il s'agit généralement du point de départ pour l'installation et l'exécution du projet. Pour nos besoins, pour installer, entrez installation de npm. Une fois installé, entrez npm run dev.

Toutes nos 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: Valider (apporter des modifications et les enregistrer)

Un commit est un ensemble de modifications que vous apportez; J'ai entendu dire qu'il enregistrait vos progrès dans un jeu. Il existe de nombreuses opinions sur la façon dont les validations doivent être structurées: la mienne est que vous devez créer une validation lorsque vous avez accompli une chose, et si vous supprimiez la validation, cela ne briserait pas complètement le projet (dans des limites raisonnables).

Si vous ne venez pas à un repo avec un changement d'avis, un bon endroit où aller est l'onglet "Problèmes". C'est là 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 affichera 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

Pointe: La meilleure recommandation que j'ai jamais vue pour les messages de validation est celle 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 avez effectué certaines modifications sur votre ordinateur, avant de 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 origine dans la ligne de commande.

Étape 6: Pull Request (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 qu'elles soient fusionnées dans le projet via une pull request (PR).

La façon la plus simple de le faire est d’aller sur la page de votre dépôt 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 avant le nom du dépôt: branche" puis les options pour "Pull request" ou "Compare".

En cliquant sur l'option "Pull request" ici, vous serez redirigé vers une page où vous pourrez comparer les modifications et un bouton qui dit "Créer une pull request" vous amènera ensuite à la page "Ouvrir une pull pull" où vous ajouterez un titre et inclure un commentaire. Le fait d'ê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 son outil CLI) qui vous permet 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. (Grand aperçu)

À ce stade, nous avons trois références de référentiel:

  1. en amont: le repo principal que vous suivez, souvent c'est le repo que vous avez forké;
  2. origine: le nom par défaut de la télécommande que vous clonez;
  3. local: le code qui se trouve 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 vos référentiels locaux et d'origine à jour.

Configurer une télécommande en amont

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

Maintenant, vérifiez les télécommandes dont vous disposez – 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 n'avez pas de modifications locales que vous souhaitez conserver, c'est une commande pratique que j'utilise :

git pull upstream master && git reset --hard upstream / master

L'aide de GitHub est une excellente ressource pour cela et pour bien d'autres questions que vous pourriez avoir.

HTML et CSS: commencer par la sémantique

Sur le Web, il existe une infinité de ressources pour l'apprentissage du HTML et du CSS. Aux fins de cet article, je partage ce que je recommanderais en fonction de les erreurs que j'ai commises comment j'ai appris à écrire du HTML et du CSS.

Que sont le HTML et le CSS?

Avant d'aller plus loin, définissons HTML et CSS.

HTML signifie HyperText Markup Language.

Hypertexte:

"Hypertexte est un texte affiché sur un écran d'ordinateur ou d'autres appareils électroniques avec des références (hyperliens) à un autre texte auquel le lecteur peut accéder immédiatement. »

– "Hypertexte" sur Wikipédia

Langage de balisage:

"… Un système pour annoter un document d'une manière qui se distingue syntaxiquement du texte."

– «Markup Language» sur Wikipédia

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 les documents sur le Web, et Mots clés que vous utilisez pour structurer 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 à HTML et CSS, je recommande fortement les premières étapes de Introduction à HTML et CSS, à la fois sur Réseau de développeurs Mozilla (MDN) documents web. Cela, ainsi que les excellents articles fournis par des sites Web tels que CSS Tricks, 24 Ways et d'innombrables autres, contiennent essentiellement tout ce dont vous aurez besoin de faire référence en ce qui concerne HTML / CSS.

Il y a deux parties principales HTML document: 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 rendre 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 existe souvent également une couche supplémentaire de JavaScript, mais elle sort du cadre de cet article.)

CSS signifie Cascading Style Sheets – il est utilisé pour étendre le code 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. En cascade fait référence à la méthode permettant de déterminer quelles règles d'une feuille sont prioritaires en cas inévitable de conflit de règles.

"" En cascade "signifie que les styles peuvent tomber (ou se mettre en cascade) d'une feuille de style à une autre, ce qui permet d'utiliser plusieurs feuilles de style sur un même document HTML."

– Cascade – Max Design

CSS obtient souvent une mauvaise réputation – dans les sites avec beaucoup de feuilles de style, il peut rapidement devenir lourd, surtout 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 tout les meilleures pratiques, CSS peut être votre meilleur ami. Surtout avec les capacités de mise en page qui sont désormais 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 apprendre le CSS – et l'une des meilleures choses à savoir avant de commencer est la suivante:

"Vous n'avez pas besoin de vous engager à mémoriser chaque propriété et valeur CSS."

– Rachel Andrew

Au lieu de cela, il est beaucoup plus vital d’apprendre fondamentaux – les sélecteurs, l'héritage, le modèle de boîte et, surtout, comment déboguer votre code CSS (indice: vous aurez besoin des outils de développement du navigateur).

Ne vous inquiétez pas de mémoriser la syntaxe du Contexte et ne vous inquiétez pas si vous oubliez comment aligner exactement les éléments dans Flexbox (le guide des astuces CSS de Flexbox est probablement l'une de mes 10 pages les plus visitées, jamais!); Google et Stack Overflow sont vos amis en matière de propriétés et de valeurs CSS.

Certains éditeurs de code ont même une saisie semi-automatique intégrée, vous n'avez donc même pas besoin de chercher sur le Web pour pouvoir comprendre toutes les propriétés possibles d'une bordure, par exemple.

L'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 ont tellement facile! (Grand aperçu)

Sémantique

Commençons avec 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?

Pour une introduction plus complète au code sémantique, consultez le bref article de blog de Paul Boag sur le sujet.

La sémantique vous offre de nombreux avantages:

  1. Styles par défaut
    Par exemple, en utilisant une balise de titre

    car le titre de votre document le fera ressortir du reste du contenu du document, comme le ferait un titre.

  2. Contenu accessible
    Votre code sera accessible par défaut, ce qui signifie qu'il fonctionnera avec les lecteurs d'écran et sera plus facile à naviguer avec un clavier.
  3. Avantages SEO
    Le balisage sémantique est plus facile à lire pour une machine, ce qui la rend plus accessible aux moteurs de recherche.
  4. Avantages de performance
    Clean HTML est la base d'un site très performant. Et un HTML propre mènera probablement à un CSS plus propre, ce qui signifie moins de code dans l'ensemble, ce qui rend votre site ou application plus rapide.

Remarque: Pour un examen plus approfondi de la sémantique et du HTML, Heydon Pickering a écrit «Structural Semantics: The Importance Of HTML5 Sectioning Elements» que je recommande fortement de lire.

Principes et paradigmes d'ingénierie: les bases

Abstraction

Il y a des tonnes d'applications, de tangentes et de niveaux que nous pourrions explorer sur le concept d'abstraction – trop pour cet article qui est destiné à vous donner une brève introduction aux concepts afin que vous les connaissiez pendant que vous continuez à apprendre.

L'abstraction est un paradigme d'ingénierie fondamentale avec une grande variété d'applications – pour les besoins 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 Ne vous répétez pas.

Jetons

Si vous avez utilisé un outil de conception moderne pendant une longue période, vous avez probablement rencontré l’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 des 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 bleu-00 est en fait # 0B36CE, alors il vous suffit de le changer en un seul endroit. C'est un joli concept.

Les jetons pour les couleurs dans le composant Lexicon Alerts aident à 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 attribuer 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 de cela serait d'assigner une variable comme $ couleur-primaire et mapper cela à $ blue-00 – maintenant vous pouvez créer du balisage et au lieu de faire référence au bleu, vous faites référence à une variable fonctionnelle. Si vous souhaitez utiliser le même balisage, mais avec un style (thème) différent, il vous suffit de mapper $ couleur-primaire à une nouvelle couleur, et votre balisage n'a pas besoin de changer du tout! La magie!

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 (mis au point par Macromedia / Adobe Fireworks, développé plus tard par Sketch, puis porté au niveau supérieur par Figma et Framer), est désormais plus largement disponible dans la plupart des outils de conception (Adobe XD, InVision Studio, Webflow et bien d'autres). autres). La composanteisation, 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 objet multimé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), le modifiant légèrement en passant des options ou des paramètres et des styles – et lui faire fournir une variété de valeur (fonction).

Ne te répète pas

SEC (Ne vous répétez pas) 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 souvent pas (et sans doute ne devriez pas) vous efforcer d'appliquer le principe DRY à 100% du temps, à chaque fois – il est au moins bénéfique d'en être conscient afin que, pendant que vous travaillez, vous puissiez considérer comment vous peut rendre ce que vous travaillez plus réutilisable.

Une note sur la règle de trois: Un corollaire au principe DRY est la règle de 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 Code du pirate, 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 à l’autre.

CSS et méthodologies de style: Atomic vs BEM

Il existe de nombreuses façons différentes d'organiser et d'écrire du code CSS – Atomic et BEM ne sont que deux des nombreuses 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 «simple» CSS et du style, et peuvent souvent influencer les outils que vous utilisez, la façon dont vous organisez vos fichiers et potentiellement le balisage.

CSS atomique

À ne pas confondre avec Atomic Web Design – atomic (peut-être plus justement 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:

  1. Atomic CSS par Steve Carlson;
  2. Tachyons par Adam Morse;
  3. Tailwind CSS par Adam Wathan.

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 être assez encombré, assez rapidement.

Consultez l'article de John Polacek sur les astuces CSS pour une introduction complète à CSS atomique.

BEM

La philosophie BEM est un excellent précurseur de nombreux frameworks JavaScript modernes comme Angular, React et Vue.

"BEM (Block, Element, Modifier) ​​est une approche basée sur les composants pour le développement web."

– BEM: démarrage rapide

Fondamentalement, tout ce 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 l'état 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. Trop de traits de soulignement, de traits d'union et cela peut sembler inutilement répétitif (.menu, .élément du menu, etc).

Lecture recommandée: BEM For Beginners écrit par Inna Belaya

Merci U, Suivant (.js)

Une fois que vous maîtrisez suffisamment ces sujets, ne vous inquiétez pas, il reste encore beaucoup à apprendre. Quelques suggestions:

  1. Programmation fonctionnelle et orientée objet
    Nous l'avons abordé légèrement, mais il y a beaucoup plus à apprendre au-delà du CSS.
  2. Langages et cadres de niveau supérieur
    Typescript, Ruby, React, Vue sont les prochaines choses que vous aborderez une fois que vous maîtriserez le HTML et le CSS.
  3. Interrogation des langues et utilisation des données
    En vous familiarisant avec GraphQL, MySQL et les API REST, votre capacité de codage passera au niveau supérieur.

Conclusion: les concepteurs qui codent! = Ingénieurs logiciels

J'espère que cet article vous a montré qu'apprendre à coder 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 la même chose que «l'ingénierie logicielle» – être capable de débiter un repo et de copier / coller de code à partir de Stack Overflow peut vous aider beaucoup, et même si la plupart, si pas tous, les ingénieurs logiciels que je connais l'ont fait – vous devez utiliser vos nouvelles compétences 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 designers. 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 soit obscur, obtus et / ou obsolète et j'aimerais avoir l'opportunité de l'améliorer! Veuillez laisser un commentaire ci-dessous, DM moi, ou @mention moi sur Twitter pour que je puisse m'améliorer.

Lectures complémentaires

  1. Codage des bootcamps et des diplômes en informatique: ce que veulent les employeurs et autres perspectives (Kyle Thayer)
  2. Comment commencer à utiliser Sketch et Framer X (par Martina Pérez, )
  3. Introduction aux commandes Linux (par Paul Tero, )
  4. Devenez un utilisateur expérimenté de la ligne de commande avec Oh My ZSH et Z (par Wes Bos, )
  5. Une liste des commandes cmd.exe et Unix courantes que vous pouvez utiliser dans PowerShell (Microsoft Docs)
  6. regular-expressions.info (par Jan Goyvaerts)
  7. regexone.com (apprenez les expressions régulières avec des exercices interactifs simples)
  8. Redimensionnement par lots en utilisant la ligne de commande et ImageMagick (par Vlad Gerasimov, )
  9. Raccourcis et conseils pour améliorer votre productivité avec un texte sublime (par Jai Pandya, )
  10. Le code Visual Studio peut le faire? (par Burke Holland, )
  11. Pourquoi l'historique des versions n'est pas un contrôle de version (par Josh Brewer)
  12. Contrôle de version moderne avec Git (par Tobias Günther, )
  13. "Hello World" (un guide étape par étape de GitHub)
  14. Comment installer Node.js et NPM sur un Mac (par Dave McFarland)
  15. Comment installer Node.js et NPM sur Windows (par Dejan Tucakov)
  16. Pourquoi je crée des commissions atomiques dans Git (par Clarice Bouwer)
  17. Comment écrire un message Git Commit (par Chris Breams)
  18. Code sémantique: quoi? Pourquoi? Comment? (par Paul Boag)
  19. Sémantique structurelle: l'importance des éléments de sectionnement HTML5 (par Heydon Pickering, )
  20. Designing for Performance: Chapter 4. Optimizing Markup and Styles (par Lara C. Hogan, O’Reilly Media)
  21. L'objet multimédia enregistre des centaines de lignes de code (par Nicole Sullivan)
  22. Définissons exactement ce qu'est le CSS atomique (par John Polacek, Astuces CSS)
  23. BEM pour les débutants: pourquoi vous avez besoin de BEM (par Inna Belaya, )
  24. Javascript pour les chats: une introduction pour les nouveaux programmeurs
  25. Roadmap.sh: Développeur Frontend
  26. Programmation fonctionnelle vs OOPS: expliquez comme si j'avais cinq ans
  27. Pourquoi, comment et quand utiliser HTML sémantique et ARIA (par Adam Silver, Astuces CSS)
  28. HTML Semantics (un eBook de )
  29. Les fondamentaux – HTML + CSS (sur Syntax.fm)
  30. Cascade et héritage (westciv.com)
  31. Astuces CSS (par Chris Coyier)
  32. Premiers pas avec la mise en page CSS (par Rachel Andrew, )
  33. Introduction au HTML (documents Web MDN)
  34. Premières étapes CSS (documents Web MDN)
  35. Premiers pas avec JavaScript (documents Web MDN)
  36. 24 façons (par Drew McLellan)
Smashing Editorial(mb, yk, il)