Un aperçu rapide d'un flux de travail simple que j'utilise pour prototyper une page Web
Parfois, je travaille sur des pages Web uniques pour mes projets.
Peut-être que je veux repenser le blog. C'est peut-être une page de destination pour un nouveau projet.
C'est le processus que j'utilise.
J'aime utiliserVent arrièrepour construire des prototypes.
J'ai mis en place tout le pipeline pour Tailwind etPostCSSpremière:
Créerpostcss.config.js
:
const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')
module.exports = {
plugins: [
require(‘tailwindcss’),
require(‘autoprefixer’),
cssnano({ preset: ‘default’ }),
purgecss({
content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}
Créertailwind.config.js
:
module.exports = {
theme: {},
variants: {},
plugins: [],
}
Craete untailwind.css
déposer:
@tailwind base;
@tailwind components;
@tailwind utilities;
Créer unpackage.json
déposer:
{
"main": "index.js",
"scripts": {
"build:css": "postcss tailwind.css -o output.css",
"watch": "watch 'npm run build:css' ./layouts"
},
"dependencies": {
"@fullhuman/postcss-purgecss": "^1.3.0",
"autoprefixer": "^9.7.1",
"cssnano": "^4.1.10",
"postcss": "^7.0.21",
"tailwindcss": "^1.1.3",
"watch": "^1.0.2"
}
}
Créer unlayouts/index.html
page et ajoutez votre HTML.
Démarrez un shell de terminal, accédez au dossier du projet et exécutez:
npm run watch
Ensuite, je fais que le navigateur synchronise automatiquement les modifications à chaque fois que j'enregistre la page ou que le CSS est régénéré, en utilisantbrowser-sync
, un excellent utilitaire que vous pouvez installer en utilisantnpm install -g browser-sync
:
browser-sync start --server --files "."
Cela démarre un serveur et ouvre également automatiquement le navigateur et pointe vers le serveur Web local nouvellement créé.
Maintenant, j'ouvre VS Code et le navigateur côte à côte, et je commence le prototypage!
Plus de tutoriels de laboratoire:
- La pile que j'utilise pour exécuter ce blog
- 8 bonnes raisons de devenir développeur de logiciels
- SEO pour les développeurs écrivant des blogs
- Critique du livre La semaine de travail de 4 heures
- Créer une entreprise de style de vie
- Créez votre propre plateforme
- En tant que créateur indépendant, quel type de produit devriez-vous créer?
- Créez votre propre sécurité d'emploi
- Développeurs, apprenez le marketing
- La liberté d'une entreprise de produits
- Générer de la valeur
- Avoir un but pour votre entreprise
- L'idée n'est rien
- La niche
- Travail à distance pour les développeurs de logiciels
- Adaptation produit / marché
- Les meilleurs podcasts pour les développeurs frontend
- Pourquoi devrais-je créer une liste de diffusion?
- Déconnectez le temps de l'argent
- Le principe de rareté appliqué aux produits logiciels
- Le principe de preuve sociale
- Comment j'ai ajouté le mode sombre à mon site Web
- Mes notes sur le livre Deep Work
- Les avantages de l'utilisation d'une pile ennuyeuse
- Comment estimer le temps de programmation
- Devenir indépendant en tant que développeur
- Comment apprendre à apprendre
- Pourquoi les questions d'entrevue pour les emplois de programmation sont-elles si difficiles?
- Ai-je besoin d'un diplôme pour être programmeur?
- Tout le monde peut apprendre la programmation
- Comment être productif
- Comment obtenir le nombre réel de pages vues d'un site statique
- Avez-vous rempli un bucket de développeur aujourd'hui?
- Comment j'enregistre mes vidéos
- Tous les projets logiciels que j'ai réalisés dans le passé
- Tutoriel purgatoire du point de vue d'un créateur de tutoriels
- Chaque développeur doit avoir un blog. Voici pourquoi et comment s'y tenir
- Avoir un esprit d'entreprise pour les développeurs
- Comment écrire du code non maintenable
- Qu'est-ce que le syndrome de l'imposteur
- Comment travailler de chez soi sans devenir fou
- Comment j'ai arrêté de m'inquiéter et appris à aimer l'écosystème JavaScript
- Comment je prototyper une page Web
- Vous devriez être le pire développeur de votre équipe
- Comment démarrer un blog avec Hugo
- Écrivez ce que vous ne savez pas
- Comment bloquer les distractions avec uBlock Origin
- Le codage est un art
- J'ai écrit 1 article de blog chaque jour pendant 2 ans. Voici 5 choses que j'ai apprises sur le référencement
- Faire face au feu
- Être généraliste
- Le dilemme du développeur
- My plan for being hired as a Go developer. In 2017
- Gains de productivité liés à l'utilisation d'un Mac et d'un appareil iOS
- Comment passer des tutoriels à votre propre projet
- C'est mon petit jardin numérique
- Comment démarrer en freelance en tant que développeur
- Partager le chemin vers la création d'une entreprise de produits logiciels
- Sous-dossier vs sous-domaine
- Comment j'utilise l'expansion du texte pour gagner du temps
- Le logiciel est une superpuissance
- J'aime les livres
- Comment j'ai décidé de créer une nouvelle application de gestion de projets