Dovydas Liniovas| 

Useful front-end resources

During my front-end development journey, I have found a lot of useful resources that helped me to save time in multiple projects or were fun to use/incorporate in some of the projects, so in this article, I've decided to share all of the resources that I use in either existing or new projects that I am a part of.

NextJS

nextjs site

NextJS is a framework that makes writing react applications simple and more manageable. It packs a lot of features out of the box, like Typescript support, image optimization, uses server-side rendering, routing, and more. The documentation is simple to understand, so I encourage you to go and give it a try!

Vercel

vercel site

Vercel is a platform for front-end frameworks and static sites, built to integrate with your headless content, commerce, or database. It supports many front-end frameworks that can be deployed, previewed, and then shipped.

Storybook

storybook site

Storybook is a tool that helps you develop components and pages in isolation, you can develop, test, and document your application. It also supports additional plugins like accessibility testing and more.

Haikei

haikei assets site

To start, Haikei. This tool helps you generate different styles of assets for you to use. You can create blobs, waves, blurry gradients, and more! You can adjust colors, complexity, contrast, size, and other properties.

Colormind

colormind site

Colormind helps you generate a color scheme for your next or even current project. You can adjust generated colors, lock some of them when you like the color, and more. Suggested schemes are refreshed daily so you can visit again the next day if nothing has cought your eye the day before.

Carbon

carbon tool image

Carbon is a tool that takes in your code adds a code editor wrapper and highlights the code and that result can be exported as an image or embedded in your site. You can adjust the code theme, select the programming language, editors' width, paddings, and many other things.

Undraw

undraw illustration site

Undraw is a site that contains SVG illustrations for you to use. You can adjust the main accent of the illustration and download them either as an SVG or png. You can search for a specific need or browse through the whole list of beautiful illustrations.

Boxicons

boxicons site image

Have you ever needed icons either in SVG or png? Boxicons is a site that holds 1525 icons (as of writing) for different purposes, you can use brand icons, user icons, and a lot more!

Hero icons

hero icons site image

Continuing on the topic of icons next in the list are Hero icons made by the creators of Tailwind CSS icons that can be used as jsx or SVG.
As of writing it contains 230 icons that can be freely used in your projects.

Awesome react hooks

Awesome react hooks is a github repository that holds various useful react hooks which you can incorporate into your project. It's an extensive list so take your time to look around how some of them have been implemented.

CSS triggers

CSS triggers is a site that helps you to find out which css properties trigger layout, paint, and composite layers.


These are not the only resources I use. To avoid making a long article I'll divide them into multiple articles that you can easily read through.