Fermer

juin 10, 2021

Plaques chauffantes et kits de démarrage utiles37 minutes de lecture



Nous n'avons pas besoin de tout écrire à partir de zéro à chaque fois. Avec des modèles standard et des kits de démarrage, nous pouvons mettre en place nos projets plus rapidement et nous mettre au travail immédiatement. Nous avons également récemment couvert les outils d'audit CSS générateurs CSS composants frontaux accessibles et extensions de code VS — vous pourriez nous les trouvons également utiles.

Aujourd'hui, nous mettons à l'honneur les boilerplates et kits de démarrage pour toutes sortes de projets, des modèles de site statiques aux kits de démarrage React/Vue en passant par les modèles de favicon et d'accessibilité et modèles de sites d'urgence. Cette collection n'est en aucun cas complète, mais plutôt une sélection de choses que l'équipe de Smashing a trouvées utiles et espèrent rendre votre travail quotidien plus productif et efficace.

Si vous êtes intéressé par plus d'outils comme ceux-ci ceux, s'il vous plaît ne jetez un œil à notre belle newsletterafin que vous puissiez obtenir des conseils comme ceux-ci directement dans votre boîte de réception !

Table des matières

Vous trouverez ci-dessous des sauts rapides vers des les passe-partout et les guides dont vous pourriez avoir besoin. Faites défiler vers le bas pour un aperçu général ou ignorez la table des matières.

Accessibilité Boilerplate

Pour éviter que l'accessibilité ne devienne une réflexion après coup, c'est une bonne idée de déjà jeter les bases lors du démarrage d'un projet Web . Donc, si vous recherchez une solution passe-partout pour démarrer votre projet de manière responsable, le Accessibility Boilerplate est fait pour vous.

Un modèle par défaut sensé qui est facilement accessible par les moteurs de recherche et les technologies d'assistance
A modèle par défaut sensible qui est facilement accessible par les moteurs de recherche et les technologies d'assistance.

Le modèle utilise un ancien balisage sémantique pour structurer correctement votre contenu, le rendant facilement accessible par les moteurs de recherche et les technologies d'assistance. La syntaxe HTML5 est encore améliorée avec les rôles ARIA et les microdonnées. Un bon vieux temps.

Au cas où vous auriez besoin d'un peu d'aide avec WAI-ARIA, cette collection d'extraits accessibles vous sera certainement utile. Les extraits incluent tous les attributs et descriptions WAI-ARIA pour vous aider à rendre votre contenu plus accessible. Pour vous aider à résoudre les erreurs d'accessibilité existantes, Jacob Lett a rassemblé une collection d'extraits pour réduire le texte de titre redondant, traiter les liens vides utilisés pour le comportement de JavaScript et donner un sens aux éléments visuels comme les icônes.

ASP. .NET Boilerplate

Le ASP.NET Boilerplate utilise des outils familiers pour vous offrir une solide expérience de développeur lors de la création d'applications Web modernes. Basé sur une conception axée sur le domaine, il fournit une infrastructure solide et un modèle de développement pour la modularité, la multilocation, la mise en cache, les tâches en arrière-plan, les filtres de données, la gestion des paramètres, les événements de domaine, les tests unitaires et d'intégration, et tout ce dont vous aurez besoin plus de temps pour vous concentrer sur votre code métier. Les modèles de démarrage vous aident à démarrer, que ce soit avec une application angulaire à page unique ou une architecture MVC et jQuery classique.

 ASP.NET Boilerplate automatise les tâches courantes de développement de logiciels par convention.
Le ASP.NET Boilerplate automatise les tâches courantes de développement de logiciels par convention.

Un autre passe-partout à part entière est le ASP.NET Core Hero Boilerplate. Il vous permet d'exécuter une seule ligne de CLI sur votre console pour obtenir une implémentation complète. Le modèle inclut à la fois WebAPI et MVC. Un point de départ parfait pour en savoir plus sur divers packages et architectures essentiels.

Boilerplate d'extensions de navigateur

Envisagez-vous de créer une extension de navigateur ? Le Boilerplate Browser Extension Webpack est là pour vous. Conçues pour créer des extensions de navigateur WebExtensions basées sur l'API à l'aide de Webpack, les extensions sont, en théorie, compatibles avec Chrome, Chromium, Firefox, Firefox pour Android, Opera et Microsoft Edge. La compatibilité réelle dépendra des API que vous avez utilisées.

Modern Cross-Browser Extensions Boilerplate

