-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
blog(2022-12-26094619.md): 2022-12-26 daisyUI、Docus、fnm、Tailwind Pock…
…et & V4、Next13.1、TypeScript 4.9、Bun 0.4.0 - [daisyUI,Docus,fnm,Tailwind Pocket & V4,Next13.1,TypeScript 4.9,Bun 0.4.0]
- Loading branch information
Showing
1 changed file
with
154 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| --- | ||
| slug: 2022-12-26094619 | ||
| title: 2022-12-26 daisyUI、Docus、fnm、Tailwind Pocket & V4、Next13.1、TypeScript 4.9、Bun 0.4.0 | ||
| authors: [innocces] | ||
| tags: [daisyUI,Docus,fnm,Tailwind Pocket & V4,Next13.1,TypeScript 4.9,Bun 0.4.0] | ||
| --- | ||
| > 整合来源包含 [咲奈的平行时空](https://t.me/SakinaSpace)、 各种前端论坛以及吹水群 | ||
|  | ||
|
|
||
| > 最近大家不要毒奶自己. 真的很治嚣张的人!!! | ||
| 摘要 | ||
|
|
||
| - daisyUI | ||
|
|
||
| - docus | ||
|
|
||
| - fnm | ||
|
|
||
| - tailwind Pocket | ||
|
|
||
| - tailwind v4 | ||
|
|
||
| - Next13.1 | ||
|
|
||
| - TypeScript 4.9 | ||
|
|
||
| - bun v0.4.0 | ||
|
|
||
| ## daisyUI | ||
|
|
||
| [daisyUI Github](https://github.com/saadeghi/daisyui) | ||
|
|
||
|  | ||
|
|
||
| 近些年不管是 HeadlessUI 还是 CSSUI 都很火. 这当中的集大成者莫过于是 Tailwind 了. daisyUI 就是以 Tailwind 为宿主所衍生的一个框架、编译器无关的 CSSUI 组件库. 高达 40+个组件可用. 并且提供了很多套主题. 当然这些都是可选的. 你可以通过[配置](https://daisyui.com/docs/config/)来进行个性化定制. | ||
|
|
||
| 一些使用场景: | ||
|
|
||
| 1. 配合一些 HeadlessUI 得库来进行 UI 布局. 比如 Adobe 的 [react-aria](https://github.com/adobe/react-spectrum/tree/main/packages/%40react-aria) | ||
|
|
||
| 2. 快速建站. 比如一些商品类的门户首页. 只要你的 UI 愿意配合你. 产出一些可用的模版真的很方便. 这不得不说最近 Tailwind 它们的一些 template theme 了. 国外就在卖模版. 新的商机！！！副业可以搞起来了！！ | ||
|
|
||
| 3. 文档主题. 并不是所有的文档框架的主题都符合你的喜好. 当你自己要自定义一些文档主题的时候 UI 设计就是一个门槛了. 但 daisyUI 提供了很多套成型的主题. 也许你可以根据这些主题来快速找到你喜欢的配色. 下面要说的 docus 就有这样的示例 | ||
|
|
||
| 4. Astro. 其实这和第三点有点重合. 不过因为 CSS 本就无样式限制. 就很自然的会和 Astro 联想到一起. | ||
|
|
||
| ## Docus | ||
|
|
||
| [Docus Github](https://github.com/nuxt-themes/docus) | ||
|
|
||
|  | ||
|
|
||
| docus v1.2.3 发布了. 感觉自打 1.0 版本之后, 就没有什么新的功能并入了. 一直在修复一些问题和做一些简单的提升 | ||
|
|
||
| docus 是以 Nuxt3 为基础的一个文档建站工具. 优点是 Nuxt 很全. 那么 Nuxt 的大部分东西你都可以使用. 并且提供了很多 module 可以使用. 算是你的另一个建文档的选择吧. | ||
|
|
||
| ## fnm | ||
|
|
||
| [fnm Github](https://github.com/Schniz/fnm) | ||
|
|
||
|  | ||
|
|
||
| 一个 Rust 开发的 node 多版本管理工具. 可能你比较常知道的是 n/nvm/nvm-windows/pnpm env 等. 但这些工具(除 pnpm)都有端的限制. fnm 是一个全部平台都支持的 node 版本管理工具. 还号称很快(反正 Rust 开发的东西都说它很快). | ||
|
|
||
| 你可以快捷的使用 .node-version(.nvmrc 这明显是想吃 nvm 的用户) 文件来标识你当前的项目所使用的 node 版本. 然后通过 `fnm use` (一股子 nvm 的味道.) 来快速切换 node 版本. | ||
|
|
||
| 下载对应版本 | ||
|
|
||
| ```bash | ||
| $ fnm install 18 | ||
| ``` | ||
|
|
||
| 总体从 nvm 切换到 fnm 的成本不大. 看你喜欢了 | ||
|
|
||
| 我想吐槽的一点是. 你的官网地址是摆着唬人的么. 一波[重定向](https://github.com/Schniz/fnm/blob/master/site/vercel.json#L7)回 github？？？？ | ||
|
|
||
| ## Tailwind Pocket | ||
|
|
||
| [Tailwind Pocket Website](https://tailwindui.com/templates/pocket) | ||
|
|
||
|  | ||
|
|
||
| 炒个冷饭. Tailwind + Framer Motion 打造的一个移动终端的模版. | ||
|
|
||
| $299!!! 你自己想吧！！！ | ||
|
|
||
| 不过大家真的可以尝试一下 [Framer Motion](https://www.framer.com/motion/). so cool!!! | ||
|
|
||
| ## Tailwind V4 | ||
|
|
||
| 11.22 号, 作者 Adam 发布了对 V4 的展望: | ||
| Goals for Tailwind CSS v4.0: | ||
|
|
||
| 🤏 Simplify mental model, fewer framework-specific concepts | ||
| 🪄 Less configuration, without less power | ||
| ✂️ Fewer dependencies | ||
| ⚡️ 10x faster | ||
|
|
||
| Aggressively defend against complexity, double down on robustness and stability 🤝 | ||
|
|
||
| (就是说. 数字焦虑可以去掉的) | ||
|
|
||
| 然后 20 号来了一波投票 | ||
|
|
||
|  | ||
|
|
||
| Rust 的选项支持度是最高的. 2202 年了. 马上 3202 年了. xdm, Rust 可能真的要搞起来了. | ||
|
|
||
| ## Next13.1 | ||
|
|
||
| [Next13.1 blog](https://nextjs.org/blog/next-13-1) | ||
|
|
||
|  | ||
|
|
||
| 就是小. 缩减 bundle. 主动集成了 [`babel-plugin-transform-imports`](https://nextjs.org/blog/next-13-1#import-resolution-for-smaller-bundles). 对应的 swc 也使用了 `modularizeImports`. emmmm~ 其实我 swc 体感不好. 可能我没怎么深入使用, 所以我说的也没啥可信度. 哈哈哈哈哈哈 | ||
|
|
||
| ## TypeScript 4.9 | ||
|
|
||
| [announcing-typescript-4-9-beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-9-beta) | ||
|
|
||
|  | ||
|
|
||
| 这也是个冷饭. 但是值得提一下 | ||
|
|
||
| 感觉通篇其实在讲述关于联合类型上我们如何让 TS 更智能的来推断类型. 就像推文中说的: | ||
|
|
||
| > we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes. | ||
| 比如图中的例子. 当你访问 `green.startsWith` 的时候会得到错误提示 `Property 'startsWith' does not exist on type 'Color'.`. 这是因为使用断言将 `green` 定义为了联合类型 `Color`. 以前我们想要让 TS 正确推导出类型需要进行类型判断: `typeof green === 'string' && green.startsWith`. 这个时候就可以正常使用了. 而 **satisfies** 的出现我们可以省去判断的一步直接获得正确的类型. 甚至可以和 **as const** 联用获取到精准的值类型. | ||
|
|
||
| ## Bun V0.4.0 | ||
|
|
||
| [Bun V0.4.0 blog](https://bun.sh/blog/bun-v0.4.0) | ||
|
|
||
|  | ||
|
|
||
| 释出了 `bunx` 命令. `100x fast npx` 的 slogen. 真是天下武功, 唯快不破. 但其实对我来说目前 `pnpx` 也管够用 | ||
|
|
||
| ## 常用网站推荐 | ||
|
|
||
| - [DEV](https://dev.to/) | ||
|
|
||
| - [Medium](https://medium.com/?tag=javascript) | ||
|
|
||
| - [Github](https://github.com/) | ||
|
|
||
| - [Stackoverflow](https://stackoverflow.com/) | ||
|
|
||
| - [V2](https://www.v2ex.com/) | ||
|
|
||
| - [Producthunt](https://www.producthunt.com/discussions?category=developers) | ||
|
|