My Web-Dev Workflow

10/26/2017

Finding a matching workflow for you is not as easy as it sounds. I found something that fits me quite well and I’d like to present it to you.

What Am I even Doing?

Firstly, a rather important question – what is my workflow all around? I create websites and web apps in the known languages HTML, CSS (SCSS) and JS. For the server side, I mainly use PHP (yes I know Node.js is the latest and greatest, I’m on it!). So all my tools need to suit those.

The Tools

My editor of choice is Sublime Text 3, as it is very quick and responsive, has a lot of plugins (though the default management system and also Package Control are less than ideal) and looks in my opinion quite nice. I’ve used Brackets and Atom before, but the unmatched performance of Sublime just cuts it for me. However, some of the features of those two are very attractive and when their performance gets better, I might give them another shot. I also tried some IDEs, but I prefer the openness of an editor. For creating something like a short snippet, I usually use Notepad++, as it does not have projects/folders and just opens a blank document. For anything more complex than one file, I’d recommend to look into other options.

As a SCSS compiler, I use Scout. It has all the features I could dream of (except of minimizing to tray, it’s coming soon though) and is CLI-free. Now while I don’t hate CLI, I definitely prefer an app with a user interface. Grunt is probably an equally good solution (or even better as it has so many features), but it does not work as well for me, but that’s probably because my fault, I just don’t have the time to look into it right now. It’s on my want-to-learn list though. For compressing Javascript, I use a small plugin called Minify in Sublime.

For hosting a local Apache/PHP and MySQL server, I use good old Xampp – again, saving me some digging in the command prompt. I miss the feature of just opening a folder and running Apache from there though, so the terminal way might be superior again.

Icon and prototype designs are duties I use Illustrator and Photoshop for. Affinity Designer and Photo look like interesting alternatives, but I’m just used to those two programs, so I probably won’t switch in the near future. I actually also have some smaller CLI tools that I mostly built myself, like a command to compress all images with TinyPNG. I test my sites in Chrome, Chrome Android, Firefox Nightly, Internet Explorer 11 and Edge (running in VM). These are probably too few, but time and money just hold me to these.

Everything is running on Windows 8.1. “WHAT? Windows 8.1?!” – yes. TL;DR, it delivers the closest experience to Windows 7 with a modern feel (with minor tweaks like Classic Shell). And yes, I might be the only web-dev on earth not using a Mac.

And?

I’m happy with my workflow. It’s the optimal balance between open and closed, not too janky but not too strict. I’d love to hear some of your favorite tools and learn about your workflow, so feel free to @krmax44 me. You can also drop in an e-mail.