Some Lesser Known But Awesome Online Tools For Web Development
Tags: webdev, javascript, ux, beginners
Published: 2020-09-22 15:47:13

These are some not so popular sites or apps or extensions I found very useful, either because they make my life easier or because they push me to write more accessible code.

<h3 id="list">The list is divided into these parts :</h3> 
- [UI Graphics](#ui-graphics)
- [Colors](#colors)
- [Icons](#icons)
- [Product & Image Mockups](#product--image-mockups)
- [Online Design Tools](#online-design-tools)
- [Extensions](#extensions)

<hr>

## UI Graphics

|Websites&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|Description|
|------------------------------------------------|-----------|
|[Open Doodles](https://www.opendoodles.com/)|It's a free set of sketchy illustrations by [Pablo Stanley](https://twitter.com/pablostanley).|
|[Humaaans](https://www.humaaans.com/)|Here you can Mix-&-Match illustrations of people with a design library.|
|[Paaatterns](https://products.ls.graphics/paaatterns/)|It's a free collection of beautiful patterns for all vector formats.|
|[Open Peeps](https://www.openpeeps.com/)|A great hand-drawn illustration library.|
|[avataaars](https://avataaars.com/)|Mix & Match avatars with a sketch library also created by [Pablo Stanley](https://twitter.com/pablostanley).|
|[DrawKit](https://www.drawkit.io/)|Hand-drawn vector illustration and icon resources, perfect for your next project.|
|[illlustrations.co](https://illlustrations.co/)|Another great Open source illustrations kit.|

<div align="right">
    <b><a href="#list">↥ To Top</a></b>
</div>

<hr>

## Colors

|Websites&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|Description|
|------------------------------------------------|-----------|
|[FlatUIColors 2](https://flatuicolors.com/)|Beautiful set of color palettes in various flavours.|
|[SchemeColor](https://www.schemecolor.com/)|A great website to download color schemes.|
|[Gradienta](https://gradienta.io/)|A pure css and jpg gradients.|
|[uiGradients](https://uigradients.com/)|Gorgeous looking gradient generator.|
|[Coolors](https://coolors.co/generate)|Create or get inspired by thousands of beautiful color schemes.|

<div align="right">
    <b><a href="#list">↥ To Top</a></b>
</div>

<hr>

## Icons

|Websites&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|Description|
|------------------------------------------------|-----------|
|[Boxicons](https://boxicons.com/)|A simple vector icons set carefully crafted for designers and developers|
|[FeatherIcons](https://feathericons.com/)|Beautiful, customizable open source icons|
|[Simple Icons](https://simpleicons.org/)|More than 1400 Free SVG icons for popular brands|
|[Ionicons](https://ionicons.com/)|Premium designed icons for use in web, iOS, Android, and desktop apps.|
|[Svg Porn](https://svgporn.com/)|1000+ high-quality SVG logos|
|[Browser Logos](https://github.com/alrra/browser-logos/)|A repo for high resolution web browser logos|
|[Heroicons](https://heroicons.dev/)|Not so large but quality set of filled and outline svg icons|

<div align="right">
    <b><a href="#list">↥ To Top</a></b>
</div>

<hr>

## <h2 id="product--image-mockups">Product & Image Mockups</h2>

|Websites&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|Description|
|------------------------------------------------|-----------|
|[Screely](https://www.screely.com/)|Generate Website Mockups Instantly Without Complicated Software|
|[threed.io](https://threed.io/)|Generate 3D Mockups right in your Browser|
|[ShotBot](https://app.shotbot.io/)|A screenshot builder for android and ios.(currently not accepting new accounts)|
|[SmartMockups](https://smartmockups.com/)|Generate stunning product mockups.|

<div align="right">
    <b><a href="#list">↥ To Top</a></b>
</div>

<hr>

## Online Design Tools

|Websites&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|Description|
|------------------------------------------------|-----------|
|[ShapeFactory](https://shapefactory.co/)|One stop of design tools including Logos, Pigments, Gradient, Duotone, Illustrations.|
|[AngryTools](https://angrytools.com/)|Another great all rounder design tool.|
|[Smart upscaler](https://icons8.com/upscaler)|Enlarge and enhance images automatically using AI.|
|[neumorphism.io](https://neumorphism.io/)|Generate Soft-UI CSS code.|
|[Grid.malven](https://grid.malven.co/)|A simple visual cheatsheet for css grid.|
|[TinyPNG](https://tinypng.com/)|Website for smart PNG and JPEG compression.|
|[Remove.bg](https://www.remove.bg/)|Remove image background 100% automatically and free.|
|[Online png tools](https://onlinepngtools.com/)|A collection of useful PNG image utilities for working with PNG graphics files.|
|[Bootswatch](https://bootswatch.com/)|Collection of free themes for Bootstrap.|
|[GraphicBurger](https://graphicburger.com/)|Tasty design resources made with care for each pixel|
|[Blobmaker](https://www.blobmaker.app/)|Quickly create random, unique, and organic-looking SVG shapes.|
|[Personas](https://personas.draftbit.com/)|A playful avatar generator for the modern age.|
|[CodingHeros](http://codingheroes.io/resources/)|Jonas's resources for building great websites with html, css, javascript.|
|[You Don't Need jQuery!](https://blog.garstasio.com/you-dont-need-jquery/)|A great blog post stating why you don't need jquery.|
|[Brumm.af](brumm.af/shadows)|A great online tool for easily creating layered box shadows|

<div align="right">
    <b><a href="#list">↥ To Top</a></b>
</div>

<hr>

## Extensions

|Websites&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|Description|
|------------------------------------------------|-----------|
|[Picture-in-Picture Extension (by Google)](https://chrome.google.com/webstore/detail/picture-in-picture-extens/hkgfoiooedgoejojocmhlaklaeopbecg)|Watch video using Picture-in-Picture|
|[Page Ruler Redux](https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal)|A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page|
|[WhatFont](https://chrome.google.com/webstore/detail/what-font-find-font/djgfpbegnihdgbngpmhjnlchgglngcdn)|What Font allows you to know the font name, its family, color, style, size, position.|
|[Just Color Picker](https://chrome.google.com/webstore/detail/just-color-picker/anjjklgikjggiojapklkllfgehkbljpd)|Сolor picker for web designers and digital artists, created by a designer and digital artist.|
|[GoFullPage](https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl)|Capture a screenshot of your current page in entirety and reliably without requesting any extra permissions!|

<div align="right">
    <b><a href="#list">↥ To Top</a></b>
</div>

<hr>

###**BONUS** : You made it to the bottom of the list. So here's a bonus for you.

|Websites&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|Description|
|------------------------------------------------|-----------|
|[You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)|A great book series on JavaScript. And if you go the [1st-ed branch](https://github.com/getify/You-Dont-Know-JS/tree/1st-ed), the titles are all free for you to learn!|

Thanks for reading. Show some love if you like the post.

**Don't forget to share your favourite tools that helps you in development in the comments.**

---

Find me around web 🕸:
- 💻 Visit my [Website](https://soumya-dey.github.io/)
- 🌟 Check out my [Substack](https://soumyadey.substack.com/)
- 😸 Check my [Repos on GitHub](https://github.com/Soumya-Dey)
- 🦊 Check my [Repos on GitLab](https://gitlab.com/Soumya-Dey)
- 📦 Check my [Packages on NPM](https://www.npmjs.com/~soumyadey)
- 🔗 View my [Profile on LinkedIn](https://www.linkedin.com/in/soumya-dey-kolkata/)
- 📝 View my [Blogs on Dev.to](https://dev.to/soumyadey)
- 😜 Follow me on [Instagram](https://www.instagram.com/soumya_sl/)
- 📚 Check out my [Goodreads Profile](https://www.goodreads.com/dobby_the_free_elf)
- 📪 Contact me [Here](mailto:soumyadey200@hotmail.com)