标签 代码段 下的文章

stroke-dashoffset 造成的高 CPU 与内存占用问题

最近在做一个前端项目(对我终于写前端了),在做动画的时候发现网页很卡,后来发现是 CSS 动画的问题,刚开始开启了 3D 加速,发现然而并没有什么卵用,后来我就开始搜一下这个属性有没有什么过渡方案,就引发了一连串的故事……

stroke-dashoffset 是啥

SVG 中 path 可以构造很多形状,如果要绘制一些动画效果,有两个 stroke 属性非常关键:stroke-dasharraystroke-dashoffset

- 阅读剩余部分 -

从 PostCSS 与 cssnext 中看 CSS 的新特性

今天刚好看了一下 PostCSS,看到了 postcss-cssnext 的网站,觉得用来学习一些新特性(虽然现在来看似乎不怎么新)。

先来介绍一下 PostCSS 与 Sass / Less / Stylus 相比的区别,也就是后处理器和预处理器的区别。

预处理器与后处理器

对于预处理器(Sass / Less / Stylus)而言,就像 JavaScript 的方言语法 coffeescript,或者 HTML 的方言语法 pug(jade) 那样,你需要学习一套新的不同的语法,这些 CSS 方言通过编译器编译成 CSS 文件,最终浏览器实现解析。

- 阅读剩余部分 -

折腾记:Hello Parcel

Parcel 是一个新出的「快速,零配置的 Web 应用程序打包器」,光是零配置这一点,看着就已经比 webpack 好一万倍了——webpack 让我们怀疑,前端是否要衍生出一种副职业:配置工程师。我至今也没有能够掌握「如何优雅的配置 Webpack」,之前本来准备用 poi来简化 webpack 配置,不过突然想起了这个更高、更快、更强、(更懒)的新道具,于是又折腾了起来。

Parcel 有啥优点

首先,他的优点是零配置,也就是说,你不用自己配置就能支持 JS / CSS / HTML,开箱即用。此外,零配置不代表不能配置,它提供了接口,可以让你进行一些插件的开发,在此基础上做出一些 DIY,零配置的意义其实是带默认值、开箱即用的配置,而并非不可配,灵活性差。

- 阅读剩余部分 -

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

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

- 阅读剩余部分 -