Omi

Open and modern framework for building user interfaces.


  • Omi 的 Github 地址 https://github.com/AlloyTeam/omi
  • 如果想体验一下 Omi 框架,可以访问 Omi Playground
  • 如果想使用 Omi 框架或者开发完善 Omi 框架,可以访问 Omi 使用文档
  • 如果你想获得更佳的阅读体验,可以访问 Docs Website
  • 如果你懒得搭建项目脚手架,可以试试 omi-cli
  • 如果你有 Omi 相关的问题可以 New issue
  • 如果想更加方便的交流关于 Omi 的一切可以加入 QQ 的 Omi 交流群 (256426170)

写在最前

我们都是前端工程师,无论你现在是页面仔,还是 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: 4,379
9

位置传感器

 

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: 2,463
2

手机上的环境传感器,一般包括气压传感器、温度传感器、湿度传感器、光传感器、声音传感器和距离传感器等。气压传感器能通过气压测量,判断手机当前位置的海拔高度,能提高 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: 30,419
10

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

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