Craft Perfect Websites with Chisel
Chisel is a Yeoman generator for scaffolding and developing front-end and WordPress projects.
If the intro sentence sounds like Latin to you, this article can help you to understand modern web development workflows. There’s nothing wrong with feeling nostalgic about the old times when developing websites was as simple as saving a file and reloading the browser. However, the modern workflows, even though more complicated, can make our work more efficient and the resulting code better and easier to maintain.
In this article, I’ll explain how the old school workflows transformed into new workflows. We will take a look how generators like Chisel can make your life easier. Once you understand how they work, you will be ready to use any of them as they operate on similar principles.
Note: In the diagrams below, the solid yellow line shows the workflow of a developer, and how they switch between various tools and files.
1) Old School Web Development Workflow
The source files get loaded in the browser as they are saved on the disk, so there isn’t any transformation going on. For example, if you compare the source of CSS in the browser it should be the same as in the file you are editing in the text editor.
- Easy to understand
- Quick to start even for a beginner
- No setup is required
- No problems with error reporting and debugging as files aren’t transformed in any way
- No support for modern techniques like CSS preprocessors
- No support for automatic data optimization (CSS minification, image optimization, etc.)
- Harder to maintain in medium to large projects
- Need to manually reload browser after each change
2) Old School Workflow with Templates
The second approach is just a slight variation of the first one. To save time when doing a project setup, the developer has files prepared as templates and copies them to a new project folder. They can have various templates prepared for various project types. The rest of the workflow is the same as the first workflow.
It may seem that such small variation shouldn’t take this workflow to a separate place in our list. However, as we will see, templates are an important part of a generator concept, so it’s good to understand through which steps the modern workflow optimization has occurred.
3) Modern Web Development Workflow
Modern web development workflows had emerged when new extensions to web development languages appeared, for example, Sass as an extension to CSS. Because browsers don’t understand Sass, we need to transform the original Sass file to CSS before we send it to the browser. Instead of doing this transformation manually using external tools, we can set up tools as part of our project and define tasks which will take care of such changes.
How do we instruct the computer which tools to run our project files? We do it by creating tasks. Tasks can be run manually from the command line or automatically when files change. This is achieved by a special watch task which watches for changes in the files and runs other tasks when the files change. In conjunction with other tasks for automatic reloading website in a browser, it can create a favorable development environment.
Tools and tasks definitions are written in a special file – package.json. Tasks are also often defined using separate task runners like Gulp which can allow further tasks customization.
Files transformed by tasks are usually stored in a special dist folder. Dist stands for distributable or distribution and means that these files are ready for production use (eg. they are minified).
There are a vast number of tasks we can define in our projects, let’s name a few:
- CSS preprocessors – transforming Sass or Less to CSS
- template languages – eg. converting Twig to HTML
- files concatenation – making one file from more files to reduce number of HTTP requests
- minification – removing white space to reduce file size
- linting – validating the file against a set of rules
- HTML validation
- image optimization
- live reloading
- … and many more
- thousands of Node modules (tools) for all common tasks
- eliminates tedious manual tasks from the development workflow
- no need for manual reloading
- added time for files transformation
- initial setup can be complicated for a beginner
- new tools to learn
Modern Workflow with Applications
- Minimal configuration. Install the app and enjoy.
- Nice to get started with modern tools – you can start learning them without much of a hassle.
- These apps are usually not free.
- All people in your team will have to use the same app to make sure you compile the same files and take benefit of the associated workflow.
4) Modern Workflow with Templates
This workflow is like the previous one, but we use templates to save time and avoid setting up our project from scratch. This time we also use templates for the tasks and tools definitions.
Once we copy required files, we can edit the files and adjust them to specific project needs.
5) Modern Workflow with a Generator
The last approach is the evolution of modern web development workflow. We use a generator to set up a project according to our needs.
We run the generator from the command line in the new project folder. The generator asks a couple of questions about our preferences for the particular project which we answer directly in the command line. Then it sets up the project structure and files and also installs Node modules for us. This process is also called scaffolding.
A generator has templates stored in it and besides copying them to our project folder it can process their content based on our answers. So, for example, it can fill in project names to the files. Or it can create certain files and tasks depending on our answers.
A generator can also have individual commands which allow us to do further project modification even once the project is already set up, for example, to add new pages to our project.
The most common tool for creating generators is Yeoman. There are a number of generators, each for different project types. So first, we need to pick up one which is suitable for our project type. We install it globally, and we can start using it. If we don’t find a suitable generator, we can even create our own generator.
Some of the most popular web development libraries out there like React or Vue.js also have tools for creating new projects which use similar concepts like Yeoman generators, even they don’t use Yeoman. (Check out Create React App or vue-cli.)
- easy initial setup even for a beginner
- number of generators for different project types
- allows for further project customization according to your needs
- eliminates tedious manual task from the development workflow
- no need for manual reloading
- added time for file transformation
- might require adjusting generated tasks and tools if further customization is needed
Compare all workflows next to each other on one image.
Now that you understand common web development workflows, you can try a generator yourself. At Xfive, we have created Chisel, which is a Yeoman generator for setting up and developing front-end and WordPress projects.
Chisel is unique by its approach to WordPress development. It creates WordPress projects which are based on the Timber library. Hence, Chisel, a tool for crafting perfect websites with Timber.
Chisel comes packed with a lot of features supporting modern front-end development from scratch. Such as:
A Templating system
- Twig templating engine
- SCSS with ITCSS architecture
Linting and validation
- ESLint with config tailored for Chisel and Prettier synced together for consistent and hassle free code formatting
- HTML validation with htmlhint
Build and dev tools
- Automatic WP-CLI based WordPress and plugins installation
- Automatic Timber library facility to support Twig templates
- Chisel starter theme with the same workflow as for front-end projects
- WordPress page generation from command line
Starting with Chisel is easy. First install Node.js so you can work with npm, Node package manager. Version 6+ is required.
npm install -g yo generator-chisel
You are now ready to use Chisel. Create a new project folder, open a command line in it and type:
Answer Chisel questions according to your project needs and wait until installation ends.
Then to add your first-page type:
yo chisel:page "Home"
Finally start a development server and tasks which will process your templates, styles and scripts.
npm run dev
Continuing development on existing project is easy too – just remember such project was already set up with Chisel, so you don’t have to set it up again. All you need to do when you cloned the existing repository is to run
to install Node modules. Then you can run
npm run dev
If you continue development on a WordPress project, run the following command, it will create wp-config-local.php and dev-vhost.conf file (if you need it)
Then create database, import DB dump and run
to install Node modules. Finally, you can build the project using
npm run build
or run the development task
npm run dev
For the detailed documentation refer to getchisel.co
May your hand be steady and your creations well crafted!