Why write this post in the first place?
Reading a fantastic post on the role of the front ops engineer, I thoug I'd jot down my thoughts on the practical application on many of the concepts discussed in that article. Also, I can be a lazy bastard when it comes to repitition in day-to-day work. If I can cobble something together in an hour that saves me 10 minutes of time each time I use it, then anything over 6 uses of that widget/script/whatever that I've put together is time saved.
I use a few select tools when developing web applications. First and foremost is the code editor. Any web developer worth their salt will use something that includes syntax highlighting, auto-indentation and code completion/suggestions. Snippets support and the ability to plug in additional features are a must these days. I personally use Sublime Text as my code editor of choice, with syntax support for SASS turned on by installing the package at https://github.com/nathos/sass-textmate-bundle
I also have the emmet plugin installed, which allows me to type HTML markup as if it were a CSS selector and have that markup expanded to be its HTML representation with a simple Ctrl+e on the keyboard (regardless of the operating system you choose to use).
Perhaps most importantly, I have a web browser open for which I do my primary development in. I use Chrome Canary, which allows me to test using the bleeding edge version of one of the fastest web browsers in existence. It also has any improvements roughly 11 weeks before the release version, meaning I can test new or experimental techniques as the support comes along for them. Also, Chrome Canary is updated nightly. I then move on to Firefox Nightly, Opera Next, and then Safari, Chrome (release version), Firefox and Opera. I use a Mac, so I run VMWare Fusion to virtualise Internet Explorer, using the virtual machines available from modern.ie
For rapid prototyping, I employ Ghostlab, which facilitates synchronous, real-time testing across devices. With minimal set-up I can have all devices I own connected on the same network as my development machine in sync with anything I do in my web browser. This includes form field completion, form submission, scrolling and just about everything else.
Frameworks are today's norm. I don't personally see the point in crafting CSS (via SASS or LESS if you use those) for a button or heading/paragraph styles when frameworks offer the ability to do so or a custom code snippet you've saved gets re-used thousands of times. I naturally have an affiliation with a framework called Rock Hammer (because I helped to build it and continue to actively maintain it). It has been designed from the outset to work with Hammer for Mac. Using Rock Hammer gives me a consistent base to being every project from.
When developing a project, I simply have my code editor open with Hammer for Mac happily whirring away in the background, along with Grunt (explained below) for automating production optimisations, right from the off. This, means I'm testing on production-targeted code from the outset. My web browser is constantly open, being automatically refreshed using the Grunt live reload plugin so I'm able to pick up and see changes instantly.
Monitoring is one area that could do with some love. I'm yet to find a suitable dashboard solution, so I'm in the process of writing one. Watch this space and of course an up-coming blog post for more on this!
Whilst this list can no doubt be added to over time, this hopefully gives a little insight into what I use to apply the principles explained in the Front-End Ops article. Feel free to share what you use, and any experiences are always welcome!