{"id":29080,"url":"https://github.com/syaning/awesome-frontend","name":"awesome-frontend","description":"Awesome frontend, also my collections.","projects_count":182,"last_synced_at":"2026-09-05T18:00:22.049Z","repository":{"id":36358764,"uuid":"40663550","full_name":"syaning/awesome-frontend","owner":"syaning","description":"Awesome frontend, also my collections.","archived":false,"fork":false,"pushed_at":"2025-04-15T01:57:26.000Z","size":118,"stargazers_count":705,"open_issues_count":5,"forks_count":80,"subscribers_count":23,"default_branch":"master","last_synced_at":"2026-08-17T00:09:50.116Z","etag":null,"topics":["frontend"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/syaning.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2015-08-13T14:35:38.000Z","updated_at":"2026-08-03T07:46:20.000Z","dependencies_parsed_at":"2025-11-12T23:00:40.702Z","dependency_job_id":null,"html_url":"https://github.com/syaning/awesome-frontend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/syaning/awesome-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syaning%2Fawesome-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syaning%2Fawesome-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syaning%2Fawesome-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syaning%2Fawesome-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syaning","download_url":"https://codeload.github.com/syaning/awesome-frontend/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syaning%2Fawesome-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":341189360,"owners_count":37034043,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-22T15:14:58.755Z","status":"online","status_checked_at":"2026-09-05T02:00:06.064Z","response_time":108,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-01-13T12:57:52.433Z","updated_at":"2026-09-05T18:00:22.049Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["JavaScript","Tools","Articles","CSS","Icons","JavaScript Libs","Design","Roadmap","Compatibility"],"sub_categories":["ECMAScript 6","React","Package Management","Promise","Misc","CSS Frameworks","jQuery","Icon Sites","Data Visualization","Icon Fonts","Code Style","SVG Icons","Angular","CSS Misc","Processors","CSS Animation","ECMAScript 5","Vue","Editor","Polymer","Animation","Clipboard","File","Module","Build","Presentation","Template","Graphic","Multimedia","Code Quality","Carousel","Aurelia"],"readme":"# Awesome Frontend\n\n## Table of Contents\n\n- [Tools](#tools)\n\t- [Package Management](#package-management)\n\t- [Build](#build)\n\t- [Module](#module)\n- [Compatibility](#compatibility)\n- [CSS](#css)\n\t- [CSS Frameworks](#css-frameworks)\n\t- [Processors](#processors)\n\t- [CSS Animation](#css-animation)\n\t- [CSS Misc](#css-misc)\n- [Icons](#icons)\n\t- [Icon Fonts](#icon-fonts)\n\t- [SVG Icons](#svg-icons)\n\t- [Icon Sites](#icon-sites)\n- [JavaScript](#javascript)\n\t- [ECMAScript 5](#ecmascript-5)\n\t- [ECMAScript 6](#ecmascript-6)\n\t- [Promise](#promise)\n\t- [Code Quality](#code-quality)\n\t- [Code Style](#code-style)\n\t- [jQuery](#jquery)\n\t- [Angular](#angular)\n\t- [React](#react)\n\t- [Vue](#vue)\n\t- [Ember](#ember)\n\t- [Polymer](#polymer)\n\t- [Aurelia](#aurelia)\n- [JavaScript Libs](#javascript-libs)\n\t- [Data Visualization](#data-visualization)\n\t- [Graphic](#graphic)\n\t- [Animation](#animation)\n\t- [File](#file)\n\t- [Clipboard](#clipboard)\n\t- [Editor](#editor)\n\t- [Presentation](#presentation)\n\t- [Template](#template)\n\t- [Multimedia](#multimedia)\n\t- [Misc](#misc)\n- [Articles](#articles)\n- [Design](#design)\n- [Roadmap](#roadmap)\n\n## Tools\n\n### Package Management\n\n- [npm](https://www.npmjs.com/) - A package manager for javascript.\n- [yarn](https://yarnpkg.com/) - Fast, reliable, and secure dependency management.\n- [bower](http://bower.io/) - A package manager for the web.\n\n### Build\n\n- [webpack](https://github.com/webpack/webpack) - A bundler for javascript and friends.\n- [gulp](https://github.com/gulpjs/gulp) - The streaming build system.\n- [grunt](https://github.com/gruntjs/grunt) - The JavaScript Task Runner.\n\n### Module\n\n- [rollup](https://github.com/rollup/rollup) - Next-generation ES6 module bundler.\n- [browserify](https://github.com/substack/node-browserify) - Browser-side require() the node.js way.\n- [RequireJS](http://requirejs.org/) - A file and module loader for JavaScript.\n\n## Compatibility\n\n- [Modernizr](https://github.com/Modernizr/Modernizr) - Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.\n- [Can I Use](http://caniuse.com/) - \"Can I use\" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.\n\n## CSS\n\n### CSS Frameworks\n\n- [AgnosticUI](https://www.agnosticui.com/) - Accessible React component primitives that also work with Vue 3, Svelte, and Angular\n- [Bootstrap](http://getbootstrap.com/) - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.\n- [bootswatch](https://github.com/thomaspark/bootswatch/) - Bootswatch is a collection of free themes for Bootstrap.\n- [Materialize](http://materializecss.com/) - A modern responsive front-end framework based on Material Design.\n- [SemanticUI](http://semantic-ui.com/) - Semantic is a UI component framework based around useful principles from natural language.\n- [AmazeUI](http://amazeui.org/) - A mobile-first and modular front-end framework.\n- [Skeleton](https://github.com/dhg/Skeleton/) - Skeleton is a simple, responsive boilerplate to kickstart any responsive project.\n- [bootstrap-material-design](https://github.com/FezVrasta/bootstrap-material-design) - Material design theme for Bootstrap 3.\n- [MUI](https://github.com/muicss/mui) - MUI is a lightweight CSS framework that follows Google's Material Design guidelines.\n- [Bulma](https://github.com/jgthms/bulma) - Bulma is a modern CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).\n\n### Processors\n\n- [Less](http://lesscss.org/) - The dynamic stylesheet language.\n- [Sass](http://sass-lang.com/) - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.\n- [Stylus](http://learnboost.github.com/stylus/) - Expressive, robust, feature-rich CSS language built for nodejs.\n- [Postcss](https://github.com/postcss/postcss) - PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.\n\n### CSS Animation\n\n- [css-spinners](https://github.com/jlong/css-spinners) - Simple CSS spinners and throbbers made with CSS and minimal HTML markup.\n- [loaders.css](https://github.com/ConnorAtherton/loaders.css) - Delightful, performance-focused pure css loading animations.\n- [Animate.css](http://daneden.github.io/animate.css) - A cross-browser library of CSS animations.\n- [Hover](https://github.com/IanLunn/Hover) - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.\n- [Animation Menus](http://freefrontend.com/css-menu/) - Collection of HTML and CSS menu with little JavaScript: accordion, circular, dropdown, fullscreen, horizontal, mobile, off-canvas, side, toggle and sliding.\n\n### CSS Misc\n\n- [Front-end Frameworks](http://usablica.github.io/front-end-frameworks/compare.html) - A collection of best front-end frameworks for faster and easier web development.\n- [markdown-css-themes](https://github.com/jasonm23/markdown-css-themes) - A collection of css themes for Markdown.\n- [filter.css](https://github.com/simurai/filter.css) - A collection of CSS filter combos.\n- [colors](https://github.com/mrmrs/colors) - Smarter defaults for colors on the web.\n\n## Icons\n\n### Icon Fonts\n\n- [Font-Awesome](https://github.com/FortAwesome/Font-Awesome) - Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.\n- [Material design icons](https://github.com/google/material-design-icons) - Material Design icons by Google.\n- [Ionicons](https://github.com/driftyco/ionicons) - The premium icon font for Ionic.\n- [Octicons](https://github.com/github/octicons) - GitHub's icon font.\n- [Weather Icons](https://github.com/erikflowers/weather-icons) - 222 Weather Themed Icons and CSS.\n- [Entypo](http://www.entypo.com/) - 411 carefully crafted premium pictograms by Daniel Bruce — CC BY-SA 4.0.\n- [Typicons](http://www.typicons.com/) - 336 pixel perfect, all-purpose vector icons.\n- [Iconic](https://useiconic.com/) - The definitive icon set designed for the modern web.\n- [Fontello](http://fontello.com/) - This tool lets you combine icon webfonts for your own project.\n\n### SVG Icons\n\n- [Evil Icons](https://github.com/outpunk/evil-icons) - Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN.\n- [Feather](https://feathericons.com/) - Simply beautiful open source icons.\n- [eva-icons](https://github.com/akveo/eva-icons/) - A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.\n\n### Icon Sites\n\n- [Iconfinder](https://www.iconfinder.com/) - 600,000+ free and premium icons.\n- [Noun Project](https://thenounproject.com/) - Icons for everything.\n- [Material Icons](https://www.google.com/design/icons/) - Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects.\n- [ConvertICO](http://convertico.com/) - ConvertICO is a free online ICO/PNG file converter.\n- [ICO converter](https://www.icoconverter.com/) - ICO converter is a simple online .ico image converter. It will take any image and convert it to ICO file, for web site favicon or Windows applications.\n- [Nerd Fonts](https://nerdfonts.com/) - Iconic font aggregator, collection, and patcher.\n\n## JavaScript\n\n### ECMAScript 5\n\n- [ECMA 5.1 Specification](http://www.ecma-international.org/ecma-262/5.1/)\n- [ECMAScript 5 compatibility table](http://kangax.github.io/compat-table/es5/)\n\n### ECMAScript 6\n\n- [ECMA 6 Specification](http://www.ecma-international.org/ecma-262/6.0/index.html)\n- [ES6 Features](https://github.com/lukehoban/es6features) - Overview of ECMAScript 6 features.\n- [ECMAScript 6 Tutorial](http://es6.ruanyifeng.com/) - An open-source ES6 tutorial.\n- [ECMAScript 6 compatibility table](http://kangax.github.io/compat-table/es6/)\n- [Babel](https://babeljs.io/) - Babel is a compiler for writing next generation JavaScript.\n- [Traceur](https://github.com/google/traceur-compiler) - Traceur is a JavaScript.next-to-JavaScript-of-today compiler.\n- [ES6 Tools](https://github.com/addyosmani/es6-tools) - An aggregation of tooling for using ES6 today.\n- [Understanding ECMAScript 6](https://github.com/nzakas/understandinges6) - Content for the ebook \"Understanding ECMAScript 6\".\n- [ES6 Overview in 350 Bullet Points](https://github.com/bevacqua/es6)\n- [ES6-for-humans](https://github.com/metagrover/ES6-for-humans) - A kickstarter guide to writing ES6.\n\n### Promise\n\n- [Promises](https://www.promisejs.org/)\n- [Promise/A+](https://promisesaplus.com/)\n- [ES6 Promise - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)\n- [JavaScript Promise Book](http://liubin.github.io/promises-book/)\n- [How do Promises Work?](http://robotlolita.me/2015/11/15/how-do-promises-work.html)\n\n### Code Quality\n\n- [eslint](https://github.com/eslint/eslint) - The pluggable linting utility for JavaScript and JSX.\n- [jshint](https://github.com/jshint/jshint) - JSHint is a tool that helps to detect errors and potential problems in your JavaScript code.\n- [jslint](https://github.com/reid/node-jslint) - The JavaScript code quality tool.\n\n### Code Style\n\n- [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) ([ES5](https://google.github.io/styleguide/javascriptguide.xml))\n- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)\n- [idiomatic.js](https://github.com/rwaldron/idiomatic.js) - Principles of Writing Consistent, Idiomatic JavaScript.\n\n### jQuery\n\n- [jQuery](http://jquery.com/), [github](https://github.com/jquery/jquery)\n- [jQuery UI](https://jqueryui.com/) - jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of jQuery.\n\n### Angular\n\n- [AngularJS](https://angularjs.org/), [github](https://github.com/angular/angular.js)\n- [AngularJS 2](https://angular.io/), [github](https://github.com/angular/angular)\n- [UI Bootstrap](https://github.com/angular-ui/bootstrap/) - Native AngularJS (Angular) directives for Bootstrap.\n- [Angular Style Guide](https://github.com/johnpapa/angular-styleguide) - A starting point for Angular development teams to provide consistency through good practices.\n- [ui-router](https://github.com/angular-ui/ui-router) - The de-facto solution to flexible routing with nested views in AngularJS.\n- [Dynamically Loading Controllers and Views with AngularJS/$controllerProvider and RequireJS](http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs)\n- [Mobile Angular UI](https://github.com/mcasimir/mobile-angular-ui) - Angular \u0026 Bootstrap 3 for Mobile web and applications.\n\n### React\n\n- [React](https://facebook.github.io/react/), [github](https://github.com/facebook/react)\n- [Awesome React](https://github.com/enaqx/awesome-react) - A collection of awesome things regarding React ecosystem.\n- [Elemental UI](https://github.com/elementalui/elemental) - A flexible and beautiful UI framework for React.js.\n- [React-Bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap 3 components built with React.\n- [React Color](https://github.com/casesandberg/react-color) - Color Pickers from Sketch, Photoshop, Chrome \u0026 more.\n- [material-ui](https://github.com/callemall/material-ui) - React Components that Implement Google's Material Design.\n- [react-router](https://github.com/rackt/react-router) - A complete routing solution for React.js.\n- [React in patterns](https://github.com/krasimir/react-in-patterns) - List of design patterns/techniques used while developing with React.\n\n### Vue\n\n- [vue](http://vuejs.org/) - Intuitive, fast \u0026 component-oriented view library for building modern web interfaces.\n- [element](http://element.eleme.io) - A Vue.js 2.0 UI Toolkit for Web.\n- [iview](https://github.com/iview/iview) - A high quality UI Toolkit built on Vue.js.\n- [Mint UI](https://mint-ui.github.io) - Mobile UI elements for Vue.js.\n- [Muse-UI](http://www.muse-ui.org)\n\n### Ember\n\n- [Ember.js](http://www.emberjs.com/) - A JavaScript framework for creating ambitious web applications.\n\n### Polymer\n\n- [polymer](https://github.com/Polymer/polymer) - Build modern apps using web components.\n\n### Aurelia\n\n- [aurelia](https://github.com/aurelia/framework) - The aurelia framework brings together all the required core aurelia libraries into a ready-to-go application-building platform.\n\n## JavaScript Libs\n\n### Data Visualization\n\n- [D3.js](http://d3js.org/) - A JavaScript library for manipulating documents based on data.\n- [HighCharts](http://www.highcharts.com/) - (SVG) Create interactive charts easily for your web projects.\n- [ECharts](http://echarts.baidu.com/) - (Canvas) A powerful charts library from Baidu.\n- [Raphaël](http://raphaeljs.com/) - (SVG/VML) Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.\n- [Springy](http://getspringy.com/) - (Canvas) Springy is a force directed graph layout algorithm.\n- [Sigma](http://sigmajs.org/) - (Canvas)Sigma is a JavaScript library dedicated to graph drawing.\n- [jQuery Sparklines](http://omnipotent.net/jquery.sparkline/#s-about) - (Canvas) It generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.\n- [Peity](http://benpickles.github.io/peity/) - (SVG) A simple jQuery plugin that converts an element's content into a simple chart.\n- [cola.js](http://marvl.infotech.monash.edu/webcola/) - (SVG) Constraint-Based Layout in the Browser.\n- [vis](https://github.com/almende/vis) - Dynamic, browser-based visualization library.\n- [heatmap.js](https://github.com/pa7/heatmap.js) - (Canvas) JavaScript Library for HTML5 canvas based heatmaps.\n- [Chart.js](http://www.chartjs.org/) - Simple HTML5 Charts using the `\u003ccanvas\u003e` tag.\n- [techan.js](https://github.com/andredumas/techan.js) - A visual, technical analysis and charting (Candlestick, OHLC, indicators) library built on D3.\n- [OpenLayers](http://openlayers.org/) - A high-performance, feature-packed library for all your mapping needs.\n- [Leaflet](http://leafletjs.com/) - Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.\n- [plotly.js](https://plot.ly/javascript/) - The open source JavaScript graphing library that powers Plotly.\n- [vx](https://github.com/hshoff/vx) - react + d3 = vx | visualization components.\n- [charts](https://github.com/frappe/charts) - Simple, responsive, modern SVG Charts with zero dependencies.\n- [g2](https://github.com/antvis/g2) - The Grammar of Graphics in JavaScript.\n- [BizCharts](https://github.com/alibaba/BizCharts/) - Powerful data visualization library based on G2 and React.\n\n### Graphic\n\n- [p5.js](https://github.com/processing/p5.js) - p5.js is a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.\n- [paper.js](https://github.com/paperjs/paper.js) - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.\n\n### Animation\n\n- [GreenSock](http://greensock.com/) - Ultra high-performance, professional-grade animation for the modern web.\n- [popmotion](https://github.com/Popmotion/popmotion) - A 12kb Javascript motion engine. Use for animation, physics and input tracking.\n- [ramjet](https://github.com/Rich-Harris/ramjet) - Morph DOM elements from one state to another with smooth transitions.\n- [jquery.transit](https://github.com/rstacruz/jquery.transit) - Super-smooth CSS3 transformations and transitions for jQuery.\n- [iconate](https://github.com/bitshadow/iconate) - Transform your icons with trendy animations.\n- [vivus](https://github.com/maxwellito/vivus) - JavaScript library to make drawing animation on SVG.\n- [mojs](https://github.com/legomushroom/mojs) - motion graphics library for the web.\n- [ScrollReveal](https://github.com/jlmakes/scrollreveal.js) - Easy scroll animations for web and mobile browsers.\n- [anime](https://github.com/juliangarnier/anime) - Anime is a flexible yet lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.\n- [Framer Motion](https://github.com/framer/motion) - An open source React library to power production-ready animations with simple declarative APIs.\n\n### File\n\n- [js-xlsx](https://github.com/SheetJS/js-xlsx) - XLSX / XLSM / XLSB / XLS / SpreadsheetML (Excel Spreadsheet) / ODS parser and writer.\n- [PapaParse](https://github.com/mholt/PapaParse) - Fast and powerful CSV (delimited text) parser that gracefully handles large files and malformed input.\n- [FileSaver.js](https://github.com/eligrey/FileSaver.js) - An HTML5 saveAs() FileSaver implementation.\n- [pdf.js](https://github.com/mozilla/pdf.js) - PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.\n\n### Clipboard\n\n- [clipboard.js](https://github.com/zenorocha/clipboard.js) - Modern copy to clipboard. No Flash. Just 2kb.\n- [zeroclipboard](https://github.com/zeroclipboard/zeroclipboard) - The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.\n\n### Editor\n\n- [ace](https://github.com/ajaxorg/ace) - Ace is a standalone code editor written in JavaScript.\n- [quill](https://github.com/quilljs/quill) - A cross browser rich text editor with an API.\n- [MediumEditor](https://github.com/yabwe/medium-editor) - Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.\n- [Substance](https://github.com/substance/substance) - A JavaScript library for web-based content editing.\n- [Draft.js](https://github.com/facebook/draft-js) - Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.\n- [monaco-editor](https://github.com/Microsoft/monaco-editor) - A browser based code editor.\n- [slate](https://github.com/ianstormtaylor/slate) - A completely customizable framework for building rich text editors in the browser.\n\n### Presentation\n\n- [reveal.js](https://github.com/hakimel/reveal.js) - A framework for easily creating beautiful presentations using HTML.\n- [impress.js](https://github.com/impress/impress.js) - It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.\n- [deck.js](https://github.com/imakewebthings/deck.js) - Modern HTML Presentations.\n\n### Template\n\n- [mustache.js](https://github.com/janl/mustache.js) - mustache.js is an implementation of the mustache template system in JavaScript.\n- [rivets](https://github.com/mikeric/rivets) - Lightweight and powerful data binding + templating solution.\n- [Handlebars](https://github.com/handlebars-lang/handlebars.js) - A popular logic-less templating engine built on top of Mustache, with extended features like helpers and partials.\n\n\n### Carousel\n\n- [slick](https://github.com/kenwheeler/slick) - The last carousel you'll ever need.\n- [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) - Full featured javascript lightbox gallery. No dependencies.\n\n### Multimedia\n\n- [howler.js](https://github.com/goldfire/howler.js) - Javascript audio library for the modern web.\n- [amplitudejs](https://github.com/521dimensions/amplitudejs) - Amplitude.js is the HTML5 Audio Player for the modern era. No dependencies required.\n\n### Misc\n- [garn-validator](https://github.com/jupegarnica/garn-validator) - Create validations with ease.\n- [underscore](https://github.com/jashkenas/underscore) - Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, reduce, filter...) without extending any core JavaScript objects.\n- [lodash](https://github.com/lodash/lodash/) - A JavaScript utility library delivering consistency, modularity, performance, \u0026 extras.\n- [director](https://github.com/flatiron/director) - A routing library that works in both the browser and Node.js environments with as few differences as possible. Simplifies the development of Single Page Apps and Node.js applications. Dependency free.\n- [moment](https://github.com/moment/moment) - Parse, validate, manipulate, and display dates in JavaScript.\n- [JSVerbalExpressions](https://github.com/VerbalExpressions/JSVerbalExpressions) - VerbalExpressions is a JavaScript library that helps to construct difficult regular expressions.\n- [TheaterJS](https://github.com/Zhouzi/TheaterJS) - Typing effect mimicking human behavior.\n- [dragula](https://github.com/bevacqua/dragula) - Drag and drop so simple it hurts.\n- [layzr.js](https://github.com/callmecavs/layzr.js) - A small, fast, modern, and dependency-free library for lazy loading.\n- [smartcrop.js](https://github.com/jwagner/smartcrop.js) - Smartcrop.js implements an algorithm to find good crops for images.\n- [CORS Tester](https://cors-error.dev/cors-tester/) - A tool to test API endpoints for proper CORS configuration, helping identify missing headers and resolve cross-origin issues.\n\n\n\n## Articles\n\n- [How browsers work](http://taligarsiel.com/Projects/howbrowserswork1.htm)\n- [浏览器的渲染原理简介](http://coolshell.cn/articles/9666.html)\n- [Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html)\n- [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=en)\n- [Chrome DevTools Overview](https://developer.chrome.com/devtools)\n- [Ideas for Subtle Hover Effects](http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/)\n- [Exploring canvas drawing techniques](http://perfectionkills.com/exploring-canvas-drawing-techniques/)\n- [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)\n- [Learn CSS Layout](http://learnlayout.com/)\n- [一文读懂前端缓存](https://zhuanlan.zhihu.com/p/44789005)\n\n## Design\n\n- [Material design](http://www.google.com/design/spec/material-design/introduction.html)\n- [Collect UI](http://collectui.com/) - Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.\n- [日本の伝統色](http://nipponcolors.com/) - The traditional colors of Japan.\n- [colour code](http://colourco.de/) - Find your colour scheme.\n- [WEB色見本 原色大辞典](http://www.colordic.org/)\n\n## Roadmap\n\n- [Frontend Developer - Roadmap](https://roadmap.sh/frontend)\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/syaning%2Fawesome-frontend/projects"}