Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Frontend-Layers/frontend-toolchain

List of the useful resources for frontend development. Performance meteres, security, image compressors etc.
https://github.com/Frontend-Layers/frontend-toolchain

List: frontend-toolchain

awesome front-end

Last synced: 3 months ago
JSON representation

List of the useful resources for frontend development. Performance meteres, security, image compressors etc.

Awesome Lists containing this project

README

        

# Frontend Toolchain

_Some useful links for daily development_

## Resources

- [The Open Graph protocol specification](https://ogp.me/)
- 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://github.com/thedaviddias/Front-End-Checklist)
- https://html5boilerplate.com/
- https://gulpjs.com/
- https://rollupjs.org/guide/en/
- https://unsplash.com/

## Performance

- [pingdom](https://tools.pingdom.com/)
- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
- [Performance Test](https://web.dev/measure/)
- [webpagetest.org](https://www.webpagetest.org/)
- [browserstack.com/speedlab](https://www.browserstack.com/speedlab)

## Generators

- [Fawicon Generator](https://realfavicongenerator.net/)
- [Web Font Generator](https://transfonter.org/)
- [videosmaller](https://www.videosmaller.com/)

## Tools

- [w3c Developer Tools](https://w3c.github.io/developers/tools/)

### HTML Tools

- [Browser Default Styles](https://browserdefaultstyles.com/)
- [Layout Patterns](https://csslayout.io/patterns/)

### SEO Tools

- [Mobile-Friendly Test](https://search.google.com/test/mobile-friendly)
- [Twitter Validation Tool](https://dev.twitter.com/docs/cards/validation/validator)
- [Facebook Debugger](https://developers.facebook.com/tools/debug)
- [Google Structured Data Testing Tool](http://www.google.com/webmasters/tools/richsnippets)
- [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/inspect/)
- [open-graph-generator](https://webcode.tools/open-graph-generator)

## Commercial

- [Stripe Dummy Cards](https://stripe.com/docs/testing#cards)

## Tests

- [CSS Stats](https://cssstats.com/)
- [Is your website hosted green?](https://www.thegreenwebfoundation.org/)
- [Screen Test](https://screenfly.org/)
- https://www.toptal.com/utilities-tools

### Semantic Tests

- [Rich Results Test](https://search.google.com/test/rich-results)

### Security Test

- [https://securityheaders.com/](https://securityheaders.com/)
- [https://observatory.mozilla.org/](https://observatory.mozilla.org/)
- [SSL Test](https://www.ssllabs.com/ssltest)

## Accessability

- [a11yproject checklist](https://www.a11yproject.com/checklist/)
- https://www.w3.org/TR/wai-aria-1.1/
- https://wave.webaim.org/

## Images Compression

- [https://shrinkme.app/](https://shrinkme.app/)
- [https://squoosh.app/](https://squoosh.app/)

## Animation

- [https://cubic-bezier.com/](https://cubic-bezier.com/)
- [https://easings.net/en](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](https://github.com/tonsky/FiraCode)
- [Victor Mono](https://github.com/rubjo/victor-mono)

## Other

- [Shadow Generator](https://brumm.af/shadows)
- [Gradient Generator](https://cssgradient.io/)

### Icons

- [Tabler Icons](https://tablericons.com/)
- [Bootstrap Icons](https://icons.getbootstrap.com/)
- http://www.iconbeast.com/free/
- [Simple Icons](https://simpleicons.org/)
- [Google Fonts Material Symbols](https://fonts.google.com/icons?selected=Material+Symbols+Outlined:exit_to_app:FILL@0;wght@400;GRAD@0;opsz@48&icon.style=Outlined)

### 3D Tools
- [gltf viewer](https://gltf.pmnd.rs/)

## API

- [Markup Validator Web Service API](https://validator.w3.org/docs/api.html)
- [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started)
- [Any other public APIs](https://github.com/n0shake/Public-APIs)
- [A simple HTTP Request & Response Service](http://httpbin.org/)

### Dev. API

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

## Docs

- [List of Free Learning Resources In Many Languages](https://github.com/EbookFoundation/free-programming-books)
- [Google Style Guides](https://google.github.io/styleguide/)
- [Awesome Lists](https://project-awesome.org/)

### JS

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