分类： IT技术

当前互联网各种计算机技术

Visual Studio Code几款FTP插件使用总结

投入Visual Studio Code后,很久没有使用过sublime text了,也很久没有用过基于编辑器的ftp工具了,这次专门探索了一下Visual Studio Code几款FTP插件,并作了简单的总结,ftp-sync是最棒的!

平时要维护类似wordpress这样的网站，然后虚拟主机又不支持远程仓的版本管理。总而言之，只能通过下载到本地修改后再通过FTP上传的情况，每次修改后都要开启FTP进行代码提交，相当繁琐。因此就诞生了一些编辑器的FTP插件，其实以前用sublime text的时候还有款插件叫SFTP不错（如果配置好了连接不上可以参考SFTP连接超时），可惜VSCODE上面没有，截至目前（2018年1月17日）可以用的FTP插件如下图：

vscode的ftp插件
vscode的ftp插件

为了找出最合适的插件，我全部都一个个试过了(关于如何使用参考插件说明,十分简单就不多说了)。然后有以下感想：

  1. ftp-sync是测试中的唯一一个感觉还可以的,但是菜单为啥不全,感觉是一个BUG吧.希望后期能够优化.

    ftp-sync菜单
    ftp-sync菜单
  2. SFTP/FTP sync总是回莫名其妙的卡住(左下角提示transfer就不动了),而且相同文件好像也会再次覆盖,不会跳过.文件比较多的时候出问题,不建议使用.
  3. ftp-kr跟Simple FTP/SFTP一样没啥暖用,还不如就用ftp软件操作
  4. Simple FTP/SFTP没啥暖用,还不如就用ftp软件操作

感觉很惨,没有一个真正好用的,而且连ftp传输状态信息也没有.有时候比较惨的误操作了需要中断传输,貌似只能强制关闭编辑器…

最后感觉,还是用sublime text 的SFTP来维护会比较好一点.如果不怎么用sublime text的话,个人建议使用ftp-sync在VSCode上表现还是不错的,有潜力,期待作者进一步优化~

Linux下无法正常安装（升级）和删除Nodejs的解决方法

Linux(CentOS6)下安装Nodejs,删除Nodejs,升级Nodejs遇到的一些问题,以及相关解决方案的介绍

接着上次说，自从买了VPS后就没闲着，总想要充分利用起来倒腾点东西。于是决定安装nodejs搭建web服务器等，如今nodejs稳定版本已经更新到8.x了，因此我就试着装一下8.x吧，没想到又遇到了坑，一搞搞了好几天。

我的操作系统是CentOS 6 64 Bit的，我查阅了Nodejs官方升级文档（包含各种可支持的系统），针对我的系统需要分别执行以下几条命令：

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
sudo yum -y install nodejs

当然你也许需要通过以下命令额外安装构建工具：

sudo yum install gcc-c++ make
# or: sudo yum groupinstall 'Development Tools'

如果其他系统则可以参考文档中其他内容。

在这里我就遇到坑了（可能存在该情况较少，所以稍后具体解决放在文章最后来说）。上面第一条应该是静默指定使用8.x的资源，便于安装时采用这个而不是yum自己原来的远程仓，不知道这个解释对不对。

我反复试过了，命令明明提示请执行 sudo yum -y install nodejs 来安装nodejs8.x，却一直安装的是6.x，难道是依赖问题？找不出原因的我，没有办法只能找其他安装途径，于是发现了第二种安装办法，手动获取最新的安装包，并进行解压缩安装，可能依赖Python2.7以上版本，我一步步来说。

如果是仅手动安装Nodejs8.x，执行以下命令：

yum install gcc-c++ openssl-devel
cd /usr/local/src
wget http://nodejs.org/dist/v8.9.4/node-v8.9.4.tar.gz
tar zxvf node-v8.9.4.tar.gz
(cd into extracted folder: ex "cd node-v8.9.4.tar.gz")
./configure
make
make install

顺利的话应该不会有什么问题，大概会过一段时间，稍微有点长，就提示安装好了，可以执行

node -v

来查看是否是8.x，如果好了，基本上关于安装部分就大功告成了。如果没好，太惨了，跟Python有关系的话，请查看Linux下Python安装升级心得。

