DEV Community

Cover image for 17 Killer Web Apps You Should Use to Increase Productivity πŸš€πŸ’―
Madza
Madza

Posted on • Originally published at madza.hashnode.dev

17 Killer Web Apps You Should Use to Increase Productivity πŸš€πŸ’―

Today speed is one of the main criteria to beat the competition. I handpicked some useful productivity apps, that might come in handy in your developer workflow.

These include anything you might need from working with images, animations, and fonts, to creating content for social media. Each tool will include a direct link, a description as well as an image preview.


1. Lorem Picsum

Lorem Picsum is a placeholder generator for pictures, with lots of customization options. Provide parameters for your images directly in the URLs.

screely-1643118782773.png

2. Remove.bg

Remove the background of any photo automatically. Just select your image and instantly download the resulting image with the background removed.

screely-1643118922812.png

3. PFPmaker

PFPMaker generates professional profile pics from any photo. It uses background removal AI, beautifies your photo, and generates dozens of profile pic variations automatically.

screely-1643118993510.png

4. Compressor.io

One of the most efficient image compressors out there with a modern-looking UI.

screely-1643119023902.png

5. CSSGradient

CSS Gradient makes it dead simple to create fresh web gradients. Includes a collection of tools to help you level up your gradient game.

screely-1643119085541.png

6. Neumorphism.io

Neumorphic shapes look incredible but are difficult to create. This generator makes it easy to create the shapes you’ve envisioned.

screely-1643119152676.png

7. Animista

Animista is a great tool for creating custom CSS animations with various effects. Once you created your animation, generate the code and integrate it into your project.

screely-1643119250771.png

8. FontJoy

Fontjoy finds interesting font pairings using the embedding layer of a neural net. Click a button and a unique pairing is served upon our minimal interface.

screely-1643119277200.png

9. Logo Ipsum

When in a rush to get a placeholder logo, feel free to use Logo Ipsum with tons of available choices and different logo designs fitting every need.

screely-1643119313398.png

10. Carbon

Create and share beautiful images of your source code. Another great alternative is ray.so.

screely-1643119348878.png

11. Poet.so

Capture and share Twitter posts as beautiful images. It makes sharing Twitter posts on other platforms more visual and attention-grabbing.

screely-1643119385831.png

12. BrowserFrame

Easily wrap screenshots in browser frames. Drag-drop support. Generate screenshot from URL. Customize padding, scaling, background color. Another great alternative is Screely.

screely-1643119512841.png

13. Box-shadow

Create modern-looking shadows. Edit their horizontal and vertical offsets, blur, and spread radiuses. Once you are done, generate the code and use it in your project.

screely-1643119561806.png

14. Readme.so

The editor allows you to quickly add and customize all the sections you need for your project's README.

screely-1643119604175.png

15. Metatags.io

A tool to debug and generate meta tag code for any website. Preview how your webpage will look on Google, Facebook, Twitter, and more.

screely-1643119634527.png

16. Favicon.io

Create a favicon in a few clicks from text, image, or emoji.

screely-1643119657446.png

17. Unminify

Free tool to unminify (unpack, deobfuscate) JavaScript, CSS, HTML, XML and JSON code, making it readable and pretty.

screely-1643119675204.png


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, LinkedIn and GitHub!

Visit my Blog for more articles like this.

Discussion (86)

Collapse
sh20raj profile image
Shaswat Raj
Collapse
madza profile image
Madza Author

Thanks a lot for the recommendation! πŸ™β€

Collapse
elvissautet profile image
Elvis Sautet

You dont know how i needed some of the mentioned tools here, thank you for this blog postπŸŽŠπŸŽŠπŸ‡°πŸ‡ͺ

Collapse
madza profile image
Madza Author

Awesome to help πŸ’―πŸš€πŸ˜‰

Collapse
geowrgetudor profile image
George Tudor

I have a weakness for tools I think they're cool but I never end up using. I always bookmark them :D

Collapse
madza profile image
Madza Author

Hopefully you found these useful πŸ™β€

Collapse
rekamie profile image
juliarekamie

Tnx!

Collapse
madza profile image
Madza Author

My pleasure! πŸ™β€

Collapse
andrewbaisden profile image
Andrew Baisden

Super list!

Collapse
madza profile image
Madza Author

Thanks a lot πŸ™β€

Collapse
necmettin profile image
Necmettin Begiter

The title is very misleading. These are not productivity tools. They are one-shot tools that one will use for specific needs.

If somebody is using 17 productivity tools, they are not productive.

Collapse
madza profile image
Madza Author • Edited on

Thanks for the feedback πŸ™β€

Collapse
dandv profile image
Dan Dascalescu

Thanks for changing the title!

Collapse
iamakhileshmishra profile image
Akhilesh Kumar Mishra

This list is just fantabulous specially Animesta & Neumorphic Generator these was the tools i was searching for.
I would like to add one more useful webapp name ilovepdf.com that enables you to do lot of pdf realted stuffs easier at your fingertips just try it.

Collapse
madza profile image
Madza Author

ilovepdf was in mind while I created this list... πŸ˜‰
i love the ui of it and use it often myself πŸ˜‰ πŸ‘

Collapse
levendelwd profile image
Levende

Woow !!

Collapse
madza profile image
Madza Author

Hope you found them useful πŸ™β€

Collapse
shifi profile image
Shifa Ur Rehman

The new tool that Josh posted for shadows is SUPER FLY!
joshwcomeau.com/shadow-palette/

On the same note, his gradient tool is unrivaled as well.
joshwcomeau.com/gradient-generator/

I have nothing but respect for this dude :p

Collapse
madza profile image
Madza Author

Josh is on top of the CSS game πŸŽ¨πŸ’―
I'm reading his blog and following his creation of courses πŸ˜‰πŸ‘

