Over the years I’ve acquired many browser bookmarks that have helped me with my day to day tasks as a web developer. I present to you 15 of the best web tools I have in my arsenal in hopes of helping out my fellow developers and web designers.

Contents

• CSS Tools
• Dummy Text Generators
• Conversion Tools
• Miscellaneous Tools

CSS Tools

Links to CSS online tools.

CSS Selector Reference

I keep this handy cheatsheet bookmarked simply because I don’t have all the CSS selectors memorized. Sometimes I can’t remember if I need to use :first-child or :first-of-type. This is super useful when it comes to learning CSS selectors you may have never used before.

Website : https://www.w3schools.com/cssref/css_selectors.asp

A Complete Guide to Flexbox

I have yet to remember all the details about the flexbox layout. I’ve found this guide to be the most helpful when I need a refresher.

“Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.” — CSS-Tricks.com

Website : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

LESS Tester

This tool was incredibly useful as I was learning LESS and still comes in handy now that I have more experience with the CSS preprocessor. Consider situations when your LESS code looks perfectly fine to you, but for some reason, your styles are not rendering as expected. Copy and paste your code into the LESS Tester to see if the rendered CSS is what you expect it to be.

Website : https://lesstester.com/

SASS Meister

I have not used SASS Meister myself, but I decided to include it as an alternative to the LESS Tester above, for those of you who use SASS.

Website : https://www.sassmeister.com/

Clippy

To add some creativity to your website, use this tool to create complex shapes using the clip-path CSS property. Check out Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box on Smashing Magazine for inspiration on how you can spice up your website with clip-path and images.

Website : https://bennettfeely.com/clippy/

Dummy Text Generators

Links to dummy text generators for mocking content.

Lipsum

Keep this site bookmarked for anytime you need to generate random text, such as any number of paragraphs, words, characters, or lists.

Website : https://www.lipsum.com/

Cupcake Ipsum

Here’s a fun alternative to the plain boring latin text generators. Cupcake Ipsum generates random dummy text related to sugary sweets.

Website : http://www.cupcakeipsum.com

Adventure Time Filler Text Generator

Do I really need to explain why this one is so awesome?

Not only is this generator Adventure Time themed, but it also gives you the option to generate more than just plain text. You can generate dummy content that includes a header, some paragraphs, and lists.

Website : http://filler-text.blogspot.com/

Conversion Tools

A collection of online conversion tools.

Base64 Encoder and Decoder

Being able to base64 encode files is super useful. We use this for our icons and then use the base64 data in CSS to render it.

Website : https://www.mobilefish.com/services/base64/base64.php

PXtoEM

Most of our font sizes are defined using em, however, as our designers work in Photoshop, they give use the font size specs in pixels. Use this handy web tool to convert px to em and vice versa.

Website : http://pxtoem.com/

Misc

Additional tools that don't fit in any of the other categories.

Diffchecker

Quickly compare differences between text files using this convenient tool. There is also a Diffchecker desktop application and command line interface.

Website : https://www.diffchecker.com/

Favicon Generator

Need to generate a favicon? Bookmark this site so you don’t have to search around for a favicon generator the next time you need to make one.

Website : https://realfavicongenerator.net/

Regex 101

Regex has always been a pain to me, but I’ve found this site to be incredibly useful whenever I have to deal with them. It’s not only great for testing out your regular expressions, but it also gives you an explanation of each group so you know how to optimize it.

Website : https://regex101.com/

Test Credit Card Account Numbers

If you deal with payment systems, you’ll need to use test credit card numbers when testing the functionality. You’ll find test card numbers for all the major credit card companies, such as American Express, Visa, and MasterCard, on this web page.

Website : https://www.paypalobjects.com/en_AU/vhelp/paypalmanager_help/credit_card_numbers.htm

Validator Tools for Social Meta Tags and Search Engine Markup

This blog post contains a list of tools you can use to validate your site’s meta tags against popular social media sites. I’ll add a few here, but check out the link below for additional social media validators and a detailed explanation on why social meta tags are important.

• Facebook’s Open Graph Debugger
• Twitter Cards Validator
• Pinterest Rich Pins Validator

Not included in the blog post is LinkedIn’s Post Inspector.

Website : https://www.eyeflow.com/validator-tools-social-meta-tags-search-engine-markup/

Conclusion

I hope you find this list to be useful. Please feel free to add your favorite web tools in the comments.