Craft Perfect Websites with Chisel

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

Cons

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

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:

• 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

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.

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

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:

A Templating system

• Twig templating engine

Styles

• SCSS with ITCSS architecture

JavaScript

• optional ES6 with Babel
• webpack
• optional jQuery

Linting and validation

• stylelint
• Prettier
• 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

• Gulp build system
• Browsersync
• gulp-rev support

WordPress support

• 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

Getting started

Starting with Chisel is easy. First install Node.js so you can work with npm, Node package manager. Version 6+ is required.

Then install Yeoman, Gulp, and Chisel from your command line.

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:

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.

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

npm install

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)

yo chisel:wp-config

Then create database, import DB dump and run

npm install

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!