结一 于 5个月前发表 2480 1 0
按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。 首先一个网站落到PS中,都是图片或文字(附加对图片或文字进行相关处理),而对应到重构来说就是一个个元素,所以要做到还原设计稿,主要要解决下面这三个问题: * 元素大小 * 元素与元素之间的间距 * 元素在页面的位置 下面对上面问题一一详细展开 元素大小 先来说下元素大小的问题,对于图片类的来说我们就要获取图片在PS中的正确大小,这一般来说百分之八十都没什么问题,除了一些设计师进行过特殊处理加工各层叠加等效果的需要费点时间搞定;而对于文字来说,那就是文字大小了,但是还有个不能忽略的字体问题,同一个大小不同字体可能相差十万八千里。 总结起来就是两点:保证图片跟设计稿一样大小;保证字体大小及类型一致。 对于第一点为了准确性及效率,我们可以采用 Cutterman [http://www.cutterman.cn/zh] 这个PS插件;而第二点我们就得使用规范去约定,约定网站常规字体类型及大小 元素之间的间距
5个月前
CSS/重构
郭明慧 于 5个月前发表 727 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/重构
否子戈 于 5个月前发表 2625 0 0
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。 不把require和import整清楚,会在未来的标准编程中死的很难看。 REQUIRE时代的模块 node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,随后在浏览器端,requirejs和seajs之类的工具包也出现了,可以说在对应规范下,require统治了ES6之前的所有模块化编程,即使现在,在ES6 module被完全实现之前,还是这样。 node的module遵循CommonJS规范,requirejs遵循AMD,seajs遵循CMD,虽各有不同,但总之还是希望保持较为统一的代码风格。 // a.js// -------- node -----------module.exports = { a : function() {}, b : 'xxx'
5个月前
javascript技术
jaychen 于 5个月前发表 1279 0 0
[http://7tszky.com1.z0.glb.clouddn.com/Flx3rVQjMqZJtBsPdMtS1xGSCx-H] YARN( HTTPS://GITHUB.COM/YARNPKG/YARN [HTTPS://GITHUB.COM/YARNPKG/YARN] ) facebook发布的新一代包管理工具,旨在解决以往使用npm作为包管理会遇到的一些问题。从其官方介绍可以看到其重点强调的3个点:快、可靠、安全。 YARN拥有以下6个特性: * 离线模式: 一次安装,永久使用,无需下载 * 依赖确定性:安装依赖锁定,保证一致性 * 更好的网络性能:下载包,优化网络请求,最大限度提高网络利用率 * 多注册来源处理:不管依赖包被不同的库间接关联引用多少次,安装这个包时,只会从一个注册来源去装(npm/bower), 防止出现混乱不一致。 * 网络弹性处理: 安装依赖时,不会因为某个单次网络请求的失败导致整个安装挂掉。当请求失败时会进行自动重试。
5个月前
工具建设
link ,除了分享,也是知识管理。 于 5个月前发表 699 0 0
导语:写下这篇文章的缘由是因为在项目过程中,碰到了一个使用JavaScript处理 UINT64 类型数字的坑。 与大部分现代编程语言(包括几乎所有的脚本语言)一样,JavaScript中的数字类型是基于 IEEE 754 标准来实现的,该标准通常也被称为“浮点数”。JavaScript使用的是“双精度”格式(即64位二进制)。 较小的数值 不仅仅是JavaScript,所有遵循 IEEE 754 规范的语言都会碰到如下问题: 0.1 + 0.2 === 0.3; // false 从数学角度来说,上面的条件判断结果应该是true,可实际上却为false。 这是因为,二进制浮点数中的 0.1 和 0.2 并不是十分精确,它们相加的结果并非刚好等于 0.3 ,而是一个比较接近的数字 0.30000000000000004, 所以条件判断的结果为false。 那么该如何处理这种语言上的缺陷呢? 最常见的方法是设置一个误差范围,通常称为“机器精度”(machine epsilon),对JavaScript的数字类型来说,这个值通常是2^-52(2.220446049250313e-16)。
5个月前
nodeJS全栈
江源 ,非常让人头疼…… 于 5个月前发表 788 2 0
原文 [http://jiangyuan.me/blog/2016/11/01/vscode-autocomplete/] vscode 1.6.x 发布了,有一系列的新特性,我个人比较开心见到 ts/js 语法着色 [https://code.visualstudio.com/updates#_preview-typescript-javascript-grammar] 有提升,我还专门搞了个 issue [https://github.com/Microsoft/vscode/issues/12362] 吐槽过这个。 当然今天不是扯 vscode 的更新节奏很快的梗,而是扒一扒它的 自动完成 , 上一篇文章 [http://jiangyuan.me/blog/2016/09/24/vscode/] 已经介绍过, 自动完成 和 typings 紧密相关。 typings 官网 [https://github.com/typings/typings] 描述: The TypeScript Definition Manager.
5个月前
工具建设
结一 于 5个月前发表 906 0 0
听闻 w3cplus [http://www.w3cplus.com/] 大漠在第三届 CSS Conf [https://css.w3ctech.com/] 上的演讲主题是CSS Grid Layout,吓得我赶紧抛下红尘俗事闭门谢客苦心钻研,唯恐脚步太慢,遥望大漠一骑绝尘而扼腕叹息。 闲话少说,提起网格系统,大家都应该耳熟能详,如 960 [http://960.gs/] ,当然随着技术与分辨率的进步有了进一步的演变,但设计思想还是一致的。既然是这么实用的东西,CSS当然有了纳入规范之想,这不就出现了我们今天要说的CSS Grid Layout 网格系统浏览器支持 虽说IE10、11早就实现了网格布局,不过那已经是过时的了,新标准目前没有任何浏览器默认正规支持(chrome 54,firefox 49),都需要去手动设置开启: * chrome 在地址栏输入“chrome://flags”,找到"experimental web platform features"开启
5个月前
CSS/重构
陈映平 于 5个月前发表 616 0 1
引言 稍微了解HTTP协议的前端同学,相比对 Cache-Control 不会感到陌生,性能优化时经常都会跟它打交道。 常见的值有有 private 、 public 、 no-store 、 no-cache 、 must-revalidate 、 max-age 等。 各个取值所代表的含义,网上总结挺多的,这里就不打算再进行逐一介绍,感兴趣的可以一起探讨交流。 本文仅挑 no-cache 、 must-revalidate 这两个进行值进行探究对比。在项目实践中,这两个值用的比较多,也比较容易搞混。 Cache-Control: no-cache Cache-Control: max-age=60, must-revalidate 传送门: RFC2616关于Cache-Control首部的介绍 [https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9] 。 如果对论证过程不感兴趣,也可以直接跳到“对比结论”小节查看结论。 NO-CACHE、MUST-REVALIDATE简介
5个月前
HTTP网络
否子戈 于 5个月前发表 814 0 1
ES6真是颠覆JavaScript的东西,随便翻一个新特性出来,就让自以为是的老古董们傻眼跳楼。在之前接触ember.js的时候,接触到了yield,嫩是半天没明白,yield到底是什么,想要实现什么目的。后来在看ES6的东西的时候,总算好像知道了一点,迫不及待的写出来。 在MDN上,对yield的第一句解释就是: The yield keyword is used to pause and resume a generator function. // yield这个关键字是用来暂停和恢复一个遍历器函数(的运行)的。 这也就是yield的所有解释了,可谓大道至简,然并卵,深层的意思不去挖掘,根本还是没法用它,还是老老实实做老古董。 关键字YIELD 没错,yield是个关键字,不是函数。关键字用来干啥?它的作用是“命令”。和var不同,不是用来声明,但是和return一样,用来告知程序某种状态,return告诉程序要返回什么值(也意味着结束,结束的时候才会返回值嘛),而yield告诉程序当前的状态值,而且你运行到这里给我暂停一下。 因为yield是命令型的关键字,所以它的用法是:
5个月前
javascript技术
袁飞翔 于 5个月前发表 1255 0 0
最近入手了一台腾讯云机子,用于团队社区站点的建设,站点架构: * 数据库服务:mongodb * 后台:nodejs + express * 接入:nginx 整个购买到部署的要点步骤: * 服务器购买 * nginx 编译安装配置 * node 安装 * mongodb 安装 * server部署 服务器购买 [http://7tszky.com1.z0.glb.clouddn.com/FpEWgIEkwq6d8npb5jYe2p-SNWWH] 从腾讯云的首页找到购买入口。(弱弱的说一句,云太多了,企鹅云发展好快~~~) [http://7tszky.com1.z0.glb.clouddn.com/FuMQS85aImdMC7q0ZMZHynFSBWF0] 按需选择自己的配置,包年可以优惠只需付10个月。最终我们的配置 [http://7tszky.com1.z0.glb.clouddn.com/FgDwNLWJ2PbRT6xGTsFV5QoAd1WD]
5个月前
运营
link ,除了分享,也是知识管理。 于 6个月前发表 804 4 1
网络序?本地序?傻傻分不清楚。。。 这个问题源于最近做的一个项目,需要用Node.js进行socket网络编程,涉及到使用TCP/UDP通过自定义的二进制数据序列化协议与android/iOS客户端进行通信。 当协商通信协议时,对接的客户端同学告诉我在发送数据的时候要将要发送的Buffer从本地序转换为网络序,当收到客户端的回包时,需要将收到的Buffer从网络序转换为本地序。 作为一个前端工程师,听到上面那段话,我脑海中的画面是: 黑人问号 [http://img.blog.csdn.net/20161012111816743] 网络序?本地序?傻傻分不清楚啊! 于是我决定翻开下面这本书,来一探究竟: CSAPP [http://img.blog.csdn.net/20161012113307469] 什么是网络序和本地序? 所谓的网络序和本地序其实就是一个跨越多个字节的程序对象(在Node.js中可以简单的认为是一个长度大于1的Buffer对象)在存储器中的存储顺序,在了解这两种字节顺序之前,我们来复习一下计算机的寻址规则。 寻址
6个月前
nodeJS全栈
黄龙 于 6个月前发表 1277 1 0
WHISTLEJS https://github.com/avwo/whistle [https://github.com/avwo/whistle] whistle是用Node实现的类似Fiddler的web调试代理工具,支持查看和修改HTTP(S)、Websocket请求响应数据,且支持跨平台(Windows、Mac、Linux等可以安装Node的操作系统)。IMWEB团队avenwu作品。 第一步 安装 npm i -g whistle 第二步 启动 w2 run 第三步 配置浏览器代理 如果你使用SwitchyOmega就很容易了 * 新建情景模式 * 命名whistle * 代理协议 HTTP * 代理服务器: 127.0.0.1 * 代理端口: 8899 把浏览器代理切换到whistle就可以进入下一步了。 第四步 打开网页,开始配置 http://127.0.0.1:8899/#rules [http://127.0.0.1:8899/#rules]
6个月前
调试