csbun / blog Goto Github PK

View Code? Open in Web Editor NEW

2.0 2.0 2.0 23.71 MB

Hans Chan's blog

Home Page: http://csbun.github.io/blog/

CSS 4.85% JavaScript 27.13% Stylus 40.44% EJS 27.57%

blog chan hans hexo

blog's Introduction

blog's People

Contributors

Stargazers

Watchers

Forkers

lmangoxx

blog's Issues

“氵忄曼”** | Hans Chan's Blog

http://csbun.github.io/blog/2016/04/culture-and-people-of-taiwan/

嗯，距离创建这个个博客文件已经有 2 个月了，都快要出发下一次远行了，还在写上一个地方的游记。（当我发布时，我已经从斯里兰卡回来了……😂）漫慢我的理解，“漫慢” 是**人（特别是台南人）的一种处世之道，一种生活态度。

Using Storybook with Preact | Hans Chan's Blog

http://csbun.github.io/blog/2017/03/preact-storybook/

TL;DR;Clone this repo and start！克隆这个项目然后启动即可！ 12345git clone [email protected]:csbun/preact-storybook-example.gitcd preact-storybook-examplenpm inpm run storybook

Fluxxor 学习笔记 | Hans Chan's Blog

http://csbun.github.io/blog/2015/02/fluxxor-learning-note/

从 Flux 开始前段时间想真正用 React 写个运营管理后台，然后就抓起 Flux 开搞，模式基本就是我之前写的这篇文章那样。但问题很快就出现了，一个字“繁琐”：我要写大量的 actions 和 stores，每个 store 还要写一些相似的逻辑去 bind 对应的 actions。

我试了一下 weex | Hans Chan's Blog

http://csbun.github.io/blog/2017/06/weex-challenger/

致读者weex 有风险，入门需谨慎。

阿里国际UED前端团队招聘

貌似你是UC的同事？有没有兴趣来国际UED团队换换口味，我们在深圳、杭州都有岗位。团队承接集团内部各种业务。深圳团队主要是负责交易、评价等一些基础业务。

我看了你的博客过来的，我近一段时间也折腾了不少karma和ci的事情，刚刚在搜怎么在多浏览器测试的情况下拿到coverage文件上传集团CISE的覆盖率服务。

Zhagana | Hans Chan's Blog

http://blog.csbun.ga/2020/11/zhagana/#more

停更了2年，终于又有空写个小文章，关于 Playwright，一个 Microsoft 开源的跨浏览器自动化工具，类似 Puppeteer 的 Chromium + Firefox + WebKit 版。 Step by step guide to use Playwright.

Tree-shaking ES2015 | Hans Chan's Blog

http://csbun.github.io/blog/2015/12/tree-shaking-es2015/

🌲🎅 ~~ 圣诞快乐 ~~ 🎉✨ Rollup之前看到 rollup.js 就觉得很有趣，后来终于有空，把我的小项目 silly-datetime 改成了 ES2015 然后用 Rollup 转成 CommonJS 和 UMD 两个版本分别给 npm 和 Bower 使用。

Modules in CommonJS and ES2015 | Hans Chan's Blog

http://csbun.github.io/blog/2016/01/modules/

CommonJSLet’s see 2 examples in CommonJS:

Zhagana | Hans Chan's Blog

http://csbun.github.io/blog/2020/11/zhagana/

停更了近 3 年，终于又有空写个小文章，关于 Playwright，一个 Microsoft 开源的跨浏览器自动化工具，类似 Puppeteer 的 Chromium + Firefox + WebKit 版。 Step by step guide to use Playwright.

Vue 2.0 Server-Side Rendering | Hans Chan's Blog

http://csbun.github.io/blog/2016/08/vue-2-0-server-side-rendering/

Vue 2.0 is now in beta6. What I am going to do is checkout how to use SSR (server-side rendering).

使用 iron-node 进行 Node Debug | Hans Chan's Blog

http://csbun.github.io/blog/2015/09/using-iron-node/

简单折腾了一下 iron-node，调试 Node 再也不用苦逼地 console.log 了。

使用 Selenium 进行 UI 测试 | Hans Chan's Blog

http://csbun.github.io/blog/2015/04/use-selenium-for-ui-test/

注：本文未完成。看看这个使用 browser-perf 测试网页性能也用了 Selenium

Angular 1.3.14 开始支持 CommonJS | Hans Chan's Blog

http://csbun.github.io/blog/2015/02/angular-commonjs/

年前才刚刚写了篇关于AngularJS with RequireJS的文章，没想到前两天 Angular 在最新的 1.3.14 更新文档中就提到支持 CommonJS 了。

Meteor + React | Hans Chan's Blog

http://csbun.github.io/blog/2015/07/meteor-react/

