javascript

Why lit

Easy to debug When you develop with webcomponent, you work with chrome devtools instead of library dependent devtools. And chrome devtools has the best performance. Bundle size matters Hello world react, vue, lit project bundled size is 143.39k for react, 52.88k for

javascript

Prune cache for vue's KeepAlive component

When you're making a layout with tabs, you'll quickly come to code like this KeepAlive is used to keep the current route component alive. So as to speak, it keeps its state when navigating away. Later you put more and more pages in one

frontend

Nuxt全栈开发

提起nuxt，玩过vue的同事们，应该都有一种似曾相识的感觉。 nuxt框架最初是为了解决前端SSR，SSG的需求而诞生的。由于能上SSR，SSG的项目实在是少，能施展nuxt大法的地方自然也十分有限。但是流行度和一个框架的优秀程度是不能划等号的。虽然单纯的SPA+CSR能解决很大一部分场景，但是SPA+CSR不是web的全貌。在高度这个内卷的时代，掌握一个全栈框架逐渐成为前端开发的必备技能。 Nuxt的闪亮特性 3.0版本后的nuxt已蜕变为全栈框架。不光可以玩SSR SSG，还可以配置成单纯CSR，也可以写后端接口，封装bff接口或是连接db，redis请求数据。目前它包含如下优秀特性： * 支持五种渲染模式，对混合渲染具有灵活的控制。 * 开发体验提升，文件路由，自动导入等功能都可以大大提升开发效率。 * 框架成熟，nuxt深耕vue和SSR领域多年，是vue SSR的最佳方案。 * 快速实现后端接口，前后端一体化开发。 * nuxt devtools可视化管理全部路由和组件。初识nuxt 使用如下命令搭建一个nuxt项目：

javascript

web暗黑模式浅议

大家有没有发现近些年的新设备从移动的到PC全都支持暗黑模式了？是的，这是个趋势。而且有些应用市场上不支持暗黑模式的应用都已经不能上线了。暗黑模式本质上是一种换肤技术。早在20年前，qzone，人人网之类的应用就已经在web平台上实现了换肤。支持的皮肤可谓五花八门，还能商业化卖钱。所以暗黑模式不是什么新技术。然而为什么最近几年却出现新的活力？主要原因在于操作系统层面都加入了对暗黑模式的支持。最开始是Android (Android 10)，IOS (IOS 13)等移动端系统，之后桌面端也都加入了暗黑阵营。从而形成了从操作系统到应用程序，再到web的全链路黑化。用户能在操作系统上一键开启全局的暗黑模式。暗黑模式香吗？暗黑模式有什么优点，值的我们追随？ * 视力保护：相信大家都有半夜刷手机的经历。晚上一个大白屏确实很刺眼。 * 美学、用户习惯：这个角度完全是从个人的感觉出发。有人觉得白底黑字好看，有人觉得黑底白字更酷。另外还要考虑用户习惯，比如股票行情、命令行终端一般都是暗黑模式的。 * 省电：移动设备屏幕电量消耗是个大头。因为屏幕的发光物理原理，深色比

javascript

Nestjs dependency injection

DI is a key paradigm of nestjs. Here's some experience I got after nestjs experiment. * Provider are scoped within a module. If you want a provider available everywhere, you need to attach it to a global module using @Global. * If a non-global provider is

javascript

Detect web page running in puppeteer

Puppeteer use headless chrome with this ua: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4950.0 Safari/537.36 We can check the special string HeadlessChrome to detect /HeadlessChrome/.test(navigator.userAgent);

javascript

Unexpected loop introduced with vue jsx

Vue3 has excellent support for jsx nowadays. Since jsx is flexible and is best used in library componets. Today a strange loop was introduced when I was developing a component with the following code. Child is reassigned throughout a block. This code is compiled

javascript

Using jsx with vue3

SFC (single file component) is one of best vue invention. Compared with jsx, it's simple, easy to use and maintain. In some cases however, react jsx offers flexibility and power that SFC cannot offer. eg. You're making a complex table component, a custom layout

Subscribe to juju's Blog