First off, many of these were taken and elaborated upon from the Tricks of the Trade segment of Complete Developer Podcast. As such they come recommended by a Senior Developer as tools to help that we as Junior Developers should know about. The format for Tricks of the Trade will be changing to be more advice and coding tricks than tools. I’ve compiled the list of tools that we suggested on the show and added a few that were not mentioned. I’ve also asked Will to review this post before I publish.
Our first tool on Tricks of the Trade was a JSON formatter that helps with debugging code as often times JSON is not returned with the line breaks and spaces. Enter your JSON into this site, choose your JSON standard and template, then press Process. The result will be readable JSON.
Edge Web Ruler is a great tool for measuring pixels on different screen sizes. I have personally used this tool to check the alignment of posts both here and on the podcast site. I’ve also used it when developing sites for clients. The ruler comes with measurements for pixels, centimeters, and inches and has both vertical and horizontal orientations. Though it is a Chrome tool it behaves like a native app and therefore can be used with any browser of app. I use it so often I have it pinned to my taskbar. The only complaint is that the vertical orientation has the measurement markings on the inside making it difficult to use.
Palette for Chrome creates a color palette based on colors from an image selected. Using this plugin can help match website colors with a company logo or image that the client wants used.
Save your eyes with DevTools Zero Dark Matrix Theme. If you’re like me and have the HackerVision plugin and most of your apps are set to dark themes opening up Chrome’s Dev Tools can be shockingly bright. With the Zero Dark Matrix theme though the DevTools environment is similar to my IDE.
Fiddler is a free web proxy tool from Telerik. It allows you to test traffic from Mac, Linux and PC and supports multiple frameworks including .NET, Java, and Ruby. It shows the total page weight and HTTP cacheing and compression to help reduce bottle necks and improve performance. It gives metrics for site performance. Fiddler also acts as a man-in-the-middle for security testing and decrypting HTTPS. Basically if you can use Fiddler on your HTTPS site you are not secure. Overall it is a useful tool for web developers especially junior developers since it is put out and maintained for free by Telerik.
Look at the nitty gritty of a network with WireShark network protocol analyzer. Look at protocols on a micro-level on multiple platforms including Linux, Windows, OS X, Solaris, FreeBSD, etc. Read live data from Ethernet, IEEE 802.11, PPP/HDLC, ATM, Bluetooth, USB, Token Ring, Frame Relay, FDDI, and others or capture it allowing for offline analysis. Start off with the free version and upgrade if needed.
BrowserShots takes a snapshot of a page on a variety of browsers to check for compatibility. Simply enter the web address then select the browsers and versions to check. It even has options to select platform specific browsers. With over 100 browsers and versions to choose from this app will help keep websites compatible cross platform.
Test email functionality with SMTP4Dev. Useful when testing error emails or user registrations emails. It is a lightweight email server that sits in your system tray. If you configure your email to point to local host it will send it there and not go out. The message can then be viewed via an email client.
View log files of running process constantly writing to a log with BareTail. It shows the log on screen and continuously updates. Simply drop files in and watch everything go through as they are processed. This works well with service log files when there is no console or if the file size is larger than 2GB as NotePad and other editors open the entire file.
NimbleText Data Manipulator is a free download that will reduce repetitive text such as INSERT statements in SQL. It uses regular expressions behind the scenes to make text manipulation easy and quick. It is Windows only but will work on Linux with Wine. It also comes with a live web version that is not as fully featured as the download.
Need to merge two versions of the same file but don’t want to use git? WinMerge makes that easy in the Windows environment. It is a free tool that allows for visual differentiation with syntax highlighting and regex based file filters for including and excluding. It will allow comparison of a single directory or all sub-directories showing folder comparisons side by side in a tree style view.
A light easy to load alternative to a heavy IDE is Visual Studio Code. It is my preferred editor and a great cross platform open source editor from Microsoft. Code can be viewed in multiple panes side by side. When working on the front end of a site I will have the HTML and CSS open. Since releasing the source code several extensions and themes have been built by users and you can customize the syntax highlighting. It also integrates with git and github as well as dropbox. It is a great compromise between basic text editor and full IDE. I use it both in the Windows and Linux environments.
Before VS Code was released my preferred editor was Notepad++. Based on the heavier Scintilla it uses the Win32 API and supports several coding languages with syntax highlighting, word completion, and function completion. It has tabulated documentation so you can edit multiple files in the same session.
When writing or editing in markdown using MarkdownPad allows side by side viewing of code and output. It is a fully featured markdown editor for Windows. For those of us less familiar with markdown it even has keyboard shortcuts and a text editor for writing markdown without even knowing it. MarkdownPad has an editor for customization of colors, fonts, and sizes in addition to custom CSS. When finished editing copy the HTML to your page.
Draw.io is a great online application for drawing simple wireframes, mind maps, diagrams, and outlines. It comes with templates and shapes necessary for many functions. This is a great resource when putting together a project proposal or meeting.
Another tool for quickly creating wireframes for technical documents is Balsamiq. It creates the experience of drawing on a whiteboard but on the computer. Sketch up the design then switch to clean wireframe skin to make a presentable mockup. Speeding up the time to make mockups lets more ideas flow and allows you to quickly discover the best solution. Balsamiq will adapt to multiple environments as a desktop or web app or a plugin for a wiki or bug tracker. It comes with built in controls for developing desktop, mobile, and web apps. In addition to the tool they have a great set of tutorials for learning. This is Will’s preferred tool for creating wireframes.
Looking for just the right image or background but don’t want to purchase one? Creative Commons has a searchable index of open source material not just images. From projects to open domain laws the site is a great resource for using creative commons work on your site.
One final note, be on the lookout for The Junior Developer’s Toolbox site coming soon with tools, tips, and tricks along with blog posts designed to help junior developers.