接着我们来看看删除，因为你已经安装了一个低版本，需要升级，那就是要先删除旧版本了，nodejs应该是向下兼容的，所以我就没有去研究可能闲着蛋疼才会去研究如果保存多个版本nodejs，当然在新版中可能会存在部分旧的功能废除而造成异常，虽然一般来说升级利大于弊，不过还是要考虑老项目环境是否要升级！如果你是闲着蛋疼的人，必有理由说服我，请在下方留言。差点跑题，删除命令简直是太简单了。

sudo yum remove nodejs

然后按提示输入y，回车后很快就删了。一切删除操作都是令人兴奋的。。。

其实，我在安装过程中远没有那么轻松，否则也不会折腾几天了，一个是版本错误，一个是Python升级。版本问题，后来差了很多资料才发现，原来是yum缓存问题导致。如果遇到和我类似的问题，请尝试以下命令：

rm -f /etc/yum.repos.d/nodesource-el.repo
yum clean all
yum -y remove nodejs
yum -y install nodejs

汇总下本文参阅的相关文章：

  1. Nodejs官方文档，通过包管理安装Nodejs
  2. Centos下手动安装Nodejs的方法
  3. 无法在Yum仓下安装正确的Nodejs版本（和刚才示例的代码类似，都是清除缓存，不过对我无效）
  4. CentOS下使用nodejs7.x的包进行安装却安装成了6.9.5（针对我的有效方案）
  5. 如何通过Linux命令删除Nodejs

所以我呢，其实就是应该遇到版本不对的情况就尝试清除缓存，再用官方命令进行安装就好了~

我想既然是Yum仓库缓存的问题，除了Nodejs，别的包也许也会有类似情况吧，如果也发现了选择了需要的版本后依然装的是旧版的，又和依赖没什么关系，就试试清除缓存吧 🙂

Chrome启动关联程序的协议链接误操作被禁用后如何修改设置重新开启

由于误操作，造成Chrome启动关联程序的协议链接被禁用，那么怎么重新修改设置，启动相关的程序呢，这里将为大家解答！

该文章适用于Windows 7 x64下Chrome版本 62.0.3202.94（正式版本） （64 位）的设置，其他设备不明。也许WIN10也可以，但是可能会由于Chrome版本区别而不可用。

今天回到宿舍，要用百度云盘下载点东西，结果，手误，勾选记住后，点了不要打开，为什么要高亮不要打开，泪奔。。。界面是这样的：

百度云的链接协议设置protocol settings

继续阅读“Chrome启动关联程序的协议链接误操作被禁用后如何修改设置重新开启”

表单中readonly的input等标签，禁止光标进入（focus）的几种方式

在做移动端页面，表单内的部分元素如果设置了readonly=”readonly”，CHROME模拟移动端是看不出问题的。而手机上虽然表单元素不能编辑内容，但是会出现闪动的光标以及页面底部有一条系统自带的控制bar。这样的体验很差，于是我总结了几个方案。

在做移动端页面，需要在订单页面中显示表单数据，由于UI统一，所以就依旧采用form的结构来写结构，只读数据的标签自然要加readonly=”readonly”，以为这样就行了，CHROME模拟移动端是看不出问题的。手机上一看，虽然表单元素不能编辑内容，但是会出现闪动的光标以及页面底部有一条系统自带的控制bar。

表单readonly元素依然有光标
表单readonly元素依然有光标，底部还有BAR，感觉不好

这种情况对我来说并不好。于是网上找了一些解决方案，现在总结一下：

方案一（JS）：

<input type="text" value="test" onfocus="this.blur()" readonly="readonly">

这个很好理解就是进入的时候自动跳出。但是缺点是一方面js处理没有css好，二是如果需要在该元素上绑定其他事件，其他人开发不留意可能会造成事件覆盖。

方案二（CSS）：

[readonly="readonly"] {
  user-select: none;
}

这是个新的实验性属性，具体说明及兼容性可参考user-select MDN
用起来感觉很好，但是同样有两个问题：一，非标准属性（请尽量不要在生产环境中使用它！）；二，如果用户想要复制该表单内容就不行了，这个问题个人感觉很严重！

方案三（CSS）：

[readonly="readonly"] {
  pointer-events: none;
}

这个是我感觉比较适合我的，因此最后我采纳了该方案，当然也是有弊端的，绑定在只读表单元素的所有事件将无法生效。除此之外都表现完美，就我目前需求来看，也不需要什么事件。因此采用了~

当然，如果你也遇到相似的问题，可以根据情况选择对应的方案，当然，如果你也有更好的方法也欢迎留言~

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-nesting和postcss-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学习指南（二）”