CSS变量初探

如果你现在去看一些demo级的代码,有不少人已经开始使用CSS变量。
虽然它现在还不能投入生产环境,也很简单,但这不代表你可以忽视它。

什么是CSS变量及作用

CSS变量,即CSS variable,官方的名称是 级联变量的CSS自定义属性,即 CSS custom properties for cascading variables。类似于sass,less等预处理器的变量。css变量同样具备声明,引用,以及作用域等变量特性。

如果你学过其他编程语言,应该很熟悉变量的概念。变量用于存储和更新你的程序所需要的值,以便使它运行。在一些命令式编程语言中,像Java、C++亦或是JavaScript,通过变量我们能够跟踪某些状态。变量是一种符号,关联着一个特定的值,变量的值能随着时间的推移而改变。不同于其它编程语言,在像CSS这种声明式语言中,随着时间而改变的值并不存在,也就没有所谓变量的概念了。

CSS 引入了一种层级变量的概念,从而能够从容应对可维护性的挑战。这就会使得在整个 CSS tree 中都可以象征性的引用一个变量。

CSS变量基本有以下作用:

  1. 提高大型系统文档的可维护性
  2. 提高系统代码的可读性
  3. 可以在浏览器中实时修改生效

Read More

圈外免费课的学习总结

前段时间在圈外免费体验了一下他们的免费课程,听后还是有一些感触,所以有必要做些记录总结

“我感觉目前的工作状态不是我最想要的,做的也还行,但没有太多成就感,也不知道未来发展会怎么样……想要一份真正热爱并且有前途的工作,但不知道应该做什么,感觉很迷茫”

这段话其实是很多人的一个状态,刚工作不喜欢想转行、到了新岗位发现不胜任想提升、人到中年发现这个工作的天花板等等。其实,这都是常态。因为我们队自己的事业都有期许,但当下的工作可能无法承载这样的期许,所以会觉得不喜欢很迷茫

Read More

深色模式探索

新的iOS和macOS都已经发布了,其中最引人注目的就是dark mode,现在除了相应APP要做适配以外,网页也是在呼应中在有dark mode的模式下做适配,虽然我也不知道有什么作用。

最先感受到的是tw,突然有一天就发现在用系统dark mode的时候,网页也会跟着变化:

Read More

一块显卡的力量--重回Windows

我朋友都知道,我有一台主机但没有显卡,所以他们玩游戏叫上我的时候,基本上这成为我最终的一个理由,不过机缘巧合,前几天从另一个朋友那被硬塞给了一块显卡(最重要的是领导也不好说什么)T_T~
这个就成了我开始把主机收拾一顿的动力,于是这篇文章就是我再次使用windows的一些记录和体会~

我从2013年开始正式接触Mac,当时领导有台11寸的MacBook Air,不要小看个头,那台本本的配置是自定义的,价值1.6W~

对于我一个穷小子的冲击那是不言而喻的,不过非得要说吸引我的,就是那块触摸板。就看领导的手指在那块小板板上划啊划啊,自己回头看看自己的鼠标~

[我的内心:这尼玛才是笔记本电脑啊~]

哦,对了,还有那个电源,这才叫便携性、移动办公

Read More

数组去重的一些记录

多年的工作,我也没有用到这个知识(应该是自己比较菜),但这东西一直在面试里出现,看到别的总结的都是一两个点,所以打算自己总结一下,给自己备用~

使用Set

Set是ES6中新的数据结构,它类似数组,但数据成员都是唯一的,没有重复的值。

Set实际是一个构造函数,用来生成Set,我们可以传入一个数组来生成:

1
2
3
4
5
6
7
let test1 = { name: 'test1'}
let test2 = test1
let test3 = { name: 'test3' }
let arr = ['🙄', '🙄', 1, 3, 1, 5, '1', test1, test3, test2]

// 生成set.
let arrSet = new Set(arr)

再把Set变回数组有两种办法:

  1. 一种是利用Array.from
  2. 一种是...解构
1
2
3
4
// 第一种.
console.log(Array.from(new Set(arr)))
// 第二种.
console.log([...new Set(arr)])

Read More

JS中的多个连续函数和柯里化

看着redux-logger的源码,有个地方瞬间就懵逼了,连续的箭头函数,那一串啊~(据说redux-thunk的还长)

老长~

这个返回返回再返回,真是简直~

高阶函数:将函数作为参数或者返回值是函数的函数

所以,这就是高阶函数啊!

在计算机科学中,柯里化(英語:Currying),又译为卡瑞化或加里化,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术

你看,这就是高阶函数的柯里化应用(通俗讲就是返回函数,把需要多个参数的改写成单个参数的过程)

Read More

网页可编辑模式

document.designMode 控制整个文档是否可编辑

有效值为 onoff ,根据规范,该属性默认为 off

Firefox 遵循此标准,早期版本的 Chrome 和 IE默认为 inherit 。从 Chrome 43 开始,默认值为 off ,并且不再支持 inherit。在 IE6 到 IE10 中,该值为大写

Read More