Here are a bunch of free web dev tools and links I’ve found useful. For services and discounts see the digital resources page.

Code Editors

Sublime Text is a highly recommended, minimalist coding editor that lets you make changes simultaneously to multiple selections.
Brackets is an open-source editor written in HTML, CSS, and JavaScript with a focus on front-end web development created by Adobe. Live preview feature is a little like working in the Chrome developer tools inspector.

WordPress Local Development

WPEngine Local is a free local development environment for WordPress.

Education

Code Academy is the always the first place I recommend to those who say they want to learn to code.

Graphics: Faster, Sharper, Stronger

Aspect Ratio Calculation

Find the aspect ratio for video images without opening Photoshop or getting out a calculator.

Smaller Images

Squoosh LogoSquoosh is a free tool from Google that minimizes images, optimizes SVG files and even converts images to WEBP. This may be my new favorite image optimization tool.

tinypingTinyPNG uses smart lossy compression techniques to reduce the file size of your PNG or JPEG files. Trusted by thousands of companies around the world. It says so right on their website. I use this and it rocks but I do have to say that the paid plugin has been crashing in the latest Mac Photoshop (updated 8/18). I’m praying that a new release will fix this.

SVG Optimization

Optimize how SVGs are written, reduce file size and make them easier to work with. Note that this doesn’t seem to work when images are included in the file in Illustrator it returns an error of “Namespace prefix xlink for href on image is not defined” in my testing.
SVG Optimiser

Placeholder Images

placeholder image Dummy Image allows you to set the color, show the size or use your text for your placeholder images. So create your own or just copy/paste the following to add an image in your code.

<img src="https://dummyimage.com/300x300/bb3a3.jpg" alt="placeholder">

Social Tools & Validators

SSL Checkers

It’s painfully easy for techs to partially mis-install SSL certificates. Always use a 3rd party tool to check the install so your green lock is visible in the browser toolbar.

Free Stock Images

The deal with “free stock” images is that you should read their license and terms of service to be sure but usually the photographer has given up their rights to the image. This doesn’t mean there’s not other rights that could come into play though. For instance, on UnSplash they say the following:

Note that the Unsplash License does not include the right to use:

  • Trademarks, logos, or brands that appear in Photos
  • People’s images if they are recognizable in the Photos
  • Works of art or authorship that appear in Photos

I’m not a lawyer (obviously) but lawyers are searching for mis-use of stock photography. In general what I’ve seen is that they don’t send a cease and desist order but instead send a bill to settle right off the bat.

UnSplash

Free (do whatever you want) high-resolution photos.

PicPik

Beautiful Royalty-Free Photos Sorted By AI.

Burst

Free stock photos for entrepreneurs from Shopify

New Old Stock

Vintage Photos from public archives. Free of known copyright restrictions.

Gratisography

Stock photos of another kind.

Website Scanning

There’s a lot page speed scanners available but what about Analytics? Google Tag Manager? The fastest easiest way to check for theses on a website is GoLiveScan.com. Mobiah, the technical team behind the scanner keep adding new features so it’s worth bookmarking and checking back on it.

More Website Scanners

Web Page Speed Tests

WP Rocket - WordPress Caching Plugin
Here’s a whole bunch of web page speed tests to choose from.