Orangemn6
Orangemn6's blog

Orangemn6's blog

A handful list of resources for web developers

Orangemn6
·Apr 3, 2021·

6 min read

Subscribe to my newsletter and never miss my upcoming articles

A collection of online tools for the different hats you can put on as a web developer

Background image by [David van Dijk](https://unsplash.com/@dvandijk) on Unsplash

As a developer, it can be a struggle at times to find the right tool to help you accomplish a particular task. Find below a compiled list of some tools that I have used or come across and that can help boost your development process or spark some creativity in your work.

Coding

Carbon App

Image by the Author. Source: [https://carbon.now.sh/](https://carbon.now.sh/)

Exported image from carbon.now.sh

With Carbon, sharing your code snippets has never been easier! This tool allows you to create and share beautiful images of your code. You can customize the look and feel of the snippet by changing the theme, the font, the background, and more! When you are done, you can export the file as a PNG or SVG file.

✨ Alternative: Codekeep.io

Crontab Guru

Image by the Author. Source: [https://crontab.guru/](https://crontab.guru/)

Simply put, Cron jobs are commands set up to run at specific times. They are most commonly used to schedule tasks that are meant to run periodically without human intervention. Examples would be: sending out batch invoices to clients every 1st of the month at 6AM, backing up log data every afternoon, sending reminders, or checking for updates.

Crontab Guru is a free editor that allows you to edit crontab schedule expressions and see when next they will run. You can easily test simple or complex expressions to automate your tasks.

For instance, with Laravel, you can specify the frequency of a Cron job using the cron() method like this:

Image by the Author. Generated using Carbon.now.sh

StackEdit

Image by the author. Src: [https://stackedit.io/app#](https://stackedit.io/app#)

StackEdit is an open-source markdown editor. Its easy-to-use interface allows you to format your lists, headers, links, and images, and text. It integrates with other Markdown extensions, for extra nice features, like rendering mathematical expressions or displaying UML diagrams. You can use StackEdit to create and preview your project’s README.md file before pushing it to a source control platform like Github.

Git Explorer

Image by the Author. Source: [https://gitexplorer.com/](https://gitexplorer.com/)

If you ever find yourself regularly googling Git commands, then this tool is for you. With Git explorer, you can easily look up all GIT commands in one place. It offers a visual cheat sheet of common GIT expressions, all in a beautifully designed interface.

📄 Note: If you want to learn more about GIT version control, check out the following awesome resources: Learn Git Branching, Code Academy — Learn Git, Code School — Git real

Public APIs

Image by the Author. Source: [https://public-apis.io/](https://public-apis.io/)

A collection of public APIs to use in your projects, grouped into 40+ categories and updated regularly.

✨ Similar: Free For Dev

Prototyping

Draw.io

Image by the Author. Source: [https://app.diagrams.net/](https://app.diagrams.net/) (formerly draw.io)

Sample wireframe provided on [https://app.diagrams.net/](https://app.diagrams.net/)

This free online tool allows you to create various diagrams, from basic flowcharts to UMLs, entity-relationship diagrams, maps, wireframes, and more. You can make use of their existing templates or start from scratch.

Excalidraw

Wireframe created by the Author using Excalidraw

Excalidraw provides you with a whiteboard to sketch diagrams. It also features a growing library that you can use to include more assets in your designs. The libraries include charts, form components, logos, media elements, and more. You can also create your own collection and add it to the library. You can also invite people to collaborate on your designs. The little drawback is that at the time of this writing, it does not yet support importing your own image files into your diagram.

(On-page) SEO

In a nutshell, Search Engine Optimization are a set of techniques that ensure your website ranks higher in search results. This allows your site to be properly indexed and to rank for relevant keywords, in order to help drive more traffic to your site.

“ Even if you don’t have your own site, being able to implement best SEO practices onto the site’s of clients can make you more employable. (And ultimately be better for your pocket!) ”

— Source: Learn SEO

As a developer, when it comes to SEO, your concern will be to produce fast loading websites that have a good semantic markup. Among other things, this can be achieved by minifying your JS and CSS files, compressing your images and providing an Alt text, fixing broken links, including relevant meta data and schema information, generating sitemaps and robots.txt file, and creating friendly URLs.

If you want to learn more about SEO, these are good places to start: SEO cheat sheet, SEO guide for developers, SEO checklist for web developers

You might be asked to add a tracking code on the website for Google Analytics. Below are some other tools you can use to find any SEO related issues with your website.

Pingdom Speed Test

Image by the Author. Source: [https://tools.pingdom.com/](https://tools.pingdom.com/)

Page speed is critical when it comes to SEO. Slow loading pages can frustrate your users and drive them away from your website. Pingdom, a website performance monitoring platform, provides a free tool to test and analyze your website speed. It also gives recommendations on how to improve your page performance.

✨ Similar: PageSpeed Insights

Uber Suggest

Image by the Author. Source: [https://neilpatel.com/ubersuggest/](https://neilpatel.com/ubersuggest/)

Ubersuggest contains a site audit tool to identify and fix SEO issues on your website. It shows how quickly your site loads, highlights errors, and provides your overall SEO score. It also provides recommendations on how to improve your rankings.

✨ Similar: SEO Optimer, SEO Tester Online

TinyPng

Image by the Author. Source:

The image size plays a big role in how fast your website can load. Several online tools exist that allow you to reduce the size of your images.

Note: Always check the terms of use of the site

✨ Similar: Compress JPEG, iLoveIMG

Images and videos

Note: Always check the license for the terms of use and attribution rules.

Iwaria

Image by the Author. Source: Image by the Author. Source: [https://iwaria.com/](https://iwaria.com/)

Free African high-quality photos for your projects.

Unsplash

Image by the Author. Source: [https://unsplash.com/](https://unsplash.com/)

Free high-resolution photos.

Coverr

Image by the Author. Source: [https://coverr.co/](https://coverr.co/)

Beautiful free stock video footage.

RemoveBg

Image by the Author. Source: [https://www.remove.bg/](https://www.remove.bg/)

Remove the background from your images.

Icons and Illustrations

Undraw

Image by the Author. Source: [https://undraw.co/illustrations](https://undraw.co/illustrations)

Undraw is a collection of open-source illustrations created by Katerina Limpitsouni. On the website, you can use the color picker tool to match your brand identity and the search bar to easily find illustrations based on keywords. The illustrations can be downloaded in SVG or PNG format. You can follow their updates on their Twitter account.

Storyset

Image by the Author. Source: [https://storyset.com/](https://storyset.com/)

Formerly (https://stories.freepik.com/), this is another great website that allows you to customize, animate and download beautiful illustrations to make incredible landing pages, apps or presentations! You can easily remove the layers you don’t need from the illustrations.

Heroicons

Image by the Author. Source: [https://heroicons.com/](https://heroicons.com/)

Beautiful hand-crafted SVG icons.

✨ Alternative: Flaticon, Feather

Colors

Coolors

Image by the Author. Source: [https://coolors.co/](https://coolors.co/)

Generate beautiful color combinations for your web, mobile or graphic designs. Set a primary color by toggling the lock. Press the space bar to generate complementary color palettes. Check out the internet to learn more about color accessibility and the tools available to help you build inclusive products.

✨ Similar: Color Hunt, Color Hexa


Final thoughts

Thanks for reading! If you enjoyed this article, please don’t forget to give it a reaction , to share it, or to leave a comment. Also, I would love to read about any other tool that has helped you in your development process.

 
Share this