Lorsque les outils sont meilleurs que les cadres

Commençons par une observation: je m'aime quelques cadres. Au lieu de réinventer complètement la roue, ou de styliser un bouton à partir de zéro, là encore, il est difficile de trouver une solution tout-en-un à vos besoins de base en HTML / CSS / JavaScript.

Le problème est que, bien, c'est ce que j'ai dit juste là-haut. Les cadres ne sont-ils pas une solution complète? Pour tout ce que nous leur avons apporté modulaire et facile à personnaliser, ils n’ont parfois pas ce dont nous avons besoin.

Il est impossible d'inclure tous les extraits HTML, styles d'élément ou fonctions javascript possibles. Mais alors, cela peut aussi être une bonne chose.

Un framework peut avoir beaucoup de choses dont nous n’avons pas besoin. Certains de mes travaux les plus frustrants ont consisté à rechercher manuellement dans les fichiers CSS massifs de Bootstrap pour modifier un petit bout de code qui faisait des ravages sur ma conception.

Il suffit de prendre le composant barre de navigation de Bootstrap par exemple. C'est génial, ça marche parfaitement, et ça a l'air bien. Mais si vous essayez de changer la façon dont il a l'air, vous devez changer un grand nombre de styles, et il faut du temps pour les trouver tous. S'il ne s'agit que d'une liste horizontale de liens en haut de la page que vous souhaitez, il peut être plus facile de coder un nouveau à partir de zéro.

Mais bon, les frameworks les plus populaires, Bootstrap en particulier, ont beaucoup d’outils de personnalisation, non? Oui, et c'est une bonne chose, mais les options par défaut ne vous donnent pas assez de place pour travailler.

En termes simples, si vous vous concentrez sur la créativité, un cadre massif n'est probablement pas la solution. Bien sûr, vous pouvez le pirater, mais cela prendra beaucoup de temps.

Un autre problème que j'ai rencontré: incompatibilités JavaScript. En tant que gars qui n'est pas vraiment un programmeur, c'était douloureux.

Plus précisément, il y a eu cette fois où j'ai essayé d'intégrer quelques plug-ins jQuery dans une conception basée sur Foundation. Ce n'est pas un problème en soi, mais le débogage est plus long.

Bien sûr, c'était l'année dernière. Honnêtement, je ne sais pas ce qui se passerait si j'essayais la même chose avec les nouvelles versions du même framework et des mêmes plugins, mais c'est toujours quelque chose à considérer.

En résumé, il y a des moments où les cadres ne sont tout simplement pas la solution. C'est là qu'intervient la boîte à outils et vous devriez en avoir une.

Alors, qu'est-ce qu'une boîte à outils et en quoi est-elle différente d'un cadre?

Un kit d’outils, dans le contexte de cet article, est un ensemble d’outils, d’extraits, de plug-ins et de ressources auto-collectés et organisés qui vous permet de coder vos projets beaucoup plus rapidement. Les gens trouvent souvent ces ressources au fil du temps et s'y attachent. C'est une chose personnelle, et vous devez vraiment faire les vôtres.

Similitudes

• Les boîtes à outils et les frameworks sont tous deux largement constitués de code conçu pour vous aider à démarrer.
• Leur travail consiste à vous faciliter la vie, mais ils ne peuvent ni ne doivent faire tout le travail pour vous.
• Ils doivent tous deux être maintenus et mis à jour pour refléter les dernières technologies en jeu.

Différences

• Les boîtes à outils ne font aucune hypothèse de conception ou de structure, ce que font souvent les cadres.
• Les boîtes à outils sont généralement constituées de choses provenant de sources entièrement différentes.
• Ce n'est pas juste du code, les kits d'outils peuvent inclure des logiciels, des liens marqués, etc.
• Les toolkits n'ont généralement pas de "fichiers par défaut", vous laissant choisir.

Alors, quand devrais-je utiliser quoi?

L'avantage d'une boîte à outils par rapport à un framework est sa grande polyvalence. Comme indiqué précédemment, dans les projets où vous avez l'intention de repousser les limites du design, un cadre est souvent trop lourd.

Cette même qualité est également la chute du cadre dans les projets de petite et moyenne taille. Construisez-vous une page d'accueil promotionnelle? Un site Web d'une page? Un simple blog? Un cadre est probablement inutile. Il vaut mieux partir de zéro et faire de chaque détail du projet le vôtre.

J'irais jusqu'à dire - ce n'est que mon avis - que la plupart des sites Web axés sur le contenu n'ont pas besoin d'un cadre complet. L’exception serait pour les sites massifs, comme ars technica par exemple. Pour quelque chose d'aussi grand, vous devez utiliser un framework, mais vous devriez probablement le développer à partir de rien pour répondre aux besoins exacts du site.

Là où les frameworks comme Bootstrap et Foundation brillent vraiment, c'est dans le développement d'applications Web et les sites Web basés sur des applications. C'est dans ces projets que les contraintes relativement rigides sont utiles, au lieu de vous ralentir.

Comment faire votre propre boîte à outils.

