If you have been following our monthly post series on Fresh Resources for Designers and Developers, you can see that every month there are plenty of new tools introduced; the list is likely infinite. Back in 2008, when I was just beginning to learn HTML and CSS, most of these tools had not existed yet.
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.
Web Design: Getting Started With Chrome Developer Tools
Editor's note: For a newer, updated version of this post, check it out here. Google Chrome is a... Read more
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
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.
How to Create Custom WordPress Template Tags
Building a WordPress Theme is so easy with template tags. You can add the_title() to display the post... Read more
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 <!-- @include inc/partial --> // this is a variable <!-- @var: The Variable Value -->
A look Into: The Kit Language
Let's say you were building prototypes for a website with HTML files. You have about 10 HTML pages... Read more
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.
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.
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.
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.