These are my recommended tools, services, and resources for web developers. These are all products and services that I use regularly unless otherwise noted.
My Recommended Web Hosting
Through my clients, I have experience with tons of web hosting services. Some are great, while many are awful.
I use Gridpane for all of my personal sites (including this one) and my high-traffic clients.
Their servers are blazingly fast and reliable, and their customer support is great. Use Gridpane if you need the ultimate speed, as far as site load time is concerned.
I use SiteGround for my client sites with moderate traffic. Their servers are fast, and their reliability is superb. And they offer free SSL certs which are relatively easy to set up.
For managed WordPress hosting, I recommend WP Engine. My favorite feature is the one-click staging site creation. It copies your live site to a staging URL where you can mess with it, then push it live when you’re done.
Disclosure: Some of the links on this page are affiliate links. This means if you click on the link and purchase the item, I will receive an affiliate commission at no extra cost to you. I test or research each service before endorsing it. I own this site and the opinions expressed here are mine.
My Recommended Domain Name Hosting
Your domain name is one of the most valuable components of your web presence. It’s best to register it yourself at a domain name hosting company – don’t let your web developer “take care” of this!
I recommend NameCheap for quality affordable domain name hosting (about half the cost of Go Daddy):
I’ve also heard great things about Porkbun (yes, that is their name, but they are legit) domains and Google Domains.
Time Tracking and Invoicing Software
As a freelance contractor, it’s important to track time accurately and to be able to easily generate invoices. I use Harvest for my time tracking, invoicing, and online payments. It’s saved me tons of time. It automatically generates PDF invoices and offers my clients the ability to pay using Stripe ACH. Get a $10 credit if you use the link below:
Desktop Email Client
I guess I’m a little old school – I still use a desktop email client. When Windows Live Mail went away, I switched to eM Client. It’s compatible with all of the major email services including Gmail, Microsoft Live Mail, and most standard providers. It has the right balance of features and simplicity for me. Read my full review here, or click the link below to go to their site.
Backgrounds
You can create some wonderful backgrounds using pure CSS! Check out these sites:
- Gradienta.io – You can see an example on my Home page. I added the CSS animation.
- Gradient Magic
This site provides SVG backgrounds:
Browser Compatibility
If you’re coding for the web, caniuse.com is invaluable! It tells you which features work on which browsers and what versions. Especially useful if you have to be compatible with older IE browsers (if you’re working on such a project, my condolences).
Clearing Your Website’s Featured Image in Facebook Feeds
Facebook caches the featured images of websites that you post. That’s great, but it’s a problem if you ever want to change the image that Facebook shows of your site in its feed. To refresh the image cache, use the Facebook Sharing Debugger.
Clip Path Makers
These generate shapes that you can use to frame images.
Color Palettes
If you’re like me, and not a graphic designer, picking colors that look good together can be difficult. But, Adobe Color CC is a free site that helps you pick colors that go well together.
Another great resource is the Palx Automatic UI Color Palette Generator. Just enter a base color, and it will provide a whole palette of colors that go well with it!
Color Picker
If you need a color picker, just type “color picker” into Google and it will give you one right in the browser.
CSS Tools
These are some helpful online CSS tools and resources.
- Animista – Generates awesome CSS animations like the Ken Burns effect and much more!
- Complex Box Shadow Generator – Generate natural-looking box shadows.
- CSS3Gen – Cool tools to generate CSS buttons, shadows, rounded corners.
- CSS-Tricks – Their guide to CSS FlexBox is pretty much the definitive FlexBox cheatsheet.
- FontPair – Google fonts that go together well.
- Toggle Switches – W3 Schools has a great toggle switch demo that doesn’t use JavaScript.
- uiGradients – Amazing pre-made gradients
- Ultimate Gradient Generator – Great tool for generating CSS3 gradients.
DNS Propagation
If you’ve changed the DNS of a site and are wondering if it’s fully propagated, WhatsMyDNS.net is an awesome tool.
Another handy tool (this one on the command line) is tracert. It’s available on Windows, Mac, Linux, etc.
.htaccess Redirects/ Regex
Common .htaccess Redirects by Scott Phillips is an invaluable cheat sheet if you ever need to do a redirect in your .htaccess file.
Auto Regex is a tool that converts plain English to a Regex!
HTML Email
Lee Munroe has a super simple free HTML email template with call-to-action button that works well.
Image Bulk Sizing / Watermarks
Birme is an in-browser bulk image resizing tool. It resizes using Javascript, so your images are not uploaded to their servers (or so they claim).
Fotosizer is a Windows app that does bulk image resizes. The paid version will do watermarks.
Watermark-Images.com is a free online watermark tool.
Image SVG to PNG Conversion
To convert svg images to png, check out convertio.co.
Image Editing
For the vast majority of my simple photo editing needs, I use Paint.NET, a free desktop Windows application. It’s great for general image re-sizing, adjusting brightness and contrast, and doing quick markups. It’s easy to use and just works.
Image Editing: Photoshop Alternatives
Of course, I use Adobe Photoshop for more intense tasks like removing parts of an image, but for a lighter-weight free alternative, check out Gimp, available for Mac and Windows.
If you’re really into creating drawings without Photoshop, check out Krita, which is also able to open some Photoshop files.
A free online alternative to Photoshop is Photopea. It’s awesome because it can open Photoshop files in most cases, saving you from having to subscribe to Adobe just to open a ps file.
On my iPad Pro, I use Adobe Comp CC for sketching and drawing along with the Apple Pencil. It’s a free download! You can make some pretty cool watercolor and oil paintings with it.
JavaScript Frameworks
- Alpine.js is a really lightweight, easy-to-learn JS framework!
- GreenSock (GSAP) – Lightweight but powerful and easy-to-use JavaScript animations. Can be triggered on scroll. See this great tutorial to create a gently “bouncing” object.
- Svelte.js is another lightweight, intuitive JS framework!
- YouMightNotNeedJQuery.com – Just like it says, you might be able to replace the 2MB jQuery download with a few lines of modern, browser-compliant JavaScript. Simply search for the JavaScript equivalent for most jQuery commands. Not a framework; more like a cheat sheet.
JavaScript Tools
- FlexSlider – (now owned by Woo Themes) is a great jQuery slider plugin. It is responsive and works on mobile.
- Gauge.js – This is an amazing graphical version of an analog gauge that is easy to set up in JavaScript. The needle even bounces when the page first loads.
- Reveal – Easy-to-use code to implement a popup box on your website.
- Slick (carousels) – “the last carousel you’ll ever need”. All styles of carousels! (Used in Cafe du Monde website).
- SlickNav – JS for mobile dropdown menus.
- Swiper.JS – Ideal when you need a horizontal-scrolling carousel. Used in the Divi Plus Blog Slider module.
- TimeAgo – You know how when you update your status on a social networking site, it says how long ago you did it in real-time? For example, “two minutes ago”, “three days ago”, or whatever. This neat plugin transforms a time in ISO 8601 format to “time ago” format. Use the “.toISOString()” method to convert date and time to ISO 8601.
- TouchWipe – Need to detect a swipe on a mobile device? This is your solution. Works on iOS and Android. Remember to set the preventDefaultEvents parameter to false if you want to be able to pinch, zoom, and scroll in the swipe area.
- Waypoints – Trigger events as the user scrolls down the page. Events trigger by default when the element hits the top of the browser window, but you can set a percentage amount to trigger at different points in the browser!
Learning Programming
Brian Will has some of the best videos on general programming, object-oriented programming, jQuery, and many other programming topics. Check out his YouTube channel. His video on Object-Oriented Programming is one of the clearest explanations of the concept I’ve heard.
JavaScript.info is a great free site for learning JavaScript.
Screen Scraping
Scrapy is a Python-based framework for crawling sites. Looks interesting.
Screenshot API
Check out these services that take website screenshots:
- Screenshotmachine has an API and a live tool that you can use to grab website screenshots.
- thumb.io has a solid screenshot API
Site Monitoring
I use the free Uptime Robot service for unlimited 24/7 site monitoring. Receive an email when your site is down!
For more detailed analysis, I use Pingdom, which gives you waterfall charts showing the load times of all of the elements of your site. Pingdom also offers site monitoring as a paid service.
Screencasting
Whether you want to make a quick video to show someone how to do something on a computer, or you’re making a full-on “how-to” blog post, this Chrome plugin is invaluable for creating videos of your computer screen. You can even have a picture-in-picture of yourself! Best of all, it’s free! Go to Screencastify.com.
If you want to do screencasting with full-blown video editing capabilities, check out Camtasia. That’s what WP Crafter uses for his videos.
Stock/Placeholder Photography
If you’re a blogger or if you generate almost any kind of web content, you need images, check out my favorite sources for free stock photography. Another great source is this article: Free Hi-Res Images for Your Website.
If you need temporary images for a site that you’re developing, check out these free placeholder image services:
- Picsum: you specify the dimensions and it returns a random placeholder image.
- PlaceBear.com: images of bears with the dimensions you specify!
- PlaceKitten.com: same deal with kittens!
Web Development Environments
For developing sites on my computers locally, I started with ServerPress, then went on to MAMP. After encountering some difficulties with it to run reliably, especially after updates, I now use LocalWP, which is just amazing in comparison. Highly recommended!
TasteWP has a really cool tool for testing plugins. Usually, when I want to test a plugin, I would install it on a dummy site that I keep for that purpose. With TasteWP, you just call the URL with the name of the plugin appended and it will spin up a site for you to use! For example, this URL will spin up a site with Jetpack installed:
https://tastewp.org/plugins/jetpack/
With the free version, the site will expire in 2 days (7 days if you log in), but you can pay to keep it indefinitely.
Website Privacy Policy Services
Websites are legally required to have a privacy policy, especially with GDPR (the European privacy law) in effect now. Big companies have lawyers for that, but for most sites, that’s just not economically feasible. Fortunately, there are alternatives to hiring a lawyer.
Iubenda is probably the leading website privacy policy service. They will update your policy in real time as the laws change. They have a subscription model so this is still mostly for bigger companies.
A cheaper alternative is TermsFeed. This service has a one-time fee with no monthly subscription. Cost is usually around $100 or less. They will still host your policies online and update them as the laws change.
Iubenda is still more detailed and comprehensive, but for bloggers and smaller sites, TermsFeed should be fine.
WordPress Builder Themes
My new “recommended “go-to” theme is Kadence WP + Kadence Blocks. It uses the Gutenberg builder, so you can make really fast-loading sites with it.
Previously, Divi was my main theme. It still has its place. Divi looks good out of the box and is one of the easier theme builders to use, which is important for my clients who want to update their own sites. It has a huge install base and is constantly being updated so there’s no worry about the theme being abandoned. Read more about Divi here.
If you want a builder theme with more customizability, a lot of folks like Oxygen Builder. I tried it and do see the appeal. I like certain parts of it, but it’s not for me. Read more about Oxygen here.
Share Your Tools!
What are your favorite web developer tools? Please leave a comment below! – Brian
Please Leave a Question or Comment