Devenir un meilleur développeur front-end plus rapide

Donc, vous êtes déjà un très bon développeur web.

Vous avez des cops CSS géniaux (même dans plusieurs navigateurs), vous êtes peut-être un expert de Photoshop depuis des années et vous avez suffisamment de connaissances jQuery pour faire en sorte que presque toutes les animations chaînées se déroulent sans heurts..

Mais certainement vous vous demandez, et après?

En fait, l’une des questions les plus posées au sujet du développement Web est la suivante: "comment rester à la pointe de la technologie?" Chris Coyier a récemment présenté un exposé fantastique sur le sujet. Il existe des sites entièrement consacrés à se tenir au courant des dernières nouvelles en matière de conception de sites Web. La série d’addy Osmani sur la manière de devenir un meilleur ingénieur front-end vous propose un contenu intéressant à consulter sur le sujet; il va sans dire que beaucoup de gens intelligents réfléchissent à ce sujet, vous êtes donc dans la bonne direction..

Fond d'écran Space Ghost, de Mads Frantzen

Dans cet article, nous allons parler d’un moyen très important de vous distinguer et de devenir un meilleur développeur: devenir un outil efficace. développeur d'interaction rapide.


Qu'est-ce que le "développement d'interaction rapide?"

Le terme développement rapide d'interaction est un terme que nous utilisons aujourd'hui pour décrire la pratique consistant à créer rapidement quelque chose pour le Web avec lequel un utilisateur peut interagir, en particulier dans le but de l'itérer et de le polir rapidement. Ce n'est pas la même chose que de concevoir des documents à plat; au lieu de cela, cela inclut la construction de quelque chose qui a un ou plusieurs intrigues d'interaction.

Cela peut inclure, par exemple, un widget que l'utilisateur peut taper dans et rechercher, ou un menu déroulant permettant à l'utilisateur de sélectionner un élément de sous-menu. Ces éléments interactifs sont les éléments constitutifs d'un scénario plus vaste illustrant l'expérience complète de l'utilisateur à utiliser un site Web. Ils sont donc extrêmement importants pour pouvoir parcourir et "ressentir". Lors de la conception d'un site Web, ces interactions peuvent faire ou défaire l'expérience de l'utilisateur, et donc nuire à l'efficacité du site dans son ensemble..

Les interactions ne comportent pas toujours de pièces "mobiles"; En fait, le développement d'interactions rapides repose souvent sur des hiérarchies de contenu et des hyperliens. Le développement de l'interaction prend en compte l'intégralité de l'interaction de l'humain avec l'ordinateur, en intégrant des intuitions sur la base d'utilisateurs, une compréhension de base des facteurs humains et une connaissance du message et de l'image de l'organisation ou de l'individu représentés par l'interaction..


Comprendre la valeur du développement d'interaction rapide

Si j'engage un développeur web front-end (ou n'importe qui d'autre), je penserai à cinq choses principales.

  1. Est-ce que leur personnalité convient à mon équipe?
  2. Sont-ils talentueux?
  3. Sont-ils efficaces?
  4. Sont-ils compatibles?
  5. Puis-je les payer correctement?

Ces questions sont extrêmement importantes pour toute partie du processus d’embauche. La première question est généralement choisie à partir de la chimie d'interaction - ce n'est pas quelque chose que nous allons couvrir dans cet article. La cinquième est généralement décidée au cas par cas et dépasse également le cadre de cet article. Cependant, pour répondre aux trois autres questions, deux facteurs principaux jouent dans le jugement: la vitesse et la précision. Dans le cas du développeur Web, le développement d'interactions rapides est un moyen de prouver que vous avez pris au sérieux le savoir-faire du développement d'interactions..