Collapse
sh20raj profile image
Shaswat Raj

Nice -

  • More Webapps
  • canva.com
  • statically.io
Collapse
madza profile image
Madza Author

Thanks for suggestions πŸ™β€

Collapse
dandv profile image
Dan Dascalescu

Do you plan to add them, as well as ilovepdf?

Thread Thread
madza profile image
Madza Author

I might do another set of tools sometime in the future and include them if they fit the topic πŸ˜‰πŸ‘

Thread Thread
sh20raj profile image
Shaswat Raj

I will comment more interesting webapps ☺️
Wait...

Thread Thread
madza profile image
Madza Author

Awesome, excited πŸ™β€

Thread Thread
sh20raj profile image
Shaswat Raj

Checkout this collection :- sh20raj.github.io/SopProducts

If you find anything interesting here β£οΈπŸŽ‰

Thread Thread
madza profile image
Madza Author

Thanks a lot for sharing πŸ™β€

Collapse
wilhelmina12341 profile image
Wilhelmina1234 • Edited on

I would like to add one more website i.e. eBooks-Courses-Downloader.com where you can try eBooks like HTML To React: The Ultimate Guide, Fluent Python (2nd Edition), Jetpack Compose by Tutorials, Head First Java (3rd Edition), Head First C# (4th Edition), Ten++ Ways To Make Money As A Developer, etc.

Collapse
madza profile image
Madza Author

Thanks for the recommendation πŸ™β€

Collapse
thumbone profile image
Bernd Wechner • Edited on

A great list. The only one I take issue with is Carbon. It is 2022 and high time that outside of very specific niche applications code presented in image format disappeared from the landscape. Markdown is almost ubiquitous now and supports the triple backtick language sensitive code markdown that means the code remains textual as it should. So , if I shared Carbon as a resource, it would be with that heavy caveat but I'd probably not even list it as a very useful resource, because for that very very rare instance I do want that (like a header image here say) I can do a screen grab just fine in my Atom view of the code (my favourite editor), which already does beautiful code sensitive colouring and such.

Collapse
madza profile image
Madza Author

Thanks a lot for the feedback πŸ™β€

Collapse
kavyaj profile image
kavyaj

This is such a cool list Madza! 😍 Thanks for sharing

Collapse
madza profile image
Madza Author

Always pleasure to help! Thanks πŸ™β€

Collapse
ibnsamy96 profile image
Mahmoud Ibn Samy

Thanks, I really needed this list πŸ™
I'd like to add fontello.com that makes it easier for you to choose the best icons for your designs.

Collapse
madza profile image
Madza Author

Thanks for the input! πŸ™β€

Collapse
kanwalzul profile image
KanwalZul • Edited on

I often use Olansi.bg but it's not too much accurate I'm in search of Alternative free tools too.

Collapse
madza profile image
Madza Author

Thanks for reading πŸ™β€

Collapse
hans2103 profile image
Hans Kuijpers
Collapse
justingolden21 profile image
Justin Golden

For SVG I LOOOOOVE this guy's thing:

yqnn.github.io/svg-path-editor/

Collapse
madza profile image
Madza Author

First time I come across this, awesome tool πŸ™β€

Collapse
madza profile image
Madza Author

Thanks for the input πŸ™β€

Collapse
proggramer123 profile image
Proggramer123

Thanks mate exactly what i was looking for to build my first ever website!!

Collapse
madza profile image
Madza Author

My pleasure to help! πŸ˜‰ Also, best of luck with your project! πŸ™β€

Collapse
madza profile image
Madza Author

Always happy to help, thanks! πŸ™β€

Collapse
spandyboss profile image
SpandyBoss

Very useful websites loved it keep it up and because of this single post only you made me follow you .

Collapse
madza profile image
Madza Author

Thanks a lot, means a world! πŸ™β€

Collapse
victorfds profile image
Victor Ferreira da Silva

Great tools!

Collapse
madza profile image
Madza Author

Thanks a lot πŸ™β€

Collapse
dannx profile image
Danna Vila CΓ‘rdenas

Thank you so much, this is amazing!

Collapse
madza profile image
Madza Author

Thanks and my pleasure πŸ™πŸ’–

Collapse
brandonwallace profile image
brandon_wallace

This list is solid gold. Thanks for posting it.

Collapse
madza profile image
Madza Author

My pleasure to help πŸ™β€

Collapse
iwanttoachievesomething profile image
Techislife

Fabulous work. Thank you for the list

Collapse
madza profile image
Madza Author

Thanks and My pleasure πŸ™β€

Collapse
khulani1000 profile image
Khulani Mkhize

Thank you so much for these useful tools.

Collapse
madza profile image
Madza Author

My pleasure to help πŸ™β€

Collapse
justingolden21 profile image
Justin Golden

Typo in title #3

Collapse
madza profile image
Madza Author

Fixed, thanks πŸ‘πŸ˜‰

Collapse
tharkis profile image
Tharkis

Thanks! I will definitely find this list useful!

Collapse
madza profile image
Madza Author

Awesome to hear πŸ™β€

Collapse
njmsaikat profile image
Saikat Roy

Awesome list with very helpful resources.

Collapse
madza profile image
Madza Author

Happy to share with you πŸ™β€

Collapse
webdevwanderer profile image
webdevwanderer

Wow, these are killer lists! Thanks a lot for sharing this.

Collapse
madza profile image
Madza Author

Means a lot, thanks πŸ™β€

Collapse
johnden profile image
JohnDen

I like these,thx.

Collapse
madza profile image
Madza Author

My pleasure! πŸ™β€

Collapse
yaku profile image
Yaku

Thanks for this informative and well detailed article πŸ™‚

Collapse
madza profile image
Madza Author

Happy to help! πŸ™β€