背景

需求预沟通

  • 产品:我们需要做一个 IM,和微信一样
  • 我:打扰了,走错片场了,你们继续,,,,,,,
  • ....
  • 我:这个需求虽然不合理,但是我还是接了。。。。。。
TAT.dnt Omi 拥抱 60FPS 的 Web 动画
In 未分类 on 2018年11月07日 by view: 3,540
0

写在前面

Omi 框架 正式发布了 → omi-transform

Made css3 transform super easy. Made 60 FPS easy.

作为 Omi 组件化开发特效运动解决方案,让你轻松在 Omi 项目里快速简便支持 CSS3 Transform 设置。css3transform 是经受过海量项目洗礼的,作为移动 Web 特效解决方案,在微信、手 Q 兴趣部落、日迹、QQ 群、QQ 附近等项目中广泛使用,以激进的修改 DOM 属性为代价,带来极为便利的可编程性。

你可以通过 css3transform 官方首页快速了解它。

TAT.dnt 使用 pasition 制作酷炫 Path 过渡动画
In 未分类 on 2017年07月03日 by view: 3,626
1

pv
pv

pasition

Pasition - Path Transition with little JS code, render to anywhere - 超小尺寸的 Path 过渡动画类库

最近和贝塞尔曲线杠上了,如 curvejspasition 都是贝塞尔曲线的应用案例,未来还有一款和贝塞尔曲线相关的开源的东西,暂时保密。

TAT.rocket 从零开始 React 服务器渲染
In 未分类 on 2017年01月13日 by view: 25,965
3

一. 前言

当我们选择使用 Node+React 的技术栈开发 Web 时,React 提供了一种优雅的方式实现服务器渲染。使用 React 实现服务器渲染有以下好处

        1. 利于 SEO:React 服务器渲染的方案使你的页面在一开始就有一个 HTML DOM 结构,方便 Google 等搜索引擎的爬虫能爬到网页的内容。

        2. 提高首屏渲染的速度:服务器直接返回一个填满数据的 HTML,而不是在请求了 HTML 后还需要异步请求首屏数据。

        3. 前后端都可以使用 js

二. 神奇的 renderToString 和 renderToStaticMarkup

有两个神奇的 React API 都可以实现 React 服务器渲染:renderToStringrenderToStaticMarkup。renderToString 和 renderToStaticMarkup 的主要作用都是将 React Component 转化为 HTML 的字符串。这两个函数都属于 react-dom(react-dom/server) 包,都接受一个 React Component 参数,返回一个 String。

也许你会奇怪为什么会有两个用于服务器渲染的函数,其实这两个函数是有区别的:

TAT.Johnny 不能说的秘密——前端也能玩的图片隐写术
In 未分类 on 2016年03月24日 by view: 36,645
29

上个月在千里码刷题的时候,碰到了比较有意思的一道题—— 隐写术。既然感觉有意思,又很久没有玩过 canvas,所以今天结合这两块内容带大家探索一下。

隐写术算是一种加密技术,权威的 wiki 说法是“ 隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。” 这看似高大上的定义,并不是近代新诞生的技术,早在 13 世纪末德国人 Trithemius 就写出了《隐写术》的著作,学过密码学的同学可能知道。好了,说了这么多,隐写术到底是什么技术,让我们看一个例子。

下面是一张看似普通的图片,但其中却藏有另一个肉眼无法识别的图像哦。

TAT.Cson Canvas 绘制列表的尝试
In 未分类 on 2015年10月30日 by view: 6,131
6

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

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

 

Step1:dom 节点映射

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

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

TAT.sheran 手机上的位置传感器
In 未分类 on 2015年08月31日 by view: 4,359
9

位置传感器

 

1 GPS 与基站定位

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

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

TAT.vorshen Canvas 画椭圆的方法
In 未分类 on 2015年07月26日 by view: 4,673
2

虽然标题是画椭圆,但是我们先来说说 Canvas 中的圆

相信大家对于 Canvas 画圆都不陌生

TAT.sheran 手机上的环境传感器
In 未分类 on 2015年06月29日 by view: 2,437
2

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

TAT.tennylv 移动 web 问题小结
In 未分类 on 2015年06月14日 by view: 26,510
29

Meta 标签:

这个想必大家都知道,当页面在手机上显示时,增加这个 meta 可以让页面强制让文档的宽度与设备的宽度保持 1:1,并且文档最大的宽度比例是 1.0,且不允许用户点击屏幕放大浏览。