Le développement d’une interaction rapide n’est pas accidentellement déclenché quand une muse frappe (comme cela peut être le cas avec un degré plus axé sur l’art). Au lieu de cela, le développement d'interaction rapide est une compétence qui est perfectionnée par le développeur. Cette compétence démontre l'efficacité et le talent, et donne plus de confiance en la capacité des développeurs à atteindre la cohérence. Pour pouvoir développer rapidement des interactions, le développeur doit disposer des deux ingrédients magiques: la vitesse et précision.

Un disclaimer: Il se peut que quelqu'un soit embauché parce que, même s'ils ne sont pas aussi doués qu'un autre, ils sont extrêmement cohérents et ont une belle personnalité. Il ne s'agit en aucun cas d'un guide "Comment trouver un emploi en tant que développeur".


Allons-y, allons-nous?

Avec la compréhension de l’importance du développement d’une interaction rapide, nous pouvons maintenant comprendre comment vous pouvez: immédiatement commencer à perfectionner cette compétence. Certains de ces conseils nécessitent un simple changement de mentalité, tandis que d'autres nécessitent un investissement en termes d'apprentissage ou de changement de modèle. Tous ces éléments peuvent toutefois vous aider à devenir un développeur Web meilleur, plus rapide et plus utile..


Optimisez vos schémas

Avez-vous adopté un framework CSS? Si tel est le cas, vous comprenez la valeur du code réutilisable. Vous avez probablement adopté des modèles sans vous en rendre compte. Pour le prouver, demandez-vous: "quand je commence à construire un site Web, quelle est ma première étape?" Si votre réponse est "je ne sais pas", alors il est temps de le comprendre. Si votre réponse est "J'ouvre d'abord mon éditeur de texte", alors vous avez adopté au moins une étape dans un motif..

Alors, comment optimisez-vous un motif? Celles-ci s'appellent souvent des flux de travail, mais ce n'est pas une description adéquate, car le flux de travail n'inclut pas tout ce dont nous voulons parler ici. Certains outils courants pour vous aider à structurer votre modèle sont les "frameworks" CSS et JS tels que Twitter Bootstrap, Foundation ou Topcoat…


… Des outils de prétraitement comme SASS ou LESS…


… Peut-être une optimisation complète et des outils de traitement tels que CodeKit…


