Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/chengcyber/YA-awesome

Yet Another Awesome List 🤓
https://github.com/chengcyber/YA-awesome
List: YA-awesome
Last synced: 16 days ago
JSON representation
Yet Another Awesome List 🤓
Host: GitHub
URL: https://github.com/chengcyber/YA-awesome
Owner: chengcyber
Created: 2018-07-31T15:20:59.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2019-06-17T15:43:57.000Z (over 5 years ago)
Last Synced: 2024-05-20T13:04:44.381Z (7 months ago)
Size: 10.7 KB
Stars: 8
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

ultimate-awesome - YA-awesome - Yet Another Awesome List 🤓. (Other Lists / Monkey C Lists)
README

        
# Instruction

  - :books: book

  - :surfer: online article

  - :school: online doc

  - :tv: video

  - :house: home page

  - :eyeglasses: awesome list

  - :musical_score: blog

  - :octocat: github repo

# HTML

  - [HTML Spec](https://html.spec.whatwg.org/multipage/parsing.html#overview-of-the-parsing-model) :school:

  - [HTML5 权威指南](https://book.douban.com/subject/25786074/) :books:

  - [HTML5 Canvas 核心技术](https://book.douban.com/subject/24533314/) :books:

  - [SVG: Scalable Vector Graphics](https://developer.mozilla.org/en-US/docs/Web/SVG) :school:

  - [Canvas API](https://developer.mozilla.org/kab/docs/Web/API/Canvas_API) :school:

  - [The WebGL API: 2D and 3D graphics for the web](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) :school:

  - [Awesome HTML5](https://github.com/diegocard/awesome-html5) :eyeglasses:

  - [Awesome SVG](https://github.com/willianjusten/awesome-svg) :eyeglasses:

  - [Awesome Canvas](https://github.com/raphamorim/awesome-canvas) :eyeglasses:

  - [Awesome WebGL](https://github.com/sjfricke/awesome-webgl) :eyeglasses:

# CSS

  - [MDN Web Doc - CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) :school:

  - [LESS](http://lesscss.org/) :house:

  - [SaSS](https://sass-lang.com/) :house:

  - [Principles of writing consistent, idiomatic CSS](https://github.com/necolas/idiomatic-css) :surfer:

  - [Opinionated CSS styleguide for scalable applications](https://github.com/grvcoelho/css-styleguide) :surfer:

  - [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) :surfer:

## UI Framework

  - [Bootstrap](http://getbootstrap.com/) :house:

  - [Semantic UI](https://semantic-ui.com/):house:

  - [Foundation](https://foundation.zurb.com/) :house:

  - [Builma](https://bulma.io/) :house:

## CSS Reset

  - [Nomalize.css](https://github.com/necolas/normalize.css) :house:

  - [MiniRest.css](https://jgthms.com/minireset.css/) :house:

  - [sanitize.css](https://github.com/csstools/sanitize.css) :house:

  - [unstyle](https://github.com/Martin-Pitt/css-unstyle) :house:

## Practices

  - [CodePen's CSS](https://codepen.io/chriscoyier/post/codepens-css) :surfer:

  - [Github's CSS](http://markdotto.com/2014/07/23/githubs-css/) :surfer:

  - [Medium's CSS is actually pretty f...ing good](https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06) :surfer:

  - [CSS at BBC Sport](https://medium.com/bbc-design-engineering/css-at-bbc-sport-part-1-bab546184e66) :surfer:

  - [Refining The Way We Structure Our CSS At Trello](https://blog.trello.com/refining-the-way-we-structure-our-css-at-trello) :surfer:

# JavaScript

  - [JavaScript: The Good Parts](https://book.douban.com/subject/3590768/) : :books:

  - [Secrets of the JavaScript Ninjia](https://book.douban.com/subject/3176860/) :books:

  - [Effective JavaScript](https://book.douban.com/subject/25786138/) :books:

  - [JavaScript engine fundamentals: Shapes and Inline Caches](https://mathiasbynens.be/notes/shapes-ics) :tv:

## Compilation

  - [Gentle introduction into compilers](https://medium.com/dailyjs/gentle-introduction-into-compilers-part-1-lexical-analysis-and-scanner-733246be6738) :surfer:

  - [Stanford CS143: Compilers](https://web.stanford.edu/class/archive/cs/cs143/cs143.1128/) :school:

  - [Engineering: A Compiler](https://www.amazon.com/Engineering-Compiler-Keith-Cooper/dp/012088478X) :book:

  - [Ecma-262](https://www.ecma-international.org/ecma-262/8.0/index.html#sec-ecmascript-language-lexical-grammar) :books:

## ES6

  - [ES6 in depth](https://hacks.mozilla.org/category/es6-in-depth/) :surfer:

  - [ECMAScript 6 入门](http://es6.ruanyifeng.com/) :books:

  - [Modern JavaScript Cheatsheet](https://github.com/mbeaudru/modern-js-cheatsheet) :books:

  - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) :eyeglasses:

  - [Glossary of Modern JavaScript Concepts: Part 1](https://auth0.com/blog/glossary-of-modern-javascript-concepts/) :surfer:

  - [Glossary of Modern JavaScript Concepts: Part 2](https://auth0.com/blog/glossary-of-modern-javascript-concepts-part-2/) :surfer:

  - [JavaScript has Unicode Problem](https://mathiasbynens.be/notes/javascript-unicode) :surfer:

  - [JavaScript Algorithms](https://mgechev.github.io/javascript-algorithms/) :books:

  - [Javascript 30 seconds of code](https://github.com/Chalarangelo/30-seconds-of-code) :books:

  - [What the f.ck JavaScript](https://github.com/denysdovhan/wtfjs) :books:

  - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) :books:

  - [JavaScript Patterns for 2017](https://www.youtube.com/watch?v=hO7mzO83N1Q) :tv:

### Dmitry Soshnikov

  - [JavaScript. The Core](http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/) :surfer:

  - [JS scope: static, dynamic, and runtime-augmented](https://codeburst.io/js-scope-static-dynamic-and-runtime-augmented-5abfee6223fe) :surfer:

### How JavaScript Works - Alexander Zlatkov

  - [An overview of the engine, the runtime, and the call stack](https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf) :surfer:

  - [Inside the V8 engine + 5 tips on how to write optimized code](https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e) :surfer:

  - [Memory management + how to handle 4 common memory leaks](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec) :surfer:

  - [Event loop and the rise of async programming + 5 ways to better coding with async/await](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5) :surfer:

  - [Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path](https://blog.sessionstack.com/how-javascript-works-deep-dive-into-websockets-and-http-2-with-sse-how-to-pick-the-right-path-584e6b8e3bf7) :surfer:

  - [A comparision with WebAssembly + why in certain cases it's better to use it over JavaScript](https://blog.sessionstack.com/how-javascript-works-a-comparison-with-webassembly-why-in-certain-cases-its-better-to-use-it-d80945172d79) :surfer:

  - [The building blocks of Web Workers + 5 cases when you should use them](https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a)

  - [Service Workers, the lifecycle and use cases](https://blog.sessionstack.com/how-javascript-works-service-workers-their-life-cycle-and-use-cases-52b19ad98b58) :surfer:

  - [The mechanics of Web Push Notifications](https://blog.sessionstack.com/how-javascript-works-the-mechanics-of-web-push-notifications-290176c5c55d) :surfer:

  - [Tracking changes in the DOM using MutationObserver](https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401) :surfer:

  - [The rendering engine and tips to optimize its performance](https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda) :surfer:

  - [Inside the Networking Layer + How to optimize its performance and security](https://blog.sessionstack.com/how-javascript-works-inside-the-networking-layer-how-to-optimize-its-performance-and-security-f71b7414d34c) :surfer:

  - [Under the hood of CSS and JS animations + how to optimize their performance](https://blog.sessionstack.com/how-javascript-works-under-the-hood-of-css-and-js-animations-how-to-optimize-their-performance-db0e79586216) :surfer:

  - [Storage engines + how to choose the proper storage API](https://blog.sessionstack.com/how-javascript-works-storage-engines-how-to-choose-the-proper-storage-api-da50879ef576) :surfer:

  - [The internals of Shadow DOM + how to build self-contained components](https://blog.sessionstack.com/how-javascript-works-the-internals-of-shadow-dom-how-to-build-self-contained-components-244331c4de6e) :surfer:

  - [WebRTC and the mechanics of peer to peer networking](https://blog.sessionstack.com/how-javascript-works-webrtc-and-the-mechanics-of-peer-to-peer-connectivity-87cc56c1d0ab) :surfer:

### Addy Osmani

  - [The Cost of JavaScript](https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e) :surfer:

  - [JavaScript Start-up Performance](https://medium.com/reloading/javascript-start-up-performance-69200f43b201) :surfer:

# Browser

  - [Inside look at mordern web browser (part 1/4)](https://developers.google.com/web/updates/2018/09/inside-browser-part1) :surfer:

  - [Page Lifecycle API](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#overview_of_page_lifecycle_states_and_events) :surfer:

  - [How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) :books:

  - [浏览器的渲染原理简介](https://coolshell.cn/articles/9666.html) :surfer:

  - [How to write your own Virtual DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060) :surfer:

  - [Write your Virtual DOM 2: Props & Events](https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76) :surfer:

  - [How Virtual-DOM and diffing works in React](https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e) :surfer:

  - [The inner workings of virtual DOM](https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf) :surfer:

  - [深度剖析：如何实现一个 Virtual DOM 算法](https://github.com/livoras/blog/issues/13) :surfer:

  - [Matt-Esch/Virtual-DOM](https://github.com/Matt-Esch/virtual-dom) :surfer:

  - [maquette(Virtual DOM lib)](https://github.com/AFASSoftware/maquette) :surfer:

# Network

  - [High Performance Browser Networking](https://book.douban.com/subject/21866396/) :books:

  - [Unix Network Programming](https://book.douban.com/subject/1756533/) :books:

## HTTP/2

  - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) :surfer:

  - [http2 explained](https://daniel.haxx.se/http2/) :books:

  - [Gitbook - HTTP/2 讲解](https://ye11ow.gitbooks.io/http2-explained/content/) :books:

  - [HTTP/2 for a Faster Web](https://cascadingmedia.com/insites/2015/03/http-2.html) :surfer:

  - [Nginx HTTP/2 White Paper](https://cdn-1.wp.nginx.com/wp-content/uploads/2015/09/NGINX_HTTP2_White_Paper_v4.pdf) :books:

  - [RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2)](https://tools.ietf.org/html/rfc7540) :surfer:

  - [RFC 7541 - HPACK: Header Compression for HTTP/2](https://tools.ietf.org/html/rfc7541) :surfer:

## WebSocket

  - [WebSockets](https://en.wikipedia.org/wiki/WebSocket) :surfer:

  - [HTML5 WebSocket: A Quantum Leap in Scalability for the Web](https://websocket.org/quantum.html) :surfer:

  - [StackOverflow: My Understanding of HTTP Polling, Long Polling, HTTP Streaming and Websockets](https://stackoverflow.com/questions/12555043/my-understanding-of-http-polling-long-polling-http-streaming-and-websockets) :surfer:

  - [An introduction to WebSockets](http://blog.teamtreehouse.com/an-introduction-to-websockets) :surfer:

  - [Awesome WebSockets](https://github.com/facundofarias/awesome-websockets) :eyeglasses:

  - [Introducing WebSockets: Bringing Sockets to the Web](https://www.html5rocks.com/en/tutorials/websockets/basics/) :books:

  - [Websockets 101](http://lucumr.pocoo.org/2012/9/24/websockets-101/) :surfer:

  - [Real-Time Web by Paul Banks](https://banksco.de/) :surfer:

  - [Are WebSockets the future?](https://samsaffron.com/archive/2015/12/29/websockets-caution-required) :surfer:

# Performance

  - [Web Performance in Action](https://book.douban.com/subject/26887947/) :books:

  - [Designing for Performance](http://designingforperformance.com/) :books:

  - [High Performance JavaScript](https://book.douban.com/subject/4183808/) :books:

  - [High Performance Web Sites: Essential Knowledge for Front-End Engineers](https://book.douban.com/subject/2084131/) :books:

  - [Google Web Fundamentals#Performance](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) :school:

## Practice

  - [Browser Diet](https://browserdiet.com/) :surfer:

  - [Google: PageSpeed Insights Rules](https://developers.google.com/speed/docs/insights/rules) :surfer:

  - [Yahoo: Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html) :surfer:

  - [WPO Stats - Web Performance Optimization](https://wpostats.com/) :musical_score:

  - [A Simple Performance Comparison of HTTPS, SPDY and HTTP/2](https://blog.httpwatch.com/2015/01/16/a-simple-performance-comparison-of-https-spdy-and-http2/) :surfer:

  - [Nginx: 7 Tips for Faster HTTP/2 Performance](https://www.nginx.com/blog/7-tips-for-faster-http2-performance/) :surfer:

  - [Slack: Reducing Slack's memory footprint](https://slack.engineering/reducing-slacks-memory-footprint-4480fec7e8eb) :surfer:

  - [Pinterest: Driving user growth and performance improvements](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7) :surfer:

  - [10 JavaScript Performance Boosting Tips](http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas) :surfer:

  - [Getting started with the Picture Element](https://deanhume.com/getting-started-with-the-picture-element/) :surfer:

  - [Native Responsive Images](https://dev.opera.com/articles/native-responsive-images/) :surfer:

  - [Improve Page Load Times With DNS Prefetching](https://deanhume.com/improve-page-load-times-with-dns-prefetching/) :surfer:

  - [Jank Busting for Better Rendering Performance](https://www.html5rocks.com/tutorials/speed/rendering/) :surfer:

## Tool

  - [Google: PageSpeed](https://developers.google.com/speed/pagespeed/insights/)

  - [Yahoo: YSlow](http://yslow.org/)

  - [GTmetrix](https://gtmetrix.com/)

  - [Awesome WPO](https://github.com/davidsonfellipe/awesome-wpo) :eyeglasses:

  - [Forget Google and Use These Hosted JavaScript Libraries in China](https://chineseseoshifu.com/blog/china-hosted-javascript-libraries-jquery-dojo-boostrap.html)

# UI/UX

  - [7 steps to become a UI/UX designer](https://blog.nicolesaidy.com/7-steps-to-become-a-ui-ux-designer-8beed7639a95) :surfer:

  - [Don't Make Me Think](https://book.douban.com/subject/1440223/) :books:

  - [Simple and Usable Web, Mobile, and Interaction Design](https://book.douban.com/subject/30153867/) :books:

  - [Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules](https://book.douban.com/subject/4741480/) :books:

  - [Designing Interfaces: Patterns for Effective Interaction Design](https://book.douban.com/subject/1455616/) :books:

  - [The Psychology Principles Every UI/UX Designer Needs to Know](https://uxplanet.org/the-psychology-principles-every-ui-ux-designer-needs-to-know-24116fd65778) :surfer:

  - [18 designers predict UI/UX trends for 2018](https://blog.figma.com/18-designers-predict-ui-ux-trends-for-2018-2d04d41361c6) :surfer:

  - [Adobe: The Evolution of UI/UX Designers into Product Designers](https://www.google.com/search?q=the+evolution+of+uiux+designer+inot+product+designer) :surfer:

## Atomic Design

 - [Atomic Design 原子设计| 构建科学规范的设计系统](https://www.jianshu.com/p/13e87bf4f857) :surfer:

 - [网页设计: Atomic Design 简介及工作实例](https://medium.com/uxeastmeetswest/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88-atomic-design%E7%B0%A1%E4%BB%8B%E5%8F%8A%E5%B7%A5%E4%BD%9C%E5%AF%A6%E4%BE%8B-42e666358d52) :surfer:

 - [Atomic Design by Brad Frost](http://atomicdesign.bradfrost.com/) :books:

 - [Atomic Design Blog by Brad Frost](http://bradfrost.com/blog/post/atomic-web-design/) :musical_score:

 - [Pattern Lab by Brad Frost](https://patternlab.io/) :house:

 - [Pattern Lab github](https://github.com/bradfrost/patternlab) :octocat:

 - [Atomic Design with React](https://codeburst.io/atomic-design-with-react-e7aea8152957) :surfer:

 - [Atomic Components: Managing Dynamic React Components using Atomic Design](https://medium.com/@yejodido/atomic-components-managing-dynamic-react-components-using-atomic-design-part-1-5f07451f261f) :surfer:

# Design Language and Design System

## Microsoft: Fluent Design System

  - [HOME PAGE](https://www.microsoft.com/design/fluent/) :house:

  - [What's new and coming for Windows UI: XAML and composition](https://channel9.msdn.com/Events/Build/2017/B8100) :tv:

  - [Intruducing Fluent Design](https://channel9.msdn.com/Events/Build/2017/B8066) :tv:

  - [Fluent Design: Evolving our Design System: Build 2018](https://channel9.msdn.com/Events/Build/2018/BRK2413) :tv:

  - [Microsoft Build 2018: Fluent Design System Demo](https://www.youtube.com/watch?v=dMq8CMIE1xU) :tv:

  - [Microsoft Build 2018: Fluent Design System Evolution](https://www.youtube.com/watch?v=pUuHSuCnDGE) :tv:

  - [Fluent Design System inside of Microsoft Office: Build 2018](https://www.youtube.com/watch?v=DKvkRfQD8Yg) :tv:

## Material Design

  - [HOME PAGE](https://material.io/) :house:

  - [Google I/O 2014 - Material witness: How Android material applications work](https://www.youtube.com/watch?v=97SWYiRtF0Y) :tv:

  - [Comparison of Material Design implementations](https://en.wikipedia.org/wiki/Comparison_of_Material_Design_implementations)

### Material Design Implementaions

  - [Material Design Lite](https://getmdl.io/) :house:

  - [Materialize](https://materializecss.com/) :house:

  - [Material-UI](https://material-ui.com/) :house:

  - [MUI](https://www.muicss.com/) :house:

## Other Company Design Guide

  - [Apple Design](https://developer.apple.com/design/) :house:

  - [IBM Design Language](https://www.ibm.com/design/language/) :house:

  - [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/) :house:

  - [Facebook Design - What's on our mind?](https://facebook.design/) :house:

# Animation Design

  - [CodePen](http://codepen.io/) :house:

  - [12 basic principles of animation](https://en.wikipedia.org/wiki/12_basic_principles_of_animation) :surfer:

  - [Understand the 12 principles of animation](https://www.creativebloq.com/advice/understand-the-12-principles-of-animation) :surfer:

  - [Prototypr: 6 Animation Guidelines of UX Design](https://blog.prototypr.io/6-animation-guidelines-for-ux-design-74c90eb5e47a) :surfer:

  - [Transitional Interfaces](https://medium.com/@pasql/transitional-interfaces-926eb80d64e3) :surfer:

  - [UI Animation and UX: A Not-So-Secret Friendship](https://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship) :surfer:

  - [Invisible animation](https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5) :surfer:

  - [Creating Usability with Motion: The UX in Motion Manifesto](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc) :surfer:

  - [Designing Interface Animation by Val Head](https://alistapart.com/article/designing-interface-animation) :surfer:

  - [Animation principles in motin design](https://www.freepik.com/blog/animation-principles-in-motion-design/) :surfer:

  - [Integrating Animation inot a Deisgn System](https://alistapart.com/article/integrating-animation-into-a-design-system) :surfer:

  - [Great UI/UX Animations Group 1](https://fromupnorth.com/mixed-ui-ux-animations-4d7a22f9ab7) :surfer:

  - [Great UI/UX Animations Group 2](https://fromupnorth.com/mixed-ui-ux-animations-4d7a22f9ab7) :surfer:

# Design Resource

- [Web Designer News](https://www.webdesignernews.com/)

- [Designer News](https://www.designernews.co/)

- [Reddit Web Design](https://www.reddit.com/r/web_design/)

- [Marvel Blog](https://blog.marvelapp.com/)

- [The Next Web](https://thenextweb.com/)

- [Medium - Design](https://medium.design/)

- [Smashing Magazine](https://www.smashingmagazine.com/)

- [Sitepoint](https://www.sitepoint.com/)

- [Awwwards](https://www.awwwards.com/)

- [One Page Love](https://onepagelove.com/)

- [Inspired UI](http://inspired-ui.com/)

- [Dribbble](https://dribbble.com/)

- [UI Movement](https://uimovement.com/)