理解资源的时间线（ChromeDevTool）

Author : lovecicy

实在是好久没有来写博客了，懒了，对技术的追求热情减弱了，也因为最近一直提不起精神来。夜深人静，就想一个人静静，不想发呆，想找点事情做做，别让脑袋闲下来，就找了篇ChromeDevTool的文档翻译一下吧。 如果英文好，可以直接访问这里 理解资源在网络中被收集的各个阶段是非常重要的。这是解决加载问题的基础。 所有的网络请求都被当做资源。当它们从网络上被获取到的时候开始，资源就有了各自的生命周期，我们把这个生命周期叫做资源的时间线。网络面板使用的是与提供给应用开发者相同的资源时间线API。 资源时间线API提供了关于每个资源被接收到的时间线的丰富细节。请求声明周期的主要阶段有： 重定向 立即开始startTime时刻 重定向发生的时候，redirectStart时刻也立即发生 如果重定向发生在这个阶段的最后，那么redirectEnd时刻将会发生 App Cache 如果应用缓存填充了请求，那么fetchStart时刻会发生 DNS domainLookupStart时刻会在DNS请求开始时发生 domainLookupEnd时刻会在DNS请求结束时发生 TCP 初始化服务器连接时，会发生[Read More]

没有评论
standard

H5图片上传应用开发中的那些坑……

Author : lovecicy

图片上传是web应用开发中非常常见的功能，在桌面应用开发中，我们有很多插件，比如jQuery File Upload、uploadify，但是在移动端，jQuery太重，而且我们又有许多HTML5的API可以使用，所以，在新的项目里，选择了使用HTML5的file API来实现图片上传的功能。但是，坑也不少啊/(ㄒoㄒ)/~~ 1. 项目介绍 项目中需要上传图片，作为头像或者作为文章的图片。因为没有使用jQuery，也没有使用zepto，而且使用场景只是在移动端，因此选择了不使用插件，使用HTML5的file API。 2. 使用方法 file API的使用方法很简单，可以拆解为以下几步： 在HTML中添加一个input组件，type类型设置为file。 监听input的change事件。 在事件处理函数中，用FileReader api读取图片内容。 监听FileReader对象的onloadend事件，当读取文件完成时，上传图片。 3. 坑们 1. ios下alert弹框会挂 在选择图片后，首先判断图片的类型是否在限定的类型内、图片大小是否超出限定大小，如果超出，则弹出弹框提示用户[Read More]

没有评论
standard

CSS中的百分比值

Author : lovecicy

一、介绍 CSS中有很多的属性可以有百分比值，而这些百分比值所相对的却各不相同，本文就来总结下这些拥有百分比值的CSS属性的百分比值是相对于谁来计算的。 首先有一个概念需要交待，那就是containing block，这里将其翻译成包围块。许多元素百分比值的相对值是根据包围块来计算的，因此对于包围块的定义，就非常重要了。包围块可以理解为一个包围元素的长方形，而包围块的定义对不同元素来说各不相同。 根元素的包围块叫做初始包围块，和viewport有同样的尺寸。其他元素的包围块取决于元素的定位值： static/relative: 包围块为祖先元素中最近的display值为block/inline-block/list-item/run-in/table/table-cell的元素的内容区域 absolute: 包围块为节点树中最近的定位元素的包括padding的内容区域，定位元素即POSITION属性值为absolute、fixed或relative的元素 fixed: 包围块为viewport，即可视区域 二、来看看都有哪些百分比值 知道了包围块的定义，我们再来看看哪些属性有百分比值：[Read More]

2条评论
standard

简单

Author : luckyGirl

出自三毛《送你一匹马》     许多时候，我们早已不去回想，当每一个人来到地球上时，只是一个赤裸的婴儿，除了躯体和灵魂，上苍没有让人类带来什么身外之物。    等到有一天，人去了，去的仍是来的样子，空空如也。这只是样子而已。事实上，死去的人，在世上总也留下了一些东西，有形的，无形的，充斥着这本来已是拥挤的空间。    曾几何时，我们不再是婴儿，那份记忆也遥远得如同前生。回首看一看，我们普普通通地活了半生，周围已引出了多少牵绊，伸手所及，又有多少带不去的东西成了生活的一部分，缺了它们，日子便不完整。 一个生命，不止是有太阳、空气、水便能安然的生存，那只是最基本的。求生的欲望其实单纯，可是我们是人类，是一种贪得无厌的生物，在解决了饥饿之后，我们要求精神的提升，我们追求幸福、快乐、和谐、富有、健康，甚而永生。 最初的人类如同地球上漫游野地的其他动物，在大自然的环境里辛苦挣扎，只求存活。而后因为自然现象的发展，使他们组成了部落，成立了家庭。多少万年之后，国与国之间划清了界限，民与民之间，忘了彼此只不过是人类。 邻居和自己之间，筑起了高墙，我们居住在他人看不见的屋顶和墙内，才感到安全自在。 人又[Read More]

没有评论
standard

浅谈 cookie, sessionStorage和localStorage

Author : luckyGirl

HTML5刚出来时，把HTML5的特性翻了一遍，日子一久，不用几乎都忘光了， 最近项目中跟后台在讨论数据本地存储的问题，想到了除了cookie还有这个HTML5的新特性 — Web Storage，Web Storage又分为sessionStorage和localStorage。接下来来探探这三种的区别与用法。 一. 三者的优劣势 cookie： 优势：所有浏览器都支持，同源但不同目录下也可共享 劣势：同源的http请求都会携带cookie，即使不需要，增加了流量；个数有限制、存储数据比较小，对于这个限制各浏览器稍有不同，一般是50个，大小在4k以内 Web Storage： 优势：存储大小比起cookie大很多，一般限制是5M-10M；App可以在线或离线情况下使用；没有额外的请求头部数据；API简单易用； 劣势：数据以字符串格式存储，其他类型的对象需要在存储前转义使用时再编译；复杂数据集合存储时间可能很慢；存在浏览器兼容性问题，尤其IE只有IE8+才支持。 但两者还存在着共同的安全性问题，如关键攻击载体的CSRF，XSS，Session Hijacking等，因此一些[Read More]

