Development Tools

The work of any developer is going to be improved or hurt by the tools they are using.  As my grandfather used to say, “you need the right tool for the job” and I think that simple but wise statement applies to development tools as well as construction equipment.  I will take you through explain which tools I use and get good performance from, and hopefully this list will help you pick the right tools as well.

 

Code Editor: Atom 

I installed it expecting a code-highlighting text editor, but it has turned out to be so much more than that. Atom does highlight code well, but the Atom application allows extensions to be installed that allow Atom to open project folders, access FTP servers and use very descriptive and easily-distinguishable icons in the file tree it creates of the open folder. Atom also has a Terminal extension that can be opened right inside the application. In addition to executing any Terminal command, the Terminal in Atom makes GitHub projects much more manageable.

Extensions I’ve Added are Remote-FTP for FTP server access, file-icons for improved visuals, linter and linter-phpcs for code linting, minimap to show a preview of my document on the right hand side of the screen, pigments to display colors in project files and platformio-ide-terminal for quick Terminal access from Atom.

 

Test Server: MariaDB & Valet   

Using the Brew Package Manager, installing MariaDB server and Valet to serve up your websites is a cinch. Enter a few Terminal commands to Brew and you are done. All you have to do is run ‘valet park’ in a directory and then any folder in there ‘.dev’ will be a live site that you can visit and share.

SQL Database Manager/Editor: Sequel Pro 

MariaDB and Valet are so minimal that I wanted to have a GUI to use with them to manage my databases. All Sequel Pro does is show an intuitive interface for managing SQL databases, but that was all I needed it to do because the whole website testing process is so easy with Valet.

FTP Client: Atom 

Originally I thought I would need an FTP client, but the atom package for FTP access makes FTP so easy that I did not need another application for that.

Fake SMTP Server: Mailhog 

Sometimes you need your website to send email when a new order is placed, a new blog post is written or a login is attempted. Unfortunately many local servers are not configured to be able to send email out to other servers. Mailhog can be run from the terminal, and why runningcreates a fake SMTP server at ‘localhost:8025/’ that traps all email sent on the server, and allows you to view that email for testing purposes. The configuration will be different for different frameworks, but for WordPress sites running on the Valet server, just turn on WP_DEUB in you ‘wp-config’ file and create a new MU-plugin with the following code:

$phpmailer->Host = ‘localhost’;

// Use SMTP authentication (true|false)
$phpmailer->SMTPAuth = false;

// SMTP port number
// Mailhog normally run on port 1025
$phpmailer->Port = WP_DEBUG ? ‘1025’ : ’25’;

// Username to use for SMTP authentication
// $phpmailer->Username = ‘yourusername’;

// Password to use for SMTP authentication
// $phpmailer->Password = ‘yourpassword’;

// The encryption system to use – ssl (deprecated) or tls
// $phpmailer->SMTPSecure = ‘tls’;

$phpmailer->From = ‘admin@wp.dev’;
$phpmailer->FromName = ‘WP DEV’;
}, 10, 1 );

Browser: Google Chrome /w Extensions 

Last but not least is the browser that any good Front-End Developer needs to use to test sites. The first consideration that one needs to take into account when choosing a browser for testing is the modernity of the rendering engine. Google Chrome is safe bet, because it handles creates visuals for HTML without the need for hacks or alternate browser-specific code. A great feature of Chrome that does not seem to get enough fame is the Developer Tools that come built into Chrome. Not only can the Developer Tools inspect the code and elements of a page, but it allows the user to make changes to that code that are only reflected in the local browser window. Chrome Developer Tools also has the console, which is good for inputting javascript to run, viewing output from a page and seeing errors that the code on a page ran into.

Running on my browser, I have ‘Colorzilla’ to pick colors out of webpages, ‘Resize Window’ to test responsive page changes and see what the page looks like in smaller windows, ‘Wappalyzer’ to see what technolgies were used to create the cirrent webpage, ‘WordPress Theme and Plugin Detector’ to see what Theme and Plugins were used on the current page if it is a WordPress, ‘WhatFont’ to see what font/size/letterspacing was used in a certain place on the current page and ‘Nimbus Screenshot & Screen Video Recorder’ to quickly take pictures of webpagesand mark them up quickly to send someone else proposed fixes and changes.

 

That was the list of 5 dev tools I use with extensions.  You may use some or all of them, the choice is yours, haha.  I hope this list of tools has been helpful for you in picking which development tools to use or changing some of your existing ones.

*This List Will Be Updated If I Change Tools*