Summary

The website provides a curated list of 25 lesser-known tools and resources for designers and developers, ranging from UI inspiration to CSS optimization.

Abstract

The article introduces a collection of tools and resources aimed at enhancing the workflow of developers and designers. These tools cover a wide range of functionalities, including UI pattern collections, background removal services, gradient generators, color palette finders, loading animation creators, code snippet repositories, placeholder image generators, icon libraries, resume builders, news curation platforms, offline documentation browsers, open-source icon databases, code snippet websites, mockup generators, SVG background creators, browser-based photo editors, Python resource lists, visual CSS guides, design article curators, CSS grid learning resources, SVG illustration sets, image compression tools, SVG logo collections, and CSS analysis tools. The resources are presented as a means to inspire creativity, streamline development processes, and improve productivity.

Opinions

The author suggests that UI Garage is a valuable resource for finding specific design inspiration for various platforms.
Remove.bg is highlighted for its ability to automatically remove image backgrounds and its API integration capability.
UI Gradients is recommended for its collection of lovely gradients, offering an alternative to standard backgrounds.
Edabit.com is described as a fun and engaging platform for learning to code, suitable for both beginners and experienced developers.
Coolors.co is praised for its ability to quickly generate and browse a wide range of color palettes.
Loading.io is noted for simplifying the creation of loading animations, potentially saving developers time and effort.
Devsamples.com is appreciated for providing ready-to-use code snippets that can be easily integrated into projects.
Lorempicsum is favored as a placeholder image generator, offering a better alternative to generic cat photos.
Fontawesome.com is recognized for its extensive collection of icons, useful for enhancing app aesthetics.
Resume.com is seen as an efficient tool for creating professional resumes with ease.
Daily.dev is acknowledged as a premier curation platform for developers, keeping them updated with the latest news.
Devdocs.io is valued for its offline access to documentation for numerous programming languages and frameworks.
Feathericons.com is commended for its database of free, open-source icons.
Shortcode.dev is noted for its collection of concise code snippets, akin to a manual version of GitHub Co-pilot.
Mockuper.net is recommended for creating realistic mockups for various products and scenarios.
BGJar.com is highlighted for its SVG background generator, adding visual interest to apps and sites.
Photopea is recognized as a browser-based photo editor, comparable to Photoshop but free to use.
Awesome Python is praised for its curated list of Python resources, aiding developers in finding useful tools and libraries.
CSSreference.io is appreciated for its visual guide to CSS, making it easier to learn through examples.
Sidebar.io is seen as a valuable newsletter that delivers carefully selected design articles.
GridbyExample.com is recommended for learning CSS Grid Layout through visual examples and tutorials.
Heroicons.com is noted for its beautiful, SVG icons created by the Tailwind CSS team.
Compressor.io is highlighted for its ability to significantly reduce image file sizes, saving bandwidth and being eco-friendly.
Undraw.co is praised for its open-source illustrations that can be customized and used in projects.
Simpleicons.org is appreciated for its extensive collection of SVG logos from popular brands.
CSSStats.com is recognized as a tool for auditing and analyzing CSS, helping to visualize stylesheets and generate documentation for design systems.
The article was written by code.store AI, inspired by a Twitter thread by Denic Marko, emphasizing the use of advanced technology in digital projects.

25 tools & resources you will love (and probably never heard of)

Designer or developer, you will love those less-known tools

1. UI Garage: Pinterest for UI patterns

Daily handpicked UI inspiration & patterns for developers. You can find specific design inspiration for web, mobile, and tablet. Really useful to see how others solved classical UI & UX problems.

Website: https://uigarage.net/

2. Remove.bg: Remove background from photos

Remove Image Background from any photo, it’s 100% Automatical and Free. They also propose an API so you can easily integrate them into your app.

Website: https://www.remove.bg/

You Must Reward Missed Deadlines, or How Motivation Really Works.

What do you do, as a manager, when a team member misses a deadline?

medium.com

3. UI Gradients: Create beautiful gradients

White and black are not the only backgrounds you can use, did you know that? I didn’t :-). Handpicked, lovely gradients for developers and designers.

Website: https://uigradients.com/#Blooker20

3. Edabit.com: Learn to code, with dopamine

Fun and very small challenges to gradually learn to code. It’s a real dopamine pump for beginners or even experienced developers. You will love it.

Website: https://edabit.com/

Coding is outdated, learn AI prompts

Code is only a transient way of communication between humans and machines in computer history, the future of coding is…

medium.com

4. Coolors.co: Find the perfect color palette

Colors are not limited to Red, Green, or Blue. Generate or browse beautiful color palettes in seconds.

Website: https://coolors.co/

5. Loading.io: Loading animations made simple

