DEV Community

Vladislav Gubarev
Vladislav Gubarev

Posted on • Edited on

Tools for web developers you need

Site Palette

This tool presents you with thousands of different color palettes for the site’s design.

URL: https://palette.site

Advantages:
Many of different colors
Good design

Disadvantages:
Stripped down functionality in the mobile version

Lighthouse

This is a very convenient extension from Google, that can measure your site rank and test it for PWA technology.

URL: https://chrome.google.com/webstore/detail/lighthouse

Advantages:
Clear results
Open-source (on Github)

Disadvantages:
No mobile support
Slow loading speed

Loading.io

If you need modern and cool animation for a preloader, you should visit Loading.io. I can’t count how many animations contain this tool.

URL: https://loading.io

Advantages:
You can customize your animation: change color, background, speed and other
You can download it in different types (GIF, SVG, PNG, CSS code)

Disadvantages:
Need to register to save the animation

Material Design Lite

MDL is a simple framework for making your site look like a native Android app. It contains layouts, buttons, modal windows, snack bars, loadings, and more other cool things.

URL: https://getmdl.io

Advantages:
Some many effects and settings make feeling of native app
Clear templates in the site

Disadvantages:
You can’t set your color manually. In the site, there are 30 colors of the site theme.

Maskable.app

It is a simple and right tool to make the PWA icon maskable. There are many customization settings. You can upload SVG also.

URL: https://maskable.app

Advantages:
Good implementation
Mamy of functions

Disadvantages:
A human can’t set HEX color as the background of the icon, only select from the list or the color picker.

Canva

I think many people know this popular service for making designs. I always use Canva to create cool logos. But there are many other types of designs.

URL: https://canva.com

Advantages:
Cool templates of designs
Comfortable edit controls

Disadvantages:
In the mobile version and the app, there are fewer functions then in regular

Shopify

With Shopify, you can choose the logo and your company name for free. If you want more functions, in Shopify there are Pro version.

URL: https://shopify.com

Advantages:
When a human is searching for a logo, he can choose some categories, that he likes.
The opportunity to customization your logo.
Names’ big library

Disadvantages:
None

PWA Builder

This is Microsoft’s tool for the check site for PWA technology. Unlike Lighthouse, PWA Builder doesn’t show you site measures for speed, best practices, and others. But there you can find components for your PWA like Service Worker or Log in with Google.

URL: https://pwabuilder.com

Advantages:
All results are simple and clear
Mobile version
Collection of components for PWA

Disadvantages:
There are not all types of service workers in the collection
Shows 95 of 100 if push notifications are not in your PWA

Resizer

With Google’s Resizer, you can check the responsivity of your site on a laptop (and PC), tablet, and phone.

URL: https://material.io/resources/resizer/

Advantages:
You can interact with your site on the devices
Fast speed

Disadvantages:
Due to the design of the page, the devices overlap each other

Netlify

Netlify is a free and fast hosting service for your projects with the support of many frameworks like Vue.js.

URL: https://netlify.com

Advantages:
It is free
Supports PHP
You can upload your site from Github Gist

Disadvantages:
I can’t find anything

Top comments (1)

Collapse
 
mikkel_lausen_8bd8d18c0f6 profile image
Mikkel lausen

I made a post about some AI tools I use as a Startup Founder and Software Engineer, maybe this could be interesting to some people as well?

4 AI Tools I use in my Day-toDay as a Startup Founder and Software Engineer