Hik 前端周刊|第 27 期

avatar
@杭州海康威视数字技术股份有限公司

新闻

1. chrome 91 发布
developer.chrome.com/blog/new-in…

  • 支持 File System Access API
  • 默认开启 WebAssembly SIMD
  • 升级 V8 到 9.1

2. 介绍 chrome.scripting
developer.chrome.com/en/blog/crx…

3. Chrome 93 有个重磅,Google Lighthouse 8 会跟着它一起发布,更新了 FCP 曲线
github.com/GoogleChrom…

4. Chrome 92 const 在 console 中可以重复声明了、并且支持了 Grid 编辑器
developer.chrome.com/blog/new-in…

5. babel8 将迁移为 ES Modules
bigbinary.com/blog/helpin…

UI 组件库合集

1. 一个 Vue 3 组件库、比较完整,主题可调,使用 Typescript,不算太慢、有点意思
www.naiveui.com/zh-CN/os-th…

2. 一个 vue3 的 ui 库
github.com/epicmaxco/v…

3. 一个 angular ui 库 devUI
devui.design/

4. Fluent UI 是一套微软的 React 组件库
github.com/microsoft/f…

好文与分享

1. 在 Vue2 项目中使用@vue/composition-api
juejin.cn/post/696681…

现在很多 vue2 的项目可以使用起来,和 option-api 完全兼容,建议新做的页面都可以用了

2. 总结 TypeScript 在项目开发中的应用实践体会
juejin.cn/post/697084…

3. 畅销书《深入浅出Vue.js》作者,在阿里淘系1年的收获成长
mp.weixin.qq.com/...

4. 我把自行车做成了 自 动 驾 驶 !!
www.bilibili.com/video/BV1fV…,代码地址 :github.com/peng-zhihui…

5. 100 个可以用在项目中的 css 代码片段
dev.to/afif/anothe…

6. 精读《低代码逻辑编排》的社区讨论
github.com/ascoders/we…

7. 腾讯面向开发人员梳理的代码安全指南
github.com/Tencent/sec…

8. iconfont 支持全新的彩色字体图标
mp.weixin.qq.com/s/Nf6b_KjQ3…

9. 三角学在 CSS 和 JavaScript 中运用
tympanus.net/codrops/202…

工具与类库

1. google 脚本工具 zx 推荐
mp.weixin.qq.com/s?__biz...

2. 可以将代码片段生成图片的工具 carbon
carbon.now.sh/

3. 基于 react 的一套头像库
github.com/chilllab/re…

4. listemoji 方便开发人员查找与复制 emoji 的网站
listemoji.com/

5. vueuse-playground
vueuse-playground.netlify.app/

6. GitHub 项目 README 生成器
github.com/rahuldkjain…

7. snowpack 的脚手架 astro 支持,多种语言在一个 Single File Components!!
github.com/snowpackjs/…

github.com/snowpackjs/…

---
import { A, B as Renamed } from '../components';
import * as react from '../components/ReactCounter.jsx';
import { PreactCounter } from '../components/PreactCounter.tsx';
import VueCounter from '../components/VueCounter.vue';
import SvelteCounter from '../components/SvelteCounter.svelte';
---
<html>
  <head>
  </head>
  <body>
      <main>

        <react.Counter:visible>
            <h1>Hello React!</h1>
            <p>What's up?</p>
        </react.Counter:visible>

        <PreactCounter:visible>
          <h1>Hello Preact!</h1>
        </PreactCounter:visible>

        <VueCounter:visible>
            <h1>Hello Vue!</h1>
        </VueCounter:visible>

        <SvelteCounter:visible>
            <h1>Hello Svelte!</h1>
        </SvelteCounter:visible>

        <A />

        <Renamed />

      </main>
  </body>
</html>