Website development tools to improve your workflow 

This blog will go over a number of different web development tools and apps that would help improve your workflow when developing websites or apps. I’ve tried to pick ones that are widely available on all platforms and that are free, some are not but I’ve also included some alternatives to try out instead. I have also tried to pick something used for each step of working on a project from a terminal software used for initial setup, local development environment right through to version control used once code has been written.

Termius

Termius is a terminal app with a built-in SSH client, the free version allows you to create groups of hosts which can be used to easily connect to servers using SSH, you can also select different themes for different servers which could be used to identify the type of server you’re on such as a traffic light system for Dev, Staging and Live or internal/external.

The two paid versions offer some cool features such as sharing connections within a team, SFTP and code snippets but I’m not sure if it’s worth the cost of $8+ per person per month.

Alternatives

For MacOSX there’s the default Terminal app and you could use iTerm2 both are pretty standard and don’t offer much more than a terminal window

Laravel Homestead

Laravel Homestead is a virtual machine which has been prepackaged with some of the required software needed to start creating apps and website on a local development environment, it comes with Ubuntu, Nginx, MySQL, PHP preinstalled and others available, you can see the full list on the Laravel website. Just because it was built for Laravel doesn’t mean it can’t be used for any other none Laravel projects, as I’ve been using it for many years to build WordPress websites.

Installation

To install you can follow the guide on the Laravel website on how to set it up,

it can be a little bit tricky with the different versions of Virtual Box and allowing permissions for it to be installed on MacOSX, but once it’s installed it’s super easy to use and quick to add new projects, it has the ability to work with multiple projects at the same time because you can set each project to its own domain name and directory another thing which is quite good about Homestead is the ability to provision projects with different versions of PHP without having to install and switch PHP versions.

Alternatives

Built-in Webserver

Using built-in webserver, MacOSX is shipped with Apache and PHP pre-installed but you would need to install MySQL if you want to connect to databases with software such as Sequel Pro or MySQL Workbench, a limitation to this way would be that it’s harder to work on multiple projects at the same time because the projects would all use localhost, so you’d probably have to change to a different project each time you want to work on a different project.

MAMP/WAMP

Another alternative would be to use MAMP or WAMP this would give you similar features to Homestead and you won’t need to install packages like you would if you were using the built-in server but the settings could be confusing to some users and to have multiple hosts you would have to pay for MAMP Pro which is £69.90.

Sequel Pro

Sequel Pro is a free to use mac only database application which allows you to create connections and manage databases with ease, it’s easy to install and comes in both light and dark mode, in the past I’ve used MySQL Workbench but it seems to be too overwhelming with settings and features it even sometimes had issues connecting which was frustrating. Sequel Pro suits what I need and it does the job with ease and no frustration.

Alternatives

An alternative to Sequel Pro as I mentioned would be MySQL Workbench although it was overwhelming with features and settings one feature I did like which is lacking in Sequel Pro is a prompt to confirm changes that will be made to a database another option would be to use phpMyadmin in the web browser.

Sublime Text 3

Sublime Text 3 is regarded as one of the most powerful source code editors available, it can be used under an unlimited time evaluation license (free) or paid license ($80) which includes 3 years of free updates. After using it for a number of years It has become my go-to software for my website development projects and other miscellaneous tasks that require modifying text, I’ve come across many useful features and packages that make it more than just any old regular source code editor and I will go through some of them.

Useful Shortcuts

• Multiple Cursors – Select a word and press ‘Command + D’ this will select each instance of the same bit of text to be edited.
• Cursor on all lines – Press ‘Command + a’ then press ‘Command + Shift + L’ this will put a cursor on each line.
• Open any file – Press ‘Command + P’ this will open a popup that you can type to find the file you wish to open.
• Duplicate line/text – Select the line or bit of text you wish to duplicate then press ‘Command + Shift + D’.
• Command Palette – Press ‘Command + Shift + P’ this will open a popup with a list of commands you can use that can be filtered by typing for example ‘install’ will allow you to install a package.
• Find in project – Press ‘Command + Shift + F’ to open up the find and replace then add the project folder to find anything within the project.

Useful Packages

Emmet

Emmet is a sublime package which is an extremely useful tool that allows code to be written faster by using abbreviations then transformed into actual code when run, for example, you could create a header of a website using a short snippet of code then compile it into actual HTML header like the example below:

header#header>.top-bar>(.top-bar-left>ul.menu>li.menu-item.logo>a>img)+(.top-bar-right>ul.menu>li.menu-item*5>a)

In this example the . represents a class you can also use # for id’s, the > places the next element inside the parent element, the () represent a group of elements, the + represents another child element within the parent and the * is a multiplication of that element. After this abbreviated code has been compiled the output will look like the code below and will just need href’s, src’s, alt’s and other text adding for the links.

<header id="header">
  <div class="top-bar">
    <div class="top-bar-left">
      <ul class="menu">
        <li class="menu-item logo"><a href=""><img src="" alt=""></a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li class="menu-item"><a href=""></a></li>
        <li class="menu-item"><a href=""></a></li>
        <li class="menu-item"><a href=""></a></li>
        <li class="menu-item"><a href=""></a></li>
        <li class="menu-item"><a href=""></a></li>
      </ul>
    </div>
  </div>
