Web Awesome

Web

• www.c82.net/iconography
• www.photopea.com
• ryohey/signalGitHubryohey/signal
  • MIT, TS
  • Online MIDI Editor: signal
• oskarstalberg.com/Townscaper
• remove-white-background.imageonline.co
• teetow.github.io/elementary_grid
• varkor/quiverGitHubvarkor/quiver
• Code to Image / Text to Image
  • carbon.now.sh
    • carbon-app/carbonGitHubcarbon-app/carbon

Spec

• WebPush
  • web.dev/explore/notifications
  • webpush-protocolIETF DraftI-D draft-ietf-webpush-protocolIETF Internet-Draft document.IETF · Internet-Draft
  • webpush-encryptionIETF DraftI-D draft-ietf-webpush-encryptionIETF Internet-Draft document.IETF · Internet-Draft
  • 实现
    • web-push-libs/web-pushGitHubweb-push-libs/web-push

Runtime

• nodejs
• deno
• quickjs

Read

• Google Docs will now use canvas based rendering
  • 2021-05-11
  • 文本处理器对 渲染、布局、增量更新有专门的要求
  • Canvas 能实现跨平台
  • HNHacker NewsHacker News #27129858Hacker News
• hotwire
• web.dev/ps-on-the-web
  • 图像处理基于 halide-lang.org
• andreasbm.github.io/web-skills

Desktop

• wails笔记wailswailsapp/wails · MIT, Go · 基于 Webview 的应用封装 · WML · Windows - WebView2 · macOS - Safari · Linux - gcc,libgtk3,libwebkit · 可使用 upx 压缩, nsis 打包打开：/notes/web/framework/wails
  • Go
• neutralinojs/neutralinojsGitHubneutralinojs/neutralinojs
  • 使用 Native WebView
  • 没有 Node 环境，直接实现 Native 相关的能力
  • 类似 tarui, wails
    • 区别在于 Native 部分如何实现
• nwjs/nw.jsGitHubnwjs/nw.js
  • Chromium + node.js
  • 在 DOM 可使用 Node 环境
  • adopted by
    • Intel® XDK
    • RPG Maker
    • Construct 2 / Construct 3
    • Pinegrow Web Editor
    • 微信开发者工具（早期） -> Electron
• blackboardsh/electrobunGitHubblackboardsh/electrobun
  • bun zig -> rust 的影响
    • blackboardsh/electrobun#439GitHub Issueblackboardsh/electrobun#439
• Elanis/web-to-desktop-framework-comparisonGitHubElanis/web-to-desktop-framework-comparison
• tauri-apps/tauri笔记tauritauri-apps/tauri · 支持 多 WebView - core+WebView 进程 · IPC 走 core 进程路由 - 全局状态应该在 core 进程维护 · Windows WebView2 · macOS 10.13+ WKWebView打开：/notes/web/framework/tauri
  • Build desktop applications with a web frontend
  • 基于 rust tao
  • 底层引擎为 rust 实现 - 轻、资源占用少
    • 但规范实现不完整，部分应用可用
    • 但实际占用资源的都是 WebView - 无法避免 - 所以实际使用资源差不多
• windowjs/windowjsGitHubwindowjs/windowjs
• webview/webviewGitHubwebview/webview
  • C/C++/Golang/Deno
• c-smile/sciter-sdkGitHubc-smile/sciter-sdk
  • embeddable HTML/CSS/scripting engine
  • RustDesk、Teamviewer、Todesk
• netsurf
• electron vs nwjs
  • www.electronjs.org/docs/latest/development/electron-vs-nwjs

Build

• bundlers.tooling.report
• vite
• rollup
• esbuild
• webpack
• parcel

测试

• facebook/flipperGitHubfacebook/flipper
  • desktop debugging platform for mobile
• microsoft/playwrightGitHubmicrosoft/playwright
  • automate Chromium, Firefox, WebKit
• codeceptjs/CodeceptJSGitHubcodeceptjs/CodeceptJS
• webdriverio/webdriverioGitHubwebdriverio/webdriverio
• Tencent/vConsoleGitHubTencent/vConsole

Bootstrap

• Bootstrap Zero
• Top Github Repo
• bootstrap-material-designGitHubFezVrasta/bootstrap-material-design
• startbootstrap
• bootswatch
  • 比较喜欢的 paper 样式
