标签： 技术

技术可不是仅仅包括IT方面的,你们不要小瞧我,我各项技术只有你想不到,没有我做不到的哈哈哈,吹牛技术吧…

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学习指南（一）”

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启动服务器时候,弹出来的防火墙提示我误点了不允许导致的- -)

Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings Sync)

今天要说的就是这个插件Settings Sync,一个可以在github上面通过gist仓来同步用户的vscode的配置包括插件,settings等信息的好插件

最近基本上习惯了用VSCODE进行开发了.最主要的感觉就是查找JS里面函数定义和引用很方便.还有可能是装逼心理… 🙄

一开始不知道怎么备份VSCODE的配置,傻乎乎的把要用的插件抄下来,还有用户settings拷贝出来.每次换了电脑或者重装系统什么的都要重新备份.虽然来回调整的概率很低,但是突然哪天需要同步设置什么的就很麻烦了~至少我是在初期经常鼓捣这个编辑器,而且办公在家和公司是不同的设备~所以觉得还是很有必要的~

于是我今天要说的就是这个插件Settings Sync

官方都是英文的,不过还算简单,我把步骤简化一下.

1.安装插件并重启VSCODE就不用说了

安装Settings Sync
安装VSCODE Settings Sync后重新加载

2.重启后按快捷键 alt+shift+u (这里假设你第一次用)

它会弹出一个窗口对应的是github上面的创建个人gist的页面,如果未登录请先登录github.

github创建gist来存储设置
github创建gist来存储设置

保存后会生成一个key

请牢记token id,后面将会用到
请牢记token id,后面将会用到

3.切回到vscode,他会有个输入区,就是存放刚才生成的key

输入刚才生成的key
输入刚才生成的key

然后理论上他就开始对你本机的配置进行一个扫描上传了.至此上传工作完成.

接下来我们到另一台电脑上了下载配置.同样的先安装Settings Sync插件,并重新加载.

然后按快捷键alt+shift+d,就应该会弹出一个输入框,请在这里输入之前保存下来的key(GIST ID),回车后将会自动下载之前上传的配置.

那么下载完成后,你这台电脑修改了相关配置再次上传就好了.是不是感觉方便多了~

其他的说明,如果在输入gist id写错了,读取不到的情况下,大概需要重置设置,按F1,输入sync,这里有重置选项.试试看~

重置sync的gist配置信息等
重置sync的gist配置信息等

还有些其他的功能例如自动上传下载等等,不是很常用,大家可以自行看看官方文档,基本的使用方法就是这样了,我写的如果有问题或者哪里不明白的可以留言- -.

下面是官方说明

http://shanalikhan.github.io/2015/12/15/Visual-Studio-Code-Sync-Settings.html

插件地址

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

2018年1月15日补充
有朋友留言说Settings Sync不能同步插件,我刚测试过是可以同步插件的哦~按Alt+Shift+D后左下角可以看到同步的进度,例如下图:

Settings Sync插件同步
Settings Sync插件同步

使用webpack dev server通过本地IP启动服务器后invalid host header的错误解决办法

最近在研究webpack,本来前阵子webpack dev server还配置的挺正常的…今天突然重新搭环境的时候跑不起来了…不知道是不是版本原因导致的,反正现象是

webpackDevServer服务器启动正常,进行localhost:9000访问正常,但是用本地的ip例如我IP是192.168.1.100,于是在浏览器中访问192.168.1.100:9000则出现了invalid host header.

那么解决这个问题也是差了不少资料.如果你存在此问题可以尝试一下方法:

首先说明环境 webpack 2.6.1 + webpackDevServer 2.5.0

我本来的webpack.config.js文件内的webpackDevServer配置如下

devServer: {
    contentBase: __dirname,
    compress: true,
    port: 9000,
    inline: true,
    host: '0.0.0.0'
}

有人说要加一个

disableHostCheck: true

不过不知道这里是没有效果的

又查到说加了一个public参数,试了下就好了.所以就分享下.完整的效果是

devServer: {
    contentBase: __dirname,
    compress: true,
    port: 9000,
    inline: true,
    host: '0.0.0.0',
    disableHostCheck: true,
    public: '192.168.1.107'
}

PS:后来发现用disableHostCheck: true其实也行了,大概是缓存原因没有及时看到效果,不论怎么样…出现这种问题的朋友都可以试试咯~

参考

–host 0.0.0.0 Not working
I am getting an “Invalid Host header” message, when running my React app in a Webpack dev server on Cloud9.io
webpack-dev-server2.4.3版本的官方说明
webpack-dev-server disableHostCheck导致 invalid host header