Today, the Web is exponentially growing. It is also getting more complex than ever before. We need more tools that can help lift some of the weight of website development. So, in this post, we have put together a set of trendy tools that will help in web development.
Hopefully these lists could help introduce you to the right web development tools, particularly for those of you who are just getting started.
1. CSS Pre-processors
CSS is very easy to write. The syntax is straightforward and easy to understand. But as your project grows larger, you may have to manage multiple stylesheets to handle thousands of CSS lines and if you know CSS, you know it becomes mighty hard to maintain in that situation.
This is where CSS Pre-processors become really useful. We have covered CSS-Preprocessors for several times in the past, so I guess you already are quite familiar with them. For those who are new, in a nutshell, CSS Pre-processor allows us to write CSS in programming fashion with Variables and Functions, which then is compiled into browser-compliant CSS format. We can also reuse CSS properties with some special rules such as @extend and @include.
There are a number of CSS Pre-processors: Sass, LESS, Stylus, and Myth.
2. Template Engine
Creating a static HTML page similarly is simple. However, if you have multiple HTML pages to handle in your project, things could get out of hand. Most of these pages may share the same components such as a Header, Sidebar, and Footer.
Read Also: How To Create Custom WordPress Template Tags
If you change something in the Sidebar, should you change it for the Sidebar in the other pages, one by one, or use a Template Engine instead?
Using a Template Engine sounds better for this situation. There are now a number of Template Engines that we can use, such as Kit, Jade, and Handlebars. Each has its own writing conventions. Kit, for instance, comes only with Variables and Import capability which are declared with a simple HTML comment tag, like so.
- // example of importing a seperate template
-
- // this is a variable
-
Read Also: A Look Into The Kit Language
Jade and Handlebars come with a lot of robust features to cater to more complex projects. We will discuss them in more detail in a separate post (stay tuned!). The point is that if you want to build a scalable static website, you should take advantages of a Template Engine.
3. Task Runner
The process to build a website is considerably repetitive. Minification, Compilation, Unit Testing, Linting, Concatenating Files and Browser Refreshing, to name a few, are the things that we would most likely do often in projects. Luckily, they can be automated using a Task Runner, such as Grunt and Gulp.
You can tell Grunt to do a set of tasks specified in Gruntfile.js. There are now a plenty of plugins to automate almost anything with Grunt, so you need not write your own Grunt tasks.
Say you want to compile your LESS file into CSS, you can install grunt-contrib-less. In our previous post, we have also utilized Grunt to remove unnecessary modules in jQuery.
If if your project is tiring you out, it is time for you to utilize a Task Runner to streamline your workflow.
4. Synchronized Testing Tool
Here is one inevitable tool if you are building a mobile optimized website. If you have a lot of devices to test your website in, you definitely need Synchronized Testing, which allows you to test your website in multiple devices simultaneously.
Browser reloading as well as the interactions like clicking and scrolling are reflected across all tested devices at the same time, saving you from repetitive action.
There are two tools you can try to do this: A Grunt plugin called BrowserSync, and a GUI application called Ghostlab.
5. Development Toolkit
Development Toolkit puts together a number of tools in one Application. If you are not comfortable with the text-based setting in Grunt, a GUI application would probably be a better tool for you.
Codekit pioneers this kind of application, and includes LESS, Sass, Kit, Jade, Siml, Uglify, Bower, and a lot more on its feature list.
Read Also: What’s New In Codekit 2
Codekit is an OS X-only app. If you are using Windows you can try Prepros, if you are using Linux, there is Koala-app.