Faire votre propre boîte à outils est une question de temps, de patience et d'expérience. Je veux dire, bien sûr, vous pouvez simplement faire une recherche pour "ressources de conception Web". Vous obtiendrez des milliers de visites, et en quelques heures, vous pourrez télécharger plus de bits de code que vous ne pourriez jamais utiliser.

Mais ce n'est pas une boîte à outils. C'est une bibliothèque que vous ne toucherez jamais, car le tri durerait beaucoup trop longtemps. Nous sommes des gens occupés, alors j'ai adopté une approche plus organique: quand je rencontre un problème, je le Google.

Les snippets sont souvent trop longs à mémoriser, donc si je me retrouve à chercher à plusieurs reprises la même chose, je les ajoute à ma boîte à outils. La même chose vaut pour les logiciels: si vous savez que vous allez en utiliser beaucoup, vous l'ajoutez.

Cela ne veut pas dire que vous ne devriez jamais prendre le temps de simplement essayer de nouveaux "jouets" ... vous devriez. Si vous entendez parler d’une ressource particulière qui pourrait changer votre façon de travailler pour le mieux, consultez-la. Mais rappelez-vous que les kits d’outils sont mieux conservés. Vous devez vous concentrer sur la conservation de ce dont vous avez besoin pour répondre aux besoins que vous rencontrez régulièrement.

Ma boîte à outils

Encore une fois, je vous rappelle que les kits d’outils sont quelque chose que vous devez faire vous-même pour répondre à vos propres besoins. Cependant, je vais énumérer les éléments de ma boîte à outils pour vous donner une meilleure idée de ce que vous devez rechercher lorsque vous créez les vôtres.

Un pré-processeur CSS

Pré-processeurs CSS comme MOINS et TOUPET faire deux choses:

1. Ils étendent les fonctionnalités de base CSS avec des variables, mixins, sélecteurs imbriqués, etc.
2. Ils rendent le codage CSS plus rapide.

Si vous n'avez pas encore essayé le codage CSS avec un pré-processeur, je vous invite à le faire maintenant. Maintenant. J'attendrai.

Des signets

Une liste de signets bien organisée peut être très utile lorsque vous avez besoin de quelque chose que vous ne pouvez pas enregistrer sur votre disque dur local. Je marque des choses comme Générateurs CSS3 , générateurs de sprites , créateurs de couleurs et d’autres outils qui me permettent d’accomplir rapidement des tâches qui prennent beaucoup plus de temps lorsque vous les effectuez à la main.

Semantic.gs: un moteur de mise en page

Les systèmes de grille sont donc des années 2000. Depuis que la conception Web réactive est devenue une réalité, les systèmes de réseau sont devenus de plus en plus complexes pour répondre aux besoins de nombreux appareils.

Et si vous avez besoin d'un système de grille personnalisé? Vous pourriez trouver l'un des nombreux générateurs de systèmes de grille réactifs en ligne, mais ils sont limités.

La solution se présente sous la forme de sémantique.gs . Maintenant, alors que son propre auteur l'appelle un système de grille, je choisis de l'appeler un moteur de mise en page, car ce n'est pas une grille. C'est un outil basé sur le pré-traitement CSS (vous pouvez l'utiliser avec LESS, SASS et Stylus), et vous permet de générer n'importe quelle grille que vous aimez, à largeur fixe ou réactive, à la volée.

Tout ce que vous avez à faire est de changer certains nombres dans un fichier .less (ou SASS, etc.) et de partir.

Emmet - anciennement connu sous le nom de Zen Coding

Emmet est une collection de plugins qui transforment les abréviations en lignes de code complètes, à la fois en HTML et en CSS.

Fondamentalement, cela tourne ceci:

div>ul>li*3>a

Dans ceci:

https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow>  celui-ci pour WordPress  .  Les fonctions de modèle de WordPress et les options pour functions.php peuvent être difficiles à retenir, ce qui vous permet de gagner du temps. 
  plugins jQuery 
  Comme je l’ai déjà dit, je ne suis pas un vrai programmeur.  Ainsi, lorsque des fonctionnalités avancées d’animation ou d’interface utilisateur sont requises, mais pas trop pour qu’un framework en vaille la peine, je me tourne vers des plug-ins individuels. 
  Certains de mes favoris sont: 
Scrollto.js  : un script de défilement lisse. 
idTabs  : pour quand vous avez besoin d'une interface utilisateur à onglets. 
Surdimensionné  : pour quand vous avez besoin d’un diaporama complet. 
ResponsiveSlides.js  : ce que le nom dit  C'est un curseur d'image réactif.  Que pourrais-tu vouloir de plus? 
  Il n'est jamais trop tôt pour avoir votre propre bibliothèque de choses utiles. 
  Quels outils souhaiteriez-vous voir dans votre boîte à outils?  Quelles ressources ne pourriez-vous pas vivre sans?  Faites le nous savoir dans les commentaires. 
  Image / vignette en vedette,   image de la trousse de mathématicien  via Marc Kjerland. 


        

                        meilleures conceptions d'application