Integrate Stylelint Into Your Workflow For Better CSS

Working within a team or solo can adjust the development priorities but one that should always be high on the agenda is producing the best code possible.

Working on a clean, well organised codebase is bliss. It’s enjoyable and productive. Working on an unorganised codebase is annoying to say the least. It’s often frustrating, painfully slow to change and test anything and invites laziness.

Thankfully as CSS developers we have a handy tool called Stylelint that can help us avoid the unorganised situation.

PostCSS – What It Is And What It Can Do

PostCSS has been around since September 2013 and has been part of many developers workflow for a while. For those that haven’t had the time to dig into it and put some time aside to understand what it is and what it can do, this post is for you.

The Battle Royale: Atom vs. Sublime

For most developers, text editors are just as sacred as discussing the proper way to say “gif.” Sublime Text has been the heavy hitter for some time and for good reason. As an avid Sublime user I decided to see where Atom stood since I last looked; the time of early beta stages.

What follows is my experience during a period of five days using the Open Source code editor from GitHub told through the perspective of a seasoned Sublime user.

Shaking Hands with RequireJS

Before you know it your site is growing in complexity and your JavaScript files are quickly becoming extremely hard to manage, let alone make performant.

Thankfully these days we have a handful of tools to help with this situation. Let’s examine RequireJS in an attempt to decide if it’s for you… or not.

Optimizing SVG for the Web

So you have an amazing vector and you’re just about ready to send it out for the world to see, but you notice it’s XML (the stuff that makes up an SVG) is a bit bulky. We’ll take a look at a command line tool that can help us clean that up a bit called SVGO.

Diving into Webpack

Of late there has been a little bit of hype around this “webpack” thing. Hopefully this post gives you an overview of what it is, how to use it and if it’s worth all the hype.

Understanding & measuring events with Chrome DevTools timeline

Measuring performance is important and so important that we need a hash tag (#perfmatters) to discuss all the difficult scenarios and topics surrounding the question “How can I make my Website faster?” In order to answer that question we have to understand how to collect and measure that data collected.

Compass Sourcemaps

Since the release of Compass v1.0.0 we’ve seen sourcemaps supported across the board. This means tools like Gulp and Grunt (including their compass compiler helpers), CodeKit2 and the CLI will now produce a Compass sourcemap file. This article dives into the config landscape across various tooling systems.


I’m sure we can safely say at the time of this writing and going forward that we as developers no longer care to maintain let alone write prefixes and polyfills in our code. The task is time consuming, messy and hard to maintain over time.

Currently we have tools like autoprefixer and -prefix-free that let us write CSS properties without the hassle of remembering what prefix we’re using for each property.

Today we’re going to take look at a tool that lets authors use a similar approach used in CSS land, but with JavaScript Polyfills!

Different Sass Output Styles

When developing with Sass sometimes there is a need to adjust the output style of the CSS. Sass’s default CSS style is good but might not be applicable for all situations. This post explores what those options are and how to adjust your compiler settings.

Throttle Bandwidth for Testing

Working with a fast internet connection on a day-to-day basis is a real privilege. it’s easy to forget that others are less fortunate.

With a recent vacation to “slow internet land” this really hit home. So much so, once being back in “fast internet land” I explored the different ways to throttle bandwidth for testing.

After a little research, here are few different methods that I discovered.

Your own device lab today

During the last few years there has been no shortage of devices being released to the market. For us this was a new challenge and we all stepped up to the plate by adding device specific media queries to our stylesheets.

This was possible in “the good old days”…

A Better Git Commit

I am a bad committer, there is no lying. Since learning Git in my final years of University, I managed to pick up a few bad habits, which have been with me ever since. When you do something everyday it’s easy to forget that there might be a better way.

Over the last few years the number of detailed commits I have made could be counted on one hand. Quite disgraceful really.

Sublime Text Settings I Use

It’s always interesting to find out how people set up their coding environment. To be honest I don’t think I’ll ever get the perfect setup but what I currently have does a pretty good job.

Tweaking your Sublime Text settings is relatively easy but can be a little daunting if you are fan of a GUI. Within Sublime all settings are handle by a simple JSON file. They can be found either from under the Sublime Text menu (Sublime Text 2 -> Preferences -> Settings – User) or by the shortcut (Command + .).

Psychedelic Grunt Plugins

A few months ago, I started to research build processes to help improve the pattern we currently follow at work. During my research I somehow ended up configuring Grunt and discovered the true awesomeness it has to offer. Unfortunately, so far I haven’t managed to integrate it into our workflow, but for my after-hours development, it has become an integral part of the way things roll.

Getting Started with KSS-Node

The NodeJS implementation of Knyle Style Sheets (KSS) developed by Hugh Kennedy is super handy. With one simple command after you have set it up you can generate a living style guide. Having to always update your style guide is generally a chore. This saves the day.

Keeping up with Chrome Developer Tools

In today’s world, as the web evolves so do the tools. Keeping up with what’s happening is important in our industry. However, keeping up with everyday development tools is as important, if not more so.

The Developer Tools in Chrome have been in rapid development for the last couple of years, and I certainly have not been using them to their fullest potential. Hopefully the resources below will bring you up to speed.

Sublime Text 2 Settings

What makes Sublime Text so awesome is the speed at which it can perform tasks and the ability to easily customise its behaviour. At first, tweaking the behaviour seems a little strange due to the lack of GUI, but once you get your head around editing JSON files, you’ll soon realise the power and how flexible it really is. This short post gives you the low down on how to start editing your Sublime Text settings.

Handy Apps for Web Developers

It seems the days of opening up and developing a website solely with a text editor are long gone. Thankfully, today we are privileged to have access to so many amazing applications to help us develop better products.

Snippets in Sublime Text 2

Creating snippets in Sublime Text 2 is super easy, quick and highly recommended. If you want to increase your coding speed, setting up snippets can be extremely helpful. Not only will they save you from RSI in the future, they will give you more time to hang out with you pals at the cafe.