业务中遇到的一些问题

邮件内 HTML 开发

• mjml
• can i email

日志

• fingerprint
• track/countly
• https://hitcount.io

多语言

• vue-i18n

搜索建议/历史管理

• 本地存储库

Slider

• https://naver.github.io/egjs-flicking/
• fullPage.js
• https://fullpage.caferati.me/
• swiper

骨架屏

• https://skeletonreact.com
• https://github.com/danilowoz/react-content-loader#examples

Form

• https://x-render.gitee.io/form-render/
• https://github.com/iendeavor/form-validation.js
• https://catalin.red/disabled-form-controls/
• https://react-hook-form.com
• https://web.dev/sign-in-form-best-practices/
• https://twitter.com/IMAC2/status/1293863884537946112
• https://kilianvalkhof.com/2020/javascript/supercharging-input-type-number/
• https://gerireid.com/forms.html
• https://www.npmjs.com/package/validator
• https://vee-validate.logaretm.com/v4/

快捷键

• https://jamiebuilds.github.io/tinykeys/
• https://github.com/jaywcjlove/hotkeys

浏览器环境检测

• mobile-device-detect
• https://oldj.net/blog/2019/06/15/get-the-language-of-browser

图片相关

浏览

• wx.previewImages
• https://www.zhangxinxu.com/wordpress/2020/06/mobile-event-touches-zoom-sacle/

lazyoad

• vanilla-lazyload
• loading-lazy-attr - lazy-loading
• intersection
• dom 尺寸/dom 位置
  • getBoundingClientRect() 含 border, 浮点数
  • offset[Width/Height] 整数
  • client[Width/Height]/scroll[Width/Height] 含 padding
  • offsetParen/otffset[Top/Left]
  • window.page[X/Y]Offset/scroll[Top/Left]

图片格式

• https://www.singhkays.com/blog/its-time-replace-gifs-with-av1-video/
• https://convertio.co/zh/formats/avif/
• https://zh.wikipedia.org/zh-hans/APNG
• https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/
• https://pqina.nl/doka/ #图片编辑
• x-oss-process
• exif

截图/pdf

• https://fengyuanchen.github.io/cropperjs/
• Puppeteer
• wkhtmltopdf
• https://github.com/tsayen/dom-to-image

QRCode

文件上传/下载

• Header 的 value 值需要是 ByteString
• https://mp.weixin.qq.com/s/7ovPkxPApfBERZ8Nxq5f5w
• https://en.wikipedia.org/wiki/List_of_file_signatures
• https://mimesniff.spec.whatwg.org
• FileSaver
• exifr
• https://www.npmjs.com/package/image-size

瀑布流/性能优化

• 微信小程序官方扩展 recycle-view
• demo
• react-window
• vue-virtual-scroller

图表📈

• https://quickchart.io
• https://github.com/naver/billboard.js
• https://adrianmejia.com/data-structures-for-beginners-graphs-time-complexity-tutorial/
• https://github.com/Jiavan/blog/issues/5
• https://github.com/beizhedenglong/rough-charts
• https://roughnotation.com
• https://www.sarasoueidan.com/blog/compositing-and-blending-in-css/
• https://shihn.ca/posts/2020/roughjs-algorithms/

CSS/JavaScript 动画

• lottie
• react-spring
• dynamics

实现一个简单/够用的 fsm

• https://slides.com/shmck/visually-designing-state
• https://github.com/eunjae-lee/tiny-fsm

分屏显示

• https://split.js.org

格式化日期/时间/数字(价格)

• https://github.com/akira-cn/FE_You_dont_know/issues/5
• https://github.com/prantlf/timezone-support
• https://www.iana.org/time-zones

文案多行时, 展开/收起效果

• https://efe.baidu.com/blog/text-truncating/
• https://webplatform.news/issues/2019-05-17

富文本编辑器

• markdown 语法以及扩展语法
• remarkable/marked 实现 plugin
• codemirror
• html 字符串转 dom 结构
• wemark
• https://www.zhihu.com/question/38699645
• https://zhuanlan.zhihu.com/p/37051858
• https://euangoddard.github.io/clipboard2markdown/
• https://www.w3ctech.com/topic/140
• https://www.oschina.net/translate/why-contenteditable-is-terrible?cmp
• https://stackoverflow.com/questions/2965039/multiple-contenteditable-elements-using-arrow-keys-to-navigate/2965228#2965228
• https://froala.com/wysiwyg-editor/
• https://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/
• https://marktext.app
• https://zhuanlan.zhihu.com/p/37051858
• https://mermaid-js.github.io/mermaid/#/
• https://www.yuque.com/elevenyang/tvy47l/qdugkw
• https://andybrewer.github.io/mvp/
• https://tiptap.dev/
• https://resumd.t9t.io

Modal

• https://micromodal.now.sh

mock

• https://github.com/Marak/faker.js
• https://chancejs.com/

复制

• https://googlechrome.github.io/samples/async-clipboard/index.html

emoji

• https://github.com/joeattardi/emoji-button

Font

• fontmin - 网页上自定义中文字体
• https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage
• http://iosfonts.com
• https://www.thetype.com
• https://zhuanlan.zhihu.com/p/36984949
• https://github.com/2234839/web-font

小程序

• https://www.jianshu.com/p/5cce45d32bf4 #swiper
• https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html #mixin #behaviors

微信分享

App 调起 - scheme/universallink

颜色筛选

• http://vue-color.surge.sh

Version 对比

• https://docs.npmjs.com/cli/v6/using-npm/semver

webview

• https://75.team/post/android-webview-and-js.html
• https://75.team/post/ios-webview-and-js.html

crontab

• https://helloacm.com/crontab-generator/

url

• https://www.samanthaming.com/tidbits/86-window-location-cheatsheet/
• tldjs
• slug

Event

• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
• https://www.npmjs.com/package/vue2-touch-events
• https://github.com/developit/mitt
• https://www.npmjs.com/package/fbemitter
• https://github.com/jcubic/sysend.js/

Hashids

• hashids - 升级到 sqids.org
• crypto

player

excel

• https://www.npmjs.com/package/xlsx
• https://github.com/oleg-koval/excel-date-to-js
• https://www.npmjs.com/package/exceljs
• https://www.papaparse.com/

chat

• fastdom
• websocket

component

• tab - react-tabs
• icon
• media
• figures
• tree/sidebar - (https://segmentfault.com/a/1190000018510046)
• modal
• navbar
• pagination
• popover
• toast
• 分割线
• loading - react-loadable/vue-request

异步请求管理

• queue/async
• https://twitter.com/Michael_Hladky/status/1119277221087150081
• https://microsoft.github.io/just/
• https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
• https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth

其他

• 特殊排版
• 图片文件类型判定
• vue-click-outside
• https://github.com/luciopaiva/heapify
• https://www.npmjs.com/package/minimist
• https://ssl-config.mozilla.org/
• react-lifecycle-methods-diagram
• http-proxy-middleware
• https://www.xml-sitemaps.com/
• node-html-parser