Les choses qui semblent triviales dans le monde du développement Web peuvent s'avérer étonnamment difficiles dans un contexte d'extension Web. Surtout quand il s'agit d'extensions multi-navigateurs. Pour vous donner l'expérience que vous connaissez de la création d'applications Web multi-navigateurs lors du développement d'extensions Web multi-navigateurs, Cezar Augusto a créé extension-create.

Créez des extensions multi-navigateurs sans configuration de génération
Créez des extensions multi-navigateurs sans configuration de build. ( Grand aperçu)

extension-create vous aide à développer des extensions multi-navigateurs avec une prise en charge intégrée pour l'import/export de modules, le rechargement automatique, etc. Aucune configuration de build n'est nécessaire : pour créer une extension, une nouvelle instance de navigateur (pour l'instant, Chrome) s'ouvrira et vous êtes prêt à vous lancer. Chaque commande et fonctionnalité principale fonctionne comme un module autonome, ce qui est particulièrement utile si vous avez configuré votre extension mais souhaitez bénéficier de fonctionnalités spécifiques, telles que le lanceur de navigateur avec rechargement automatique par défaut.

Réinitialisations CSS modernes et leurs alternatives

Les problèmes de compatibilité du navigateur CSS étant beaucoup moins probables aujourd'hui, les réinitialisations CSS ont deviennent pour la plupart redondants. Cependant, il existe des cas où une réinitialisation CSS moderne peut toujours avoir du sens. La taille de la boîte, les styles de corps, les liens, les styles d'image fluides, les polices et une requête @media pour un mouvement réduit, ce sont des choses que vous voudrez peut-être réinitialiser, comme le montre Andy Bell. Une réinitialisation moderne des valeurs par défaut sensibles, pour ainsi dire.

Normalize.css
Contrairement à de nombreuses réinitialisations CSS, Normalize.css préserve les valeurs par défaut utiles. ( Grand aperçu)

Une autre alternative moderne aux réinitialisations CSS est Normalize.css. Il normalise les styles pour un large éventail d'éléments, corrige les bogues et les incohérences du navigateur, améliore la convivialité avec des modifications subtiles et utilise des commentaires détaillés pour expliquer ce que fait le code.

CSS Boilerplates And Snippets

Vous vous lancez dans un projet plus petit. ou pensez-vous qu'un cadre plus large est excessif pour vos besoins ? Barebones ne stylise qu'une poignée d'éléments HTML standard et de grille CSS, et, en fin de compte, c'est souvent plus que suffisant pour commencer. Avec ses 400 lignes environ, le passe-partout est léger comme une plume, et il n'y a aucune compilation ou installation nécessaire pour vous aider à démarrer.

Rencontrez Barebones
Grâce aux variables CSS, Barebones maintient l'indépendance des autres outils et simplifie le thème et le changement de marque, tandis que CSS Grid vous offre flexibilité et puissance en matière de mises en page.

La collection d'extraits CSS par 30 secondes de code contient des utilitaires et des exemples interactifs pour CSS3. Qu'il s'agisse de cases à cocher personnalisées, de superpositions de menus ou d'animations de boutons, la collection vous propose des extraits utiles pour les mises en page, le style et les éléments d'animation, et la gestion des interactions utilisateur. CodeMyUI propose également une collection d'extraits de code CSS purs pour les interfaces utilisateur – certains d'entre eux avec des effets assez sophistiqués.

Thèmes de couleur pour votre environnement de développement

Avez-vous déjà souhaité pour un thème de couleur rationalisé dans l'ensemble de votre environnement de développement ? Un qui vous semble agréable pour les yeux et qui reste le même lorsque vous passez de votre éditeur de code au terminal en passant par Slack ? themer vous aide à y parvenir.

Un thème de couleurs simplifié pour votre terminal, votre éditeur et vos applications
Un thème de couleurs simplifié pour votre terminal, votre éditeur et vos applications.

themer prend un ensemble de couleurs et génère des thèmes pour votre environnement de développement en fonction de celles-ci. Vous pouvez soit commencer avec un jeu de couleurs prédéfini, soit en créer un à partir de zéro en entrant deux nuances principales pour la couleur d'arrière-plan et le texte de premier plan et les couleurs d'accent pour la coloration syntaxique, les erreurs, les avertissements et les messages de réussite. Une fois que vous êtes satisfait du résultat, vous pouvez télécharger les thèmes que vous souhaitez générer à partir de la palette – différents terminaux et éditeurs de texte sont pris en charge, tout comme Slack, Alfred, Chrome, Prism et d'autres outils et services. Pour compléter la coordination des couleurs, il existe également des fonds d'écran assortis en fonction de votre thème.

Bootstrap Your Dotfiles

Dotbot vous aide à installer des dotfiles avec une seule commande courte, même sur un système fraîchement installé. Il est conçu pour être léger et autonome (aucune dépendance externe ni installation requise) et peut être utilisé en remplacement de tout autre outil que vous utilisiez pour gérer vos fichiers dotfiles. Dotbot utilise des fichiers de configuration au format YAML ou JSON pour vous permettre de spécifier comment vous définissez vos fichiers dot et il sait comment lier des fichiers et des dossiers, créer des dossiers, exécuter des commandes shell et nettoyer les répertoires des liens symboliques rompus. Les plugins utilisateur sont pris en charge pour les commandes personnalisées.

Bootstrap vos fichiers dot avec Dotbot
Bootstrap vos dotfiles avec Dotbot.

Si vous voulez approfondir les dotfiles, le Awesome Dotfiles contient des articles et des didacticiels utiles, ainsi que des exemples de référentiels et de frameworks dotfile, des outils, etc.

Electron Boilerplate

Une application minimaliste boilerplate pour Electron runtime vient de Jakub Szwacz. Pour vous fournir une base facile à comprendre sur laquelle vous pouvez vous appuyer, il n'inclut que le strict minimum d'outils et de dépendances nécessaires à un environnement Electron entièrement fonctionnel. Le passe-partout ne vous impose aucune technologie frontale, vous êtes donc libre de choisir votre favori.

Emergency Site Kit

En cas d'urgence, de nombreuses organisations ont besoin d'un moyen rapide de publier des informations critiques. Cependant, les sites Web CMS existants sont souvent incapables de gérer les pics de trafic soudains et, selon le type d'urgence, l'infrastructure du réseau local peut même être endommagée, laissant les personnes avec de mauvaises connexions mobiles à l'extérieur. Le Emergency Site Kit de Max Boeck est là pour fournir aux gens les informations dont ils ont besoin dans de tels cas, quelles que soient les circonstances.

Publiez rapidement un site d'urgence avec une résilience maximale
Publiez rapidement un site d'urgence avec résilience maximale.

Le kit vous aide à publier rapidement un site Web simple, rapide, accessible et capable de supporter un trafic important. Construit sur la règle de la moindre puissance, il utilise des technologies simples pour assurer une résilience maximale : les fichiers statiques sont optimisés pour le premier aller-retour, il n'y a qu'un style de base et une demande critique, et les techniciens de maintenance assurent une assistance hors ligne. Un pour les signets.

Comment Favicon en 2021

Parfois, c'est une bonne idée de réévaluer les meilleures pratiques. En ce qui concerne les favicons, par exemple, en particulier compte tenu du fait que les développeurs frontaux doivent gérer plus de 20 fichiers PNG statiques pour afficher un simple favicon de nos jours. Pour simplifier le processus, Andrey Sitnik a proposé une solution plus intelligente qui ne nécessite que cinq icônes et un fichier JSON pour répondre aux besoins les plus modernes.

 Une solution sans tracas pour les favicons
A solution sans tracas pour les favicons.

Inspiré par l'approche d'Andrey, Chris Coyier est allé encore plus loin et est devenu ultra-minimaliste pour le favicon CSS Tricks. Il explique comment cela fonctionne dans son article "Comment Favicon en 2021". Un concept SVG pour préparer vos favicons pour le mode sombre est également inclus.

Un passe-partout pour les formulaires

Soyons honnêtes, les formulaires peuvent être pénibles. Heureusement, il existe un petit standard HTML et CSS pour changer cela : Boilerform. Fournissant un CSS de base structuré par BEM et des attributs appropriés sur les éléments, le petit passe-partout donne à vos formulaires une longueur d'avance.

Simplifiez-vous le travail avec des formulaires
Supprimez-vous de travailler avec des formulaires.

Conçu pour être simple à mettre en œuvre, vous pouvez, dans sa forme la plus basique, déposer un fichier CSS dans votre tête avec un court extrait et envelopper vos éléments dans un wrapper boilerform. Pour vous donner plus de contrôle, il existe également une bibliothèque Sass et Patterns avec laquelle travailler. Qu'il s'agisse d'un formulaire de contact, d'un paiement par carte ou d'une inscription utilisateur, Boilerform a ce qu'il vous faut.

Boilerplates front-end tout-en-un

Le Boilerplate de développement frontal moderne est un tout -un kit de démarrage pour développer, créer et déployer votre prochain projet Web. Les fonctionnalités incluent plusieurs frameworks SCSS frontaux, une structure de dossiers facile à gérer, un emplacement centralisé pour gérer les paramètres liés au projet tels que les images, les polices et JavaScript, la génération de polices sans tracas, une fonction de sauvegarde intégrée, et bien plus encore. plus.

Tout ce dont vous avez besoin pour développer, créer et déployer votre prochain projet dans un seul package
Tout ce dont vous avez besoin pour développer, créer et déployer votre prochain projet dans un seul package.

Un autre passe-partout frontal moderne vient de l'équipe du studio de produits numériques tonik : la HTML Frontend Boilerplate est une solution moderne pour créer des applications et des sites Web rapides, organisés et standardisés.

GitHub Template Guidelines

Peu importe si c'est un dépôt privé que vous partagez avec votre équipe ou un outil open-source destiné à la communauté : la première chose que les gens voient habituellement de votre projet est le Readme sur GitHub. Mais que contient le fichier Lisez-moi qui apporte réellement de la valeur à l'utilisateur ? Cezar Augusto a élaboré des directives pour la création de modèles GitHub. Pratique !

Un modèle pour les référentiels GitHub conviviaux
Un modèle pour les référentiels GitHub conviviaux.

Créez des fichiers .gitignore pour vos référentiels Git

Un autre petit détail qui peut être automatisé pour vous en sauver un temps précieux sont les fichiers .gitignore. gitignore.io fait exactement cela. Le site a une méthode graphique et une méthode de ligne de commande pour créer des fichiers .gitignore pour votre système d'exploitation, langage de programmation ou IDE.

Peu importe si vous préférez la ligne de commande ou une interface graphique, gitignore. io vous fait gagner du temps lors de la création de fichiers .gitignore
Peu importe si vous préférez la ligne de commande ou une interface graphique, gitignore.io vous fait gagner du temps lors de la création de fichiers .gitignore.

Vous pouvez soit entrer le système et la langue que vous souhaitez ignorer directement sur le site ou copiez l'extrait qui correspond à votre shell à partir des documents pour créer un alias et, enfin, le fichier .gitignore à l'aide de la ligne de commande.

Hackathon Starter[19659007]Si vous avez déjà assisté à un hackathon, vous savez combien de temps il faut pour démarrer un projet : une fois que vous avez décidé quoi construire, vous devez choisir un langage de programmation, un framework Web, un framework CSS, et vous avez besoin pour mettre en place un projet initial que les membres de l'équipe peuvent con hommage à.

Un kickstarter pour les applications Node.js
Un kickstarter pour les applications Node.js.

Hackathon Starter est là pour vous aider à définir la base de vos applications Web Node.js. afin que vous puissiez vous concentrer sur ce qui compte vraiment : le projet de hackathon lui-même. Le passe-partout propose une authentification locale avec e-mail et mot de passe, une authentification via Twitter, Facebook, Google, GitHub, LinkedIn et Instagram, des notifications flash, une structure de projet MVC, une gestion de compte, des exemples d'API et bien plus encore pour vous aider à démarrer.

HTML Boilerplate Explained

Comment démarrer un nouveau projet ? Copiez-vous la structure HTML du dernier site que vous avez construit ou peut-être un passe-partout de HTML5 Boilerplate ? Manuel Matuzović fait généralement de même, mais récemment, il a rencontré une situation où le copier-coller n'était pas une option : pour documenter la structure que lui et son équipe utilisent au travail, il a dû comprendre les choix qui ont été faits.[19659088]Un passe-partout avec une explication détaillée de ce qui fait quoi »/>

Un passe-partout avec une explication détaillée de ce qui fait quoi.

La tâche a pris un certain temps à rechercher, alors Manuel a publié le passe-partout sur son blog à la portée de tous, ainsi que des explications détaillées pour chaque ligne de code afin que vous sachiez exactement à quoi vous avez affaire. Une excellente occasion de plonger plus profondément dans la structure sous-jacente d'une page.

Mobile-First Boilerplates

Avez-vous besoin d'un passe-partout léger et mobile-first qui n'inclut que l'essentiel ? Alors Kraken pourrait être pour vous. Kraken n'est pas censé être un produit fini mais plutôt un point de départ que vous pouvez adapter à n'importe quel projet. La structure de base est une disposition à colonne unique entièrement fluide, et une approche orientée objet du CSS vous permet de mélanger, de faire correspondre et de réutiliser des classes tout au long d'un projet.

 Kraken est conçu pour être flexible et modulaire, avec des performances et une accessibilité. à l'esprit
Kraken est conçu pour être flexible et modulaire, avec des performances et une accessibilité à l'esprit.

Une autre grande petite aide si vous pensez que vous n'avez pas besoin de toute l'utilité des cadres plus grands est Squelette. Il ne style qu'une poignée d'éléments HTML standard et comprend une grille. Le passe-partout se débrouille avec seulement 400 lignes et il n'y a aucune installation et aucune compilation nécessaire pour commencer.

HTML5 Boilerplate

L'un des passe-partout les plus populaires (sinon le plus populaire) pour vous aider à construire rapidement, robuste et applications ou sites Web adaptables, est HTML5 Boilerplate. Il regroupe les connaissances et les efforts combinés de centaines de développeurs dans un petit package.

Un modèle professionnel pour créer des applications et des sites Web rapides, robustes et adaptables
Un modèle professionnel pour créer un site Web rapide, robuste et adaptable applications et sites.

Qu'y a-t-il dedans ? Un modèle HTML léger et adapté aux mobiles, avec un extrait optimisé de Google Analytics, une icône d'appareil tactile d'espace réservé et des documents contenant des trucs et astuces supplémentaires. Le passe-partout comprend également Normalize.css, une alternative moderne et prête pour HTML5 aux réinitialisations CSS, ainsi que d'autres styles de base, assistants, requêtes multimédias et styles d'impression. Parfait pour donner une longueur d'avance à votre projet.

Une alternative qui mérite d'être examinée est le Modern HTML Starter Template d'Igor Agapov, qui a été conçu en mettant l'accent sur la performance.

Boilerplates For Responsive HTML Emails

]Nous connaissons tous les défis liés au formatage des e-mails HTML. Un passe-partout pratique pour envoyer des messages bien formatés tout en évitant certains des principaux pièges vient de Sean Powell : HTML Email Boilerplate.

