Frontend Toolchain

Some useful links for daily development

Resources

• The Open Graph protocol specification
• https://cards-dev.twitter.com/validator
• https://twitter.com/nanobop/status/1255002567131557888
• https://developers.facebook.com/docs/sharing/webmasters/images/
• https://toolbox.googleapps.com/apps/har_analyzer/

FE Resources

• Front-End-Checklist
• https://html5boilerplate.com/
• https://gulpjs.com/
• https://rollupjs.org/guide/en/
• https://unsplash.com/

Performance

• pingdom
• PageSpeed Insights
• Performance Test
• webpagetest.org
• browserstack.com/speedlab

Generators

• Fawicon Generator
• Web Font Generator
• videosmaller

Tools

• w3c Developer Tools

HTML Tools

• Browser Default Styles
• Layout Patterns

SEO Tools

• Mobile-Friendly Test
• Twitter Validation Tool
• Facebook Debugger
• Google Structured Data Testing Tool
• LinkedIn Post Inspector
• open-graph-generator

Commercial

• Stripe Dummy Cards

Tests

• CSS Stats
• Is your website hosted green?
• Screen Test
• https://www.toptal.com/utilities-tools

Semantic Tests

• Rich Results Test

Security Test

• https://securityheaders.com/
• https://observatory.mozilla.org/
• SSL Test

Accessability

• a11yproject checklist
• https://www.w3.org/TR/wai-aria-1.1/
• https://wave.webaim.org/

Images Compression

• https://shrinkme.app/
• https://squoosh.app/

Animation

• https://cubic-bezier.com/
• https://easings.net/en

Typography

• https://www.typewolf.com/cheatsheet
• https://dev.w3.org/html5/html-author/charref
• https://www.toptal.com/designers/htmlarrows/

Programming Fonts

• Fira Code
• Victor Mono

Other

• Shadow Generator
• Gradient Generator

Icons

• Tabler Icons
• Bootstrap Icons
• http://www.iconbeast.com/free/
• Simple Icons
• Google Fonts Material Symbols

3D Tools

• gltf viewer

API

• Markup Validator Web Service API
• PageSpeed Insights API
• Any other public APIs
• A simple HTTP Request & Response Service

Dev. API

• https://opentdb.com/
• https://randomuser.me/
• https://api.chucknorris.io/

Docs

• List of Free Learning Resources In Many Languages
• Google Style Guides
• Awesome Lists

JS

• https://the-algorithms.com/language/javascript