Debug mode in gulp

I’ve been using gulp a lot lately (as you can see from my posts).

To the uninitiated, gulp is the hottest, sleekest and newest build system in town. Which I’m in love with and use almost everywhere now. Yup, it’s that awesome.

However, I had been having troubles with debugging while using gulp. It’s not exactly easy to debug one-line CSS or mangled JS now, is it?

So I came up with a solution, creating a switch variable and a new task, debug.

Checkout git branches through your browser

Most git workflows involve use of multiple branches for different sub-tasks, example, a new branch for an alternative layout for the homepage. However, managing braches on the server quicky gets tedious – SSHing in, navigation to the correct directory, then running git checkout <branch> – is tiring for all, right?.

That’s why I came up with a simple solution that used PHP and GET requests to checkout different branches on the server through the browser.

Using gulp at MakeUseOf

At MakeUseOf, since the start of the new theme, we simply wrote plain ‘ol CSS and normal JS. No cool stuff like concatenation of compression or minification. Plain code, edited and uploaded through Filezilla.

Now we’ve moved on to a better workflow – Using gulp, Vagrant, git & Github. Here I’ll talk about how we set up and use gulp.

Redesigning Symmetrycode

On  , In Meta

I just moved from Bluehost to Digital Ocean (for reasons outlined below), and also started on a redesign for Symmetrycode.

As of now, 31st October, Symmetrycode’s redesign is a work in progress. There are many things left to do, and I’ll be using this post as a todo.

Here’s a short, quick, un-proofread post about my experiences and my reasons for doing what I did.

Design like you’ll post it to Dribbble

Recently, I’d say I’ve been ‘plagued’ with creating designs that are in my ‘comfort zone’ and are simple and easy for me to make. I haven’t been innovating, in my opinion.

And I would make great excuses for it — “Man, he’s a low-paying client, don’t spend too much time on this. Work quickly and then spend your hard-earned time on Reddit”, or, “Just get this done, no one cares if it’s pixel perfect or not”. I rolled with this for a while.

Until I logged into Dribbble after a long, long, while, and thought: “What have I made that I can post?”

My workflow for designing websites in the browser

“Kill Photoshop!” the people say. There are many reasons to stop using Photoshop and start working the browser instead—a few great ones listed in this webdesign tuts+ article, tips for designing in the browser (Especially the ‘Work Gets Repeated’ and ‘Can be time consuming’ part).

However, many designers don’t know how to start designing websites in the browser—It’s a problem of habit. They’re simply used to Photoshop.

I fortunately started when Photoshop’s influence was less, than say, 5 years ago. Due to that, it was easy and quick for me to make the jump to designing in the browser. Here, I’ll detail how I design sites, for myself and my clients.