标签 代码段 下的文章

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 提供的文档信息,对于一些遇到的问题就看命看版本查了。

- 阅读剩余部分 -

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 像 font 一样使用 svg 与上色

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

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

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

- 阅读剩余部分 -

谈谈对 URIEncode 的一些处理

最近斗志非常差,当然很大程度还是自己的锅……这又不是个情感博客我就不细说了……

这周公司里又开始做新的东西了,大概是类似于反向代理,但是授权了私有库的权限,需要做一些限制,比如 GitHub 路径限制为 dist

最初的时候我们这么验证路径:

- 阅读剩余部分 -

CSS 文字描边效果的研究

前一阵在做 Chrome 插件研究了一波文字前景色的问题,最终我们还是把思路望向了描边,又正好最近看了一波《CSS 揭秘》,里面正好讲到了描边的问题。

最快捷的方法:text-stroke

有个神奇的 text-stroke 属性,如同名字所描述的那样,就是用于文字描边的。

缺点是,它的描边是内描边,占用了字体本身的空间,其二,兼容性太差,这并不是一个标准的属性,目前只支持很少的浏览器,关于它可以阅读:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

- 阅读剩余部分 -

CSS 文字反色的研究

在之前我们使用 Canvas 去计算颜色和反色,之后经过大佬提醒,原来 CSS 本身也是能根据背景色取反显示的。在这里,我们会学习一个新的特征:mix-blend-mode

引用 MDN 的介绍:

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

- 阅读剩余部分 -

Canvas 优化指南

Canvas 性能是一个非常值得关注的问题,这次用 Canvas 也同样遇到了需要性能优化的点:我们在之前使用 Canvas 实现了 background: cover 的效果,但是这导致了 resize 的反复绘制,CPU 使用率飙升。

使用离屏渲染

对于这种场景,MDN 中的解释是「在离屏canvas上预渲染相似的图形或重复的对象」。

- 阅读剩余部分 -