# README

> **前置说明：** 本库记录自己前端所学, 内容在对应的文件夹下，相当于个人博客，可以在[gitbook 中预览](https://xiaohesong.gitbook.io/today-i-learn/)

### 目录

* [前端](#前端)
  * [学习之道](#学习之道)
  * [工具](#前端工具)
  * [前端学习链接](#前端学习链接)
    * [w3c](#w3c)
    * [dom](#dom)
    * [css/html](#csshtml)
    * [js](#js)
    * [Images](#images)
    * [ts](#ts)
    * [flex](#flex)
    * [react](#react)
    * [blog](#blog)
  * [性能相关](#性能相关)
    * [懒加载](#懒加载)
    * [网站性能](#网站性能)
  * [浏览器相关](#浏览器)
  * [前端安全相关](#前端安全)
* [后端 ruby](#ruby)
* [推荐书籍](#推荐书籍)

***

### 前端

**学习之道**

* [如何成为伟大的前端人员](https://note.youdao.com/share/?id=6138f1140940b485a9229a6291c7b20f\&type=note#/)

**面试题库**

* [30-seconds-of-interviews](https://github.com/fejes713/30-seconds-of-interviews)

**前端工具**

* [在线制作页面生成页面代码](https://github.com/artf/grapesjs)
* [在线制作页面生成 jsx 代码](https://github.com/Pagedraw/pagedraw) / [蚂蚁 ant-design 的在线生成 jsx 代码](https://github.com/ant-design/ant-design-landing) / [react-proto](https://github.com/React-Proto/react-proto) / [figma 插件 - 生成代码](https://www.figma.com/community/plugin/747985167520967365/builder-io-ai-powered-figma-to-code-react-vue-tailwind-more)
* [根据草图生成页面代码](https://sketch2code.azurewebsites.net/)
* [在线生成 icon](https://realfavicongenerator.net/) / [在线生成 icon](https://www.favicon-generator.org/)
* [生成 animation 的谷歌插件](https://chrome.google.com/webstore/detail/animation/lhbbbidpkalopmenjffckblgbdhcffpa/related)
* [github 排名趋势](https://risingstars.js.org/2017/zh/)
* [监控网站](https://www.fundebug.com/)
* [ES 的支持情况](http://kangax.github.io/compat-table/es6/#test-let_temporal_dead_zone)
* [前端工具，你知道或者不知道的](http://frontendtools.com/)
* [执行上下文，堆栈查看](http://latentflip.com/loupe/)
* [dev docs -- 程序员的百科大全？](https://devdocs.io)
* [web skills](https://andreasbm.github.io/web-skills/?compact)
* [builder.io - Figma 生成 react 代码，](https://www.builder.io/)
* [AnimaApp - vscode 中基于 Figma 生成代码](https://www.loom.com/share/05d5a24c9ab647fb8cf38b7268289999) [插件](https://marketplace.visualstudio.com/items?itemName=AnimaApp.vscode-anima)

**前端学习链接**

**w3c**

* [W3C on GitHub](https://w3c.github.io/)

**dom**

* [规范 spec dom](https://dom.spec.whatwg.org/)

**css\&html**

* [规范 spec html](https://html.spec.whatwg.org/)
* [Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/)
* [css-Learn CSS Layout](http://book.mixu.net/css/)
* [css 指南](https://cssguidelin.es/) / [sass 指南](https://sass-guidelin.es/) / [css 属性](https://cssreference.io/)
* [代码指南 html\&css](https://codeguide.co/)
* [Concise courses for badass web developers](https://egghead.io/)
* [30-seconds-of-css](https://github.com/atomiks/30-seconds-of-css)
* [HTML Tutorials. And Stuff.](http://htmldog.com/)
* [居中的法子](https://css-tricks.com/centering-css-complete-guide/) -- 这个网站你应该去找到其他的资源

**js**

* [Series - How JavaScript works: an overview of the engine, the runtime, and the call stack](https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf)
* [js 宏任务 微任务是怎么执行的 - Jake](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)
  * [Jake 的视频演讲](https://www.youtube.com/watch?v=cCOL7MC4Pl0\&t=22s)
* [variables-lifecycle-and-why-let-is-not-hoisted](https://dmitripavlutin.com/variables-lifecycle-and-why-let-is-not-hoisted/) -- 此人博客值得一读
* [`javascript`设计模式](http://wiki.jikexueyuan.com/project/javascript-design-patterns/constructor-mode.html)
* [`ECMAscript`规范](https://www.ecma-international.org/ecma-262/#sec-intro)
* [Learn Plain JavaScript from Top Articles for the Past Year (v.2018)](https://medium.mybridge.co/learn-plain-javascript-from-top-tutorials-for-the-past-year-v-2018-d964bc597a45)
* [The Modern JavaScript Tutorial](https://javascript.info/)
* [4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them](https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/)
* [v8 dev](https://v8.dev/)
* [front-end masters](https://frontendmasters.com/)

**images**

* [Image optimization, An eBook by Addy Osmani](https://images.guide/)

**ts**

* [free typescript course](https://scrimba.com/g/gintrototypescript), 对应的，你应该在[这个网站](https://scrimba.com/)找到一些其他的学习资源

**flex**

* [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-2)
* [DIVE INTO FLEXBOX](https://bocoup.com/blog/dive-into-flexbox)

**react**

* [个人学习 react 记录](https://github.com/xiaohesong/ums/wiki)
* [30 天学习 react](https://www.fullstackreact.com/30-days-of-react/)
* [https://pomb.us/build-your-own-react/](https://github.com/xiaohesong/TIL/blob/master/构建你自己的React/README.md)

**blog**

* [Nicholas C. Zakas](https://humanwhocodes.com/)
* [Jake google developer](https://jakearchibald.com/)
* [David Shariff blog](http://davidshariff.com/blog/)
* [Benedikt Meurer blog](https://benediktmeurer.de/)
* [tylermcginnis blog](https://tylermcginnis.com/blog)
* [javascript is sexy](http://javascriptissexy.com/)
* [Dr. Axel Rauschmayer](http://2ality.com/)
* [Mrale's blog](https://mrale.ph/)
* [Dmitry Soshnikov - how to read ecma](http://dmitrysoshnikov.com/)
* [scotch](https://scotch.io/tutorials) -- 这个网站还有其他不错的资源
* [self-growth](https://www.robinwieruch.de/)
* [Krasimir -- krasimirtsonev](https://krasimirtsonev.com/blog/category/JavaScript)
* [chromium blog](https://blog.chromium.org)
* [google surma](https://dassur.ma)
* [telerik blogs](https://www.telerik.com/blogs/journey-of-javascript-downloading-scripts-to-execution-part-ii) -- 这个域名下的文章看看也很不错
* [Mark's Dev Blog](https://blog.isquaredsoftware.com/)
* [前端这些有趣的库](https://weekly.shanyue.tech/package/)

**性能相关**

**懒加载**

* [Lazy Loading Images and Video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/) - 从这里你应该找到更多地性能优化

**网站性能**

* [Google PageSpeed Insights](https://developers.google.com/speed/docs/insights/rules?csw=1)
* [YaHoo Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html?guccounter=1)
* [Steve Souders - 14 Rules for Faster-Loading Web Sites](http://stevesouders.com/hpws/rules.php)
* [性能检查列表](https://www.smashingmagazine.com/2018/01/front-end-performance-checklist-2018-pdf-pages/) -- 这网站下的内容也很丰富哦

**浏览器**

* [浏览器原理](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/)

**前端安全**

* [前端安全系列 - 谷歌](https://developers.google.com/web/fundamentals/security/)

**前端新手学习库**

* [The Ultimate Guide to Learning Full Stack Web Development in 6 months, for $30](https://codeburst.io/the-ultimate-guide-to-learning-full-stack-web-development-in-6-months-for-30-72b3854a7458)

***

### 后端

**ruby**

* [rails service 模式](https://medium.com/selleo/essential-rubyonrails-patterns-part-1-service-objects-1af9f9573ca1)
* [rails queries 模式](https://medium.com/@blazejkosmowski/essential-rubyonrails-patterns-part-2-query-objects-4b253f4f4539)

### 推荐书籍

* [understanding es6](https://leanpub.com/understandinges6/)
* [javascript 高级程序设计 3](http://www.wrox.com/WileyCDA/WroxTitle/Professional-JavaScript-for-Web-Developers-3rd-Edition.productCd-1118026691.html)
* [exploring es6](http://exploringjs.com/es6/index.html) / 本站下[其他书籍](https://exploringjs.com/)
* [you don't known js](https://github.com/getify/You-Dont-Know-JS)
* [Eloquent JavaScript - 3rd edition](https://eloquentjavascript.net/index.html)
* [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)
* [High Performance Browser Networking](https://hpbn.co/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xiaohesong.gitbook.io/today-i-learn/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.