• wrapbootstrap
• shapebootstrap
• newsmartwave
• Bootstrap 4 Cheat Sheet

UI 框架

• getmdl.io
• www.polymer-project.org
• react.rocks

框架

• jsx 系
  • react笔记Reactsuspense 通过 throw prmies 实现 · vigzmv/react-promise-suspense · 带 key 的组件不会被复用 demo · 可以避免 props 变化问题 · 更适用于 memo · Context Selectors react#20646打开：/notes/web/react - 定位是 库
  • preact笔记preactpreactjs/preact · React 替代 · preact - 10kB,4kB · =React+ReactDOM · preact-compat - 13kB,5kB · react - 7kB,3kB · react-dom - 130kB,42kB打开：/notes/web/react/preact - mini 版 react
  • MithrilJS/mithril.jsGitHubMithrilJS/mithril.js
  • aidenybai/millionGitHubaidenybai/millionaidenybai/million · MIT · <4kb · The Virtual DOM Replacement for React · https://million.dev/blog/virtual-dom · Diff the data, not the DOM.笔记：million
    • 无 vdom
    • 与 mithril.js 非常类似
    • 类似 react+svelte 结合体
  • jorgebucaran/hyperappGitHubjorgebucaran/hyperapp
    • 最简的 jsx
  • ryansolid/solidGitHubryansolid/solid
    • 快、小、类 React
    • jsx 直接预先生成 dom 模板，属性变化动态插入到 dom 里 - 没有 react 的 vdom 比较合并
• WebComponent 系
  • lit
  • stencil
• angular
  • angular v1 - 新项目已经不会再用
  • angular
• 单文件 - 自编译
  • svelte
  • vue2
  • vue3
  • riot
• alpinejs
• developit/htmGitHubdevelopit/htm
• 参考
  • 用户事件优先优于框架性能 HN #32294051Hacker NewsHacker News #32294051Hacker News
    • React 18
  • krausest.github.io/js-framework-benchmark/current.html

开发框架

• React
  • remix笔记Remixremix-run/remix · 基于 React 的开发框架 · 内置 form 处理 · 类似 NextJS · loader -> Compoent -> action · serverBuildTarget · 默认 node-cjs打开：/notes/web/framework/remix
  • nextjs笔记NextJSNextJS 的构建相当复杂 - lambda、server action、pages、app · dev 能运行，build 后可能又无法运行 · 不要用于后端太重的场景 · 构建会遇到各种问题 · 前后端 Refresh 的频度不一样 - 后端 refresh 时慢打开：/notes/web/framework/nextjs
  • rakkasjs/rakkasjsGitHubrakkasjs/rakkasjs
    • 类似 NextJS
    • 使用 Vite
• nestjs
• inertiajs/inertiaGitHubinertiajs/inertia
  • quickly build modern single-page React, Vue and Svelte apps
• livebud/budGitHublivebud/bud
  • Full-Stack Web Framework for Go
• 国产 - 考虑 KPI 关系，一般不推荐使用
  • umijs
  • taro - 跨端、小程序
  • weex

Note

国内非常擅长各种合并集成、开箱即用、全家桶，但是缺点都是难有人持续维护，定制化难，只考虑提供了的功能，不考虑扩展。

样式

• DSL
  • tailwindcss - ⭐️ 推荐 - 基于 PostCSS 插件
  • tw-in-js/twindGitHubtw-in-js/twind JS 实时生成
  • windicss - 目前 antfu 维护 - 复刻的 tailwindcss - 不需要 PostCSS
  • unocss - by antfu
• css-in-js
  • styled-components笔记styled-components34kB/13kB · stylis · styled-components v6 alpha · typescript 重写 · stylis v4 · node 14+ · styled-components v6 alpha feedback #3696打开：/notes/web/style/styled-components
  • emotion
  • styled-jsx笔记styled-jsxvercel/styled-jsx · 默认不支持传递样式到 children #573 · 如果 a 是在一个组件里，无法影响到 · 使用 · 或者传递 css.resolve 返回的 className 到子组件 · 启用后不会使用 SWC 编译 - 推荐使用 css module打开：/notes/web/react/styled-jsx
  • cristianbote/gooberGitHubcristianbote/goober
