Welcome to my post on awesome tools that I use almost every day, and some other mentions for those who have slightly different preferences. In this article I'll be talking about everything from Text Editors to Cloud Services. Feel free to skim through each title until you find something relevant to you. And if you aren't sure what something is, perhaps give it a quick read — you might learn about a new tool that could change your development career!
At the very top of the list, we have the one type of tool every developer needs to use: a text editor. In some of my older courses, I've recorded myself using Notepad++. I don't recommend this editor anymore, but it is very fast. Below are a list of some of my favorite (or used) editors.
Do you need to know Git to be a developer? No, absolutely not. But it helps... it helps a lot!
Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for source code management in software development, but it can be used to keep track of changes in any set of files.
This doesn't sound interesting to learn, nor is it "fun" to learn at first. But it lets you collaborate with other developers, which will eventually be essential as you grow your dev skills.
These are cloud services that run Git. Essentially they keep backups of your git commits and file versions in safe, secure and accessible place.
I prefer GitLab.com because it's free to use, it's still a startup and growing rapidly, and it does everything I need it to do.
Github is the "brand name". Employers will most likely ask for your Github account before they ask for your GitLab account. It's a great place to put your public code to share with friends, followers and employers.
Bitbucket was very popular due to it's pricing plan, but fell out of popularity when GitLab said everybody can have unlimited free repositories.
Each of these services do the same thing, but their business models are different. If you don't have a Github or GitLab account, I'd suggest making one of each right now.
In this section I'm simply referring to the program that runs your command line commands, not the programs you can run inside it.
If you thought web development was purely visual, guess again! Underneath every visual software is a command that's being run just like what you've seen in those 90's "Hacking" movies.
For Mac, your default is Terminal.
For Windows, your default program is PowerShell, although I'd suggest looking into Bash for Ubuntu on Windows.
For Ubuntu, your default program is called Bash.
Each of these programs let you execute commands from your command line. It's how most people use Git, it's how webpack is often run, it's how you start Docker (usually), it's how you compile SASS or LESS with Ruby, and it's how you'll spin up your first cloud server.
https://codepen.io/ — interactive frontend code editor!
But even better than that... you can find an example of just about any frontend code. Looking for something animated? Or an example on Flexbox? Or a responsive card style? Just use their search feature, and you'll spend hours looking at some pretty cool code that you can use for your future projects! (Just don't forget to give credit where credit is due!)
https://www.browserstack.com/ — Need to test your website on Internet Explorer? Or Safari? How about testing your website on iPhone 5/6/7/8/X? Android? Firefox? HTC? Motorola? Kindles?!
Don't buy devices to test your website. Just use BrowserStack to simulate other browsers and devices.
This service is literally a life saver. Clients and users often say things like "you're site is broken". But where do you start? That's not feedback you can work with. So we often ask them which browser they're using. I'll often send people to whatsmybrowser.org to get their browser info, and they can send me a link with their browser details. More often than not, they're using an old browser, like IE11, which doesn't fully support CSS3 Flexbox and doesn't support CSS3 Grid at all. I don't have access to IE11 on Ubuntu or on my Mac, so I rely on BrowserStack to debug. It also supports localhost testing!
SSH is how you access a server. It's through your command line program like Bash or Terminal, and lets you execute commands on your server.
This is important because when you launch a website, your code will live on a server that's probably not on your computer. I access up to 10 servers every day using SSH. Sometimes I need to update the operating system with newest security patches, sometimes I just need to deploy new code using Git, with commands such as git fetch and git pull.
If you ever want to run a server of your own, you'll need SSH access.
When you SSH into a server, you won't have access to Sublime, Atom, VS Code or any other editor with a GUI (Graphical User Interface). You'll need to use a command line based editor. Luckily, there's an easy option and a super cool, very extendible option.
Nano is a program that doesn't come with very many features, but it's great for a simple text edit and the commands to save and exit are right at the bottom.
When you're on your server, type:
sudo nano yourfile.txt
Vim is amazing. And it's so unnaturally unintuitive it's insane! Who types :wq to save and quit a file?! Vim users do. And it grows on you. Much like nano, to use it on your server you need to type:
sudo vim yourfile.txt
I use 2-3 containers for every project I'm on and every project I start. If you're uncertain what Docker is, I have an entire blog post about it.
But the short story is: what happens when you have 2 projects that use different language versions, or global packages?
PHP 5.6 vs PHP 7.*, Python 2.7 vs Python 3.*, or one website uses React and another uses Vue — are you going to load them both into your project? Nope! Docker to the rescue!
In fact, if you wanted to get started with a PHP Docker setup, I have a Github repo for you to get you started.
All of these are dependency management tools. NPM helps you manage your Node packages, Composer helps with PHP Packages, and pip helps with Python dependencies. There are others out there, too. For example, Maven for Java.
I use NPM every day when I spin up a frontend docker container. That container holds my Node version, webpack setup, and installs everything in my package.json file.
pip does the same thing for me, but for Python. And Composer... welp, you guessed it! Same thing!
The point I'm making here is... don't download .zip files and install everything manually. I used to prefer that way, but then I realized how slow it is. Just run npm install lodash or pip install django and let the software do the heavy lifting for you.
Webpack is the beautiful little tool that bundles all my other frontend tasks together. Gulp, BrowserSync, SASS... you name it, it does it!
It's a handy little NPM package.
npm install webpack
There was a time when I thought, "Why not just write regular CSS, it's not that hard", but then I met SASS.
SASS lets you assign variables and functions inside your CSS. You can import other CSS files, or entire frameworks like Bootstrap, Foundation or UIkit. No more 8,000 line .css files. No more searching for a single selector for 10 minutes... you can split your CSS into sections (ie: header, banner, footer, etc) and you'll always know which file to look in.
SASS and LESS are quite similar. I, along with thousands of other devs, prefer SASS over LESS for different reasons. Feel free to do your homework on which one is better for you.
https://ngrok.com/ — secure introspectable tunnels to localhost.
Not sure what that last line meant? That's OK.
ngrok lets you share your localhost website from your computer to the rest of the world. Use it for Raspberry Pi's, testing API's and Webhooks, and more.
It's free to use, unless you want to get fancy with your setup. But using the free version is more than enough for most people. And it's a great way to share your local work with people around the world.
A friend of mine introduced me to Makefiles in early 2017. It changed my life!
You can create a file called Makefile, open that directory in your command line program (Bash or Terminal, or some variation of those), run make yourcommand and it'll execute a bunch of code for you.
That was pretty vague. Let's clear the air.
Makefiles let you create aliases for directories your in. An alias is a shortcut. For example, instead of type docker container ls -a I have a bash alias that runs that command when I type dcls. But that's system-wide, I can run that from anywhere.
When you start writing multiple applications, especially in a digital agency, you'll have different commands to run for different projects. For instance, if I had a global command to bring up a Docker container, I'd always have the same container — even if I changed projects! That's no good. But with a Makefile, I can open that directory in my terminal, and spin up the appropriate Docker container using the Makefile that'll reference my relative Dockerfile.
Almost all my servers run Ubuntu. Almost all the servers my friends run are running use Ubuntu. If it's good enough for SpaceX and their self-landing rockets, it's good enough for a website.
There are other flavors of Linux you can use too, like Arch, Mint or Red Hat. But the world seems to love Ubuntu (and for good reason).
When you set up a cloud server, I'd suggest selecting Ubuntu as your operating system if for only one sole reason:
There is a tonne of free support for Ubuntu on the internet
By cloud provider, I mean a company that can run your code on their server and connect it to the internet for you.
There are tonnes of companies that do this, but the 3 biggest are:
These are the most likely candidates to take your money when you buy a $5/month cloud server.
Content Delivery Networks: these are servers spread across the world that connect your computer to the closest server so you can stream files (like videos) much faster. Instead of connecting to a server in Australia when you live in Canada — you'll connect to a Canadian server, or a server in the northern United States. The less distance the files have the travel, the faster you get your content and the less buffering you see.
I have two favorites: AWS CloudFront (relies on AWS S3, and that's how they suck you in!) and BelugaCDN.
BelugaCDN is very fast and so much cheaper than AWS CloudFront. It's literally the perfect drop-in replacement for CloudFront.
Object Storage is simply a different way to store your files. Amazon's S3 is virtually unlimited — it's like having unlimited external hard drives in the cloud! I'm a big fan of Amazon S3. And I'm a bigger fan of Wasabi Storage.
Wasabi Storage is 80% cheaper than S3, it's nearly 6x faster, plugs into BelugaCDN flawlessly... and their API is identical to Amazon's. If you're using Python, I've modified the boto3 endpoint to work with Wasabi, check out my Github repo.
I don't enjoy using FTP services. It's an old and slow way of uploading/downloading files from a server... but there are cases when you need it.
First, don't ever use FTP. That's like using a website that doesn't have an SSL certificate. Always use SFTP if you can.
Programs like WinSCP or Filezilla support SFTP. Or if you're a command line person, you can just use the SCP protocol.
LetsEncrypt is a beautiful (and free) tool to use on your servers to generate a free SSL certificate. So next time you see GoDaddy offer to give you a SSL certificate for $50, politely tell them to shove it — places like wpengine.com offer them for free because of LetsEncrypt.
Fun fact: SSL is dead. The world now uses TLS, but the name never changed.
When you're working with a design, sometimes you just need an image to hold a place until you get something better. I personally use https://placeholder.com/ because it'll give me any size image instantly.
Google Apps. $5/month per user. Use your own custom domain for your email account. Super affordable, and it turns Gmail into your business email, plus you get the entire G Suite of tools (docs, sheets, calendar, etc.)
https://slack.com/ — it's like a huge building full of rooms with your colleagues and/or coworkers in them. Remember MSN group chats? It's like that... but it's actually good. And it connects to everything you already use, like Google Apps.
There are two places I go for domain names: Google Domains and GoDaddy.
I've stopped buying from GoDaddy entirely because they say things like "$8 domains" but then slap on $20 in privacy protection (which you will always want) and the next year your cost jumps to $25/domain. It's awful, and it's hard to move away from them.
I prefer Google Domains. They don't support as many top level domains (TLDs) but honestly I only ever want .com domains, with the one exception: Kalob.io (this website!)
Google Domains come with free privacy protection, a free forwarding email address (so you don't even need Google Apps), short TTL times, and their prices are great!
I don't like having just one command line window open, and I don't like having more than one program window for my command line open. Tabs like you see in browsers are an easy way to get lost and waste time looking for things.
I use a program to put windows inside of my Terminal/Bash. It's called tmux — and it turns my one command line into as many as I need. Also known as a session manager.
It turns this:
This let's me be in several directories at the same time. While one command is running, I can execute another command — no more waiting around!! And I recently decided to upgrade my tmux setup by using a little add-on called tmuxp, which automatically sets up my windows and runs a few commands for me every time I start a new project.
Again, I have two preferred services: Amazon SES and SendGrid.
Amazon SES is only supposed to be used for transactional emails, like a "forgot password" email, or when you send a receipt to somebody. But you get up to 62,000 free emails per day!
And I personally enjoy SendGrid. It's a little expensive, to be honest, but it comes with an amazing template builder, data, a decent API and a high delivery rate. It's one of those things that I feel is worth spending a little more money on — if my emails don't make it to my readers, then I've written a blog post or created a new course for no reason!
When working with images, it's important to compress them as much as you can without losing too much quality. TinyPNG.com does just that. In fact, the original header image for this blog post was 707kb. That's after Photoshop saved it as "it's smallest png" size. After compression: 57kb (92% less).
Why is this important?
Large images slow down page load times and will rank you lower in search results.
Plus, it's really annoying for users to wait for your website to load large files. And as a bonus irritation, users hate when they use up all their mobile data simply viewing a web page. Don't be that website... compress your images!
For a 92% difference in file size, there's hardly any visual difference.
These are the tools I use almost every day. Some more than others, but this is my toolbox full of tools. I have plenty more to write about, so let me know on Twitter if you'd like to know about more.
If you thought this article was helpful, it's most likely helpful to other developers. Please consider sharing this in your Facebook groups!
Today I'm a full stack LAMPP (PHP and Python) developer that enjoys teaching web development and working with startups.