Rethinking our Development Workflow with Atom
Adapting to the age of Digital Design not only means staying up to date when it comes to the latest trends in design. No other medium evolves as fast as the Web — that’s why constantly adjusting and reinventing ourselves is part of our daily routine. Starting today, we’d like to give you some insights on the various little things that help us in different departments to improve as a team every day. In this episode I’m focusing on how we utilize our favorite tool to streamline our development workflow here at STRICHPUNKT.
First things first: We love Atom! The self-proclaimed “hackable text editor for the 21st Century” has gained lots of traction in the development world. To be honest, it’s pretty obvious: getting rid of the immense overhead of classic web development tools like Dreamweaver or PHPStorm not only results in a more lightweight workflow without distraction, but also provides the possibility to tailor our environment exactly to our needs. A modular approach, resulting in a more efficient workflow.
Consistency
For us, consistency across our development environments is the most valuable aspect of a vital workflow. After trying out various sync-plugins like sync-settings, it soon became clear that our aim shouldn’t be syncing all settings and packages between all team members, but leaving room for personal plugin preferences as well. We settled on package-sync, which provides the ability to batch-install all plugins from a given packages.cson file, leaving out all packages that are already installed on the given system. Using this approach, we are able to get new team members up to speed and on the same page in no time.
For additional convenience, Atom provides a file called keymap.cson which allows you to set your keybindings, using key event selectors which can be bound to events in specific contexts. Let’s be honest, internalizing shortcuts can be dull. Which is exactly why we love the approach of using a plugin in real coding context and mapping shortcuts just the way it makes sense for us. We also tried to sync the keybindings between all of our team’s environments, but we found productivity to be the highest when all shortcuts are managed by the individual.
When it comes to keeping packages up to date, we encourage you to use auto-update-packages which does the housekeeping job perfectly.
Productivity
Developers naturally share a tendency to try and simplify tasks — to some extent, we’re all borderline lazy. Which has us hunting for the most efficient ways to speed up, beautify and increase our personal code output while actually typing less. While, as an example, the ongoing task of opening and closing HTML-Tags all day long gets tedious after a few dozen lines, we now use autoclose-html and atom-wrap-in-tag to do exactly that. After getting used to letting them take over automatically, both plugins were able to provide a significant increase in our coding workflow — it’s amazing how much faster you can code when you don’t have to start typing a closing tag.
Then, of course, there’s text processing. When it comes to encoding, hashing or converting strings we settled with the gorgeous text-manipulation, package so that we’re now able to run various operations on any given string in our code without ever leaving Atom. Here at STRICHPUNKT, your code will most definitely be worked on by at least two or more fellow developers — a well configured atom-beautify, sort-lines (especially useful when structuring stylesheets) and various linters have saved our team lots of time in the past and definitely will in the future.
Modern web development heavily relies on build tools and frameworks, most of which require using command line interfaces. Which means always having to switch between various windows and console instances when checking various stages of our build process. The awesome platformio-ide-terminal provides a terminal interface which can be toggled inside Atom, including all of the terminal tools your actual shell provides. It allows us to bind terminal instances to certain projects and files, switch seamlessly between them — and one single shortcut moves all of them out of the way while keeping them running in the background.
Code highlighting is a necessity of all code editors, but not even Atom is able to handle all existing coding-languages out of the box. Since our development workflow includes using the awesome Nunjucks templating engine, it’s a pleasing surprise that language-nunjucks provides complete language support with seamless integration. When working with various colors, pigments extends your code with color coded previews, even supporting SASS variables. Lately, we’ve been handling quite a lot of SVG animations, for which svg-preview, a live rendering inside Atom, is a must-have.
This is the first episode of an ongoing attempt to share our learnings and internal best practices with you. For us constantly improving, engaging with new technology and sharing knowledge is key to vital success not only as an agency but also as humans. Keep in touch to learn more about us, our work and the way we run our business here at STRICHPUNKT.
STRICHPUNKT DESIGN is one of Germany’s most honored design agencies based in Berlin & Stuttgart. Follow us on Facebook, Twitter & Instagram to keep in touch with us and our latest work.