• CSS Module
• Library
  • lukeed/clsxGitHublukeed/clsx
  • kripod/style-vendorizerGitHubkripod/style-vendorizer
  • frenic/csstypeGitHubfrenic/csstype

JS

• roughjs.com
  • 绘制手写效果的图
• julianshapiro/velocityGitHubjulianshapiro/velocity
  • Accelerated JavaScript animation.
• nextapps-de/winboxGitHubnextapps-de/winbox
  • 窗口管理器
• niklasvh/html2canvasGitHubniklasvh/html2canvas
  • 截屏
• ian-nai/In-Browser-OCRGitHubian-nai/In-Browser-OCR
  • Tesseract.js
• krausest/js-framework-benchmarkGitHubkrausest/js-framework-benchmark
• josdejong/mathjsGitHubjosdejong/mathjsjosdejong/mathjs · Apache-2.0, JS · deps: complex.js, decimal.js, fraction.js · 参考 · https://mathnotepad.com/ · https://observablehq.com/@dvd101x/mathjs-inside-html-and-markdown笔记：mathjs
• handsontable/hyperformulaGitHubhandsontable/hyperformula
• BuilderIO/partytownGitHubBuilderIO/partytown
• remotestorage/remotestorage.jsGitHubremotestorage/remotestorage.js
  • protocol
• francisrstokes/construct-jsGitHubfrancisrstokes/construct-js
• jsxgraph
  • Dynamic Mathematics with JavaScript
• pubkey/client-side-databasesGitHubpubkey/client-side-databases
• omgovich/colordGitHubomgovich/colord
  • tiny yet powerful tool for high-performance color manipulations and conversions

Dev

• modernweb-dev/webGitHubmodernweb-dev/webhttps://www.c82.net/iconography/ · https://www.photopea.com/ · ryohey/signal · MIT, TS · Online MIDI Editor: signal · http://oskarstalberg.com/Townscaper/笔记：Web Awesome

tty

• xtermjs/xterm.jsGitHubxtermjs/xterm.js
• yudai/gottyGitHubyudai/gotty
• maxmcd/webttyGitHubmaxmcd/webtty
• wrfly/container-web-ttyGitHubwrfly/container-web-tty

Browser

• RenderingNG

Audio

• Theodeus/tunaGitHubTheodeus/tuna audio effects library
• Tonejs/Tone.jsGitHubTonejs/Tone.js
  • HNHacker NewsHacker News #19512922Hacker News
• bit101/tonesGitHubbit101/tones
• nick-thompson/elementaryGitHubnick-thompson/elementary
• nick-thompson/react-juceGitHubnick-thompson/react-juce
  • juce-framework/JUCEGitHubjuce-framework/JUCE
• projectM-visualizer/projectmGitHubprojectM-visualizer/projectm
  • HNHacker NewsHacker News #28970988Hacker News
• 参考
  • What's In A Sound?
  • youtube Synthesizer Basics: Amplitude, Oscillators, Timbre
  • Functional, Declarative Audio Applications

Script

• emscripten-core/emscriptenGitHubemscripten-core/emscriptenemscripten-core/emscripten · MIT, C++ · LLVM-to-WebAssembly Compiler笔记：Emscripten
• bundlescanner.com

Tool

• atapas/webapis-playgroundGitHubatapas/webapis-playground
  • webapis-playground.vercel.app

Application

• MattKetmo/darkroomjsGitHubMattKetmo/darkroomjs
  • MIT, JS
  • 照片编辑器
• tldraw/tldrawGitHubtldraw/tldraw
  • MIT, TS
  • 制图
• hoppscotch/hoppscotchGitHubhoppscotch/hoppscotchhoppscotch/hoppscotch 是什么？ · MIT, Typescript+Vue · 类似 Postman，但是是开源产品 · 早期叫 Postwoman · 支持 HTTP, REST, WebSocket, SSE, Socket.IO, MQTT, GraphQL笔记：hoppscotch
• mynoise.net

Dev

• jackdomleo7/Checka11y.cssGitHubjackdomleo7/Checka11y.css

有趣

