标签 知识 下的文章

CSS 实现左右交换的效果

鞋厂的 App 有这么一个效果,而我的小伙伴刚好要做这样一个效果,于是就开始研究到底是怎么做的,Emmmm,大家都知道我平时糊设计图的功底为 0,所以好好研究了一下。:

2017-12-05 at 20.42.gif

首先布局用 flex 可以实现,而动画可以用 transform 或者 animation 实现。

这个布局第一反应是 justify-content: space-between,写了一波之后果然可以实现这个效果,但是动画该怎么定位才是大难题。

- 阅读剩余部分 -

GitHub / GitLab Webhook 接口开发指南

前一阵子要开发一个从 GitLab / GitHub 通过 Webhook 拉取文件并且上传指定 OSS 的接口,于是就找起了 GitHub 和 GitLab 的官方文档。

当然官方文档实在是太过冗长,尤其是公司自建的 GitLab 版本还有可能不一致,所以就只能看搭建的 GitLab 提供的文档信息,对于一些遇到的问题就看命看版本查了。

- 阅读剩余部分 -

localhost / 0.0.0.0 与 127.0.0.1 的区别

在服务端开发的时候,我们往往会遇到这样的问题:localhost / 127.0.0.1 和 0.0.0.0 有什么区别,为什么我设置的 host 在外网无法被正常的访问。

首先先来说说最简单的 localhost,服务端开发的新手可能会认为:localhost === 127.0.0.1,毕竟在大多数场合里访问,似乎这两个地址都能访问到同样的网站。其实他们之所以一样,是因为在 /etc/hosts 中的指向,同样的你也可以改成其他地址,换言之,localhost 只是一个一般的域名,如同其他域名一样,你可以在 hosts 中任意修改其解析的指向。

- 阅读剩余部分 -

Haproxy 入门、监控和 statsd 打点指北

作为一个奇奇怪怪的前端码畜,偶尔就会和一些奇奇怪怪的事情打交道,前一阵子也算是挺忙的了(尽管只是个没有更新博客,连续跳票的借口)。

这次使用 haproxy,是因为他作为负载均衡和反向代理而言配置起来比 Nginx 简单,并且自己就提供了监听页面。

我们来看一个完整的配置文件就知道了:

- 阅读剩余部分 -

Node.js 快速开发 cli 应用攻略 - 坑篇

「哇夭寿拉,文章都按照上下章来写啦」

因为一直找不到时间写,上次匆匆做完了介绍,所以开个下集谈谈几个库遇到的坑。

commander

commander 的 bug 确实挺多的,所以下一个坑准备试试 yargs 这个库(差点就准备自己写了 OTZ)。

argument 'domain' (and probably others) cause naming collision

- 阅读剩余部分 -

TypeScript 中 import JSON 的正确姿势

最近 TypeScript 中毒,想想我一个弱类型出身的人,怎么就喜欢上了类型约束……当然这不是重点,重点可能还是 JS 没有接口,我没法靠 class 语法糖写的非常 OO……

关于 TS 的安利部分结束,今天我想说的其实是在 ts 中如何正确的 import json 格式。

首先我使用了基本姿势

import * as variable from './fooooooo.json'

- 阅读剩余部分 -

Stream 与 Buffer 的相互转换

在工作的时候突然就有了这样一个需求,这一次正好也对本来不太熟的 Stream 有了一点更加深刻的理解……(好吧本来是根本没搞清楚状况)。

Stream,中文叫做流,和我们平时充值信仰的那个 Steam 还是差了那么一点的。所谓流,是一种消费的模型,被消费完就木有了,所以如果我们需要重复使用,就得存下来,也就是把 Stream 转成别的东西——Just Like Array or Buffer。

- 阅读剩余部分 -

CSS position sticky 的一些微小理解

position 中有哪些属性——相比这是一道送分题,大多数人都知道:static, relative, absolute, fixed,如果能答出 sticky——那么可以给你一颗五角星。

实际上,sticky 在一般的开发中并不常用,主要还是因为兼容性的问题,继续用 caniuse 查 sticky 你会发现支持性并不是很好,所以并不适合大部分业务场景。

- 阅读剩余部分 -

CSS 像 font 一样使用 svg 与上色

这周在切图的时候拿到了 svg,之前自己一直是用 font-icon 的,感觉挺方便的,svg 相比 font-icon 有一些优点(这个以前在网上看到过),本文暂时不展开讲述了。

但是一些图标,在 Element 里自带的 el-icon-xxx 的方式非常统一,其实是根据 class 设置的,我也不喜欢 svg 的插入方式(太硬),所以希望尽可能的让项目中的 font 保持统一。

然后就发现了 svg 没法像 font icon 一样设置 color。

- 阅读剩余部分 -