PostCSS学习指南(二)

关于我最近学习PostCSS的一些相关心得和总结,主要介绍项目中可能用到的一些插件比如autoprefixer,postcss-partial-import,postcss-advanced-variables,cssnano,postcss-px2rem,precss等等

(推荐访问github上面的Markdown排版的介绍PostCSS学习指南(二))

继上一次PostCSS学习指南(一)后,渐渐开始在项目中应用。

这次决定主要讲解一些个人认为非常有帮助的PostCSS插件。

本期主要介绍以下几个插件和几个坑

  1. autoprefixer
  2. postcss-partial-import
  3. postcss-advanced-variables
  4. cssnano
  5. postcss-px2rem
  6. precss
  7. postcss-nestingpostcss-nested
  8. 坑( ఠൠఠ )ノ

autoprefixer

这个就不用多说了,必装插件之一。方便的写规范的css,它会为你提供非常完整的hack兼容方案的。当然这里需要了解一下的是,它的大部分兼容数据来源Can I Use,另外一个稍微需要了解的插件配置参数就是browsers,比如这样写:

module.exports = {
  plugins: [
    require('autoprefixer')({ browsers: 'last 2 versions' })
  ]
}

关于这个参数的详细介绍可以看看Browserslist Queries,文中说了,强烈建议将查询写入package.json(后面会告诉你为何要写在这里),而非配置postcss.config.js中autoprefixer的browsers参数。所以此处建议写法如下: 继续阅读“PostCSS学习指南(二)”

PostCSS学习指南(一)

关于我最近学习PostCSS的一些相关心得和总结

(推荐访问github上面的Markdown排版的介绍PostCSS学习指南(一))

PostCSS介绍

PostCSS是一个利用JS插件来对CSS进行转换的工具,这些插件非常强大,强大到无所不能。其中,Autoprefixer就是众多PostCSS插件中最流行的一个。

截至目前(2017年7月)PostCSS已经有超过200个插件,你可以插件列表查找有没有你所需要的插件。如果你想自己写个插件,据说这是一个不错的主意,而且非常简单,你可以试着搞点事

看到这里,你可能没有发现它的强大之处,甚至我自己都没有被我翻译的这段官方文字所打动。~~因为没(wǒ)有(yě)对(bù)比(tài)就(huì)没(yòng)有(zhè)伤(wán)害(yì)。~~好了,是时候启动装逼模式了。

维基百科,阿里巴巴,谷歌,Wordpress,Twitter等网站均有使用,大佬们都在用你有什么理由不跟上步伐。

再来看看这张PostCSS下载数量的npm-stat统计表(数据证明一切):

PostCSS下载数量

