Workflow Archives - Web Design Weekly

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.

CSS, Workflow

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.

Workflow

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.

JavaScript, Workflow

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.

Workflow

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.

CSS, JavaScript, Workflow

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.

Workflow

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.

CSS, Workflow

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.

Workflow

Autopolyfiller

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!

CSS, Workflow

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.