Tools to be a better Front-end/UI Engineer

Kirbs
4 min readApr 26, 2016

--

I’ve been working in the industry for a few years now, and I’ve seen my share of tools other engineers use for their workflows and development. Some are very efficient and have influenced my own toolset, but others make me wonder how they ever get anything done.

These are the tools that I think are good to master and have under your belt.

Command Line **

Yes, I’m serious, and I can’t stress this enough. This by far is one of the most important tools to have. I don’t mean you should fully understand shell scripting, but you should be able to use things like:

  • ssh
  • vim
  • git
  • cd / ls / rm / mv / cp
  • npm / node
  • gulp / grunt

Using the CLI (command line interface) can be more effective than taking 3 clicks to move a file from one directory to the other, or dealing with merging and managing git repos. The CLI will come back into play with other tools.

If you’re new to the CLI world, try out codecademy.com’s free course on it.

Text Editors

I’m a big fan of vim, but writing all your code with it might not be the best, especially for projects that depend on other libraries. Having a good editor can help you understand the code base and project as a whole.

  • Sublime (free “unlimited” trial, $70 lifetime license) **
  • Atom (free, open source)

With the right plugins, these simple editors can be even more valuable and be as powerful as an IDE.

IDEs

Text editors are decent for small projects, but larger scale code bases need much more organization and automation to get anything done.

You may notice Eclipse not listed; it’s not that I don’t like it, but after trying out and working with the IntelliJ family, it’s so much better and I wouldn’t go back if I don’t need to. Check if your company has licenses for these, but if not, the personal licenses are affordable and well worth the price tag.

These IDEs also have built-in tools to integrate the CLI (still core even with an IDE), automate tests, build scripts, use version control, and even manage your development and remote servers.

Source Control

Source control tools can make your life much easier when managing code, especially one that has a lots of hands in it. It can help you version control, manage code and projects, and keep a running log of all changes against the code base.

Tests

Testing! I know a lot of engineers aren’t excited about it, but what I’ve learned over the last few years is that this is what differentiates a regular engineer from a great one. It prevents a lot of headaches when you have tests established. Imagine when you or someone pushes some new code changes, you can immediately see what it may or may not have broken with those tests. Without tests, you have no way to guarantee that your new additions didn’t break the build.

These testing tools cover both behavioral and unit type tests. Once you get familiarized with testing, you should also look into TDD (Test Driven Development), which I’ll save for another day. I will say though that it’s a fantastic method for developing cross-team projects.

Automation / Tasking / Scripts

These tools are cool and all, but imagine being able to set them up in an automated pipeline. When you save code, it will automatically be tested. When you commit code, it will automatically be tested and then deployed to a server. This is known as CICD (Continuous Integration & Continuous Deployment).

This is a larger topic alone, but here’s some tools used for such a pipeline.

** My current/primary tools

If this Article piqued your interest click the heart or share! If you would like more expansion of a particular topic, please feel free to comment.

Lastly, for more articles about tech, gaming, and programming follow me @kirbdee.

--

--