oTCG Developer Resource

Everything You Didn't Know You Needed for Web Development

Posted on August 18, 2015 | Toolbox

I often find myself recommending the same programs, services, and tools over and over again when I'm on the subject of web development - so here's the master list of everything on my radar! I'll add to this list as I discover and try new things. Also feel free to post recommendations on the Forums!

Worth mentioning - not everything on this list is free! But I'm on a tight budget myself, so I do try to keep affordability in mind when making these recommendations. ♥

Code Editors

If you've only ever used plain text editors, you might think that a specialized code editor is a bit excessive. But even if you don't consider yourself to be a "developer" and only ever touch code to tweak a few things in a template file - just the basic features such as syntax highlighting and automatic formatting make it incredibly helpful at any level. Try it! (you will thank me later)

  • Notepad++ (Windows) - Recommended for anyone who has only ever used something like Notepad, or just wants some basic code editor functionality while retaining the simplicity and snappiness of a simple plain text editor. I use Notepad++ frequently for quick code edits and troubleshooting.
  • Atom (Mac, Windows, Linux) - Completely free and developed by the team at GitHub! Integrates well with git (as expected), and very easy to customize and extend. Atom is currently my go-to editor when I'm sitting down to work on a big project.
  • Brackets (Mac, Windows, Linux) - Open sourced and backed by Adobe! Very similar to Atom in features and concept - I personally just prefer Atom's interface and vision a bit more, but this is a great editor nonetheless!
  • Coda (Mac) - I wish I had a Mac so I could use Coda! :'D From what I've seen, this is an excellent, all-inclusive editor (terminal, MySQL editor, and file management/transfer built in!) - well worth the $$$, if you can spare it.
  • Sublime (Mac, Windows, Linux) - I don't use Sublime much anymore (it's been largely replaced by Atom in my arsenal) but it's still a very popular editor amongst developers and is worth checking out. License is $70.
  • Caret (Chrome) - Lesser known, available as a Chrome app - I use Caret frequently when working from my Chromebook. Simple, but it gets the job done! C:

Cloud IDEs

All-inclusive development suites in the cloud! Great for open source or collaborative projects (or for when you sometimes work from a Chromebook like me). There's a handful available now, but I currently use and recommend:

FTP/SFTP/SSH Clients

FYI, if your web host supports SFTP or FTPS (most hosts do support it these days), ALWAYS use SFTP as opposed to plain FTP. I'm not going to go into detail, since it's easy enough to do a quick Google search to find out why - but at least just know that it's VERY MUCH MORE SECURE, and it's not much different to set up and use, so there's really no reason to not use it. \o/

  • Cyberduck - My current go-to FTP/SFTP client, namely because it's available for Mac, Linux, and Windows. There is also built-in support for connecting to things like S3 and Google Cloud Storage, which is really handy.
  • Transmit - A very fast and easy to use FTP client for Mac! Not free - but worth the money if your primary dev machine is a Mac.
  • NppFTP - A very convenient FTP client built into Notepad++.
  • Filezilla - I don't use/recommend this much anymore, as it's lacking in features compared to Cyberduck and Transmit. But for most simple tasks, it's still perfectly fine!
  • PuTTY - An SSH client for Windows. It's not very pretty, but it gets the job done!
  • Chrome Secure Shell - A very simple SSH client for Chrome! Not as many options as PuTTY, but the essentials are there. Obviously this is very handy when I'm on my Chromebook, or any new computer where Chrome is available and I don't feel like finding and downloading PuTTY.

Databases

I think we all already know about MySQL, but there are some good (some would even argue that they're better!) alternatives worth checking out:

Database Design & Management

  • HeidiSQL - Currently my go-to for database management. Simple, easy to use, and has all of the features that I need without unnecessary bloat. :)
  • DBeaver - I preferred the interface and features in HeidiSQL, but this is also a good simple option.
  • SequelPro - Easy to use, sleek UX. Only for Mac, though. ); (Macs really do get all the best things)
  • phpMyAdmin - I loathe to recommend phpMyAdmin, since after working with some of the other options it feels very slow and clunky to use. Also, in my opinion, the fewer tools you have actually running on your server alongside your websites, the better. However, it's still the best option if you don't want to use a remote client, and most shared hosts will already have it installed for you.
  • MySQL Workbench - Very powerful and feature rich, but I felt it was a bit too much for me personally. Also seemed to be a bit of a resource hog.
  • Vertabello - For database design. Offers a nice visualization when creating your database schema. Also, it's a web app, which makes it easy for me to use from almost anywhere. :D

Chrome Extensions

  • Wappalyzer - View the technology stack used on any website at a glance. This is probably my most used extension - I love to learn about new technologies, and so I'm naturally curious about what other people are using on their websites. Basically, this extension helps me to be nosey more efficiently. :'D
  • IP Address & Domain Information - Quick domain and IP lookup.
  • ShowIp - Displays the website's IP address at the bottom of the page. Handy when you're working with multiple instances of the same website or making changes to hostnames or DNS settings.
  • jQuerify - Injects jQuery onto a website. I do a lot of testing in Chrome's JavaScript console, and being able to use jQuery (even on sites where it's not already installed) makes writing quick tests much easier.
  • Tampermonkey - User scripts! ♥
  • EditThisCookie - Easily access, view, edit, and delete your cookies.
  • User-Agent Switcher - Mostly used for testing how a website behaves on different devices/browsers, or to pretend I'm Google Bot.
  • Postman - For testing HTTP and API requests/responses.

Email Services

