Time is of great value during software development. The faster you can finish a task or feature the happier your manager or client is and the more time you have as a developer to focus on other things that matter to you.

My previous article described some technologies I use daily to create web applications and 10x my productivity. In this article, I will outline more of the tools and resources I use so you can also have them in your toolbox (arsenal).

I will cover :

• Vscode development tools

• HTML, CSS, JSON, and Javascript resources

• Fonts and Typography tools

• Colors and color palette generation tools

• Images and video tools

• Icon resources

• Testing and optimization tools

• Resources for Design Inspiration and lots more

Let's jump right into it.

Vscode Development Tools

Image Preview

An extension for Vscode that shows an image preview when you hover over the image path in your code.

Color Highlight

An extension for Vscode that makes colors in your editors stand out.

HTML, CSS, and JSON Resources

Dummy Json

With dummy JSON, you have a ton of REST endpoints filled with JSON data which you can use to build the frontend of your application without worrying about a backend or creating static JSON data.

Random User Generator

A free, open-source API for generating random user data. Like Lorem Ipsum, but for people.

Fake Store Api

Need a REST API for your e-commerce project? Fake store API provides you with products, carts and users data in JSON format.

Regex101

Generate and test regex patterns on the fly.

30 Seconds of Code

Discover short code snippets for all your development needs.

Emmet Cheat Sheet

When writing HTML or CSS, Emmet is an essential tool to have in your toolkit as it provides you with code snippets.

HTML Entity Reference

Provided by Css-Tricks, this cheat sheet(reference) provides you with HTML entity names, their numeric codes, hex codes, and ISO codes.

Clippy

Are you using the new and potent clip-path property? Clippy helps you generate clip-path properties instantly.

CSS Easing Function

Generate the right easing function for your CSS transition and animation property.

Base64 Guru

With Base64 Guru, you can convert your data to plain text to guard against data corruption when moving data across various storage media.

You Might Not Need JQuery

Find the modern Javascript equivalent of a jQuery code. This tool is helpful if you are rebuilding an application that is heavy on jQuery.

ColorZilla

A secure color picker and a color-related suite of tools that helps you grab colors from your favorite website. You can check out ColorZilla for Chrome and ColorZilla for Firefox.

Buttons Generate

Browse through a list of buttons, click on one that catches your fancy, and paste the code to your project.

Neumorphism.io

Generate Soft-UI CSS code.

Getwaves.io

Generate wave patterns for your project.

Glassmorphism CSS Generator

Generate CSS code for design elements that resemble translucent frosted glass.

Animista

Library for creating CSS animations.

Keyframes. app

An all-in-one toolbox for creating CSS @keyframe animations, designing simple and complex shadows, creating color palettes, and finding the HTML and CSS values of special characters.

Transform.tools

A multilingual web converter. Convert Javascript objects to Typescript, SVG code to JSX, HTML code to JSX, Markdown to JSX, and lots more

Fonts and Typography Tools

Font Joy

Generate font pairings/combinations that don't just look pleasing but work great together.

Fontsquirrel

A library of free fonts for commercial use.

MyFonts

Looking for premium fonts for your project? You can find them on MyFonts.

Colors and Color Palette Generation Tools

Open Color

A free and open-source color scheme with UI optimization. My go-to source for making my color selections.

Color Hunt

Don't know what colors to use for your website? Color Hunt provides you with a handpicked color palette. Go color-hunting for your new project :).

Flat UI Colors

An excellent place to start when selecting a color for your next project's flat design.

Material Palette

Inspired by Material Design, you can generate and download your project's color palette.

LOL Colors Pallete

A carefully chosen color scheme as inspiration.Another great source for color palettes.

UI Gradients

A collection of lovely color gradients that you can use and export for your project.

Tints and Shades Generator

Make shades and tints of your favorite colors.

Palleton

Another great color palette resource.

Color Contrast Checker

Calculate the contrast ratio of your text and background colors. Great for building accessible websites.

0to255

0to255 makes it easier to discover lighter or darker shades of any color. Great for setting up color themes for your project.

Images and Video Tools

Favic-O-Matic

Generate favicons (both .ico and .png) with the corresponding HTML code for every browser and device.

ISORepublic

Gain access to thousands of free high-resolution stock images and videos.

unDraw

With unDraw, you can select from hundreds of free and open-source graphics with customizable colors for your websites.

DrawKit

Get hand-drawn 2D and 3D illustrations, icons, and animations. Perfect for your next project.

UI Faces

A growing library of free, AI-generated, high-resolution avatars for design mockups, thoughtfully curated to suit all your creative needs.

Coverr

A library of beautiful free stock video footage.

Testing and Optimization Tools

Unlight House

Scan your entire website for performance, accessibility, best practices, and SEO faster. Unlike the Google lighthouse that comes with the browser, Unlight House scans every one of your website's pages and renders the result in a way better UI.

HTML Validator

Check the validity of your Web documents in HTML, XHTML, SMIL, MathML, etc.

CSS Validator

Just like the HTML validator, this tool ensures that your stylesheet code is valid CSS.

Squoosh

With Squoosh, you reduce file size and maintain high quality for your web projects. The fun part, it is secure as images never leave your device since Squoosh does all the work(image compression) locally.

The Frontend Checklist

Popular checklist to see if the code on your website is indeed ready to be deployed. Perfect for modern websites and meticulous developers!

Web Usability Checklist

This checklist helps you catch common usability problems on your website.

Woorank

Get a SEO review of your website to address common issues, and get ahead of your competition.

Icon Resources

Phosphor Icons

Phosphor is a flexible icon family for interfaces, diagrams, and presentations. You can customize the thickness and color of phosphor icons.

Ionicons

Free and open source icon set designed for use in web, iOS, Android, and desktop apps. Also provides support for SVG.

Iconmonstr

Discover 4784+ free icons in 316 collections. Perfect for situations where you only need one icon and not a full collection.

Line Awesome

A perfect alternative for the popular Font Awesome icons library.

Resources for Design Inspiration

Curated.design

Discover a catalog of out-of-this-world web designs to implement in your next project.

One Page Love

Find beautiful one-page websites and templates for inspiration and references.

Land Book

A gallery of the best hand-picked website design inspiration.

Screelane

Find inspiration for individual elements and components.

Bonus Tool for React Native Developers.

React Native Picture-in-Picture(rn-pip)

A simple and lightweight library to add picture-in-picture support in React Native Android applications. It also has a listener to notify the picture-in-picture state change.

GitHub Repo

https://github.com/micaiah-effiong/rn-pip

Rn-pip Docs

https://micaiah-effiong.github.io/rn-pip/

Conclusion

I hope you find this article helpful in enhancing your everyday productivity. Which more everyday tools do you use that aren't on this list? Kindly post them in the space provided for comments below. I look forward to seeing other tools or resources you use to 10x your productivity.

Keep Coding...