… Thèmes de démarrage Wordpress comme Bones, et même la possibilité de créer des scripts personnalisés alimentés par une ligne de commande. Si vous êtes un développeur JavaScript plus avancé et que vous souhaitez vous installer dans un nouvel espace, vous devriez envisager de consulter Backbone, Ember et autres (frameworks JavaScript orientés MVC) [http://todomvc.com/]; Il serait également conseillé de se pencher sur Node, qui permet le JavaScript côté serveur. Cela peut prendre du temps, mais acquérir et apprendre certains de ces outils augmente certainement la productivité à long terme..

Recommandation: Décidez d'un type de document HTML composite / réutilisable "index.html" et de la structure de fichier associée qui respecte les conventions généralement acceptées, est construit avec un balisage sémantique et donne une "ardoise vierge" sur laquelle travailler (think: HTML5 Boilerplate). Peut-être que si vous travaillez principalement avec Wordpress ou un autre outil, vous voudrez peut-être trouver un passe-partout similaire avec une fonctionnalité de base pour cet outil.

Si vous êtes un peu plus avancé, découvrez quelques compétences de Yeoman en matière d'échafaudage de projet rapide et de génération de passe-partout basés sur un assistant. Choisissez un framework CSS et / ou JS (Bootstrap, Foundation, Topcoat) et commencez à utiliser un pré-processeur pour CSS le plus tôt possible. Apprendre à utiliser un pré-processeur vaudra bien votre investissement en temps et ne réduira pas votre productivité, car LESS et SASS peuvent gérer le CSS à la vanille. Essayez de construire une structure filaire complète d'une mise en page de base complètement avec les classes intégrées d'un framework. Vous serez probablement surpris par le peu de code que vous devez écrire pour créer une mise en page fonctionnelle très rapidement. Cela réduit les frais généraux liés à l'écriture de code répétitif et présente l'avantage supplémentaire de tirer parti de tests beaucoup plus approfondis et de considérations relatives à plusieurs navigateurs Web qu'une personne ne peut le faire seule..


Travailler avec ce que vous savez; Apprendre intentionnellement ce que vous n'aimez pas.

Il est absolument important d'adopter un mode de vie d'apprentissage en tant que développeur. L'adoption de nouveaux outils et compétences comme ceux discutés ci-dessus fait partie des forces vives de tout développeur performant. La technologie que nous utilisons tous les jours évolue plus rapidement que tout le reste. afin de rester à ou au-dessus de notre place actuelle dans l'industrie, il est impératif que nous apprenions continuellement.

Mais - il est aussi important de comprendre que apprendre de nouvelles technologies vous ralentira - en premier. Pour cette raison, lorsque vous pratiquez l'itération d'interaction rapide, vous ne devriez pas également apprendre un nouveau cadre. Au lieu de cela, prenez délibérément un peu de temps dans votre semaine et consacrez-le à l’apprentissage de ce cadre via un projet animalier, une soirée de piratage de fin de semaine ou en implémentant des éléments du nouvel outil dans un projet absolument Besoins les nouvelles fonctionnalités fournies par cette solution. Cela vous permettra de garder votre élan et de résoudre les problèmes avec aisance plutôt que dans un environnement incontrôlé Google et StackOverflow. Plus important encore, cette séparation intentionnelle vous permet de vous concentrer sur l'essentiel: résoudre les problèmes de conception plutôt que les bogues de code..

Comme note secondaire, lorsque vous étudiez intentionnellement, cela vous aide également à résoudre des problèmes qui ont déjà des solutions bien connues et bien documentées; bien sûr, le monde n'a pas besoin un autre application simple à faire. Toutefois, la création d'une application à faire peut vous aider à comprendre beaucoup plus le langage JavaScript et peut également vous aider à l'avenir lorsque vous synthétisez des informations afin de résoudre de nouveaux problèmes. Créer des solutions à des problèmes pour lesquels des solutions bien documentées sont déjà disponibles vous aide à comparer votre solution et facilite la recherche d’aide lorsque vous êtes bloqué. Si vous êtes en territoire inconnu et que vous essayez d'apprendre en même temps, il est beaucoup plus probable que vous vous perdiez et que cela nuirait à l'objectif du processus d'apprentissage..


Adoptez des mini-sprints hyperfocalisés

Si vous avez entendu le terme "agile", vous avez peut-être une idée de ce qu'est un sprint. Les sprints sont de courtes périodes de travail prédéfinies où les développeurs décident d'un ensemble d'objectifs et «sprintent» pour les atteindre dans les délais impartis. Parce que nous parlons de développement d'interaction rapide, un sprint est bien adapté à cette discussion. Voici les bases.

  1. Définir
    Prioriser les tâches / objectifs, définir la longueur du sprint, supprimer ou ajouter des tâches jusqu'à ce que le temps estimé pour terminer les tâches corresponde à la longueur prédéfinie du sprint.
  2. Sprint
    C'est le moment où vous êtes "dans la zone" - zéro distraction, etc..
  3. Réfléchir
    Une fois le sprint terminé, vérifiez vos progrès. Avez-vous atteint ou dépassé vos objectifs? Quelle est la cause la plus difficile??
  4. Adapter
    Tirez les leçons de vos réflexions et mettez en place des systèmes pour éviter les blocages..

Dans l'approche agile traditionnelle, les sprints sont basés sur la collaboration d'équipe et durent généralement plusieurs jours, voire plusieurs semaines. Nous parlons ici de mini-sprints autogérés et hyper-focalisés. Ces mini-sprints peuvent même simplement se concentrer sur une tâche ou une interaction unique et ses objectifs associés. Le processus de définition et de hiérarchisation de la tâche ou de ses sous-tâches avant de plonger dans le travail, puis de prendre le temps de réfléchir au processus et d’adapter votre flux de travail ou vos modèles (rappelez-vous qu’il est important d’optimiser vos modèles) vous aidera à prendre conscience de manière plus objective votre rapidité et votre productivité, et vous permettra d'être plus conscient de ce qui pourrait être amélioré au niveau micro.

Recommandation: définissez deux sprints de 3 heures pour une journée, chacun avec une tâche principale. Le but du sprint (comme avec un sprint physique) est de conduire votre cerveau aussi fort que possible pendant ces 3 heures. Après ces 3 heures, vous aurez besoin d'une pause cérébrale. C’est peut-être votre pause-repas ou vous avez peut-être choisi d’adopter un calendrier alternatif pour permettre un bloc de temps hyper-focalisé ininterrompu (nous en parlerons plus tard). Quoi qu'il en soit, planifier ces sprints indépendamment les uns des autres vous aidera à recharger votre cerveau. Cela vaut la peine d'essayer des types d'activités complètement opposés (comme une promenade ou la lecture de fictions) ou même une sieste - plus à ce sujet ici. Si vous travaillez pour une agence, la pause entre les deux est peut-être le temps que vous avez réservé pour des réunions, des tâches administratives ou des tâches de développement moins éprouvantes. Certaines personnes considèrent que c'est la meilleure façon de travailler tous les jours et d'autres choisissent de faire ce type d '"entraînement par intervalles sprint" sporadiquement. choisissez ce qui finit par vous rendre le plus productif et augmente la vitesse de développement de vos interactions.


Bloquer temporairement les sites Web à consulter

Si vous êtes comme la plupart des gens, vos doigts ont une mémoire musculaire. Lorsque vous ouvrez un navigateur, est-il instinctif de saisir immédiatement Hacker News, Tuts + ou Twitter? Quels sont les sites qui vous font procrastiner?


Hacker News a abordé ce problème de manière spécifique, offrant aux utilisateurs inscrits la possibilité de définir une restriction "noprocrastinate". Certains outils intéressants proposent également ce type de restrictions, mais pourquoi ne pas le faire vous-même? Sur un Mac, exécutez les commandes suivantes depuis le terminal:

sudo nano / etc / hosts # entrez votre mot de passe quand il vous le demandera. # Ceci ouvrira un fichier dans un éditeur de code basé sur un terminal; # Ne t'inquiète pas! Vous ne ferez pas grand chose ici. Tapez les lignes suivantes. 0.0.0.0 twitter.com 0.0.0.0 facebook.com # appuyez sur les touches Ctrl + C (quitter), Y (oui, je voudrais enregistrer), puis entrez (enregistrer sous le nom de fichier existant).

Vous pouvez éditer le même fichier sous Windows (voir cette explication).

Cela vous empêchera d’utiliser Twitter ou Facebook et vous redirigera plutôt vers votre hôte local (0.0.0.0 est un raccourci vers votre ordinateur). Pour revenir au réseau social, suivez les mêmes étapes, mais supprimez les lignes que vous avez ajoutées..

Recommandation: Devez-vous bloquer Facebook et Twitter tout le temps pendant que vous travaillez? Nous disons non. Il est logique de pouvoir prendre de petites pauses entre les tâches pour ne pas s'épuiser. Cependant, pendant un sprint, si ces sites vous font apparemment perdre du temps, il est important (au moins jusqu'à ce que vous vous cassiez l'habitude motivée par la mémoire musculaire) de les mettre en pause. La note importante ici est, contrôler votre procrastination, même si cela signifie que le temps de planification gaspiller. Etre conscient du temps que vous consacrez à une activité donnée vous aidera à être plus conscient du fait que ce temps s'écoule ou non de votre contrôle..


Minimiser les interruptions

On sait depuis longtemps que les interruptions diminuent la productivité des travailleurs du savoir. (Voir ici, ici, ici, ici - et il y a beaucoup plus de ressources disponibles grâce à une recherche rapide dans Google.) Les programmeurs (et, par conséquent, les concepteurs Web) sont susceptibles de ne recevoir que un session ininterrompue de 2 heures par jour. Dans la méthodologie agile, il existe le concept des heures de base qui stipule que l'accent doit être maintenu pendant 5 heures au total par jour. C’est loin des deux heures que les programmeurs peuvent espérer atteindre dans un bureau normal..

L'anatomie d'une interruption

Il existe de nombreux types d'interruptions, mais nous examinerons aujourd'hui deux aspects spécifiques de l'interruption. Les premières sont des interruptions bienvenues ou "auto-infligées", les secondes sont des interruptions externes ou "intrusives". Les deux types sont préjudiciables à la productivité et peuvent être gérés de différentes manières.

Interruptions auto-infligées se produire parce que vous avez en quelque sorte créé de l’espace. Celles-ci se présentent généralement sous la forme de notifications programmables (téléphone, ordinateur, etc.).


Interruptions intrusives se produire parce que d’autres humains ont besoin de votre attention. La déconnexion est la timing et sentiment d'urgence. Vous devez gérer votre temps et mettre en place des moyens de contourner autant que possible les effets négatifs de l'interruption..

Alors, que faites-vous pour atténuer les interruptions? Comment réalisez-vous l'heure de la zone zen? Voici quelques unes de nos recommandations.

  1. Réduire ou désactiver complètement les notifications
    Cela inclut les notifications téléphoniques telles que les textes, les e-mails, Twitter et même le "chat". Cachez vos fenêtres de discussion et surveillez-les dans le cadre de votre flux de travail, au lieu de répondre à la "demande". Cela peut sembler gêner votre productivité au début, mais vous serez peut-être surpris de voir à quel point les gens sont prêts à attendre si elle le fait. réellement important, et quelle est leur probabilité de résoudre les problèmes eux-mêmes si vous êtes trop occupé pour rompre avec ce que vous faites.
  2. Demandez à votre direction de lire ceci: adopter un respect organisationnel pour la zone.
    Créez des règles dans l'organisation concernant "l'heure de la zone" ou "l'heure du fabricant". Cela signifie qu'il existe des limites spécifiques pour quand, où et comment vous pouvez interrompre une personne lorsqu'elle se trouve dans la zone. Indiquez des méthodes spécifiques pour indiquer que vous êtes "en-dessous", par exemple en mettant vos écouteurs ou en travaillant dans une partie spécifique de votre bureau. C’est le but des messages "absents" sur le chat, ainsi. La direction doit réserver du temps pour favoriser le développement d’une interaction rapide!
    Gestionnaires: cela peut sembler une menace potentielle pour le bureau, mais vous pouvez l'essayer un peu pour voir quelles pièces ont échoué et lesquelles ont réussi. Vous verrez probablement des augmentations de productivité immédiatement.
  3. S'isoler
    Peut-être la solution la plus efficace, vous isoler fait de vous le contrôleur de votre espace. Cela peut se produire dans de nombreux formats différents. Par exemple, de nombreux concepteurs et développeurs Web travaillent dans des cafés pour plonger dans l'isolement. Cela évitera les interruptions dues à la proximité physique. L'isolement ne signifie pas toujours l'emplacement, cependant; si la plupart des bureaux fonctionnent de 9 h à 17 h, vous travaillerez peut-être de 6 heures à 14 heures ou de 12 heures à 20 heures. Cela vous donnera l’espace et le temps nécessaires pour penser et travailler sans interruption. Peut-être pouvez-vous travailler à distance un ou deux jours par semaine? Peut-être que c'est beaucoup plus simple que cela pour vous, surtout si vous êtes pigiste.
  4. Soyez diligent avec la communication prévue
    Si vous voulez dresser des barrières autour de vous, vous devez également être disposé à tenir parole et à répondre aux messages lorsque vous sortez de sous la zone. Ne lâchez pas cela, sinon les aspects négatifs de vos habitudes de communication réduiront les aspects productifs de votre temps de zone. Oh, et n'oublie pas d'appeler ta mère!

Game On: Compétition et récompense

Qu'est-ce qui rend les événements "hackathon" si productifs? Comment les gens fabriquent-ils des produits viables en 48 heures? Peut-être est-ce un mélange de caractéristiques.
1. Temps prévu, protégé et planifié pour un développement rapide ciblé
2. Compétition avec les autres
3. Récompenses en espèces
Les hackathons rompent avec le "flux normal" du travail quotidien. Certes, nous ne voudrions pas travailler 48 heures de suite tout le temps. Mais les mentalités de productivité qui en découlent sont extrêmement importantes. Nous avons déjà fait allusion à l’importance de la concentration et du temps ininterrompu. Cependant, il est utile de réfléchir à la manière dont la création de systèmes de concurrence et de récompense personnels peut vous aider à accroître votre efficacité en matière de développement. Cela aide à définir des points de repère et entraîne naturellement votre cerveau à s’adapter aux comportements qui la valorisent.

RecommandationSi vous travaillez avec un autre développeur, choisissez un concours avec des objectifs clairs et orientez-le dans le temps. Peu importe quels sont ces objectifs. Prenez le temps de travailler à travers eux. Peut-être que vous pouvez rivaliser avec vous-même; pratique en utilisant les sprints en tant que compétition et fixez vos objectifs augmenter votre efficacité par une certaine quantité de temps. Définissez les récompenses pour les moments où vous êtes dans un mode compétitif, ainsi que lorsque vous terminez un sprint de travail ciblé. Cela vous aidera à rester concentré pendant le sprint lui-même. Une récompense peut être physique (comme une tasse de café) ou moins concrète (comme une place de parking VIP pour une semaine ou un "temps libre").


Plongez dans la communauté Open Source

Nous allons garder ce conseil court, car les avantages ici seront évidents. Le monde de l'Open Source est rempli de personnes incroyables et talentueuses qui construisent des choses qui aident les autres à mieux faire leur travail chaque jour. Des exemples tels que ceux que nous avons mentionnés ci-dessus ne font que gratter la surface. Voici quelques avantages à travailler et à communiquer avec la communauté open source..

  1. Exposition à de nouveaux outils
  2. Solutions gratuites aux problèmes communs
  3. Nouvelles solutions aux problèmes émergents
  4. Une meilleure compréhension des problèmes que vous ignorez peut-être
  5. Possibilité de contribuer et de devenir une partie du cycle de donner / recevoir
  6. Osmose de la pensée: apprendre par la répétition et l'exposition

Plonger dans la communauté open source et apprendre à utiliser les outils proposés peut immédiatement augmenter la productivité, mais il est également beaucoup plus probable qu'une autre personne puisse prendre en charge votre projet et continuer à le développer. L'open source permet aux gens de collaborer autour d'une documentation standard préexistante et définie. Cela réduit les coûts cognitifs liés au transfert de projets et fait de vous un développeur beaucoup plus instruit. cela se traduit immédiatement par une plus grande efficacité.

Recommandation: Obtenez un compte GitHub et commencez à construire avec les outils disponibles sur GitHub.


C’est en quelque sorte une réitération de ce que nous avons dit précédemment: utiliser des frameworks open source pour résoudre les problèmes de manière prévisible et structurée, et participer à la communauté des autres personnes qui le font. La collaboration et la discussion sont des clés très importantes de l'apprentissage.


Conclusion

Il ne s'agit en aucun cas d'une liste complète de choses que vous pouvez faire pour devenir un développeur à interaction rapide. Laissez quelques notes dans les commentaires de choses que vous avez essayées qui ont fonctionné, ont échoué ou ont eu peu ou pas d'effet!