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

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

一开始不知道怎么备份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

jQuery Trickshots来自Tutorialzine的一本关于100个高级jQuery技术书籍分享

最近看到一篇写的不错的文章,来自jQuery中的100个技巧.首先感谢作者辛苦翻译.

不过我也想找原文…于是也是辛苦了很久才找到了这篇伟大的文章出处,更难能可贵的是该站竟然有多个版本的电子书,开放免费.当然是需要注册的,我注册了一个,下载了与大家分享.

这个压缩包包含了全部html,js实例源码,还有多个版本的电子版(pdf,mobi,epub),满足了用电脑,手机或者kindle的用户简直太棒了!!!迫不及待放出分享连接了.以下是分享地址

百度网盘: 英文原版下载页面(以及鸟语版,不懂鸟语的不要下)

如果不能下载了请与发邮件

最后再次感谢伟大的

作者:Tutorialzine

来源:http://tutorialzine.com/books/jquery-trickshots/

介绍:

In this book, you will find 100 advanced jQuery techniques that we have developed over the years as JavaScript programmers and authors for Tutorialzine, presented as easy to understand tips.

尼康单反摄影优化校准相关学习

那部Nikon D5000沉睡了太久了.因为年代已久,似乎我已不爱它了.曾经有一段时间,我每次带着D5000满怀希望的外出,希望能找到令人惊喜的照片,可是多少次带回来的是失望.

于是渐渐地,我的手机开始取代它了.似乎快餐令人满意.生活节奏之快,让我忘记了初心,那些快感让我一直处于自我麻痹的快乐中.

前几日,我再次习惯性的带上了我的单反,和朋友们出游,他们也带了几部单反,闲暇之余,拿来朋友的Canon 600D,试玩了一把,同样是狗头,呈像效果完全不同…我试着将参数全部设置为一致.结果依然令我惊讶,我起初开始怀疑难道是因为这部用了6年的单反,要淘汰了吗.竟有买新机的冲动,是不是该换一步D7200了呢?

后来回来,翻了翻曾经的老照片,我仔细思考了一下,我否决了起初的想法.我认为我的D5000还能再战5年!!!(虽然有些夸张,但是大部分场景还是可以应付的).我真正该做的,大概是将它好好的保养一次,然后,重新阅读一次说明书.将各个参数的理解层次提高.我相信,这样一部老机器依然能拍出好的东西的.

接下来才是重点,学习研究过程中,离不开一些好的文章资料.这里也分享出来.

尼康优化校准设置杂谈2012新版
http://photo.withqiuliang.com/nikon_picture_control/index.html

尼康曲线(影像优化校准系统)详解 + 下载
http://bbs.rayi.cn/thread-261861-1-1.html

尼康优化校准曲线下载
http://www.ooidea.com/forum.php?mod=viewthread&tid=1617

尼康D5000使用技巧指南
http://jingyan.baidu.com/article/17bd8e52f954d585ab2bb8c0.html

Nikon D5000: tips for using your digital camera
http://www.digitalcameraworld.com/2012/09/08/nikon-d5000-tips-for-using-your-digital-camera/

Nikon D5000 Demo Review Tips 15 tricks – YouTube
https://www.youtube.com/watch?v=eRd6o9MyI50

好了先就这些了有空多读读.希望自己在未来一段时间能排出更好的作品~

dota2启动报错解决办法(CAppSystemDict::…RenderDeviceMgr001)

好久没玩下dota2了.有几个朋友找起说耍一下.决定一起开开黑玩玩…经过几G的更新等待.准备启动游戏…却弹出了这个鬼玩意…

dota2error

CAppSystemDict::LoadSystemAndDependecies():
AppSystemDict: Error in init() of interface ‘RenderDeviceMgr001’!

这到底是个什么鬼呢?百度一下…找到的都是以下几个无效方案(也许针对其他报错可能有用,但是如果你和我一样也是RenderDeviceMgr001错误,或许你就要用别的方法了).

  1. 检查文件完整性
  2. 找到安装目录的video.txt修改什么fullscreen为0还是1的什么鬼.
  3. 修改桌面分辨率.
  4. 还有不着边际的重装驱动,重装游戏或电脑(…)

反正都没用,也不知道他们怎么弄好的…

无奈用google查了下.可能有用的方法有以下的几个

  1. 删除游戏快捷方式的启动项或者是游戏设置的启动项,比如-console之类的
  2. 游戏启动项设置为-dx11