Most people don't understand how complex email is, and as a result often misattribute the cause for failed deliveries. Getting a message from sender to recipient, and doing it properly, is really a very intricate process. For this reason - using a dedicated email service provider is something that I believe everyone should be doing (even those of you on shared/managed hosting).

Consider this:

  • Most shared hosts send all outbound emails from the same IP address (unless you pay for a dedicated IP). If just one user on the server sends spam and, as a result, gets added to a blacklist (which happens all the time on shared hosts), then everyone else on the same server gets labeled as spam (#1 reason why emails from your website will "suddenly" or "randomly" start going to spam inboxes).
  • The process to get an IP address removed from a blacklist (and keep it off!) is a pain in the ass. Most shared hosting providers don't care if you're on a blacklist, and will only pretend to do something about it when prompted.
  • If you're on a cheap unmanaged VPS, 99% of the time you're not going to have the knowledge or time to properly manage an email service for your website.
  • Most transactional email services provide generous free quotas (and beyond that, it's pennies for any small to medium sized project).
  • A transactional email service's business model revolves around email - so they are very proactive about maintaining and improving performance and deliverability. The chances of your email landing in a recipient's inbox (provided your email isn't actually spam) are increased tenfold just by using one of these providers.

Now pick one!

For newsletters and subscription lists:

  • Mailchimp
  • Mad Mimi - I personally use and recommend for their super easy API and great docs! :Db

For transactional emails:

Bonus - test the spammyness of your emails.

Content Delivery

I think the following CDN services are awesome, but no single CDN provider is going to be the best for everyone. I recommend checking out the free Country reports by Cedexis (or create an account for more detailed historical data) to see performance for each CDN by country, and then select the one(s) that will be the most performant for your own audience.

Encryption & SSL Certificates

Setting up SSL used to be a scary and expensive thing to do, so it was always understandable to forgo this process for any apps or websites that are just "hobby" projects, or otherwise not mission-critical. However, free certificates are a thing now, and pretty soon it's going to be even easier (and still free!) to set up. Performance is also not much of an issue thanks to SPDY and HTTP/2. If your website handles passwords or any other sensitive/private information (and especially if you're not the only one using it!), please use SSL! As a bonus, it'll also increase your search engine ranking on Google!

Development Environments

The best development environment is one which completely matches the environment of your production server. This is not always possible, but the closer you can get to a complete match, the better! It's even more difficult to achieve when developing on a Windows machine since it's not very "Linux-like", and generally most people are hosting websites and apps in a Linux environment. I've found that for my own workflow, developing on a remote VPS (see the next section for providers) works best, as it's accessible from almost anywhere (allowing me to switch between computers easily) and I'm in complete control of the application stack that it's running.

To make your environments consistent and easy to reproduce, I recommend:

  • Vagrant - Allows you to quickly reproduce any environment via Vagrantfiles and a simple vagrant up command.
  • Docker - The trendy thing to use at the moment - it lets you "containerize" your app and run it almost anywhere.

For anyone that's determined to work locally, I recommend checking out:

Something like XAMPP is not terrible if you're developing for a LAMP stack and you don't want to fiddle with VMs.

Cheap/Micro VPS Hosting

If you're interested in development, I highly recommend VPS hosting over shared hosting. These days, low-end VPS prices are comparable to those of shared hosts for similar performance needs, but a VPS will give you complete control of your application stack, along with better isolation from other users on the same server. You can get away with an unmanaged server without having to do much actual managing by using something like Forge, Cloud66, or ServerPilot (referral link), which will handle much of the configuration and maintenance for you. There IS a learning curve, but it's worth learning! And there are many great tutorials provided by the DigitalOcean community to get you started.

  • Digital Ocean (referral link) - I'm currently using Digital Ocean to host my websites. They probably aren't the most performant provider (which is not to say their performance is bad - my websites are faster than they've ever been on any shared host!), but I've been spoiled by their pretty, minimalist interface and streamlined droplet creation. If you use my referral link, you'll get a $10 credit to your account - enough to try them out free or 2 months!
  • Linode
  • Ramnode
  • Vultr

Worth mentioning - Webfaction offers a good happy medium between your typical shared hosting environment and a VPS. It's still technically shared hosting, but their services are geared towards developers, so there is much more flexibility in the types of applications that you can install and the level of access that you have to the server.

PaaS Hosting

PaaS stands for Platorm as a Service, which is basically just another hosting option your website/app. I generally prefer to go the unmanaged VPS route for more flexibility, but PaaS is a good option if you really just want to write code and not worry about the underlying server technology. Many PaaS will offer free usage tiers for testing/development, and some are even suitable for hosting small, low traffic websites.

Analytics

I also recommend using something like Google Tag Manager to streamline the tag implementation process.

  • Google Analytics - Detailed reports on traffic to your website.
  • Piwik - I personally use Google Analytics because it's what I'm accustomed to using from my day job, but Piwik is a good alternative with very comparable features.
  • Hotjar

Monitoring

Learning Resources

Frameworks

PHP:

Python:

Ruby

Node.js

CSS

JavaScript

Content Management / Blogging Platforms

Version Control

Git is all I've used. What with the existence of GitHub (where all the cool kids are), everything else just seems irrelevant. If you're serious about development (and/or want to be involved in the open source community), it's pretty essential that you learn Git.

There's also BitBucket as an alternative to GitHub if you want free private repositories.

Continuous Integration

Automatically run tests on each new build, and (depending on the service) deploy to a remote server of your choice if the build is passing. Continuous integration allows you to quickly develop new features for your websites and apps by saving you precious time on the testing and QA cycle.

Unit Testing, Error Handling, Debugging