Skip to content

Latest commit

 

History

History
144 lines (72 loc) · 4.41 KB

online-tools.md

File metadata and controls

144 lines (72 loc) · 4.41 KB

https://waterfaller.dev - tasks that boost page speed and core web vitals

https://caniuse.com - Can I use... Support tables for HTML5, CSS3, etc

https://www.diffchecker.com - diff tool to compare text differences between two text files

https://www.10bestdesign.com/dirtymarkup - HTML / CSS / JS code beautifier

https://developers.google.com/speed/pagespeed/insights - analyzes the content of the website and tells you how to speed it up

https://google-webfonts-helper.herokuapp.com/fonts - way to Self-Host Google Fonts

https://www.responsivebreakpoints.com - easily generate the optimal responsive image dimensions

https://defaced.dev/tools/layout-shift-gif-generator/ - (CLS) Layout Shift GIF Generator for desktop and mobile

https://modulecreator.silksoftware.com/magento-module-creator/ - Magento 1 Module Creator

https://mage2gen.com - Magento 2 Module Creator

https://hexcol.com - HEX color codes

https://cantunsee.space - measure attention to detail; Game: select the design that is most correct

https://codyhouse.co - Web Design Made Easier

http://howtocenterincss.com- how to CENTER in CSS

https://goodui.org - Good UI: improve Your UI With Winning & Losing A/B Tests

https://learnui.design/tools/accessible-color-generator.html - Accessible Color Generator (for contrast ratio)

https://uigradients.com - gradients

https://fontello.com - icons font generator

https://icomoon.io - build and use your own icon packs in many different formats including SVG, Polymer, PDF, XAML, CSH, icon font with ligatures, or good old PNG/CSS sprites

http://fontfamily.io - compatibility tables for default local fonts

https://www.cssfontstack.com/ - collection of web safe CSS font stacks

https://v-fonts.com - resource for finding and trying variable fonts

https://www.fontsquirrel.com/tools/webfont-generator - Webfont Generator (woff/woff2)

https://transfonter.org/ - modern and simple css @font-face generator

https://meowni.ca/font-style-matcher/ - Font style matcher

https://www.industrialempathy.com/perfect-ish-font-fallback/ - Automatic font fallback matching

https://jakearchibald.github.io/svgomg/ - SVG optimizer

https://tinypng.com - .png / .jpg images compression

https://ezgif.com/optimize - .gif optimizer

https://lokeshdhakar.com/projects/color-thief/#drag-drop - dominant color from image

https://www.giftofspeed.com/gzip-test/ - gzip / brotli optimization test

https://freecodetools.org/ogp/ - OG tags generator

https://wave.webaim.org/ - Web Accessibility Evaluation Tool online

http://www.outlinenone.com - about property: {outline:none;}

https://csstriggers.com/ - CSS triggers cost

https://bundlephobia.com/ - cost of adding a npm package to your bundle

https://estimator.dev/ - find out how much turning on modern JS could save

https://polyfill.io/v3/ - returns only the polyfills that are needed by the requesting browser

https://jsbench.me - JS performance benchamark

http://latentflip.com/loupe/ - visualisation to help you understand how JavaScript's call stack/event loop/callback queue interact with each other

https://requestmap.webperf.tools/ - Request Map Generator

https://animate.style/ - CSS animation

https://greensock.com/gsap/ - JavaScript animation for the modern web

https://lighthouse-metrics.com/ - global performance metrics

https://www.performancebudget.io/ - Performance Budget Calculator

https://treo.sh/sitespeed - Find out how fast your website is for real users

https://griddy.io - Learn the CSS Grid!

https://web.dev/learn/css/

https://www.patterns.dev

https://smalldev.tools **

https://accordionslider.com

https://www.bestcssbuttongenerator.com

https://wweb.dev/resources/css-separator-generator/

http://www.menucool.com/css-menu

https://animista.net/play/basic - css animations effects **

https://shrthnd.volume7.io - converts CSS properties into shorthand

https://webcode.tools - The ultimate tools for web development **

https://mobilepalette.colorion.co

https://epoch.vercel.app - convert the millisecond value to a datetime

https://wpo-checklist.firebaseapp.com - WEB PERFORMANCE CHECKLIST

https://free-for.dev/

https://smalldev.tools/placeholder-image-generator-online **

https://10015.io - all-in-one toolbox **

https://getcssscan.com/css-box-shadow-examples **

https://simplecss.eu

https://getfrontend.tips

Testing Tools:

https://pagespeed.web.dev

https://www.webpagetest.org/webvitals

https://speedvitals.com/

https://waterfaller.dev

https://uitest.com/analysis/ - 80+ tools links