create-react-app是FaceBook官方出品的一个React.js脚手架工具，集成了webpack等调试和打包工具，具体可以查看Github: https://github.com/facebookincubator/create-react-app其默认支持css的import，但是不支持less，本文介绍如何简单的增加less的支持。在create-react-app生成的项目文件夹中，是看不到webpack.config相关的文件的，而要增加less支持肯定是要更改webpack配置文件的，所以需要让这些文件暴露出来，使用以下命令即可：npm run eject之后便可以在项目目录下看到config文件夹，其中的webpack.config.dev.js和webpack.config.prod.js分别是开发环境和生产环境使用的webpack配置文件。安装less-loader:npm install less-loader less --save-dev修改开发环境配置，编辑webpack.config.dev.js文件，需要改两个地方。第一个地方：找到以下几行（版本不同位置可能不太一样）exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.bmp$/, ...继续阅读 (12)

前前后后已经用了3年的macOS，期间也夹杂用了不少时间的Windows，对于两者孰优孰劣是永不停歇的战争。这里分析一下3个日常操作中的差异点，这三个点对于我来说，是macOS的优点，同时也是每次切换回Windows后感觉别扭的三个地方。未激活窗口可以使用滚轮翻页在macOS中，不论一个窗口是否是前置状态，只要鼠标移动到他上面，滑动鼠标滚轮（或者触摸板）都是可以进行页面滚动翻页等操作的。这对于多显示器开着多个窗口的人来说非常方便，比如一边看文档一边写代码，可以在输入焦点不丢失的前提下把文档往下翻，提升了不少效率。而在Windows中，需要窗口处于前置激活状态才可以使用滚动操作。tips: 在macOS中，对于未激活窗口几乎只有滚动翻页操作是可用的，其他包括非全局快捷键、鼠标停留特效等都是不起作用的点击Dock栏中的应用图标会立即显示所有已打开窗口比如同时开了3个word窗口，并且这时候去干别的事情了，想回到word上，点击一下Dock栏的word图标后，3个word窗口将一起被前置，并且保持上次的顺序，如上次是第2个文件在最前面，这次也是。而在Windows中，点击任务栏的word图标并无法完成操作，需要鼠标继续上移从三个预览窗口中选择其中一个，这无疑增加了选择难度，一般情况下我们是希望回到上次的工作状态的，因此这个选择大多数情况是多余的。Finder中可以按空格预览文件这个对于快 ...继续阅读 (5)

在阮一峰老师的ECMAScript6入门中提到修饰器(Decorator)不能用于函数，里面提到原因是因为存在函数提升，这里只有简单几句话带过，如果熟悉JS的函数提升，就会好理解一些。首先看看什么是函数提升。简单的讲，函数提升指的是JavaScript编译器（解释器）将会把代码中所有的函数定义“提升”到代码的顶部，因此，可以“先”调用函数，“再”声明函数，而不是像传统的C++等语言，函数的使用必须在声明之后，通常会需要把函数声明都写在头文件中。而对于普通的变量，也是如此，var完全可以在后面的代码里面再补上如果我们直接运行下面这一句：console.log(foo); // ReferenceError运行后将会抛出异常，ReferenceError: foo is not defined但如果在后面补上变量的定义，则会正常运行，并输出undefinedconsole.log(foo); // outputs: undefined var foo;其实解释器对其进行预处理，找出所有变量定义，并放在了前面，相当于如下效果：var foo; console.log(foo);对于函数，也是可以正常运行foo(); // Outputs: bar function foo() { console.log('bar'); }不过需要注意的是，函数表达式不适用foo( ...继续阅读 (5)

新建的vagrant虚拟机启动的时候莫名其妙的报了下面的错误：The guest machine entered an invalid state while waiting for it to boot. Valid states are 'starting, running'. The machine is in the 'poweroff' state. Please verify everything is configured properly and try again.If the provider you're using has a GUI that comes with it, it is often helpful to open that and watch the machine, since the GUI often has more helpful error messages than Vagrant can retrieve. For example, if you're using VirtualBox, run `vagrant up` while the VirtualBox GUI is open.根据错误提示，直接用VirtualBox试开了一下vagrant产生的虚拟机，发现报错内容中包含了USB2.0字样，完整如下：Failed t ...继续阅读 (17)

