The latest articles on Forem by Akshay Chougule (@akshay35c). https://forem.com/akshay35c https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F237599%2F44d67edf-f5fb-437c-8277-6e0d9f3003b4.jpg https://forem.com/akshay35c en Akshay Chougule Sat, 22 Feb 2020 18:36:23 +0000 https://forem.com/akshay35c/productive-tools-for-web-development-4bd5 https://forem.com/akshay35c/productive-tools-for-web-development-4bd5 <h2> 🦸FRONTEND ESSENTIALS </h2> <p><em>In modern times, our lives have certainly become a bit more dynamic.<br> Being aware of this, We'll be exploring broad category of tools.So let me show you some tools I find extremely useful, either because they make my life easier or because they push me to write more accessible code🕴️.</em></p> <h1> Color 🌈 </h1> <p>1.<a href="https://color.hailpixel.com/#3CB46E" rel="noopener noreferrer">Colordot - A color picker for humans</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fi4gco65wnwwqla85pzow.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fi4gco65wnwwqla85pzow.png" alt="Alt Text"></a></p> <p>2.<a href="https://uigradients.com/#Wiretap" rel="noopener noreferrer">uiGradients - Beautiful colored gradients</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ffgyrbke0joq3dtuzwka5.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ffgyrbke0joq3dtuzwka5.png" alt="Alt Text"></a></p> <p>3.<a href="http://stylifyme.com/?stylify=www.pluralsight.com" rel="noopener noreferrer">Stylify Me - Online Style Guide Generator</a></p> <p>4.<a href="https://www.colorsandfonts.com/" rel="noopener noreferrer">Colors and Fonts</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fxb9mxa468x6vqap8zkp7.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fxb9mxa468x6vqap8zkp7.png" alt="Alt Text"></a></p> <h1> Fonts 📣 </h1> <p><a href="https://fontspark.app/" rel="noopener noreferrer">FontSpark | Discover Better Fonts</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fa2sda5go3oxijzlch4ve.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fa2sda5go3oxijzlch4ve.png" alt="Alt Text"></a></p> <h1> Icon 🎩 </h1> <p><a href="https://thenounproject.com/" rel="noopener noreferrer">Noun Project</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fw0a1ltc23kaxm0vfqy4m.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fw0a1ltc23kaxm0vfqy4m.png" alt="Alt Text"></a></p> <h1> CSS 👑 </h1> <p><a href="https://codepen.io/oliviale/full/GbmyYx" rel="noopener noreferrer">CSS Grid: Style Guide</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F4e415qxoyu5075qdrbzb.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F4e415qxoyu5075qdrbzb.png" alt="Alt Text"></a> </p> <h1> Logo 💎 </h1> <p><a href="https://www.logaster.com/logo/?t=EBookStore" rel="noopener noreferrer">Logaster logo maker</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fbjd1a05vogkki2ubh1vg.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fbjd1a05vogkki2ubh1vg.png" alt="Alt Text"></a></p> <h1> Animation 👾 </h1> <p>1.<a href="https://www.colorsandfonts.com/" rel="noopener noreferrer">Animate.css</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fpg7o5hn275oub5jt16z2.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fpg7o5hn275oub5jt16z2.png" alt="Alt Text"></a></p> <p>2.<a href="https://emilkowalski.github.io/css-effects-snippets/" rel="noopener noreferrer">CSSeffectsSnippets</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0fuobsl9axzywg9me14p.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0fuobsl9axzywg9me14p.png" alt="Alt Text"></a></p> <p>3.<a href="https://sarthology.github.io/Animatopy/" rel="noopener noreferrer">Animatopy</a></p> <p>4.<a href="http://collectui.com/challenges/sign-up" rel="noopener noreferrer">Collect UI</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fei1tfnqp5u4oxqkaen3a.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fei1tfnqp5u4oxqkaen3a.png" alt="Alt Text"></a></p> <p>5.<a href="https://codepen.io/andrewhawkes/full/RwwOJrO" rel="noopener noreferrer">Steam inspired game card hover effect</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F1yrzaf9l1d1b0uae77vj.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F1yrzaf9l1d1b0uae77vj.png" alt="Alt Text"></a></p> <p>6.<a href="https://undraw.co/illustrations" rel="noopener noreferrer">UnDraw</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fdoae5j29nwx29c3jp7zp.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fdoae5j29nwx29c3jp7zp.png" alt="Alt Text"></a></p> <p>7.<a href="https://animista.net/" rel="noopener noreferrer">Animista</a></p> <p>8.<a href="http://vivify.mkcreative.cz/" rel="noopener noreferrer">Vivify - CSS Animation Library</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F2c59gc70624z868b1iuw.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F2c59gc70624z868b1iuw.png" alt="Alt Text"></a></p> <p>9.<a href="http://cssanimation.io/" rel="noopener noreferrer">CSS Animation Library for Developers and Ninjas - cssanimation.io</a></p> <p>10.<a href="https://www.minimamente.com/project/magic/" rel="noopener noreferrer">Magic Animations CSS3</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Flbp6l69t4lx6ngeq8wie.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Flbp6l69t4lx6ngeq8wie.png" alt="Alt Text"></a></p> <p>11.<a href="https://icons8.com/ouch" rel="noopener noreferrer">vector illustrations – Ouch.pics</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Flkwptjzb12i5xxvvjp9b.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Flkwptjzb12i5xxvvjp9b.png" alt="Alt Text"></a></p> <p>12.<a href="https://www.freepik.com/search?dates=any&amp;format=search&amp;page=1&amp;query=illustrations&amp;selection=1&amp;sort=popular&amp;type=vector" rel="noopener noreferrer">Illustrations Vectors, Photos and PSD files</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ff74mt3ldvzk0n8duzspv.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Ff74mt3ldvzk0n8duzspv.png" alt="Alt Text"></a></p> <p>13.<a href="https://lukaszadam.com/illustrations" rel="noopener noreferrer">MIT Vectors</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fup9zfotfil8ewcau9857.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fup9zfotfil8ewcau9857.png" alt="Alt Text"></a></p> <p>14.<a href="https://www.humaaans.com/" rel="noopener noreferrer">Humaaans: Mix-&amp;-Match illustration library</a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F28s7m6pc041qbe3xq37v.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F28s7m6pc041qbe3xq37v.png" alt="Alt Text"></a></p> <p><em>That’s it for now! Just a quick overview of some of the tools that make my work a little bit more productive. I just hope I helped you in this choice and thus, make your life more arranged and creative.</em></p> productivity angular react javascript