In previous article, I introduced the web agent I built using Puppeteer and AI. It is a fun project but its cons weigh more than its pros. In this article, I will make it with a new approach but reach the same goal without the drawbacks it has.

I vibe coded a web agent - Part II

Lately, I have been experimenting with building a web agent through vibe coding. This article is the first part of a series where I will share my journey. You will know how to build a web agent and how feasible it is to build a web agent with vibe coding completely.

I vibe coded a web agent - Part I

When it comes to long-running tasks in AWS, the most-chosen solutions are AWS Lambda and AWS EC2, but there are still some other options to consider before jumping to EC2 when Lambda can not meet your requirements.

Best fit for long-running task

上文笔者详细回顾了 `npm` 的演`进之路以`及在依赖树解析上的算法迭代，同时也简单地和 yarn 进行了对比。不难看出，它们尤其在依赖树的解析上煞费苦心，从嵌套算法到扁平算法，从发现重复依赖到 hoist 依赖优化等等

Why pnpm

在谈起 Node.js 的包管理器时，npm 和 yarn 肯定是讨论最多的。在 2023 年的今天，npm 和 yarn 到底还有什么差别，而我们又应该选择什么工具作为 Node.js 最佳的包管理器呢？

Compare npm and yarn

最近 OpenAI 在 6 月 13 号发布了新 feature，主要针对模型进行了优化，提供了 function calling 的功能，该 feature 对于很多集成 OpenAI 的应用来说绝对是一个“神器”。 

OpenAI Function calling

Graphql是一种API查询语言和运行时环境，可以帮助开发人员快速构建可伸缩的API。然而，尽管Graphql可以提供一些优秀的查询性能和数据获取的能力，但是在使用Graphql的过程中，开发人员也会遇到一些常见问题，其中最常见的一个问题是N+1问题。

GraphQL中的N+1问题

长期以来，前端的模块化管理都不很成熟（webpack出现之前），为此，早期（ES5时代）为了实现依赖管理，甚至会利用window等全局对象进行模块注册。而如今有了webpack,rollup等优秀的打包工具...

一个入门级别的前端打包工具

长期以来，在web领域中，若想让客户端与服务端交互，我们首（或者说唯一的）选的肯定是Http。而随着web应用的快速发展，数据的消费量和功能需求的强度也逐渐增加，很显然，传统的Http模式早已不能满足我们...

WebSocket

不知从什么时候开始，大家相信前端摩尔定律：“每18个月，前端难度会增加一倍”。我并不完全认可这个数字的可靠性，但是这句话的本意我还是非常肯定的。

前端组件化思想

最近在整理项目代码时，发现了Promise的一些小坑，特地重新回顾复习一遍。

关于Promise的一些

一个标准的前端项目，必定始于yarn start，它将会经历babel编译，webpack构建，server启动等流程，然后由浏览器加载页面。这是很Dev的开发方式，可生产环境我们却往往不这么做。

前端项目应该如何部署

最近在做一些微服务相关的设计，内容包括服务的划分，Restful API的设计等。其中比较棘手的就是Service的职责划分：如何抽象具有统一业务范畴的Model，使其模块化，又如何高度提炼并组合多模块，使得业务可独立服务化。为了找寻答案，看了不少书籍和博客，在DDD中找到了一些思路，个人觉得受益匪浅，或许也可以受用于大家，特分享于此。"

浅析DDD(领域驱动设计)

以方法作为参数传递时，Ruby有proc，C#有Delegate，而JavaScript则更不用说，唯独Java在这方面很尴尬。但Java8提供了Lambda表达式和函数接口，这无异是Javer的福音，也使得Java这门语言更佳的优秀和易用。"

Java8之函数接口

项目结束后许多同事未来可能会是React+ES6的技术栈，因此我就讲内容进行了调整，准备跟大家分享一下ES最近的几个版本的概况，这篇Session不能让大家学会ES201X，只是想让大家对ES有一个全局的认识，最后我也会跟大家分享一下我对JavaScript未来的看法。

ES201X

由于CORS(跨域)本身是具有安全隐患的，因此浏览器默认是禁止的。但跨域却在web开发中具有很重要的作用，也是前端dev经常为之头痛的领域。那么，前端到底如何跨这个域呢，且往下看。"

就是要跨域

微信小程序自内测以来已经刷爆了整个IT圈，至少各大论坛(segmentfault，掘金，CSDN等)的前端板块已经被霸屏。

微信小程序，你怎么看？

我们经常使用document.getElementById去获取DOM中的元素，也会使用childNodes来获取子节点。那么Element和Node的区别是什么？而什么又是HTMLCollection,HTMLElement,和NodeList呢？

Element和Node的区别你造吗？

git pull -r origin branch是程序员最常用的Git指令之一了。可现今为了保证安全性，许多公司的Git服务器并不像访问Github那样容易，往往得通过VPN才能进行访问。那么问题来了，假如你在家里办公，连不上VPN肿么办？别懵逼，往下看。

"Remote Work Via Git"的正确打开方式

直到上周，我才跟同事一起看了"Google I/O 2016" VR发布会。其实也并不是不想关注VR，只是觉得AR/VR在现在已经被炒的太热了，以至于就好像我们已经完全掌控了它一样。但实际上我们才仅仅只是个开始，或者说，我们还并未真正的开始。

