shawndxl / animation.md

Last active July 22, 2016 12:37

Web 动画的几种方式

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

shawndxl / rpc.md

Created May 16, 2016 06:46

rpc、tcp、http、ws等传输协议

传输协议解析

RPC

TCP

HTTP

WebSocket

shawndxl / jsonp.md

Last active June 1, 2016 03:45

json、ajax、jsonp、src....

前后端的数据交换以及在 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 / css.md

Last active June 13, 2016 10:34

CSS 中的坑

[overflow]

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

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

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

shawndxl / js.md

Last active July 21, 2016 08:23

JS基本功

JS 基本功

Array 数组对象

MDN-数组

String 字符串对象

MDN-字符串

RegExp 正则表达式对象

shawndxl / cllection.md

Last active August 11, 2016 08:16

收集的链接

URL Collections

shawndxl / bezier.md

Last active April 22, 2016 13:10

贝塞尔曲线的实际应用

Use of Bezier Curve

shawndxl / mobile_touch.md

Last active April 22, 2016 13:08

详解 mobile touch 事件以及其中 zepto tap 事件点击穿透的解决办法

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

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

shawndxl / SVG.md

Last active December 22, 2020 23:54

用 CSS 来设置 SVG ( Style SVG using CSS ) & SVG 用法汇总

The SVG ！

先上链接

SVG 的几种用法

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

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

shawndxl / less loop.md

Last active November 19, 2018 13:36

用 LESS 写一个帧动画类型的函数 / LESS keyframes loop method

用 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