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 

 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 

 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 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: 
 git pull upstream master && git reset --hard upstream / master 
  L'aide de GitHub est un excellent outil  et bien d'autres questions que vous pourriez avoir. 
 HTML et CSS: à partir de la sémantique 
 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. »
 -« Hypertexte »sur  Wikipedia 

 Langage de balisage: 
 «… Un système pour  annoter  un document   d'une manière qui  se distingue syntaxiquement  du texte.» 
 - «Langage de balisage» sur  Wikipedia 

 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. 

 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. »
 -  Cascade - Max Design 

 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." 
 - Rachel Andrew 

 , il est bien plus vital d'apprendre les principes fondamentaux de   -  sélecteurs  l'héritage  le modèle de boîte et surtout,  comment pour 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 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. 
 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 être 
 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é. 

 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? 
 Pour une introduction plus complète au code sémantique, voir  le bref billet de blog de Paul Boag sur le sujet . 
 La ​​sémantique vous offre de nombreux avantages: 

  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. 
  Contenu accessible 
  Votre code sera accessible par défaut ce qui signifie qu'il fonctionnera avec les lecteurs d'écran   et qu'il sera plus facile de  naviguer avec un clavier . 
  Avantages SEO 
 Le balisage sémantique est plus facile pour un machine à lire, ce qui la rend  plus accessible aux moteurs de recherche . 
  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. 

  Remarque:   Pour un examen plus approfondi de la sémantique et du HTML,  Heydon Pickering  a écrit « Sémantique structurelle: l'importance des éléments de sectionnement HTML5 » que je recommande fortement de lire. 
 Principes et paradigmes d'ingénierie: les bases 
 Abstraction 
 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. 

 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: 

  Atomic CSS  par  Steve Carlson ; 
  Tachyons  par  Adam Morse ; 
  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 devenir joli encombré, assez rapide. 
 Consultez  l'article de John Polacek sur les astuces CSS  pour une introduction complète au CSS atomique. 
 BEM 
 La philosophie BEM est un grand précurseur pour beaucoup de la modernité Framework JavaScript comme Angular, React et Vue. 
 "BEM (Block, Element, Modifier) ​​est une approche basée sur les composants du développement web." 
 -  BEM: Quick Start 

 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.). 
  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: 

  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. 
 Lectures complémentaires 

 Codage des bootcamps par rapport aux diplômes en informatique: quels employeurs Want and Other Perspectives  (Kyle Thayer) 
  Comment commencer à utiliser Sketch And Framer X  (par Martina Pérez,  Smashing Magazine ) 
  Introduction To Commandes Linux  (par Paul Tero,  Smashing Magazine ) 
  Devenez un utilisateur puissant en ligne de commande avec Oh My ZSH et Z  (par Wes Bos,  Smashing Magazine ) 
  Liste des commandes cmd.exe et Unix courantes que vous pouvez utiliser dans PowerShell  ( Microsoft Docs ) 
  expressions régulières .info  (par Jan Goyvaerts) 
  regexone.com  (apprendre les expressions régulières avec des exercices interactifs simples) 
  Redimensionnement par lots Utilisation de la ligne de commande et d'ImageMagick  (par Vlad Gerasimov,  Smashing Magazine ) 
  Raccourcis et conseils pour améliorer votre productivité avec un texte sublime  (par Jai Pandya,  Smashing Magazine ) 
  Visual Studio Code Can Do That?  (par Burke Holland,  Smashing Magazine ) 
 
 Pourquoi l'historique des versions n'est pas un contrôle de version  (par Josh Brewer) 
  Contrôle de version moderne avec Git  (par Tobias Günther,  Smashing Magazine ) 
 «[ Hello World » (un GitHub guide pas à pas) 
 Comment installer Node.js et NPM sur un Mac  (par Dave McFarland) 
  Comment installer Node.js et NPM sur Windows  (par Dejan Tucakov) 
  Pourquoi je crée des validations atomiques dans Git  (par Clarice Bouwer) 
  Comment écrire un message de validation Git  (par Chris Breams) [19659016]  Code sémantique: quoi? Pourquoi? Comment?  (par Paul Boag) 
  Sémantique structurelle: l'importance des éléments de sectionnement HTML5  (par Heydon Pickering,  Smashing Magazine ) 
  Concevoir pour Performance: Chapter 4. Optimizing Markup and Styles  (par Lara C. Hogan,  O'Reilly Media ) 
  L'objet multimédia enregistre des centaines de lignes de code  (par Nicole Sullivan) 
  Définissons exactement ce qu'est le CSS atomique  (par John Polacek,  Astuces CSS ) 
 
 BEM pour les débutants: pourquoi vous avez besoin du BEM  (par Inna Belaya,  Smashing Magazine ) 
  Javascript for Cats: An Introduction for New Programmers  
  Roadmap.sh: Frontend Developer  
  Programmation fonctionnelle vs OOPS: expliquez comme si j'avais cinq ans  
  Pourquoi, comment et quand utiliser le HTML sémantique et ARIA  (par Adam S ilver,  Astuces CSS ) 
  HTML Semantics  (un eBook de  Smashing Magazine ) 
  The Fundamentals - HTML + CSS  (sur  Syntax.fm ) 
  Cascade et héritage  ( westciv.com ) 
  Astuces CSS  (par Chris Coyier ) 
  Premiers pas avec la mise en page CSS  (par Rachel Andrew,  Smashing Magazine ) 
  Introduction à HTML  (documents Web MDN) 
 
  Premiers pas avec CSS  (documents Web MDN) 
  Premiers pas avec JavaScript  (documents Web MDN) 
  24 façons  (par Drew McLellan) 

 (mb, yk, il) 








 Le meilleur outil 2023 pour ta croissance Instagram ! 



  










Source link