写在最前

我们都是前端工程师,无论你现在是页面仔,还是Node服务开发者,抑或是全端大神,毋庸置疑的是,我们都是前端工程师,我们生来就对追求页面的极致拥有敏锐的触觉,无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现,都是我们孜孜不倦的追求目标。即使这些在别人眼里,只是跟其他的页面一样没什么不同,但我们却能为其中那只有我们才知道的一抹别致而窃喜。

而今天我要讲的,就是我们最熟悉的老朋友,CSS。不讲枯燥的语法,抛开js,让我们一起来看业务中那别致的纯CSS实现,让我们一起来追求那更好的页面实现,希望我带着你走完这段旅程后,你能收获一些惊喜甚至灵感。

为什么尝试使用Canvas绘制列表?使用canvas绘制列表的好处在于页面只有一个dom元素,这样对于大量dom元素组成的列表来说,无疑更节省页面内存。

本文将一步一步分析,如何实现一个canvas绘制的长列表。

 

Step1:dom节点映射

首先考虑一个问题,对于我们在页面中常见的dom结点,在Canvas中如何表示?

因此我们的第一步工作就是实现dom结点到Canvas绘制对象的映射

TAT.sheran 手机上的位置传感器
In HTML5,移动 Web 开发 on 2015年08月31日 by view: 2,167
7

位置传感器

 

1 GPS与基站定位

位置传感器通常主要指手机内部的Global Positioning System (GPS)模块,GPS又称全球卫星定位系统,该系统包括太空中的24颗GPS卫星;地面上1个主控站、3个数据注入站和5个监测站及作为用户端的GPS接收机。最少只需其中3颗卫星,就能迅速确定用户端在地球上所处的位置及海拔高度;所能收联接到的卫星数越多,解码出来的位置就越精确。

获取位置信息,核心在于获取经纬度坐标,继而在手机地图中标注出自身坐标,从而确定当前所处的位置。目前手机定位的方式有两种,一种是基于GPS的定位,一种是基于移动运营网的基站的定位。基于GPS的定位方式是利用手机上的GPS定位模块将自己的位置信号发送到定位后台来实现手机定位的。基站定位则是利用基站对手机的距离的测算距离来确定手机位置的。后者不需要手机具有GPS定位能力,但是精度很大程度依赖于基站的分布及覆盖范围的大小,有时误差会超过一公里。前者定位精度较高。

Angular2开发者预览版出来已有一段时间,这个以速度与移动性能为目的的框架到底如何,今天我们来尝试一下。

在官网有一段号称5分钟入门的教程:

quick start: https://angular.io/docs/js/latest/quickstart.html

TAT.sheran 手机上的环境传感器
In HTML5,移动 Web 开发 on 2015年06月29日 by view: 1,249
1

手机上的环境传感器,一般包括气压传感器、温度传感器、湿度传感器、光传感器、声音传感器和距离传感器等。气压传感器能通过气压测量,判断手机当前位置的海拔高度,能提高GPS定位的精度,在三星Galaxy Nexus上有配备;温度传感器一方面用来测量气温,判断当前环境是否舒适,一方面也能监测手机内部温度是否异常;而比较普遍的是光传感器和距离传感器,对智能手机来说几乎是标配,并且一般设计位于手机正面上方听筒附近位置。

前言

随着Web前端开发由PC转向Mobile,作为前端工程师,除了需要去学习掌握移动端的新特性外,还需要面对大量移动端特有的难题,其中之一就是——怎么调试移动端页面? 针对调试的问题,现在已经有一些很好的解决方案,比如:weinre、chrome remote、手Q浏览器Inspector,不过这些方案的门槛都较高,需要满足一些额外的条件。目前,在日常的开发调试工作中,打日志依然是一种常见的调试手段,通过日志内容来判断当前页面运行的状态,而日志的输出形式又有很多种,有img请求、dialog弹窗、alert等等,但这些输出方式都不能很好的满足我们的需要,甚至存在一些问题,所以Rosin诞生了。

关于Rosin

Rosin 是一个Fiddler插件,它能接收页面中的console的输出,将内容持久存储在本地,并展现在Fiddler面板。 如果你的项目是通过Fiddler代理来开发调试手机页面,那么Rosin将会是你的好帮手。
项目地址:  http://alloyteam.github.io/Rosin/

QQ截图20140214151148

快速的移动Web开发模式,是我们团队一直在探索的一项内容。今天给大家介绍一种高效的开发方式,在开始内容前,我们先了解与分析一下目前主流开发模式的现状(本文聚焦响应式Web开发,这里主要指页面重构的工作)。

移动Web开发是一块新的领域,给Web带来更多机会的同时,也带来了更多的挑战。为了让开发者在移动Web的道路上走得更加顺畅,开发更加高效,Spirit(勇气号)由此而生。

Spirit 官网:http://alloyteam.github.io/Spirit/

 QQ20140210113520

TAT.Minren 响应式设计
In CSS3,HTML5,Web开发,移动 Web 开发 on 2014年01月23日 by view: 26,810
8

网上的教程好复杂,我写一个简版的。

简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放2个Div。
到了手机上,或者Pad竖着拿的的时候,一行就只放1个Div。
这里有2个关键点:
一是如何在不修改Dom结构的前提下调整布局。
二是如何判断屏幕分辨率并应用对应的CSS。
以上两点都应该不依赖与JS。

原文:http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

作者:Addy Osmani

译者按:在突如其来的移动热潮下,web开发者似乎回到了早期兼容或hack各种浏览器的暗黑时代。唯一不同的是,现在不是兼容浏览器而是兼容设备,这比起在同一台PC上兼容不同浏览器要痛苦得多,另外由于终端尺寸的差异,涉及的兼容性问题会显得更加复杂。因此,跨终端的同步化测试工具是急切需要的,这意味着工作效率的成倍提升!感谢Addy大神的文章,给出了这个领域的多个选择,希望对大家有所帮助,遇到问题可以微博交流(@碧青_Kwok)~最后,与往常一样,转载请注明出处: )