一直很怀疑这个小机器能不能经得起双系统的折腾，但是想到之前Core M处理器的Surface Pro 4都可以流畅玩LOL了，这一个机器的配置（16年初版）是比这个SP4高的，因此试一试装个Windows10应该也是可以的。安装过程和MacBook Pro等没有太大区别，都是下载了镜像后用BootCamp助理，根据提示一步步下去就可以了。比较麻烦的是，这个电脑仅仅提供了一个type-C接口，而且刚装完Windows10以后由于驱动问题，触控板还无法使用，这就必须再接一个鼠标，但是这时候安装U盘还差着呢。。所以只好祭出各种转接头组合。还好，进入Windows10以后装完BootCamp驱动，触控板终于可以用了，可以拔掉鼠标了。接下来测试一下游戏，LOL是可以开的，但是帧率很低，最低画质下，也只能勉强达到30fps，因此想要用它玩游戏的还是算了。难道是图形性能不如SP4？ ...继续阅读 (17)

macOS默认对于NTFS格式的分区（如U盘或移动硬盘）只能读不能写，因此很多人干脆把U盘设置为FAT格式，但是FAT格式最多只能支持单文件4G，如今随随便便一个电影或者安装包都大于4G。并且，NTFS转FAT通常需要格式化丢失数据，对于已有的移动硬盘不太可能这么去做。其实macOS自带了对NTFS格式的读写，但可能技术尚未成熟，目前默认没有开启。启用方法：首先需要记住分区名，例如，插入U盘后在Finder中，该U盘显示的名字，为了保险起见，建议设置为英文，这里举例为UDISK。本操作需要用到终端，在终端中输入一下命令编辑系统文件，打开NTFS支持sudo vi /etc/fstab然后在这个文件里面输入以下内容：LABEL=UDISK none ntfs rw,auto,nobrowse此处的UDISK为U盘盘符，根据实际情况调整。设置以后，重新拔插U盘，这时候Finder中将看不到这个U盘，因为上面的设置会使其处于隐藏状态。因此需要在Finder菜单中的“前往”，“前往文件夹”输入/Volumes/这时候将看到之前的U盘，并且可以进行NTFS的读写操作。这个方法同样适用于BOOTCAMP分区，只要把UDISK改为BOOTCAMP即可，不过由于BOOTCAMP分区无法拔插，所以可能需要重启一下电脑。注意：此方法存在部分Bug，在实际使用时发现，如果写入的文件比较大（比如10G以上 ...继续阅读 (8)