不一样的视角，不一样的VR

说起精益软件开发，这绝对算是一个老生常谈的话题了。所以在这里，我不想去谈论诸如“精益软件开发的几大原则”或是“精益软件开发的最佳实践”等陈词滥调；只是最近在同事的推荐下，拜读了一本有关IT运维方面的书籍(《凤凰项目》)。书中的故事十分有趣，同时又引人深思，细细品味后颇有感悟，对工作和生活上有了许多新的想法，于是便按耐不住写下此文。

从精益软件到精益思想

这篇Deck是近期对RSpec测试框架的一个Session总结，参考了RSpec官方文档那个和Better Rspec的介绍，对RSpec的一些简单用法和最佳时间进行了介绍。

RSpec Trial

初接触React，除了不习惯其组件化的设计原则外，往往它所‘依赖’的众多module也会让初学者感到困惑，使得不知从何学起。此文只是我对React的一些浅析，希望能帮助想要学习React的朋友入门。

React从零学起

Both mock and stub are mummy objects for unit test in spring.When you have lots of dependencies in unit test, creating fake object to reduce dependency is really recommended. Therefore, we use mock and stub. But there are some differences between mock and stub.

Mock & Stub

也许你有过一些使用MVVM框架的经验，并且你熟悉各种主流框架的使用规则（Angular, Knockout），可你是否静下心去读一读其中的源码，思考一下其内部的实现呢？这个deck是根据我对MVVM框架的理解编写而成，其中的demo完全模拟了Knockout.js的接口，希望可以跟大家一起去分享一下如何实现一个简单的MVVM框架。

Hello, Knockout

MVVM中对Bingding的解析只能算viewModel->view的单项绑定，但MVVM绝不仅仅只有单向绑定，更重要的是如何监控viewModel变化，将信息实时的反馈给view。

打造属于自己的MVVM框架: 3.双向绑定

上一篇介绍了MVVM的基本知识，本篇将针对MVVM的模版渲染引擎进行介绍，不但从原理上对模版引擎的渲染原理进行剖析，而且有会相应的实现代码。

打造属于自己的MVVM框架: 2.模版渲染引擎

MVVM(Model View ViewModel)是一种基于MVC的设计，开发人员在HTML上写一些Bindings,利用一些指令绑定，就能在Model和ViewModel保持不变的情况下，很方便的将UI设计与业务逻辑分离，从而大大的减少繁琐的DOM操作。

打造属于自己的MVVM框架: 1.什么是MVVM

初来公司至今，也有半年之久。听说过，也有幸接触了许多新鲜的技术和大牛，作为一名有情怀的Dev，在一步步融入这个这技术圈时，总感觉犹如行走在大漠之中，有时周遭的一切让我好奇，带着好奇有时也会寻找到一汪清泉，每一口都滋润着心房；而有时周遭的一切亦让我对未知感到恐惧，看不清眼前的方向，只得踱步前行。

初来乍到，如何融入公司的技术圈

有30个CSS选择器你必须烂熟于心，它们适应于当今各大主流浏览器。

你必须记住的30个CSS选择器[译]

一些元素，如float元素，如position为absolute,inline-block,table-cell或table-caption的元素，以及overflow属性不为visible的元素，它们将会建立一个新的块级格式化上下文。

理解CSS中的BFC(块级可视化上下文)[译]

自适应宽度是指当未明确设定容器的宽度（或外边距设为auto）时，在特定的情况下容器的宽度会根据情况自行设定，而设定的结果往往并不是我们想要的。

shrink-to-fit(自适应宽度)

块元素的margin-top或margin-bottom 有时会合并为一个margin，这种情况称之为外边距的合并，即collapsing margins.

Collapsing margins(外边距合并)

HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签，那就是audio标签。

Html5实现歌词滚动同步

从'严格'意义上说，javascript并不是一门真正的面向对象语言。这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别，因而默认它就是非主流的面向对象方式，甚至竟有很多书将其描述为'非完全面向对象'语言。其实个人觉得，什么方式并不重要，重要的是否具有面向对象的思想，说javascript不是面向对象语言的，往往都可能没有深入研究过javascript的继承方式，故特撰此文以供交流。

Javascript中几种较为流行的继承方式

之前对js中的原型链和原型对象有所了解，每当别人问我什么是原型链和原型对象时，我总是用很官方（其实自己不懂）的解释去描述。有一句话说的好：如果你不能把一个很复杂的东西用最简单的话语描述出来，那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。

一个例子让你明白原型对象和原型链

__proto__可以看作是一个公开对象原型的内部访问器，大多数浏览器都实现了该属性。一个对象如何访问原型链上的方法，都是取决于__proto__的，因此暴露了这个属性则势必会为对象的安全性带来影响，所以MDN并不推荐随意改变一个对象的原型链，但是我们还是有必要了解它。

理解Javascript中的__proto__

Function.prototype.apply()将会调用一个以this和数组形式的arguments为参数的方法，而call()方法则只是在第二个参数形式与之不同而已。

All Posts

I vibe coded a web agent - Part II

I vibe coded a web agent - Part I

Best fit for long-running task

Why pnpm

Compare npm and yarn