Here are a bunch of free web dev tools and links I’ve found useful. For services and discounts see the digital resources page.
Sublime Text is a highly recommended, minimalist coding editor that lets you make changes simultaneously to multiple selections.
WordPress Local Development
WPEngine Local is a free local development environment for WordPress.
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.
Squoosh 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.
TinyPNG 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.
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.
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">
Free, “do wtf you want with” pixel-perfect icons from Iconic.app
Social Tools & Validators
- Add Facebook Likes for a page or post without a plugin.
- Facebook Sharing Debugger
- Twitter Card Validator
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.
Free (do whatever you want) high-resolution photos.
Beautiful photos of Black and Brown people, for free.
Beautiful Royalty-Free Photos Sorted By AI.
Free stock photos for entrepreneurs from Shopify
Vintage Photos from public archives. Free of known copyright restrictions.
This directory hasn’t yet fully launched but the photos are all free to use without attribution.
Diverse Stock Images (Not all Free)
- Adobe’s “The liquid self”
- Getty Images: Disability Collection
- Getty Images: No Apologies Collection
- CreateHER Stock
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
- Google Structured Data Testing Tool (Soon to be deprecated)
- Google Rich Results Test (Replaces Structured Data Testing Tool)
- Google Pagespeed
- Google Mobile-Friendly
Web Page Speed Tests
Here’s a whole bunch of web page speed tests to choose from.