Free Web Development Tools
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.
Code Beautify may help with some formatting along the way.
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 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.
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 Optimizer
Placeholder Images
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">
Icons
Free, “do wtf you want with” pixel-perfect icons from Iconic.app
QR Codes
QR Codes can now be generated in multiple formats including vector from Adobe for free here: https://express.adobe.com/tools/qr-code-generator
Social Tools & Validators
- Add Facebook Likes for a page or post without a plugin.
- Facebook Sharing Debugger
- OpenGraph Preview
- OpenGraph Debugger
- LinkedIn Post Inspector lets you see what your link will look like before you post. Pro tip: LinkedIn refreshes their link preview cache every 7 days so use a query string on your URL to get a fresh result. Example:
https://mrdif.com?new
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.
Redirect Checker
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 are no 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 misuse of stock photography. In general, I’ve seen 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.
Nappy
Beautiful photos of Black and Brown people, for free.
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
WordPress Photos
This directory hasn’t yet been fully launched, but the photos are all free to use without attribution.
Diverse Stock Images (Not all Free)
- Nappy
- Adobe’s “The liquid self”
- Getty Images: Disability Collection
- Getty Images: No Apologies Collection
- CreateHER Stock
Website Scanning and Validation
There are a lot of 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, keeps adding new features, so it’s worth bookmarking and checking back on it.
More Website Scanners
Web Page Speed Tests
Here’s a whole bunch of web page speed tests to choose from.
