MDH • 前端情报
通知:
- 放弃更新,群已名存实亡。信息源变成某几个人的单一输出,消费远远大于生产。
- 本人精力有限,目前忙于其他事情,有想继续维护的朋友,可以联系我。
- 虽然此网站不再更新,但是我的个人项目和此项目有重合度。有兴趣的朋友可以关注 《浮之静》
- 代号:
MDH(make developer happier)
- 发起人: chencheng (云谦)
- 仓库创建人: lencx
- 资源提供人: 贡献者列表
- 贡献: 我要贡献
🤝 不在群中的成员,也可以通过 Discussions 自荐信息,或提PR,期待优秀的你加入
规则
- 👋 分享前端信息为主,八卦闲聊为辅
- 📝 每周至少发一条信息
- 🥺 长期不发言者会被踢出群
分享内容要求
- ✅ 一手信息为主,名称 + 描述 + 感受的格式
- 🙅 不发重复信息
- 🈲️ 广告(推广自己的项目也算)
- 🈲️ 招聘
情报收集
# 信息收集初步构想
fe-cool/news
|- [精选] # awesome
|- [news] # year
| |- [2021] # year
| | |- [04] # month
| | | |- 20 # day
| | | `- ..
| | `- ...
| `- ...
` ...
# 希望可以把收集到的信息通过多次分类
# 把最实用的工具,指南,APP,资讯类整理出来
# 做成一个推荐集合(即精选,文章类暂时排除在外)
# 文章可以在原始信息中进行查看
[2021/04/20.md] --> [2021/04/toc.md] --> [Awesome]
[day - 原始信息] --> [month - 汇总筛选] --> [awesome - 推荐]
- 按日期进行原始信息收集,并在信息前打标签
- 资讯(
news
) - 工具(
tools
):chrome
,docs
,dev
等 - 前端(
fe
):node
,webpack
,vite
,vue
,react
等 - VS Code(
vsc
) - WebAssembly(
wasm
) - 编程语言(
lang
):rust
,go
,python
等 - 其他(
other
): 难以界定的统一分类到其他
- 资讯(
- 月底对本月信息汇总分类(对信息进行筛选)
- 汇总状态
汇总中...
- 📅 起止日期汇总完成
- 📅 起止日期
项目初衷
此活动是由云谦在微信朋友圈发起的,因为后入群的人其实是看不到之前人的分享的,微信群外的人更不可能看到。既然是在做有意义的事情,就想把这些东西沉淀下来,可以去长时间翻阅。“卷”
这个词相信也是最近一两年在技术圈看到最多的一个字。没有信息会让人变得焦虑,💥信息爆炸会让人变得更加焦虑。唯一可以让自己变得不焦虑的途径,就是静下心来,按照自己的节奏,持之以恒。
此项目创建的初衷也并非是为了让大家变得焦虑,而是希望站在一个更广阔的角度,去对信息做一层筛选。因为目前所有的收集是群友自荐,自己对文章和技术的理解,都是原始信息记录,还望大家酌情参考。
CC0-1.0 License | Copyright © 2021 fe-cool
精选
随着信息收集工作的进行,我(lencx
)发现其中有很多的工具
,应用
,技术指南
,编辑器
之类的东西,就想把它们抽离出来,单独进行分类维护。故开辟了精选
分类。
Guide
- Developer Roadmaps - Step by step guides and paths to learn different tools or technologies (包含前端,后端,运维,安卓,数据库,react等)
- Web Development for Beginners - A Curriculum - 24 Lessons, 12 Weeks, Get Started as a Web Developer
- React Interview Questions & Answers - List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
- Top JavaScript Trends to Watch in 2021
- CSS 奇技淫巧 - 不仅是为了拓宽解决问题的思路,更涉及一些容易忽视或是十分有趣的 CSS 细节
- Modern CSS Solutions for Old CSS Problems - A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 13+ years.
- A practical guide to TypeScript decorators
- The TypeScript Handbook
- Rust 入门 - 微软学习文档
Tools
Weekly
- jondot/awesome-weekly - 来自软件界的优质每周精选新闻通讯的精选列表
- zudochkin/awesome-newsletters - 精选的精选新闻通讯清单
- zenany/weekly - 汇总平时看到的好文章,前端技术 & 产品研发为主...
- 印记中文 - React Status Weekly
- awesome-lowcode - 国内低代码平台从业者交流
- 飞猪前端团队
- JavaScript 文章精选月刊
- ECMAScript双月报告
- 湾区日报 - 关注创业与技术,每天推送3到5篇优质英文文章
- sorrycc/weekly - 前端周刊,每周一发布。
Application
Cross-platform
- Typora - A new way to read & write Markdown
- Notion - All-in-one workspace
- SourceTree - Simplicity and power in a beautiful Git GUI.
- f.lux - Software to warm up your computer display at night, to match your indoor lighting.
MacOS
- awesome-mac - Now we have become very big, Different from the original idea. Collect premium software in various categories.
- CheatSheet - Know your short cuts
- Xnip - Handy Screenshot App for Mac
- Bob - Bob 是一款 Mac 端翻译软件,支持划词翻译、截图翻译以及手动输入翻译。
- thor - Switch the right application ASAP.
- Runcat - The cat takes up residence in your Mac's menu bar, and he just keeps running!
- Kap - An open-source screen recorder built with web technology
- ImageOptim - Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality.
- MarginNote - A brand new e-reader to better study and digest your books.
- Things - The all-new Things. Your to-do list for Mac & iOS
- iStat Menus - An advanced system monitor for your menubar.
- iTerm2 - iTerm2 is a replacement for Terminal and the successor to iTerm.
- Maccy - Clipboard manager for macOS which does one job - keep your copy history at hand. Period.
- Hidden Bar - An ultra-light MacOS utility that helps hide menu bar icons
- Rectangle - Move and resize windows on macOS with keyboard shortcuts and snap areas.
- Dropover - Dropover is a utility that makes it easier to manage and move content between folders, applications, windows and workspaces using Drag and Drop.
Windows
VS Code
News
2021.04
汇总完成
- 📅 2021.04.14 ~ 2021.04.30
Tools
- tooling.report - 为您的下一个 Web 项目确定最佳构建工具的快速方法,或者是否值得进行工具迁移,或者如何在现有配置和代码库中采用工具的最佳实践。
- docmirror/dev-sidecar - 开发者边车,github 打不开,github 加速,git clone 加速,git release 下载加速,stackoverflow 加速
- natto.dev | interactive JavaScript space
- Powerful, Extensible Dev Tools
- Fusuma - 使用 Markdown 轻松制作幻灯片。
- rive - 基于 Flutter 开发的网页端动画制作工具(站点支持 PWA) 提供 Web(基于 wasm)、Flutter、Cpp、iOS、Android 五种运行时。
- Learn Git Branching - 是在web上学习Git最直观、最具交互性的方式;通过挑战关卡,逐步学习Git的特性,使学习过程具有乐趣
- GitHub520 - 让你“爱”上 GitHub,解决访问时图裂、加载慢的问题。(无需安装)
- estimator.dev - Calculate the size and performance impact of switching to modern JavaScript syntax
- Mermaid - 可以使用文本和代码创建图。这简化了复杂图的维护。它是一个基于Javascript的图表绘制工具,可以用Markdown文本来定义各种复杂图表,流程图,顺序图,类图,甘特图,状态图,饼图等。
- Photopea.com - a free online tool for editing raster and vector graphics with support for PSD, AI, and Sketch files.
- Portainer - Making Docker and Kubernetes management easy.
- Logoly Pro - A Simple Online Logo Generator
- web IDE - 在线写合约,做区块链的前端同学可参考
- Devops元素周期表,包含了Devops案例学习,模式原则,最佳实践等
- moiva.io - 工具类站点,可用于评估和比较类库,寻找替代库
- github1s - 将 github 更改为 github1s 可以查看编辑源码
- Pull - a GitHub App that keeps your forks up-to-date with upstream via automated pull requests.
- mdbook - Create book from markdown files. Like Gitbook but implemented in Rust.
- chrome 拓展程序 - 每天爬 Github Trending 热门 Repo
- use-what-changed - 一个便于调试 react hook 中依赖项列表变化的小工具
- Prisma tools are ready for production today!
- openbase - 工具类站点,寻找类库的工具
- Wappalyzer - 可以查看网站的技术栈以及使用的相关工具和服务。
- jExcel - 轻量级的 vanilla javascript 插件,用于创建与 Excel 或任何其他电子表格软件兼容的基于 Web 的交互式表格和电子表格
- 用于构建交互式流程图的库,reactflow,官网,egoist/flowkit
- Infinity - New Tab - 浏览器新标签页,可以定制自己想要的
- wox - An effective launcher for windows
- Notion - 知识管理工具。无限树层级的笔记结构,可以自建数据库管理目标/待办/人脉等资源。
- uTools - 生产力工具集,自由集成丰富插件(可自主开发),快速匹配「场景功能」
- Marp - Markdown 转 PPT,可自定义模板,配套 VSCode 工具,PPT 制作不再愁
- LICEcap - 小巧的 gif 生成器,可配置 gif 帧率、压缩参数等,demo 演示好帮手
- Global Speed - Web extension that sets a default speed for HTML media elements (video and audio).
- tinypng - 在线压缩图片,压缩之后清晰度还不错!
- cusdis - 极简的网站嵌入评论工具
- Excalidraw - 手绘风格的画图工具,支持 svg、png 格式的导出,支持 PWA,支持协作。
- Things - 一款非常优秀的 GTD 工具
- 调试页面 - 可以用来 debug 微信的 webview ,仅支持 android
- blockly - 一个 Google 的有点像少儿编程的工具
- vue-trend - 超级小的图表库
- shadow1ng/fscan - 一款开源内网综合扫描工具,方便一键自动化、全方位漏扫扫描。例如:web 指纹识别、web 漏洞扫描、netbios 探测、域控识别等。
- js AST 可视化解析 - 可以转 svg ,png,帮助你 AST 语法结构
- AdGuard - 一款去广告的 google chrome 扩展程序, 也有软件版本, 但不免费, 且不太需要, 基本的能力已经挺符合了
- IDM - 下载工具、断点断续、多线程、甚至 google drive 也可以断点断续, 相对稳定的媒体嗅探, bilibili youtube p* 等都可以出现浮窗 可以下载.
- snipaste - 有免费版本,截图 贴图 取色 方便的取历史图片 各种标记。
- charles - 一款抓包修改工具
- FeHelper - 一款 google chrome 扩展程序, Web 前端助手,扩展功能很多
- lighthouse - 网页检测工具,可以直观展示页面性能,性能优化建议,搜索引擎优化建议等
- Markdown Viewer - 在浏览器预览 markdown 的谷歌插件(有时会对 github 的 README-*.md 有副作用)
- Personal Blocklist - 谷歌搜索屏蔽不需要的网站,谷歌插件
- Carbon - 生成好看的代码图片
- Octotree - 可以更加友好地让你去浏览阅读 GitHub 上的项目。
- OneTab - 一键解决浏览器打开页签多,内存占用大。
- LastPass - 非常好用的密码管理工具。
- iStat Menus - 一款系统状态监控工具。
- sourceTree - 一款可视化 git 管理工具。
- draw.io - 免费客户端、网页版都有的画流程图工具,功能强大。
- pocket - 谷歌浏览器插件,用来随手看到好的文章很方便地收藏
- Online text to diagram tools
- 可视化解析 npm 包依赖项目
- Avatar Maker - Create your own avatar with Vue Avatar Maker app.
- Regulex - JavaScript Regular Expression Visualizer.
- CSS Gradient - As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
- ADB - 实际开发中app内嵌webview很常见,但是安卓环境调试,出了开模拟器,可以试试adb插件,很好用
- calendso - 知名日程安排工具(Calendly)的开源替代品。
- fscan - 一款内网综合扫描工具,方便一键自动化、全方位漏扫扫描。
- JS Tooling not in JS - A curated list of JavaScript tooling not written in JavaScript
- why-did-you-render - 通过 monkey patches React 来通知您可能可以避免的 re-renders,同时适用于 react-native
- transform - 支持各种代码转化的工具,SVG、JSON、TS、GraphQL、CSS、SQL,只要你能想到的这里都有。光 JSON 就可以转化为十几种代码格式,如把 JSON 转化成 Flow、Go、GraphQL、Typescript、Kotlin、MySQL、YAML等。本项目开源,你可以通过代码学习到它是如何进行格式转换的。
Open Source
- yjs - 一个新的基于CRDT的开源数据协同框架,常用来做在线编辑产品
- 腾讯开源: Vap - 企鹅电竞开发,用于播放酷炫动画的实现方案,Android, iOS, web 通用。
- rn-range-slider - A highly optimized and fully customizable pure JS component for value range selection.
- Duilib 一个Windows下免费开源的DirectUI界面库,腾讯、网易都在用
- EasyFaaS - EasyFaaS是一个依赖轻、适配性强、资源占用少、无状态且高性能的函数计算服务引擎
- 喵语翻译 - 将人类语言翻译为喵语言
- dagre - Graph layout for JavaScript
- WinBox - 是用于Web的专业HTML5窗口管理器:轻巧,性能出色,无依赖项,完全可自定义,支持最大化,最小化,自由拉伸及拖动等
- esmon - 类似 nodemon 但基于 esbuild,支持 ts 等
- Recoil - A state management library for React
- pullstate - Simple state stores using immer and React hooks - re-use parts of your state by pulling it anywhere you like!
- react-amap - 基于 React 封装的高德地图组件,助你轻松的接入高德地图到 React 项目中。
- nodejs 源码解析
- Run multiple promise-returning & async functions with limited concurrency
- vite-plugin-vue-gql - GraphQL Tags for your Vue SFC
- libp2p-rs - rust 实现的 libp2p
- rbatis - 用 rust 实现 ORM 框架
- iced - rust 9.2K 跨平台 GUI 仓库
- swc - rust 编写的超快速的 typescript/ javascript 编译器
- 北海 - 基于 Flutter 的 Web 渲染引擎正式开源
- FicusJS - 基于 webcomponent 实现的轻量开发库
- LogicFlow - 滴滴开源,专注流程可视化的前端框架
- APIJSON - 腾讯开源
- material-tailwind - 基于 react、material、tailwind 开发的组件库
- react-to-print - react 中指定打印节点而并不需要写内联样式的库
- Eva.js - Eva.js is a front-end game engine specifically for creating interactive game projects.
- rtk-query - 基于 redux toolkit 的 data fetch 和 caching 工具,还在用 redux 的可以关注下。
- Finished Proposals - Finished proposals are proposals that have reached stage 4, and are included in the latest draft of the specification.
- pytorchjs - Torch and TorchVision, but for NodeJS.
- NPlayer - 无任何第三方运行时依赖,兼容 IE11,支持 SSR。高度可定制,可二次开发。和 B 站一样体验的弹幕系统。可以接入任何流媒体,支持直播。
- ReactFlow - Highly customizable library for building interactive node-based UIs, editors, flow charts and diagrams.
- Fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
- framer/motion - Open source, production-ready animation and gesture library for React
- awesome-f2e-libs - 整理我(云谦)平时关注的前端库
- translate.css - Drop-in CSS transitions
- ChatUI - 对话式交互应用UI库,达摩院开源作品
- DSBridge-Android - A modern cross-platform JavaScript bridge, through which you can invoke each other's functions synchronously or asynchronously between JavaScript and native.
- javascript-state-machine - A javascript finite state machine library
- windicss - Next generation utility-first CSS framework.
- replay - A React video player facilitating adaptive stream playback with custom UI and a React-friendly API.
- vue3-markdown-it - An awesome Vue 3 markdown-it wrapper plugin that can even support external plugins!
- code-to-graph - Transforms code (JS) into graphs (graphviz, mermaid flowchart, ...)
- @pansy/watermark - watermark component
- air-conditioner - 云空调,便携小空调,为你的夏日带去清凉!
Guide
- The TypeScript Handbook
- Web Development for Beginners - A Curriculum - 24 Lessons, 12 Weeks, Get Started as a Web Developer
- Developer Roadmaps - Step by step guides and paths to learn different tools or technologies (包含前端,后端,运维,安卓,数据库,react等)
- Rust 入门 - 微软学习文档
- React Interview Questions & Answers - List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
- CSS 奇技淫巧 - 不仅是为了拓宽解决问题的思路,更涉及一些容易忽视或是十分有趣的 CSS 细节
- 现代 JavaScript 教程
- WebGL 理论基础 - 一系列文章,从零开始,并有大量代码示例
- TypeScript 和 React 优质指导
- vis-network - 网络可视化的 R 包,使用的是 vis.js,中文文档
- A Complete Guide To Incremental Static Regeneration (ISR) With Next.js
- 10 GitHub Repositories every Developer should know
- free-books - 互联网上的免费书籍
- Web Design & UI Inspiration with Code Snippets
- Flexbugs - A community-curated list of flexbox issues and cross-browser workarounds for them.
- Keeping up with React Libraries
- mastering-chrome-devtools - Website for teaching Chrome DevTools
- FIRT - 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.
- 400 条 JavaScript 面试题(带答案)
- 互联网黑话词汇表 - 适当学习,提升逼格 - 互联网黑话词汇表,包含“赋能、抓手、闭环、沉淀、打通”等阿里味儿词汇
Weekly
- jondot/awesome-weekly - 来自软件界的优质每周精选新闻通讯的精选列表
- zudochkin/awesome-newsletters - 精选的精选新闻通讯清单
- zenany/weekly - 汇总平时看到的好文章,前端技术 & 产品研发为主...
- 印记中文 - React Status Weekly
- awesome-lowcode - 国内低代码平台从业者交流
- 2020 js 调查报告
- 湾区日报 - 关注创业与技术,每天推送 3 到 5 篇优质英文文章
- JavaScript 文章精选月刊 - 文章在持续更新
- ascoders/weekly - 前端精读周刊。帮你理解最前沿、实用的技术。
VS Code
- Github Theme
- Keyboard shortcuts for Windows
- Keyboard shortcuts for macOS
- Partial Diff,vscode 插件,git 的单文件 diff 功能,对选定内容进行比对。
- Todo Tree - vscode 插件,收集项目中你所有代码中备注
todos
。 - CodeMetrics - vscode 插件,计算 ts / js / lua 代码的复杂度,帮助我们更好的重构代码。
- Volar - Volar是专门为Vue 3构建的语言支持插件。它基于@ vue / reactivity,可按需计算TypeScript以优化性能,类似于本机TypeScript语言服务。
APP
- CheatSheet APP(mac) - 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. - macos in preact - 源码
- typora - 跨平台 md 编辑器
- Xnip - mac 端下比较好的截图软件,支持打码、步骤标注等常用功能
- Bob - 翻译软件,支持划词翻译和截图 ocr 翻译,注意服务配多点效果比较好,多个翻译服务对照着看
- thor - 通过快捷键一键切换和隐藏各种软件(老板键?),搭配 Karabiner Element 修改右 command 为 hyper 键可进一步提升快捷键的选择空间
- Runcat - 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.
- Unsplash Wallpapers - Bringing you thousands of magical moments to your screens.
- Kap - 非常好用的 gif 截屏 小工具
- ImageOptim - 使图像加载更快 删除肿的元数据。通过压缩映像节省磁盘空间和带宽,而不会降低质量。支持多种图片格式,自定义压缩质量
- MarginNote - 整理知识地图,构建自己的知识体系,强烈推荐在 iPad Pro 上搭配 pencil 使用
- meld - 基于bedrock的脚手架搭建
- vue-luck-draw - Vue 写的一个抽奖类库
- pap.er, 专为 Mac 设计的壁纸应用 每天享受来自全球新鲜精美的壁纸
- Maccy - 随时保留复制历史记录,轻巧快捷
- f.lux - 屏幕蓝光过滤
- Hidden Bar - 隐藏 mac 菜单栏图标
- Rectangle - 使用快捷键快速调整窗口大小及位置
- Dropover - Dropover is a utility that makes it easier to manage and move content between folders, applications, windows and workspaces using Drag and Drop.
WebAssembly
- Learning WebAssembly Series - webAssembly 系列入门文章,从代码示例到原理讲解
- WebAssembly 入门 (Vite + Rust)
- NoteCalc - 带有智能内置计算器的便捷记事本。功能强大,使用 webAssembly+canvas 构建应用。
- Telegram React - based on the ReactJS JavaScript framework and TDLib (Telegram Database library) compiled to WebAssembly。
- Ant Design of Blazor - WebAssembly 版本的 antDesign,语法类似 tsx。
- v86 - v86模拟与x86兼容的CPU和硬件。 机器代码在运行时转换为WebAssembly模块,以实现良好的性能,支持多种仿真硬件。
Algorithms
- JavaScript Algorithms and Data Structures - Algorithms and data structures implemented in JavaScript with explanations and links to further readings
- Content-aware image resizing in JavaScript
Terminal
- tools/terminal - lencx自用
- thefuck - 命令行神器,当输错 linux 命令,fuck 一下,提示你可能想输入的命令。
- kenshinji/yddict - 一个命令行查单词的工具
- Fig - adds VSCode style autocomplete to your terminal
- iterm2 - 一款命令行终端模拟器,(iTerm2 + Oh My Zsh 一套相关配置大大提升效率)
Community
Micro Frontends
- 面向大型系统的微前端解决方案
- icestark - 面向大型系统的微前端解决方案
- m-app - 新一代微前端解决方案,微应用容器组件,对 DOM、CSS、JS 进行硬隔离,达到真正的技术栈无关,并且运行时集成,微应用可独立开发、部署、升级。使用如 iframe 般简便,却超脱 iframe 的局限,你值得一试!
Icons
- IconPark - 字节跳动出品的高质量开源图标
- 700+CSS Icons - Open-source CSS, SVG and Figma UI Icons. Available in SVG Sprite, styled-components, NPM & API.
Low Code
- sparrow - 场景化低代码(LowCode)搭建工作台,实时输出源代码
- yoma - 一个小而美的低代码全栈开发平台,一键生成后端api接口+前端页面代码+在线接口文档,节省50%的前后端开发的工作量,平台代码100%开源。平台适用于企业信息化、政务、中小型互联网等项目
- citrus - 低代码快速开发脚手架,灵活、高效,降低开发成本
- vue-low-code - Quant-UX standalone
🎉 彩蛋
: 如何信息获取?
-
云谦
:我的信息来源主要这些- twitter 新建个 list 关注国内外前端大牛,然后按 top 排序
- github 1) 通过 watch > custom > Releases 订阅感兴趣库的 release 信息 2) follow 一些人
- 邮箱订阅各种 weekly 邮件列表
- rss 订阅,来源很杂 信息流的方式基本没变,可参考两年前花的图,《2019-04-sorrycc-我的输入信息流》
-
xiaohuoni
: 我的信息输入较少,更多喜欢从纸质书籍上得到信息。- 当当图书推荐榜-优先计算机,语言类。
- github 首页,主要是通过关注的人的动态,还有explore里面的推荐
- dev.to 通过 tags 过滤,也关注热度榜单。dev开源之前是我的主要信息来源。一直想着做一个国内站点,开源的时候,看了一下技术栈与我掌握的差异太大。反而连这个网站都少上了。
- 云谦早报和他个人动态现在是我的主要信息来源。
- 阮一峰的周报,issues区有很多信息 ruanyf/weekly
-
浩明
: 我的信息来源主要这几个博客和平台- github 上 follow 的动态
- Jake Archibald 博客
- Dan Abramov 博客
- David Walsh 博客
- 阮一峰,张鑫旭 的博客
- 公众号,知乎
💭 补充
: 我本人lencx
也 follow 过许多国外大牛,因为人数太多暂时无法整理出来,感兴趣的可以查看
-
twitter
: 排名不分先后,由于时间原因,只列取了部分,大家可以根据follow后的推荐自行关注
2021.04.14
-
tools
Google工程师Surma和其他人一起打造了一个评价打包工具优劣的开源项目tooling.report -
news
英文技术推文情报源: -
tools
开发者边车,github打不开,github加速,git clone加速,git release下载加速,stackoverflow加速
2021.04.15
-
BarcodeDetector 结合 navigator.getUserMedia(摄像头) 可用于识别二维码
-
tools
nx,看了介绍视频,挺成熟的一个复杂项目管理工具,不仅仅是 monorepo,还解了 monorepo 的一些潜在问题,值得深入了解下 -
css
headless ui 发布 1.0,无样式的组件库,和 tailwindcss 结合使用,但看文档没看出是如何结合的。 -
deno
deno 1.9 支持 import completions in the lsp 如果未来是 bundless,这和 remote dts 应该都会成为 esm cdn 的基础设施 -
docs
mdbook是由rust编写的静态网站生成器,速度极快,支持多主题,LaTex,mermaidjs,导出pdf,插件等,功能强大。 -
js
chrome
Feature: ES Modules for service workers ('module' type option) -
chrome
Chrome 90 值得关注的点包括 1) overflow: clip 2) 声明式的 shadow dom,适用于 ssr -
webpack
webpack 5.33,支持针对不同 entry 配置不同的 publicPath,暂时想不到应用场景 -
fe
other
一个关于控制异步函数并发运行的方法库。 -
fe
other
The Complete Guide to Full Stack Ethereum Development,以太坊开发指南,刚听完偏右分享完这个,还是挺有意思的,生态很完整
2021.04.16
-
vsc
theme
VSCode 里可以用 Github 主题了 -
babel
Babel 新增 Feature Timeline,把之前 changelog 里的重要功能摘了出来,一目了然 -
react
可以用 React 做视频的 remotion 发布 2.0,支持音频,使用 esbuild-loader 代替 babel-loader,<Gif> 组件等 -
tools
Fusuma 一款文档演示工具,可根据一定的标识将文档分割成不同页面,以 slide 的形式进行分享。以 ppt 的形式演示文档,能更好的突出重点。在 lerna 的管理下,项目结构很清晰,适合直接部署或者二次开发,比如基于它扩展出手机端的翻页笔、标注工具之类的。甚至可以集成在博客里,直接启动 slide -
tools
rive2 (rive1 === flare) - 基于 Flutter 开发的网页端动画制作工具(站点支持 PWA) 提供 Web(基于 wasm)、Flutter、Cpp、iOS、Android 五种运行时,集成起来挺方便的。同时也体现了 Flutter Web 的表现能力,使用体验还不错。 -
rust
rbatis 用rust实现ORM框架
2021.04.17
-
node
node 10 还有十几天就结束维护了,新开工具可以考虑默认 esm -
other
remix 启动只要 100ms,背后基于 esbuild,但还是很大优化空间,之前试过加个大型依赖热编译就慢了 -
lowcode
国内低代码平台(Low Code),收集了国内外很多优秀的项目,还包含有“今日阅读”每天更新最新相关文章 -
Seam-Carving 算法的解析及 ts 实现 图片 resize 必备,作者讲得很详细,且后有 ts 干货。属于“有理有具体”的好文
-
chrome
debug
一份Chrome调试技巧合集 涉及console network element source 等 -
node
新书情报,腾讯的imweb nodejs大佬theanarkh的《nodejs源码解析》宣布不上架,将于近日开源 -
node
标哥的nodejs源码解析 -
react
vue
在 React 中使用 Vue3 的 Composition API -
deno
deno1.9发布了。新增特性:- 原生 HTTP/2 Web 服务器
- 使用 serde_v8 更快地调用 Rust
- 支持 Blob URL & 优化fetch
- 在 LSP 中支持自动补全 import
- 具有交互的权限提示
2021.04.18
-
chrome
Google的.new快捷方式,Google为Google文档、幻灯片和表格引入了方便的“ .new”快捷方式,网站运营方也可以注册自己在线快捷方式的.new域,例如:- 新建Google文档:docs.new
- 新建Google幻灯片:slides.new
- 新建Google表格:sheets.new
- Spotify新建播放列表: playlist.new
- Medium新建文章:medium.new
-
wasm
tools
NoteCalc带有智能内置计算器的便捷记事本。功能强大,使用webAssembly+canvas构建应用。 -
vite
项目中vite遇到的坑收集。 -
react
react-hook-form v7,React Hooks for forms validation (支持Web+RN), -
tools
😘 让你“爱”上 GitHub,解决访问时图裂、加载慢的问题。(无需安装) -
fe
docs
微软开源项目 - 面向初学者的Web开发-课程,包含视频,插图笔记,任务,补充阅读,课后测验等。 -
docs
tools
新文章:“腾讯开源的酷炫动画播放解决方案Vap初体验” - H5中希望有炫酷3D动效,但是3D WebGL实力不允许,可以试试使用本文要介绍的VAP,导出PNG图片序列,可以有高性能的炫酷动画效果,Android和iOS也可以使用。 -
fe
docs
微前端在美团外卖的实践。
2021.04.19
-
react
329 道 react 面试题,质量还挺高 -
ts
docs
新出的 TypeScript 小册,微软最近出了好多教程 -
rust
微软的Rust入门教程,确实如云谦所说,微软最近搞了好多教程 -
chrome
docs
chrome90增加shadow dom的SSR支持,具体可见博文 (撰文作者之一是Miller preact作者 -
c++
Duilib 一个Windows下免费开源的DirectUI界面库,腾讯 网易都在用 -
vue
ts
docs
知乎问题:《为什么我感觉 Vue 3 TypeScript 还是不行?讨论关于 Vue3 + TypeScript 的体验》 -
git
tools
Git教程,"Learn Git Branching"是在web上学习Git最直观、最具交互性的方式;通过挑战关卡,逐步学习Git的特性,使学习过程具有乐趣 -
js
tools
yjs,一个新的基于CRDT的开源数据协同框架,常用来做在线编辑产品 -
vite
deno
借助vite探索性的实现了在deno中以非url的方式引入一个包 -
vite
gql
vite 插件 vite-plugin-vue-gql 可以轻松在 vue 文件编写 graphql -
go
依赖性,高性能的函数计算服务引擎。适用于边缘计算、loT等,最近开源。 -
devops
Devops元素周期表。包含了Devops案例学习,模式原则,最佳实践等等 -
js
一个帮你分析如果代码全部用 Modern JavaScript 发布,可以节省多少开销的网站 -
docs
循序渐进的指南和路径,以学习不同的工具或技术,包含前端,后端,运维,安卓,数据库,react等 -
docs
腾讯ISUX:探索“流畅感”—谈手势动效体验设计 -
wasm
docs
面向初学者的一系列webAssembly入门文章,从代码示例到原理讲解,值得一看 -
mermaid
js
markdown
Mermaid可以使用文本和代码创建图。这简化了复杂图的维护。它是一个基于Javascript的图表绘制工具,可以用Markdown文本来定义各种复杂图表,流程图,顺序图,类图,甘特图,状态图,饼图等。 -
react
React Status 中文周刊 #36 - 使用 Deno 构建 React 应用指南 -
fe
icons
IconPark - 字节跳动出品的高质量开源图标 -
js
eslint
一个更好看的ESLint formatter,可读性更好
2021.04.20
-
vsc
app
作者推荐十个有用的vscode快捷键,可以用来提高效率,但是常用快捷键还有很多,附上windows和mac快捷键表,配合快捷键提示CheatSheet APP(mac)效果更佳。 -
css
Real-world CSS vs. CSS-in-JS performance comparison - 如果关心性能,不要用 runtime 的 css-in-js,less js = faster site,尤其是针对低端机来说。 -
react
wasm
Telegram React,基于 react、tdlib(Telegram Database Library) 和 webassembly。 -
vite
vite 发布 2.2 - 支持配置 cacheDir,vite.config.ts 支持 async 返回,config 和 configResolved hook 支持 promise 等。 -
react
基于 immer 和 hooks 的数据流方案 -
lang
喵语翻译 - 将人类语言翻译为喵语言 -
react
react 样式方案,主要是通过 tag 提供类型支持和语法提示 -
other
GitHub Actions 被滥用挖矿 -
rn
目前我能找到比较优秀的可用的开源 RN range-slider 组件,帮助我完成了需求。 -
css
CSS 奇技淫巧 - 不仅是为了拓宽解决问题的思路,更涉及一些容易忽视或是十分有趣的 CSS 细节。 -
tools
Photopea 可能大家都用过,为了能在拓展业务(私活)上能用上imgcook,不管是哪家的设计图,动动手都能转成sketch,可能是ps的脚本太烂,大家都不愿意开发拓展。用这个工具把设计图转来转去,折腾下来,看自己感觉,可能有点还不如自己切图快。 -
tools
一个自动同步github fork代码的pull机器人 -
webpack
手写easy webpack 帮助大家熟悉AST是什么东西。 -
other
从新生产资料到新战略资源 -
docker
docker图形工具 -
vue3
尤雨溪在知乎热情问候网友,vue3现阶段支持ts以及tsx的现况 -
fe
最新的前端框架性能对比,能打架就别吵吵。 -
fe
desktop
WinBox是用于Web的专业HTML5窗口管理器:轻巧,性能出色,无依赖项,完全可自定义,支持最大化,最小化,自由拉伸及拖动等。 -
other
什么是函数式编程思维? -
js
用于图布局的JS库 -
logo
个人博客logo设计 -
ide
web IDE - 在线写合约,做区块链的前端同学可参考 -
tools
moiva.io - 工具类站点,可用于评估和比较类库,寻找替代库
2021.04.21
-
fe
guide
现代JavaScript教程 -
react
threejs
酷炫的幻灯片效果,基于 @react-three 和 react-use-gesture,demo 及 源码 -
node
node 发布 16 官方 darwin-arm64 包,不用手动编译了,RegExp match indices,Atomics.waitAsync 等 -
vue3
vue3可以跑vue2的组件库了,impossible!!! -
flutter
基于 Flutter 的 Web 渲染引擎「北海」正式开源,官网 -
micro-frontends
面向大型系统的微前端解决方案 -
fe
game
可能是前端同学必备的2D游戏优互动入门基础知识 -
chrome
每天爬 Github Trending热门Repo的chrome拓展程序 -
other
云空调,github repo -
webgl
WebGL 理论基础 - 一系列文章,从零开始,并有大量代码示例 -
js
2022第一个新语法 Class Fields -
browser
介绍浏览器幕后的工作原理 -
wasm
Ant Design of Blazor - WebAssembly 版本的antDesign,语法类似 tsx。 -
react
hook
use-what-changed - 一个便于调试react hook中依赖项列表变化的小工具 -
other
2020 js调查报告 -
css
《CSS 揭秘》 作者的博客 -
svelte
擅长前端编译,有从零编译 svelte 实现的系列 -
other
一个可以测试刷新率的网站 -
other
永久记录 米国政府JK全世界网络信息的真相 -
book
发现了这样一本免费电子书 《理解WebKit和Chromium》 -
react
graphql
卖 $450 的 React + Next.js + GraphQL 脚手架 -
orm
Prisma tools are ready for production today!- Prisma 官方的工具链今天 production ready 了。
- Prisma 是一个很强大的面向现代前端的 ORM,上文提到的 $450 脚手架 Bedrock 也有集成它。再有如果前面分享里所说的前端领域模型能够展开,配合 Prisma 实现 adapters 应该是个不错的选择。
-
preact
macos in preact - 源码 -
tools
openbase - 工具类站点,寻找类库的工具 -
news
飞猪前端团队 -
blog
Kent C. Dodds blog -
news
JavaScript文章精选月刊 -
news
ECMAScript双月报告 -
rss
如果你的信息流中心主要是 RSS,那么关注 Github 的一些消息,可以使用官方提供的 RSS:- 仓库 releases:
https://github.com/:owner/:repo/releases.atom
- 仓库 commits:
https://github.com/:owner/:repo/commits.atom
- 用户动态:
https://github.com/:user.atom
- 仓库 releases:
-
other
vis-network - 网络可视化的R包,使用的是vis.js,中文文档 -
lowcode
云凤蝶 - 低代码搭建平台 , lowcode前端的一种技术实现方案 -
svg
25个SVG渐进教程 -
js
pytorchjs - JS版的深度学习库,集成了常见的深度学习模型,可以在前端跑一些简单的模型 -
react
从中断机制看 React Fiber 技术 -
rss
是一个开源的在线 RSS 阅读服务,旨在为 IT 从业者提供一个优质的学习圈子。
🎉 彩蛋
: 如何信息获取?
-
云谦
:我的信息来源主要这些- twitter 新建个 list 关注国内外前端大牛,然后按 top 排序
- github 1) 通过 watch > custom > Releases 订阅感兴趣库的 release 信息 2) follow 一些人
- 邮箱订阅各种 weekly 邮件列表
- rss 订阅,来源很杂 信息流的方式基本没变,可参考两年前花的图,《2019-04-sorrycc-我的输入信息流》
-
xiaohuoni
: 我的信息输入较少,更多喜欢从纸质书籍上得到信息。- 当当图书推荐榜-优先计算机,语言类。
- github 首页,主要是通过关注的人的动态,还有explore里面的推荐
- dev.to 通过 tags 过滤,也关注热度榜单。dev开源之前是我的主要信息来源。一直想着做一个国内站点,开源的时候,看了一下技术栈与我掌握的差异太大。反而连这个网站都少上了。
- 云谦早报和他个人动态现在是我的主要信息来源。
- 阮一峰的周报,issues区有很多信息 ruanyf/weekly
-
浩明
: 我的信息来源主要这几个博客和平台- github 上 follow 的动态
- Jake Archibald 博客
- Dan Abramov 博客
- David Walsh 博客
- 阮一峰,张鑫旭 的博客
- 公众号,知乎
💭 补充
: 我本人lencx
也 follow 过许多国外大牛,因为人数太多暂时无法整理出来,感兴趣的可以查看
-
twitter
: 排名不分先后,由于时间原因,只列取了部分,大家可以根据follow后的推荐自行关注
2021.04.22
-
tools
chrome
Wappalyzer - 100 w+ 下载量,可以查看网站的技术栈以及使用的相关工具和服务。 -
js
jExcel - 轻量级的vanilla javascript插件,用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格 -
js
guide
基于 Next.JS 的 Incremental Static Regeneration (ISR) 指引 新名词 ISR,增量的静态页面生成,适用于内容型站点 -
terminal
由于配置及插件过多,以链接形式分享tools/terminal -
flowchart
用于构建交互式流程图的库,wbkd/react-flow,网站,egoist/flowkit -
browser
浏览器新标签页,可以定制自己想要的标签infinity -
terminal
thefuck - 命令行神器,当输错linux命令,fuck一下,提示你可能想输入的命令。 -
redux
rtk-query - 基于 redux toolkit 的 data fetch 和 caching 工具,还在用 redux 的可以关注下。 -
tools
Everything (Windows search tool 毫秒级响应) -
tools
wox - An effective launcher for windows -
app
typora - 跨平台md编辑器 -
app
Xnip - mac 端下比较好的截图软件,支持打码、步骤标注等常用功能 -
app
Bob - 翻译软件,支持划词翻译和截图 ocr 翻译,注意服务配多点效果比较好,多个翻译服务对照着看 -
app
thor - 通过快捷键一键切换和隐藏各种软件(老板键?),搭配 Karabiner Element 修改右 command 为 hyper 键可进一步提升快捷键的选择空间 -
app
Runcat - 每个人看到我的电脑都会问这个猫是干啥的,菜单栏猫跑地越快 cpu 占用越高 -
app
wallpaper
Unsplash Wallpapers,mac 下壁纸日更软件,让你在办公室看景 -
tools
Notion - 现体验最好的自用知识管理工具。无限树层级的笔记结构,可以自建数据库管理目标/待办/人脉等资源,十分适合程序员,可以让工具根据你的生活模式定制;Notion安利 -
vsc
Partial Diff,vscode 插件,能够对选定的两部分内容进行内容比对,等于 git 的单个文件 diff 功能 -
vsc
Todo Tree - vscode 插件,收集项目中你所有代码中备注遗留要做(也许不会)的事情,让你成为时间管理大师 -
tools
uTools生产力工具集,自由集成丰富插件(可自主开发),快速匹配「场景功能」,用完即走 -
app
Kap - 非常好用的 gif截屏 小工具 -
vsc
CodeMetrics - vscode插件,用来计算 ts / js / lua代码的复杂度,帮助我们更好的重构代码。 -
tools
Marp - Markdown 转 PPT,可自定义模板,配套 VSCode 工具,PPT 制作不再愁 -
tools
LICEcap - 小巧的 gif 生成器,可配置 gif 帧率、压缩参数等,demo 演示好帮手 -
tools
加速视频播放速度,最高16倍。 -
tools
tinypng - 在线压缩图片,压缩之后清晰度还不错! -
app
ImageOptim - 使图像加载更快 删除肿的元数据。通过压缩映像节省磁盘空间和带宽,而不会降低质量。支持多种图片格式,自定义压缩质量 -
tools
cusdis - 极简的网站嵌入评论工具 -
app
MarginNote = 不仅仅是笔记,不仅仅上学看论文用,碎片化信息严重,整理知识地图特别重要,构建自己的知识体系,强烈推荐在 iPad Pro 上搭配 pencil 使用,MarginNote3,用过十几款软件之后唯一愿意付费使用的,没有之一 -
other
meld - 基于昨天的 $450 的脚手架搭建 -
tools
25个不可错过的实用前端工具  -
tools
Excalidraw - 手绘风格的画图工具,Dan Abramov 的 [Just JavaScript] 系列就用到了这个。支持 svg、png 格式的导出,支持 PWA,支持协作。 -
terminal
node
kenshinji/yddict - 一个命令行查单词的工具 -
app
tools
Things - 一款非常优秀的 GTD 工具 -
book
Lore Free - 首个基于EOS和IPFS的去中心化知识共享社区 -
fe
debug
调试页面 - 可以用来 debug 微信的 webview ,仅支持 android -
other
blockly - 一个Google的有点像少儿编程的工具 -
vue
chart
vue-trend - 超级小的图表库 -
vue
vue-luck-draw - Vue 写的一个抽奖类库 -
tools
shadow1ng/fscan - 刚开源一款内网综合扫描工具,方便一键自动化、全方位漏扫扫描。例如:web指纹识别、web漏洞扫描、netbios探测、域控识别等。 -
js
FicusJS - 基于webcomponent实现的轻量开发库 -
react
react 另外一种状态管理 GraphQL + TypeScript + React + Apollo -
tools
js AST 可视化解析 - 可以转 svg ,png,帮助你 AST 语法结构 -
serverless
美团公共服务serverless 云函数建设情况、架构、生态、业务落地收益 -
js
flowchart
LogicFlow - 滴滴开源,专注流程可视化的前端框架 -
react
logo
React China Logos - React + 中国结 -
react
Relay vs Apollo - 结合 React 的graphql两种客户端对比 -
other
APIJSON - 腾讯开源 -
other
柠檬精选 - 腾讯柠檬精选——收录免费、正版、好用的Mac产品 -
browser
AdGuard - 一款去广告的google chrome 扩展程序, 也有软件版本, 但不免费, 且不太需要, 基本的能力已经挺符合了 -
tools
IDM - 下载工具 断点断续 多线程 甚至google drive这种 也可以断点断续, 相对稳定的媒体嗅探, bilibili youtube p* 等都可以出现浮窗 可以下载. 荔枝上买正版30一年 -
tools
snipaste - 有免费版本 够用了 截图 贴图 取色 方便的取历史图片 各种标记 针不戳. -
other
xclient - MAC应用分享平台 -
tools
charles - 一款抓包修改工具, 操作简单但功能不错, 最近常用本地映射功能, 提升了调试效率 (1. 大部分本次调试不需要数据变动的接口, 不需要等待后端返回了 2. 如果需要造固化的调试数据, 也可以以文件的方式修改好 3. google chrome 控制台 networks 这个选项卡中, 可以右键屏蔽一些请求) -
browser
tools
FeHelper - 一款google chrome 扩展程序, Web前端助手,扩展功能很多 -
fe
tools
lighthouse - 网页检测工具,可以直观展示页面性能,性能优化建议,搜索引擎优化建议等 解析lighthouse检测流程 -
browser
Markdown Viewer - 在浏览器预览markdown的谷歌插件(有时会对github的 README-*.md 有副作用) -
browser
Personal Blocklist - 谷歌搜索屏蔽不需要的网站,谷歌插件 -
tools
Carbon - 生成好看的代码图片 -
other
wallpaper
pap.er, 专为 Mac 设计的壁纸应用 每天享受来自全球新鲜精美的壁纸 -
browser
Octotree - 可以更加友好地让你去浏览阅读GitHub上的项目。 -
browser
OneTab - 一键解决浏览器打开页签多,内存占用大。 -
tools
LastPass - 非常好用的密码管理工具。 -
app
tools
iStat Menus - 一款系统状态监控工具。 -
app
tools
iterm2 - 一款命令行终端模拟器,(iTerm2 + Oh My Zsh一套相关配置大大提升效率) -
app
tools
sourceTree - 一款可视化git管理工具。 -
news
湾区日报 - 关注创业与技术,每天推送3到5篇优质英文文章 -
tools
flowchart
draw.io - 免费客户端、网页版都有的画流程图工具,功能强大。 -
browser
pocket - 谷歌浏览器插件,用来随手看到好的文章很方便地收藏
2021.04.23
-
react
material-tailwind - 基于 react、material、tailwind 开发的组件库 -
tools
基于 text-to-chart 的一些在线工具 -
app
Maccy - 随时保留复制历史记录,轻巧快捷 -
app
f.lux - 屏幕蓝光过滤 -
app
Hidden Bar - 隐藏mac菜单栏图标 -
app
Rectangle - 使用快捷键快速调整窗口大小及位置 -
react
react-to-print - react中指定打印节点而并不需要写内联样式的库 -
serverless
伯克利谈 Serverless:服务器的存在,是云计算的大问题 -
terminal
Fig - adds VSCode style autocomplete to your terminal -
fe
game
Eva.js - Eva.js is a front-end game engine specifically for creating interactive game projects.
2021.04.24
-
svelte
SvelteKit is in public beta -
player
NPlayer - 无任何第三方运行时依赖,兼容 IE11,支持 SSR。高度可定制,可二次开发。和 B 站一样 -
micro-frontends
m-app - 新一代微前端解决方案,微应用容器组件,对 DOM、CSS、JS 进行硬隔离,达到真正的技术栈无关,并且运行时集成,微应用可独立开发、部署、升级。使用如 iframe 般简便,却超脱 iframe 的局限,你值得一试!
2021.04.25
-
windows
最新 Windows 10 预览版可以直接运行 Linux GUI 应用! - 演示视频 -
tools
Web Bundles - 将网站打包成单个文件通过蓝牙/wifi分享并离线运行 -
css
css 生成密码 -
tools
可视化解析 npm 包依赖项目 -
react
flowchart
ReactFlow - 构建图表和复杂交互编辑器。ReactFlow是一个基于HTML元素节点(div和svg等)的应用,支持从绘制静态图表到复杂的可交互编辑器等多种场景。它一个比较大的亮点是基于React框架,可以灵活编码实现想要的特性。 -
tools
Avatar Maker - 开源头像制作生成器,它提供了一些支持自定义五官的选项。
2021.04.26
-
js
Fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser -
js
regexp
Regulex - JavaScript Regular Expression Visualizer. -
app
mac
Dropover - Dropover is a utility that makes it easier to manage and move content between folders, applications, windows and workspaces using Drag and Drop. -
css
icon
700+CSS Icons - Open-source CSS, SVG and Figma UI Icons. Available in SVG Sprite, styled-components, NPM & API. -
tools
css
CSS Gradient - As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. -
js
webdev
10 GitHub Repositories every Developer should know
2021.04.27
-
vue3
What’s New in Vue 3 Ecosystem: Introducing Vite 2 with Evan You - 尤雨溪 4 月 26 日嘉宾做客播客 Enjoy the Vue 节目畅谈 Vue 3 生态新闻和 Vite 2 相关内容 -
book
互联网上的免费书籍 - 免费计算机书籍汇总。没有注明语种的,都为英语资源。 -
fe
f2e-journey - 我的前端之旅 - 前端最佳入门指南 -
css
Flexbugs - 社区管理的flexbox问题列表以及针对这些问题的跨浏览器解决方法。 -
vue3
vsc
Volar - Volar是专门为Vue 3构建的语言支持插件。它基于@ vue / reactivity,可按需计算TypeScript以优化性能,类似于本机TypeScript语言服务。 -
chrome
android
ADB - 实际开发中app内嵌webview很常见,但是安卓环境调试,出了开模拟器,可以试试adb插件,很好用 -
tools
calendso - 知名日程安排工具(Calendly)的开源替代品。 -
tools
fscan - 一款内网综合扫描工具,方便一键自动化、全方位漏扫扫描。
2021.04.28
-
js
blog
react
Gastby 发布 3.4 - 包含生产环境的物理缓存、更快的 CSS 库 Fast Refresh 等 -
react
Keeping up with React Libraries - 作者整理了一些他关注的 React 依赖,质量挺高。 -
react
animation
framer/motion - 基于 Framer Motion 实现进阶动画 -
js
tools
非 JavaScript 编译工具,已补充到第二个链接- JS Tooling not in JS - A curated list of JavaScript tooling not written in JavaScript
- 非 JavaScript 编译工具
-
react
why-did-you-render - 通过 monkey patches React 来通知您可能可以避免的 re-renders,同时适用于 react-native -
dva
Dumbo - 智能化 Dva 模块生成,阿里云的 D2C 方案 -
other
DX 是啥? -
chrome
mastering-chrome-devtools - FrontEnd Master 新开 Chrome DevTool 课程的 PPT -
ios
safari
iOS 14.5 升级 Safari 到 14.1 - 大!幅!更!新!包括 PWA、top-level-await 等大量强劲功能,值得慢慢看和翻译 -
other
怎么才能有尤雨溪一半强,该怎么学习? -
css
translate.css - Drop-in CSS transitions -
flutter
Flutter Boost3.0初探 - 闲鱼 Flutter Boost 3,混合开发(闲鱼没有放弃flutter) -
taro
Taro3 - 支持更多UI框架(非完全支持) WEUI、Ant Design Mobile、VantUI 。 -
rn
React Native 快凉了?Facebook 可不这样想 - React Native 架构升级介绍 -
react
ui
chat
ChatUI - 对话式交互应用UI库,达摩院开源作品 -
blog
FIRT - 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. -
jsbridge
DSBridge-Android - H5加壳除了JsBridge,DSBridge也是蛮好用的 -
js
javascript-state-machine - A javascript finite state machine library -
lowcode
“行业毒瘤”低代码
2021.04.29
-
nextjs
Next.js 10.2 - next.js 发布 10.2- 默认 webpack 5
- 提升启动时间 20%,可惜没看到 20倍提速的发布
- 改进响应式(mac 可通过辅助工具-旁白开启验证)
- 引入新的 babel-loader 提升 hmr 时间,通过 experimental flag 开启
- webpack 作者 Tobias Koppers 加入 next.js
-
vite
webpack
Why We Switched From Webpack To Vite? - 快! -
nextjs
Build a SaaS Platform with Stripe - 技术栈:Next.js + Auth0 + prisma + stripe + tailwindcss -
redux
redux 发布 4.1 - 通过提取 error code,让体积从 2.6K 减少到 1.6K(min+gz) -
css
windicss - Next generation utility-first CSS framework. 类 tailwindcss -
react
React 视频播放组件 -
angular
DevUI Admin - 开源的企业级中后台解决方案,基于 Angular -
babel
Babel 8 Release Plan -
tools
transform - 支持各种代码转化的工具,SVG、JSON、TS、GraphQL、CSS、SQL,只要你能想到的这里都有。光 JSON 就可以转化为十几种代码格式,如把 JSON 转化成 Flow、Go、GraphQL、Typescript、Kotlin、MySQL、YAML等。本项目开源,你可以通过代码学习到它是如何进行格式转换的。 -
vue3
markdown
vue3-markdown-it - 一个非常棒的 Vue 3 markdown-it 组件,可以支持外部插件 -
react
React#31 error,让我熬夜让我秃 - 一次精彩的React线上查错 -
flowchart
code-to-graph - Transforms code (JS) into graphs (graphviz, mermaid flowchart, ...) -
watermark
@pansy/watermark - watermark component
2021.04.30
-
babel
Babel 发布 7.4 - 默认开启 Class fields 和 private methods,支持 Async do 表达式,TypeScript 4.3,更好的 Node.js ESM-CJS interop 兼容 -
fe
frame
Remix - Remix v1 Beta Launch(youtube),付费框架 Remix v1 Beta 发布。 -
lowcode
低代码相关库- sparrow - 场景化低代码(LowCode)搭建工作台,实时输出源代码
- yoma - 一个小而美的低代码全栈开发平台,一键生成后端api接口+前端页面代码+在线接口文档,节省50%的前后端开发的工作量,平台代码100%开源。平台适用于企业信息化、政务、中小型互联网等项目
- citrus - 低代码快速开发脚手架,灵活、高效,降低开发成本
- vue-low-code - Quant-UX standalone
-
js
interview
400 条 JavaScript 面试题(带答案) -
other
互联网黑话词汇表 - 互联网黑话词汇表,包含“赋能、抓手、闭环、沉淀、打通”等阿里味儿词汇 -
wasm
emulates
x86
v86 - v86模拟与x86兼容的CPU和硬件。 机器代码在运行时转换为WebAssembly模块,以实现良好的性能,支持多种仿真硬件。 -
frame
尤雨溪 - 在框架设计中寻求平衡
2021.05
汇总中...
- 📅 2021.05.01 ~ 2021.05.14
Tools
- Rome - Rome is a linter, compiler, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS.
- slidev - Presentation Slides for Developers (Public Beta 🎉)
- swimlanes.io - Swimlanes.io is a simple free online tool for making sequence diagrams
- Preset - A command line tool for kickstarting your application's development by applying presets on top of it.
- cusdis - lightweight, privacy-friendly alternative to Disqus.
- ChaosBlade - 阿里巴巴开源的一款简单易用、功能强大的混沌实验注入工具
- uncode - Uncode 是一个面向云研发时代设计的下一代概念性 IDE。
- JimuReport - 一款免费的数据可视化工具,报表和大屏设计,像搭建积木一样在线设计报表!功能涵盖,数据报表、打印设计、图表报表、大屏设计等!
- 10 Best Online Flowchart Software Of 2021
- Creately - Best collaborative flowchart software with live video conferencing
- Miro - Best free flowchart software
- Microsoft Visio - Best flowchart software for Windows
- Gliffy - Best flowchart tool for Confluence & Jira (native Atlassian integrations)
- Edraw Max - Best all-purpose diagramming software
- ConceptDraw Diagram - Best flowchart software download (buy a one-time license)
- Cacoo - Best online flowchart software for real-time team collaboration
- Terrastruct - Best flowchart tool for software development
- VisualParadigm Online - Best flowchart software for agile software development & data analytics
- Draw.io - Best easy to use flowchart freeware
- Replace Google CDN - 一个 Chrome 插件:将 Google CDN 替换为国内的。
Open Source
- FingerprintJS - Browser fingerprinting library with the highest accuracy and stability.
- inspx - Pixel perfect layout inspection.
- mantine - React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience
- React-Toastify - React notification made easy 🚀 !
- Fish Design - 面向B端设计的企业级UI组件库
Guide
- Modern CSS Solutions for Old CSS Problems - A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 13+ years.
- A practical guide to TypeScript decorators
Weekly
- sorrycc/weekly - 前端周刊,每周一发布。
WebAssembly
MacOS
- awesome-mac - Now we have become very big, Different from the original idea. Collect premium software in various categories.
2021.05.01
-
fe
other
clsx - classnames的(228B)替代方案,自带类型声明,使用默认导入也更简洁import clsx form 'clsx'
, 不会再出现一大片的classNames(xxx) -
css
现代CSS解决方案的系列 -
github
SQLite
Hosting SQLite databases on Github Pages
2021.05.06
-
tools
rome.tools 成立公司,创始人是 babel、flipper、yarn、prepack 和 lerna 的作者,Jamie Kyle 加入,种子轮 $4.5 million -
tools
react
inspx - 支持开发模式下显示元素的位置、尺寸信息,“像素完美”强迫症必备 -
vite
webpack
Why You Should Not Use Webpack - 作者的观点:1. dev 慢 2. 配置复杂 3. 产物大;作者推荐 Vite -
fe
parcel
Rewrite JS transformer and scope hoisting in Rust - Parcel 基于 Rust 重写 JS transformer 和 scope hoisting,用 SWC 替换 Babel -
tools
vite
slide
slidev - Presentation Slides for Developers,基于 Vite 的 markdown 转 slide 工具 -
react
ui
mantine - react UI 库 -
fe
frame
React Framework Comparison: Gatsby, Next.js, Blitz, Redwood - 视频:作者比较四个 React 框架,包括 Gatsby, Next.js, Blitz 和 Redwood -
windcss
WindiCSS v3.0 now in Beta - windcss 3.0 新语法解决了 tailwindcss 的 class 冗长问题 -
other
Pressing flesh against flesh 🤝 - 握手符号将来有 25 种肤色可以选择 -
flowchart
swimlanes.io - swimlanes.io markdown 转流程图工具 -
fe
一文彻底搞懂前端监控 - 一篇梳理前端监控现状、目的、基本流程的文章,文章写得很有条理 -
news
vue
5 月 9 日本周日晚 9 点,极客帮科技总编郭蕾会和尤雨溪进行连麦直播,为了避免广告嫌疑,感兴趣的同学可以自行搜索
2021.05.07
-
tools
Preset - 一个命令行工具,preset,通过应用预设来快速构建或升级你的应用 -
tools
disqus
cusdis - 一个轻量化的评论工具,cusdis,前端部分采用了 vite -
news
sorrycc/weekly - 前端周刊,每周一发布。 -
js
JavaScript Temporal API- A Fix for the Date API - 又一篇关于 JavaScript Temporal API 的文献,相关 propsal 已经到了 stage-3 -
react
React-Toastify - 一个好用的React通知组件库,支持多种配置
2021.05.08
-
flutter
资料整理 - 整理的关于flutter的周边。 -
lowcode
低代码到底是个啥,或许每个人心中都有自己的答案 -
fe
建立元数据驱动的前端架构 - 徐飞的分享 -
react
ui
Fish Design - 基于 React 实现的高质量的企业级 UI 组件库,帮助设计者与开发者快速构建系统。 -
tools
ChaosBlade - 一个简单易用且功能强大的混沌实验实施工具 -
ide
uncode
云研发 IDE Uncode:演示版发布 -
vsc
VS Code 1.56发布
2021.05.11
-
vue3
Vue 3.1.0 的 beta 版发布,新特性:- onServerPrefetch:composition-api 版本的 serverPrefetch
- 组件级别的 compilerOptions
- @vue/compiler-core 支持了空白字符处理策略
- 支持通过 app.config.compilerOptions 配置运行时的编译器
- devtools 改进了对 KeepAlive 的支持
- 支持通过 is="vue:xxx" 将普通元素转换为组件
-
other
软件工程的最大难题 -
node
Hello, Modules! - js modules 在现代浏览器中已经可用有一段时间了,但现在终于可以在 Node.js 中使用它了 -
other
突破 web 应用研发效能的叹息之墙 -
graphql
GraphQL及元数据驱动架构在后端BFF中的实践 -
other
入职腾讯第九年,我辞职了!!! - 《web 全栈工程师的自我修养》作者余果离开腾讯的一篇文章,值得品一下 -
babel
Babel 八卦,原作者吐槽现在的维护者拿钱不干事,Henry Zhu 拿十几万刀的年薪 2020 只有 12 个 issue,29 个 PR 确实干得有点少。 -
fe
frame
bootstrap发布了最新的5.0版本
2021.05.13
-
lowcode
report
JimuReport - 一款免费的数据可视化工具,报表和大屏设计,像搭建积木一样在线设计报表!功能涵盖,数据报表、打印设计、图表报表、大屏设计等! -
flowchart
2021年10种最佳在线流程图软件- Creately - Best collaborative flowchart software with live video conferencing
- Miro - Best free flowchart software
- Microsoft Visio - Best flowchart software for Windows
- Gliffy - Best flowchart tool for Confluence & Jira (native Atlassian integrations)
- Edraw Max - Best all-purpose diagramming software
- ConceptDraw Diagram - Best flowchart software download (buy a one-time license)
- Cacoo - Best online flowchart software for real-time team collaboration
- Terrastruct - Best flowchart tool for software development
- VisualParadigm Online - Best flowchart software for agile software development & data analytics
- Draw.io - Best easy to use flowchart freeware
-
chrome
tools
Replace Google CDN - 一个 Chrome 插件:将 Google CDN 替换为国内的。 -
wasm
2021.05.15 北京站 WebAssembly meetup,议题包含- 基于WebAssembly的人像分割技术在RTC领域的应用
- 用 Serverless WebAssembly 解决 SaaS 平台的定制化难题
- 基于 Wasm 的 ServiceMesh 扩展
- WebAssembly 踩坑记 —— Lightning Talk
-
mac
awesome-mac - 收集各种类别非常好用的 Mac 应用程序、软件以及工具。 -
js
Clean Code Applied to JavaScript: Series - js代码整洁之道系列 -
ts
TypeScript整理 - 好用实用的TS技巧、理念、工具。
2021.05.14
-
github
GitHub 支持视频上传了
2021.05.17
-
css
运行时动态切换css插件(实时换肤)- webpack-theme-color-replacer - Webpack的运行时动态主题颜色替换插件
- vite-plugin-theme - 用于动态更改界面主题色的 vite 插件
-
tools
精读《新一代前端构建工具对比》 -
other
Linux 之父:编程之美 - 翻译不准确,推荐查看 英文原文 -
other
两篇文章,读懂内卷 -
tools
Remove Image Background - 智能抠图的公共API服务 -
deno
react
aleph.js - 基于 deno 实现的 react 框架,并支持 ssr -
tools
Choose the right package every time - 一个帮助你快速找到心仪前端库的网站,比如查找'table',会列出大量开源table库并包含各种不同的指数帮助你进行挑选。
2021.05.18
-
svelte
SvelteKit - Svelte 开箱即用的工具 -
react
ant-design - ant-design 的 star 人数回归正常 -
js
《JavaScript 二十年》 - 出版啦! -
guide
计算机图形学与混合现实研讨会 -
lowcode
什么是低代码
2021.05.22
-
nextjs
Let’s make the web. Faster. - 6 月 15 日 nextconf 线上报名,报名网站做的非常有意思 -
flutter
Google I/O 2021 发布 Flutter 2.2 -
browser
The future of Internet Explorer on Windows 10 is in Microsoft Edge - 官方宣布 ie11 将于 2021.6.15 日正式退休 -
other
关于 Yak Shaving - 一篇关于开源的故事 -
js
JavaScript 二十年 - js的二十年八卦史 -
fe
browser
从输入url到页面加载发生了什么? -
wasm
node
Introducing WebContainers: Run Node.js natively in your browser - 在浏览器中本地运行Node.js, Web现在可以为图形设计师,视频编辑器和丰富的文档编辑环境运行完整的环境, 开发人员最终有可能使用Web来构建Web,备注:基于webAssemby -
css
The new responsive: Web design in a component-driven world - 新的响应式设计思路 -
angular
tools
Docgeni - 现代化的、强大的、开箱即用的 Angular 组件文档生成工具
2021.05.26
-
心得分享(lencx)
: 让你感到枯燥乏味的东西,是你不了解,不知道的地方,兴趣是持续学习的源动力。 -
web3
Web3.0学习资料推荐 - 来自国内rust社区的整理 -
vue
VueConf 2021 - VueConf 2021 于 5 月 22 日在杭州举办,线上线下同步进行。本次会议一共有 9 个主题演讲,1 个闪电分享,附所有直播回放链接 -
css
tailwindcss 2.1 - 2.1 发布,多项功能支持- 优化编译时间
- 支持所有变体同时生效写法:
sm:hover:active:disabled:opacity-75
- 支持所有 css 变量,写法:
md:top-[-113px]
-
github
SNKRX - github markdown 支持插入视频 -
react
react-use issues - react-use 搞不下去了 -
react
react-hookz/web - React hooks done right, for browser and SSR. -
other
从高效能人士的七个习惯谈成长 -
fe
Dear HTML+CSS - 一封给 html,css 的情书 -
react
remotion - 以 React 编程的方式创建视频 -
terminal
XTERM.JS - 一个web端的terminal
2021.05.31
-
ide
CodeSandbox宣布已获得@playdotjs - Play.js是适用于iOS的JavaScript IDE,这意味着很快就可以在iPhone或iPad上的本机沙箱上工作!📱 -
browser
browser-fs-access - File System Access API with legacy fallback in the browser. -
browser
文件系统访问 API:简化对本地文件的访问 - 暂时只有 chrome 和 edge 支持 -
vite
Vite,下一代 Web 工具 -
v8
v8js Tweet - v8 v9.1 添加了 Sparkplug 编译器,网页的真实性能将提升 5%-15% -
flutter
FlutterUnit - 【Flutter 集录指南 App】The unity of flutter, The unity of coder. -
other
GacUIBlog - 记录 GacUI 开发10年来背后的故事,以及对架构设计的考量。其设计思想可以参考 -
guide
secguide - 腾讯开源,有关代码安全策略 -
react
React状态管理 - 汇总
2021.06
2021.06.01
-
wasm
Pyodide Spin Out and 0.17 Release - Mozilla 的项目,让Python 运行在浏览器 -
emulator
jslinux - Run Linux or other Operating Systems in your browser! -
emulator
wasm
v86 - x86 virtualization in your browser, recompiling x86 to wasm on the fly。