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]

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

6月记

Author : lovecicy

2015年的6月,忙碌,结婚、换工作、生水痘……所有的事情都碰到一起了,感觉这短短的20来天,生活进入了永夜,仿佛开车置身无尽的戈壁滩,你不能停下车来,两边一样的风景一直在重复,一直开,却开不到戈壁的尽头。如果这样的日子一直下去,我觉得人会绝望的,所以也许这也就是为什么我们会有春节这样的节日:在忙碌了365个日子以后,不管是多么的忙碌,劳累,昏天暗地,孤独,伤心,我们会背起行囊,坐上火车,经历几十个小时的站立,回到那个破旧,落后的老家,在那里,我们可以放下这些烦心事,去开心地享受空闲,去感受有人陪伴的简单的快乐,给每个人一些喘息的机会,停下来思考,去总结,去下定决心,去重新开始下一个365天。即使这过去的365天是无尽的忙碌,不停的遭难,这个喘息的机会,给了我们时间去重拾希望,去结束这糟糕的过去,去开启新的、未知的下一个循环。 说回这个6月换工作的事,其实这件事拖了很久,断断续续得一直在找机会,终于找到一个不错的机会,可以进入大公司学习,感受下大公司的节奏,或者去感受创业公司的拼搏精神,梦想我们能创造下一个阿里巴巴。但是这个过程从面试到入职,经历了两个多月。在出差前得知拿到offer,[Read More]

standard