之前为了拍摄照片使用了webcam相关的插件，其拍摄后得到的是base64格式的图片，直接显示没问题，在src中直接指定就可以了，但是要上传到server时问题就来了，server端接收的是标准的文件，也就是html form中type=”file”的形式。想要沿用这个接口不更改server端代码，于是尝试将base64直接转换成标准的fomeData并通过AJAX提交。第一步，将base64转换成二进制图片（Blob）主要思路是整理一下base64的前面几个字符，预处理以后转换成Blob对象，这个之后稍作处理可以放在formData中。function dataURItoBlob(base64Data) { var byteString; if (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); else byteString = unescape(base64Data.split(',')[1]); var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; v ...继续阅读 (12)

之前在处理两个object的合并时，通常使用underscore的extend方法，但其实这个方法并不是深度合并（拷贝），在以下场景中将会出现问题。有如下两个object：a = { attribute: { border: { width: 2, color: 'red' }, width: 300, height: 100 } };b = { attribute: { border: { width: 3 } } }现在需要用b来更新a，具体的场景可能为：a是某一个数据结构，现在需要修改其中的border的width，为了使修改操作更具有鲁棒性，使用一个有相同结构但不完整的b进行操作。考虑使用underscore的extend方法：a = _.extend(a, b);这将会得到以下结果：a = { attribute: { border: { width: 3 } } };注意到，虽然width被修改了，但是color却丢失了。原因在于，extend函数找到了attribute这个key是a与b共同拥有 ...继续阅读 (8)

Framework7中，使用js来加载新页面可以使用loadPage方法。但是这个方法需要在某个view中调用，例如：mainView.router.loadPage('about.html');这里的mainView通常为首页。但有时候页面并不是在首页，这时候可以简单地把mainView换成相应的view，但实际上，常常会遇到不同的view需要加载相同的page的情况。这时候，我们当然希望这个page是在当前的view中加载。查阅了文档后没有发现这样的功能，但是经过对代码的分析，发现当前的view中会有一个active的class，因此有个思路是遍历所有的view。这里提供一个范例，在我的当前项目中，总共加载了4个view：var mainView = app.addView('.view-main', { dynamicNavbar: true, }); var safariView = app.addView('.view-safari', { dynamicNavbar: true, }); var settingView = app.addView('.view-setting', { dynamicNavbar: true, }); var cartView = app.addView('.view-cart', { dynamic ...继续阅读 (11)

最近在做移动Web的时候，在PC上用Chrome调试都成功了，但是在iPhone上真机一测就出现了奇怪的问题。经过一系列调试发现是日期相关的地方出现了问题。起初怀疑是生产环境的问题，但用Mac版的safari调试本地也出现了同样的问题。查阅一些资料后发现，safari中对于JavaScript的new Date函数的支持有一个比较奇怪的问题。通常，由于习惯了SQL中的datetime格式，日期是打成yyyy-mm-dd的格式，然而，safari竟然不支持这样的格式，所以当你输入如下语句时，会返回空的时间。new Date('2016-04-17');Safari支持的格式是yyyy/mm/dd这样的，差别主要在于短横-与斜杠/，而斜杠这样的格式在其他常见的浏览器中也都是可以正常运行的，所以只需要都换成斜杠就可以了，转换函数如下所示：new Date('2016-04-17'.replace(/-/g, "/"));  ...继续阅读 (15)

在Xcode7.0及以上版本中编译iOS APP时，默认会使用iOS9的一项新特性，使得所有http连接被禁用，项目里使用的API没有https支持，就悲剧了。差了官方文档，有这么一段话App Transport SecurityApp Transport Security (ATS) enforces best practices in the secure connections between an app and its back end. ATS prevents accidental disclosure, provides secure default behavior, and is easy to adopt; it is also on by default in iOS 9 and OS X v10.11. You should adopt ATS as soon as possible, regardless of whether you’re creating a new app or updating an existing one.If you’re developing a new app, you should use HTTPS exclusively. If you have an existing app, you should use HT ...继续阅读 (21)

开发GPS定位的时候，需要判断用户是在哪一个区域范围内，这就涉及到判断点是否在一个多边形内部。理想情况是任意多边形均可（点按顺时针或逆时针排列）。使用数学上的射线法可以用很短的代码实现。具体算法思路参见：判断一个点是否在多边形内部 [2] 射线法实现原文提供的是JavaScript代码，我在开发时使用的是PHP，进行转换后的代码如下：function isPointInPolygon($polygon,$lnglat){ $count = count($polygon); $px = $lnglat['lng']; $py = $lnglat['lat']; $flag = FALSE; for ($i = 0, $j = $count - 1; $i < $count; $j = $i, $i++) { $sy = $polygon[$i]['lng']; $sx = $polygon[$i]['lat']; $ty = $polygon[$j]['lng']; ...继续阅读 (40)

今天在写iOS项目时，需要用到微信登陆模块，所以引入了微信官方的iOS SDK，但是编译时一直出Mach-O的错误，怀疑是SDK本身的问题。于是建了个新的空项目，导入WeChatSDK，依旧报错，报错内容一致：Undefined symbols for architecture x86_64:"operator delete[](void*)", referenced from:+[WeChatApiUtil EncodeBase64:] in libWeChatSDK.a(WeChatApiUtil.o)+[WeChatApiUtil NsDataEncodeBase64:] in libWeChatSDK.a(WeChatApiUtil.o)+[WeChatApiUtil DecodeWithBase64:] in libWeChatSDK.a(WeChatApiUtil.o)+[WeChatApiUtil DecodeBase64:] in libWeChatSDK.a(WeChatApiUtil.o)"operator new[](unsigned long)", referenced from:+[WeChatApiUtil EncodeBase64:] in libWeChatSDK.a(WeChatApiUtil.o)+[WeChatApiUtil NsDataEnc ...继续阅读 (43)

有时候我们需要有多个component的UIPickerView并且对应不同的内容，比如地区的选择，需要有省份和城市两个选项，选择不同的省份，城市要相应发生变化。下面假设component数量为2。使用指定title的函数，根据[pickerView selectedRowInComponent:0]的不同来指定第二个component的title- (NSString*)pickerView:(UIPickerView*)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component { }但此时，会发现切换省份后，城市一栏没有办法及时刷新。我们还要指定刷新事件。- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { [pickerView reloadComponent:1]; } ...继续阅读 (56)

支付宝和微博的亿万红包恶心图标风波袭来！想不想给自己来个亿万红包的头像！做了一个PSD，用Photoshop打开后用“亿万红包”这个图层盖住你的头像即可。祝大家玩的开心。yiwanhongbao.psd ...继续阅读 (23)

iOS应用在进行小规模内测的时候，如果使用的是99美元的证书，需要把用户的UDID手动加进开发者证书中才能安装。一般情况下我们使用iTunes来查看设备的UDID，但是让目标测试用户操作这一点还是很麻烦的，首先要有装着iTunes的电脑，然后可能还会遇到各种数据线插进去没有反应的情况。使用蒲公英提供的链接，可以直接在iOS设备的Safari中查看UDID。首先让用户用Safari打开这个链接：http://www.pgyer.com/udid然后根据提示进行操作，需要安装一个描述文件。 ...继续阅读 (18)

默认的UIScrollView滑动到底之后（假设往右），就无法继续往右滑了，但为了更好的用户体验，我们继续往右滑是自动回到第一页。这里提供一个方案。假设有5页，其中分别放着1.jpg 2.jpg 3.jpg 4.jpg 5.jpg五张图，为支持无限滚动，我们把最后一张图复制一份追加到第一张左边，把第一张图复制一份追加到最后一张图右边，即新的UIScrollView有7页，分别是[1号：5.jpg][2号：1.jpg][3号：2.jpg][4号：3.jpg][5号：4.jpg][6号：5.jpg][7号：1.jpg]然后把初始的位置移动到2号。接下来，如果用户滑动到7号位置，则立刻把位置更换到2号，此时用户并没有发现位置发生了改变，从而实现了无限往右滚。同理，如果用户滑动到1号位置，则立刻把位置更换到6号，实现无限往左滚。至此，实现了无限滚动。在Objective-C中的实现方案：// 通过补充前后两张图片完成scrollView的初始化，并正确设置contentSize // code.. // 移动到2号位置： [scrollView scrollRectToVisible:CGRectMake(scrollView.bounds.size.width,0,scrollView.bounds.size.width,scrollView.bounds.size.height) a ...继续阅读 (25)

下载客户端官网下载客户端：http://shadowsocks.org/en/download/clients.html如果打不开上面这个网址，请在这里下载(在这里下载的版本可能不新)：OS XWin8Win7运行客户端客户端都是免安装的，打开就能用。Windows版打开后填写下面的信息（这些信息给你账号的那个人会跟你说清楚的）填好之后检查右下角的图标（类似纸飞机），看是否已经启用成功启用后是这个样子的然后就可以自由上网啦。OS X版打开后把那个纸飞机一样的东西拖进应用程序，然后运行，配置服务器信息（按下图打开服务器配置）打开后是这个样子（这些信息给你账号的那个人会跟你说清楚的）最后注意在状态栏纸飞机那里勾选自动代理模式，并确保Shadowsocks处于打开状态，成功的图是下面这个样子然后就可以自由上网啦。 ...继续阅读 (16)

使用隧道代理，在本地创建Socks5代理，是保护自己在上网时隐私的常用方法。SSH Tunnel的方式大家都很熟悉，最近流行起来的Shadowsocks与传统的SSH Tunnel相比，有何优劣之分呢？什么是ShadowsocksShadowsocks 是一个安全的socks5代理，用于保护网络流量，是一个开源项目。通过客户端以指定的密码、加密方式和端口连接服务器，成功连接到服务器后，客户端在用户的电脑上构建一个本地socks5代理。使用时将流量分到本地socks5代理，客户端将自动加密并转发流量到服务器，服务器以同样的加密方式将流量回传给客户端，以此实现代理上网。其流行起来的一大原因，是国内某些地区的SSH Tunnel连接被禁用。Shadowsocks优势如前面所说，使用SSH来创建本地socks5代理的方法容易被发现，某些地区干脆进行了封锁，而Shadowsocks的代理方式更为隐蔽和安全。无需保持实时连接，不用考虑断线问题。在使用SSH时，总会发生断开连接的情况，如网络不稳定、电脑休眠、切换wifi等，此时SSH连接将断开，浏览网页什么的会提示无法连接到代理服务器。虽然客户端大都支持断线重连，但是反应经常不太灵敏，平均需要30秒左右的时间（而且这个时间是从你点开网页开始算的）。如果你用的是手机的话，鉴于手机网络的多变性，人一旦动起来就几乎不可用了。更丰富的客户端支持。目前S ...继续阅读 (51)

socks5的作用这里不做讨论。在windows下有MyEntunnel, Bitvise Tunnelier等自动连接ssh并建立socks5的工具，还支持断线重连，用起来十分方便，可是这些软件都没有Mac版！我强大的Mac怎能在这一环节输掉呢！于是本文章提供一个直接使用终端进行socks5的建立并实现免密码，掉线自动重练的功能。首先，建立SSH密钥实现免密码登陆在Mac中打开终端，切换到当前目录的~/.ssh目录下，查看是否已经存在key，如下图，如果存在id_rsa.pub文件，则可以跳过第2步，如果不存在请直接看第二步。cd ~/.ssh ls生成RSA密钥，输入以下命令，其中邮箱地址选填写，然后连按3次回车，表示在默认路径生成，空密码。ssh-keygen -t rsa -C "yourname@domain.com"复制密钥。切换到~/.ssh目录，打开id_rsa.pub文件，拷贝里面的一串内容。vi ~/.ssh/id_rsa.pub其中，拷贝的那串内容长这样“ssh-rsa AAAAB3NzaC1yc2....”。ssh连接到你的服务器，然后同样切换到~/.ssh目录，如果没有这个目录，就使用mkdir .ssh命令创建一个，然后在authorized_keys文件后添加刚才拷贝的内容，输入:wq保存，退出ssh连接。至此，免密码登陆已经实现vi ~/.ssh/a ...继续阅读 (32)

发布会上iCloud Drive看起来非常的好用，一股秒杀Dropbox的气势，但是当Yosemite正式版终于发布以后，iCloud Drive用起来却总是有点别扭，下面对iCloud Drive的一些原理进行一下讨论。首先是路径问题之前在Mac中搭建了本地的PHP服务器，习惯于把路径设置在Dropbox同步文件夹的子目录中，时刻保持同步，防止哪天辛苦写的代码出现了什么意外。这次有意抛弃Dropbox转而使用iCloud Drive，但是在路径上就遇到了麻烦。在Mavericks及以前版本的OS X里，只要在Finder中右键点击一个文件，再点显示简介，即可得到它的绝对路径，然而这次iCloud Drive中文件的路径确被封装了（估计苹果是想让你感受不到云的存在。。），点击显示简介后，发现路径变成了iCloud Drive这几个字。无奈转战终端，查遍各种路径，终于发现，存在iCloud Drive中的文件，路径在：/Users/UserName/Library/Mobile Documents/com~apple~CloudDocs随后发现了一些储存原理在目录/Users/UserName/Library/Mobile Documents/com~apple~CloudDocs中虽然看到了自己放入iCloud Drive中的文件，但是和在Finder中看到的有明显区别，少了各种应 ...继续阅读 (47)

原生的jQuery并没有对移动Web做很好的支持，比如滑动事件。在使用下拉刷新、轮播图移动等操作时，都需要用到滑动事件，这里推荐一个jQuery插件TouchSwipe-Jquery-Plugin。Github地址：https://github.com/mattbryson/TouchSwipe-Jquery-PluginGithub及官方文档上已经做了详细的介绍，这里简单的说一下滑动操作的基本功能。$(function() { //Enable swiping... $("#test").swipe( { //Generic swipe handler for all directions swipe:function(event, direction, distance, duration, fingerCount, fingerData) { $(this).text("You swiped " + direction ); }, //Default is 75px, set to 0 for demo so any distance triggers swipe threshold:0 }); });引入了jQue ...继续阅读 (12)