我是用了第二个就终于进入游戏了…希望有其他人遇到此问题,并用坑爹的百度搜索能找到正确的解决方案… :roll:

参考资料

  1. How to fix RenderDeviceMgr001 error
  2. Custom mode error – RenderDeviceMgr001
  3. Reborn: Getting a diff error message than everyone else

最后说明下我的配置: win10 64bit + GTX660M + 驱动359.0

SublimeText3的css文件引用图片转base64快速方法

在你做的css文件中,起初背景图都是直接引用目录的切好的图片.如下:

.icons {background-image:url(../images/icon.png);}

那么在做移动端页面的时候,有时我们需要将小图直接转换成base64格式,一般只能借助第三方工具.
这里其实用sublime text 3 的快捷键ctrl+’可以直接快速转换.
当然页面的图片建议是压缩(例如tinypng工具)后的,要不然转换出的字符将会很长.
如果能确定页面的图片都可以直接转换,你可以直接选择 url( 然后快捷键 alt+f3 ,接着按 ctrl+’ ,这样一来css的图片就全部转换好了.

另外还有一种通过chrome快速获取网页上图片的Data Url方法.如图

chrome_ImageToDataUrl
chrome_ImageToDataUrl

win7安装本地Virtual PC虚拟机配置指南(一)

由于公司最近打击盗版比较严厉,之前用的Virtual Box安装的原版盗版XP也就没法继续用了,在双哥的指引写一篇关于微软官方自家的正版Virtual PC + 正版XP的虚拟机配置和基础使用教程,仅供大家参考咯~闲话少说,直奔主题.

准备工作

  • 拥有一台WINDOW 7专业版或更高级版本的电脑(本机适用的64 bit专业版)
  • 下载Windows Virtual PC安装程序(请注意下载对应版本)
  • 下载Windows XP Mode安装程序

安装程序(步骤)

Virtual PC安装程序
Virtual PC安装程序-确认安装
Virtual PC安装程序
Virtual PC安装程序-点击同意进行安装

安装完后要求重启,那么重启电脑后安装XP MODE

Windows XP Mode
Windows XP Mode-安装解压,解压速度与电脑配置有关,约10s-1min

继续阅读win7安装本地Virtual PC虚拟机配置指南(一)

win7下IE9打开页面无限崩溃解决办法

最近有个同事的电脑,ie总是崩溃,我说我去看看吧,结果弄了一个来小时.也没搞定,重置ie,卸载重装,停用插件,等办法均无效.于是怀疑是不是压根不是系统ie文件问题了..

可是百度搜出来的哪些解决方案,可用率大家也是知道了,基本上还没我懂- -…突然想到去查看事件查看器,那里对于崩溃原因有详细的说明.于是打开管理工具事件查看器,找到Windows 日志 > 应用程序,找到ie报错的大红感叹号,,,看看咋说的.好像看不懂饿,不过有效信息是错误模块名称: msvcrt.dll,然后就是异常代码: 0xc0000005了…见图

IE crash error info
IE crash error info

那么有了这个再去查似乎好办多了…很快找到问题所在了.废话不说,说说这个方案:

Win + R > “inetcpl.cpl” > “高级” > 在设置里面找到”加速的图形” > 勾选”使用软件呈现而不使用 GPU 呈现*” > 确定 > 重启电脑

再来打开ie测试一下,据说这个方法适用于ie9和ie11.当然测试环境是win7,据说不限于32位还是64位系统或者各种版本号…

另外值得思考的是,为什么硬件渲染会出问题呢,因为是公司电脑也不方便测试,初步怀疑是不是跟显卡驱动有关.如果有兴趣的话,建议尝试卸载旧的驱动,重新安装新的最稳定的显卡驱动进行尝试.

参考来源:
IE9 crash after opening any site
Internet Explorer 9 crashes – APPCRASH, Application Name: iexplore.exe, Fault Module Name: msvcrt.dll
如果您无法卸载 Internet Explorer 9 该怎么办

IScroll的click单击事件变为双击多次触发解决

前阵子做WAP端的项目,用到了iScroll插件,结果发现有很多问题,起初并未用多个设备进行测试,以为并没有什么问题,结果进入项目尾声进行测试的时候,竟被这个插件折腾了好几天简直让人抓狂.其间收集了一些资料,但是苦于项目上线后一直都比较忙,也就没有什么时间总结这个iscroll插件的一些问题,距离项目上线已经有了半个月了,我下文写的不好还请见谅.

首先iscroll是为了让wap端页面的的某个层内能够固定滚动而特别制作的,我起初想这个东西使用好像还是比较广泛的,问题应该不多吧.之前同事也有使用过,不过基本上使用的是简单的功能,而我这次进行的更多是复杂的交互效果,因此,让我纠结了很久的就是android手机在不同系统版本上,在不同浏览器上以及不同系统版本和不同版本浏览器这三种情况都可能发生各种问题.

参考资料:

https://github.com/cubiq/iscroll/issues/674

https://github.com/cubiq/iscroll/issues/547


以上内容是一个月前写的…我已记不清了,大概是处理不同设备的click事件遇到了很多问题,,,这篇文章放在草稿箱许久了,是时候终结了!

这个iscroll插件的确有很多需要注意的地方,仔细阅读了文档重要部分好几遍,结果写的代码还是问题很多,本文就iscroll使用上的一些问题总结一下与大家分享分享.

我们先来看一个demo(从项目中提出可能有部分冗余代码),主要用于分类选择,菜单弹出功能,(实际应用效果见太平洋电脑网手机端产品库页面,当然后期可能改版,实际效果与demo略有差异)如,用到zepto库,iscroll插件.其中iscroll主要是处理固定高度的滑动效果,它能够自适应并兼容很多设备,所以我选择了插件.

当然每个可以上下滑动的区域都需要创建一个IScroll实例,只需要简单的一句话即可,但是要遵守它的HTML代码结构,详细可以参考官方文档.这里就不讲基本的使用方法了,底部有资料写的很清楚了.我就简要说一下关于这个DEMO中的注意事项.

首先是这是一个带有弹出层的页面,每次点击导航会有一个向下滚出的层,那么弹出后就会创建对应的一个或两个iscroll实例,当点击顶部收回的时候,容易忽略一点,刚创建的实例依然存在,假设收回不销毁新建的实例,就会出问题!

其次,iscroll内的的click事件处理,默认是false,这在ios系统的手机上会出现click执行两次,也就无效的情况,需要改成true,所以需要对创建的示例增加参数.但是问题在于兼容了ios后,android各个版本会出现同样的问题.解决方案,对不同的安卓设备采取不同的click属性值处理,但是经过大量机器测试,依然可能出现无法兼容的情况(实际上是通过一个正则处理的,见代码)

function iScrollClick(){ //设备识别来控制iscroll的click真假
    if (/iPhone|iPad|iPod|Macintosh/i.test(UA)) return true;
    if (/Chrome/i.test(UA)) return (/Android/i.test(UA));
    if (/Silk/i.test(UA)) return false;
    if (/Android/i.test(UA)) {
        var s = UA.match(/Android [\d+.]{1,5}/)[0].replace('Android ','');
        return parseFloat(s[0]+s[2]+s[4]) <= 442 && parseFloat(s[0]+s[2]+s[4]) > 430 ? true : false;
    } //测试大量机器总结的规律,可能会有极小部分机器在选择功能上依然出现问题
}

其实官方文档中有一个options.preventDefault的属性可以配置,但是不知道是哪里出了问题,经过反复测试都没起到作用.于是这个问题折腾了很久…直到有一天…

虽然早起处理这个问题的时候就知道有fastclick,或许可以解决,但是又是一个插件,毕竟一个项目中用太多的插件不好,所以未采纳,前几天研究移动端的touch事件和普通的pc端click等事件时,更清楚的明白了一些东西,例如事件冒泡等…反复琢磨测试,觉得fastclick或许也是可行的,既然之前的方案不够完美,不妨试试这个demo,去掉了iscroll对click的配置(即默认都是false),并添加了fastclick插件及全局配置后,测试了很多机器,发现,并未出现问题.那么目前来看针对iscroll出现的双击,穿透,或是点击延时等问题应该全部处理好了!

毕竟这个内容过去太久,凭借回忆来写的,可能有些混乱,建议有遇到类似问题的朋友仔细看看两个demo的区别,一个是正则处理iscroll的click属性的demo,一个是用fastclick插件的iscroll demo,只需要注意两个demo的js的区别即可!

最后附上相关参考资料:

官方资料: IScroll官方网站 IScroll PDF参考手册 IScroll Github

其他: iScroll 5 API 中文版


后来发现,原来这不是万金油,总会有些坑爹的情况.比如魅族原生浏览器,还有chrome…竟然也会出问题,太失望了.

也就是说,在魅族原生浏览器下,需要设置为click : true才能正常运作,魅族原生浏览器如果false则会出现两次点击,而产生意外情况.而chrome则是当false时,整个iscroll容器内的事件全部被阻止了..没有办法只得打补丁了.于是加了以下代码…

var clickBoolean = false;
if (/Chrome/i.test(UA)) clickBoolean = true;
if (/534.30/i.test(UA)) {
    if (/UCBrowser/i.test(UA)) clickBoolean = false; //覆盖同版本
    else clickBoolean = true; //魅族原生?
}

我本来想通过UA标识来区分魅族浏览器,因为我这个写了534.30来区分魅族的方法风险太大因为UC也是这个版本,所以又加了一条如果是uc还是要用false,想在魅族的UA上处理,但是魅族原生浏览器真的很坑,UA上面根本无法下手.只能临时采用下策了.

这几点是需要大家注意的…(2015年2月2日18:54:00)

chrome 39 有时候出现无法调试?

这几天做东西发现chrome 39的多个版本上,在带有参数的url链接上出现无法调试的情况,而且相当频繁,实在是让人恼火又着急.本机的是版本 39.0.2171.71 m,包括办公室的另一个chrome 39也这鸟样…

不知道其他人有遇到过吗,尤其是这个error.竟然搜不到- -!也是醉了.

chrome_debug_error
chrome_debug_error

现实出现console面板带抖动,文字变得不清晰,然后刷新页面几次就出现Failed to get text for stylesheet  1 : No style sheet with given id found, 其中的数字会每次刷新后累加…莫名其妙!

要问我解决办法,只能带着淡淡的忧伤的心情告诉你,我开了两个chrome,新版的是为了同步数据,旧版的是为了调试 :cry:

PS:

或者在地址栏输入chrome://flags 全部重置为默认值(不过不敢保证有效- -)

或参考Error shows “Failed to get text for stylesheet (#): No style sheet with given id found”, what does this mean?不过似乎也并未提出良好的解决方案

SublimeText3突然无法通过快捷键F12预览页面

最近我的sublime text 3突然无法用F12预览正在制作的页面了.相反,倒是成了提示” unable to find xxx”,还真是奇怪,当然本身这是用的一个侧边栏插件Side​Bar​Enhancements,但是好好的插件,为什么无缘无故的快捷键就坏了呢.不过最近似乎每次启动sublime text的时候,都有更新什么插件,于是就想到本来已装的插件SideBarEnhancements的设置,可是初看又看不出来什么名堂.于是只好去看看是不是插件更新了什么.

找到插件主页,看到了大大的F12 key的说明片段:

(Please note that from version 2.122104 this package no longers provides the key , you need to manually add it to your sublime-keymap file (see next section))

这句话说的很清楚了.但是我就想作为全局使用的快捷键,毕竟养成的习惯不易更改嘛…继续向下看,找到F12 key conflict, 官方也有说明啦:

On Sublime Text 3 F12 key is bound to "goto_definition" command by default. This package was conflicting with that key, this no longers happens. You need to manually add the keys now: Go to Preferences -> Package Settings -> Side Bar -> Key Bindings - User and add any of the following:

[
    { "keys": ["f12"],
    "command": "side_bar_open_in_browser" ,
    "args":{"paths":[], "type":"testing", "browser":""}
    },
    { "keys": ["alt+f12"],
    "command": "side_bar_open_in_browser",
    "args":{"paths":[], "type":"production", "browser":""}
    },
    {
    "keys": ["ctrl+t"],
    "command": "side_bar_new_file2"
    },
    {
    "keys": ["f2"],
    "command": "side_bar_rename"
    },
]

其实很简单,将上面内容复制到

SideBarEnhancements_keybindings_user
用户自定义键位绑定

保存就行了,如果想要鱼和熊掌兼得的朋友,就请自行设置成其他快捷键咯.

另外奉献两个参考地址:

Side​Bar​Enhancements

Sublime 3 – Set Key map for function Goto Definition

PS: 注意官方提供的修改方案,设置了F2的快捷键,覆盖了之前的定位功能,如果不需要这个重命名文件功能请自行删除(2014年11月28日)