- 博客(87)
- 资源 (1)
- 收藏
- 关注
原创 这段时间 `weapp-vite` 的功能更新与优化
自从上次宣布 的发布,已经过去三个月; 也逐渐迭代至 版本。在此期间,我对其进行了多项功能的增强和优化,接下来我将为大家详细介绍近期的阶段性成果。在项目启动时, 会自动构建 依赖,无需再手动点击微信开发者工具中的 构建 ,提升了一定程度的开发体验。详细信息请参考:自动构建 npm 文档。 支持在项目中的 文件中添加注释。例如:这些注释会在最终产物内被去除。我生成了许多小程序的 文件,部署在 上。通过指定 的 字段,实现了配置文件的智能提示功能,优化了一点点开发体验。详见:JSON 配置文件
2024-11-17 01:36:50
608
原创 我对 monorepo 的一些思考
最近在自己的新项目中,使用了模板,并不断地做了不少改进。在此,我想借此机会分享一下这个模板的演变过程,以及我对monorepo的一些思考。强大的monorepo管理 (pnpmturborepo单元测试 (vitest包括cli bin全部都是typescript代码规范与质量 (eslintgit提交规范 (huskycommitlintpnpm部署Docker模板自动发布npm包 (changeset配置文件同步升级默认把repo放在packages和apps这2个目录里面从单仓到。
2024-09-11 20:59:20
1220
原创 原生小程序开发如何使用 tailwindcss
在日常的工作开发中,我们常常会遇到这样的场景:公司或团队内部,需要开发和共享一些 逻辑/UI 组件等等的代码,但是这些代码里面,可能包含一些敏感信息或专有功能,我们不想发布到公开的npmjs上去。这时候我们就需要去搭建npm私有源,让这些包只在我们公司内部分享。那这时候Verdaccio就是一个方便的选择。Verdaccio是一个轻量级的私有npm仓库管理工具,它可以帮助我们搭建自己的私有 npm 源。
2024-05-14 23:08:19
1532
原创 使用 Verdaccio 私有化 npm 源指南
在日常的工作开发中,我们常常会遇到这样的场景:公司或团队内部,需要开发和共享一些 逻辑/UI 组件等等的代码,但是这些代码里面,可能包含一些敏感信息或专有功能,我们不想发布到公开的npmjs上去。这时候我们就需要去搭建npm私有源,让这些包只在我们公司内部分享。那这时候Verdaccio就是一个方便的选择。Verdaccio是一个轻量级的私有npm仓库管理工具,它可以帮助我们搭建自己的私有 npm 源。
2024-04-14 16:45:39
1911
原创 macOS搭建php环境以及调试Symfony
经过这么多年的发展,早就已经非常的成熟了。的同学,看到这个结果,不免会心一笑,弱类型解释型之殇哈哈。的时候,一定要买大点的内存,尤其是你要本地跑容器的,推荐。不懂这个梗的,可以去浏览器的开发者工具控制台,执行一下。这首歌,于是一边写代码写这篇文章,一边开始了我的。早已经了然于胸,不都是这些玩意,或者那些架构嘛…啥的,我个人感觉是没有必要的,因为这种都可以使用。字符串,这种代码实在是太常见了,各个语言的。不知不觉就水了这么长的文章了,看都看累了。说远了,我们注册了这个路由之后,访问。
2024-03-30 23:38:25
2081
原创 unocss 究竟比 tailwindcss 快多少?
我们知道unocss很快,也许是目前最快的原子化CSS引擎 (没有之一)。unocss解释它为什么这么快的原因,是因为它不用去解析CSS抽象语法树,直接在content里面通过正则表达式从内容中提取token,然后生成样式。这点从unocss可以看到unocss比快3.7倍左右。其中官方的unocss测试素材,使用的是vite测试素材则是vitepostcss。可是假如我们以vitewebpack插件的方式去使用unocss的话,默认是不支持那些@apply@screentheme()这些CSS。
2024-03-05 20:00:15
2327
原创 记录一次自己的服务器迁移过程
最近阿里云发动了史上最大力度价格战,自称平均降价超20%。而我,作为一只哪家便宜,就买哪家的三姓家奴。趁着降价,悻悻然又买了一台阿里云ECS,计划用来承接自己一台快过期的华为云 HECS的服务。幸运的是,我这个服务里面,所有的组件早已容器化,业务镜像也早已经使用了私有镜像仓库,所以迁移起来还是很容易的。让我们立刻开始吧!
2024-03-03 22:35:57
1343
原创 使用 postcss-cva 来生成 cva 方法吧
cva全称为, 它是一个非常适合制作那种,创建控制Css变体方法的类库,它非常的契合像这类的原子化思想。在很多时候我们自己封装组件, 尤其是使用原子化思想去编写css, 然后去封装组件,用它就对了!
2024-02-01 16:18:01
1541
原创 我可能是全中国最了解 tailwindcss 的开发者
我热爱并经常使用它, 我也非常喜欢daisyui, 使用这2者进行开发为我节省了不少功夫。然而遇到项目上的一些场景,需要深度定制Css UI组件,这时候daisyui暂时无法解决我的问题。于是我产生了一些想法,并以和daisyui为灵感,编写了 icestack这是一个Css UI框架的生成和管理工具,通过它,你可以很容易的对样式进行扩展,也可以很容易的从0开始构建你自己的Css UI并结合来进行使用!让我们看看如何来使用它吧!
2024-01-03 14:28:27
1005
原创 我可能是全中国最了解 tailwindcss 的开发者
首先,我要对起这样的标题感到抱歉,本来想起一个"我的2年开源之旅"这样的标题,但是我知道,这种标题太普通,肯定就没啥人感兴趣看,就像我写的大部分文章一样。于是索性做了一回标题党(坏笑~)。不过这个标题也不是空穴来风,我也确实比较了解实际上现在回过头想想,自己不过只是做了一件很小的事情,我的那些开源项目又不是那种有开创性的全新项目,而是寄宿于某一个生态,跟着生态潮涨潮落,早晚有一天会被遗弃。不过这段旅程中,我各个方面还是收获了很多,起码我再去面试的时候,人家问我懂不懂ast,写不写plugin。
2023-12-15 22:46:48
629
原创 用 @icestack/ui 构建适配微信小程序的 daisyui
daisyui是中最流行的纯CSS框架,然而它作用的平台只有h5,直接在小程序中使用会报错,因为小程序的CSS选择器有很多限制,无法像h5那样自由。那么怎么样才能构建出适配小程序版本的daisyui呢?
2023-12-01 17:07:24
1579
原创 使用tailwindcss来构建以及引入外部组件
我们在日常的开发中,经常会去使用和封装各种各样的组件库。有些是开源的,第三方开发的UI库,有些是我们开发人员给自己的特定的业务封装的UI库。其中很多情况其实是以流行的开源UI库(或者fork的改版)自己封装的业务组件为主的开源UI库它们的样式相对来说是独立于整套系统的,比如它们的样式都是ant-el-开头的,一般引入之后不会和原先系统里的样式产生冲突。而自己封装的业务组件,由于往往和系统高度绑定也没有这样的问题。那么如何用来构建/发布和引入自己封装的业务组件呢?
2023-10-07 18:05:39
1374
原创 动态调整系统主题色(4): CssVar 与 Variant 方案的探索
这篇已经是动态调整系统主题色的第四篇了,转眼距离第一篇发布已经过去了2年的时间。随着时间的流逝,对技术的理解也在不断的进步,方案也在不断的完善和推陈出新,本篇文章就是在探讨系统主题色的2方案:CssVar和Variant。假如你没有看前面三篇文章的话,初看到这2个词可能不能直观的知道它们是什么意思,下面我先简单介绍一下它们是什么以及它们的原理。
2023-10-06 11:46:56
910
原创 更灵活的 serverless framework 配置文件
再经过前置教程的部署之后,不知道你有没有注意这样一个问题,就是我们部署的函数名,以及API网关的endpoint,它们的名称和路径都带一个dev?这个就是stage导致的了,我们执行sls deploy部署的时候,由于没有指定--stage的参数,导致它默认就是dev,所以我们之前部署的函数名称,网关里面都带它。那么它有什么作用呢?实际上这个值就是用来给你的函数,以及对应的服务去区分阶段/环境的。比如我们一个提供webdevsitprod不同的环境,它们各自的API网关分配的endpoint。
2023-09-08 17:35:22
216
原创 lambda nodejs 函数降低冷启动时间的最佳实践
serverless 降低冷启动时间的探索 - 服务端打包 node_modulesNodejs云函数冷启动时间的优化2篇文章的作者:ice breaker2首先在看这篇文章之前,我先必须给你介绍一个概念,就是冷启动时间。这个特性各个服务商的serverless云函数都存在,这个和函数容器的生命周期息息相关。以LambdaInit。
2023-09-07 17:36:19
464
原创 typescript 支持与本地调试
在上一章节,我们创建了一个函数,并把它顺利的部署到了AWS云上。然而真正上生产的函数项目肯定不会这么简单。对于一个现代的nodejs项目来说,我们还有许多的需求:比如我们也更想使用typescript来进行开发,还有我们也需要在本地搭建一套完整的模拟环境,来对我们编写的代码进行调试和测试。比如我们要添加对应的单元测试和CI/CD又或者是我们的函数里面,各种第三方的依赖项的处理,js相关的还好,但是其他那些和平台绑定的二进制文件,又或者是内置的.xdb等等一些数据文件,应该如何处理呢?请听我娓娓道来.
2023-09-05 13:20:04
398
原创 Serverless Framework 亚马逊云(AWS)中国地区部署指南
是业界非常受欢迎的无服务器应用框架,开发者无需关心底层资源即可部署完整可用的 serverless 应用架构。Serverless Framework 具有资源编排、自动伸缩、事件驱动等能力,覆盖编码-调试-测试-部署等全生命周期,帮助开发者通过联动云资源,迅速构建 serverless 应用。目前默认支持, 同时也是支持最好的云服务商是亚马逊云(AWS),亚马逊云在中国地区,目前主要服务企业用户,而且只开放了宁夏和北京2个地域,基础设施方面分别属于西云数据和光环新网。幸运的是亚马逊也给中国这2。
2023-09-05 13:19:25
1275
原创 小程序 CSS-in-JS 和原子化的另一种选择
之前我们写tarojs的应用的时候,想用CSS-in-JS解决方案,就使用社区方案里推荐的linaria, 这里我推荐另一种解决方案pandacss。pandacss是个优秀的CSS-in-JS编译时框架,相比linaria,它的配置更加简单,智能提示好,开发者体验也更好。而且它也吸收了许多的优点,我们可以自由的配置我们的主题与样式,且原子化的类名也更容易进行自由组合。就是让你在小程序开发中使用它。
2023-08-16 11:10:23
725
原创 使用 `tailwindcss-patch@2` 来提取你的类名吧
当然也不是只是给你看看的。你可以对它进行一些分析,而我是把它作为我。也是 tailwindcss-mangle。版本,主要添加了一个配置文件读取和工具类名提取额功能。目前我只是提取了所有的工具类,实际上可以获取。生成的工具类,具体的使用方式就看下篇文章吧。的方式,来为这个项目添加更多的功能,默认情况下,执行成功后会有一个。本身是一个混淆工具,用来混淆。让我们来看看怎么使用它吧。当然,你可以通过配置文件。项目重要的组成部分。的数据文件来使用的。选择你喜欢的包管理器。
2023-08-15 19:28:26
524
原创 Panda 编译时原子化 CSS-in-JS 框架的跨平台方案
这2种CSS-in-JS方案各有它们出彩之处。目前我倾向于pandacss,只因linaria实在是太hack了!它的css模板字符串,有自己的语法,有自己的词法分析器,就像在创造一个,真是太复杂了!但是它非常值得研究!另外pandacss一个优势就是,它不会去修改我们的源代码,这带来了更少的出错的可能性,而本人在使用linaria的时候,配置稍复杂就有fatal的可能,这就需要我们花更多的时间去修复它。
2023-07-31 09:57:58
675
原创 本地环境安全访问公有云资源的一种方式
在那个网络里,再配置复杂的密码,放开额外的端口暴露在公网上,显然这就比上面直接暴露数据库要安全一点,因为这种方式相当于加了一层保护壳。把它作为我们本地环境和云上环境的桥梁,让我们本地可以快速安全的访问到云上的资源,同时云上的资源也不需要暴露在公网上。就可以直接连接线上的数据库,访问线上的缓存,队列等等系统了。在使用过程中,如果遇到问题,或者你有好的意见和建议,欢迎与我讨论。等等资源暴露在公网上是非常不安全的,即使你设置了复杂的密码。,就可以访问对应的资源了,这些资源,你甚至可以直接监听。
2023-07-21 09:15:20
373
原创 为什么个人项目我更推荐使用Caddy?
最近我把自己一些项目里面的nginx换成了caddy,运转相当良好,比较开心,所以写了这篇文章,也推荐给大家使用。Caddy。
2023-06-25 10:03:09
2515
原创 tailwindcss 多上下文与独立分包
独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行。从独立分包中页面进入小程序时,不需要下载主包。当用户进入普通分包或主包内页面时,主包才会被下载。独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。独立分包中不能依赖主包和其他分包中的内容,包括 js 文件、template、wxss、自定义组件、插件等(使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制)主包中的app.wxss。
2023-06-20 11:49:27
292
原创 深入理解CSS字符转义行为
在日常的开发中,我们经常写css。,我们往往写出这样的样式.btn {} }这时候就纳闷了,我明明写的是啊?这个转义还好说,\3这个又是哪来的呢?本篇文章就来从W3C的角度,对css转义行为进行揭秘。css。
2023-06-12 10:46:20
1236
1
原创 符合国情的supabase私有化部署(0)
关注技术前沿的我们,想必对BaaS都不陌生。从Firebase横空出世,再到2014年的一声炮响。它已经给全世界开发者,带来了大量便捷的,开箱即用的开发运维环境,加上它优秀的开发体验。这让我们程序员们能够以很少的人力成本,做出功能丰富的应用。然而出于众所周知的原因,它在我们国内是无法使用的。于是利用这信息不对称的效果:国内一批独立的公司还有一些大厂,对Firebase这个产品进行"借鉴" 从而做出了自己的XXbase。比如某里云的XXX,某讯云的XXX,还有xxCloud的XXX,等等。
2023-05-31 12:48:53
2241
原创 利用Github Action备份Docker容器中的数据库
数据很重要,所以我们要经常备份。那么怎么备份呢?假如我们使用云厂商的数据库,里面已经自带了快照和备份功能了,只要你愿意花钱,就能帮你解决大部分技术问题。它们这些数据库往往是部署在单独一/多台主机实例上,不会放在容器里去跑。为什么?俺也不是专业的运维,俺也不知道。这里给个知乎链接作为参考对于我们个人项目而言,一般不会去购买昂贵的数据库实例,往往云主机容器部署serverlessoss/cdn就能满足绝大部分开发的需求了。很多时候简单的就够用了,然后再加个开源的BAASsupabase。
2023-05-15 10:05:10
264
原创 一个混淆Tailwindcss类的工具
是一个原子类优先的css框架,现如今非常的流行。它语义化的类名能够让前端开发人员直观地对元素的样式进行编写和维护。然而这种直观性,有时候也会带来一定的困扰。有时候我们不想让用户或者外界的开发人员也能直观的观测到所有元素的样式,比如我们访问 https://tailwindcss.com , 然后打开开发者工具,检查元素。瞬间,页面上那些元素的排版和样式都能猜测出来,甚至都不需要看右边的style面板。所以,出于让其他人在生产环境中无法直观的看出一个元素的样式,我们就需要对生成的原子类进行混淆。
2023-05-05 09:23:40
492
原创 Graphql中我们应该用什么姿势来实现Resolver?
我最近在用Graphql来弥补原先写的RESTFUL接口的一些短板。在实践过程中遇到了一些思考,借着文章抛砖引玉,分享给大家。为了让大家更好的理解本文的思想,我搞了一个简单的案例,源码见附录。首先我们把ER图,变成即为:于是就能直接粗略的把SDLid: Int!tags: [Tag!user: User!id: Int!user: User!id: Int!id: Int!接下来我们就开始定义Query和。
2023-04-25 10:00:00
755
原创 这可能是小程序使用 tailwindcss 开发的最佳方案
remrpx笔者对的理解还算比较到位,也写了不少的presetplugin和许多的postcss插件。最近这个月,我发布了的2.x版本,与之前的版本相比,大大增强了我们开发者的开发体验,尤其是类jsx框架相关的体验。接下来,让我们快速开始吧!
2023-03-28 14:45:33
1089
原创 # 技术详解: 利用CI同步文章以及多端发布
前几天我更新了一篇简单技术总结之后,不少人都对里面的技术细节感兴趣,问我具体是怎么实现的?于是为了给群友答疑解惑,接下来陆续会聊聊我自己的实现,这篇文章的这个方案已经运行了很多年了,很久没有更新,居然有一天会被人问到,也是比较欣喜的。当然,出于自身水平的限制,目前肯定有更好的方案,所以也欢迎提出建议和意见。这个问题第一眼,我们可能会想到这样的解决方案:这些信息可以体现在文件的名称上呀!比如我们写了一篇文章,文件名叫如何让霸道富婆爱上我_20230302_520_true.md。
2023-03-03 11:47:51
404
原创 3月来了,给自己做一个简单的nodejs后端技术总结
我又滚回来写文章了,从去年11月底到今年2月底,算起来整整1/4年没有写博客了,自己的博客站都长满了坟头草,我在上面跳舞。在这3月来临之际,我们还是来聊聊技术,就当给自己做个阶段性总结。
2023-02-28 21:36:23
1076
原创 动态调整web主题(3): 基于tailwindcss插件的主题色生成方案‘
续接[动态调整web系统主题?看这一篇就够了]与[动态调整web主题(2) 萃取篇]笔者一直在思索这个解决方案,更加简单的使用方式,更加流畅的开发者体验。于是在之前的基础上,添加了的使用方式,同时也完善了选择器切换和智能提示,接下来就来介绍一下,如何使用吧。一种基于的模式的动态多主题色快速生成,和管理方案。
2022-09-26 10:44:26
1882
1
原创 如何利用 promise 影响代码的执行顺序?
我们写代码的时候,经常会遇到这样的场景。2个不同组件,它们的生命周期本身都是相互独立,毫无关联的,但是它们调用的接口,存在相互依赖的情况。我举个例子:开发小程序时候,里面App有一个onLaunch的hook,在小程序初始化时调用,而Page里也有一个onLoad的hook,在页面加载时被调用。但是,我们往往也经常遇到这种case现在问题来了,依据上面的执行顺序,getToken和请求实际上是并发执行的。而我们的预期是,先执行getToken并设置好全局token值之后,才调用。
2022-09-19 22:41:00
660
原创 优化 Serverless Nestjs 冷起动时间
本文主要介绍的是如何减小部署包的体积,从而减少冷启动时间。在方式上,其实各个Nodejs框架优化冷启动的方式都差不多,这样的方案完全可以无缝同步到其他的框架中,我们只需要选择自己喜欢的打包工具即可。Nestjs默认支持使用webpack进行打包,只需在nest-cli的参数中配置--webpack默认使用根目录下的这样就大大减小了npm包的体积,从而加快了部署和冷启动的速度。这个配置,和官方提供的有些不同,主要是因为官方的场景主要在国外的云厂商,而这个配置是针对阿里云,腾讯云进行配置的。...
2022-08-16 00:44:14
509
原创 在 HBuilderX 中使用 tailwindcss
之前我写了一个weapp-tailwindcss-webpack-plugin来兼容uni-app,taro等等各个框架,不过那时候提供的demo都是cli版本的。最近社区里有同学问我,HBuilderX要如何使用?今天就给大家带来HBuilderX中vue2和vue3各自的的使用方法。...
2022-07-31 14:45:08
1713
3
原创 如何调试JS中鼠标悬停事件影响的元素?
鼠标悬停俗称hover,它会在鼠标指针悬停在被选元素上时触发。一般前端开发会利用css中的hover伪类选择器,来给被选元素应用不同的样式,从而增强用户的体验感。最常见的例子就是Button。
2022-07-21 10:19:07
3549
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人