Ce qui est le meilleur moment conseils d’économie pour le développement web front-end?

De démarrer un projet pour une finition, comment pouvez-vous rapidement écrire code HTML, CSS et Javascript? Quelles sont les meilleures pratiques et trucs du métier?

Réponse

Il y a beaucoup de facteurs différents qui peuvent accélérer ou ralentir le développement frontend, je vais essayer de couvrir la majeure partie d'entre eux, espérons que vous l’aimerez:)

1. faire des wireframes / protoypes

Il pourrait ressembler à vous perdrez beaucoup de prototypage temps votre application et faire des croquis de thèses. Personnellement j’ai fait cela pour la plupart de mes projets. Le point est, si vous ne savez pas exactement ce qui est le résultat que vous attendez vous ne se concentrera sur le développement seulement et vous vous arrêterez à développer pour réfléchir à la conception, UI, UX. Larger est le projet que vous travaillez sur, plus vrai il va être.

Je recommanderais UI Stencils si vous voulez accélérer cette étape:)

En outre, vous pouvez le faire directement sur votre ordinateur en utilisant un des outils que vous pouvez trouver sur le web (c’est à dire les 20 meilleurs outils wireframing). Je recommanderais quand même de le faire sur un morceau de papier : c' est plus rapide et plus facile, mais vous ne serez pas en mesure de facilement partager vos prototypes.

2. ne vous répétez pas

Ici, l’idée de base est à simple : essayez de l’enregistrer et réutiliser les trucs que vous avez fait. Il ' plus une sorte de philosophie et de meilleures pratiques plus spécifiques et d’outils.

Tout d’abord, vous avez besoin d’un fichier HTML standard avec des trucs communs en que vous avez l’habitude de mettre. Boilterplate HTML5, comme ils l’appellent "modèle frontal plus populaire du web" est très bien le faire ! La chose à que faire est le télécharger, de prendre et de supprimer ce que vous voulez et construire votre propre modèle HTML. Vous pouvez faire la même chose pour le fichier principal de CSS, je vais parler à ce sujet plus tard.

Vous pouvez également utiliser la même logique de sec à un niveau plus « spécifique », vous pouvez réutiliser des éléments différents, vous avez déjà conçu. Voici comment je le fais :

  1. Tout en développant des projets, j’essaie de concevoir chaque élément comme un seul « module » qui peut-être être réutilisé dans un autre projet plus tard. J’ai éviter d’utiliser des #ids, je m’en tiens à la sémantique, j’utilise plusieurs .classes sur mes éléments pour le rendre facilement personnalisable.
  2. Une fois chaque mois plusieurs j’ai vérifier les derniers projets que je fais et j’archive ce qui, selon moi, que je pourrais réutiliser.
  3. J’organise tous les éléments que j’ai trouvé utile en utilisant un ensemble de règles, donc je peux les trouver facilement plus tard, le.
  4. Je tourne des éléments de thèses dans les extraits de Texte Sublime si je les utilise assez souvent.

Aussi, je vous conseille fortement de jeter un oeil à évolutive et une Architecture modulaire pour le CSS qui va vous apprendre comment construire CSS modulaires (ce dont je parle dans 1.)

3. trouver les bons outils qui correspond à vos besoins

  • HTML

De loin, je recommande fortement Emmet qui est un plugin incroyable accélération écriture HTML et est entièrement personnalisable.

  • CSS

Selon vos besoins à l’aide d’un framework CSS peut être une bonne idée
(Voici une liste : 20 exceptionnelle de textes standards CSS et cadres). Certains d'entre eux sont conçus pour être personnalisés facilement et vous pouvez télécharger certains thèmes personnalisés, vous allez ajouter au-dessus d’eux (Google est votre ami, vous y trouverez beaucoup d'entre eux).

Dans le cas contraire, vous pouvez artisanat votre propre cadre. Voici comment je l’ai fait :

  1. J’ai créé un fichier main.css qui est les seules importations des autres fichiers css / bibliothèques. J’ai aussi mis toutes mes infos copyright dedans.
  2. J’ai splitté differents permettera en différents fichiers :