Install如果还没有安装 Meteor，那么在命令行中输入： If you have not yet installed Meteor, do that: 1curl https://install.meteor.com | /bin/sh

Angular 1.x 学习笔记 —— 入门 | Hans Chan's Blog

http://csbun.github.io/blog/2014/12/ng-note/

最简单的例子example1234<body ng-app="app"> <p><input ng-model="text"></p> <p>input: {{text}}</p></body> 1angular.module('app', []);

AngularJS with RequireJS | Hans Chan's Blog

http://csbun.github.io/blog/2015/02/ng-with-requirejs/

前言虽然 Angular 本身提供 module 的方法，但是她仅仅只是一个不全面的依赖管理，并没有加载的功能，于是我第一反应就是用上 RequireJS。

npm scripts 之 publish 和 install | Hans Chan's Blog

http://csbun.github.io/blog/2017/08/npm-scripts/

npm 自身提供了一些 script，并且有一些特定的规则，最近用到了几个，在这里记录一下，下文提到的代码仓库在这里可以看到。

使用 browser-perf 测试网页性能 | Hans Chan's Blog

http://csbun.github.io/blog/2015/02/use-browser-perf/

安装环境 npm 安装 browser-perf 下载 Selenium Server

在 Android 上开始使用 React Native | Hans Chan's Blog

http://csbun.github.io/blog/2015/12/starting-react-native-with-android/

以下内容大部分都是 React Native 官网中 Getting Started 和 Android Setup 的内容。当然也记录了我在这个过程中遇到的一些问题。

Docker With Node | Hans Chan's Blog

http://csbun.github.io/blog/2015/06/docker-with-node/

Install DockerWe can use docker CLI by install Boot2Docker or GUI via Kitematic

ServiceWorker | Hans Chan's Blog

http://csbun.github.io/blog/2015/06/service-worker/

我们知道，浏览器是单线程的，使用 ServiceWorker 可以在后台创建脱离于主线程的 worker 线程，用于异步处理一些与页面元素、界面交互无关的工作。

译文：Puppeteer 与 Chrome Headless —— 从入门到爬虫 | Hans Chan's Blog

http://csbun.github.io/blog/2017/09/puppeteer/

这里是 GitHub 英文原文 / Medium 英文原文 Puppeteer 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具。正因为这个官方声明，许多业内自动化测试库都已经停止维护，包括 PhantomJS。Selenium IDE for Firefox 项目也因为缺乏维护者而终止。译者注：关于 PhantomJS 和 Selenium IDE f

Using Contenteditable | Hans Chan's Blog

http://csbun.github.io/blog/2015/09/using-contenteditable/

最近才发现的这个东西啊，但是查了一下 MDN，貌似已经很普及了，连 IE6 都支持（虽然有一大堆的 bug）。

Preact 源码解析 —— h/createElement | Hans Chan's Blog

http://csbun.github.io/blog/2018/01/preact-code-h/

Preact 中的 h 方法，相当于 React 中的 createElement，在 JSX 中用于生产 VNode 的方法。

Google 换新 Logo 了 | Hans Chan's Blog

http://csbun.github.io/blog/2015/09/google-new-logo/

为了庆祝明天 **人民抗日战争胜利 70 周年，Google 决定在今天换个新 Logo

Flux 学习笔记 | Hans Chan's Blog

http://csbun.github.io/blog/2014/12/flux-learning-note/

大部分和 Flux 有关的东西都能看到这么一个图，讲述 Flux “单向数据流”的概念。

Java 中使用 Gson 反序列化 JSON 数据 | Hans Chan's Blog

http://csbun.github.io/blog/2016/11/gson-deserialization/

好长时间没写 Java，发现序列化、反序列化一个 JSON 数据真不是个容易的事情（主要还是年纪大了，记不住）。于是记录一下使用 Gson 反序列化的方法。文中涉及的代码都可以在这个 gson-deserialization-example 中找到。作者本身不懂 Java，本着不负责的态度写下这些内容，大牛勿喷，想抄代码的菜鸟请珍重。本文基于转换期间没有异常情况讨论，实际情况请珍重。初始化

Angular Stateful Filters | Hans Chan's Blog

http://csbun.github.io/blog/2015/02/angular-stateful-filters/

在 Angular 里面，经常使用 filter 来处理一些数据的显示问题。但当 filter 要使用到异步数据时就会变得有些麻烦，试了网上很多解决方案都不行，才发现和 Angular 版本升级有关： Angular 在 1.3.0 之后的版本提出了 Stateful filters 的概念，但不是很推荐使用。

使用 Karma 在真实浏览器上测试 | Hans Chan's Blog

http://csbun.github.io/blog/2015/11/karma/

