标签 语法 下的文章

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

- 阅读剩余部分 -

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

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

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

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

- 阅读剩余部分 -

CSS position sticky 的一些微小理解

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

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

- 阅读剩余部分 -

记一个 event.target 类型导致的 Bug

今天刚接的新锅报了个不太好复现的 Bug(实际上到最后都没有在原环境复现……),于是看了一波代码找问题,Bug 大致是:

xxx.hasAttribute is undefined

调用到的地方有几处,首先确定了 hasAttribute 是写在 Element 的原型链上的,即如果是 Element 类型(element.nodeType === 1),那么必然有 hasAttribute。

在此之前,我先查了一下,什么情况下 「Element」 会没有 hasAttribute:

- 阅读剩余部分 -

谈谈对 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 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

- 阅读剩余部分 -

Vue2.x 中实现父子组件间的双向绑定

Vue2.x 中父子组件中 props 的属性不能在子组件中改变其值然后传出至父组件了,但是有的时候也会存在一些麻烦,比如我们想要实现一些自定义组件,总是会有值的传入传出改变的,比如我希望做一个 popup,那么肯定需要根据父节点的状态来确定子节点。

尽管官方推荐双向数据流,但还是有一些方法避免报错,实现或 hack 双向数据流:

Event Bus / Vuex

最简单的当然是通过状态管理来管理我们的变量,但对于数据流不复杂的父子节点交互而言,未免太过浪费,因此通常我们不会特别的去考虑它,尤其是 popup / checkbox 这种基础组件的时候。

使用 Object

Object 的值是其内存地址,只改变 Object 内部的值不改变地址将不会出现报错。

- 阅读剩余部分 -