ShiJianwen 于 5个月前发表 506 0 0
hexo 是一个优秀的静态博客工具,唯一的不足就是源文件无法同步,让人几乎只能在一台电脑上写博客,为了解决这个问题,我们可以使用 Github 来管理我们的 hexo 源文件,具体思路就是:在我们博客的远程仓库中新建一个分支,用这个分支来存储博客的源文件,这样我们每次在更新博客并部署之后可以顺手多执行两条命令将源文件同步到远程分支中去,不需要做任何环境切换的操作,还可以将部署和同步操作写成一个命令脚本,自动执行以上命令。建立同步的过程很简单: 初始化版本库&建立仓库关联(已与远程仓库关联的可忽略这一步) 一般根据 hexo 教程一步步建立起来的博客都没有跟自己的远程仓库建立关联,查看是否关联的方法是输入 git remote 看是否有关联的远程仓库: [http://7tszky.com1.z0.glb.clouddn.com/FtxueLTZmK2wcld6Id7DAu6-24k_]
5个月前
工具建设
ShiJianwen 于 5个月前发表 1072 0 0
原文链接: https://dotdev.co/clean-up-your-vue-modules-with-es6-arrow-functions-2ef65e348d41#.vkndfgci3 [https://dotdev.co/clean-up-your-vue-modules-with-es6-arrow-functions-2ef65e348d41#.vkndfgci3] 众成翻译地址: http://www.zcfy.cc/article/clean-up-your-vue-modules-with-es6-arrow-functions-dotdev-1872.html [http://www.zcfy.cc/article/clean-up-your-vue-modules-with-es6-arrow-functions-dotdev-1872.html] 最近在重构一个用 Vue1.0 写的项目,我通过使用 ES6 的箭头函数来让代码在不升级 Vue2.0
5个月前
javascript技术
ShiJianwen 于 5个月前发表 859 2 1
问题描述 在开发中,我们常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的问题,就是对于小于12px的字体使用 line-height 属性进行垂直居中的时候,渲染出来的效果并不是文字垂直居中,而是会偏上一些。举两个代码示例如下: 1. 大于12px html <span>testtesttest</span> css span{ display: inline-block; height:16px; background-color: gray; line-height:16px; font-size:12px; } <!-- more -->显示效果 [http://7tszky.com1.z0.glb.clouddn.com/Fjxba0fqcxW5gDXF9DW1IMRoHh5I] 2. 小于12px html <span>testtesttest</span> css span{ display: inline-block; height:16px;
5个月前
CSS/重构
yisbug 于 5个月前发表 597 0 0
本文内容大部分来自 https://www.joyent.com/node-js/production/design/errors [https://www.joyent.com/node-js/production/design/errors] ,原文比较长,感觉也有点啰嗦,所以根据个人理解猜测梳理出本文,如果有错误欢迎指出,谢谢! 很多人其实不是很重视错误处理,但对于构建一个健壮的nodejs应用,错误处理是非常重要的一件事情,希望本文可以给你一些启发。 先抛出几个问题: 1. 应该用哪种方式暴露错误? throw 、 callback(err, result) 、 Event Emitter 或者其他方式? 2. 如何假设函数的参数?是否应该检测类型正确?非null,IP,QQ号码? 3. 函数参数不符合预期该怎么处理? 4. 应该如何区分不同类型的错误?例如 Bad Request 、 Service Unavailable 5. 应该如何提供有用的错误信息? 6. 应该如何捕获错误?使用 try/catch ,还是 domains 或者其他方式? 一些基础知识
5个月前
nodeJS全栈
jaychen 于 5个月前发表 1814 0 1
[http://7tszky.com1.z0.glb.clouddn.com/FkhApdRySR927nkdDZuUPBQbJtXG] 一、相关技术介绍: 消息实时推送,指的是将消息实时地推送到浏览器,用户不需要刷新浏览器就可以实时获取最新的消息,实时聊天室的技术原理也是如此。传统的Web站点为了实现推送技术,所用的技术都是轮询,这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求。 短轮询(Polling)[http://7tszky.com1.z0.glb.clouddn.com/Forwbre5TtTP1ayMvQr8Z3hPjIon] 客户端需要定时往浏览器轮询发送请求,且只有当服务有数据更新后,客户端的下一次轮询请求才能拿到更新后的数据,在数据更新前的多次请求相当于无效。这对带宽资源造成了极大的浪费,若提高轮询定时器时间,又会有数据更新不及时的烦恼。 commet
5个月前
nodeJS全栈
郭明慧 于 5个月前发表 1232 2 0
开发的一个简单的移动端时间选择器,支持多种主题,现在来共享一下。 Github地址: https://github.com/IronPans/LazyPicker [https://github.com/IronPans/LazyPicker] 效果图: [http://7s1r1c.com1.z0.glb.clouddn.com/t_lazyPicker.gif] 你也可以扫描二维码用手机体验: [http://7s1r1c.com1.z0.glb.clouddn.com/t_1480730967.png] 如果你使用PC浏览器,那么你需要切换到手机模式才可使用。 步骤:按F12或鼠标右键--点击检查,再点击控制台左上角的手机模式按钮即可。 使用方法 引入CSS和JavaScript脚本: <link rel="stylesheet" href="lazyPicker.min.css" /> <script src="lazyPicker.min.js"></script> 简单的表单(input)
5个月前
前端库
张颖 ,认真认真 于 5个月前发表 1038 0 0
REACT-ROUTER使用方式 react-router是专为React设计的路由解决方案,以react component的方式提供API,包含常用的Router,Route,IndexRedirect,Link,browserHistory等。react-router充分利用react component提供的生命周期特性,使定义路由和开发react component体验一致。 嵌套的路由表声明一份路径到各个component的映射表结构非常清晰: <Providerstore={store}><Routerhistory={browserHistory}><Routepath="/"component={AppSimple}><Routepath="/editor"component={Editor} /><IndexRedirectto="/proj" /></Route></Router></Provider> 而且支持多层嵌套
5个月前
前端库
ouven ,https://ouvens.github.io/ 于 5个月前发表 1115 0 0
原文链接: http://jixianqianduan.com/frontend-javascript/2016/11/22/front-end-auto-test.html [http://jixianqianduan.com/frontend-javascript/2016/11/22/front-end-auto-test.html] 前端测试一直是前端项目开发过程中机器重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高我们的开发效率,如果你的代码涉及的测试用例较多,而且项目需要长期维护,这时就可以考虑使用一下自动化测试了。 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块,评估运行结果。预设条件应包括正常条件和异常条件,以达到自动运行测试过程、减少或避免人工干预测试的目的。在前端自动化测试中,我们通常是通过不同的工具来解决不同场景下不同的问题的。就测试类型来看,主要分为BDD(Bebavior Driven Developement,行为驱动测试)和TDD(Testing Driven
5个月前
javascript技术
郭明慧 于 5个月前发表 854 0 0
最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fit和object-position。 这两个奇葩的属性是搞毛的呢?其实它们是为了处理替换元素(replaced elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。 等等,好像多了一个名词,啥叫替换元素?替换元素其实是: * 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。 *
5个月前
CSS/重构
lxy ,学无止境 于 5个月前发表 843 2 0
[http://7tszky.com1.z0.glb.clouddn.com/FqSr0oqb2NxKhp0DgUvcBXsSN3-v] 以上是实图展示需要用到的主要元素: 1、perspective:定义 3D 元素距视图的距 2、transform:允许我们对元素进行旋转、缩放、移动或倾斜 3、transform-style:规定如何在 3D 空间中呈现被嵌套的元素 4、transition:定义过渡开始、完成的时间、速度和类型 简述:.cube代表一个正方体,.cube里面的每一个div分别表示正方体的一个面,要想每个面都有图片,即在每个div里分别加上一个img。正方体的制作很简单,只需要先让6个面处于同一位置,然后再绕不同的轴旋转一定的角度和平移一定距离即可。下面一起看实操: div部分[http://7tszky.com1.z0.glb.clouddn.com/FgCeilBN40rl5iZZ3pCTkkB_BxHZ] css搭建舞台 [http://7tszky.com1.z0.glb.clouddn.com/FoLDkXZtDEX7bjukxv61smPgMBsY]
5个月前
CSS/重构
结一 于 5个月前发表 2712 1 0
按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。 首先一个网站落到PS中,都是图片或文字(附加对图片或文字进行相关处理),而对应到重构来说就是一个个元素,所以要做到还原设计稿,主要要解决下面这三个问题: * 元素大小 * 元素与元素之间的间距 * 元素在页面的位置 下面对上面问题一一详细展开 元素大小 先来说下元素大小的问题,对于图片类的来说我们就要获取图片在PS中的正确大小,这一般来说百分之八十都没什么问题,除了一些设计师进行过特殊处理加工各层叠加等效果的需要费点时间搞定;而对于文字来说,那就是文字大小了,但是还有个不能忽略的字体问题,同一个大小不同字体可能相差十万八千里。 总结起来就是两点:保证图片跟设计稿一样大小;保证字体大小及类型一致。 对于第一点为了准确性及效率,我们可以采用 Cutterman [http://www.cutterman.cn/zh] 这个PS插件;而第二点我们就得使用规范去约定,约定网站常规字体类型及大小 元素之间的间距
5个月前
CSS/重构
郭明慧 于 5个月前发表 862 0 1
相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: [http://7s1r1c.com1.z0.glb.clouddn.com/t_multi-columns.png] 对于前端攻城狮来说,这种分列布局,在以前虽然可以实现,可是难度却是不小,工作量很大,必须使用JavaScript对内容分段,再配合上绝对定位或浮动等CSS样式来实现多列布局。但现在,强大的CSS3为我们提供了“multi-column”,让我们可以很轻松的实现这样的分列布局。 先来看看与多列布局(multi-column)相关的css属性有哪些: * 列数和列宽:column-count、column-width、columns * 列的间距和分列样式:column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule * 跨越列:column-span * 填充列:column-fill
5个月前
CSS/重构