TAT.dnt 使用 pasition 制作酷炫Path过渡动画
In HTML5,Web开发 on 2017年07月03日 by view: 1,996
1

pv
pv

pasition

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

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

一.前言

当我们选择使用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。

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

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

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

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

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

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

 

Step1:dom节点映射

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

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

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

位置传感器

 

1 GPS与基站定位

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

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

TAT.vorshen Canvas画椭圆的方法
In HTML5 on 2015年07月26日 by view: 2,690
2

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

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

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

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

TAT.tennylv 移动web问题小结
In CSS3,HTML5,Web开发,经验心得 on 2015年06月14日 by view: 22,219
28

Meta标签:

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

对于传统的页面模型来说,数据的拉取+渲染模型如下:

1

在页面的head部分,使用jsonp预拉取cgi资源,然后在资源加载完成之后,检查预拉取的数据是否已经返回,如果已返回,则直接用该数据渲染(避免了先用缓存数据渲染再用cgi数据渲染导致的二次刷新),否则才用缓存数据渲染。

TAT.sheran 浅谈flexbox的弹性盒子布局
In CSS3,HTML5 on 2015年05月19日 by view: 9,136
17

     flexbox是一个新的盒子模型,当你给一个元素使用了flexbox模块,那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方,下面就着重讲述一下它的一些使用场景:

 

Example 1: flexbox等分布局

 

      如果你要实现以下所示的样式,你可能首先想到的是用float:

 

         图片1