> For the complete documentation index, see [llms.txt](https://xiaohesong.gitbook.io/today-i-learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xiaohesong.gitbook.io/today-i-learn/readme.md). # 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/)