标签 知识 下的文章

fixed 与 transform 相爱相杀的故事

上周和上上周一直苦恼于加动画,因为作为一个永远只能脑补出第一帧和最后一帧的动画渣,永远都不知道中间发生了什么,而这次遇到了一个问题,本身我的位置依靠的是 position: fixed 和一个依靠 display: flex 定位居中的元素来进行布局的,在动画表现时出现了位置不对的问题。

在一番 Debug 后(Emmm 具体的 Debug 方式就是控制变量法,人肉 Debug),我最后确定是 transform: scale(...)position: fixed 的冲突问题。

- 阅读剩余部分 -

[翻译] Makefile - 失落的艺术

译者吐槽:尽管 Makefile 似乎与前端渐行渐远,不过还是有很多神奇海螺一般的魔法值得我们去入门,本文与前端的内容相结合进行了一番介绍和示例科普,适合所有对 Makefile 一脸懵逼的小伙伴。

原文:http://www.olioapps.com/blog/the-lost-art-of-the-makefile/

我做过许多 JavaScript 项目。JavaScript 目前的潮流是使用用 JavaScript 书写和配置的构建工具像 Gulp 或者 Webpack。我想要讨论的是 Make 的长处(尤其是 GNU Make)。

- 阅读剩余部分 -

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

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

stroke-dashoffset 是啥

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

- 阅读剩余部分 -

WebDriver.io Chrome Driver setValue 不准确问题的研究

昨天在修一个旧程序的问题,在重新安装之后发现原来的程序跑不了了,一个模拟登录的程序,在输入正确的时候输出了 {login: false},在排除了是登录逻辑变更之后使用 waitUntil 暂停了一下发现在 setValue 时,driver.io 会少几个字母,例如:abcdefg 在输入后可能会变为 abcdfg

刚开始的时候以为是因为电脑卡的关系,后来释放了一下内存,依旧是这样,于是开始查 issue,实际上报 setValue 问题的人很多,官方都是 close 处理,然后查到了:

After update chrome browser to the Version 62.0.3202.75 (Official Build) (64-bit) spec symbols are missed in set text and browser settings page is opening unexpectedly on enter spec symbol or capital letter.

换句话说,这是一个 Chrome Driver 的 bug,在 Chrome Driver v2.33 已经解决了这个问题,可以尝试:

  1. 升级你的 Driver
  2. 使用其他浏览器的 Driver(逃

从 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,写了一波之后果然可以实现这个效果,但是动画该怎么定位才是大难题。

- 阅读剩余部分 -