DEV Community

loading...
Cover image for 36 Useful Website for Frontend Engineers (Always updated)

36 Useful Website for Frontend Engineers (Always updated)

kojikanao profile image Koji (he/him) Updated on ・4 min read

update

  • Add ButtonBuddy 2/4/2021
  • Add npm semver calculator npm trends WebpageTest and BUNDLEPHOBIA 2/10/2021
  • Add PageSpeed Insights 2/16/2021
  • Add Image
  • Add squoosh 2/25/2021

TS/JS

Bit.dev

Bit is a scalable and collaborative way to build and reuse components. It's everything you need from local development to cross-project integrations.
https://bit.dev/
Alt Text

Create App

config.js generator for webpack, Parcel, and Snowpack
Create App supports react, svelte, and vue.
https://createapp.dev/
Alt Text

TypeScript Playground

TypeScript Playground is useful to check the latest version's typescript's features.
https://www.typescriptlang.org/play
Alt Text

JavaScript Minifier

Actually, there are some CLI tools and functionalities to minify js, but this can be useful when you don't use any module bundlers and task runners. It's easy to use since we just need to copy and paste js code.
https://javascript-minifier.com/
Alt Text

unminify (js/css/html/xml/json)

This can be useful when you work on xxx.min.js and need to check the code for debugging.
https://unminify.com/
Alt Text

openbase

openbase is a very useful website when you are looking for npm packages for your project since we can see other developers' reviews about the packages.
https://openbase.io
Alt Text

@types search

Search engine for @types files
https://www.typescriptlang.org/dt/search?search=
Alt Text

Prettier Playground

https://prettier.io/playground/

JSLint

Probably most of you use eslint, but when you don't want to use any packages for lint, this might be good.
https://jslint.com/

JWT.IO

JSON Web Tokens are an open, industry-standard RFC 7519 method for representing claims securely between two parties.
JWT.IO allows you to decode, verify and generate JWT.
https://jwt.io/

npm semver calculator

npm version calculator
https://semver.npmjs.com/

npm trends

A tool allows us to check an npm package's trend such as the number of downloads, starts, and issues.
https://www.npmtrends.com/

BUNDLEPHOBIA

Find the cost of adding an npm package to your bundle
https://bundlephobia.com/

CSS

CSS Gradient

CSS Gradient is a happy little website and free tool that lets you create a gradient background for websites.
https://cssgradient.io/
Alt Text

CSS clip-path maker

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
https://bennettfeely.com/clippy/
Alt Text

Layoutit!

Layoutit generates CSS for grid design.
https://grid.layoutit.com/
Alt Text

ButtonBuddy

https://buttonbuddy.dev/
Accessible Button Contrast Generator

HTML

Placeholder.com

Placeholder.com is a free image placeholder service for web designers, serving billions and billions of images each year.
https://placeholder.com/
Alt Text

Image

Unsplash

https://unsplash.com/

PEXELS

https://www.pexels.com/

Mazwai.com

https://mazwai.com/

COVERR

https://coverr.co/

free illustrations

https://freeillustrations.xyz/

pixabay

https://pixabay.com/

unDraw

https://undraw.co/illustrations

other

CanIUse

https://caniuse.com/
Alt Text

favicon.io

The only favicon generator you need for your next project. Quickly generate your favicon from text, image, or choose from hundreds of emojis.
https://favicon.io/
Alt Text

PATTERNIFY

http://www.patternify.com/
Alt Text

regular expressions 101

https://regex101.com/
Alt Text

tiny png

https://tinypng.com/
Alt Text

Google Fonts

https://fonts.google.com/
Alt Text

fontello

https://fontello.com/
Alt Text

Websu

Websu helps you optimize your web applications for speed by generating detailed reports.
https://websu.io/
Alt Text

WebpageTest

Measure your website performance
https://www.webpagetest.org/

PageSpeed Insights

Make your web pages fast on all devices
https://developers.google.com/speed/pagespeed/insights/

squoosh

Squoosh is an image compression web app that allows you to dive into the advanced options provided by various image compressors.
https://squoosh.app/
Alt Text

Buy Me A Coffee

Discussion (0)

pic
Editor guide