Évitez les pièges courants avec un passe-partout pour les e-mails réactifs
Évitez les pièges courants avec un passe-partout pour les e-mails réactifs.

Le modèle de Sean est disponible en deux versions – avec et sans commentaires – et se compose d'un en-tête avec des styles globaux et d'une section de corps avec des correctifs et des conseils plus spécifiques à utiliser si nécessaire dans votre conception. Que vous souhaitiez créer votre propre modèle basé sur les extraits ou choisir ceux qui résolvent vos problèmes de rendu spécifiques, le passe-partout vous couvre. Modèle de codeun modèle simple et épuré que vous pouvez utiliser pour chaque e-mail que vous envoyez. Si vous souhaitez savoir pourquoi chaque partie du code se trouve là où elle se trouve, Mark le détaille plus en détail.

Développé pour vous aider à créer des e-mails HTML réactifs en toute confiance, le Email Framework fournit vous avec des options de grille prédéfinies pour les mises en page réactives/fluides et hybrides ainsi qu'avec des composants communs. Le framework prend en charge plus de 60 clients de messagerie et a été minutieusement testé à l'aide de Litmus.

Enfin et surtout, pour les occasions où tout ce dont vous avez besoin est un simple modèle HTML réactif avec un bouton d'appel clair, vous voudrez peut-être aussi pour consulter le modèle de Lee Munroe. Il est testé sur tous les principaux clients de messagerie, sur mobile, ordinateur de bureau et Web. Bon e-mailing !

