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 old school web development workflow is pretty straightforward – you create and edit source files like HTML, CSS or JavaScript – and then reload the page in the browser to display the updated version of the website which is made of these files.

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.

Pros

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

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 uptools as part of our project and define tasks which will take care of such changes.

Tools are usually various Node.js modules. Node.js is a JavaScript runtime we need to install on our computer so we can use Node modules. We can install Node modules using the Node Package Manager – npm. There are thousands of modules for various tasks, e.g., gulp-sass module which transforms Sass to CSS.

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:

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

Pros

thousands of Node modules (tools) for all common tasks

eliminates tedious manual tasks from the development workflow

no need for manual reloading

Cons

added time for files transformation

initial setup can be complicated for a beginner

new tools to learn

Modern Workflow with Applications

There is one variation of this workflow. Applications like Prepros or Codekit allow quick setup and support a lot of tasks mentioned above like preprocessors, file optimization, live reloading.

Pros

Minimal configuration. Install the app and enjoy.

Nice to get started with modern tools – you can start learning them without much of a hassle.

Cons:

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.

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.)

Pros

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

Cons

added time for file transformation

might require adjusting generated tasks and tools if further customization is needed

Workflows Comparison

Compare all workflows next to each other on one image.

Click on the image to see the large version

Try Chisel

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.

Why Chisel?

Chisel comes packed with a lot of features supporting modern front-end development from scratch. Such as:

You are now ready to use Chisel. Create a new project folder, open a command line in it and type:

yo chisel

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.

gulp

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

npm install

to install Node modules. Then you can run

gulp

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)