J’utilise les deux options dépend de quelle taille et comment certains mon projet est.

Un autre outil génial est CSS pré processeur. Il améliore le CSS et le transformer en SASS, moins ce qui est à peu près CSS avec des fonctionnalités supplémentaires comme les variables, imbrication, mixins... Il ne prend pas beaucoup de temps à apprendre n’est vaut le détour ! Voici Syntaxiquement des feuilles de Style génial (SASS) et sites Web Less.js .

  • JavaScript

Je ne suis pas un expert en Javascript (encore!) donc I'wont parler que beaucoup à ce sujet, peut-être que je vais modifier mon post plus tard:)

Je me sers jamais CoffeeScript mais c’est quasiment la même chose comme moins / SASS, il vous aide à écrire Javascript plus rapide en fournissant un Pseudo-langage intelligent qui sera transformé en Javascript par le compilateur.

JavaScript est connu pour avoir beaucoup (comme beaucoup!) de bibliothèques, javascript est le langage qui est utilisé le plus sur Github. Donc si vous google il vous pourriez trouver une bibliothèque tout ce dont vous avez besoin. Il suffit de trouver le bon mot clé.

Si vous travaillez sur une seule page app, SPA, (également appelé RIA) il existe des outils très puissants qui ont été libérés au cours des années (voir Signifie IO). Ces outils sont très puissants mais il prennent beaucoup de temps pour maîtriser, assurer qu’il est utile de votre temps si vous commencez à apprendre (il pourrait être long, mais assez facile parce que les techniques de thèses sont très bien documentés).

  • Outils de ligne de commande

Si vous n’êtes pas peur sur la ligne de commande, bien Monsieur, vous allez pour bientôt être heureux ! (et productive).

-Yeoman, outil d’échafaudage du web pour les applications Web modernes vous aide mise en place très rapidement une grande échelle (surtout les javascript basé) projet.

- Bower est un gestionnaire de dépendance pour frontend apps. Il gère toutes les bibliothèques dont vous avez besoin dans votre projet et maintenir à jour.

-Grunt.js, Le coureur de tâche de JavaScript, automatizes la plupart des tâches de javascript qui sont nécessaires pour mettre un webapp en ligne (nettoyage du code à la recherche d’erreurs, l’exécution des tests unitaires, compilation CoffeeScript ect...)

  • Éditeur de texte

Dernier point mais non le moindre, l’éditeur de texte est l’outil que vous utiliserez le plus, alors vous devrez trouver un que satisfaire vos besoins.

Celle qui est très bien fait et conçu pour les webdesigners est entre crochets, The Free, éditeur de Code Source ouvert pour le Web. C’est très bon pour les trucs de conception web et développeurs sont améliorent il assez souvent.

Ma préférée est Sublime texte, "l’éditeur de texte, avec que vous allez tomber en amour".
Il est puissant, personnalisable, a beaucoup de plugins et beaucoup de fonctionnalités et il est rester simple.

Je ne peux pas finir sans parler de la célèbre http://www.vim.org qui est génial, mais a besoin de beaucoup de temps d’apprentissage.

4. établir un flux de travail, s’y tenir, améliorer

Une fois que vous avez trouvé un workflow et un ensemble d’outils vous sentirez bien avec essayer de s’en tenir à ce flux de travail. S’il y a quelque chose qui vous déplaît, résoudre ce problème, même si vous travaillez sur autre chose (Assurez-vous qu’il ne vous prendra pas toute la journée!).

Vous trouverez toujours quelque chose à améliorer mais ne vous dérange pas que beaucoup sur elle ou vous gaspillerez beaucoup de temps:)

--

Espoir vous aimerez cette réponse, je voudrais savoir si je peux l’améliorer en quelque sorte.


Tags: Programmation informatique, Conseils de programmation informatique, Conseils et Hacks, JavaScript (langage de programmation), Productivité, Feuilles de Style en cascade, HTML, Développement Web front-end