Un guide complet du HTML

La tête d'une page Web peut être assez pleine, surtout dans les grandes pages. Mais de quoi avez-vous réellement besoin ? Et comment organiser la tête pour éviter les implications sur les performances ? Josh Buchea a élaboré un guide pratique qui plonge profondément dans les éléments HTML .

Un guide gratuit sur les éléments principaux HTML5
Un guide gratuit sur les éléments principaux HTML5

Le guide couvre tout du minimum recommandé et incluant des éléments sur la façon dont un document doit être rendu aux liens et références, favicons, médias sociaux, tout comme les informations dépendantes du navigateur pour des choses comme les bannières d'applications intelligentes ou les fonctionnalités « ajouter à l'écran d'accueil ». Un joli bonus : Le guide est disponible en 11 langues. Un pour les signets.

PHP Boilerplates

Si vous recherchez un framework PHP simple mais puissant avec un très faible encombrement, CodeIgniter est là pour vous. CodeIgniter encourage MVC sans vous l'imposer, il a des performances exceptionnelles et est livré avec une protection intégrée contre les attaques CSRF et CSS. Il n'y a presque aucune configuration requise pour vous permettre d'être opérationnel.

Un passe-partout PHP léger, simple et puissant
Un passe-partout PHP léger, simple et puissant.

