We've put together a list of useful coder tools that you've (probably) missed out on! Everything from markdown editors to use-ready code snippets, ...
We've put together a list of useful coder tools that you've (probably) missed out on! Everything from markdown editors to use-ready code snippets, generators, image optimizers and more, you're more than likely to find a handy tool for any web design/development project here.
In this post:
CSS Buttons Generator
Markdown Live Preview Tool
Javascript Quiz
Coolors - Color Palette Generator
Devdocs - Searchable API Documentation Library
Iconshock's VectorIcons
BGJar SVG Backgrounds Generator
Remove BG Background Remover
OptimizeImages - NextGen Image Optimizer
Bundle Phobia - Project NPM Size Calculator
Buttons Generator
Buttons Generator is a neat little collection of buttons with 15 different design styles where you can look for a button that looks good for your project, and simply click it to get the CSS code of that button copied to your clipboard!
It's simple and straightforward, and there's enough variety of button designs to ensure you'll find one that suits your purposes, definitely a great tool that'll help you save time!
Markdown Preview
Markdown Preview is a markdown editor with split screen view where you can preview your posts and articles in real time, powered by GitHub CSS.
Javascript Quiz
Javascript Quiz is a fun tool to check your JS knowledge while having fun! It displays Javascript snippets and asks questions about them to check whether or not you understand the code, and also provides detailed explanations for each one of the answers so you can improve your Javascript knowledge.
Every time you take the quiz you'll get 10 random questions, and the explanations become available after choosing an answer regardless of it being correct or incorrect. Also, it has dark and light modes available.
Coolors - Color Palette Generator
Coolors is a neat utility for designers to generate color schemes super fast and easy. You can create, save and share perfect palettes with up to 5 different colors in seconds simply by...
10 Useful Free Tools for Developers & Designers You're Probably Missing Out On
We've put together a list of useful coder tools that you've (probably) missed out on! Everything from markdown editors to use-ready code snippets, generators, image optimizers and more, you're more than likely to find a handy tool for any web design/development project here.
In this post:
CSS Buttons Generator
Markdown Live Preview Tool
Javascript Quiz
Coolors - Color Palette Generator
Devdocs - Searchable API Documentation Library
Iconshock's VectorIcons
BGJar SVG Backgrounds Generator
Remove BG Background Remover
OptimizeImages - NextGen Image Optimizer
Bundle Phobia - Project NPM Size Calculator
Buttons Generator
Buttons Generator is a neat little collection of buttons with 15 different design styles where you can look for a button that looks good for your project, and simply click it to get the CSS code of that button copied to your clipboard!
It's simple and straightforward, and there's enough variety of button designs to ensure you'll find one that suits your purposes, definitely a great tool that'll help you save time!
Markdown Preview
Markdown Preview is a markdown editor with split screen view where you can preview your posts and articles in real time, powered by GitHub CSS.
Javascript Quiz
Javascript Quiz is a fun tool to check your JS knowledge while having fun! It displays Javascript snippets and asks questions about them to check whether or not you understand the code, and also provides detailed explanations for each one of the answers so you can improve your Javascript knowledge.
Every time you take the quiz you'll get 10 random questions, and the explanations become available after choosing an answer regardless of it being correct or incorrect. Also, it has dark and light modes available.
Coolors - Color Palette Generator
Coolors is a neat utility for designers to generate color schemes super fast and easy. You can create, save and share perfect palettes with up to 5 different colors in seconds simply by pressing space bar, you can lock color strips to preserve colors in the current palette while changing the rest, reorganize color strips, copy/past HEX color codes and more
Coolors is available for iOS and Android, and also provides a Figma and Chrome plugin as well as an extension for Adobe software coming up in the near future
Devdocs
DevDocs is essentially a library that combines multiple API documentations in an organized, searchable interface, super easy to navigate and comprehensive enough, with hundreds of API documentations currently available for you to research.
The tool itself provides you with easy to follow instructions and tips to navigate it, and you can make full use of it via keyboard shortcuts. It has a search function to browse specific documentation, and it works online, on mobile and can also be installed on Google Chrome.
Iconshock's VectorIcons
Iconshock's VectorIcons Mixer is a powerful utility where you can generate virtually unlimited amounts of use-ready vector icon sets - that's right, not only individual icons but also full sets with hundreds or thousands of customized vector icons
The utility provides thousands of vector icon sets, from Open source sets to premium sets from Iconshock, which you can then mix and match with custom color palettes and vector shapes to create all-new custom icon sets that you can download and apply on your projects right away
All icons in the tool are properly tagged and named, and you can download the sets in PNG and SVG formats. You can also use it via API.
BGJar SVG Backgrounds Generator
BGJar is a neat online generator where you can create SVG vector backgrounds for websites, blogs and apps easily
The tool provides 30+ different templates/categories for backgrounds, with everything from animated shapes to world maps, waves, polygon luminary patterns, organic blobs and many others.
You can customize every aspect of the backgrounds, from colors, amount of shapes, dimensions, shape transparency, types of shapes and everything else in between, and it's a huge time saver that provides you with awesome static and animated vector backgrounds in just a few minutes.
Remove BG Background Remover
This powerful online tool will help you remove backgrounds from photos automagically and completely free! Powered by remove.bg's clever AI, you can burn through your photo isolation process with holy fire by simply uploading your images to the tool and letting it work its magic.
Whether you want to isolate an object from a photo and make the background transparent or add a white background to an object's photo, you'll be able to do it with this tool easily.
It's precise enough that you can even remove the background of photos with hard spots such as hair or trees, and it also integrates with other software through plugins for some of the most popular design platforms, eCommerce sites and computer environments.
OptimizeImages - NextGen Image Optimizer
Optimize Images is a free online image converter and optimizer that allows you to convert your images into WebP & AVIF format, optimize JPEG, PNG, SVG and GIF images to reduce sizes, apply watermarks to images and crawl websites to find and optimize images on them
With this tool you can process your JPEG, PNG, GIF or SVG images to greatly reduce their file sizes without visibly damaging their pixel quality, you can also bulk convert your images to WebP or AVIF format, both of which are great for web content, and perform significantly better than conventional JPEG or PNG images.
The tool will also provide you with proper HTML picture tags for your image SEO which you can copy and paste into your content easily!
Bundle Phobia - Project NPM Size Calculator
Bundle Phobia is a useful web service that allows you to find out the how much your project would grow in size if you added an NPM package to it.
The tool can measure the size of CSS/Sass library as well, and report whether the module supports tree shaking.
This is useful to prevent JavaScript bloat by understanding the performance costs of adding any NPM package to your current build.
It also exposes a best-effort public API, that can be used for continuous monitoring, among other use-cases.
