Posts on sdvcrx - A tech blog

Gitlab CI Devops

Fri, 01 Nov 2019 21:56:08 +0800

上周把只有一个 build_job 的 GitLab CI 重构了一下，简单梳理了一下 GitLab CI 的基本概念。

JavaScript 读写二进制数据

Sun, 30 Dec 2018 17:08:04 +0800

预备知识

JS 操作二进制数据涉及到三个基本类型：

ArrayBuffer 、 TypedArray 和 DataView

为了达到最大的灵活性和效率，JavaScript 类型数组（Typed Arrays）将实现拆分为缓冲和视图两部分。ArrayBuffer 作用是作为缓冲区存放实际的二进制数据，TypedArray 和 DataView 作为视图访问底层的 ArrayBuffer。

使用 SendBeacon API 上报数据

Wed, 21 Nov 2018 21:25:51 +0800

前言

最近看过 Google Analytics 的客户端 ga-lite 源码，它使用了 SendBeacon API 来发送相关信息到 Google 服务器。简单查了查后发现，SendBeacon API 现在已经广泛用于各种统计/追踪代码的实现中。于是我对 SendBeacon API 做了下了解。

Element 源码学习：SCSS 妙用实现 BEM 命名法

Mon, 20 Aug 2018 21:16:49 +0800

最近在阅读 ElementUI 源码的时候查看样式，发现其中使用了 SCSS Mixins 非常巧妙的实现了 CSS BEM 命名规范，也借此机会了解一下SCSS的高级用法，在此记录分享一下。

JWT 实战

Sat, 25 Nov 2017 22:16:49 +0800

JSON Web Token，简称 JWT ，是一个轻巧的开放规范，用于在客户端和服务端之间传输数据。它的内部编码使用的是 JSON 格式，故称 JSON Web Token。最初 JWT 是用于通过 URL 传输数据的场景，不过常常用于用户认证/鉴权。

JavaScript 装饰器初探

Sat, 07 Oct 2017 13:47:23 +0800

装饰器（Decorators）提供一种简练的语法糖，这种语言特性为 JavaScript / TypeScript 注入了新的活力。目前 Decorators 处于 Stage-2 阶段，即规范初稿阶段。

解决Node.JS require 多级过于繁琐的问题

Fri, 11 Aug 2017 21:33:52 +0800

在 NodeJS 中我们常常会写下面这种代码：

1

const userService = require('../../../model/User/service')

../../.. 这种代码过多，既不好看也容易出错。在 AdonisJS 和 webpack 的启发下，我发现可以使用 global 全局变量来解决这个问题。

require 加载原理解析

总所周知，Node.js 使用的模块格式为 CommonJS 。

webpack DefinePlugin 实战

Sat, 22 Jul 2017 11:08:13 +0800

webpack 的 DefinePlugin 是经常使用的一个 plugin。它常常用来定义变量以区分环境。它的用法如下：

1
2
3
4


new webpack.DefinePlugin({
 'process.env': JSON.stringify("production"),
 debug: JSON.stringify(true)
})

一开始我以为它只是把这些变量挂在了全局变量下面，使得代码中能直接用变量，但是经过仔细查看，并不是这样的。

前端网络优化总结

Fri, 08 May 2015 09:08:33 +0800

前端优化的本质：减少HTTP请求数量，尽可能快地载入网页

原因：浏览器对同一域下的资源，只保持一定的连接数

IE6,7 2个; IE8 6个; Firefox, Chrome 6个

Client端

压缩图片
制作成雪碧图(CSS Sprites)
压缩合并css/js
合理的标签位置(css放<head>里；js放<body>尾部，适当添加defer/async属性)
文件名加上时间戳/md5
结构化HTML，便于先加载关键的首屏内容
(可选) 极小图片base64转码放入CSS中 缺点：IE6/7不支持;IE8限制图片最大为32KB;无法缓存;体积要比原图片大;几乎无法被Gzip

Server端

Promise：优化JS异步编程

Tue, 07 Apr 2015 17:10:31 +0800

异步在JavaScript中最为常见，用最简单的回调函数callback就解决问题。但是往往会陷入Callback Hell的困境之中。

Callback Hell

以最常见的AJAX GET为例：

javascript中的那些坑

Sun, 08 Mar 2015 10:26:01 +0800

Array.sort()

数组的默认排序是 按照字典排序 的，即使用字符串比较(原因想想也知道)

所以就可能出现以下情况：

1
2
3
4


[9,80,3,10,5,6].sort()

// [ 10, 3, 5, 6, 80, 9 ]
// Oops!

教训：一定一定要在使用数组排序方法传入比较函数啊

JavaScript函数

Wed, 25 Feb 2015 18:49:33 +0800

this

1. 全局范围内使用`this`，它会指向全局对象

1

this;

浏览器中的全局对象为Window

2. 函数调用时，`this`会指向全局对象

1

foo();

注意：在对象里调用函数（不是方法），this也会指向全局对象，这会导致一些奇怪的问题 ECMAScript5严格模式下不存在全局对象，因此this是undefined

CSS3新特性与浏览器兼容

Thu, 12 Feb 2015 13:47:23 +0800

Flexbox

dive into flexbox

background

注意事项：

加载图片失败时UA会使用background-color，所以在设置background-image时一定要同时设置background-color作为fallback
设置前景色color时，要同时设置background-color，反之亦然
使用rgba的时候也要设置fallback color

linear-gradient

渐变背景

Python鸭子类型与C++多态

Mon, 26 Jan 2015 21:15:50 +0800

鸭子类型是什么

经常听别人说Python是一个动态语言，而鸭子类型是Python重要的设计哲学之一。鸭子类型(duck typing)的原话是：

如果看起来像鸭子、叫起来像鸭子、走起路来也像鸭子，那它就是鸭子

同步Github Fork的项目

Wed, 03 Dec 2014 22:05:12 +0800

Track

添加上游 upstream：

git remote add upstream git@github.com:user/project.git

Update

每次更新时，执行下列命令

git fetch upstream
git rebase upstream/master

有文件冲突时会提示，解决冲突后用以下命令继续rebase：

git rebase --continue

这里使用rebase而不是merge主要是因为使用merge的话会使git的线变得复杂一般使用rebase只会有一条线

翻转字符串与翻手算法

Mon, 17 Nov 2014 20:03:27 +0800

字符串循环左移

输入一个字符串和一个非负整数N，要求将字符串循环左移N次。

输入格式：输入在第1行中给出一个不超过100个字符长度的、以回车结束的非空字符串；第2行给出非负整数N。

css笔记

Sat, 08 Nov 2014 09:33:18 +0800

选择器

上下文选择器

包含选择符
```
 tag1 tag2 {} // 匹配祖先和后代
```

子选择符>

 tag1 > tag2 {} // 匹配父元素与子元素

紧邻同胞选择符+

 tag1 + tag2 {} // tag2必须紧跟在tag1后

一般同胞选择符~

迁移Archlinux至固态硬盘

Wed, 29 Oct 2014 18:58:24 +0800

最近新买了个32G的小容量SSD专门来跑Archlinux，SSD为Root分区，HDD为HOME分区。效果非常好，因为Linux下的程序几乎都放在Root分区下，速度非常快。

一些python的小技巧

Mon, 17 Feb 2014 19:28:57 +0800

from http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html#more-about-tuples