</header>

For more examples of how you can use Emmet to improve your website development workflow check out the Emmet Documentation.

Syntax Highlighting for SASS

Sublime provides syntax highlighting for a wide range of languages out the box, but one of the languages it doesn’t is SASS/SCSS, to enable this you would need to install a package, one that I’ve been using is the Syntax Highlighting for SASS package although it doesn’t do much it’s always handy to spot any syntax errors and fixing them before checking any changes in the browser, using Gulp also flags any syntax errors when compiling so you know if there are no syntax errors highlighted in Sublime and there no errors in the gulp script that the CSS compiled is error-free.

WordPress Completions

This package is similar to Emmet but is to be used for WordPress code snippets, it will generate the syntax for different WordPress functions, filters, actions, etc that you might not be able to remember off the top of your head but with some assistance, you can continue coding without the need of using the internet or the WordPress documentation for help. I mainly use it for quickly completing WordPress functions such as get_template_directory_uri or get_footer, get_header, and other popular WordPress functions but there’s a lot more to it than just that if you want to check it out on the Package Control website.

Alternatives

There are many alternatives to Sublime Text 3, such as Visual Studio Code, Brackets, and Atom which are all free and available on both MacOSX and Windows, they also offer support for GIT integration for free, whereas with Sublime Text 3 you would need to purchase a license for Sublime Merge which is an additional $99, so maybe it could be time for a change to one of the above, I’ve had some really positive recommendations for Visual Studio Code so maybe it might be worth giving it a tryout.

Homebrew & Packages

Homebrew is a package manager for Mac & Linux, it allows you to install packages easier than the conventional way, whether it’s a package for a web development environment, a tool to monitor performance on your machine or even an app like Chrome, Homebrew makes it simple to install and manage packages.

Some packages I’ve installed include Node & NPM these allow me to use node modules in my projects such as gulp which allows me to compile JS and SCSS, Wget this allows me to download and install WordPress easy using a command, Rsync which allows me to transfer and sync files between machines and Htop which allows me to monitor processes running on a server or a laptop.

Installation

Homebrew has one step to install, you can use the guide on their website which gives you the command to run in the terminal and then you can use ‘brew install’ to install any other packages, apps or tools. Check out this handy cheat sheet for other Homebrew commands.

Foundation/JointsWP

When developing WordPress themes my starting theme is the JointsWP theme, this theme is a boilerplate type theme based on the Zurb Foundation responsive framework, it’s quite a lightweight theme once optimised, using the SASS/Gulp version allows you to select only the parts of the theme you wish to use in terms of CSS and JS so any elements not needed for the site you’re building you can exclude when compiled.

Installation

Using the SASS/Gulp version can be a bit tricky to set up, you need to install specific versions of Node, NPM and Gulp so all the dependencies work, a method I have used which has worked for me is installing the latest version of each and spending time rewriting the Gulp file to work with Gulp 4.0, the improvement in performance is definitely worthwhile, compiling a simple CSS change took around 3 seconds with the original setup but using the latest versions it takes milliseconds. I might go through this in-depth in a future blog post.

Alternatives

An extremely popular alternative to Foundation would be Bootstrap and the Understap theme, personally I’m not a fan of Bootstrap I just feel it has too many unnecessary classes so I’ve tended to stay away from it but understand why it’s so popular, I also think that Foundation has better customisation options by using the _settings.scss file which allows you to simply change many options using throughout the framework making it easier to work with.

Git & Sourcetree

GIT and Sourcetree are really handy when working on a project by yourself or within a team, it gives you peace of mind that in the event of a hardware failure on your machine you don’t lose the work you’ve been working on because there’s a copy of it committed to the repository, it also allows you to work on the same project in teams, each team member can work on a specific feature of the project on their own branch and then the work can be merged together to create a version which can be tagged and deployed to an environment whether it’s staging or production. Further use of Git on larger scale projects could be implementing a continuous integration pipeline; this is more of a DevOps side of development one I’m not over-familiar with but in some cases might improve the efficiency of deploying changes.

Sourcetree is a free to use Git GUI client that enables you to import projects to it and commit changes as you would via the command line but with a more user-friendly approach, it allows you to visually see what files are ready to be committed and pushed, what changes have been made to files and what repository and branch they will be pushed too. It’s a really handy tool and if you struggle with Git on the command line you should check it out!

Alternatives

There are many go to Git repository managers available to use for free which include BitBucket, GitLab and GitHub, they all offer pretty much the same features and the methods of using them are all the same, so which one you use depends on your personal preference.

There are also many different alternatives to Sourcetree, if you’re feeling brave you could just use the command line alternatively you could use the Git integration in your source code editor if you’re using Visual Studio Code, Atom or Sublime Merge.

Wrapping up

To wrap it up, there’s many widely available web development tools, apps and services available that can help you improve your website development workflow, whether it’s to improve efficiency when coding by using Sublime packages and Gulp or whether its keeping your work safe using Git. Hopefully, this blog can help you pick out any areas you could improve on or provide alternatives to tools that you’re currently using to reduce costs.