Un framework PHP qui a également été construit avec simplicité, performances et sécurité à l'esprit est le PHP Microsite Boilerplate. Comme son nom l'indique, il est parfait pour créer un site Web plutôt petit sans structure de code complexe. Les fonctionnalités clés incluent un routage facile, un cache de serviceworker intelligent, et il est optimisé pour le référencement et préparé pour les pages mobiles accélérées ainsi que pour les applications Web progressives.

Créer des projets à partir de cookies

Un utilitaire de ligne de commande qui crée des projets à partir de cookies. (c'est-à-dire des modèles de projet) ? Cookiecutter fait exactement cela. Il prend une arborescence de répertoires source, la copie dans votre nouveau projet et remplace tous les noms entourés de balises de modèle {{ et }} par les noms qu'il trouve dans cookiecutter.json . Il peut s'agir de noms de fichiers, de noms de répertoires et de chaînes à l'intérieur de fichiers. Cela vous permet d'amorcer un nouveau projet à partir d'un formulaire standard, en sautant toutes les erreurs souvent impliquées lors du démarrage d'un nouveau projet. Les modèles de projet peuvent être dans n'importe quelle langue ou format de balisage et vous pouvez utiliser à la fois des emporte-pièces locaux ou distants à partir de dépôts Git ou Mercurial. Quick Snippets

Parfois, vous tombez sur une petite astuce qui s'avère être de l'or : peut-être s'agit-il d'une solution à un problème que vous bricolez depuis un certain temps ou d'un extrait de code court qui rend votre flux de travail beaucoup plus efficace. Le site QuickSnippets recueille de petites pépites comme celles-ci.

Des extraits précieux pour améliorer votre flux de travail
Des extraits précieux pour améliorer votre flux de travail.

Actuellement, la collection comprend près de 1 300 extraits de 296 auteurs pour vous aider. vous dans votre travail quotidien. Les extraits couvrent tout, des navigateurs, outils et éditeurs à CSS, HTML, JavaScript, Laravel, PHP, React, UI/UX et Vue.js. Un coffre au trésor qui ne demande qu'à être ouvert.

React Boilerplates

En ce qui concerne React, il existe plusieurs passe-partout créés par la communauté qui ne manqueront pas de vous faire gagner du temps. L'un d'eux est le React Boilerplate. La base hautement évolutive et hors ligne d'abord a été créée en mettant l'accent sur les performances, les meilleures pratiques et l'expérience des développeurs et brille avec des fonctionnalités telles que l'échafaudage rapide, la rétroaction instantanée, la gestion prévisible des changements et la prise en charge de l'internationalisation, entre autres.

 Construisez des applications évolutives, performantes et multiplateformes
Créez des applications évolutives, performantes et multiplateformes.

Un autre passe-partout qui mérite d'être examiné vient de l'équipe d'Infinite Red : Ignite est l'aboutissement de cinq années de développement constant de React Native et a été créé à la fois pour Expo et pour React Native. Il est livré avec une CLI, des générateurs de composants/modèles, et plus encore.

Le Electron React Boilerplate est une autre excellente base pour les applications multiplateformes évolutives. L'itération rapide, la saisie incrémentielle et l'optimisation et la minification du code sont les trois piliers sur lesquels il repose.

Le React Starterkit de Konstantin Tarkus est un kit de démarrage frontal utilisant React, Relay, Architecture GraphQL et JAMstack. Il est optimisé pour un déploiement sans serveur vers des emplacements périphériques CDN et est préconfiguré avec un style CSS-in-JS, des outils de qualité de code comme ESLint, Prettier, TypeScript et Jest, ainsi que des extraits et des paramètres VSCode pour rendre votre flux de travail plus efficace.[19659003]En parlant de code VS : l'extension React + Redux Snippets vous permet de toujours disposer des extraits dont vous avez besoin dans votre éditeur. Il est conçu pour tirer le meilleur parti de la complétion du code – parfait pour les utilisateurs expérimentés.

Dernier point mais non le moindre, si vous souhaitez utiliser le meilleur de tous les mondes pour créer votre propre passe-partout React unique, Le tutoriel de Leonardo Maldonado est pour toi. Il vous guide pas à pas dans la création de votre propre passe-partout à partir de zéro avec les principales dépendances utilisées dans la communauté React aujourd'hui.

Un extrait pour charger des images WebP réactives

Il a toujours été compliqué de charger des images dans les meilleures tailles et et avec les nouveaux formats d'image comme WebP et AVIF qui gagnent en popularité, les choses ne deviennent pas plus faciles. Si vous souhaitez expédier WebP dès aujourd'hui, vous aurez besoin d'une stratégie de chargement qui fournit également une solution de secours pour les navigateurs qui ne prennent pas encore en charge le nouveau format. Stefan Judis montre comment procéder.

Un extrait pour le chargement d'images WebP réactives
Que devez-vous prendre en compte lors du chargement d'images WebP ?

La solution de Stefan pour charger une image WebP réactive utilise l'élément pictureet même s'il implique beaucoup de lignes de code, cela en vaut la peine car l'extrait de code charge non seulement l'image dans le meilleur format mais aussi dans les meilleures tailles. Un pour les signets.

De plus, au cas où vous l'auriez manqué, Stefan a commencé à publier sa newsletter Web Weekly cette année. Chaque lundi, vous trouverez un mélange coloré de ressources tout autour de l'apprentissage du frontend, de la productivité et du développement Web, associé à des outils pratiques et des projets GitHub dans votre boîte de réception. L'objectif de Stefan : en faire le meilleur e-mail pour commencer votre semaine.

SaaS Boilerplate

Authentification de l'utilisateur, sessions de cookies, paiements d'abonnement, gestion de la facturation, gestion d'équipe, API GraphQL, e-mails transactionnels – lorsque vous avez créé un produit SaaS avant, vous savez combien de temps il faut pour que tous les différents outils impliqués fonctionnent bien ensemble pour offrir les fonctionnalités dont vous avez besoin. Pour changer cela, Max Stoiber a créé Bedrock.

Démarrez vos produits SaaS avec Bedrock
Démarrez vos produits SaaS avec Bedrock.

Le passe-partout moderne Next.js et GraphQL combine les meilleurs outils que l'écosystème JavaScript a à offrir en une base solide pour votre produit SaaS. Pas besoin de maîtriser toutes les technologies impliquées, si vous connaissez Next.js et GraphQL, vous pouvez commencer à coder presque immédiatement.

Static Site Boilerplate

Processus de build automatisés, un serveur de développement local, minification et optimisations de la production, et les dernières normes pour les sites Web statiques. Le site statique Boilerplate d'Eric Alli utilise les dernières technologies pour simplifier le processus de création de sites Web statiques.

 Le site statique Boilerplate utilise les dernières technologies pour rendre la création de sites statiques plus simple.
Le site statique Boilerplate utilise les dernières technologies pour simplifier la création de sites statiques. ( Grand aperçu )

Le serveur de développement intégré vous permettra d'être opérationnel en quelques secondes, votre code HTML, vos styles et vos scripts seront automatiquement lissés, les modifications apportées aux fichiers sont surveillées en temps réel, les images sont compressés pour votre build de production, et les fichiers sitemap.xml et robots.txt sont automatiquement inclus avec votre build de production. Un véritable gain de temps.

Style Guide Boilerplates

Que devez-vous prendre en compte lors de la création d'un guide de style qui fonctionne bien ? Le Guide de style de Brad Frost vous guide étape par étape à travers chaque section et ce qui s'y trouve – de la page d'accueil aux directives, styles, composants, utilitaires, modèles de page, téléchargements et même assistance et contributions. Un aperçu très complet.

Promouvoir la cohérence et la pensée modulaire avec un guide de style
Favoriser la cohérence et la pensée modulaire avec un guide de style.

Le Style Guide Boilerplate de Brett Jankord est un excellent point de départ pour élaboration de guides de style de vie. Vous pouvez créer un répertoire pour cela sur votre site pour voir comment le CSS de votre site en ligne affecte les éléments de base et commencer à personnaliser les modèles et les modules à votre guise.

Trousse de démarrage typographique

Avez-vous besoin d'un peu d'aide avec typographie? Pas en termes de choix de conception esthétique, mais en termes de balisage ? Le kit de démarrage typographique Typeplate vous soutient. Il définit un balisage approprié avec un style extensible pour les modèles typographiques courants.

<img loading="lazy" decoding="async" importance="low" width="800" height="509" srcset="https://res .cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47c31fb8-b2f3-48dd-ae71-5e332de4c -frontend-boilerplates-starter-kits.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47c31fb8-b2f3-48dd-ae71-5e332de4c175/28-frontend-boilerplates-starter-kits.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47c31fb8-b2f3-48dd-ae71-5e332de4c175/28-frontend-boilerplates-starter-kits.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47c31fb8-b2f3-48dd-ae71-5e332de4c175/28-frontend-boilerplates-starter-kits.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47c31fb8-b2f3-48dd-ae71-5e332de4c175/28-frontend-boilerplates-starter-kits.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/47c31fb8-b2f3-48dd-ae71-5e332de4c175/28-frontend-boilerplates-starter-kits.png" sizes="100vw" alt="
Typeplate helps you implement common typographic patterns »/>
Typeplate helps you implement common typographic patterns.

Typeplate is available as a stripped-down Sass or CSS library of your choosing (including Bower and CDNJS) and is primarily concerned with technically implementing design patterns, not their looks: from typographic scale and word-wrap to indenting, hyphenation, small and drop capitals, small print, code blocks, quotes, footnotes, lists, and more.

VS Code Snippets To Streamline Your Workflow

Are you using VS Code? We came across some useful extensions that handle the React, Vue, and Angular snippets you might need to type frequently for you. For Vue, be sure to check out Sarah Drasner’s extension. It was built for real-world use and focuses on developer ergonomics instead of cataloguing API definitions.

Automate the things you type frequently
Automate the things you type frequently.

Burke Holland provides you with a collection of essential React snippets and commands that he selected from his day-to-day React use. And if you’re looking for Angular snippets, John Papa has got you covered. His extension adds snippets for Angular for TypeScript and HTML to your VS Code setup.

Speaking of VS Code setup: Have you heard of the “VS Code Can Do That Workshop” already? From customizing the editor to using Git and source control, it features eight exercises to enhance your VS Code skills.

Vue Boilerplates

Do you plan to build a Progressive Web App with Vue.js? Vuesion has got your back. Described as the “most complete boilerplate for production-ready PWAs”, Vuesion focuses on performance, development speed, and best practices. The code is all yours, ready to be modified and build upon, so that you can implement the things you actually need, without being limited by the template itself.

If you’re looking for a solution to achieve a consistent user experience across your applications, CION might be for you. The design system utilizes design tokens, a living styleguide with integrated code playgrounds, and reusable components for common UI tasks. A great starting point that can be extended to your project’s needs.

To improve prototyping in Vue, there’s the prototyping tool OverVue. It allows developers to dynamically create and visualize a Vue application, implementing a real-time intuitive tree display of component hierarchy and a live-generated code preview. The resulting boilerplate can be exported as a template for further development.

Prototype-driven development with Vue
Prototype-driven development with Vue.js.

Have you ever tinkered with the idea of using Vue to power a blog? Ben Hong did, and created a dev environment to help you do the same. Optimized for blogging, the VuePress Blog Boilerplate includes default features like RSS feed generation, a list of recent posts, etc. The minimal setup and Markdown-centered project structure help you focus on writing, and, thanks to the Vue-powered engine, you can use Vue components in Markdown and develop your theme in Vue, too.

For handy Vue snippets, little tips, tricks, useful directives, and nice practices, be sure to also check out Vue Snippets collection. A small but mighty collection.

WordPress Plugin Boilerplate Generator

No one likes to repeat unnecessary tasks. That’s why WordPress developer Enrique Chavez built the WordPress Plugin Boilerplate Generator. Every time he started working on a new plugin, he found himself renaming file names, packages, subpackages. The generator automates the task.

No more renaming file names when building a WordPress plugin
No more renaming file names when building a WordPress plugin.

All you need to do is type your plugin details in a short form containing plugin name, slug, uri, autor name, email, and uri, and the generator will generate a ZIP file for you with the correctly-named file structure. A great little timesaver.

WordPress Starter Theme

Do you plan to build your own WordPress theme? The starter theme Underscores helps you get started. It’s not meant to be used as a parent theme but as a stable base to kickstart your theme development adventures.

A robust base for your own WordPress themes
A robust base for your own WordPress themes.

Underscores comes with only minimal CSS so that there’s less stuff getting in your way when building your own theme. It shines with lean, well-commented HTML5, a helpful 404 template, an optional sample custom header implementation, custom template tags that keep your code clean, a mobile-friendly dropdown, and some other nifty features.

Smashing Editorial" width="35" height="46" loading="lazy" decoding="async(vf, il)




Source link

0 Partages