学习PostCSS之前需要了解一些事情:

  1. PostCSS插件的处理方式类似那些CSS预处理器,而非预处理器和后处理器(PostCSS is Not a *Pre-*processor and Not a *Post-*processor either
  2. PostCSS is Not “Future Syntax”(不是新式语法?不知道怎么翻译)
  3. PostCSS本身并非整理或优化CSS的工具
  4. PostCSS可以完成很多意想不到的事情,例如用postcss-rtl恶搞一下:yum:

那么它还有一些特性,例如创建了一个插件功能极强的生态系统,具有模块化需要什么用什么(precss就是一个集成了类似SASS的包),相比其他的CSS预处理器它的优势主要体现在以下几个方面:

  1. 拥有极高的处理性能(3倍以上的处理速度
  2. 你既可以写正常的CSS,也可以结合LESS或者SASS一起编写
  3. 对Source Map支持更好
  4. 他的插件真的太多太强大太便利了

其他对比SASS和LESS的区别在于他们内置了大量的方法,而也许你只需要用到几个变量而已,大材小用。而PostCSS则可制定个人需求的一套解决方案(仅安装需要的插件)。这也就是他高性能的主要原因。几乎SASS和LESS有的功能全都有!

总之好处太多了。这里就不一一列举了。迫不及待的你已经等不及安装使用了吧。

继续阅读“PostCSS学习指南(一)”

安装node-sass的时候报错 Cannot download “https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-48_binding.node”:

搭建项目环境需要安装node-sass,经常会出现错误,提示https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-48_binding.node无法下载,原因就是国外的东西很慢,解决办法也很简单…

最近重装了系统在配置项目环境时需要用到node-sass,经常出现安装失败的情况.

以前也是又是装python又是配环境,也不知道到底是怎么瞎折腾出来的的.好不容易弄好了就没管了.

这次搞虚拟机测试了一下,有个很好的解决方案.是在github上node-sass的issues看到的,屡试不爽,当然如果你也是我这种情况可以试试.我想大部分情况都能解决吧.

先看看我的出错信息

安装node-sass错误信息
安装node-sass错误信息

如果你也是这样的不妨将提示中的这个https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-48_binding.node下载下来,存放在C:\Users\Whidy(你的用户)\AppData\Roaming\npm-cache\node-sass\4.5.3目录内,再尝试重新执行npm install node-sass我想应该就可以成功了吧.

当然版本不同的话会略有差异.请自行对应替换,如果你发现还是下载的很慢,我这里分享一下我上传到百度云的这个4.5.3版本的win32-x64-48_binding.node,然后拷贝到刚才说的目录就好了.

参考: Install node-sass 4.5.0 failed on window 7, “Binary has a problem: Error: %1 is not a valid Win32 application.”.

HTML5视频VIDEO标签播放器关闭了controls时的字幕通过JS关闭方法

最近研究html5的video标签,尝试自己做一个播放器.然后既然是自己做必然要将video的controls给关掉.那我们该如何控制字幕的显示和隐藏了呢?

最近研究html5的video标签,尝试自己做一个播放器.然后既然是自己做必然要将video的controls给关掉.

然后想到了如果要控制字幕这可怎么办呢,找了好久才找到如何通过js来控制字幕的显示与隐藏开关.其实也很简单.

这个测试仅针对视频有一个track标签.

HTML:

<video class="video" id="video" width="640" height="480" preload="auto" poster="https://github.com/whidy/video-player/blob/master/src/poster.png?raw=true">
  <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video. YOU ARE BAD!</p>
  <track kind="subtitles" src="./subtitles.vtt" srclang="en" default>
</video>
<a href="javascript:;" id="btnCapSwitcher">Subtitle On/Off</a>

JAVASCRIPT:

var video = document.getElementById('video'),
  btnCapSwitcher = document.getElementById('btnCapSwitcher');
// 字幕开关(注意在本次demo测试中只有一个字幕因此可以这样处理,如果存在多个字幕需可能需要修改)
btnCapSwitcher.addEventListener('click', function () {
  if (video.textTracks[0].mode == 'hidden') {
    video.textTracks[0].mode = 'showing';
  } else {
    video.textTracks[0].mode = 'hidden';
  }
}, 'false');

参考 Toggling Closed Caption in HTML5 video and disabling default video controls

如果有多个字幕参考 Subtitle implementation

node搭本地服务器局域网内其他设备无法访问的问题

最近公司网络调整,本来记得之前手机访问电脑的服务器好端端的,突然就不好使了…

找了公司网络维护来看看,一时也没看出来.不过测了一下其他人的电脑搭建的服务器是可以访问的.于是推测是本机问题…可是一直没有对本机的网络有修改调整,怎么就突然不行了.只好自己动手查问题.

初步推测防火墙设置.简单暴力的办法关闭防火墙.果然通了…但是个人不喜欢关防火墙,感觉不安全了哈哈哈,其实是觉得小题大做,应该从根本解决问题.

回忆之前本地maven服务器,wamp搭建的服务器都好好的.大概是幻觉,也就是node搭建的服务器我或许没测过.好吧废话少说.不能访问的地址是192.168.1.107:9000,我就查一下什么程序用9000窗口,如下:

占用9000端口的是node.exe
占用9000端口的是node.exe

防火墙状态写了不允许,我猜大概就是这里了.

回到防火墙设置,在允许的应用中,我发现,专用网络的勾没有勾上(如下图),估计问题就在这里,于是勾上,确认后,BINGO…

防火墙node设置规则
防火墙node设置规则

拿出手机刷新一下,好了~

问题就解决了,问题其实解决起来很简单,不过对于网络这块不是很懂的,也遇到类似问题的可以通过类似的办法处理试试.

(话说出现这样的问题会不会是因为我第一次使用node启动服务器时候,弹出来的防火墙提示我误点了不允许导致的- -)