通过前面教程的学习，我们可以在Canvas中轻易绘制路径（线段）。这仅仅是Canvas中的一小部分，今天我们来看看在Canvas中怎么绘制矩形。绘制矩形的方法在Canvas中提供了绘制矩形的API：fillRect(x, y, width, height)：绘制一个填充的矩形strokeRect(x, y, width, height)：绘制一个矩形的边框clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明除此之外还可以通过Canvas中CanvasRenderingContext2D.rect()路径方法创建矩形。这个方法需要配合CanvasRenderingContext2D.fill()绘制一个填充的矩形，CanvasRenderingContext2D.stroke()绘制一个填充的矩形。另外，还可以直接使用Canvas的绘制路径的方法来绘制矩形。那我们来先看看怎么使用路径绘制矩形。路径绘制矩形记得在学习绘制线段的时候，我们知道moveTo()和lineTo()可以绘制线段，如此一来，四条线就能拼出一个矩形，然后通过fill()和stroke()绘制出填充和边框矩形。function drawScreen () { ctx.strokeStyle = '#00'; ctx.fillStyle = '#9f9' ...继续阅读 (24)

本来今天想开始学习怎么在Canvas中绘制矩形。但昨天发朋友圈，聊到Canvas。有网友提醒我将所有绘制的东西放在ctx.save()和ctx.restore()，能起到保存绘制状态和防止污染状态栈。养成一个良好的习惯。此时一脸蒙逼！因为我并不知道这两个东东是什么意思，怎么使用？后来翻了书，也只是提到了在Canvas中有save()和restore()两个方法，它们都是属于Canvas中CanvasRenderingContext2D中与状态操作有关的两个方法。并没有详细的介绍，对于初学者的我而言，也是一知半解。下面的内容记录了我对save()和restore()两个方法的一些理解。Canvas 状态的保存和恢复Canvas的API提供了两个名叫save()和restore()的方法，用于保存及恢复当前Canvas绘图环境的所有属性。其中save()可以保存当前状态，而restore()可以还原之前保存的状态。这两个方法再绘图中有着重要的作用，比如我们在绘图的时候需要使用多种颜色，颜色需要不时的切换。那么使用save()和restore()方法即可比较方便的实现此功能。理解save()和restore()对于save()和restore()方法，一开始有一个错误的理解，以为每一步都save()之后restore()就等同于command + z（或者ctrl + z），其实save ...继续阅读 (27)

在绘制线段一文中，了解到如何在Canvas中绘制线段。虽然使用Canvas中API可以很轻松的绘制出线段，但里面还是有不少的细节需要了解。这篇文章咱们就来了解线段中的线型。Canvas中的线型主要包括线宽、线段端点和线段连接点三个部分。那么咱们先来了解线宽。线宽通过前面的示例，我们不难发现，在Canvas中通过lineWidth属性来定义线段的粗细。我们可以给其明确指定一个value值，在没有显式设置lineWidth的值时，为以默认值1来确定线段的粗细。那什么叫线宽呢？在Canvas中，线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。想要获得精确的线条，必须对线条是如何绘制出来的有所理解。比如下图，用网格来代表canvas的坐标格，每一格对应屏幕上一个像素点。在左侧图中，填充了(2,1)至5,5的矩形，整个区域的边界刚好落在像素边缘上，这样得到的矩形有着清晰的边缘。如果你想要绘制一条从(3,1)至(3,5)，宽度是1.0的线条，就会得到下图中间图一样的结果。实际填充区域（深蓝色部分）仅仅延伸至路径两旁各一半像素，而这半个像素以会以近似的方式进行渲染，这意味着那些像素只是部分着色，结果就是以实际笔触颜色一半色调的颜色来填充整个区域（浅蓝和深蓝的部分）。这就是上例中为何宽度为 ...继续阅读 (25)

上一节中，使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线（线段）。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇，那么要在Canvas中绘制虚线和圆点线又要怎么绘制，在Canvas有没有类似的API能直接绘制呢？其实我也很好奇，看了一些资料，要像绘制实线那样简单或者直接，相对来说是没有的，但不用担心，通过其他的方法也是可以实现的。因为JavaScript是一门万能的语言，那么接下来的内容，就来看看如何在Canvas中绘制虚线和圆点线。绘制虚线在MDN上，我查到一个叫CanvasRenderingContext2D.setLineDash()的API。官方介绍：CanvasRenderingContext2D.setLineDash()是 Canvas 2D API 设置虚线样式的方法。使用方式很简单：ctx.setLineDash(segments);其接受一个参数segments，这个参数是一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制并重复。例如，[5,15,25]会变成[5,15,25,5,15,25]。言外之意，在Canvas中，可以使用setLineDash方法来绘制虚线。既然有这样的方法，那还等什么呢？动手吧。function drawSc ...继续阅读 (29)

在上一篇介绍Canvas坐标系统的结尾处，我们使用了Canvavs绘制了一个网格。整个效果是由直线和文本构成。在这一节中，我们来看看如何使用Canvas绘制线段。在Canvas中，线段也是路径中的一种，被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。先画一条简单的直线Canvas画一下直线非常的容易。众所周之，两点就能构成一条直线。使用两个API就可以：moveTo()告诉你把画笔移到Canvas画布中的某个位置（直线的起点），然后通过lineTo()把画笔移到另一个点。从而两个点构成一条直线。function drawScreen () { ctx.moveTo(50, 10); ctx.lineTo(350, 100); }但这样在画布看不到任何的线条。如果需要看到效果，还需要使用stroke()方法：function drawScreen () { ctx.moveTo(50, 10); ctx.lineTo(350, 100); ctx.stroke(); }是不是很简单，通过这三个方法就可以绘制出一条线段。moveTo(x,y)：移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点。该方法并不会从当前路径中清除任何子路径lineTo(x,y)：使 ...继续阅读 (31)

上一节我们做好了使用Canvas的准备工作，但并没有深入的介绍如何使用Canvas，比如怎么绘制图形，怎么做Canvas动画等。但并不用着急，随着我们后面的深入学习，这一切都会知道的。在深入学习之前，我们有必要先了解Canvas里的坐标系统。那么这一节，就先来了解Canvas的坐标系统。笛卡坐标系在数学里，我们学过一种坐标系统，叫作笛卡坐标系（Cartesian Coordinate system），这个坐标系统也称为直角坐标系，是一种正交坐标系。二维的直角坐标系是由两条相互垂直、0点重合的数轴构成的。在平面内，任何一点的坐标是根据数轴上对应的点的坐标设定的。在平面内，任何一点与坐标的对应关系，类似于数轴上点与坐标的对应关系。有关于笛卡坐标系详细介绍可以在维基百科中了解。可能你对笛卡坐标系有了一定的了解，咱们在此基础上来看一个简单的示例，比如下图：你可以看到，每个点都有一双与之关联的值。这些被称为坐标点，通常表示为(x,y)。x位于水平轴上，y位于垂直轴上。其中(0,0)点是坐标原点。x轴从原点向右方向为正值，反之为负值，y轴从原点向上为正值，反之为负值。正如上图所示，(2,3)表示x = 2，y=3。我们从坐标原点，沿x轴向右2格位置处画一条与y轴平行的线；另外沿y轴向上3格位置处画一条与x轴平行的线。这两条线交汇处就是(2, 3)的坐标点。是不是很好理解。Web中的坐标系统上面 ...继续阅读 (21)

由于工作的需要，最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处，还请大婶们多多指正。今天这篇文章是学习canvas的一些准备工作。canvas元素也是HTML中的一个元素，可以给这个元素添加一些HTML属性，比如使用width和height来控制其大小，也可以通过style给它设置一些基本样式。同样也可以它添加id名，在JavaScript中能更好的操作它。在Web页面中添加一个canvas很容易，只需要在标签内添加一个标签就行，如下:Your browser does not support HTML5 Canvas.上面的示例中，在中添加一行文本，主要是用于不支持canvas的浏览器，如果浏览器不支持，就会显示这行文本。上面这种方法是比较简单的方法，当然也可以通过JavaScript的document.createElement('canvas')创建一个，并且使用document.body.appendChild(canvas)把创建的canvas插入到body中：(function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.id = 'myC ...继续阅读 (32)

本文转载@晚晴幽草轩轩主的《你所不知道的setInterval》，如需转载，烦请注明原文出处：http://www.jeffjade.com/2016/01/10/2016-01-10-javaScript-setInterval/。在《你所不知道的setTimeout()》记载了setTimeout()相关,此篇则整理了下setInterval()；作为拥有广泛应用场景(定时器，轮播图，动画效果，自动滚动等等)，而又充满各种不确定性的这setInterval()，自当先洞悉它，才能很好的驾驭它。setInterval()基础setInterval()函数的用法与setTimeout()完全一致，区别仅仅在于setInterval()指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。var i = 1 var timer = setInterval(function() { console.log(2); }, 1000);上面代码表示每隔1000毫秒就输出一个2，直到用户点击了停止按钮。与setTimeout()一样，除了前两个参数，setInterval()方法还可以接受更多的参数，它们会传入回调函数，下面是一个例子。function f(){ for (var i=0;i= 5){ clearInterval( ...继续阅读 (30)

早期在Web中要实现文本描边效果是没有直接的CSS属性可以实现的。一般都是通过其他的CSS属性来模拟需要的描边效果。最常见的就是使用text-shadow。当然，在SVG或者Canvas中实现文本描述效果相对而言是要较为轻松。那么今天咱们就来看看如何在Web中实现文本描述效果。text-shadow实现文本描边text-shadow是实现Web描述效果中最为常见的一种方案，简单的原理就是在文本的上、下、左、右添加文本阴影（不带模糊的阴影）。比如：h1 { text-shadow: -.025em -.025em 0 #444, .025em -.025em 0 #444, -.025em .025em 0 #444, .025em .025em 0 #444; }你将看到的效果如下：text-stroke值得庆幸的是，现在可以直接使用text-stroke属性实现描述效果。在介绍text-stroke怎么实现文本描边效果之前，先简单了解其怎么使用。text-stroke是text-stroke-width和text-stroke-color两个属性的简写写法。text-stroke:;text-stroke属性常常配合text-fill-color（text-fill-color属性是给文本填充颜色）一起使 ...继续阅读 (28)

CSS自定义属性又称为CSS的变量或者原生变量。其和CSS处理器里的变量还是略有不同，但这篇文章我们要聊的并不是这个东东，咱们想聊聊CSS自定义属性怎么制作动画。在继续之前，咱们都知道现在制作Web动画一般是通过CSS的Animation或者Web Animation API来完成（也就是JavaScript制作动画）。但有了CSS自定义属性之后，配合简单的几行JavaScript代码，也可以实现一些动画效果。那么CSS自定义属性是如何制作动画呢？如果你感兴趣的，请继续...CSS自定义属性CSS自定义属性最早称之为CSS变量，更官方一点的称谓是CSS自定义属性级联变量。官方对CSS变量是这样描述的：变量，是标识符和可以用任何常规值替代值之间的关联，使用var()函数表示法：var(- example-variable)返回--example-variable的值 。对CSS自定义属性是这样描述的：自定义属性，这是表单的特殊属性--*这里*表示变量名称。这些用于定义给定变量的值：--example-variable：20px;是一个CSS声明，使用自定义--*属性将CSS变量--example-variable的值设置为20px。CSS自定义属性的使用方法为了能更好的理解后面的内容，先简单的回忆一下CSS自定义属性的使用方法。可以像下面那样先声明一个变量：:root { - ...继续阅读 (30)

line-height和vertical-align在CSS中是两个简单的属性。如此简单，大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们。但事实上并不如此。他们其实很复杂，也是CSS中难点之一，而且也是CSS中特性之一：内联格式化上下文（inline formatting context）。比如可以设置line-height带有长度单位的值或一个无单位的值，但其默认值是normal。那么在CSS中normal是什么呢？我们常常认为它是（或者应该是）1或者1.2，甚至也可以说，CSS规范都不清楚是哪一个。我们也知道，没有单位的line-height是相对于font-size的，但问题是,font-size: 100px;在使用不同的字体（font-family）表现的行为是不一样的，所以line-height总是相同或不同的吗？真的是1还是1.2吗？另外vertical-align对line-height的影响又是什么呢？要深入研究CSS的机制可以说没有这么简单......首先来聊font-size首先来看一个简单的HTML代码，一个标签中包含了三个标签，每个都使用不同的font-family：BaBaBap { font-size: 100px; } .a { font-family: Helvetica; } .b { font-fami ...继续阅读 (32)

本文转载@晚晴幽草轩轩主的《你所不知道的setTimeout》，如需转载，烦请注明原文出处：http://www.jeffjade.com/2016/01/10/2016-01-10-javacript-setTimeout/JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。初始接触它的人都觉得好简单，实际上真的如此么？这里记载下，一路对其使用姿势变迁的历程。setTimeout()基础setTimeout()函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。var timerId = setTimeout(func|code, delay)上面代码中，setTimeout()函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。console.log(1); setTimeout('console.log(2)',1000); console.log(3);上面代码的输出结果就是1，3，2，因为setTimeout()指定第二行语句推迟1000毫秒再执行(如果这在Sublime下运用插件以nodejs环境来执行，许解释器不同，会 ...继续阅读 (25)

起因第三节Css大会上（PPT）看到了微信 方潇仪 工程师分享的关于 svg动画的相关知识刚刚拿到百度实习offer （/∇＼）喜欢萌萌的百度熊样式See the PenrWBKJpby Owen (@numerhero) onCodePen.思路原理其实方潇仪 也提到了，就是利用SVG 的filter标签，让两个圆高斯模糊后的边缘处虚化后再将两个源合并。其中 我们可以想像 每一步都是一个图层，每一个标签都是一个处理工具。in属性将图层输入result将结果输出，但是不会将原来的图层改变，只会增加一个新的图层。那么实际上就很明显了。我们使用feGaussianBlur高斯模糊将原图层 模糊10个单位 然后使用feColorMatrix调节图层整体对比度，让其回归清晰。再将之前未处理过的图层和处理好的图层进行合并（feComposite），让原来图层上的图标、文字等能够清晰显现（因为经过高斯模糊处理所以文字图标都没了）。然后我们把处理过的图层对其进行引用：.nose { ... filter: url(./baidu_beer.html#gooey); }@彦子 同学 和 @大漠 老师对SVG研究的十分透彻和深入 大家可以去看W3cplus SVG标签下的相关内容布局filter只能影响被设置的元素，以及其下的子元素。如果设置过多的filter又会使性能下降，所以我们 ...继续阅读 (22)

几周前，CSS变量，更准确的说是CSS自定义属性——发布在Chrome Canary版的Experimental Web Platform Features flag。Chrome的工程师@Addy Osmani首次在推特发布时，遭遇到了惊人的否定，敌意及怀疑。至少我很吃惊，鉴于我对这个属性是如此兴奋。快速浏览完大众的答复，明显地99%的讨论都集中在这两件事上：语法丑而冗长Sass已经有了变量，为什么还要关注原生CSS变量？我承认的确不喜欢这个语法，但理解它不只是随意的选择很重要。CSS工作组的成员讨论过语法的长度，他们必须选择与CSS语法兼容的东西，且不会与将来添加的语言冲突。关于CSS变量和Sass变量，我认为最大的误解在于：原生的CSS变量并不是试图复制CSS预处理器早已经实现的功能。事实上，如果读过最初的设计讨论，就知道原生CSS变量的目的是为了实现预处理器不能实现的功能。CSS预处理器是很好的工具，但其变量是静态的，限定了语法作用域。另一方面，原生CSS变量是一种完全不同类型的变量：动态的，作用域是DOM。事实上，称它们为变量会令人迷惑。它们实际上是CSS属性，这为它们提供了一组完全不同的能力集，用来解决一系列完全不同的问题。在本文中，我将讨论一些可用CSS自定义属性实现但不能用预处理器变量实现的事情，还会演示一些自定义属性能实现的新设计模式，最后讨论为什么我会认为以后很 ...继续阅读 (24)

这篇文章介绍了Flexbox模块所有基本概念，而且是介绍Flexbox模块的很好的一篇文章，所以这篇文章非常的长，你要有所准备。学习Flexbox的曲线@Philip Roberts在Twitter上发了一个推：学习Flexbox可不是件很有趣的事情，因为它将挑战你所知道的CSS布局方面的知识。当然这也是非常正常的，因为一切知识都是值得学习的。另外你要认值对待Flexbox。因为它是现代Web布局的主流方式之一，不会很快就消失。它也成为一个新的W3C标准规范。既然如此，那让我们张开双臂，开始拥抱它吧！你将学习我将带你先了解Flexbox的一些基础知识。我想这是开始尝试学习Flexbox的必经阶段。学习基础知识是件很有意思的事情，更有意思的是可以通过学习这些基础理论知识，在实际的应用程序中使用Flexbox。我将带您亲历很多“小知识点”之后，在文章末尾，使用Flexbox来做一个音乐应用程序的布局（UI界面布局）。看上去是不是棒棒的？在开始进入学习Flexbox构建音乐应用程序的布局之前，你还将需要了解Flexbox在响应式Web设计中所起的作用。我将会把这一切都告诉你。上图是@Jona Dinges设计的。在你开始构建音乐应用程序界面之前，我将一起陪你做一些练习。这看起来可能很无聊，但这是让你彻底掌握Flexbox必经的过程，只有这样才能让你很擅长的使用Flexbox。说了这么多的 ...继续阅读 (23)

腾讯系互联网券商——富途证券web前端团队招人啦！！！公司简介富途证券是一家为投资者提供港股和美股交易服务的互联网券商，创始人为前腾讯第18号员工……“咔！咔！咔！” 小编，小编说重点。腾讯系创业公司——靠谱 。（赞 赞 赞...）互联网金融——热点。（hot~ hot~ hot~）B轮融资——不差钱。（money money money!!!）高级web前端工程师（深圳）单挑“boss”，怒刷装备，等你加入。职位描述：参与前端技术选型、架构完成各种网站项目需求开发mobile web以及webapp接入层（Node）职位要求：能独立完成各种变态前端需求JavaScript基础扎实，功底深厚如果你能撕产品+1分能做后台+2分玩懂前端工程+3分toobug@futu5.com 等你来！more吹牛时间2016年，我们web前端团队在装逼路上已经初露锋芒，今年打算把你招过来，然后在这条装逼之路上继续装逼。这是我们的前端负责人暖男八哥（TooBug），原就职于腾讯，现在是我们富途证券web前端装逼之路上的带头大哥。不仅技术牛（小编提示：全栈工程师），可谓人人膜(gui)拜(tian)，而且在音乐造诣和摄影方面都是一把刀。说好的一起装逼一起飞呢，小编...（给我粗来小编，我保证不打你）。小编也表示鸭梨很大，先去零食区黑一包辣条压压精。辣条好吃，小编快说点正经的。（怪我咯，我这不是造福大家吗 ...继续阅读 (22)

腾讯系互联网券商——富途证券web前端团队招人啦！！！公司简介富途证券是一家为投资者提供港股和美股交易服务的互联网券商，创始人为前腾讯第18号员工……“咔！咔！咔！” 小编，小编说重点。腾讯系创业公司——靠谱 。（赞 赞 赞...）互联网金融——热点。（hot~ hot~ hot~）B轮融资——不差钱。（money money money!!!）高级web前端工程师（深圳）单挑“boss”，怒刷装备，等你加入。职位描述：参与前端技术选型、架构完成各种网站项目需求开发mobile web以及webapp接入层（Node）职位要求：能独立完成各种变态前端需求JavaScript基础扎实，功底深厚如果你能撕产品+1分能做后台+2分玩懂前端工程+3分toobug@futu5.com 等你来！more吹牛时间2016年，我们web前端团队在装逼路上已经初露锋芒，今年打算把你招过来，然后在这条装逼之路上继续装逼。这是我们的前端负责人暖男八哥（TooBug），原就职于腾讯，现在是我们富途证券web前端装逼之路上的带头大哥。不仅技术牛（小编提示：全栈工程师），可谓人人膜(gui)拜(tian)，而且在音乐造诣和摄影方面都是一把刀。说好的一起装逼一起飞呢，小编...（给我粗来小编，我保证不打你）。小编也表示鸭梨很大，先去零食区黑一包辣条压压精。辣条好吃，小编快说点正经的。（怪我咯，我这不是造福大家吗 ...继续阅读 (25)

在CSS中有些属性是允许CSS绘制图形形状，比如常见的是使用border或者box-shadow来绘制图形或者形状。除此之外，在CSS中还有类似circle()函数也可以绘制圆形。除此之外，在CSS中有一些形状是为CSS其它属性服务，比如clip-path为mask服务和在shape-outside让文本围绕形状排版。还有一些CSS属性使用像SVG中的图形做一些事情，比如offset-path中使用path()函数实现路径动画。而其中path()是一个非常棒的功能，可以绘制任何图形。在接下来的内容中，来介绍一下CSS中的基本图形和路径。希望对大家有所帮助。CSS中的基本图形在CSS中polygon()、circle()、ellipse()和inset()函数可以绘制基本形状。在CSS中的offset-path和shape-outside中都可以使用这四个图形函数，实现对应的路径动画以及文本围绕排版效果。他们虽然绘制基本形状，但也常将其称之为路径图形。那么什么是路径呢？什么是路径使用过SVG的同学对路径这个词并不会感到陌生，在SVG中有一个元素，允许我们绘制任何东西。在HTML中，我们可以这样来使用绘制图形：在CSS中可以通过path()来实现类似上面绘制图形的效果：path("M 25,100 C 25,150 75,150 75,100 S 100,25 150,75");属性中 ...继续阅读 (23)

在CSS中有些属性是允许CSS绘制图形形状，比如常见的是使用border或者box-shadow来绘制图形或者形状。除此之外，在CSS中还有类似circle()函数也可以绘制圆形。除此之外，在CSS中有一些形状是为CSS其它属性服务，比如clip-path为mask服务和在shape-outside让文本围绕形状排版。还有一些CSS属性使用像SVG中的图形做一些事情，比如offset-path中使用path()函数实现路径动画。而其中path()是一个非常棒的功能，可以绘制任何图形。在接下来的内容中，来介绍一下CSS中的基本图形和路径。希望对大家有所帮助。CSS中的基本图形在CSS中polygon()、circle()、ellipse()和inset()函数可以绘制基本形状。在CSS中的offset-path和shape-outside中都可以使用这四个图形函数，实现对应的路径动画以及文本围绕排版效果。他们虽然绘制基本形状，但也常将其称之为路径图形。那么什么是路径呢？什么是路径使用过SVG的同学对路径这个词并不会感到陌生，在SVG中有一个元素，允许我们绘制任何东西。在HTML中，我们可以这样来使用绘制图形：在CSS中可以通过path()来实现类似上面绘制图形的效果：path("M 25,100 C 25,150 75,150 75,100 S 100,25 150,75");属性中 ...继续阅读 (32)

本文转载于google.com的《你的首个 Progressive Web App》一文，如需转载，请注明出处：https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/Progressive Web Apps是结合了 Web 和 原生应用中最好功能的一种体验。对于首次访问的用户它是非常有利的, 用户可以直接在浏览器中进行访问，不需要安装应用。随着时间的推移当用户渐渐地和应用建立了联系，它将变得越来越强大。它能够快速地加载，即使在比较糟糕的网络环境下，能够推送相关消息, 也可以像原生应用那样添加至主屏，能够有全屏浏览的体验。什么是 Progressive Web App?Progressive Web Apps 是:渐进增强- 能够让每一位用户使用，无论用户使用什么浏览器，因为它是始终以渐进增强为原则。响应式用户界面- 适应任何环境：桌面电脑，智能手机，笔记本电脑，或者其他设备。不依赖网络连接- 通过 service workers 可以在离线或者网速极差的环境下工作。类原生应用- 有像原生应用般的交互和导航给用户原生应用般的体验，因为它是建立在 app shell model 上的。持续更新- 受益于 service worker 的更新进程，应用能够始终保持更 ...继续阅读 (21)

本文转载于google.com的《你的首个 Progressive Web App》一文，如需转载，请注明出处：https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/Progressive Web Apps是结合了 Web 和 原生应用中最好功能的一种体验。对于首次访问的用户它是非常有利的, 用户可以直接在浏览器中进行访问，不需要安装应用。随着时间的推移当用户渐渐地和应用建立了联系，它将变得越来越强大。它能够快速地加载，即使在比较糟糕的网络环境下，能够推送相关消息, 也可以像原生应用那样添加至主屏，能够有全屏浏览的体验。什么是 Progressive Web App?Progressive Web Apps 是:渐进增强- 能够让每一位用户使用，无论用户使用什么浏览器，因为它是始终以渐进增强为原则。响应式用户界面- 适应任何环境：桌面电脑，智能手机，笔记本电脑，或者其他设备。不依赖网络连接- 通过 service workers 可以在离线或者网速极差的环境下工作。类原生应用- 有像原生应用般的交互和导航给用户原生应用般的体验，因为它是建立在 app shell model 上的。持续更新- 受益于 service worker 的更新进程，应用能够始终保持更 ...继续阅读 (23)

本文首发于《程序员》，发布于Hux Blog、前端外刊评论，转载请保留链接 ;)下一代 Web 应用？近年来，Web 应用在整个软件与互联网行业承载的责任越来越重，软件复杂度和维护成本越来越高，Web 技术，尤其是 Web 客户端技术，迎来了爆发式的发展。包括但不限于基于 Node.js 的前端工程化方案；诸如 Webpack、Rollup 这样的打包工具；Babel、PostCSS 这样的转译工具；TypeScript、Elm 这样转译至 JavaScript 的编程语言；React、Angular、Vue 这样面向现代 Web 应用需求的前端框架及其生态，也涌现出了像同构 JavaScript与通用 JavaScript应用这样将服务器端渲染（Server-side Rendering）与单页面应用模型（Single-page App）结合的 Web 应用架构方式，可以说是百花齐放。但是，Web 应用在移动时代并没有达到其在桌面设备上流行的程度。究其原因，尽管上述的各种方案已经充分利用了现有的 JavaScript 计算能力、CSS 布局能力、HTTP 缓存与浏览器 API 对当代基于Ajax与响应式设计的 Web 应用模型的性能与体验带来了工程角度的巨大突破，我们仍然无法在不借助原生程序辅助浏览器的前提下突破 Web 平台本身对 Web 应用固有的桎梏：客户端软件（即网页）需 ...继续阅读 (27)

本文首发于《程序员》，发布于Hux Blog、前端外刊评论，转载请保留链接 ;)下一代 Web 应用？近年来，Web 应用在整个软件与互联网行业承载的责任越来越重，软件复杂度和维护成本越来越高，Web 技术，尤其是 Web 客户端技术，迎来了爆发式的发展。包括但不限于基于 Node.js 的前端工程化方案；诸如 Webpack、Rollup 这样的打包工具；Babel、PostCSS 这样的转译工具；TypeScript、Elm 这样转译至 JavaScript 的编程语言；React、Angular、Vue 这样面向现代 Web 应用需求的前端框架及其生态，也涌现出了像同构 JavaScript与通用 JavaScript应用这样将服务器端渲染（Server-side Rendering）与单页面应用模型（Single-page App）结合的 Web 应用架构方式，可以说是百花齐放。但是，Web 应用在移动时代并没有达到其在桌面设备上流行的程度。究其原因，尽管上述的各种方案已经充分利用了现有的 JavaScript 计算能力、CSS 布局能力、HTTP 缓存与浏览器 API 对当代基于Ajax与响应式设计的 Web 应用模型的性能与体验带来了工程角度的巨大突破，我们仍然无法在不借助原生程序辅助浏览器的前提下突破 Web 平台本身对 Web 应用固有的桎梏：客户端软件（即网页）需 ...继续阅读 (22)

最早接触到CSS Exclusions名词是在2013年@Peter Gasston写的《The future of CSS layouts》（译文点击这里）。至于“Exclusions”译成中文不知道使用什么词更为合适，文章下面暂且直接使用英文，或许更好些。CSS Exclusions是什么？CSS Exclusions是什么？如果读过前面这篇文章可以简单的知道他是Web布局模块特性之一。在W3C规范文档中是这样描述的：This specification defines features that allow inline flow content to wrap around outside the exclusion area of elements.布局的局限性在CSS2.1时代，众所周知，Web的布局局限性非常的大，只能实现矩形方式布局，如果要实现一些流线的布局，比如说类似于杂志排版风格的布局，那是非常痛苦的，甚至是不太现实的。虽然以前的布局在这方面局限性非常的大，但技术是不断向前发展的。早前很多同行专家就在这方面不断进行革新，才有了一些新的布局特性。比如说CSS Shapes和CSS Grid等。其中CSS Shapes直接打破了Web排版仅限于矩形排版，它可以实现一些流线性的排版，比如下面排版效果：而CSS Grids也让我们的布局变得更为灵活。前关于这方面的介绍可 ...继续阅读 (27)

最早接触到CSS Exclusions名词是在2013年@Peter Gasston写的《The future of CSS layouts》（译文点击这里）。至于“Exclusions”译成中文不知道使用什么词更为合适，文章下面暂且直接使用英文，或许更好些。CSS Exclusions是什么？CSS Exclusions是什么？如果读过前面这篇文章可以简单的知道他是Web布局模块特性之一。在W3C规范文档中是这样描述的：This specification defines features that allow inline flow content to wrap around outside the exclusion area of elements.布局的局限性在CSS2.1时代，众所周知，Web的布局局限性非常的大，只能实现矩形方式布局，如果要实现一些流线的布局，比如说类似于杂志排版风格的布局，那是非常痛苦的，甚至是不太现实的。虽然以前的布局在这方面局限性非常的大，但技术是不断向前发展的。早前很多同行专家就在这方面不断进行革新，才有了一些新的布局特性。比如说CSS Shapes和CSS Grid等。其中CSS Shapes直接打破了Web排版仅限于矩形排版，它可以实现一些流线性的排版，比如下面排版效果：而CSS Grids也让我们的布局变得更为灵活。前关于这方面的介绍可 ...继续阅读 (23)

当浏览器从服务器接收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路径”（Critical Rendering Path）。理解CRP（Critical Rendering Path）相关的知识可以更好的提高网站的性能。那么理解我们从下面六个部分来理解CRP相关的知识:构建DOM树树建CSSOM树运行JavaScript创建Render树生成布局绘制(Painting)构建DOM树DOM（文档对象模型）树是一个完全解析的HTML页面对象。从根元素开始到页面中每个元素和文本的节点。元素嵌套在其他元素内则表示为子节点，每个节点包含完整的属性元素。例如一个元素，它就有与之相关的href节点。来看下面这个简单的DOM示例：Understanding the Critical Rendering PathUnderstanding the Critical Rendering PathIntroductionLorem ipsum dolor sit ametCopyright 2017这将会创建一个像下面这样的DOM树：HTML比较好的是它可以执行部分。完整的文档不需要加载的内容会在页面的开始呈现。然而，比如CSS和JavaScript可以阻止页面的呈现。构建CSSOM树CSSOM（CSS对象模型）是一个表示D ...继续阅读 (23)

当浏览器从服务器接收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路径”（Critical Rendering Path）。理解CRP（Critical Rendering Path）相关的知识可以更好的提高网站的性能。那么理解我们从下面六个部分来理解CRP相关的知识:构建DOM树树建CSSOM树运行JavaScript创建Render树生成布局绘制(Painting)构建DOM树DOM（文档对象模型）树是一个完全解析的HTML页面对象。从<html>根元素开始到页面中每个元素和文本的节点。元素嵌套在其他元素内则表示为子节点，每个节点包含完整的属性元素。例如一个<a>元素，它就有与之相关的href节点。来看下面这个简单的DOM示例：<html> <head> <title>Understanding the Critical Rendering Path</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Understanding ...继续阅读 (23)

2016年在各位装逼大神的带领下，我们在装逼的事情上越走越远。比如这位我们装逼界的王者，看这标签就知道绝对是装逼界的实力选手。这位王者是来自虚拟互动实验室的VR业务的PD云治爷，2016年装的最成功的逼是把Buy+给真弄出来了。这个逼装的有点大……Ps.装逼王目前单身，各位男客官可以行动起来了！毕竟男男才是真爱，妹子什么的请看后面！这位就是我们最爱的BOSS逍遥子左边那位戴着红牌牌的 宋五 爷。宋五爷是我们Buy+及VR项目的技术负责人，2016年成功带领团队杀入VR领域并快速完成技术底层搭建并在双11中大展身手。坊间更是流传着关于他装逼的各种新闻，大新闻请看这里！想要跟他一起装逼请把简历投至：weihua.lwh@alibaba-inc.com手淘-AR/VR算法工程师/专家岗位描述将智能人机交互（图像和视频处理、语音交互、生物识别和定位等）技术应用于手机淘宝购物和分享场景，实现并提供全方位一体化的AR/VR技术解决方案与服务，增加手淘线上线下购物的便捷性、可用性和趣味性；负责实现AR/VR算法研究与技术产品开发；参与或指导核心代码的书写，解决项目开发过程中算法相关的问题；参与设计算法的实现框架，设计的算法可配置和可维护，能实现快速和灵活地部署；岗位要求图像处理与模式识别、应用数学、计算机和测控等相关专业；深刻理解并熟练掌握图像处理和机器学习相关算法；具备扎实的智能人机交互相关算 ...继续阅读 (32)

本文转载自：众成翻译译者：哈呼哈哈呼链接：http://www.zcfy.cc/article/2321原文：https://24ways.org/2016/css-writing-modes/由于你可能没有那么多的时间，所以我将从结论开篇。你可以使用一个不常见，但是非常重要的CSS属性来使文字垂直显示，像下面这样。除了让文字垂直显示之外，你也可以让图标和入口按钮以这样的方式呈现。当然，可以让你页面上的任何内容按这样方式呈现。我写的CSS让浏览器重新布局文字的方向，使元素的布局在正常流的基础上旋转90度。查看这个例子，突出标题，并且看下现在光标是什么样子的。查看这个例子Writing Mode Demo — Headline作者Jen Simmons (@jensimmons) 在CodePen上。 实现的代码非常简单。h1 { writing-mode: vertical-rl; }上面就是把Web默认的水平并由上至下的书写方式转变成垂直并由左至右的书写方式所需要的全部代码。如果你在HTML元素上使用这样的代码，那么整个网页的书写方式都会被改变，并且也会影响滚动条的方向。在我上面的例子，我告诉浏览器只有h1元素会用vertical-rl这种书写方式，网页的其余部份保持默认的horizontal-tb的书写方式。这里餐前小点就结束了。让我开始呈现整个大餐并且解释下CSS书写 ...继续阅读 (26)

本文转载自：众成翻译译者：哈呼哈哈呼链接：http://www.zcfy.cc/article/2321原文：https://24ways.org/2016/css-writing-modes/由于你可能没有那么多的时间，所以我将从结论开篇。你可以使用一个不常见，但是非常重要的CSS属性来使文字垂直显示，像下面这样。除了让文字垂直显示之外，你也可以让图标和入口按钮以这样的方式呈现。当然，可以让你页面上的任何内容按这样方式呈现。我写的CSS让浏览器重新布局文字的方向，使元素的布局在正常流的基础上旋转90度。查看这个例子，突出标题，并且看下现在光标是什么样子的。查看这个例子Writing Mode Demo — Headline作者Jen Simmons (@jensimmons) 在CodePen上。 实现的代码非常简单。h1 { writing-mode: vertical-rl; }上面就是把Web默认的水平并由上至下的书写方式转变成垂直并由左至右的书写方式所需要的全部代码。如果你在HTML元素上使用这样的代码，那么整个网页的书写方式都会被改变，并且也会影响滚动条的方向。在我上面的例子，我告诉浏览器只有h1元素会用vertical-rl这种书写方式，网页的其余部份保持默认的horizontal-tb的书写方式。这里餐前小点就结束了。让我开始呈现整个大餐并且解释下CSS书写 ...继续阅读 (13)