一条评论
standard

Mobile Web开发奇淫巧计

Author : luckyGirl

做了一段时间的Mobile Web开发，遇到一些坑，总结一下： HTML <meta> HTML5 开发一个页面适配所有设备，先从配置<meta>各种标签属性开始。 viewport: 对文档的视图进行配置，示例有强制文档宽度为设备宽度；初始化缩放比例是1:1；最大缩放比例是1；不允许用户进行屏幕缩放；其他属性如minimum-scale，height等 apple-mobile-web-app-capable：IOS特有标签，是否允许全屏模式浏览 apple-mobile-web-app-status-bar-style：Safari顶端状态条颜色 format-detetion：格式检测，是否把数字识别为电话号码，是否识别邮箱 http-equiv=”x-dns-prefetch-control”：DNS Prefetch 是一种DNS预解析技术，对网页中的域名进行解析缓存，减少用户等待时间，提高用户体验  CSS 1px边框 由于Retina屏幕的出现，设置1px的边框，实际上却显示2px，有时就会略显粗壮，用JS可以进行处理，但兼[Read More]

没有评论
standard

《从0到1》摘录

Author : luckyGirl

前言 商业世界的每一刻都不会重演。 创新的行为是独一无二的，创新发生的瞬间也是独一无二的，结果新奇的事物诞生了。 如果不在艰难的创新上进行投资，不管现在有多挣钱，将来都会以失败而告终。 成功人士总能在意想不到的地方发现价值。   第1章 未来的挑战 在什么重要问题上你与其他人有不同的看法？ — 大部分人认为时间的未来由全球化决定，但事实是科技更有影响力。 未来是美好的，但这种美好不会自己到来。 如果舍弃团体，一个孤独的天才可能创造出经典的文学艺术作品，却不能创造出整个产业。初创公司需要和其他人合作来完成工作，但也需要控制规模，使组织有效运转。从积极角度上，一个初创公司就是说服一群人，一起规划并铸就新的未来。新公司最终于的力量是新思想，新思想甚至比灵活性更重要，而规模小才有思考空间。质疑现有观念，从零开始重新审视自己所从事的业务。   第2章 像1999年那样狂欢 尼采：“个人发生精神错乱很少见，但对群体、政党、国家、时代而言，精神错乱却很普遍。” 商业思想： 1. 循序渐进                    –VS–      大胆尝试胜过平庸保[Read More]

一条评论
standard

Sticky定位

Author : lovecicy

先来看个例子，在Safari或者火狐下打开哦： See the Pen CSS Sticky headers by YuC (@yuuuuc) on CodePen. 或者再看个例子：HTML5Rocks 先来解释下sticky定位的作用是什么：当用户滚动到某一位置时，某个元素就固定在页面上了。 这样的场景非常常见，比如iOS或者安卓的联系人，当你滚动时，对应的字母总在最顶端，当下一个字母上来时，会将前一个字母顶上去；或者BootStrap的文档页面，初始状态下，右边的菜单会随页面滚动而滚动，但是当菜单顶部滚动到页面顶部时，再往下滚，菜单就固定在页面顶部了。 通常(现在)，我们的做法是使用js来监听用户的滚动事件，当滚动到某一高度，就将特定的元素设置为position:fixed。类似下面的做法： 这样的做法非常简单，但是如果你要对非常多的元素进行这样的操作，那将会是灾难性的。 为什么JS的做法不够好呢？ Something else to consider is that more and more browsers are implementing hardware acceler[Read More]

没有评论
standard

浅谈 PhoneGap

Author : luckyGirl

目前，混合应用 (Hybird App) 风生水起，一说到Hybird App最常被提起的应该就是PhoneGap了吧。PhoneGap是用基于HTML, CSS, Javascript来创建移动跨平台应用的开发平台，拥有丰富的插件，便于app使用智能手机的核心功能。而Cordova是贡献给Apache后免费开源项目是从PhoneGap中抽出的核心代码是驱动PhoneGap的核心引擎。 一、Cordova简介 Cordova适用于单个页面的应用程序(SPA)，即取代页面跳转，而是运行时请求一个web页面，加载初始资源(HTML, CSS, Javascript)，并通过ajax为页面更新。优势： 一套代码可跨多个平台，无需重新实现与每个平台的语言和工具集 拥有多种插件，便于web视图访问手机设备级API，如条码扫描器、NFC通信，麦克风等，如仍不能满足需要可按照Cordova插件结构自行开发 有许多前端库，方便开发，更加美观，如 AngularJS Ionic EmberJS Backbone Kendo UI Monaca ReactJS Sencha Touch jQuery Mo[Read More]

没有评论
standard

防止IOS将数字识别成电话号码

Author : lovecicy

最近在用ionic做一个HTML5的应用，碰到一个问题，就是ios会将数字自动识别成电话号码，被识别的数字会被一个a标签嵌套，字体是黑色的，点击还能呼出电话功能。 可是这样的行为并不是我们期待的，怎么防止这个默认行为呢？只要在html的头部添加这个meta即可： 这样，ios就不会将数字自动检测为电话了。 PS. 顺便吐槽下ionic的文档，组织的太烂了。 参考: ionic forum

没有评论
standard