Tips and Tools from the 500px web team

The 500px web team meets weekly for a broad-ranging discussion we call the “Web Tech Deep Dive”. Sometimes we explore a dark corner of our codebase; sometimes someone presents a new technology; and sometimes it’s a round-table discussion. We recently shared tools and tricks we use to be more productive, and thought it would be […]

The 500px web team meets weekly for a broad-ranging discussion we call the “Web Tech Deep Dive”. Sometimes we explore a dark corner of our codebase; sometimes someone presents a new technology; and sometimes it’s a round-table discussion. We recently shared tools and tricks we use to be more productive, and thought it would be a great idea to share some of these with you! Let’s begin.

Ag — The Silver Searcher

“The really clever thing about Ag is that it is smart enough to only check files that it knows about so you can tell it to ignore logs, vendor, etc. It’s super fast. There’s a whole bunch of useful little things in here”

Ag is a code searching tool for your command line, just like Ack or Grep, but better. It has the speed of Grep, and the ability to ignore files like Ack. It automatically excludes files that you’ve added to .gitignore, and groups matches by file.

Price: Free. Who doesn’t like free stuff?

Link: https://github.com/ggreer/the_silver_searcher

Dash

“Super useful tool that allows me to look up docs whenever I don’t have internet available. Use it a lot when I’m commuting or on airplanes”

Dash (iOS, macOS) lets you have your own personal documentation library. It’s most commonly used to download documentation for languages and APIs to have quick access to them under a singular application. However, it also has online support allowing you to search Google and Stack Overflow for answers if you’re unable to find what they’re looking for in the docs. Some other features are snippets, annotations inside docs, and integration into most editors allowing you to quickly look up anything under your cursor. Dash is used by most members of our team.

Note: Velocity is a good alternative for Windows users.

Price: Free with the occasional prompt to purchase for $24.99.

Link: https://kapeli.com/dash

FZF — Fuzzy-Finder Command Line Tool

“Makes it really easy to do things like git add (specific file)”

FZF is a fuzzy finder for your terminal that’s written in Go. It lets you search for files inside the current directory or past commands in your history via blazing fast autocomplete. Bob’s most common uses for FZF are picking files to commit (`git add <filename>`) and edit ( `vim <filename>`). Ctrl+R will initialize FZF to look through your history and Ctrl+T will initialize FZF to look through all of the folders and files under the current directory.

Price: Free.

Link: https://github.com/junegunn/fzf

Synced-Sidebar Plugin for Atom/Sublime Text

“It lets you easily view and switch between files in the same directory; super useful if your project structure groups files by feature”

Synced-sidebar was originally a plugin for Sublime Text but now works on Atom as well. These can be installed through the built-in package managers. It automatically syncs your sidebar to always show the currently opened file, helping you keep track of your position in your project & the context for your edits. It’s a small plugin, but it affects your workflow more than you’d expect!

Price: Free

Link: https://atom.io/packages/synced-sidebar, https://github.com/TheSpyder/SyncedSideBar

Rubocop

“Very helpful for me when writing code. If I’m looking at code that I didn’t write, I’m able to refactor code really easily because of the linter and make it look really nice”

Rubocop helps you follow your Ruby style guide throughout your code base. One of the best features of Rubocop is that it allows you to customize the types of issues you want it to catch. Once configured, Rubocop detects syntax and styling issues in your current file and highlights the issues in yellow (for warnings) or red (for errors). This lets you correct style issues as you go, rather than having to resolve them all in a pull request.. Here’s an example of our Rubocop settings:

https://gist.github.com/JavierR14/c5ac03df9ffd92206244ac3c697be376

Price: Free

Link: https://github.com/bbatsov/rubocop , or download through your editor’s package manager by looking for ‘linter-rubocop’

Spectacle

“It lets me adjust my screens really quickly since macOS doesn’t have built-in support for snapping screens to the sides or resizing them easily. I can do a lot of different adjustments on the fly”

Spectacle is a general purpose tool that isn’t specific to developers, but it’s incredibly useful for Mac users. macOS doesn’t have any built-in shortcuts to resize windows or snap them to the borders of your screen. Spectacle makes it easy to define shortcuts that move, resize, and snap windows in position. Personally, I use the default shortcuts for snapping windows to different sides of the screen as I find them convenient. However, every shortcut is customizable.

Price: Free. They have a donation link if you’d like to support them.

Link: https://www.spectacleapp.com/

Gas Mask

“I never have to bother with tracking down my hosts file and commenting out lines or adding lines just to test or access staging. I can just set multiple environments and switch between them instantly.”

Several developers and QA team members use this macOS hosts manager to easily switch between /etc/hosts configurations without manual edits. Gas Mask lets you create as many hosts files as you want and easily switch between them by double clicking (or using the menu bar icon). It’s extremely useful when you have multiple environments such as development, staging, and production where each one needs its own set of IP mappings.

Price: Free

Link: https://github.com/2ndalpha/gasmask

Conclusion

All of the tips and tools mentioned above help make your coding life more pleasant and efficient, so we recommend adding a few to your arsenal! At 500px, we’re always looking to grow and expand our knowledge. What do you do personally to be more productive as a developer? Leave a comment below and let us know about your favourite tools or tips!


Tips and Tools from the 500px web team was originally published in 500px Engineering Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: 500px