Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/aozora/awesome-web

A collection of awesome things regarding the Web Design and Development-
https://github.com/aozora/awesome-web

List: awesome-web

Last synced: about 1 month ago
JSON representation

A collection of awesome things regarding the Web Design and Development-

Awesome Lists containing this project

README 

        
# awesome-web

A collection of awesome things regarding the Web Design and Development-



# JavaScript Component



* [Complete guide to Accessible Front-end Components](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/)

* [Duet Date Picker](https://github.com/duetds/date-picker): WCAG 2.1 compliant date picker

* [Vime.js - Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...](https://vimejs.com/)

* [a11y-dialog](https://github.com/HugoGiraudel/a11y-dialog)

* [Tabpanelwidget](https://tabpanelwidget.com/#le-code): vanilla, react, vue, angular versions

* [accessible-autocomplete from GOV.UK](https://github.com/alphagov/accessible-autocomplete): vanilla & react

* Video Player: [Plyr.io](https://plyr.io/)

  Accessibility test: https://scottvinkle.me/blogs/work/how-accessible-is-the-html-video-player



# Awesome lists



* [Awesome Vue](https://github.com/vuejs/awesome-vue)

* [Awesome React](https://github.com/enaqx/awesome-react)

* [Awesome React Components](https://github.com/brillout/awesome-react-components)

* [Awesome React Testing](https://github.com/infinitered/awesome-react-testing)

* [Awesome Next.js](https://github.com/unicodeveloper/awesome-nextjs)

* [Awesome Jest](https://github.com/jest-community/awesome-jest)

* [Awesome Three.js](https://github.com/fritx/awesome-threejs)



## A11y



* [Fixing Lists](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)



## CSS Grid and Flex layout



* [Content-based grid tracks and embracing flexibility](https://hiddedevries.nl/en/blog/2019-02-23-content-based-grid-tracks-and-embracing-flexibility)

* [Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs](https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/)

* [How to Make a Media Query-less responsive Card Component ](https://css-tricks.com/how-to-make-a-media-query-less-card-component/)



## JavaScript Promises



* [5 Awesome JavaScript Promise Tricks](https://davidwalsh.name/javascript-promise-tricks)



## Storybook



* [Learn Storybook](https://www.learnstorybook.com/)

* [Design System for developers](https://www.learnstorybook.com/design-systems-for-developers/react/en/introduction/)



## CSS



* 18 pop choices of css easing:

    * [gist](https://gist.github.com/argyleink/36e1c0153d2a783d513bd29c9f25aaf2)

    * [Codepen](https://codepen.io/argyleink/pen/BajvPLz)



## Next.js



* [Awesome Next.js](https://github.com/unicodeveloper/awesome-nextjs)

* [Bulletproof Next](https://getstarted.sh/bulletproof-next)

* [Next Plugins](https://github.com/vercel/next-plugins)

* [Animating Next.js page transitions with Framer Motion](https://reacttricks.com/animating-next-page-transitions-with-framer-motion/)

* [Exploring Next.js 9 Dynamic Routing & API Routes](https://reacttricks.com/exploring-next-9-dynamic-routing-and-api-routes/)

* [How to Add Interactive Animations and Page Transitions to a Next.js Web App with Framer Motion](https://www.freecodecamp.org/news/how-to-add-interactive-animations-and-page-transitions-to-a-next-js-web-app-with-framer-motion/#step-3-adding-page-transitions-with-framer-motion-to-a-next-js-app)



## React



* [Radix UI](https://www.radix-ui.com/)

* [Adobe React Aria](https://react-spectrum.adobe.com/react-aria)

* [Reach UI](https://reach.tech/)



## Three.js



* [Awesome Three.js](https://github.com/fritx/awesome-threejs)

* [Three.js DevTools](https://github.com/threejs/three-devtools)

* [](https://github.com/Fasani/three-js-resources)

* [](https://github.com/ektogamat/threejs-andy-bolierplate)

* [The Big List of three.js Tips and Tricks!](https://discoverthreejs.com/tips-and-tricks/)



## Svelte



* [Svelte.dev](https://svelte.dev)

* [SvelteKit](https://kit.svelte.dev/)

* [Awesome Svelte](https://github.com/TheComputerM/awesome-svelte)

* [Awesome Svelte](https://github.com/rocketlaunchr/awesome-svelte)

* [Svelte Society](https://sveltesociety.dev/)

* [Svelte DatoCMS](https://github.com/lukaszwisniewski88/svelte-datocms)

* [Svelte for the Experienced React Dev](https://css-tricks.com/svelte-for-the-experienced-react-dev/)

* [Svelte vs Next.js](https://gist.github.com/nberlette/c7ee7e1773fb55cf4ff1b713e748969e)

* [](https://github.com/stephane-vanraes/renderless-svelte)

* [](https://www.houdinigraphql.com)

* [SvelteKit Auth](https://github.com/Dan6erbond/sk-auth)

* [Svelte Auto Import](https://github.com/yuanchuan/sveltekit-autoimport)



* [Rich Harris - The Road to SvelteKit 1.0 (Svelte Society NYC)](https://www.youtube.com/watch?v=s6a1pbTVcUs)



### Images

* [Svelte Image](https://github.com/matyunya/svelte-image)



### Svelte Forms



* [Felte](https://felte.dev/)

* [Svelte Calendar](https://6edesign.github.io/svelte-calendar/)



### Fetch/Query

* [Svelte Query](https://sveltequery.vercel.app/)



### Svelte + Three.js



* [Threlte](https://threlte.xyz/)

* [3D with Svelte and Three.js](https://javascript.plainenglish.io/3d-with-svelte-and-three-js-f4366f342f9f)



### UI Components



* [Headless UI](https://svelte-headlessui.goss.io/)



## Testing



### Chaos Testing



* [Pseudo localization](https://github.com/tryggvigy/pseudo-localization)



## Inspirations



* [Responsive JP](https://responsive-jp.com)



## Icons



* [Mono Icons: A simple, consistent open-source icon set designed to be used in a wide variety of digital products.](https://icons.mono.company/)



## Animations



### SVG Animations



* GSAP

* [SVG.js](https://svgjs.com/docs/3.0/)

* [Lottie](https://airbnb.design/lottie/)

* [Svgator](svgator.com)



## Dev Tools / Utils



[FontKit](https://github.com/foliojs/fontkit)



## Online Generators/Tools



* [React Skeleton - Create Content Loader](https://skeletonreact.com/)

* [Gradient Collection: Lens Flare - Gradient Magic](https://www.gradientmagic.com/collection/lensflare)

* [primitive.js – drawing images with geometric primitives](https://ondras.github.io/primitive.js/)

* [Blush: Illustrations for everyone](https://blush.design/)

* [Beautiful CSS box-shadow examples - CSS Scan](https://getcssscan.com/css-box-shadow-examples)

* [BGJar | Free svg background image generator for your websites](https://bgjar.com/)

* [Blobmaker - Make organic SVG shapes for your next design](https://www.blobmaker.app/)

* [Clippy — CSS clip-path maker](https://bennettfeely.com/clippy/)

* [Shape Shifter](https://shapeshifter.design/)

* [SVG-edit](https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html)

* [Responsive Breakpoints](https://www.responsivebreakpoints.com/)

* [Remove Background](https://www.remove.bg/)

* [Squoosh](https://squoosh.app/editor)

* [SVGOMG](https://jakearchibald.github.io/svgomg/)

* [URL-enc SVG](https://yoksel.github.io/url-encoder/)

* [Google Fonts Helper](https://google-webfonts-helper.herokuapp.com/fonts)

* [Grid Gen](https://cssgrid-generator.netlify.com/)

* [Compound grid gen](https://codepen.io/michellebarker/full/zYOMYWv)

* [Typography Editor](https://codyhouse.co/ds/globals/typography)

* [Make a smooth shadow, friend](https://brumm.af/shadows)

* [Omatsuri](https://omatsuri.app/)



## Three.js



* [Awesome Three.js](https://github.com/fritx/awesome-threejs)

* [Three.js DevTools](https://github.com/threejs/three-devtools)



[](https://market.pmnd.rs/)

[](https://github.com/pmndrs/racing-game)

[](https://www.blender-models.com/)

[](https://docs.pmnd.rs/a11y/introduction)

[](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)

[](https://slimery.art/)

[](https://rogueengine.io/)

[](https://github.com/pmndrs/drei)

[](https://sketchfab.com/store)

[](https://github.com/pmndrs/gltfjsx)

[](https://www.kenney.nl/assets/particle-pack)

[](https://github.com/nidorx/matcaps)

[](https://quaternius.com/)

[](https://polyhaven.com/)

[](https://matheowis.github.io/HDRI-to-CubeMap/)

[](https://3dtextures.me/)

[](https://www.poliigon.com/)

[](https://threejs.org/editor/)

[](https://github.com/KhronosGroup/glTF-Sample-Models)

[](https://google.github.io/draco/)

[](https://readyplayer.me/)

[](https://opengameart.org/content/skiingpenguins-skybox-pack)

[](https://www.mixamo.com/#/)

[](https://www.soundboard.com/sb/starwarsfx)

[](https://discoverthreejs.com/tips-and-tricks/)

[](https://github.com/yomotsu/camera-controls)

[](https://www.kenney.nl/)

[](https://discoverthreejs.com/)

[](https://github.com/protectwise/troika/tree/master/packages/troika-three-text)

[](https://www.turbosquid.com/)

[](https://nilooy.github.io/character-animation-combiner/)

[](https://codesandbox.io/s/clouds-mbfzf?file=/src/App.js)

[](https://gltf.report/)

[](https://lab.julienverneaut.com/matcap-editor/)

[](https://marketplace.rogueengine.io/)



[Template for the brush style rendering with three.js](https://github.com/Sekuta82/oil-on-threejs-template)