Loaders, animated backgrounds, or texts. It’s time-consuming and makes developers cry. You don’t need it anymore with loading.io where you can generate GIF, SVG, CSS, or APNG animation in seconds.

Website: https://loading.io/

6. Devsamples.com: Code snippets

DevSamples is a list of code samples for you to copy and paste into your projects as needed. For example, you’ll find code snippets like this: Disabling Browser Autofill on Form Input Fields or Get a Unique List of Objects Based on a Property

Website: https://www.devsamples.com/

1-hour NodeJS full-stack developer interview questions.

Follow this script to detect the best NodeJS / React developers in 1 hour.

medium.com

7. Lorempicsum: Placeholder images generator

Stop using cat photos, you can do better. Lorempicsum is like Loremipsum but for photos. Ideal to use their placeholders in your dev-version of apps.

Website: https://picsum.photos/

How a single developer dropped AWS costs by 90%, then disappeared.

It’s Christmas and I just finished my last audit of a SaaS client. His story is worth telling. It’s a story about…

medium.com

8. Fontawesome.com: Icons, icons, and icons

Thousands of beautiful black and white or color icons for your app.

Website: https://fontawesome.com/

9. Resume.com: Professional resume generator

Create an efficient, elegant, and professional resume in a few clicks. The perfect tool if you want to upgrade your job.

Website: https://www.resume.com/

10. Daily.dev: Curation of dev news

One of the best curation platforms for developers. All the news about development in one place, available as a chrome extension or mobile app. Used by more than 200K developers around the world.

Website: https://daily.dev/

11. Devdocs.io: Offline documentation of 100 languages & frameworks

Blazingly fast, offline (sic!) documentation browser in one place. You can search in more than 100 documentation about CSS, APIs, Webservers, Frameworks and Languages

Website: https://devdocs.io/

12. Feathericons.com: Open-source icons

A database of open-source, free-to-use icons.

Website: https://feathericons.com/

13. Shortcode.dev: Code snippets

Hundreds of very short code snippets ready-to-copy-paste. Like Github Co-pilot but handpicked.

Website: https://shortcode.dev/

14. Mockuper.net: Mockups in real life

You can create for free beautiful mockups to integrate any screenshot into a real-life scene (desktop computers, ipads, frames, cars…). A perfect tool for any designer!

Website: https://mockuper.net/

15. BGJar.com: SVG backgrounds

Free to use SVG background generator, to avoid boring plain color backgrounds on your apps and sites.

Website: https://bgjar.com/

16. Photopea: Photoshop inside your browser

Need to quickly edit a picture? You can do it with Photopea, like Photoshop but free and inside your browser (you can also integrate them, inside your apps).

Website: https://www.photopea.com/

17. Awesome Python: Curated list of Python resources

A curated list of awesome Python frameworks, libraries, software, and resources. Inspired by awesome-php.

Website: https://awesome-python.com/

18. CSSreference.io: Visual CSS guide

Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties and explains them with illustrated and animated examples.

Website: https://cssreference.io/

19. Sidebar.io: 5 curated design articles a day

One of the best-curated design newsletters out there. 5 articles, REALLY useful. Check them immediately

Website: https://sidebar.io/

20. GridbyExample.com: CSS Grids with visual examples

This site is a collection of examples, videos, and other information to help you learn CSS Grid Layout.

Website: https://gridbyexample.com/

Can you guess this famous book from DALL-E pictures only?

Write your guess in the comments

medium.com

21. Heroicons.com: 230 beautiful, SVG icons

Nothing to add, made by Tailwind CSS dudes.

Website: https://heroicons.com/

22. Compressor.io: Reduce the size of JPEG, PNG, and WEBP files

Very simple tool to quickly compress the size of your images, you can save up to 90% of bandwidth usage of your sites & apps. And it’s good for the planet too.

Website: https://compressor.io/

23. Undraw.co: Open-source illustrations set for your MVP site

You’ve probably seen those somewhere already :). Here it is: a database of hundreds of SVG illustrations where you can change colors before downloading them! Amazing.

Website: https://undraw.co/illustrations

24. Simpleicons.org: 2300+ SVG logos of popular brands

Well if you’re showing off your clients on a site or in a presentation, this site will save you a lot of time…. if your clients are among those 2300 famous brands.

Website: https://simpleicons.org/

25. CSSStats.com: Audit and analyze any CSS

CSS Stats is a free and open source tool that’s used by many companies and projects. It’s intended to help CSS authors visualize their stylesheets and generate documentation for a design system.

Website: https://cssstats.com/

The article was written by code.store AI, using the following Twitter thread: https://twitter.com/denicmarko/status/1338354778385084416

How I created the very first newspaper entirely generated by an AI within a week.

At code.store we build a lot of interesting digital projects using the most advanced technologies for our beloved…

medium.com