shawndxl

用 LESS 写一个 可复用的 帧动画类型的 函数 / A css keyframes loop with LESS

For example , you have a css animation like this

/* CSS */
@keyframes demo {
	0% { background-image: url(../img/demo/1.png); }
	20% { background-image: url(../img/demo/2.png); }
	40% { background-image: url(../img/demo/3.png); }
	60% { background-image: url(../img/demo/4.png); }

shawndxl

The SVG ！

先上链接

• SVG 的几种用法详解及对比
• 已经 dead 的旧用法 - SMIL
• 新用法 - SMIL 的替换用法

SVG 的几种用法

An SVG can be embedded in any of the following ways:

1. as an image using the < img > tag:

shawndxl

移动应用上的点击穿透问题

• 说说touch事件与点击穿透问题

shawndxl

Use of Bezier Curve

• codepen-沿着贝塞尔曲线路径移动
• codepen-三阶贝塞尔曲线根据x得出f(x)
• 三级贝塞尔曲线在 canvas svg css 中的用法
• 三阶贝塞尔曲线的可视化效果工具--可用来得出自己想要曲线对应的两个参照点的坐标比例

shawndxl

URL Collections

• 查看网站的css系统
• Tiny Png
• Animate.css
• 合并图片生成动画
• Falsh转换H5动画
• SVG demos
• 浏览器知道你的哪些信息
• 配色
• 20张Cheat Sheet

shawndxl

JS 基本功

Array 数组对象

• MDN-数组

String 字符串对象

• MDN-字符串

RegExp 正则表达式对象

shawndxl

CSS 中的坑

[overflow]

1）重构页面导致的 “ 卡顿 ”

.element {
  background: url(../img/demo.png);
  overflow-y: auto; /* 加入在手机端，这个页面比较长，当上下滑动重构 body 的 img 背景时，会造成加载不到上方或下方 body 的 img 背景，用起来感觉卡卡的，去掉该属性后正常 */
}

2）把元素 “ 挤 ” 走了 （iphone 测试）

shawndxl

前后端的数据交换 以及在 Node \ PHP 中的异同

客户端、服务器的含义。

不过这里对某些前端工程师理解起来有个坑，比如像我，什么叫客户端，什么叫服务器呢？其实他们是放在一起的一堆文件，可能只是在不同的文件夹中，所谓的客户端，就是打开浏览器能够访问的文件，所谓服务器端就是打开浏览器无法直接观看的文件，需要通过前端文件请求调用才可以感知到的文件，所以从客户端像服务器请求的过程，可以理解为从自己的index.html的文件，像php/data.php发送数据的过程，而data的php跟index的php其实就是邻居，只不过打开浏览器之后，html文件，以及html引用到的css、js文件被加载到了浏览器上，而php文件依然留在原来的位置上（也就是你的文件运行的本地服务器或者网络服务器上），但这两者依然是邻居，理解这个邻居的概念很关键，因为他可以帮助理解下一步的jsonp，即当你想要请求的php或者node等服务器文件跟你的前端文件不是邻居时，应该怎么办。回到ajax，ajax的技术其实就是邻居之间传递数据的，比如index.html中引用的index.js，需要请求数据，那么则是这样。

php 赋值

这种方式在我理解根本不牵涉到什么前后端数据交换，因为本来这个页面打开就是.php的后缀，html内容只不过是在这个php页面中嵌套的一部分，页面本身是按照php渲染的，自然能够解析变量到各个 echo 中。这种情况只存在php中，其他后端语音比如Node肯定没办法这么干。

<!-- to element -->

shawndxl

传输协议解析

RPC

TCP

HTTP

WebSocket

shawndxl

Web 动画的几种方式

• CSS animation
• 合并图片切换background-position
• 切换background-image的LESS函数模板
• CSS transition
• Jquery API
• JS - setTimeout\setInterval
• JS - requestAnimationFrame
• SVG