{"pageContext":{"index":116,"total":366,"name":"2021-07-25","items":[{"node":{"frontmatter":{"title":"100vh问题的故事 - 一个价值 800 万美元的害羞按钮","publish":true,"cover":"","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://cloudfour.com/thinks/a-bashful-button-worth-8-million/","author":"Jason Grigsby","translator":"","tags":["css"],"priority":1},"html":"

解决方案

\n
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit\nlet vh = window.innerHeight * 0.01;\n// Then we set the value in the --vh custom property to the root of the document\ndocument.documentElement.style.setProperty('--vh', `${vh}px`);
"}},{"node":{"frontmatter":{"title":"Abracadabra - VSCode javascript,typescript refactor插件","publish":true,"cover":"https://github.com/nicoespeon/abracadabra/blob/master/docs/demo/extract-variable-multiple-occurrences.gif?raw=true","showCover":true,"date":"2021-07-25","category":"javascript","url":"https://marketplace.visualstudio.com/items?itemName=nicoespeon.abracadabra#abracadabra","author":"Nicolas Carlo","translator":"","tags":["VSCode"],"priority":2},"html":""}},{"node":{"frontmatter":{"title":"2021 年开发者生态系统状况","publish":true,"cover":"https://www.jetbrains.com/lp/devecosystem-2021/static/5_years_line_chart@2x-b70a5ae8f3b436fd99da38b6fde858c7.png","showCover":true,"date":"2021-07-25","category":"other","url":"https://www.jetbrains.com/lp/devecosystem-2021/","author":"jetbrains","translator":"","tags":["state"],"priority":2},"html":""}},{"node":{"frontmatter":{"title":"Dark模式 Web 应用程序图标","publish":true,"cover":"https://blog.tomayac.com/images/dark-mode-app-icons.png","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://blog.tomayac.com/2021/07/21/dark-mode-web-app-manifest-app-icons/","author":"Thomas Steiner","translator":"","tags":["css"],"priority":1},"html":"

当您更改配色方案时，应用程序图标不会动态更新。相反，无论您在安装时将系统设置为什么，它们都会保持初始的暗模式或亮模式外观。

"}},{"node":{"frontmatter":{"title":"fzf-for-js 简单模糊查询","publish":true,"cover":"https://github.com/ajitid/fzf-for-js/raw/dev/assets/landing.gif","showCover":true,"date":"2021-07-25","category":"javascript","url":"https://github.com/ajitid/fzf-for-js","author":"ajit","translator":"","tags":["search"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"bull - 基于redis的queue","publish":true,"cover":"https://github.com/OptimalBits/bull/raw/develop/support/logo@2x.png","showCover":true,"date":"2021-07-25","category":"nodejs","url":"https://github.com/OptimalBits/bull","author":"OptimalBits","translator":"","tags":["queue"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"imapapi - headless邮件客户端","publish":true,"cover":"https://camo.githubusercontent.com/6319a31ff27c753615161d7f84900163e550ea6ef27c89d8e34410e3ff782651/68747470733a2f2f636c6475702e636f6d2f463247346d33465755542e706e67","showCover":true,"date":"2021-07-25","category":"nodejs","url":"https://github.com/postalsys/imapapi","author":"Postal Systems","translator":"","tags":["email"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"fnm - Rust实现的nodejs版本管理工具","publish":true,"cover":"https://github.com/Schniz/fnm/raw/master/docs/fnm.svg","showCover":true,"date":"2021-07-25","category":"nodejs","url":"https://github.com/Schniz/fnm","author":"Gal Schlezinger","translator":"","tags":["version"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"nativefier - 命令行将web转为桌面应用","publish":true,"cover":"https://github.com/nativefier/nativefier/raw/master/.github/dock-screenshot.png","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://github.com/nativefier/nativefier","author":"nativefier","translator":"","tags":["desktop"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"mineflayer - minecraf机器人","publish":true,"cover":"https://camo.githubusercontent.com/5a5412b1068344b6aad2d2022c0a4be10f87b4f6666486f13ca222954c4d78a4/68747470733a2f2f696d672e796f75747562652e636f6d2f76692f55574753663038775153632f302e6a7067","showCover":true,"date":"2021-07-25","category":"nodejs","url":"https://github.com/PrismarineJS/mineflayer","author":"PrismarineJS","translator":"","tags":["bot"],"priority":2},"html":""}},{"node":{"frontmatter":{"title":"plate - 用于使用 slate 构建富文本编辑器的插件框架","publish":true,"cover":"","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://github.com/udecode/plate","author":"udecode","translator":"","tags":["editor"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"ncc 将nodejs项目打包为一个文件","publish":true,"cover":"","showCover":true,"date":"2021-07-25","category":"nodejs","url":"https://github.com/vercel/ncc","author":"Vercel","translator":"","tags":["package"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"react-tags - 可拖拽tag组件","publish":true,"cover":"","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://github.com/react-tags/react-tags","author":"React Tags","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"unique-names-generator - 各种随机名字构造器","publish":true,"cover":"","showCover":true,"date":"2021-07-25","category":"nodejs","url":"https://github.com/andreasonny83/unique-names-generator","author":"Andrea Zornada","translator":"","tags":["name"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"react-color-palette - 颜色选择组件","publish":true,"cover":"","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://github.com/Wondermarin/react-color-palette","author":"Wondermarin","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"spacers 修改html元素大小工具","publish":true,"cover":"https://camo.githubusercontent.com/e751714f4d578b6b1186cd35082fe89e8ffc4415df1d489a45306110600dd78a/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f646d7a39626674796b2f696d6167652f75706c6f61642f76313632353330313637382f737061636572735f6769776238622e676966","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://github.com/actuallyakash/spacers","author":"Akash","translator":"","tags":["css"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"react-wavify - 波形特效组件","publish":true,"cover":"https://github.com/woofers/react-wavify/raw/master/screenshots/wave.gif","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://github.com/woofers/react-wavify","author":"Jaxson Van Doorn","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"then(f,f) vs then(f).catch(f)","publish":true,"cover":"https://dmitripavlutin.com/static/2d3454db457a48a471a22975d0719690/5b41b/cover-4.webp","showCover":true,"date":"2021-07-25","category":"javascript","url":"https://dmitripavlutin.com/javascript-promises-then-vs-then-catch","author":"Dmitri Pavlutin","translator":"","tags":["promise"],"priority":1},"html":"
\n

作者估计被绕进去了,实际应用没这么复杂,如果需要链式写法，使用.catch

\n
"}},{"node":{"frontmatter":{"title":"use-smartcrop - 内容感知图片裁剪hook","publish":true,"cover":"https://github.com/useflyyer/use-smartcrop/raw/main/.github/image.png","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://github.com/useflyyer/use-smartcrop","author":"Unmesh Gundecha","translator":"","tags":["react"],"priority":2},"html":""}},{"node":{"frontmatter":{"title":"use-cookie-consent - GDPR cookie准许状态hook","publish":true,"cover":"","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://github.com/bring-shrubbery/use-cookie-consent","author":"Antoni Silvestrovič","translator":"","tags":["react"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"如何实践站点可靠性工程 (SRE) 的公开可用资源的精选集合","publish":true,"cover":"https://github.com/upgundecha/howtheysre/raw/main/banner.png","showCover":true,"date":"2021-07-25","category":"devops","url":"https://github.com/upgundecha/howtheysre","author":"Unmesh Gundecha","translator":"","tags":["SRE"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"教程 - AWS amplify创建全栈 Next.js 应用程序","publish":true,"cover":"","showCover":true,"date":"2021-07-25","category":"nodejs","url":"https://welearncode.com/build-a-fullstack-app-nextjs/","author":"Ali Spittel","translator":"","tags":["nextjs"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"使用 Visual Studio Code 中的开发人员工具进行浏览器调试","publish":true,"cover":"https://46c4ts1tskv22sdav81j9c69-wpengine.netdna-ssl.com/wp-content/uploads/prod/sites/33/2021/07/Picture1-1-1024x423.png","showCover":true,"date":"2021-07-25","category":"javascript","url":"https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/","author":"Microsoft Edge Team","translator":"","tags":["debug"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"解决三个臭皮匠问题","publish":true,"cover":"https://preview.redd.it/mc0msr2hrm871.jpg","showCover":true,"date":"2021-07-25","category":"design","url":"https://www.reddit.com/r/RedditEng/comments/obqtfm/solving_the_three_stooges_problem","author":"Raj Shah","translator":"","tags":["design"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"给我 events，而不是 webhook","publish":true,"cover":"https://blog.syncinc.so/events-not-webhooks/producer-consumer-pipeline.png","showCover":true,"date":"2021-07-25","category":"design","url":"https://tsh.io/blog/bad-coding-practices","author":"acco","translator":"","tags":["webhook"],"priority":1},"html":""}},{"node":{"frontmatter":{"title":"图片延迟加载过多的性能影响","publish":true,"cover":"https://web-dev.imgix.net/image/STd8eW8CSiNp5B1bX0R6Dww2eH32/9RDh3CEC9vb1jCjVAIIi.png?auto=format&w=1600","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://web.dev/lcp-lazy-loading/","author":"Rick Viscomi, Felix Arntz","translator":"","tags":["react"],"priority":1},"html":"

如果图片是页面上的第一张特色图片或主要内容中的第一张图片，则假定它位于折叠区(fold)上方（或靠近折叠处），则不应延迟加载。

"}},{"node":{"frontmatter":{"title":"适配色盲用户：请停止使用红色和绿色","publish":true,"cover":"https://baselinehq.com/r/b-colourblindness-7.png","showCover":true,"date":"2021-07-25","category":"frontend","url":"https://baselinehq.com/blog/colourblindness-information-ui-design-red-green-problems-tips-tricks.html","author":"Andrew Wilshere","translator":"","tags":["css"],"priority":1},"html":""}}]}}