• beforeidieproject.com
• www.insideoutproject.net
• hunar4321/particle-lifeGitHubhunar4321/particle-life
• airbnb/lottie-webGitHubairbnb/lottie-web
• DustinBrett/daedalOSGitHubDustinBrett/daedalOS
• aaronos.dev/AaronOS/aosBeta.php
• www.vantajs.com
• copy/v86GitHubcopy/v86
  • copy.sh/v86
  • x86 virtualization in browser
• sharat87/prestigeGitHubsharat87/prestige
  • text-based HTTP client in the browser - interface-less Postman
• timc1/kbarGitHubtimc1/kbar
• www.67tool.com
• yf-dev/mahjong-hand-guessing-gameGitHubyf-dev/mahjong-hand-guessing-game
  • mahjong-handle.update.sh
• calculator.apps.chrome
• HughChen/qr_imageGitHubHughChen/qr_image
  • generate valid QR codes with readable images
• 1History/1HistoryGitHub1History/1History
  • history in one file
• radio.garden
• webcode.tools
• mbrlabs/LorienGitHubmbrlabs/Lorien
  • Infinite canvas drawing/whiteboarding app for Windows, Linux and macOS. Made with Godot
• Web Desktop/Web OS
  • HeyPuter/puterGitHubHeyPuter/puter
    • AGPLv3, JS
    • Web OS
    • HN #39597030Hacker NewsHacker News #39597030Hacker News
  • MercuryWorkshop/anuraOSGitHubMercuryWorkshop/anuraOS
    • AGPLv3, JS
    • WebOS
    • 支持模拟 Linux
  • simone.computer
  • syxanash/awesome-web-desktopsGitHubsyxanash/awesome-web-desktops
• copy.sh/v86

Reference

• Awesome of AwesomeGitHubsindresorhus/awesomehttps://www.c82.net/iconography/ · https://www.photopea.com/ · ryohey/signal · MIT, TS · Online MIDI Editor: signal · http://oskarstalberg.com/Townscaper/笔记：Web Awesome

• Awesome Web

• cheatsheet1999/FrontEndCollectionGitHubcheatsheet1999/FrontEndCollection

• dev.to/iainfreestone/series/7129

• stateofcss.com

• stateofjs.com

• photopea.com

• boxy-svg.com/app

• tldraw.com

• globs.design

• alma.sh

• audiomass.co

• hexed.it

• webvm.io

• Desktop / Runtime

  • microsoft/duroxide-nodeGitHubmicrosoft/duroxide-node
    • Microsoft Duroxide 的 Node.js 相关项目。
  • vercel-labs/wtermGitHubvercel-labs/wterm
    • 面向 Web 的 terminal emulator。

CDN

• www.jsdelivr.com
  • MaxCDN
• cdnjs.com
  • cdnjs.cloudflare.com
• unpkg.com
• fonts.googleapis.com
  • fonts.yecdn.com
  • ~~fonts.css.network ~~
  • googlefonts.cn
  • fonts.font.im
  • fonts.proxy.ustclug.org
• lib.sinaapp.com
  • 新浪云
• www.staticfile.org
  • 七牛云
• www.bootcdn.cn
• lug.ustc.edu.cn/wiki/start
• u.sb/css-cdn
• cdn.baomitu.com/index/fonts

• fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap
  • fonts.font.im/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap

fonts.gstatic.com fonts-gstatic.proxy.ustclug.org
fonts.googleapis.com fonts.proxy.ustclug.org
ajax.googleapis.com ajax.proxy.ustclug.org
ajax.googleapis.com ajax.loli.net
registry-1.docker.io docker.mirrors.ustc.edu.cn
packages.elastic.co elastic.proxy.ustclug.org
ppa.launchpad.net launchpad.proxy.ustclug.org
archive.cloudera.com/cdh5/ cloudera.proxy.ustclug.org/cdh5/
downloads.lede-project.org lede.proxy.ustclug.org
downloads.openwrt.org openwrt.proxy.ustclug.org
registry.npmjs.org npmreg.proxy.ustclug.org
www.npmjs.com npm.proxy.ustclug.org
themes.googleusercontent.com google-themes.proxy.ustclug.org
secure.gravatar.com gravatar.proxy.ustclug.org

performance

• lighthouse
• web.dev/measure
• www.webpagetest.org/lighthouse
• developers.google.com/web/tools/chrome-user-experience-report