├── .markdownlint.yaml ├── src ├── 2021 │ ├── 06 │ │ ├── toc.md │ │ └── 01.md │ ├── 04 │ │ ├── 24.md │ │ ├── 25.md │ │ ├── 23.md │ │ ├── 18.md │ │ ├── 14.md │ │ ├── 27.md │ │ ├── 16.md │ │ ├── 30.md │ │ ├── 26.md │ │ ├── 29.md │ │ ├── 19.md │ │ ├── 17.md │ │ ├── 28.md │ │ ├── 20.md │ │ ├── 15.md │ │ ├── 21.md │ │ ├── 22.md │ │ └── toc.md │ └── 05 │ │ ├── 18.md │ │ ├── 14.md │ │ ├── 07.md │ │ ├── 01.md │ │ ├── 08.md │ │ ├── 31.md │ │ ├── 17.md │ │ ├── 22.md │ │ ├── 11.md │ │ ├── 26.md │ │ ├── 06.md │ │ ├── 13.md │ │ └── toc.md ├── awesome │ ├── vsc.md │ ├── tools.md │ ├── toc.md │ ├── weekly.md │ ├── guide.md │ └── app.md ├── news.md ├── SUMMARY.md └── index.md ├── .gitignore ├── theme ├── favicon.ico ├── favicon.png ├── news.css └── index.hbs ├── contributors.md ├── .github └── workflows │ ├── sync.yml │ ├── deploy.yml │ └── linter.yml ├── guidelines.md ├── book.toml ├── getting-started.md ├── rss.sh ├── README.md └── LICENSE /.markdownlint.yaml: -------------------------------------------------------------------------------- 1 | MD013: false -------------------------------------------------------------------------------- /src/2021/06/toc.md: -------------------------------------------------------------------------------- 1 | # 2021.06 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | book/ 3 | draft/ 4 | src/feed.xml -------------------------------------------------------------------------------- /src/awesome/vsc.md: -------------------------------------------------------------------------------- 1 | # VS Code 2 | 3 | - [2021.04](../2021/04/toc.md#vs-code) 4 | -------------------------------------------------------------------------------- /theme/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fe-cool/news/HEAD/theme/favicon.ico -------------------------------------------------------------------------------- /theme/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fe-cool/news/HEAD/theme/favicon.png -------------------------------------------------------------------------------- /src/news.md: -------------------------------------------------------------------------------- 1 | # News 2 | 3 | * [2021.04](./2021/04/toc.md) 4 | * [2021.05](./2021/05/toc.md) 5 | -------------------------------------------------------------------------------- /src/awesome/tools.md: -------------------------------------------------------------------------------- 1 | # Tools 2 | 3 | - [2021.04](../2021/04/toc.md#tools) 4 | - [2021.05](../2021/05/toc.md#tools) 5 | -------------------------------------------------------------------------------- /src/awesome/toc.md: -------------------------------------------------------------------------------- 1 | # 精选 2 | 3 | 随着信息收集工作的进行，我(`lencx`)发现其中有很多的`工具`，`应用`，`技术指南`，`编辑器`之类的东西，就想把它们抽离出来，单独进行分类维护。故开辟了`精选`分类。 4 | -------------------------------------------------------------------------------- /theme/news.css: -------------------------------------------------------------------------------- 1 | .nav-wrapper a { 2 | background-color: transparent; 3 | } 4 | 5 | .content ul li { 6 | margin: 3px 0; 7 | } 8 | -------------------------------------------------------------------------------- /contributors.md: -------------------------------------------------------------------------------- 1 | # 贡献者 2 | 3 | * [chencheng (云谦)](https://github.com/sorrycc) 4 | * [lencx](https://github.com/lencx) 5 | * [jaredwang](https://github.com/joriewong) -------------------------------------------------------------------------------- /src/2021/04/24.md: -------------------------------------------------------------------------------- 1 | # 2021.04.24 2 | 3 | - `svelte` [SvelteKit is in public beta](https://svelte.dev/blog/sveltekit-beta) 4 | 5 | - `player` [NPlayer](https://github.com/woopen/nplayer) - 无任何第三方运行时依赖，兼容 IE11，支持 SSR。高度可定制，可二次开发。和 B 站一样 6 | 7 | - `micro-frontends` [m-app](https://github.com/ambit-tsai/m-app) - 新一代微前端解决方案，微应用容器组件，对 DOM、CSS、JS 进行硬隔离，达到真正的技术栈无关，并且运行时集成，微应用可独立开发、部署、升级。使用如 iframe 般简便，却超脱 iframe 的局限，你值得一试！ 8 | -------------------------------------------------------------------------------- /src/2021/06/01.md: -------------------------------------------------------------------------------- 1 | # 2021.06.01 2 | 3 | - `wasm` [Pyodide Spin Out and 0.17 Release](https://hacks.mozilla.org/2021/04/pyodide-spin-out-and-0-17-release/) - Mozilla 的项目，让Python 运行在浏览器 4 | 5 | - `emulator` [jslinux](https://bellard.org/jslinux/) - Run Linux or other Operating Systems in your browser! 6 | 7 | - `emulator` `wasm` [v86](https://github.com/copy/v86) - x86 virtualization in your browser, recompiling x86 to wasm on the fly。 8 | -------------------------------------------------------------------------------- /src/2021/05/18.md: -------------------------------------------------------------------------------- 1 | # 2021.05.18 2 | 3 | - `svelte` [SvelteKit](https://github.com/sveltejs/kit) - Svelte 开箱即用的工具 4 | 5 | - `react` [ant-design](https://github.com/ant-design/ant-design) - ant-design 的 star 人数回归正常 6 | 7 | - `js` [《JavaScript 二十年》](https://juejin.cn/post/6963241181358587911) - 出版啦！ 8 | 9 | - `guide` [计算机图形学与混合现实研讨会](http://games-cn.org) 10 | 11 | - `lowcode` [什么是低代码](https://www.outsystems.com/blog/posts/what-is-low-code/) 12 | -------------------------------------------------------------------------------- /.github/workflows/sync.yml: -------------------------------------------------------------------------------- 1 | name: 'GitHub Actions Mirror' 2 | 3 | on: [push, delete] 4 | 5 | jobs: 6 | mirror_to_gitee: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: 'Checkout' 10 | uses: actions/checkout@v1 11 | - name: 'Mirror to gitee' 12 | uses: pixta-dev/repository-mirroring-action@v1 13 | with: 14 | target_repo_url: 15 | git@gitee.com:fe-cool/news.git 16 | ssh_private_key: 17 | ${{ secrets.GITEE_PRIVATE_KEY }} -------------------------------------------------------------------------------- /src/2021/05/14.md: -------------------------------------------------------------------------------- 1 | # 2021.05.14 2 | 3 | - `notion` [Start building with the Notion API](https://developers.notion.com) 4 | 5 | - `browser` [利用自定义协议处理器跨浏览器跟踪在 Safari, Chrome 和 Firefox 上的应用](https://fingerprintjs.com/blog/external-protocol-flooding/) 6 | 7 | - `css` [利用 cubic-bezier (贝塞尔曲线) 增强 css 特效](https://css-tricks.com/advanced-css-animation-using-cubic-bezier/) 8 | 9 | - `ts` [TypeScript装饰器实用指南](https://blog.logrocket.com/a-practical-guide-to-typescript-decorators/) 10 | 11 | - `github` [GitHub 支持视频上传了](https://github.blog/2021-05-13-video-uploads-available-github) 12 | -------------------------------------------------------------------------------- /src/2021/05/07.md: -------------------------------------------------------------------------------- 1 | # 2021.05.07 2 | 3 | - `tools` [Preset](https://preset.dev/) - 一个命令行工具，preset，通过应用预设来快速构建或升级你的应用 4 | 5 | - `tools` `disqus` [cusdis](https://github.com/djyde/cusdis) - 一个轻量化的评论工具，cusdis，前端部分采用了 vite 6 | 7 | - `news` [sorrycc/weekly](https://github.com/sorrycc/weekly) - 前端周刊，每周一发布。 8 | 9 | - `js` [JavaScript Temporal API- A Fix for the Date API](https://blog.bitsrc.io/javascript-temporal-api-a-fix-for-the-date-api-aa8381a4234c) - 又一篇关于 JavaScript Temporal API 的文献，相关 [propsal](https://github.com/tc39/proposal-temporal) 已经到了 stage-3 10 | 11 | - `react` [React-Toastify](https://github.com/fkhadra/react-toastify) - 一个好用的React通知组件库，支持多种配置 12 | -------------------------------------------------------------------------------- /src/2021/05/01.md: -------------------------------------------------------------------------------- 1 | # 2021.05.01 2 | 3 | - `wasm` [Using asynchronous web APIs from WebAssembly](https://web.dev/asyncify) 4 | 5 | - `react` [React State Management Libraries and How to Choose](https://daveceddia.com/react-state-management/) 6 | 7 | - `fe` `other` [clsx](https://github.com/lukeed/clsx) - classnames的(228B)替代方案，自带类型声明，使用默认导入也更简洁 `import clsx form 'clsx'`， 不会再出现一大片的classNames(xxx) 8 | 9 | - `react` [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/) 10 | 11 | - `css` [现代CSS解决方案的系列](https://moderncss.dev) 12 | 13 | - `github` `SQLite` [Hosting SQLite databases on Github Pages](https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/) 14 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: github pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | deploy: 10 | runs-on: ubuntu-18.04 11 | 12 | steps: 13 | - uses: actions/checkout@v2 14 | 15 | - run: sudo apt-get install pandoc 16 | - run: bash "$(pwd)/rss.sh" 17 | 18 | - name: Setup mdBook 19 | uses: peaceiris/actions-mdbook@v1 20 | with: 21 | mdbook-version: '0.4.7' 22 | # mdbook-version: 'latest' 23 | # - run: cargo install mdbook-katex mdbook-mermaid 24 | - run: mdbook build 25 | 26 | - name: Deploy 27 | uses: peaceiris/actions-gh-pages@v3 28 | with: 29 | github_token: ${{ secrets.GH_TOKEN }} 30 | publish_dir: ./book -------------------------------------------------------------------------------- /src/2021/04/25.md: -------------------------------------------------------------------------------- 1 | # 2021.04.25 2 | 3 | - `windows` [最新 Windows 10 预览版可以直接运行 Linux GUI 应用！](https://devblogs.microsoft.com/commandline/the-initial-preview-of-gui-app-support-is-now-available-for-the-windows-subsystem-for-linux-2/) - [演示视频](https://youtu.be/f8_nvJzuaSU) 4 | 5 | - `tools` [Web Bundles](https://web.dev/web-bundles) - 将网站打包成单个文件通过蓝牙/wifi分享并离线运行 6 | 7 | - `css` [css 生成密码](https://dev.to/inhuofficial/a-pure-css-password-generator-they-said-it-can-t-be-done-4pla) 8 | 9 | - `tools` [可视化解析 npm 包依赖项目](http://npm.anvaka.com/#/view/2d/react-native) 10 | 11 | - `react` `flowchart` [ReactFlow](https://reactflow.dev/) - 构建图表和复杂交互编辑器。ReactFlow是一个基于HTML元素节点（div和svg等）的应用，支持从绘制静态图表到复杂的可交互编辑器等多种场景。它一个比较大的亮点是基于React框架，可以灵活编码实现想要的特性。 12 | 13 | - `tools` [Avatar Maker](https://github.com/favrora/Avatar-Maker) - 开源头像制作生成器，它提供了一些支持自定义五官的选项。 14 | -------------------------------------------------------------------------------- /src/awesome/weekly.md: -------------------------------------------------------------------------------- 1 | # Weekly 2 | 3 | - [jondot/awesome-weekly](https://github.com/jondot/awesome-weekly) - 来自软件界的优质每周精选新闻通讯的精选列表 4 | - [zudochkin/awesome-newsletters](https://github.com/zudochkin/awesome-newsletters) - 精选的精选新闻通讯清单 5 | - [zenany/weekly](https://github.com/zenany/weekly) - 汇总平时看到的好文章，前端技术 & 产品研发为主... 6 | - [印记中文 - React Status Weekly](https://docschina.org/weekly/react/docs) 7 | - [awesome-lowcode](https://github.com/taowen/awesome-lowcode) - 国内低代码平台从业者交流 8 | - [飞猪前端团队](https://zhuanlan.zhihu.com/fliggy) 9 | - [JavaScript 文章精选月刊](https://github.com/hijiangtao/javascript-articles-monthly) 10 | - [ECMAScript双月报告](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg4MjE5OTI4Mw==&action=getalbum&album_id=1509426251277631489&scene=173&from_msgid=2247487220&from_itemidx=1&count=3#wechat_redirect) 11 | - [湾区日报](https://wanqu.co/) - 关注创业与技术，每天推送3到5篇优质英文文章 12 | - [sorrycc/weekly](https://github.com/sorrycc/weekly) - 前端周刊，每周一发布。 13 | -------------------------------------------------------------------------------- /src/2021/05/08.md: -------------------------------------------------------------------------------- 1 | # 2021.05.08 2 | 3 | - `flutter` [资料整理](https://www.yuque.com/mingzibaliao/web/euhbvp) - 整理的关于flutter的周边。 4 | 5 | - `lowcode` 低代码到底是个啥，或许每个人心中都有自己的答案 6 | - [软件开发提效哪有那么容易，都是坑啊~](https://mp.weixin.qq.com/s/Qx08FDyNxHOi7hI1bvnrzg) 7 | - [低代码不是行业毒瘤，你才是！](https://mp.weixin.qq.com/s/DNJKzm6u6_8RKUmtVKaxuw) 8 | - [为什么我说低代码是“行业毒瘤”？](https://www.infoq.cn/article/q2mfoatredzetqmplw0m) 9 | 10 | - `fe` [建立元数据驱动的前端架构](https://github.com/xufei/blog/issues/56) - 徐飞的分享 11 | 12 | - `vue3` [Vue3+Ts+Rollup+Tailwindscss 打造插拔式的业务组件库](https://juejin.cn/post/6959115798841393160) 13 | 14 | - `react` `ui` [Fish Design](https://nsfi.github.io/ppfish-components/#/home) - 基于 React 实现的高质量的企业级 UI 组件库，帮助设计者与开发者快速构建系统。 15 | 16 | - `tools` [ChaosBlade](https://github.com/chaosblade-io/chaosblade) - 一个简单易用且功能强大的混沌实验实施工具 17 | 18 | - `ide` `uncode` [云研发 IDE Uncode：演示版发布](https://zhuanlan.zhihu.com/p/370230771) 19 | 20 | - `vsc` [VS Code 1.56发布](https://code.visualstudio.com/updates/v1_56) 21 | -------------------------------------------------------------------------------- /.github/workflows/linter.yml: -------------------------------------------------------------------------------- 1 | name: Lint Code Base 2 | 3 | # ------------------------------------------------------------------------- 4 | # Documentation: # 5 | # https://help.github.com/en/articles/workflow-syntax-for-github-actions # 6 | # ------------------------------------------------------------------------- 7 | 8 | on: 9 | push: 10 | branches: [main] 11 | pull_request: 12 | branches: [main] 13 | 14 | jobs: 15 | build: 16 | name: Lint Code Base 17 | runs-on: ubuntu-18.04 18 | 19 | steps: 20 | - name: Checkout Code 21 | uses: actions/checkout@v2 22 | with: 23 | fetch-depth: 0 24 | 25 | - name: Super-Linter 26 | uses: github/super-linter@v3 27 | env: 28 | VALIDATE_ALL_CODEBASE: false 29 | LINTER_RULES_PATH: / 30 | MARKDOWN_CONFIG_FILE: .markdownlint.yaml 31 | FILTER_REGEX_INCLUDE: .*src/.*.md 32 | DEFAULT_BRANCH: main 33 | GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} -------------------------------------------------------------------------------- /src/2021/04/23.md: -------------------------------------------------------------------------------- 1 | # 2021.04.23 2 | 3 | - `react` [material-tailwind](https://material-tailwind.com/) - 基于 react、material、tailwind 开发的组件库 4 | 5 | - `tools` 基于 [text-to-chart](https://xosh.org/text-to-diagram/) 的一些在线工具 6 | 7 | - `seo` [基于 SSR/SSG 的前端 SEO 的优化](https://www.jianshu.com/p/88e7348d30d4) 8 | 9 | - `app` [Maccy](https://maccy.app/) - 随时保留复制历史记录，轻巧快捷 10 | 11 | - `app` [f.lux](https://justgetflux.com/) - 屏幕蓝光过滤 12 | 13 | - `app` [Hidden Bar](https://github.com/dwarvesf/hidden) - 隐藏mac菜单栏图标 14 | 15 | - `app` [Rectangle](https://github.com/rxhanson/Rectangle) - 使用快捷键快速调整窗口大小及位置 16 | 17 | - `react` [react-to-print](https://github.com/gregnb/react-to-print) - react中指定打印节点而并不需要写内联样式的库 18 | 19 | - `serverless` [伯克利谈 Serverless：服务器的存在，是云计算的大问题](https://www.infoq.cn/article/gskv00JQCRzluPN4RGiC) 20 | 21 | - `terminal` [Fig](https://github.com/withfig/autocomplete) - adds VSCode style autocomplete to your terminal 22 | 23 | - `fe` `game` [Eva.js](https://github.com/eva-engine/eva.js) - Eva.js is a front-end game engine specifically for creating interactive game projects. 24 | -------------------------------------------------------------------------------- /guidelines.md: -------------------------------------------------------------------------------- 1 | # 贡献准则 2 | 3 | ## 运行项目 4 | 5 | 可以查看 [快速开始](./getting-started.md)，当执行 `mdbook serve` 命令后，在 `src/SUMMARY.md` 中直接添加文件引用，如果文件不存在，则会自动创建文件。浏览器访问 `localhost:3000`，就可以看到页面了。 6 | 7 | ## 信息整理 8 | 9 | ### 原始信息流 10 | 11 | **`以天为维度`** 12 | 13 | 原始信息来源于微信群，信息中包含`前缀` `名称` `描述` `感受` `链接`。前缀包含：【前端情报】，【主题：xx】等 14 | 15 | * 当这些信息收录进来后需要把前缀全部去除，重新进行归类（即：信息前打标签，标签使用 \` 包裹，例如`tag`，可以同时打多个标签，因为 \` 用来给信息打标签了，所以信息中不可以再次出现 \` 包裹其他词语，避免混乱）。 16 | * 如果信息分类不明确的可以统一使用 `other` 这个标签。也可以配合大分类加 `other` 标签的组合，例如 `fe` `other` （前端下模糊分类） 或者 `node` `other`（nodejs下模糊分类）。 17 | * 🤝 不在群中的成员，也可以通过 [Discussions](https://github.com/fe-cool/news/discussions/5) 自荐信息，或提PR，期待优秀的你加入 18 | 19 | ### 月汇总 20 | 21 | **`以月为维度`** 22 | 23 | * 汇总文件目录位置`2021/xx/toc.md`，根据本月收集到的信息进行重新归类整理，因为原始信息中包含个人主观感受，在汇总中需要对信息重新进行客观描述（即：访问原始信息提供的链接，获取描述信息或标题，如果未提供链接的，则需要对名称进行搜索，获取并将链接录入）。 24 | * 对信息做减法，只保留`工具`，`指南`，`开源`，`资讯`，`VS Code`，`算法`，`WebAssembly`等少部分分类(文章类基本都被排除)。 25 | * `toc.md` 包含当前信息的整理状态 26 | * `汇总中...` - 📅 起止日期 27 | * `汇总完成` - 📅 起止日期 28 | 29 | ## 成为贡献者 30 | 31 | 贡献后，可以将自己的名字添加进[贡献者列表](./contributors.md)，依次往后排列，🈲️插队。 32 | -------------------------------------------------------------------------------- /book.toml: -------------------------------------------------------------------------------- 1 | [book] 2 | authors = ["lencx"] 3 | language = "zh_CN" 4 | title = "MDH • 前端情报" 5 | multilingual = false 6 | src = "src" 7 | 8 | [rust] 9 | edition = "2018" 10 | 11 | # https://github.com/lzanini/mdbook-katex 12 | # [preprocessor.katex] 13 | 14 | # https://github.com/badboy/mdbook-mermaid 15 | # [preprocessor.mermaid] 16 | # command = "mdbook-mermaid" 17 | 18 | [output.html] 19 | theme = "theme" 20 | default-theme = "rust" 21 | no-section-label = true 22 | git-repository-url = "https://github.com/fe-cool/news" 23 | additional-css = ["theme/news.css"] 24 | # additional-js = [ 25 | # # "plugins/mermaid.min.js", 26 | # # "plugins/mermaid.init.js", 27 | # ] 28 | 29 | [output.html.playground] 30 | editable = true 31 | copy-js = true 32 | line-numbers = true 33 | 34 | [output.html.search] 35 | enable = true 36 | limit-results = 30 37 | teaser-word-count = 30 38 | use-boolean-and = true 39 | boost-title = 3 40 | boost-hierarchy = 1 41 | boost-paragraph = 1 42 | expand = true 43 | heading-split-level = 3 44 | copy-js = true 45 | 46 | [output.html.fold] 47 | enable = true 48 | level = 1 -------------------------------------------------------------------------------- /getting-started.md: -------------------------------------------------------------------------------- 1 | # 快速开始 2 | 3 | ## 环境 4 | 5 | ### [Rust](https://www.rust-lang.org/learn/get-started) 6 | 7 | ```bash 8 | # macOS, Linux 9 | curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh 10 | 11 | # 其他安装方式 12 | # https://forge.rust-lang.org/infra/other-installation-methods.html 13 | ``` 14 | 15 | ```bash 16 | # 安装mdbook 17 | cargo install mdbook 18 | ``` 19 | 20 | ## mdbook文档及常用命令 21 | 22 | [mdbook文档](https://rust-lang.github.io/mdBook) 23 | 24 | ### `mdbook init` 25 | 26 | ```bash 27 | book/ 28 | ├── book 29 | └── src 30 | ├── chapter_1.md 31 | └── SUMMARY.md 32 | ``` 33 | 34 | ### `mdbook build` 35 | 36 | 构建命令,用于渲染`.md`文件，并输出静态 `html` 37 | 38 | 它会尝试解析你的`SUMMARY.md`文件，以了解图书的结构并获取相应的文件。 39 | 40 | 为方便起见,渲染的输出将保持与源目录结构相同。因此，大型书籍在渲染时能保持结构化. 41 | 42 | ### `mdbook watch` 43 | 44 | 希望在每次更改文件，都生成图书时, watch命令会很有用。这样就能观察文件，并会在您修改文件时，自动触发构建。 45 | 46 | ### `mdbook serve` 47 | 48 | serve 命令用于通过 HTTP 服务来预览书籍。默认情况下`localhost:3000`。此外,它还会观察图书的目录的更改，自动重建图书，以及为每次更改刷新客户端。 49 | 50 | > websocket 连接用于触发客户端刷新 51 | 52 | 注意: serve命令用于测试书籍的 HTML 输出，并不打算成为网站的完整 HTTP 服务器。 53 | 54 | ### `mdbook clean` 55 | 56 | clean 命令用于删除生成的书籍。 57 | -------------------------------------------------------------------------------- /src/2021/05/31.md: -------------------------------------------------------------------------------- 1 | # 2021.05.31 2 | 3 | - `ide` [CodeSandbox宣布已获得@playdotjs](https://twitter.com/codesandbox/status/1397548056426553346) - Play.js是适用于iOS的JavaScript IDE，这意味着很快就可以在iPhone或iPad上的本机沙箱上工作！📱 4 | 5 | - `browser` [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access) - File System Access API with legacy fallback in the browser. 6 | 7 | - `browser` [文件系统访问 API：简化对本地文件的访问](https://web.dev/file-system-access) - 暂时只有 chrome 和 edge 支持 8 | 9 | - `vite` [Vite，下一代 Web 工具](https://mp.weixin.qq.com/s/M2fmiaVOj--h9bK3gT1X8A) 10 | 11 | - `v8` [Sparkplug — a non-optimizing JavaScript compiler](https://v8.dev/blog/sparkplug) 12 | 13 | - `v8` [v8js Tweet](https://twitter.com/v8js/status/1397945205198835719) - v8 v9.1 添加了 Sparkplug 编译器，网页的真实性能将提升 5%-15% 14 | 15 | - `flutter` [FlutterUnit](https://github.com/toly1994328/FlutterUnit) - 【Flutter 集录指南 App】The unity of flutter, The unity of coder. 16 | 17 | - `other` [GacUIBlog](https://github.com/vczh/GacUIBlog) - 记录 GacUI 开发10年来背后的故事，以及对架构设计的考量。其设计思想可以参考 18 | 19 | - `guide` [secguide](https://github.com/Tencent/secguide) - 腾讯开源，有关代码安全策略 20 | 21 | - `react` [React状态管理](https://github.com/lencx/fzj/discussions/11) - 汇总 22 | -------------------------------------------------------------------------------- /src/2021/04/18.md: -------------------------------------------------------------------------------- 1 | # 2021.04.18 2 | 3 | - `chrome` Google的.new快捷方式，Google为Google文档、幻灯片和表格引入了方便的“ .new”快捷方式，网站运营方也可以注册自己在线快捷方式的.new域，例如： 4 | - 新建Google文档：docs.new 5 | - 新建Google幻灯片：slides.new 6 | - 新建Google表格：sheets.new 7 | - Spotify新建播放列表: playlist.new 8 | - Medium新建文章：medium.new 9 | 10 | - `wasm` `tools` [NoteCalc](https://bbodi.github.io/notecalc3)带有智能内置计算器的便捷记事本。功能强大，使用webAssembly+canvas构建应用。 11 | 12 | - `vite` [项目中vite遇到的坑收集](https://mp.weixin.qq.com/s/Df0-YmQ0uV1NLATLmJu4Ww)。 13 | 14 | - `react` [react-hook-form](https://github.com/react-hook-form/react-hook-form) v7，React Hooks for forms validation (支持Web+RN)， 15 | 16 | - `tools` 😘 让你[“爱”上 GitHub](https://github.com/521xueweihan/GitHub520)，解决访问时图裂、加载慢的问题。（无需安装） 17 | 18 | - `fe` `docs` 微软开源项目 - 面向初学者的[Web开发-课程](https://github.com/microsoft/Web-Dev-For-Beginners)，包含视频，插图笔记，任务，补充阅读，课后测验等。 19 | 20 | - `docs` `tools` 新文章：[“腾讯开源的酷炫动画播放解决方案Vap初体验”](https://www.zhangxinxu.com/wordpress/2021/04/tencent-vap-%e8%a7%86%e9%a2%91%e5%8a%a8%e7%94%bb/ ) - H5中希望有炫酷3D动效，但是3D WebGL实力不允许，可以试试使用本文要介绍的VAP，导出PNG图片序列，可以有高性能的炫酷动画效果，Android和iOS也可以使用。 21 | 22 | - `fe` `docs` [微前端](https://tech.meituan.com/2020/02/27/meituan-waimai-micro-frontends-practice.html)在美团外卖的实践。 23 | -------------------------------------------------------------------------------- /src/2021/05/17.md: -------------------------------------------------------------------------------- 1 | # 2021.05.17 2 | 3 | - `other` [Weex 因活跃度不足从 Apache Incubator 退休](https://mp.weixin.qq.com/s/v_jLvyYHkXOEeTmdfgQMdQ) 4 | 5 | - `css` 运行时动态切换css插件（实时换肤） 6 | - [webpack-theme-color-replacer](https://github.com/hzsrc/webpack-theme-color-replacer) - Webpack的运行时动态主题颜色替换插件 7 | - [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) - 用于动态更改界面主题色的 vite 插件 8 | 9 | - `tools` [精读《新一代前端构建工具对比》](https://juejin.cn/post/6963069843864027144) 10 | 11 | - `fe` [MDH 前端周刊第 2 期](https://mp.weixin.qq.com/s/dEAsjlmxEbf9JZ4tm1-KIQ) 12 | 13 | - `other` [Linux 之父：编程之美](https://www.infoq.cn/article/FFwCH3efJtbcStDL8hhm) - 翻译不准确，推荐查看 [英文原文](https://www.brynmawr.edu/cs/resources/beauty-of-programming?fileGuid=kxiSzjaRxbcskaHI) 14 | 15 | - `other` 两篇文章，读懂内卷 16 | - [社会内卷的真正原因：华为内部论坛的这篇雄文火了](https://mp.weixin.qq.com/s/zxASHAl4uzMMyftUDTiUgA) 17 | - [终于有人把内卷和囚徒困境讲明白了](https://mp.weixin.qq.com/s/35GjCp2zSlqilVpgaYzbiw) 18 | 19 | - `tools` [Remove Image Background](https://www.remove.bg/zh) - 智能抠图的公共API服务 20 | 21 | - `deno` `react` [aleph.js](https://github.com/alephjs/aleph.js) - 基于 deno 实现的 react 框架，并支持 ssr 22 | 23 | - `tools` [Choose the right package every time](https://openbase.com) - 一个帮助你快速找到心仪前端库的网站，比如查找'table'，会列出大量开源table库并包含各种不同的指数帮助你进行挑选。 24 | -------------------------------------------------------------------------------- /src/awesome/guide.md: -------------------------------------------------------------------------------- 1 | # Guide 2 | 3 | - [Developer Roadmaps](https://roadmap.sh) - Step by step guides and paths to learn different tools or technologies (包含前端，后端，运维，安卓，数据库，react等) 4 | - [Web Development for Beginners - A Curriculum](https://github.com/microsoft/Web-Dev-For-Beginners) - 24 Lessons, 12 Weeks, Get Started as a Web Developer 5 | - [React Interview Questions & Answers](https://github.com/sudheerj/reactjs-interview-questions) - List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!! 6 | - [Top JavaScript Trends to Watch in 2021](https://medium.com/front-end-weekly/top-javascript-trends-to-watch-in-2021-4aa504a5b9d0) 7 | - [CSS 奇技淫巧](https://github.com/chokcoco/iCSS) - 不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 CSS 细节 8 | - [Modern CSS Solutions for Old CSS Problems](https://moderncss.dev) - A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 13+ years. 9 | - [A practical guide to TypeScript decorators](https://blog.logrocket.com/a-practical-guide-to-typescript-decorators/) 10 | - [The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) 11 | - [Rust 入门](https://docs.microsoft.com/zh-cn/learn/paths/rust-first-steps/) - 微软学习文档 12 | -------------------------------------------------------------------------------- /src/2021/04/14.md: -------------------------------------------------------------------------------- 1 | # 2021.04.14 2 | 3 | - `tools` Google工程师Surma和其他人一起打造了一个评价打包工具优劣的开源项目tooling.report 4 | - [https://github.com/surma（作者）](https://github.com/surma) 5 | - [https://github.com/GoogleChromeLabs/tooling.report（项目仓库）](https://github.com/GoogleChromeLabs/tooling.report) 6 | - [https://bundlers.tooling.report（官网）](https://bundlers.tooling.report) 7 | 8 | - `news` 英文技术推文情报源： 9 | - [https://github.com/jondot/awesome-weekly](https://github.com/jondot/awesome-weekly) 10 | - [https://github.com/zudochkin/awesome-newsletters](https://github.com/zudochkin/awesome-newsletters) 11 | - [https://github.com/zenany/weekly](https://github.com/zenany/weekly) 12 | 13 | - `js` [我国首个 JS 语言提案在 ECMA 进入 Stage 3](https://www.toutiao.com/i6950609447534412327) 14 | 15 | - `react` [Recoil：Facebook 新一代的 React 状态管理库](https://juejin.cn/post/6950997088947666951) 16 | 17 | - `wasm` [WebAssembly入门 （Vite + Rust）](https://lencx.github.io/book/wasm/rust_wasm_frontend.html) 18 | 19 | - `vue` [VueConf US 进行中 形式: 线上直播 价格: 免费 报名链接](https://us.vuejs.org/schedule) 20 | 21 | - `js` [新年新气象，ES2021/ES12它踏着自信的步伐来了](https://mp.weixin.qq.com/s/wh1RcA1-32rLI4xRaKi-uw) 22 | 23 | - `tools` [开发者边车，github打不开，github加速，git clone加速，git release下载加速，stackoverflow加速](https://github.com/docmirror/dev-sidecar) 24 | -------------------------------------------------------------------------------- /src/2021/04/27.md: -------------------------------------------------------------------------------- 1 | # 2021.04.27 2 | 3 | - `vue3` [What’s New in Vue 3 Ecosystem: Introducing Vite 2 with Evan You](https://enjoythevue.io/episodes/58/) - 尤雨溪 4 月 26 日嘉宾做客播客 Enjoy the Vue 节目畅谈 Vue 3 生态新闻和 Vite 2 相关内容 4 | 5 | - `git` [Google 和 Facebook 为什么不用 Git 管理源码？](https://mp.weixin.qq.com/s/rVMCi8oDGdD5OsJnQlyL5g) 6 | 7 | - `book` [互联网上的免费书籍](https://github.com/ruanyf/free-books) - 免费计算机书籍汇总。没有注明语种的，都为英语资源。 8 | 9 | - `fe` `design` [Web Design & UI Inspiration with Code Snippets](https://codemyui.com/) 10 | 11 | - `js` [ECMAScript 双月报告：TC39 2021年4月会议提案进度汇总](https://mp.weixin.qq.com/s/FD2CWLMtIsvs3Hy5dxlqRg) 12 | 13 | - `fe` [f2e-journey](https://github.com/f2e-journey/f2e-journey) - 我的前端之旅 - 前端最佳入门指南 14 | 15 | - `css` [Flexbugs](https://github.com/philipwalton/flexbugs) - 社区管理的flexbox问题列表以及针对这些问题的跨浏览器解决方法。 16 | 17 | - `vue3` `vsc` [Volar](https://github.com/johnsoncodehk/volar) - Volar是专门为Vue 3构建的语言支持插件。它基于@ vue / reactivity，可按需计算TypeScript以优化性能，类似于本机TypeScript语言服务。 18 | 19 | - `chrome` `android` [ADB](github.com/GoogleChrome/ADBPlugin) - 实际开发中app内嵌webview很常见，但是安卓环境调试，出了开模拟器，可以试试adb插件，很好用 20 | 21 | - `tools` [calendso](https://github.com/calendso/calendso) - 知名日程安排工具(Calendly)的开源替代品。 22 | 23 | - `tools` [fscan](https://github.com/shadow1ng/fscan) - 一款内网综合扫描工具，方便一键自动化、全方位漏扫扫描。 24 | -------------------------------------------------------------------------------- /src/2021/05/22.md: -------------------------------------------------------------------------------- 1 | # 2021.05.22 2 | 3 | - `nextjs` [Let’s make the web. Faster.](https://nextjs.org/conf) - 6 月 15 日 nextconf 线上报名，报名网站做的非常有意思 4 | 5 | - `flutter` [Google I/O 2021 发布 Flutter 2.2](https://juejin.cn/post/6963817071197028383) 6 | 7 | - `browser` [The future of Internet Explorer on Windows 10 is in Microsoft Edge](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge) - 官方宣布 ie11 将于 2021.6.15 日正式退休 8 | 9 | - `other` [关于 Yak Shaving](https://antfu.me/posts/about-yak-shaving-zh) - 一篇关于开源的故事 10 | 11 | - `js` [JavaScript 二十年](https://cn.history.js.org) - js的二十年八卦史 12 | 13 | - `fe` `browser` [从输入url到页面加载发生了什么？](https://github.com/lencx/sea/discussions/4) 14 | 15 | - `wasm` `node` [Introducing WebContainers: Run Node.js natively in your browser](https://blog.stackblitz.com/posts/introducing-webcontainers/) - 在浏览器中本地运行Node.js, Web现在可以为图形设计师，视频编辑器和丰富的文档编辑环境运行完整的环境, 开发人员最终有可能使用Web来构建Web，备注：基于webAssemby 16 | 17 | - `css` [The new responsive: Web design in a component-driven world](https://web.dev/new-responsive) - 新的响应式设计思路 18 | 19 | - `angular` `tools` [Docgeni](https://github.com/docgeni/docgeni) - 现代化的、强大的、开箱即用的 Angular 组件文档生成工具 20 | - [Docgeni，开箱即用的 Angular 组件文档工具](https://zhuanlan.zhihu.com/p/373743954) 21 | -------------------------------------------------------------------------------- /src/2021/04/16.md: -------------------------------------------------------------------------------- 1 | # 2021.04.16 2 | 3 | - `webpack` [SVG Import as React Component 的方式并不好，因为 bundle 到一起，没有用到的也会加载，所以会影响加载性能和内存占用，那么推荐的方式是啥？import 后返回一个 url 可能比较合适，比如用 webpack 的 url-loader](https://twitter.com/_developit/status/1382838799420514317) 4 | 5 | - `esbuild` [esmon，类似 nodemon 但基于 esbuild，支持 ts 等，试过还挺好用](https://github.com/egoist/esmon) 6 | 7 | - `vsc` `theme` [VSCode 里可以用 Github 主题了](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme&WT.mc_id=devcloud-00000-cxa) 8 | 9 | - `babel` [Babel 新增 Feature Timeline，把之前 changelog 里的重要功能摘了出来，一目了然](https://babeljs.io/docs/en/features-timeline) 10 | 11 | - `react` [可以用 React 做视频的 remotion 发布 2.0，支持音频，使用 esbuild-loader 代替 babel-loader，\ 组件等](https://www.remotion.dev/blog/2-0/) 12 | 13 | - `tools` [Fusuma](https://github.com/hiroppy/fusuma) 一款文档演示工具，可根据一定的标识将文档分割成不同页面，以 slide 的形式进行分享。以 ppt 的形式演示文档，能更好的突出重点。在 lerna 的管理下，项目结构很清晰，适合直接部署或者二次开发，比如基于它扩展出手机端的翻页笔、标注工具之类的。甚至可以集成在博客里，直接启动 slide 14 | 15 | - `tools` [rive2 (rive1 === flare)](https://rive.app) - 基于 Flutter 开发的网页端动画制作工具(站点支持 PWA) 提供 Web(基于 wasm)、Flutter、Cpp、iOS、Android 五种运行时，集成起来挺方便的。同时也体现了 Flutter Web 的表现能力，使用体验还不错。 16 | 17 | - `rust` [libp2p-rs rust实现的libp2p](https://github.com/netwarps/libp2p-rs) 18 | 19 | - `rust` [rbatis 用rust实现ORM框架](https://github.com/rbatis/rbatis) 20 | 21 | - `rust` [rust 9.2K 跨平台 GUI 仓库 iced](https://github.com/hecrj/iced) 22 | 23 | - `rust` [swc rust编写的超快速的typescript/ javascript编译器,性能秒杀tsc](https://github.com/swc-project/swc) 24 | 25 | - `vue` [vue-cli维护者蒋豪群，给大家讲如何学习新的技术（以vue3个vite为例）](https://b23.tv/7IaUec) 26 | -------------------------------------------------------------------------------- /rss.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | feed="feed.xml" 4 | website_title="MDH • 前端情报" 5 | website_link="https://fe-cool.github.io/news" 6 | description="MDH • 前端情报" 7 | 8 | newest_files=$( \ 9 | git ls-files -z 'src/*.md' | \ 10 | xargs -0 -n1 -I{} -- git log -1 --format="%at {}" {} | \ 11 | sort -r | \ 12 | head -n10 | \ 13 | cut -d " " -f2-) 14 | 15 | items="" 16 | 17 | for file in ${newest_files[@]}; do 18 | echo $file 19 | file_path_len=${#file} 20 | file_path_end="$(expr $file_path_len - 7)" 21 | title=$(grep "." $file | head -n1) 22 | file_path="${file:4:$file_path_end}.html" 23 | link="$website_link/$file_path" 24 | html=$(pandoc -f markdown -t html $file) 25 | if [ $file == "src/SUMMARY.md" ]; then 26 | html=$(echo $html|sed 's/.md/.html/g') 27 | fi 28 | date=$(git log -1 --format="%aD" -- $file) 29 | item=" 30 | 31 | <![CDATA[${title:2}]]> 32 | $link 33 | $link 34 | $date 35 | 36 | 37 | " 38 | items="$items $item" 39 | done 40 | 41 | rss_content=" 42 | 43 | $website_title 44 | 45 | $website_link 46 | $description 47 | $items 48 | 49 | " 50 | 51 | echo "$rss_content" > "src/$feed" 52 | echo "" 53 | echo "✨ RSS Done!" -------------------------------------------------------------------------------- /src/2021/05/11.md: -------------------------------------------------------------------------------- 1 | # 2021.05.11 2 | 3 | - `fe` [如何通过 OfflineAudioContext 收集浏览器指纹（Device ID 降级方案）](https://fingerprintjs.com/blog/audio-fingerprinting/) 4 | 5 | - `vue3` Vue 3.1.0 的 beta 版发布，新特性： 6 | - onServerPrefetch：composition-api 版本的 serverPrefetch 7 | - 组件级别的 compilerOptions 8 | - @vue/compiler-core 支持了空白字符处理策略 9 | - 支持通过 app.config.compilerOptions 配置运行时的编译器 10 | - devtools 改进了对 KeepAlive 的支持 11 | - 支持通过 is="vue:xxx" 将普通元素转换为组件 12 | 13 | - `react` [本周 React Status 周刊 #39 - 五大 React 框架测评](https://docschina.org/weekly/react/docs/) 14 | 15 | - `other` [软件工程的最大难题](https://mp.weixin.qq.com/s/WO5z13Sz-AGuF3IEzIC3fA) 16 | 17 | - `node` [Hello, Modules!](https://blog.sindresorhus.com/hello-modules-d1010b4e777b) - js modules 在现代浏览器中已经可用有一段时间了，但现在终于可以在 Node.js 中使用它了 18 | 19 | - `other` [突破 web 应用研发效能的叹息之墙](https://zhuanlan.zhihu.com/p/370441727) 20 | 21 | - `graphql` [GraphQL及元数据驱动架构在后端BFF中的实践](https://tech.meituan.com/2021/05/06/bff-graphql.html) 22 | 23 | - `other` [入职腾讯第九年，我辞职了!!!](https://mp.weixin.qq.com/s/kM0_-3TnQY56XH03H8GVjQ) - 《web 全栈工程师的自我修养》作者余果离开腾讯的一篇文章，值得品一下 24 | 25 | - `mac` [新款MacBook Air 2021配备了M2芯片组和全新设计！](https://www.youtube.com/watch?v=K8fpWb34UvI&t=29s) 26 | 27 | - `babel` Babel 八卦，原作者吐槽现在的维护者拿钱不干事，Henry Zhu 拿十几万刀的年薪 2020 只有 12 个 issue，29 个 PR 确实干得有点少。 28 | - [twitter](https://twitter.com/sebmck/status/1392019586833387522?s=21) 29 | - [Babel is used by millions, so why are we running out of money?](https://babeljs.io/blog/2021/05/10/funding-update.html) 30 | 31 | - `fe` `frame` [bootstrap发布了最新的5.0版本](https://blog.getbootstrap.com/2021/05/05/bootstrap-5/) 32 | -------------------------------------------------------------------------------- /src/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [About](./index.md) 4 | 5 | * [Awesome](./awesome/toc.md) 6 | * [Guide](./awesome/guide.md) 7 | * [Tools](./awesome/tools.md) 8 | * [Weekly](./awesome/weekly.md) 9 | * [Application](./awesome/app.md) 10 | * [VS Code](./awesome/vsc.md) 11 | 12 | * [News](./news.md) 13 | * [2021.04](2021/04/toc.md) 14 | * [2021.04.14](./2021/04/14.md) 15 | * [2021.04.15](./2021/04/15.md) 16 | * [2021.04.16](./2021/04/16.md) 17 | * [2021.04.17](./2021/04/17.md) 18 | * [2021.04.18](./2021/04/18.md) 19 | * [2021.04.19](./2021/04/19.md) 20 | * [2021.04.20](./2021/04/20.md) 21 | * [2021.04.21](./2021/04/21.md) 22 | * [2021.04.22](./2021/04/22.md) 23 | * [2021.04.23](./2021/04/23.md) 24 | * [2021.04.24](./2021/04/24.md) 25 | * [2021.04.25](./2021/04/25.md) 26 | * [2021.04.26](./2021/04/26.md) 27 | * [2021.04.27](./2021/04/27.md) 28 | * [2021.04.28](./2021/04/28.md) 29 | * [2021.04.29](./2021/04/29.md) 30 | * [2021.04.30](./2021/04/30.md) 31 | * [2021.05](./2021/05/toc.md) 32 | * [2021.05.01](./2021/05/01.md) 33 | * [2021.05.06](./2021/05/06.md) 34 | * [2021.05.07](./2021/05/07.md) 35 | * [2021.05.08](./2021/05/08.md) 36 | * [2021.05.11](./2021/05/11.md) 37 | * [2021.05.13](./2021/05/13.md) 38 | * [2021.05.14](./2021/05/14.md) 39 | * [2021.05.17](./2021/05/17.md) 40 | * [2021.05.18](./2021/05/18.md) 41 | * [2021.05.22](./2021/05/22.md) 42 | * [2021.05.26](./2021/05/26.md) 43 | * [2021.05.31](./2021/05/31.md) 44 | * [2021.06](./2021/06/toc.md) 45 | * [2021.06.01](./2021/06/01.md) 46 | -------------------------------------------------------------------------------- /src/2021/04/30.md: -------------------------------------------------------------------------------- 1 | # 2021.04.30 2 | 3 | - `babel` [Babel 发布 7.4](https://babeljs.io/blog/2021/04/29/7.14.0) - 默认开启 Class fields 和 private methods，支持 Async do 表达式，TypeScript 4.3，更好的 Node.js ESM-CJS interop 兼容 4 | 5 | - `fe` `frame` [Remix](https://remix.run) - [Remix v1 Beta Launch（youtube）](https://www.youtube.com/watch?v=4dOAFJUOi-s)，付费框架 Remix v1 Beta 发布。 6 | 7 | - `react` [精读《React Server Component》](https://zhuanlan.zhihu.com/p/367612332) 8 | 9 | - `css` [CSS Container Queries 补丁](https://github.com/jsxtools/cqfill) 10 | 11 | - `lowcode` 低代码相关库 12 | - [sparrow](https://github.com/sparrow-js/sparrow) - 场景化低代码（LowCode）搭建工作台，实时输出源代码 13 | - [yoma](https://github.com/msh01/yoma) - 一个小而美的低代码全栈开发平台，一键生成后端api接口+前端页面代码+在线接口文档，节省50%的前后端开发的工作量，平台代码100%开源。平台适用于企业信息化、政务、中小型互联网等项目 14 | - [citrus](https://github.com/Yiuman/citrus) - 低代码快速开发脚手架，灵活、高效，降低开发成本 15 | - [vue-low-code](https://github.com/KlausSchaefers/vue-low-code) - Quant-UX standalone 16 | 17 | - `js` `interview` [400 条 JavaScript 面试题（带答案）](https://dev.to/worldindev/400-javascript-interview-questions-with-answers-2fcj) 18 | 19 | - `frame` [2020-2021 收集的 165+ 开发者资源，付费框架](https://dev.to/gedalyakrycer/165-developer-resources-i-discovered-in-2020-2021-6ma) 20 | 21 | - `other` [互联网黑话词汇表](https://github.com/justjavac/ali-words) - 互联网黑话词汇表，包含“赋能、抓手、闭环、沉淀、打通”等阿里味儿词汇 22 | 23 | - `wasm` `emulates` `x86` [v86](https://github.com/copy/v86) - v86模拟与x86兼容的CPU和硬件。 机器代码在运行时转换为WebAssembly模块，以实现良好的性能，支持多种仿真硬件。 24 | 25 | - `frame` [尤雨溪 - 在框架设计中寻求平衡](https://www.bilibili.com/video/av80042358/) 26 | 27 | - `vdom` [Virtual DOM is pure overhead](https://www.sveltejs.cn/blog/virtual-dom-is-pure-overhead) 28 | -------------------------------------------------------------------------------- /src/2021/05/26.md: -------------------------------------------------------------------------------- 1 | # 2021.05.26 2 | 3 | - `心得分享(lencx)`: 让你感到枯燥乏味的东西，是你不了解，不知道的地方，兴趣是持续学习的源动力。 4 | 5 | - `web3` [Web3.0学习资料推荐](https://docs.qq.com/doc/DQnpiZmlobVNWcVFB) - 来自国内rust社区的整理 6 | 7 | - `vue` [VueConf 2021](https://www.bilibili.com/read/cv11408693) - VueConf 2021 于 5 月 22 日在杭州举办，线上线下同步进行。本次会议一共有 9 个主题演讲，1 个闪电分享，附所有直播回放链接 8 | 9 | - `css` [tailwindcss 2.1](https://tailwindcss.com/docs/just-in-time-mode) - 2.1 发布，多项功能支持 10 | - 优化编译时间 11 | - 支持所有变体同时生效写法：`sm:hover:active:disabled:opacity-75` 12 | - 支持所有 css 变量，写法：`md:top-[-113px]` 13 | 14 | - `github` [SNKRX](https://github.com/a327ex/SNKRX#snkrx) - github markdown 支持插入视频 15 | 16 | - `fe` [MDH 前端周刊第 3 期](https://mp.weixin.qq.com/s/mSyjhplad6vu6d6sheqSiA) 17 | 18 | - `react` [React Status 中文周刊 #41 - React Router v6 新特性一览](https://mp.weixin.qq.com/s/mbR3Y01A0xJVAqIggR4AiA) 19 | 20 | - `react` [react-use issues](https://github.com/streamich/react-use/issues/1974) - react-use 搞不下去了 21 | 22 | - `react` [react-hookz/web](https://github.com/react-hookz/web) - React hooks done right, for browser and SSR. 23 | 24 | - `other` [从高效能人士的七个习惯谈成长](https://www.yuque.com/zenany/up/be_independent) 25 | 26 | - `fe` [精读《前端职业规划 - 2021 年》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/196.%E7%B2%BE%E8%AF%BB%E3%80%8A%E5%89%8D%E7%AB%AF%E8%81%8C%E4%B8%9A%E8%A7%84%E5%88%92%20-%202021%20%E5%B9%B4%E3%80%8B.md) 27 | 28 | - `fe` [五年陈的 Weex，聊聊它的过去现在和未来](https://zhuanlan.zhihu.com/p/373582962) 29 | 30 | - `fe` [Dear HTML+CSS](https://css-tricks.com/a-love-letter-to-html-css/) - 一封给 html,css 的情书 31 | 32 | - `react` [remotion](https://github.com/JonnyBurger/remotion) - 以 React 编程的方式创建视频 33 | 34 | - `fe` [夜沉-如何打造流程可扩展、高生产力的前端研发平台](https://juejin.cn/post/6955775203771154446) 35 | 36 | - `terminal` [XTERM.JS](https://xtermjs.org/) - 一个web端的terminal 37 | -------------------------------------------------------------------------------- /src/2021/04/26.md: -------------------------------------------------------------------------------- 1 | # 2021.04.26 2 | 3 | - `js` [Fabric.js](https://github.com/fabricjs/fabric.js) - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser 4 | 5 | - `js` `regexp` [Regulex](https://jex.im/regulex) - JavaScript Regular Expression Visualizer. 6 | 7 | - `app` `mac` [Dropover](https://dropoverapp.com/) - Dropover is a utility that makes it easier to manage and move content between folders, applications, windows and workspaces using Drag and Drop. 8 | 9 | - `css` `icon` [700+CSS Icons](https://css.gg/) - Open-source CSS, SVG and Figma UI Icons. Available in SVG Sprite, styled-components, NPM & API. 10 | 11 | - `tools` `css` [CSS Gradient](https://cssgradient.io/) - As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. 12 | 13 | - `js` `webdev` [10 GitHub Repositories every Developer should know](https://dev.to/pb/10-github-repositories-every-developer-should-know-ngm) 14 | - [Free Programming Books](https://github.com/EbookFoundation/free-programming-books) 15 | - [Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap) 16 | - [OSSU Computer Science](https://github.com/ossu/computer-science) 17 | - [Awesome](https://github.com/sindresorhus/awesome) 18 | - [Build your own X](https://github.com/danistefanovic/build-your-own-x) 19 | - [Coding Interview University](https://github.com/jwasham/coding-interview-university) 20 | - [Public Apis](https://github.com/public-apis/public-apis) 21 | - [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) 22 | - [System Design Primer](https://github.com/donnemartin/system-design-primer) 23 | - [Design Resources for Developers](https://github.com/bradtraversy/design-resources-for-developers) 24 | 25 | - `react` [React Status 中文周刊 #37 - 大多数 React 教程不会告诉你的 5 件事](https://mp.weixin.qq.com/s/EYuSeupM6LzK2coYsI7D9w) 26 | -------------------------------------------------------------------------------- /src/2021/05/06.md: -------------------------------------------------------------------------------- 1 | # 2021.05.06 2 | 3 | - `tools` rome.tools 成立公司，创始人是 babel、flipper、yarn、prepack 和 lerna 的作者，Jamie Kyle 加入，种子轮 $4.5 million 4 | - [Announcing Rome Tools, Inc.](https://rome.tools/blog/announcing-rome-tools-inc/) 5 | - [End-to-end Developer Tools](https://drive.google.com/file/d/1gOUJshwbJpxmrqLjOmrpTCKjBWT6dp7Y/view) 6 | 7 | - `tools` `react` [inspx](https://github.com/raunofreiberg/inspx) - 支持开发模式下显示元素的位置、尺寸信息，“像素完美”强迫症必备 8 | 9 | - `vite` `webpack` [Why You Should Not Use Webpack](https://javascript.plainenglish.io/why-you-should-not-use-webpack-f07f4fd7c116) - 作者的观点：1. dev 慢 2. 配置复杂 3. 产物大；作者推荐 Vite 10 | 11 | - `fe` `parcel` [Rewrite JS transformer and scope hoisting in Rust](https://github.com/parcel-bundler/parcel/pull/6230) - Parcel 基于 Rust 重写 JS transformer 和 scope hoisting，用 SWC 替换 Babel 12 | 13 | - `tools` `vite` `slide` [slidev](https://github.com/slidevjs/slidev) - Presentation Slides for Developers，基于 Vite 的 markdown 转 slide 工具 14 | 15 | - `fe` [Dependency Managers Don’t Manage Your Dependencies](https://cpojer.net/posts/dependency-managers-dont-manage-your-dependencies) 16 | 17 | - `react` `ui` [mantine](https://github.com/mantinedev/mantine) - react UI 库 18 | 19 | - `fe` `frame` [React Framework Comparison: Gatsby, Next.js, Blitz, Redwood](https://www.youtube.com/watch?v=dfMhRYOtglg) - 视频：作者比较四个 React 框架，包括 Gatsby, Next.js, Blitz 和 Redwood 20 | 21 | - `windcss` [WindiCSS v3.0 now in Beta](https://windicss.org/posts/v30.html) - windcss 3.0 新语法解决了 tailwindcss 的 class 冗长问题 22 | 23 | - `other` [Pressing flesh against flesh 🤝](https://jenniferdaniel.substack.com/p/pressing-flesh-against-flesh-) - 握手符号将来有 25 种肤色可以选择 24 | 25 | - `flowchart` [swimlanes.io](https://swimlanes.io/) - swimlanes.io markdown 转流程图工具 26 | 27 | - `fe` [一文彻底搞懂前端监控](https://juejin.cn/post/6903133330196299783#heading-4) - 一篇梳理前端监控现状、目的、基本流程的文章，文章写得很有条理 28 | 29 | - `news` `vue` 5 月 9 日本周日晚 9 点，极客帮科技总编郭蕾会和尤雨溪进行连麦直播，为了避免广告嫌疑，感兴趣的同学可以自行搜索 30 | 31 | - `fe` [夜沉-如何打造流程可扩展、高生产力的前端研发平台](https://juejin.cn/post/6955775203771154446) 32 | -------------------------------------------------------------------------------- /src/2021/05/13.md: -------------------------------------------------------------------------------- 1 | # 2021.05.13 2 | 3 | - `lowcode` `report` [JimuReport](https://github.com/zhangdaiscott/JimuReport) - 一款免费的数据可视化工具，报表和大屏设计，像搭建积木一样在线设计报表！功能涵盖，数据报表、打印设计、图表报表、大屏设计等！ 4 | 5 | - `flowchart` [2021年10种最佳在线流程图软件](https://thedigitalprojectmanager.com/flowchart-software/) 6 | - [Creately](https://creately.com) - Best collaborative flowchart software with live video conferencing 7 | - [Miro](https://miro.com) - Best free flowchart software 8 | - [Microsoft Visio](https://www.microsoft.com/zh-cn/microsoft-365/visio/microsoft-visio-plans-and-pricing-compare-visio-options) - Best flowchart software for Windows 9 | - [Gliffy](https://www.gliffy.com) - Best flowchart tool for Confluence & Jira (native Atlassian integrations) 10 | - [Edraw Max](https://www.edrawsoft.com/edraw-max) - Best all-purpose diagramming software 11 | - [ConceptDraw Diagram](https://www.conceptdraw.com/products/drawing-tool) - Best flowchart software download (buy a one-time license) 12 | - [Cacoo](https://cacoo.com) - Best online flowchart software for real-time team collaboration 13 | - [Terrastruct](https://terrastruct.com) - Best flowchart tool for software development 14 | - [VisualParadigm Online](https://online.visual-paradigm.com) - Best flowchart software for agile software development & data analytics 15 | - [Draw.io](https://app.diagrams.net) - Best easy to use flowchart freeware 16 | 17 | - `chrome` `tools` [Replace Google CDN](https://github.com/justjavac/ReplaceGoogleCDN) - 一个 Chrome 插件：将 Google CDN 替换为国内的。 18 | 19 | - `wasm` [2021.05.15 北京站 WebAssembly meetup](https://www.huodongxing.com/event/6596259780300)，议题包含 20 | - 基于WebAssembly的人像分割技术在RTC领域的应用 21 | - 用 Serverless WebAssembly 解决 SaaS 平台的定制化难题 22 | - 基于 Wasm 的 ServiceMesh 扩展 23 | - WebAssembly 踩坑记 —— Lightning Talk 24 | 25 | - `mac` [awesome-mac](https://github.com/jaywcjlove/awesome-mac) - 收集各种类别非常好用的 Mac 应用程序、软件以及工具。 26 | 27 | - `js` [Clean Code Applied to JavaScript: Series](https://carloscaballero.io/clean-code-applied-to-javascript-series) - js代码整洁之道系列 28 | 29 | - `ts` [TypeScript整理](https://www.yuque.com/docs/share/329d509d-2adf-4206-b4f3-ba058b515569) - 好用实用的TS技巧、理念、工具。 30 | -------------------------------------------------------------------------------- /src/index.md: -------------------------------------------------------------------------------- 1 | # MDH • 前端情报 2 | 3 | **`通知：`** 4 | 5 | 1. 放弃更新，群已名存实亡。信息源变成某几个人的单一输出，消费远远大于生产。 6 | 2. 本人精力有限，目前忙于其他事情，有想继续维护的朋友，可以联系我。 7 | 3. 虽然此网站不再更新，但是我的个人项目和此项目有重合度。有兴趣的朋友可以关注 [《浮之静》](https://github.com/lencx/fzj/discussions) 8 | 9 | --- 10 | 11 | * 代号：`MDH(make developer happier)` 12 | * 发起人: [chencheng (云谦)](https://github.com/sorrycc) 13 | * 仓库创建人: [lencx](https://github.com/lencx) 14 | * 资源提供人: [贡献者列表](https://github.com/fe-cool/news/blob/main/contributors.md) 15 | * 贡献: [我要贡献](https://github.com/fe-cool/news#%E8%B4%A1%E7%8C%AE) 16 | 17 | 🤝 不在群中的成员，也可以通过 [Discussions](https://github.com/fe-cool/news/discussions/5) 自荐信息，或提PR，期待优秀的你加入 18 | 19 | ## 规则 20 | 21 | * 👋 分享前端信息为主，八卦闲聊为辅 22 | * 📝 每周至少发一条信息 23 | * 🥺 长期不发言者会被踢出群 24 | 25 | ## 分享内容要求 26 | 27 | * ✅ 一手信息为主，名称 + 描述 + 感受的格式 28 | * 🙅 不发重复信息 29 | * 🈲️ 广告（推广自己的项目也算） 30 | * 🈲️ 招聘 31 | 32 | ## 情报收集 33 | 34 | ```bash 35 | # 信息收集初步构想 36 | fe-cool/news 37 | |- [精选] # awesome 38 | |- [news] # year 39 | | |- [2021] # year 40 | | | |- [04] # month 41 | | | | |- 20 # day 42 | | | | `- .. 43 | | | `- ... 44 | | `- ... 45 | ` ... 46 | 47 | # 希望可以把收集到的信息通过多次分类 48 | # 把最实用的工具，指南，APP，资讯类整理出来 49 | # 做成一个推荐集合(即精选，文章类暂时排除在外) 50 | # 文章可以在原始信息中进行查看 51 | [2021/04/20.md] --> [2021/04/toc.md] --> [Awesome] 52 | [day - 原始信息] --> [month - 汇总筛选] --> [awesome - 推荐] 53 | ``` 54 | 55 | * 按日期进行原始信息收集，并在信息前打标签 56 | * 资讯(`news`) 57 | * 工具(`tools`): `chrome`，`docs`，`dev` 等 58 | * 前端(`fe`): `node`, `webpack`, `vite`, `vue`, `react`等 59 | * VS Code(`vsc`) 60 | * WebAssembly(`wasm`) 61 | * 编程语言(`lang`): `rust`，`go`，`python` 等 62 | * 其他(`other`): 难以界定的统一分类到其他 63 | * [月底对本月信息汇总分类(对信息进行筛选)](https://github.com/fe-cool/news/blob/main/guidelines.md#%E6%9C%88%E6%B1%87%E6%80%BB) 64 | * 汇总状态 65 | * `汇总中...` - 📅 起止日期 66 | * `汇总完成` - 📅 起止日期 67 | 68 | ## 项目初衷 69 | 70 | 此活动是由[云谦](https://github.com/sorrycc)在微信朋友圈发起的，因为后入群的人其实是看不到之前人的分享的，微信群外的人更不可能看到。既然是在做有意义的事情，就想把这些东西沉淀下来，可以去长时间翻阅。`“卷”`这个词相信也是最近一两年在技术圈看到最多的一个字。`没有信息会让人变得焦虑，💥信息爆炸会让人变得更加焦虑。唯一可以让自己变得不焦虑的途径，就是静下心来，按照自己的节奏，持之以恒。`此项目创建的初衷也并非是为了让大家变得焦虑，而是希望站在一个更广阔的角度，去对信息做一层筛选。因为目前所有的收集是群友自荐，自己对文章和技术的理解，都是原始信息记录，还望大家酌情参考。 71 | 72 | --- 73 | 74 | CC0-1.0 License | Copyright © 2021 fe-cool 75 | -------------------------------------------------------------------------------- /src/awesome/app.md: -------------------------------------------------------------------------------- 1 | # Application 2 | 3 | ## Cross-platform 4 | 5 | * [Typora](https://www.typora.io) - A new way to read & write Markdown 6 | * [Notion](https://www.notion.so/) - All-in-one workspace 7 | * [SourceTree](https://www.sourcetreeapp.com/) - Simplicity and power in a beautiful Git GUI. 8 | * [f.lux](https://justgetflux.com/) - Software to warm up your computer display at night, to match your indoor lighting. 9 | 10 | ## MacOS 11 | 12 | * [awesome-mac](https://github.com/jaywcjlove/awesome-mac) -  Now we have become very big, Different from the original idea. Collect premium software in various categories. 13 | * [CheatSheet](https://www.mediaatelier.com/CheatSheet) - Know your short cuts 14 | * [Xnip](https://xnipapp.com/) - Handy Screenshot App for Mac 15 | * [Bob](https://github.com/ripperhe/Bob) - Bob 是一款 Mac 端翻译软件，支持划词翻译、截图翻译以及手动输入翻译。 16 | * [thor](https://github.com/gbammc/Thor) - Switch the right application ASAP. 17 | * [Runcat](https://apps.apple.com/cn/app/runcat/id1429033973?mt=12) - The cat takes up residence in your Mac's menu bar, and he just keeps running! 18 | * [Kap](https://getkap.co) - An open-source screen recorder built with web technology 19 | * [ImageOptim](https://imageoptim.com/mac) - Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality. 20 | * [MarginNote](https://www.marginnote.com/) - A brand new e-reader to better study and digest your books. 21 | * [Things](https://culturedcode.com/things) - The all-new Things. Your to-do list for Mac & iOS 22 | * [iStat Menus](https://setapp.com/apps/istat-menus) - An advanced system monitor for your menubar. 23 | * [iTerm2](https://iterm2.com/) - iTerm2 is a replacement for Terminal and the successor to iTerm. 24 | * [Maccy](https://maccy.app/) - Clipboard manager for macOS which does one job - keep your copy history at hand. Period. 25 | * [Hidden Bar](https://github.com/dwarvesf/hidden) - An ultra-light MacOS utility that helps hide menu bar icons 26 | * [Rectangle](https://github.com/rxhanson/Rectangle) - Move and resize windows on macOS with keyboard shortcuts and snap areas. 27 | * [Dropover](https://dropoverapp.com/) - Dropover is a utility that makes it easier to manage and move content between folders, applications, windows and workspaces using Drag and Drop. 28 | 29 | ## Windows 30 | -------------------------------------------------------------------------------- /src/2021/04/29.md: -------------------------------------------------------------------------------- 1 | # 2021.04.29 2 | 3 | - `nextjs` [Next.js 10.2](https://nextjs.org/blog/next-10-2) - next.js 发布 [10.2](https://github.com/vercel/next.js/releases/tag/v10.2.0) 4 | 1. 默认 webpack 5 5 | 2. [提升启动时间 20%，可惜没看到 20倍提速的发布](https://twitter.com/shuding_/status/1378086219708473344) 6 | 3. 改进响应式（mac 可通过辅助工具-旁白开启验证） 7 | 4. [引入新的 babel-loader 提升 hmr 时间，通过 experimental flag 开启](https://github.com/vercel/next.js/pull/23760) 8 | 5. webpack 作者 [Tobias Koppers](https://github.com/sokra) 加入 next.js 9 | 10 | - `vite` `webpack` [Why We Switched From Webpack To Vite?](https://blog.replit.com/vite) - 快！ 11 | 12 | - `nextjs` [Build a SaaS Platform with Stripe](https://jonmeyers.io//blog/build-a-saas-platform-with-stripe) - 技术栈：Next.js + Auth0 + prisma + stripe + tailwindcss 13 | 14 | - `redux` [redux 发布 4.1](https://github.com/reduxjs/redux/releases/tag/v4.1.0) - 通过提取 error code，让体积从 2.6K 减少到 1.6K（min+gz） 15 | 16 | - `fe` [影响了一代代前端人的 20 个里程碑式的顶级开源项目](https://juejin.cn/post/6955445902693629959) 17 | 18 | - `other` [This Month on CodeSandbox - April 2021 Edition](https://codesandbox.io/post/this-month-on-codesandbox-april-2021) 19 | 20 | - `css` [windicss](https://github.com/windicss/windicss) - Next generation utility-first CSS framework. 类 tailwindcss 21 | 22 | - `react` [React 视频播放组件](https://github.com/vimond/replay) 23 | 24 | - `angular` [DevUI Admin](https://gitHub.com/DevCloudFE/ng-devui-admin) - 开源的企业级中后台解决方案，基于 Angular 25 | 26 | - `babel` [回顾 babel 6和7，来预测下 babel 8](https://juejin.cn/post/6956224866312060942) 27 | 28 | - `babel` [Babel 8 Release Plan](https://github.com/babel/babel/issues/10746) 29 | 30 | - `tools` [transform](https://transform.tools/) - 支持各种代码转化的工具，SVG、JSON、TS、GraphQL、CSS、SQL，只要你能想到的这里都有。光 JSON 就可以转化为十几种代码格式，如把 JSON 转化成 Flow、Go、GraphQL、Typescript、Kotlin、MySQL、YAML等。本项目开源，你可以通过代码学习到它是如何进行格式转换的。 31 | 32 | - `vue3` `markdown` [vue3-markdown-it](https://github.com/JanGuillermo/vue3-markdown-it) - 一个非常棒的 Vue 3 markdown-it 组件，可以支持外部插件 33 | 34 | - `react` [React#31 error，让我熬夜让我秃](https://zhuanlan.zhihu.com/p/367874784) - 一次精彩的React线上查错 35 | 36 | - `flowchart` [code-to-graph](https://github.com/crubier/code-to-graph) - Transforms code (JS) into graphs (graphviz, mermaid flowchart, ...) 37 | 38 | - `watermark` [@pansy/watermark](https://github.com/pansyjs/watermark) - watermark component 39 | -------------------------------------------------------------------------------- /src/2021/04/19.md: -------------------------------------------------------------------------------- 1 | # 2021.04.19 2 | 3 | - `react` [329 道 react 面试题](https://github.com/sudheerj/reactjs-interview-questions)，质量还挺高 4 | 5 | - `ts` `docs` 新出的 [TypeScript 小册](https://devblogs.microsoft.com/typescript/announcing-the-new-typescript-handbook/)，微软最近出了好多教程 6 | 7 | - `rust` 微软的[Rust入门教程](https://docs.microsoft.com/zh-cn/learn/paths/rust-first-steps/)，确实如云谦所说，微软最近搞了好多教程 8 | 9 | - `chrome` `docs` chrome90增加[shadow dom的SSR支持](https://web.dev/declarative-shadow-dom)，具体可见博文 (撰文作者之一是Miller preact作者 10 | 11 | - `c++` [Duilib](https://github.com/duilib/duilib) 一个Windows下免费开源的DirectUI界面库，腾讯 12 | 网易都在用 13 | 14 | - `vue` `ts` `docs` 知乎问题：[《为什么我感觉 Vue 3 TypeScript 还是不行？讨论关于 Vue3 + TypeScript 的体验》](https://www.zhihu.com/question/453332049) 15 | 16 | - `git` `tools` [Git教程](https://learngitbranching.js.org/)，"Learn Git Branching"是在web上学习Git最直观、最具交互性的方式；通过挑战关卡，逐步学习Git的特性，使学习过程具有乐趣 17 | 18 | - `js` `tools` [yjs](https://docs.yjs.dev/)，一个新的基于CRDT的开源数据协同框架，常用来做在线编辑产品 19 | 20 | - `vite` `deno` 借助vite探索性的实现了在deno中[以非url的方式引入一个包](https://mp.weixin.qq.com/s/sDVTVIRPXkcQO-INAUsjJA) 21 | 22 | - `js` `news` [Top JavaScript Trends to Watch in 2021](https://medium.com/front-end-weekly/top-javascript-trends-to-watch-in-2021-4aa504a5b9d0) 23 | 24 | - `vite` `gql` vite 插件 [vite-plugin-vue-gql](https://github.com/wheatjs/vite-plugin-vue-gql) 可以轻松在 vue 文件编写 graphql 25 | 26 | - `go` 依赖性，高性能的[函数计算服务引擎](https://github.com/baidu/EasyFaaS)。适用于边缘计算、loT等，最近开源。 27 | 28 | - `devops` [Devops元素周期表](https://devops.phodal.com/)。包含了Devops案例学习，模式原则，最佳实践等等 29 | 30 | - `js` 一个帮你[分析如果代码全部用 Modern JavaScript 发布](https://estimator.dev/#zhihu.com)，可以节省多少开销的网站 31 | 32 | - `docs` 循序渐进的[指南和路径](https://roadmap.sh)，以学习不同的工具或技术，包含前端，后端，运维，安卓，数据库，react等 33 | 34 | - `docs` 腾讯ISUX：[探索“流畅感”—谈手势动效体验设计](https://isux.tencent.com/articles/smoothness-of-interface-design.html) 35 | 36 | - `wasm` `docs` 面向初学者的一系列[webAssembly入门文章](https://blog.ttulka.com/learning-webassembly-series)，从代码示例到原理讲解，值得一看 37 | 38 | - `mermaid` `js` `markdown` [Mermaid](https://mermaid-js.github.io/mermaid/#/)可以使用文本和代码创建图。这简化了复杂图的维护。它是一个基于Javascript的图表绘制工具，可以用Markdown文本来定义各种复杂图表，流程图，顺序图，类图，甘特图，状态图，饼图等。 39 | 40 | - `react` [React Status 中文周刊 #36](https://mp.weixin.qq.com/s/u3fDS1iPh_tqzSKqbzcwrg) - 使用 Deno 构建 React 应用指南 41 | 42 | - `fe` `icons` [IconPark](https://github.com/bytedance/IconPark) - 字节跳动出品的高质量开源图标 43 | 44 | - `js` `eslint` 一个更好看的[ESLint formatter](https://github.com/fengzilong/eslint-formatter-mo)，可读性更好 45 | -------------------------------------------------------------------------------- /src/2021/04/17.md: -------------------------------------------------------------------------------- 1 | # 2021.04.17 2 | 3 | - `node` node 10 还有十几天就结束维护了，新开工具可以考虑默认 esm 4 | - [https://nodejs.org/en/about/releases](https://nodejs.org/en/about/releases) 5 | - [https://kentcdodds.com/blog/super-simple-start-to-es-modules-in-node-js](https://kentcdodds.com/blog/super-simple-start-to-es-modules-in-node-js) 6 | 7 | - `chrome` [chrome devtool 的技巧，可以重点看 4、5、8、12](https://blog.asayer.io/15-devtool-secrets-for-javascript-developers) 8 | 9 | - `other` [remix 启动只要 100ms，背后基于 esbuild，但还是很大优化空间，之前试过加个大型依赖热编译就慢了](https://twitter.com/ryanflorence/status/1383181615854092290) 10 | 11 | - `lowcode` [国内低代码平台(Low Code)，收集了国内外很多优秀的项目，还包含有“今日阅读”每天更新最新相关文章](https://github.com/taowen/awesome-lowcode) 12 | 13 | - `css` [Say Hello To CSS Container Queries - Ahmad Shadeed 解决 media query 不能覆盖的一些场景，不是所有场景都基于 viewport 或 screensize，有些需要基于 container 的尺寸决定子元素的渲染，作者给了一些具体的落地场景](https://www.instapaper.com/read/1404526005) 14 | 15 | - [Seam-Carving 算法的解析及 ts 实现 图片 resize 必备，作者讲得很详细，且后有 ts 干货。属于“有理有具体”的好文](https://trekhleb.dev/blog/2021/content-aware-image-resizing-in-javascript) 16 | 17 | - `chrome` [Chrome 90 发布，新技术 JPEG XL、CSS 容器查询](https://developer.chrome.com/blog/new-in-chrome-90) 18 | 19 | - `chrome` `debug` [一份Chrome调试技巧合集 涉及console network element source 等](https://www.frontendwingman.com/Chrome) 20 | 21 | - [如何在不接触原业务代码的情况下，对页面高扩展](https://github.com/alibaba/schema-plugin-flow) 22 | 23 | - `node` [新书情报，腾讯的imweb nodejs大佬theanarkh的《nodejs源码解析》宣布不上架，将于近日开源](https://mp.weixin.qq.com/s/uJA5A7hWBimS-8EMXRquEA) 24 | 25 | - `node` [标哥的nodejs源码解析](https://github.com/theanarkh/understand-nodejs) 26 | 27 | - [前端性能优化，很受用](https://github.com/alienzhou/fe-performance-journey) 28 | 29 | - `react` `vue` 在 React 中使用 Vue3 的 Composition API 30 | - [https://github.com/antfu/reactivue](https://github.com/antfu/reactivue) 31 | - [https://github.com/Lucifier129/react-use-setup](https://github.com/Lucifier129/react-use-setup) 32 | - [https://github.com/sl1673495/react-composition-api](https://github.com/sl1673495/react-composition-api) 33 | - [https://www.zhihu.com/question/378861485](https://www.zhihu.com/question/378861485) 34 | 35 | - `node` [将yarn捆绑node发行的一个PR，相关讨论已经被locked](http://github.com/nodejs/node/pull/37277) 36 | 37 | - `vsc` [将github更改为github1s可以查看编辑源码，相关链接](https://github1s.com) 38 | 39 | - `deno` [deno1.9发布了。新增特性：](https://deno.com/blog/v1.9) 40 | - 原生 HTTP/2 Web 服务器 41 | - 使用 serde_v8 更快地调用 Rust 42 | - 支持 Blob URL & 优化fetch 43 | - 在 LSP 中支持自动补全 import 44 | - 具有交互的权限提示 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MDH • 前端情报 2 | 3 | [![github pages](https://github.com/fe-cool/news/actions/workflows/deploy.yml/badge.svg?branch=main)](https://github.com/fe-cool/news/actions/workflows/deploy.yml) 4 | [![Lint Code Base](https://github.com/fe-cool/news/actions/workflows/linter.yml/badge.svg)](https://github.com/fe-cool/news/actions/workflows/linter.yml) 5 | [![gitee](https://img.shields.io/badge/Gitee-fe--cool/news-000?logo=gitee)](https://fe-cool.gitee.io/news) 6 | [![rss](https://img.shields.io/badge/RSS-fe--cool/news-000?logo=rss)](https://fe-cool.github.io/news/feed.xml) 7 | 8 | **`通知：`** 9 | 10 | 1. 放弃更新，群已名存实亡。信息源变成某几个人的单一输出，消费远远大于生产。 11 | 2. 本人精力有限，目前忙于其他事情，有想继续维护的朋友，可以联系我。 12 | 3. 虽然此网站不再更新，但是我的个人项目和此项目有重合度。有兴趣的朋友可以关注 [《浮之静》](https://github.com/lencx/fzj/discussions) 13 | 14 | --- 15 | 16 | * 代号：`MDH(make developer happier)` 17 | * 发起人: [chencheng (云谦)](https://github.com/sorrycc) 18 | * 仓库创建人: [lencx](https://github.com/lencx) 19 | * 资源提供人: [贡献者列表](./contributors.md) 20 | 21 | ## 规则 22 | 23 | * 👋 分享前端信息为主，八卦闲聊为辅 24 | * 📝 每周至少发一条信息 25 | * 🥺 长期不发言者会被踢出群 26 | 27 | ## 分享内容要求 28 | 29 | * ✅ 一手信息为主，名称 + 描述 + 感受的格式 30 | * 🙅 不发重复信息 31 | * 🈲️ 广告（推广自己的项目也算） 32 | * 🈲️ 招聘 33 | 34 | ## 情报收集 35 | 36 | ```bash 37 | # 信息收集初步构想 38 | fe-cool/news 39 | |- [精选] # awesome 40 | |- [news] # year 41 | | |- [2021] # year 42 | | | |- [04] # month 43 | | | | |- 20 # day 44 | | | | `- .. 45 | | | `- ... 46 | | `- ... 47 | ` ... 48 | 49 | # 希望可以把收集到的信息通过多次分类 50 | # 把最实用的工具，指南，APP，资讯类整理出来 51 | # 做成一个推荐集合(即精选，文章类暂时排除在外) 52 | # 文章可以在原始信息中进行查看 53 | [2021/04/20.md] --> [2021/04/toc.md] --> [Awesome] 54 | [day - 原始信息] --> [month - 汇总筛选] --> [awesome - 推荐] 55 | ``` 56 | 57 | * 按日期进行原始信息收集，并在信息前打标签 58 | * 资讯(`news`) 59 | * 工具(`tools`): `chrome`，`docs`，`dev` 等 60 | * 前端(`fe`): `node`, `webpack`, `vite`, `vue`, `react`等 61 | * VS Code(`vsc`) 62 | * WebAssembly(`wasm`) 63 | * 编程语言(`lang`): `rust`，`go`，`python` 等 64 | * 其他(`other`): 难以界定的统一分类到其他 65 | * [月底对本月信息汇总分类(对信息进行筛选)](./guidelines.md#%E6%9C%88%E6%B1%87%E6%80%BB) 66 | * 汇总状态 67 | * `汇总中...` - 📅 起止日期 68 | * `汇总完成` - 📅 起止日期 69 | 70 | ## 项目初衷 71 | 72 | 此活动是由[云谦](https://github.com/sorrycc)在微信朋友圈发起的，因为后入群的人其实是看不到之前人的分享的，微信群外的人更不可能看到。既然是在做有意义的事情，就想把这些东西沉淀下来，可以去长时间翻阅。`“卷”`这个词相信也是最近一两年在技术圈看到最多的一个字。`没有信息会让人变得焦虑，💥信息爆炸会让人变得更加焦虑。唯一可以让自己变得不焦虑的途径，就是静下心来，按照自己的节奏，持之以恒。`此项目创建的初衷也并非是为了让大家变得焦虑，而是希望站在一个更广阔的角度，去对信息做一层筛选。因为目前所有的收集是群友自荐，自己对文章和技术的理解，都是原始信息记录，还望大家酌情参考。 73 | 74 | ## 贡献 75 | 76 | * [贡献准则](./guidelines.md) 77 | * [快速开始](./getting-started.md) 78 | * [贡献者列表](./contributors.md) 79 | 80 | 🤝 不在群中的成员，也可以通过 [Discussions](https://github.com/fe-cool/news/discussions/5) 自荐信息，或提PR，期待优秀的你加入 81 | 82 | --- 83 | 84 | CC0-1.0 License | Copyright © 2021 fe-cool 85 | -------------------------------------------------------------------------------- /src/2021/04/28.md: -------------------------------------------------------------------------------- 1 | # 2021.04.28 2 | 3 | - `js` `blog` `react` [Gastby 发布 3.4](https://www.gatsbyjs.com/docs/reference/release-notes/v3.4/) - 包含生产环境的物理缓存、更快的 CSS 库 Fast Refresh 等 4 | 5 | - `react` [Keeping up with React Libraries](https://maxrozen.com/keeping-up-with-react-libraries) - 作者整理了一些他关注的 React 依赖，质量挺高。 6 | 7 | - `react` `animation` [framer/motion](https://github.com/framer/motion) - 基于 Framer Motion 实现进阶动画 8 | - [Advanced animation patterns with Framer Motion](https://blog.maximeheckel.com/posts/advanced-animation-patterns-with-framer-motion) 9 | 10 | - `js` `tools` 非 JavaScript 编译工具，已补充到第二个链接 11 | - [JS Tooling not in JS](https://github.com/RobinCsl/awesome-js-tooling-not-in-js) - A curated list of JavaScript tooling not written in JavaScript 12 | - [非 JavaScript 编译工具](https://github.com/sorrycc/awesome-f2e-libs#%E9%9D%9E-javascript-%E7%BC%96%E8%AF%91%E5%B7%A5%E5%85%B7) 13 | 14 | - `react` [why-did-you-render](https://github.com/welldone-software/why-did-you-render) - 通过 monkey patches React 来通知您可能可以避免的 re-renders，同时适用于 react-native 15 | 16 | - `dva` [Dumbo](https://juejin.cn/post/6955303774151786503) - 智能化 Dva 模块生成，阿里云的 D2C 方案 17 | 18 | - `other` [DX 是啥？](https://medium.com/swlh/what-is-dx-developer-experience-401a0e44a9d9) 19 | 20 | - `chrome` [mastering-chrome-devtools](https://github.com/jkup/mastering-chrome-devtools) - FrontEnd Master 新开 Chrome DevTool 课程的 PPT 21 | 22 | - `ios` `safari` [iOS 14.5 升级 Safari 到 14.1](https://firt.dev/ios-14.5/) - 大！幅！更！新！包括 PWA、top-level-await 等大量强劲功能，值得慢慢看和翻译 23 | 24 | - `other` [怎么才能有尤雨溪一半强，该怎么学习？](https://www.zhihu.com/question/456527668/answer/1857385102) 25 | 26 | - `css` [translate.css](https://www.transition.style/) - Drop-in CSS transitions 27 | 28 | - `flutter` [Flutter Boost3.0初探](https://www.yuque.com/xytech/flutter/mmz0e1) - 闲鱼 Flutter Boost 3，混合开发（闲鱼没有放弃flutter） 29 | 30 | - `taro` [Taro3](https://mp.weixin.qq.com/s/xFjVw23PaEer1g6vll8nlQ) - 支持更多UI框架（非完全支持） WEUI、Ant Design Mobile、VantUI 。 31 | 32 | - `rn` [美团做 React Native 性能优化的三个关键点](https://mp.weixin.qq.com/s/2D2l7NF0kmwAkfCI_PbZug) 33 | 34 | - `rn` [React Native 快凉了？Facebook 可不这样想](https://zhuanlan.zhihu.com/p/367781622) - React Native 架构升级介绍 35 | 36 | - `react` `ui` `chat` [ChatUI](https://chatui.io/) - 对话式交互应用UI库，达摩院开源作品 37 | 38 | - `blog` [FIRT](https://firt.dev) - Learn about Mobile and Web Development with Maximiliano Firtman's articles, notes and learning experiences. Progressive Web Apps, Web Performance, Android Apps, iOS Apps and more. 39 | 40 | - `jsbridge` [DSBridge-Android](https://github.com/wendux/DSBridge-Android) - H5加壳除了JsBridge，DSBridge也是蛮好用的 41 | 42 | - `js` [javascript-state-machine](https://github.com/jakesgordon/javascript-state-machine) - A javascript finite state machine library 43 | 44 | - `lowcode` [“行业毒瘤”低代码](https://mp.weixin.qq.com/s/nux9xJko6N1tLTK23-ZbzA) 45 | -------------------------------------------------------------------------------- /src/2021/04/20.md: -------------------------------------------------------------------------------- 1 | # 2021.04.20 2 | 3 | - `vsc` `app` 作者推荐[十个有用的vscode快捷键](https://dev.to/simonpaix/10-useful-vs-code-shortcuts-you-should-know-42m)，可以用来提高效率，但是常用快捷键还有很多，附上[windows](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)和[mac](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)快捷键表，配合快捷键提示[CheatSheet APP(mac)](https://www.mediaatelier.com/CheatSheet)效果更佳。 4 | 5 | - `css` [Real-world CSS vs. CSS-in-JS performance comparison](https://pustelto.com/blog/css-vs-css-in-js-perf) - 如果关心性能，不要用 runtime 的 css-in-js，less js = faster site，尤其是针对低端机来说。 6 | 7 | - `react` `wasm` [Telegram React](https://github.com/evgeny-nadymov/telegram-react)，基于 react、tdlib（Telegram Database Library） 和 webassembly。 8 | 9 | - `vite` [vite 发布 2.2](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#220-2021-04-19) - 支持配置 cacheDir，vite.config.ts 支持 async 返回，config 和 configResolved hook 支持 promise 等。 10 | 11 | - `react` [基于 immer 和 hooks 的数据流方案](https://github.com/lostpebble/pullstate) 12 | 13 | - `lang` [喵语翻译](https://github.com/miao-lang/miao-lang) - 将人类语言翻译为喵语言 14 | 15 | - `react` [react 样式方案](https://github.com/sultan99/stylin)，主要是通过 tag 提供类型支持和语法提示 16 | 17 | - `other` [GitHub Actions 被滥用挖矿](https://www.qbitai.com/2021/04/22837.html) 18 | 19 | - `rn` 目前我能找到比较优秀的可用的开源 [RN range-slider](https://github.com/githuboftigran/rn-range-slider) 组件，帮助我完成了需求。 20 | 21 | - `css` [CSS 奇技淫巧](https://github.com/chokcoco/iCSS) - 不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 CSS 细节。 22 | 23 | - `tools` [Photopea](https://github.com/photopea/photopea) 可能大家都用过，为了能在拓展业务（私活）上能用上imgcook，不管是哪家的设计图，动动手都能转成sketch，可能是ps的脚本太烂，大家都不愿意开发拓展。用这个工具把设计图转来转去，折腾下来，看自己感觉，可能有点还不如自己切图快。 24 | 25 | - `tools` 一个自动同步github fork代码的[pull机器人](https://probot.github.io/apps/pull) 26 | 27 | - `webpack` 手写[easy webpack](https://mp.weixin.qq.com/s/gW_2sDfX5o4wamoiZMsxCw) 帮助大家熟悉AST是什么东西。 28 | 29 | - `other` [从新生产资料到新战略资源](https://mp.weixin.qq.com/s/kTTcAERbopvNveTYUbAB3A) 30 | 31 | - `react` 让 react 脱颖而出的 7 个因素 - [youtube视频](https://www.youtube.com/watch?v=yLgq-Foc1EE)，[PPT](https://docs.google.com/presentation/d/1Q_BJD9oy9TdkdysxWW67b8GURaZF_awSKssGR8HI898/edit#slide=id.gce1d01b41a_0_4) 32 | 33 | - `docker` [docker图形工具](https://mp.weixin.qq.com/s/x9d0umPbUHkb2tNnSds5bQ) 34 | 35 | - `vue3` 尤雨溪在知乎热情问候网友，[vue3现阶段支持ts以及tsx的现况](https://www.zhihu.com/answer/1844784032) 36 | 37 | - `fe` 最新的[前端框架性能对比](https://mp.weixin.qq.com/s/6Oygy93y9NW0VkRD5HRVkg)，能打架就别吵吵。 38 | 39 | - `fe` `desktop` [WinBox](https://github.com/nextapps-de/winbox)是用于Web的专业HTML5窗口管理器：轻巧，性能出色，无依赖项，完全可自定义，支持最大化，最小化，自由拉伸及拖动等。 40 | 41 | - `other` [什么是函数式编程思维？](https://www.zhihu.com/question/28292740/answer/612467700) 42 | 43 | - `js` [用于图布局的JS库](https://github.com/dagrejs/dagre) 44 | 45 | - `logo` [个人博客logo设计](https://www.logoly.pro/#/) 46 | 47 | - `ide` [web IDE](http://remix.hubwiz.com/#optimize=false&version=soljson-v0.5.1+commit.c8a2cb62.js) - 在线写合约，做区块链的前端同学可参考 48 | 49 | - `tools` [moiva.io](https://moiva.io) - 工具类站点，可用于评估和比较类库，寻找替代库 50 | -------------------------------------------------------------------------------- /src/2021/05/toc.md: -------------------------------------------------------------------------------- 1 | # 2021.05 2 | 3 | `汇总中...` - 📅 *2021.05.01 ~ 2021.05.14* 4 | 5 | ## Tools 6 | 7 | - [Rome](https://rome.tools) - Rome is a linter, compiler, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS. 8 | - [slidev](https://github.com/slidevjs/slidev) - Presentation Slides for Developers (Public Beta 🎉) 9 | - [swimlanes.io](https://swimlanes.io/) - Swimlanes.io is a simple free online tool for making sequence diagrams 10 | - [Preset](https://preset.dev/) - A command line tool for kickstarting your application's development by applying presets on top of it. 11 | - [cusdis](https://github.com/djyde/cusdis) - lightweight, privacy-friendly alternative to Disqus. 12 | - [ChaosBlade](https://github.com/chaosblade-io/chaosblade) - 阿里巴巴开源的一款简单易用、功能强大的混沌实验注入工具 13 | - [uncode](https://github.com/inherd/uncode/) - Uncode 是一个面向云研发时代设计的下一代概念性 IDE。 14 | - [JimuReport](https://github.com/zhangdaiscott/JimuReport) - 一款免费的数据可视化工具，报表和大屏设计，像搭建积木一样在线设计报表！功能涵盖，数据报表、打印设计、图表报表、大屏设计等！ 15 | - [10 Best Online Flowchart Software Of 2021](https://thedigitalprojectmanager.com/flowchart-software/) 16 | - [Creately](https://creately.com) - Best collaborative flowchart software with live video conferencing 17 | - [Miro](https://miro.com) - Best free flowchart software 18 | - [Microsoft Visio](https://www.microsoft.com/zh-cn/microsoft-365/visio/microsoft-visio-plans-and-pricing-compare-visio-options) - Best flowchart software for Windows 19 | - [Gliffy](https://www.gliffy.com) - Best flowchart tool for Confluence & Jira (native Atlassian integrations) 20 | - [Edraw Max](https://www.edrawsoft.com/edraw-max) - Best all-purpose diagramming software 21 | - [ConceptDraw Diagram](https://www.conceptdraw.com/products/drawing-tool) - Best flowchart software download (buy a one-time license) 22 | - [Cacoo](https://cacoo.com) - Best online flowchart software for real-time team collaboration 23 | - [Terrastruct](https://terrastruct.com) - Best flowchart tool for software development 24 | - [VisualParadigm Online](https://online.visual-paradigm.com) - Best flowchart software for agile software development & data analytics 25 | - [Draw.io](https://app.diagrams.net) - Best easy to use flowchart freeware 26 | - [Replace Google CDN](https://github.com/justjavac/ReplaceGoogleCDN) - 一个 Chrome 插件：将 Google CDN 替换为国内的。 27 | 28 | ## Open Source 29 | 30 | - [FingerprintJS](https://github.com/fingerprintjs/fingerprintjs) - Browser fingerprinting library with the highest accuracy and stability. 31 | - [inspx](https://github.com/raunofreiberg/inspx) - Pixel perfect layout inspection. 32 | - [mantine](https://github.com/mantinedev/mantine) - React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience 33 | - [React-Toastify](https://github.com/fkhadra/react-toastify) - React notification made easy 🚀 ! 34 | - [Fish Design](https://github.com/NSFI/ppfish-components) - 面向B端设计的企业级UI组件库 35 | 36 | ## Guide 37 | 38 | - [Modern CSS Solutions for Old CSS Problems](https://moderncss.dev) - A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 13+ years. 39 | - [A practical guide to TypeScript decorators](https://blog.logrocket.com/a-practical-guide-to-typescript-decorators/) 40 | 41 | ## Weekly 42 | 43 | - [sorrycc/weekly](https://github.com/sorrycc/weekly) - 前端周刊，每周一发布。 44 | 45 | ## WebAssembly 46 | 47 | - [Using asynchronous web APIs from WebAssembly](https://web.dev/asyncify) 48 | 49 | ## MacOS 50 | 51 | - [awesome-mac](https://github.com/jaywcjlove/awesome-mac) -  Now we have become very big, Different from the original idea. Collect premium software in various categories. 52 | -------------------------------------------------------------------------------- /src/2021/04/15.md: -------------------------------------------------------------------------------- 1 | # 2021.04.15 2 | 3 | - `tools` [natto.dev，2d 可视化编程，感觉适用于新手教学和流程编排](https://natto.dev/example/1dcbeb7583624bf19d69b9942271a703) 4 | 5 | - `vue` [vueconfus 尤雨溪的ppt，2021Q2以后安装vue，将默认安装vue3](https://twitter.com/youyuxi/status/1382373548317147147?s=05) 6 | - [ppt地址](https://docs.google.com/presentation/d/1Lu1X6dyofyWqE6lpWsdUAkHMWm9pB6A9bs187iIUin4/mobilepresent?slide=id.p) 7 | 8 | - `pwa` [Your PWA is going to break in August 2021](https://link.medium.com/S91NRcCGsfb) 9 | 10 | - BarcodeDetector 结合 navigator.getUserMedia（摄像头） 可用于识别二维码 11 | - [https://twitter.com/stackblitz/status/1382337979767742464](https://twitter.com/stackblitz/status/1382337979767742464) 12 | - [https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector) 13 | - [https://barcode-detector.stackblitz.io/](https://barcode-detector.stackblitz.io/) 14 | 15 | - `react` [React Summit 4.14 - 4.16，有钱的可付费看，没钱的可像我一样搜关键字了解内容](https://remote.reactsummit.com) 16 | 17 | - `tools` nx，看了介绍视频，挺成熟的一个复杂项目管理工具，不仅仅是 monorepo，还解了 monorepo 的一些潜在问题，值得深入了解下 18 | - [https://github.com/nrwl/nx](https://github.com/nrwl/nx) 19 | - [https://www.youtube.com/watch?v=E188J7E_MDU](https://www.youtube.com/watch?v=E188J7E_MDU) 20 | 21 | - `css` headless ui 发布 1.0，无样式的组件库，和 tailwindcss 结合使用，但看文档没看出是如何结合的。 22 | - [https://blog.tailwindcss.com/headless-ui-v1](https://blog.tailwindcss.com/headless-ui-v1) 23 | - [https://headlessui.dev/](https://headlessui.dev/) 24 | - [https://github.com/tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui) 25 | 26 | - `deno` deno 1.9 支持 import completions in the lsp 如果未来是 bundless，这和 remote dts 应该都会成为 esm cdn 的基础设施 27 | - [https://deno.com/blog/v1.9#import-completions-in-the-lsp](https://deno.com/blog/v1.9#import-completions-in-the-lsp) 28 | - [https://docs.skypack.dev/skypack-cdn/code/deno#hello-deno](https://docs.skypack.dev/skypack-cdn/code/deno#hello-deno) 29 | - [https://github.com/denoland/vscode_deno/blob/main/docs/ImportCompletions.md](https://github.com/denoland/vscode_deno/blob/main/docs/ImportCompletions.md) 30 | 31 | - `docs` [mdbook是由rust编写的静态网站生成器，速度极快，支持多主题，LaTex，mermaidjs，导出pdf，插件等，功能强大。](https://github.com/rust-lang/mdBook) 32 | 33 | - [Demos for different Houdini APIs](https://github.com/GoogleChromeLabs/houdini-samples) 34 | 35 | - `news` [印记中文 - React Status Weekly](https://docschina.org/weekly/react/docs) 36 | 37 | - `react` [@pansy/react-amap 高德地图的React封装，提供完整的高德类型定义，丝滑般的开发体验。](https://github.com/pansyjs/react-amap) 38 | 39 | - `js` `chrome` [Feature: ES Modules for service workers ('module' type option)](https://www.chromestatus.com/features/4609574738853888) 40 | - [Chrome 91 版本支持说明文档](https://docs.google.com/document/d/1SeQ085YdBTtW3D_ygSpO0Wz2DAe8QiS1gj37IG5lstg/edit#) 41 | 42 | - `chrome` Chrome 90 值得关注的点包括 1) overflow: clip 2) 声明式的 shadow dom，适用于 ssr 43 | - [https://developer.chrome.com/blog/new-in-chrome-90/](https://developer.chrome.com/blog/new-in-chrome-90/) 44 | - [https://www.youtube.com/watch?v=h3MONldIoNM](https://www.youtube.com/watch?v=h3MONldIoNM) 45 | - [https://web.dev/declarative-shadow-dom/](https://web.dev/declarative-shadow-dom/) 46 | 47 | - `tools` [Comparing the New Generation of Build Tools，作者对比了 esbuild、snpwpack、vite 和 wmr，功能上 vite 应该是最全的，snowpack 紧随其后，wmr 定位是原型工具，esbuild 其实不应该放到这里比，定位不同](https://css-tricks.com/comparing-the-new-generation-of-build-tools) 48 | 49 | - `webpack` [webpack 5.33，支持针对不同 entry 配置不同的 publicPath，暂时想不到应用场景](https://github.com/webpack/webpack/releases/tag/v5.33.0) 50 | 51 | - `webpack` [之前看webpack源码，还发现entry的隐藏技能。。支持entry 是一个 promise](https://github.com/webpack/webpack/blob/master/lib/DynamicEntryPlugin.js) 52 | 53 | - `fe` `other` 一个关于控制异步函数并发运行的方法库。 54 | - [https://github.com/sindresorhus(作者)](https://github.com/sindresorhus) 55 | - [https://github.com/sindresorhus/p-limit(仓库)](https://github.com/sindresorhus/p-limit) 56 | 57 | - `fe` `other` [The Complete Guide to Full Stack Ethereum Development，以太坊开发指南，刚听完偏右分享完这个，还是挺有意思的，生态很完整](https://dev.to/dabit3/the-complete-guide-to-full-stack-ethereum-development-3j13) 58 | -------------------------------------------------------------------------------- /src/2021/04/21.md: -------------------------------------------------------------------------------- 1 | # 2021.04.21 2 | 3 | - `fe` `guide` [现代JavaScript教程](https://javascript.info) 4 | 5 | - `react` `threejs` 酷炫的幻灯片效果，基于 @react-three 和 react-use-gesture，[demo](https://qf8d0.csb.app) 及 [源码](https://codesandbox.io/s/qf8d0) 6 | 7 | - `node` [node 发布 16 官方 darwin-arm64 包](https://nodejs.medium.com/node-js-16-available-now-7f5099a97e70)，不用手动编译了，[RegExp match indices，Atomics.waitAsync](https://v8.dev/features/tags/node.js-16) 等 8 | 9 | - `other` [Refined Github 插件支持 Safari](https://apps.apple.com/app/id1519867270) 10 | 11 | - `vue3` vue3可以跑vue2的组件库了，impossible！！！ 12 | 13 | - `flutter` [基于 Flutter 的 Web 渲染引擎「北海」正式开源](https://mp.weixin.qq.com/s/tnHbceedNsoKgMrgoTyyuA)，[官网](https://openkraken.com) 14 | 15 | - `js` [JS 的Class 不只是一个语法糖，作者用多个代码示例对比了 es5 与 es6 的区别](https://webreflection.medium.com/js-classes-are-not-just-syntactic-sugar-28690fedf078) 16 | 17 | - `micro-frontends` [面向大型系统的微前端解决方案](https://ice-lab.github.io/icestark) 18 | 19 | - `fe` `game` [可能是前端同学必备的2D游戏优互动入门基础知识](https://mp.weixin.qq.com/s/2xWOjFMQW92_CU88If4q7g) 20 | 21 | - `chrome` 每天爬 Github Trending热门Repo的[chrome拓展程序](https://github.com/zhuowenli/githuber) 22 | 23 | - `other` [云空调](https://www.yunyoujun.cn/air-conditioner)，[github repo](https://github.com/YunYouJun/air-conditioner) 24 | 25 | - `webgl` [WebGL 理论基础](https://webglfundamentals.org) - 一系列文章，从零开始，并有大量代码示例 26 | 27 | - `js` 2022第一个新语法 [Class Fields](https://github.com/tc39/proposals/blob/master/finished-proposals.md) 28 | 29 | - `browser` [介绍浏览器幕后的工作原理](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/) 30 | 31 | - `wasm` [Ant Design of Blazor](https://ant-design-blazor.gitee.io/zh-CN/) - WebAssembly 版本的antDesign，语法类似 tsx。 32 | 33 | - `react` `hook` [use-what-changed](https://github.com/simbathesailor/use-what-changed) - 一个便于调试react hook中依赖项列表变化的小工具 34 | 35 | - `other` [2020 js调查报告](https://2020.stateofjs.com/en-US/) 36 | 37 | - `blog` [TypeScript 和 React 方面的专家](https://fettblog.eu/articles) 38 | 39 | - `css` [《CSS 揭秘》](https://lea.verou.me) 作者的博客 40 | 41 | - `svelte` 擅长前端编译，有[从零编译 svelte 实现的系列](https://lihautan.com) 42 | 43 | - `other` 一个[可以测试刷新率的网站](https://testufo.com/framerates#count=3&background=none&pps=1200) 44 | 45 | - `other` [永久记录 米国政府JK全世界网络信息的真相](https://a.temporaryrecord.com) 46 | 47 | - `fe` [前端领域模型，重构前端研发模式](https://developer.aliyun.com/article/783668) 48 | 49 | - `book` 发现了这样一本免费电子书 [《理解WebKit和Chromium》](https://www.ituring.com.cn/book/1210) 50 | 51 | - `rn` [react-native 工程最佳实践](https://gilshaan.medium.com/react-native-coding-standards-and-best-practices-5b4b5c9f4076) 52 | 53 | - `react` `graphql` 卖 $450 的 [React + Next.js + GraphQL](https://bedrock.mxstbr.com) 脚手架 54 | 55 | - `orm` [Prisma tools are ready for production today!](https://www.prisma.io/blog/prisma-the-complete-orm-inw24qjeawmb) 56 | - Prisma 官方的工具链今天 production ready 了。 57 | - Prisma 是一个很强大的面向现代前端的 ORM，上文提到的 $450 脚手架 Bedrock 也有集成它。再有如果前面分享里所说的前端领域模型能够展开，配合 Prisma 实现 adapters 应该是个不错的选择。 58 | 59 | - `preact` [macos in preact](https://macos.vercel.app/?continueFlag=79c07017fa017269cd2fd54d2630adff) - [源码](https://github.com/puruvj/macos-web) 60 | 61 | - `tools` [openbase](https://openbase.com) - 工具类站点，寻找类库的工具 62 | 63 | - `news` [飞猪前端团队](https://zhuanlan.zhihu.com/fliggy) 64 | 65 | - `blog` [Kent C. Dodds blog](https://kentcdodds.com/blog) 66 | 67 | - `news` [JavaScript文章精选月刊](https://github.com/hijiangtao/javascript-articles-monthly) 68 | 69 | - `news` [ECMAScript双月报告](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg4MjE5OTI4Mw==&action=getalbum&album_id=1509426251277631489&scene=173&from_msgid=2247487220&from_itemidx=1&count=3#wechat_redirect 70 | ) 71 | 72 | - `rss` 如果你的信息流中心主要是 RSS，那么关注 Github 的一些消息，可以使用官方提供的 RSS： 73 | - 仓库 releases: `https://github.com/:owner/:repo/releases.atom` 74 | - 仓库 commits: `https://github.com/:owner/:repo/commits.atom` 75 | - 用户动态: `https://github.com/:user.atom` 76 | 77 | - `other` [vis-network](https://github.com/datastorm-open/visNetwork) - 网络可视化的R包，使用的是vis.js，[中文文档](https://www.ame.cool/pages/a7d858/#network-%E5%85%B3%E7%B3%BB%E5%9B%BE) 78 | 79 | - `fe` [不要以 DRY 之名，发明低代码 DSL 去残害你的同事](https://zhuanlan.zhihu.com/p/357411780) 80 | 81 | - `fe` [当浏览器全面禁用三方 Cookie](https://juejin.cn/post/6844904128557105166) 82 | 83 | - `lowcode` [云凤蝶](https://www.yuque.com/paranoidjk/blog/keufo1#5q1Hg) - 低代码搭建平台 , lowcode前端的一种技术实现方案 84 | 85 | - `svg` [25个SVG渐进教程](https://codepen.io/HunorMarton/pen/PoGbgqj) 86 | 87 | - `js` [pytorchjs](https://github.com/raghavmecheri/pytorchjs) - JS版的深度学习库，集成了常见的深度学习模型，可以在前端跑一些简单的模型 88 | 89 | - `css` [仅使用CSS就可以提高页面渲染速度的4个技巧](https://blog.zhangbing.site/2020/12/28/improve-page-rendering-speed-using-only-css/) 90 | 91 | - `react` [从中断机制看 React Fiber 技术](https://jelly.jd.com/article/603d96596d84e3013e885482) 92 | 93 | - `rss` 是一个[开源的在线 RSS 阅读服务](https://ohmyrss.com)，旨在为 IT 从业者提供一个优质的学习圈子。 94 | 95 | --- 96 | 97 | `🎉 彩蛋`: 如何信息获取？ 98 | 99 | - `云谦`：我的信息来源主要这些 100 | 1. twitter 新建个 list 关注国内外前端大牛，然后按 top 排序 101 | 2. github 1) 通过 watch > custom > Releases 订阅感兴趣库的 release 信息 2) follow 一些人 102 | 3. 邮箱订阅各种 weekly 邮件列表 103 | 4. rss 订阅，来源很杂 104 | 信息流的方式基本没变，可参考两年前花的图，[《2019-04-sorrycc-我的输入信息流》](https://www.yuque.com/docs/share/78603db2-1dfc-47ad-9f47-1d2a5d6cd6e4?#) 105 | 106 | - `xiaohuoni`: 我的信息输入较少，更多喜欢从纸质书籍上得到信息。 107 | 1. 当当图书推荐榜-优先计算机，语言类。 108 | 2. github 首页，主要是通过关注的人的动态，还有explore里面的推荐 109 | 3. dev.to 通过 tags 过滤，也关注热度榜单。dev开源之前是我的主要信息来源。一直想着做一个国内站点，开源的时候，看了一下技术栈与我掌握的差异太大。反而连这个网站都少上了。 110 | 4. 云谦早报和他个人动态现在是我的主要信息来源。 111 | 5. 阮一峰的周报，issues区有很多信息 [ruanyf/weekly](https://github.com/ruanyf/weekly/issues) 112 | 113 | - `浩明`: 我的信息来源主要这几个博客和平台 114 | 1. github 上 follow 的动态 115 | 2. [Jake Archibald](https://jakearchibald.com) 博客 116 | 3. [Dan Abramov](https://overreacted.io) 博客 117 | 4. [David Walsh](https://davidwalsh.name) 博客 118 | 5. 阮一峰，张鑫旭 的博客 119 | 6. 公众号，知乎 120 | 121 | --- 122 | 123 | `💭 补充`: 我本人`lencx`也 follow 过许多国外大牛，因为人数太多暂时无法整理出来，感兴趣的可以查看 124 | 125 | - [github following](https://github.com/lencx?tab=following) 126 | 127 | - `twitter`: 排名不分先后，由于时间原因，只列取了部分，大家可以根据follow后的推荐自行关注 128 | - [Dan](https://twitter.com/dan_abramov) 129 | - [Axel Rauschmayer](https://twitter.com/rauschma) 130 | - [TJ Holowaychuk](https://twitter.com/tjholowaychuk) 131 | - [Evan You](https://twitter.com/youyuxi) 132 | - [Lea Verou](https://twitter.com/LeaVerou) 133 | - [Sindre Sorhus](https://twitter.com/sindresorhus) 134 | - [Sean Larkin](https://twitter.com/TheLarkInn) 135 | - [Una Kravets](https://twitter.com/Una) 136 | - [Chris Coyier](https://twitter.com/chriscoyier) 137 | - [Alligator.io](https://twitter.com/alligatorio) 138 | - [Julia Evans](https://twitter.com/b0rk) 139 | - [Lin Clark](https://twitter.com/linclark) 140 | - [Ali Spittel](https://twitter.com/ASpittel) 141 | - [Charlie Gerard](https://twitter.com/devdevcharlie) 142 | - [Nicholas C. Zakas](https://twitter.com/slicknet) 143 | - [Sarah Drasner](https://twitter.com/sarah_edo) 144 | - [Robin Wieruch](https://twitter.com/rwieruch) 145 | - [Max Stoiber](https://twitter.com/mxstbr) 146 | - [André Staltz](https://twitter.com/andrestaltz) 147 | - [Sebastian](https://twitter.com/sebmck) 148 | - [MylesBorins](https://twitter.com/MylesBorins) 149 | - [Awais](https://twitter.com/MrAhmadAwais) 150 | - [Ives van Hoorne](https://twitter.com/CompuIves) 151 | - [Dave Ceddia](https://twitter.com/dceddia) 152 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /src/2021/04/22.md: -------------------------------------------------------------------------------- 1 | # 2021.04.22 2 | 3 | - `tools` `chrome` [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) - 100 w+ 下载量，可以查看网站的技术栈以及使用的相关工具和服务。 4 | 5 | - `js` [jExcel](https://gitee.com/mirrors/jExcel) - 轻量级的vanilla javascript插件，用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格 6 | 7 | - `js` `guide` 基于 Next.JS 的 [Incremental Static Regeneration (ISR) 指引](https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/) 新名词 ISR，增量的静态页面生成，适用于内容型站点 8 | 9 | - `terminal` 由于配置及插件过多，以链接形式分享[tools/terminal](https://github.com/lencx/mtc/blob/main/docs/tech/tools/terminal.md) 10 | 11 | - `flowchart` 用于构建交互式流程图的库，[wbkd/react-flow](https://github.com/wbkd/react-flow)，[网站](https://reactflow.dev)，[egoist/flowkit](https://github.com/egoist/flowkit) 12 | 13 | - `browser` 浏览器新标签页，可以定制自己想要的[标签infinity](http://cn.infinitynewtab.com) 14 | 15 | - `terminal` [thefuck](https://github.com/nvbn/thefuck) - 命令行神器，当输错linux命令，fuck一下，提示你可能想输入的命令。 16 | 17 | - `redux` [rtk-query](https://github.com/rtk-incubator/rtk-query) - 基于 redux toolkit 的 data fetch 和 caching 工具，还在用 redux 的可以关注下。 18 | 19 | - `tools` Everything （Windows search tool 毫秒级响应） 20 | 21 | - `tools` [wox](http://www.wox.one) - An effective launcher for windows 22 | 23 | - `app` [typora](https://www.typora.io) - 跨平台md编辑器 24 | 25 | - `app` [Xnip](https://xnipapp.com/) - mac 端下比较好的截图软件，支持打码、步骤标注等常用功能 26 | 27 | - `app` [Bob](https://github.com/ripperhe/Bob) - 翻译软件，支持划词翻译和截图 ocr 翻译，注意服务配多点效果比较好，多个翻译服务对照着看 28 | - `app` [thor](https://github.com/gbammc/Thor) - 通过快捷键一键切换和隐藏各种软件（老板键？），搭配 Karabiner Element 修改右 command 为 hyper 键可进一步提升快捷键的选择空间 29 | - `app` [Runcat](https://apps.apple.com/cn/app/runcat/id1429033973?mt=12) - 每个人看到我的电脑都会问这个猫是干啥的，菜单栏猫跑地越快 cpu 占用越高 30 | 31 | - `app` `wallpaper` Unsplash Wallpapers，mac 下壁纸日更软件，让你在办公室看景 32 | 33 | - `tools` [Notion](https://www.notion.so/) - 现体验最好的自用知识管理工具。无限树层级的笔记结构，可以自建数据库管理目标/待办/人脉等资源，十分适合程序员，可以让工具根据你的生活模式定制；[Notion安利](https://www.yuque.com/huorunquan/blog/rtvix8) 34 | 35 | - `vsc` [Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)，vscode 插件，能够对选定的两部分内容进行内容比对，等于 git 的单个文件 diff 功能 36 | 37 | - `vsc` [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) - vscode 插件，收集项目中你所有代码中备注遗留要做（也许不会）的事情，让你成为时间管理大师 38 | 39 | - `tools` [uTools](https://u.tools)生产力工具集，自由集成丰富插件（可自主开发），快速匹配「场景功能」，用完即走 40 | 41 | - `app` [Kap](https://getkap.co) - 非常好用的 gif截屏 小工具 42 | 43 | - `vsc` [CodeMetrics](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-codemetrics) - vscode插件，用来计算 ts / js / lua代码的复杂度，帮助我们更好的重构代码。 44 | 45 | - `tools` [Marp](https://sspai.com/post/55718) - Markdown 转 PPT，可自定义模板，配套 VSCode 工具，PPT 制作不再愁 46 | 47 | - `tools` [LICEcap](https://www.cockos.com/licecap) - 小巧的 gif 生成器，可配置 gif 帧率、压缩参数等，demo 演示好帮手 48 | 49 | - `tools` 加速视频播放速度，最高16倍。 50 | - [Chrome Global Speed插件](https://chrome.google.com/webstore/detail/global-speed/jpbjcnkcffbooppibceonlgknpkniiff?utm_source=chrome-ntp-icon) 51 | - [Edge Global Speed插件](https://microsoftedge.microsoft.com/addons/detail/global-speed-%E8%A7%86%E9%A2%91%E9%80%9F%E5%BA%A6%E6%8E%A7%E5%88%B6/mjhlabbcmjflkpjknnicihkfnmbdfced?hl=zh-CN) 52 | 53 | - `tools` [tinypng](https://tinypng.com) - 在线压缩图片，压缩之后清晰度还不错！ 54 | 55 | - `app` [ImageOptim](https://imageoptim.com/mac) - 使图像加载更快 删除肿的元数据。通过压缩映像节省磁盘空间和带宽，而不会降低质量。支持多种图片格式，自定义压缩质量 56 | 57 | - `tools` [cusdis](https://github.com/djyde/cusdis) - 极简的网站嵌入评论工具 58 | 59 | - `app` [MarginNote](https://www.marginnote.com/) = 不仅仅是笔记，不仅仅上学看论文用，碎片化信息严重，整理知识地图特别重要，构建自己的知识体系，强烈推荐在 iPad Pro 上搭配 pencil 使用，MarginNote3，用过十几款软件之后唯一愿意付费使用的，没有之一 60 | 61 | - `other` [meld](https://meld.so) - 基于昨天的 $450 的脚手架搭建 62 | 63 | - `tools` [25个不可错过的实用前端工具](https://mp.weixin.qq.com/s/y1yoMpbdgK024-tQnkP3TQ) 64 |  65 | - `tools` [Excalidraw](https://excalidraw.com) - 手绘风格的画图工具，Dan Abramov 的 [Just JavaScript] 系列就用到了这个。支持 svg、png 格式的导出，支持 PWA，支持协作。 66 | 67 | - `terminal` `node` [kenshinji/yddict](https://github.com/kenshinji/yddict) - 一个命令行查单词的工具 68 | 69 | - `app` `tools` [Things](https://culturedcode.com/things) - 一款非常优秀的 GTD 工具 70 | 71 | - `book` [Lore Free](https://ebook2.lorefree.com/) - 首个基于EOS和IPFS的去中心化知识共享社区 72 | 73 | - `fe` `debug` [调试页面](https://debugx5.qq.com) - 可以用来 debug 微信的 webview ，仅支持 android 74 | 75 | - `other` [blockly](https://developers.google.com/blockly) - 一个Google的有点像少儿编程的工具 76 | 77 | - `vue` `chart` [vue-trend](https://github.com/QingWei-Li/vue-trend) - 超级小的图表库 78 | 79 | - `vue` [vue-luck-draw](https://github.com/LuckDraw/vue-luck-draw) - Vue 写的一个抽奖类库 80 | 81 | - `tools` [shadow1ng/fscan](https://github.com/shadow1ng/fscan) - 刚开源一款内网综合扫描工具，方便一键自动化、全方位漏扫扫描。例如：web指纹识别、web漏洞扫描、netbios探测、域控识别等。 82 | 83 | - `js` [FicusJS](https://docs.ficusjs.org/docs/getting-started) - 基于webcomponent实现的轻量开发库 84 | 85 | - `react` react 另外一种状态管理 [GraphQL + TypeScript + React + Apollo](https://zhuanlan.zhihu.com/p/115068436) 86 | 87 | - `js` [考古挖掘：高刷显示器下的 requestAnimationFrame](https://juejin.cn/post/6953541785217925151) 88 | 89 | - `tools` [js AST 可视化解析](https://resources.jointjs.com/demos/javascript-ast) - 可以转 svg ,png，帮助你 AST 语法结构 90 | 91 | - `serverless` [美团公共服务serverless](https://mp.weixin.qq.com/s/NlMP4-gf2dqt3foAKJmeQg) 云函数建设情况、架构、生态、业务落地收益 92 | 93 | - `js` `flowchart` [LogicFlow](http://logic-flow.org/) - 滴滴开源，专注流程可视化的前端框架 94 | 95 | - `react` `logo` [React China Logos - React + 中国结](https://github.com/reactchina/react-china-logo) 96 | 97 | - `react` [Relay vs Apollo](https://www.prisma.io/blog/relay-vs-apollo-comparing-graphql-clients-for-react-apps-b40af58c1534) - 结合 React 的graphql两种客户端对比 98 | 99 | - `other` [APIJSON](https://vincentcheng.github.io/apijson-doc/) - 腾讯开源 100 | 101 | - `other` [柠檬精选](https://lemon.qq.com/lab) - 腾讯柠檬精选——收录免费、正版、好用的Mac产品 102 | 103 | - `browser` [AdGuard](https://chrome.google.com/webstore/detail/adguard-adblocker/bgnkhhnnamicmpeenaelnjfhikgbkllg) - 一款去广告的google chrome 扩展程序, 也有软件版本, 但不免费, 且不太需要, 基本的能力已经挺符合了 104 | 105 | - `tools` [IDM](https://www.internetdownloadmanager.com/) - 下载工具 断点断续 多线程 甚至google drive这种 也可以断点断续, 相对稳定的媒体嗅探, bilibili youtube p* 等都可以出现浮窗 可以下载. 荔枝上买正版30一年 106 | 107 | - `tools` [snipaste](https://www.snipaste.com/) - 有免费版本 够用了 截图 贴图 取色 方便的取历史图片 各种标记 针不戳. 108 | 109 | - `other` [xclient](https://xclient.info) - MAC应用分享平台 110 | 111 | - `tools` [charles](https://www.charlesproxy.com/) - 一款抓包修改工具, 操作简单但功能不错, 最近常用本地映射功能, 提升了调试效率 (1. 大部分本次调试不需要数据变动的接口, 不需要等待后端返回了 2. 如果需要造固化的调试数据, 也可以以文件的方式修改好 3. google chrome 控制台 networks 这个选项卡中, 可以右键屏蔽一些请求) 112 | 113 | - `browser` `tools` [FeHelper](https://github.com/zxlie/FeHelper) - 一款google chrome 扩展程序, Web前端助手，扩展功能很多 114 | 115 | - `fe` `tools` [lighthouse](https://github.com/GoogleChrome/lighthouse) - 网页检测工具，可以直观展示页面性能，性能优化建议，搜索引擎优化建议等 116 | [解析lighthouse检测流程](https://zhuanlan.zhihu.com/p/91365316) 117 | 118 | - `browser` [Markdown Viewer](https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk) - 在浏览器预览markdown的谷歌插件（有时会对github的 README-*.md 有副作用） 119 | 120 | - `browser` [Personal Blocklist](https://chrome.google.com/webstore/detail/personal-blocklistnot-by/cbbbhelcpfjhdcncigdlkabmjbgokmpg) - 谷歌搜索屏蔽不需要的网站，谷歌插件 121 | 122 | - `tools` [Carbon](https://carbon.now.sh/) - 生成好看的代码图片 123 | 124 | - `other` `wallpaper` [pap.er](https://paper.meiyuan.in/), 专为 Mac 设计的壁纸应用 每天享受来自全球新鲜精美的壁纸 125 | 126 | - `browser` [Octotree](https://github.com/ovity/octotree) - 可以更加友好地让你去浏览阅读GitHub上的项目。 127 | 128 | - `browser` [OneTab](https://chrome.google.com/webstore/detail/chphlpgkkbolifaimnlloiipkdnihall) - 一键解决浏览器打开页签多，内存占用大。 129 | 130 | - `tools` [LastPass](https://chrome.google.com/webstore/detail/hdokiejnpimakedhajhdlcegeplioahd) - 非常好用的密码管理工具。 131 | 132 | - `app` `tools` [iStat Menus](https://setapp.com/apps/istat-menus) - 一款系统状态监控工具。 133 | 134 | - `app` `tools` [iterm2](https://iterm2.com/) - 一款命令行终端模拟器，（iTerm2 + Oh My Zsh一套相关配置大大提升效率） 135 | 136 | - `app` `tools` [sourceTree](https://www.sourcetreeapp.com/) - 一款可视化git管理工具。 137 | 138 | - `news` [湾区日报](https://wanqu.co/) - 关注创业与技术，每天推送3到5篇优质英文文章 139 | 140 | - `tools` `flowchart` [draw.io](https://www.draw.io/) - 免费客户端、网页版都有的画流程图工具，功能强大。 141 | 142 | - `browser` [pocket](https://getpocket.com) - 谷歌浏览器插件，用来随手看到好的文章很方便地收藏 143 | -------------------------------------------------------------------------------- /theme/index.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ title }} 7 | {{#if is_print }} 8 | 9 | {{/if}} 10 | {{#if base_url}} 11 | 12 | {{/if}} 13 | 14 | 15 | 16 | {{> head}} 17 | 18 | 19 | 20 | 21 | 22 | 23 | {{#if favicon_svg}} 24 | 25 | {{/if}} 26 | {{#if favicon_png}} 27 | 28 | {{/if}} 29 | 30 | 31 | 32 | {{#if print_enable}} 33 | 34 | {{/if}} 35 | 36 | 37 | 38 | {{#if copy_fonts}} 39 | 40 | {{/if}} 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | {{#each additional_css}} 49 | 50 | {{/each}} 51 | 52 | {{#if mathjax_support}} 53 | 54 | 55 | {{/if}} 56 | 57 | 58 | 59 | 60 | 64 | 65 | 66 | 78 | 79 | 80 | 90 | 91 | 92 | 102 | 103 | 109 | 110 |
111 | 112 |
113 | {{> header}} 114 | 115 | 155 | 156 | {{#if search_enabled}} 157 | 167 | {{/if}} 168 | 169 | 170 | 177 | 178 |
179 |
180 | {{{ content }}} 181 |
182 | 183 | 199 | 200 |
201 | 207 |
208 |
209 |
210 | 211 | 224 | 225 |
226 | 227 | {{#if livereload}} 228 | 229 | 241 | {{/if}} 242 | 243 | {{#if google_analytics}} 244 | 245 | 258 | {{/if}} 259 | 260 | {{#if playground_line_numbers}} 261 | 264 | {{/if}} 265 | 266 | {{#if playground_copyable}} 267 | 270 | {{/if}} 271 | 272 | {{#if playground_js}} 273 | 274 | 275 | 276 | 277 | 278 | {{/if}} 279 | 280 | {{#if search_js}} 281 | 282 | 283 | 284 | {{/if}} 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | {{#each additional_js}} 293 | 294 | {{/each}} 295 | 296 | {{#if is_print}} 297 | {{#if mathjax_support}} 298 | 305 | {{else}} 306 | 311 | {{/if}} 312 | {{/if}} 313 | 314 | -------------------------------------------------------------------------------- /src/2021/04/toc.md: -------------------------------------------------------------------------------- 1 | # 2021.04 2 | 3 | `汇总完成` - 📅 *2021.04.14 ~ 2021.04.30* 4 | 5 | ## Tools 6 | 7 | - [tooling.report](https://bundlers.tooling.report) - 为您的下一个 Web 项目确定最佳构建工具的快速方法，或者是否值得进行工具迁移，或者如何在现有配置和代码库中采用工具的最佳实践。 8 | - [docmirror/dev-sidecar](https://github.com/docmirror/dev-sidecar) - 开发者边车，github 打不开，github 加速，git clone 加速，git release 下载加速，stackoverflow 加速 9 | - [natto.dev | interactive JavaScript space](https://natto.dev) 10 | - [Powerful, Extensible Dev Tools](https://github.com/nrwl/nx) 11 | - [Fusuma](https://github.com/hiroppy/fusuma) - 使用 Markdown 轻松制作幻灯片。 12 | - [rive](https://rive.app) - 基于 Flutter 开发的网页端动画制作工具(站点支持 PWA) 提供 Web(基于 wasm)、Flutter、Cpp、iOS、Android 五种运行时。 13 | - [Learn Git Branching](https://learngitbranching.js.org/) - 是在web上学习Git最直观、最具交互性的方式；通过挑战关卡，逐步学习Git的特性，使学习过程具有乐趣 14 | - [GitHub520](https://github.com/521xueweihan/GitHub520) - 让你“爱”上 GitHub，解决访问时图裂、加载慢的问题。（无需安装） 15 | - [estimator.dev](https://estimator.dev/#nocode.com) - Calculate the size and performance impact of switching to modern JavaScript syntax 16 | - [Mermaid](https://mermaid-js.github.io/mermaid/#/) - 可以使用文本和代码创建图。这简化了复杂图的维护。它是一个基于Javascript的图表绘制工具，可以用Markdown文本来定义各种复杂图表，流程图，顺序图，类图，甘特图，状态图，饼图等。 17 | - [Photopea.com](https://github.com/photopea/photopea) - a free online tool for editing raster and vector graphics with support for PSD, AI, and Sketch files. 18 | - [Portainer](https://github.com/portainer/portainer) - Making Docker and Kubernetes management easy. 19 | - [Logoly Pro](https://www.logoly.pro/#/) - A Simple Online Logo Generator 20 | - [web IDE](http://remix.hubwiz.com/#optimize=false&version=soljson-v0.5.1+commit.c8a2cb62.js) - 在线写合约，做区块链的前端同学可参考 21 | - [Devops元素周期表](https://devops.phodal.com/)，包含了Devops案例学习，模式原则，最佳实践等 22 | - [moiva.io](https://moiva.io) - 工具类站点，可用于评估和比较类库，寻找替代库 23 | - [github1s](https://github1s.com) - 将 github 更改为 github1s 可以查看编辑源码 24 | - [Pull](https://probot.github.io/apps/pull) - a GitHub App that keeps your forks up-to-date with upstream via automated pull requests. 25 | - [mdbook](https://github.com/rust-lang/mdBook) - Create book from markdown files. Like Gitbook but implemented in Rust. 26 | - [chrome 拓展程序](https://github.com/zhuowenli/githuber) - 每天爬  Github Trending 热门 Repo 27 | - [use-what-changed](https://github.com/simbathesailor/use-what-changed) - 一个便于调试 react hook 中依赖项列表变化的小工具 28 | - [Prisma tools are ready for production today!](https://www.prisma.io/blog/prisma-the-complete-orm-inw24qjeawmb) 29 | - [openbase](https://openbase.com) - 工具类站点，寻找类库的工具 30 | - [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) - 可以查看网站的技术栈以及使用的相关工具和服务。 31 | - [jExcel](https://gitee.com/mirrors/jExcel) - 轻量级的 vanilla javascript 插件，用于创建与 Excel 或任何其他电子表格软件兼容的基于 Web 的交互式表格和电子表格 32 | - 用于构建交互式流程图的库，[reactflow](https://github.com/wbkd/react-flow)，[官网](https://reactflow.dev)，[egoist/flowkit](https://github.com/egoist/flowkit) 33 | - [Infinity - New Tab](http://cn.infinitynewtab.com) - 浏览器新标签页，可以定制自己想要的 34 | - [wox](http://www.wox.one) - An effective launcher for windows 35 | - [Notion](https://www.notion.so/) - 知识管理工具。无限树层级的笔记结构，可以自建数据库管理目标/待办/人脉等资源。 36 | - [uTools](https://u.tools) - 生产力工具集，自由集成丰富插件（可自主开发），快速匹配「场景功能」 37 | - [Marp](https://sspai.com/post/55718) - Markdown 转 PPT，可自定义模板，配套 VSCode 工具，PPT 制作不再愁 38 | - [LICEcap](https://www.cockos.com/licecap) - 小巧的 gif 生成器，可配置 gif 帧率、压缩参数等，demo 演示好帮手 39 | - [Global Speed](https://github.com/polywock/globalSpeed) - Web extension that sets a default speed for HTML media elements (video and audio). 40 | - [Chrome Global Speed 插件](https://chrome.google.com/webstore/detail/global-speed/jpbjcnkcffbooppibceonlgknpkniiff?utm_source=chrome-ntp-icon) 41 | - [Edge Global Speed 插件](https://microsoftedge.microsoft.com/addons/detail/global-speed-%E8%A7%86%E9%A2%91%E9%80%9F%E5%BA%A6%E6%8E%A7%E5%88%B6/mjhlabbcmjflkpjknnicihkfnmbdfced?hl=zh-CN) 42 | - [tinypng](https://tinypng.com) - 在线压缩图片，压缩之后清晰度还不错！ 43 | - [cusdis](https://github.com/djyde/cusdis) - 极简的网站嵌入评论工具 44 | - [Excalidraw](https://excalidraw.com) - 手绘风格的画图工具，支持 svg、png 格式的导出，支持 PWA，支持协作。 45 | - [Things](https://culturedcode.com/things) - 一款非常优秀的 GTD 工具 46 | - [调试页面](https://debugx5.qq.com) - 可以用来 debug 微信的 webview ，仅支持 android 47 | - [blockly](https://developers.google.com/blockly) - 一个 Google 的有点像少儿编程的工具 48 | - [vue-trend](https://github.com/QingWei-Li/vue-trend) - 超级小的图表库 49 | - [shadow1ng/fscan](https://github.com/shadow1ng/fscan) - 一款开源内网综合扫描工具，方便一键自动化、全方位漏扫扫描。例如：web 指纹识别、web 漏洞扫描、netbios 探测、域控识别等。 50 | - [js AST 可视化解析](https://resources.jointjs.com/demos/javascript-ast) - 可以转 svg ,png，帮助你 AST 语法结构 51 | - [AdGuard](https://chrome.google.com/webstore/detail/adguard-adblocker/bgnkhhnnamicmpeenaelnjfhikgbkllg) - 一款去广告的 google chrome 扩展程序, 也有软件版本, 但不免费, 且不太需要, 基本的能力已经挺符合了 52 | - [IDM](https://www.internetdownloadmanager.com/) - 下载工具、断点断续、多线程、甚至 google drive 也可以断点断续, 相对稳定的媒体嗅探, bilibili youtube p\* 等都可以出现浮窗 可以下载. 53 | - [snipaste](https://www.snipaste.com/) - 有免费版本，截图 贴图 取色 方便的取历史图片 各种标记。 54 | - [charles](https://www.charlesproxy.com/) - 一款抓包修改工具 55 | - [FeHelper](https://github.com/zxlie/FeHelper) - 一款 google chrome 扩展程序, Web 前端助手，扩展功能很多 56 | - [lighthouse](https://github.com/GoogleChrome/lighthouse) - 网页检测工具，可以直观展示页面性能，性能优化建议，搜索引擎优化建议等 57 | - [Markdown Viewer](https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk) - 在浏览器预览 markdown 的谷歌插件（有时会对 github 的 README-\*.md 有副作用） 58 | - [Personal Blocklist](https://chrome.google.com/webstore/detail/personal-blocklistnot-by/cbbbhelcpfjhdcncigdlkabmjbgokmpg) - 谷歌搜索屏蔽不需要的网站，谷歌插件 59 | - [Carbon](https://carbon.now.sh/) - 生成好看的代码图片 60 | - [Octotree](https://github.com/ovity/octotree) - 可以更加友好地让你去浏览阅读 GitHub 上的项目。 61 | - [OneTab](https://chrome.google.com/webstore/detail/chphlpgkkbolifaimnlloiipkdnihall) - 一键解决浏览器打开页签多，内存占用大。 62 | - [LastPass](https://chrome.google.com/webstore/detail/hdokiejnpimakedhajhdlcegeplioahd) - 非常好用的密码管理工具。 63 | - [iStat Menus](https://setapp.com/apps/istat-menus) - 一款系统状态监控工具。 64 | - [sourceTree](https://www.sourcetreeapp.com/) - 一款可视化 git 管理工具。 65 | - [draw.io](https://www.draw.io/) - 免费客户端、网页版都有的画流程图工具，功能强大。 66 | - [pocket](https://getpocket.com) - 谷歌浏览器插件，用来随手看到好的文章很方便地收藏 67 | - [Online text to diagram tools](https://xosh.org/text-to-diagram/) 68 | - [可视化解析 npm 包依赖项目](http://npm.anvaka.com/#/view/2d/react-native) 69 | - [Avatar Maker](https://github.com/favrora/Avatar-Maker) - Create your own avatar with Vue Avatar Maker app. 70 | - [Regulex](https://jex.im/regulex) - JavaScript Regular Expression Visualizer. 71 | - [CSS Gradient](https://cssgradient.io/) - As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. 72 | - [ADB](github.com/GoogleChrome/ADBPlugin) - 实际开发中app内嵌webview很常见，但是安卓环境调试，出了开模拟器，可以试试adb插件，很好用 73 | - [calendso](https://github.com/calendso/calendso) - 知名日程安排工具(Calendly)的开源替代品。 74 | - [fscan](https://github.com/shadow1ng/fscan) - 一款内网综合扫描工具，方便一键自动化、全方位漏扫扫描。 75 | - [JS Tooling not in JS](https://github.com/RobinCsl/awesome-js-tooling-not-in-js) - A curated list of JavaScript tooling not written in JavaScript 76 | - [why-did-you-render](https://github.com/welldone-software/why-did-you-render) - 通过 monkey patches React 来通知您可能可以避免的 re-renders，同时适用于 react-native 77 | - [transform](https://transform.tools/) - 支持各种代码转化的工具，SVG、JSON、TS、GraphQL、CSS、SQL，只要你能想到的这里都有。光 JSON 就可以转化为十几种代码格式，如把 JSON 转化成 Flow、Go、GraphQL、Typescript、Kotlin、MySQL、YAML等。本项目开源，你可以通过代码学习到它是如何进行格式转换的。 78 | 79 | ## Open Source 80 | 81 | - [yjs](https://docs.yjs.dev/) - 一个新的基于CRDT的开源数据协同框架，常用来做在线编辑产品 82 | - [腾讯开源： Vap](https://github.com/Tencent/vap) - 企鹅电竞开发，用于播放酷炫动画的实现方案，Android, iOS, web 通用。 83 | - [rn-range-slider](https://github.com/githuboftigran/rn-range-slider) - A highly optimized and fully customizable pure JS component for value range selection. 84 | - [Duilib](https://github.com/duilib/duilib) 一个Windows下免费开源的DirectUI界面库，腾讯、网易都在用 85 | - [EasyFaaS](https://github.com/baidu/EasyFaaS) - EasyFaaS是一个依赖轻、适配性强、资源占用少、无状态且高性能的函数计算服务引擎 86 | - [喵语翻译](https://github.com/miao-lang/miao-lang) - 将人类语言翻译为喵语言 87 | - [dagre](https://github.com/dagrejs/dagre) - Graph layout for JavaScript 88 | - [WinBox](https://github.com/nextapps-de/winbox) - 是用于Web的专业HTML5窗口管理器：轻巧，性能出色，无依赖项，完全可自定义，支持最大化，最小化，自由拉伸及拖动等 89 | - [esmon](https://github.com/egoist/esmon) - 类似 nodemon 但基于 esbuild，支持 ts 等 90 | - [Recoil](https://recoiljs.org/) - A state management library for React 91 | - [pullstate](https://github.com/lostpebble/pullstate) - Simple state stores using immer and React hooks - re-use parts of your state by pulling it anywhere you like! 92 | - [react-amap](https://github.com/pansyjs/react-amap) - 基于 React 封装的高德地图组件，助你轻松的接入高德地图到 React 项目中。 93 | - [nodejs 源码解析](https://github.com/theanarkh/understand-nodejs) 94 | - [Run multiple promise-returning & async functions with limited concurrency](https://github.com/sindresorhus/p-limit) 95 | - [vite-plugin-vue-gql](https://github.com/wheatjs/vite-plugin-vue-gql) - GraphQL Tags for your Vue SFC 96 | - [libp2p-rs](https://github.com/netwarps/libp2p-rs) - rust 实现的 libp2p 97 | - [rbatis](https://github.com/rbatis/rbatis) - 用 rust 实现 ORM 框架 98 | - [iced](https://github.com/hecrj/iced) - rust 9.2K 跨平台 GUI 仓库 99 | - [swc](https://github.com/swc-project/swc) - rust 编写的超快速的 typescript/ javascript 编译器 100 | - [北海](https://openkraken.com) - 基于 Flutter 的 Web 渲染引擎正式开源 101 | - [FicusJS](https://docs.ficusjs.org/docs/getting-started) - 基于 webcomponent 实现的轻量开发库 102 | - [LogicFlow](http://logic-flow.org/) - 滴滴开源，专注流程可视化的前端框架 103 | - [APIJSON](https://vincentcheng.github.io/apijson-doc/) - 腾讯开源 104 | - [material-tailwind](https://material-tailwind.com/) - 基于 react、material、tailwind 开发的组件库 105 | - [react-to-print](https://github.com/gregnb/react-to-print) - react 中指定打印节点而并不需要写内联样式的库 106 | - [Eva.js](https://github.com/eva-engine/eva.js) - Eva.js is a front-end game engine specifically for creating interactive game projects. 107 | - [rtk-query](https://github.com/rtk-incubator/rtk-query) - 基于 redux toolkit 的 data fetch 和 caching 工具，还在用 redux 的可以关注下。 108 | - [Finished Proposals](https://github.com/tc39/proposals/blob/master/finished-proposals.md) - Finished proposals are proposals that have reached stage 4, and are included in the latest draft of the specification. 109 | - [pytorchjs](https://github.com/raghavmecheri/pytorchjs) - Torch and TorchVision, but for NodeJS. 110 | - [NPlayer](https://github.com/woopen/nplayer) - 无任何第三方运行时依赖，兼容 IE11，支持 SSR。高度可定制，可二次开发。和 B 站一样体验的弹幕系统。可以接入任何流媒体，支持直播。 111 | - [ReactFlow](https://reactflow.dev/) - Highly customizable library for building interactive node-based UIs, editors, flow charts and diagrams. 112 | - [Fabric.js](https://github.com/fabricjs/fabric.js) - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser 113 | - [framer/motion](https://github.com/framer/motion) - Open source, production-ready animation and gesture library for React 114 | - [awesome-f2e-libs](https://github.com/sorrycc/awesome-f2e-libs) - 整理我(云谦)平时关注的前端库 115 | - [translate.css](https://www.transition.style/) - Drop-in CSS transitions 116 | - [ChatUI](https://chatui.io/) - 对话式交互应用UI库，达摩院开源作品 117 | - [DSBridge-Android](https://github.com/wendux/DSBridge-Android) - A modern cross-platform JavaScript bridge, through which you can invoke each other's functions synchronously or asynchronously between JavaScript and native. 118 | - [javascript-state-machine](https://github.com/jakesgordon/javascript-state-machine) - A javascript finite state machine library 119 | - [windicss](https://github.com/windicss/windicss) - Next generation utility-first CSS framework. 120 | - [replay](https://github.com/vimond/replay) - A React video player facilitating adaptive stream playback with custom UI and a React-friendly API. 121 | - [vue3-markdown-it](https://github.com/JanGuillermo/vue3-markdown-it) - An awesome Vue 3 markdown-it wrapper plugin that can even support external plugins! 122 | - [code-to-graph](https://github.com/crubier/code-to-graph) - Transforms code (JS) into graphs (graphviz, mermaid flowchart, ...) 123 | - [@pansy/watermark](https://github.com/pansyjs/watermark) - watermark component 124 | - [air-conditioner](https://github.com/YunYouJun/air-conditioner) - 云空调，便携小空调，为你的夏日带去清凉！ 125 | 126 | ## Guide 127 | 128 | - [The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) 129 | - [Web Development for Beginners - A Curriculum](https://github.com/microsoft/Web-Dev-For-Beginners) - 24 Lessons, 12 Weeks, Get Started as a Web Developer 130 | - [Developer Roadmaps](https://roadmap.sh) - Step by step guides and paths to learn different tools or technologies (包含前端，后端，运维，安卓，数据库，react等) 131 | - [Rust 入门](https://docs.microsoft.com/zh-cn/learn/paths/rust-first-steps/) - 微软学习文档 132 | - [React Interview Questions & Answers](https://github.com/sudheerj/reactjs-interview-questions) - List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!! 133 | - [CSS 奇技淫巧](https://github.com/chokcoco/iCSS) - 不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 CSS 细节 134 | - [现代 JavaScript 教程](https://javascript.info) 135 | - [WebGL 理论基础](https://webglfundamentals.org) - 一系列文章，从零开始，并有大量代码示例 136 | - [TypeScript 和 React 优质指导](https://fettblog.eu/articles) 137 | - [vis-network](https://github.com/datastorm-open/visNetwork) - 网络可视化的 R 包，使用的是 vis.js，[中文文档](https://www.ame.cool/pages/a7d858/#network-%E5%85%B3%E7%B3%BB%E5%9B%BE) 138 | - [A Complete Guide To Incremental Static Regeneration (ISR) With Next.js](https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/) 139 | - [10 GitHub Repositories every Developer should know](https://dev.to/pb/10-github-repositories-every-developer-should-know-ngm) 140 | - [Free Programming Books](https://github.com/EbookFoundation/free-programming-books) 141 | - [Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap) 142 | - [OSSU Computer Science](https://github.com/ossu/computer-science) 143 | - [Awesome](https://github.com/sindresorhus/awesome) 144 | - [Build your own X](https://github.com/danistefanovic/build-your-own-x) 145 | - [Coding Interview University](https://github.com/jwasham/coding-interview-university) 146 | - [Public Apis](https://github.com/public-apis/public-apis) 147 | - [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) 148 | - [System Design Primer](https://github.com/donnemartin/system-design-primer) 149 | - [Design Resources for Developers](https://github.com/bradtraversy/design-resources-for-developers) 150 | - [free-books](https://github.com/ruanyf/free-books) - 互联网上的免费书籍 151 | - [Web Design & UI Inspiration with Code Snippets](https://codemyui.com/) 152 | - [Flexbugs](https://github.com/philipwalton/flexbugs) - A community-curated list of flexbox issues and cross-browser workarounds for them. 153 | - [Keeping up with React Libraries](https://maxrozen.com/keeping-up-with-react-libraries) 154 | - [mastering-chrome-devtools](https://github.com/jkup/mastering-chrome-devtools) - Website for teaching Chrome DevTools 155 | - [FIRT](https://firt.dev) - Learn about Mobile and Web Development with Maximiliano Firtman's articles, notes and learning experiences. Progressive Web Apps, Web Performance, Android Apps, iOS Apps and more. 156 | - [400 条 JavaScript 面试题（带答案）](https://dev.to/worldindev/400-javascript-interview-questions-with-answers-2fcj) 157 | - [互联网黑话词汇表 - 适当学习，提升逼格](https://github.com/justjavac/ali-words) - 互联网黑话词汇表，包含“赋能、抓手、闭环、沉淀、打通”等阿里味儿词汇 158 | 159 | ## Weekly 160 | 161 | - [jondot/awesome-weekly](https://github.com/jondot/awesome-weekly) - 来自软件界的优质每周精选新闻通讯的精选列表 162 | - [zudochkin/awesome-newsletters](https://github.com/zudochkin/awesome-newsletters) - 精选的精选新闻通讯清单 163 | - [zenany/weekly](https://github.com/zenany/weekly) - 汇总平时看到的好文章，前端技术 & 产品研发为主... 164 | - [印记中文 - React Status Weekly](https://docschina.org/weekly/react/docs) 165 | - [awesome-lowcode](https://github.com/taowen/awesome-lowcode) - 国内低代码平台从业者交流 166 | - [2020 js 调查报告](https://2020.stateofjs.com/en-US/) 167 | - [湾区日报](https://wanqu.co/) - 关注创业与技术，每天推送 3 到 5 篇优质英文文章 168 | - [JavaScript 文章精选月刊](https://github.com/hijiangtao/javascript-articles-monthly) - 文章在持续更新 169 | - [ascoders/weekly](https://github.com/ascoders/weekly) - 前端精读周刊。帮你理解最前沿、实用的技术。 170 | 171 | ## VS Code 172 | 173 | - [Github Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme&WT.mc_id=devcloud-00000-cxa) 174 | - [Keyboard shortcuts for Windows](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf) 175 | - [Keyboard shortcuts for macOS](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf) 176 | - [Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)，vscode 插件，git 的单文件 diff 功能，对选定内容进行比对。 177 | - [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) - vscode 插件，收集项目中你所有代码中备注 `todos` 。 178 | - [CodeMetrics](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-codemetrics) - vscode 插件，计算 ts / js / lua 代码的复杂度，帮助我们更好的重构代码。 179 | - [Volar](https://github.com/johnsoncodehk/volar) - Volar是专门为Vue 3构建的语言支持插件。它基于@ vue / reactivity，可按需计算TypeScript以优化性能，类似于本机TypeScript语言服务。 180 | 181 | ## APP 182 | 183 | - [CheatSheet APP(mac)](https://www.mediaatelier.com/CheatSheet) - Just hold the `⌘-Key` a bit longer to get a list of all active short cuts of the current application. It's as simple as that. 184 | - [macos in preact](https://macos.vercel.app/?continueFlag=79c07017fa017269cd2fd54d2630adff) - [源码](https://github.com/puruvj/macos-web) 185 | - [typora](https://www.typora.io) - 跨平台 md 编辑器 186 | - [Xnip](https://xnipapp.com/) - mac 端下比较好的截图软件，支持打码、步骤标注等常用功能 187 | - [Bob](https://github.com/ripperhe/Bob) - 翻译软件，支持划词翻译和截图 ocr 翻译，注意服务配多点效果比较好，多个翻译服务对照着看 188 | - [thor](https://github.com/gbammc/Thor) - 通过快捷键一键切换和隐藏各种软件（老板键？），搭配 Karabiner Element 修改右 command 为 hyper 键可进一步提升快捷键的选择空间 189 | - [Runcat](https://apps.apple.com/cn/app/runcat/id1429033973?mt=12) - The cat will run at a speed that depends on the CPU usage on your Mac. You can see how much the current CPU usage is by looking at the running of the cat. 190 | - [Unsplash Wallpapers](https://unsplash.com/apps) - Bringing you thousands of magical moments to your screens. 191 | - [Kap](https://getkap.co) - 非常好用的 gif 截屏 小工具 192 | - [ImageOptim](https://imageoptim.com/mac) - 使图像加载更快 删除肿的元数据。通过压缩映像节省磁盘空间和带宽，而不会降低质量。支持多种图片格式，自定义压缩质量 193 | - [MarginNote](https://www.marginnote.com/) - 整理知识地图，构建自己的知识体系，强烈推荐在 iPad Pro 上搭配 pencil 使用 194 | - [meld](https://meld.so) - 基于[bedrock](https://bedrock.mxstbr.com)的脚手架搭建 195 | - [vue-luck-draw](https://github.com/LuckDraw/vue-luck-draw) - Vue 写的一个抽奖类库 196 | - [pap.er](https://paper.meiyuan.in/), 专为 Mac 设计的壁纸应用 每天享受来自全球新鲜精美的壁纸 197 | - [Maccy](https://maccy.app/) - 随时保留复制历史记录，轻巧快捷 198 | - [f.lux](https://justgetflux.com/) - 屏幕蓝光过滤 199 | - [Hidden Bar](https://github.com/dwarvesf/hidden) - 隐藏 mac 菜单栏图标 200 | - [Rectangle](https://github.com/rxhanson/Rectangle) - 使用快捷键快速调整窗口大小及位置 201 | - [Dropover](https://dropoverapp.com/) - Dropover is a utility that makes it easier to manage and move content between folders, applications, windows and workspaces using Drag and Drop. 202 | 203 | ## WebAssembly 204 | 205 | - [Learning WebAssembly Series](https://blog.ttulka.com/learning-webassembly-series) - webAssembly 系列入门文章，从代码示例到原理讲解 206 | - [WebAssembly 入门 （Vite + Rust）](https://lencx.github.io/book/wasm/rust_wasm_frontend.html) 207 | - [NoteCalc](https://bbodi.github.io/notecalc3) - 带有智能内置计算器的便捷记事本。功能强大，使用 webAssembly+canvas 构建应用。 208 | - [Telegram React](https://github.com/evgeny-nadymov/telegram-react) - based on the ReactJS JavaScript framework and TDLib (Telegram Database library) compiled to WebAssembly。 209 | - [Ant Design of Blazor](https://ant-design-blazor.gitee.io/zh-CN/) - WebAssembly 版本的 antDesign，语法类似 tsx。 210 | - [v86](https://github.com/copy/v86) - v86模拟与x86兼容的CPU和硬件。 机器代码在运行时转换为WebAssembly模块，以实现良好的性能，支持多种仿真硬件。 211 | 212 | ## Algorithms 213 | 214 | - [JavaScript Algorithms and Data Structures](https://github.com/trekhleb/javascript-algorithms) - Algorithms and data structures implemented in JavaScript with explanations and links to further readings 215 | - [Content-aware image resizing in JavaScript](https://trekhleb.dev/blog/2021/content-aware-image-resizing-in-javascript) 216 | 217 | ## Terminal 218 | 219 | - [tools/terminal](https://github.com/lencx/mtc/blob/main/docs/tech/tools/terminal.md) - lencx自用 220 | - [thefuck](https://github.com/nvbn/thefuck) - 命令行神器，当输错 linux 命令，fuck 一下，提示你可能想输入的命令。 221 | - [kenshinji/yddict](https://github.com/kenshinji/yddict) - 一个命令行查单词的工具 222 | - [Fig](https://github.com/withfig/autocomplete) - adds VSCode style autocomplete to your terminal 223 | - [iterm2](https://iterm2.com/) - 一款命令行终端模拟器，（iTerm2 + Oh My Zsh 一套相关配置大大提升效率） 224 | 225 | ## Community 226 | 227 | - [Lore Free](https://ebook2.lorefree.com/) - 首个基于 EOS 和 IPFS 的去中心化知识共享社区 228 | - [柠檬精选](https://lemon.qq.com/lab) - 腾讯柠檬精选——收录免费、正版、好用的 Mac 产品 229 | - [xclient](https://xclient.info) - MAC 应用分享平台 230 | 231 | ## Micro Frontends 232 | 233 | - [面向大型系统的微前端解决方案](https://ice-lab.github.io/icestark) 234 | - [icestark](https://ice-lab.github.io/icestark) - 面向大型系统的微前端解决方案 235 | - [m-app](https://github.com/ambit-tsai/m-app) - 新一代微前端解决方案，微应用容器组件，对 DOM、CSS、JS 进行硬隔离，达到真正的技术栈无关，并且运行时集成，微应用可独立开发、部署、升级。使用如 iframe 般简便，却超脱 iframe 的局限，你值得一试！ 236 | 237 | ## Icons 238 | 239 | - [IconPark](https://github.com/bytedance/IconPark) - 字节跳动出品的高质量开源图标 240 | - [700+CSS Icons](https://css.gg/) - Open-source CSS, SVG and Figma UI Icons. Available in SVG Sprite, styled-components, NPM & API. 241 | 242 | ## Low Code 243 | 244 | - [sparrow](https://github.com/sparrow-js/sparrow) - 场景化低代码（LowCode）搭建工作台，实时输出源代码 245 | - [yoma](https://github.com/msh01/yoma) - 一个小而美的低代码全栈开发平台，一键生成后端api接口+前端页面代码+在线接口文档，节省50%的前后端开发的工作量，平台代码100%开源。平台适用于企业信息化、政务、中小型互联网等项目 246 | - [citrus](https://github.com/Yiuman/citrus) - 低代码快速开发脚手架，灵活、高效，降低开发成本 247 | - [vue-low-code](https://github.com/KlausSchaefers/vue-low-code) - Quant-UX standalone 248 | 249 | --- 250 | 251 | `🎉 彩蛋`: 如何信息获取？ 252 | 253 | - `云谦`：我的信息来源主要这些 254 | 1. twitter 新建个 list 关注国内外前端大牛，然后按 top 排序 255 | 2. github 1) 通过 watch > custom > Releases 订阅感兴趣库的 release 信息 2) follow 一些人 256 | 3. 邮箱订阅各种 weekly 邮件列表 257 | 4. rss 订阅，来源很杂 258 | 信息流的方式基本没变，可参考两年前花的图，[《2019-04-sorrycc-我的输入信息流》](https://www.yuque.com/docs/share/78603db2-1dfc-47ad-9f47-1d2a5d6cd6e4?#) 259 | 260 | - `xiaohuoni`: 我的信息输入较少，更多喜欢从纸质书籍上得到信息。 261 | 1. 当当图书推荐榜-优先计算机，语言类。 262 | 2. github 首页，主要是通过关注的人的动态，还有explore里面的推荐 263 | 3. dev.to 通过 tags 过滤，也关注热度榜单。dev开源之前是我的主要信息来源。一直想着做一个国内站点，开源的时候，看了一下技术栈与我掌握的差异太大。反而连这个网站都少上了。 264 | 4. 云谦早报和他个人动态现在是我的主要信息来源。 265 | 5. 阮一峰的周报，issues区有很多信息 [ruanyf/weekly](https://github.com/ruanyf/weekly/issues) 266 | 267 | - `浩明`: 我的信息来源主要这几个博客和平台 268 | 1. github 上 follow 的动态 269 | 2. [Jake Archibald](https://jakearchibald.com) 博客 270 | 3. [Dan Abramov](https://overreacted.io) 博客 271 | 4. [David Walsh](https://davidwalsh.name) 博客 272 | 5. 阮一峰，张鑫旭 的博客 273 | 6. 公众号，知乎 274 | 275 | --- 276 | 277 | `💭 补充`: 我本人`lencx`也 follow 过许多国外大牛，因为人数太多暂时无法整理出来，感兴趣的可以查看 278 | 279 | - [github following](https://github.com/lencx?tab=following) 280 | 281 | - `twitter`: 排名不分先后，由于时间原因，只列取了部分，大家可以根据follow后的推荐自行关注 282 | - [Dan](https://twitter.com/dan_abramov) 283 | - [Axel Rauschmayer](https://twitter.com/rauschma) 284 | - [TJ Holowaychuk](https://twitter.com/tjholowaychuk) 285 | - [Evan You](https://twitter.com/youyuxi) 286 | - [Lea Verou](https://twitter.com/LeaVerou) 287 | - [Sindre Sorhus](https://twitter.com/sindresorhus) 288 | - [Sean Larkin](https://twitter.com/TheLarkInn) 289 | - [Una Kravets](https://twitter.com/Una) 290 | - [Chris Coyier](https://twitter.com/chriscoyier) 291 | - [Alligator.io](https://twitter.com/alligatorio) 292 | - [Julia Evans](https://twitter.com/b0rk) 293 | - [Lin Clark](https://twitter.com/linclark) 294 | - [Ali Spittel](https://twitter.com/ASpittel) 295 | - [Charlie Gerard](https://twitter.com/devdevcharlie) 296 | - [Nicholas C. Zakas](https://twitter.com/slicknet) 297 | - [Sarah Drasner](https://twitter.com/sarah_edo) 298 | - [Robin Wieruch](https://twitter.com/rwieruch) 299 | - [Max Stoiber](https://twitter.com/mxstbr) 300 | - [André Staltz](https://twitter.com/andrestaltz) 301 | - [Sebastian](https://twitter.com/sebmck) 302 | - [MylesBorins](https://twitter.com/MylesBorins) 303 | - [Awais](https://twitter.com/MrAhmadAwais) 304 | - [Ives van Hoorne](https://twitter.com/CompuIves) 305 | - [Dave Ceddia](https://twitter.com/dceddia) 306 | - ... 307 | --------------------------------------------------------------------------------