安装1npm i -g karma-cli 初始化进入项目跟目录，初始化 karma 配置文件： 12npm i karma --save-devkarma init

我眼中的世界：香港 | Hans Chan's Blog

http://csbun.github.io/blog/2016/11/HK-in-my-eyes/

仔細想想，從旅行的定義來講，去得最多的地方，居然是香港🇭🇰，這個起初我很不喜歡的地方。說到香港，很多人的第壹印象大多會是這樣：

使用 Nightmare 进行浏览器自动化测试 | Hans Chan's Blog

http://csbun.github.io/blog/2015/11/using-nightmare/

Nightmare is a high-level browser automation library. 和之前的 PhantomJS 很像，但是 Nightmare 是基于 Electron 的，也就是还是基于 Chromium 和 Node.js。但是感觉其写法比 PhantomJS 简单一些：

删除本地 Docker 镜像 | Hans Chan's Blog

http://csbun.github.io/blog/2016/09/docker-remove-image/

使用 Docker 会遗留一大堆不知道什么鬼的镜像，下面我们想办法干掉他们。 TL;DR12docker ps -a | grep 'Exited' | awk '{print $1}' | xargs docker stop | xargs docker rmdocker images | grep '<none>' | awk '{print $3&#

Koa 中异步方法的使用 | Hans Chan's Blog

http://csbun.github.io/blog/2014/09/koa-async-usage/

使用 Generator 简化异步回调12345678910111213var gen;function async() { setTimeout(function () { gen.next(100); });}function * genFn() { var res = yield async(); con

用 navigator.permissions 检查浏览器权限 | Hans Chan's Blog

http://csbun.github.io/blog/2015/04/navigator-permissions/

Chrome 43 增加了 navigator.permissions 接口用于检查当前浏览器权限状态。

Less 使用简记 | Hans Chan's Blog

http://csbun.github.io/blog/2015/07/less/

一直以来，对 css 都是那么无力，最近项目需要，折腾了一下 less。这里只是记录一下一下我使用过程中的问题，熟悉 less 的盆友可以 cmd+w 了。

GitLab CI Runner with Docker | Hans Chan's Blog

http://csbun.github.io/blog/2016/09/gitlab-ci-runner-with-docker/

Install CI Runner:Install a CI Runner on a machine is quite easy, here is the linux-repository:在一台普通机器上安装 CI Runner 应该是一件很简单的事情，下面是 Linux 的安装方法： Add GitLab’s official repository via apt-get or yum: 12

使用 NW.js 创建桌面应用 | Hans Chan's Blog

http://csbun.github.io/blog/2015/03/create-desktop-app-with-nwjs/

前段时间简单研究了一下 NW.js，基于 Chromium 和 node.js，可以使用 Web 技术来编写跨平台的桌面应用。

利用 sendBeacon 发送统计信息 | Hans Chan's Blog

http://csbun.github.io/blog/2014/12/send-beacon/

前言今天看到这样一篇文章《Send beacon data in Chrome 39》大致是说 navigator.sendBeacon 可以用来发送一些小量的数据，特别适合统计场景，且这个请求是异步的，不受浏览器行为限制：即使浏览器关闭请求也能照样发出。

JS 单元测试代码覆盖率和持续集成 | Hans Chan's Blog

http://csbun.github.io/blog/2015/07/js-unit-test-coverage-ci/

本来只是想给我的 lazy-cache 加个 badge 装一下逼的，没想到会扯到这么多东西。

**好好呷 | Hans Chan's Blog

http://csbun.github.io/blog/2015/11/eating-around-taiwan/

觉得再不动手写，这个游记就真的无法面世了。要不是最近把博客从 jekyll 迁移到 Hexo，都可能没有想着要写。拖延症绝症患者快没得救了。这是一个系列文章，而这当前一篇（希望不是最后一篇），应该是我觉得最重要的 “吃”。本文图多字少，虽然我已经压缩过，但还请自备流量。

requestAnimationFrame 和 requestIdleCallback | Hans Chan's Blog

http://csbun.github.io/blog/2015/09/raf-and-ric/

requestAnimationFramerequestAnimationFrame 应该不是一个新鲜货了，Angular 就有 $$rAF，iScroll 也用他来实现动画功能，很久之前也在某些博客中看到某些 MVVM 框架的 nextTick 是用 requestAnimationFrame 实现的（Avalon 还是 Vue 不记得了）。

用 MutationObserver 和 Mutation events 监听 DOM 变化 | Hans Chan's Blog

http://csbun.github.io/blog/2015/05/mutation-observer-and-event/

最近需要做一个功能，检查页面 DOM 变化，然后对变化的某些 DOM 进行一些操作。于是上网搜索到 MutationObserver，中文文档已经很清楚了，看起来使用也很简单，于是就写下这么一个方法：