Scroll Indicator称之为滚动指示器，是Web中常见的一种效果。用户滚动垂直滚动内容时，页面顶部有一个类似进度条的效果，当内容滚动到页面最低端，进度条效果填满整个进度条。感觉描述得有点绕，还是录制一个动效图，用图来说明这种效果，毕竟一图胜过千言万语：以前实现这种效果都需要借助于JavaScript，或者说是采用jQuery的插件。网上有关于这方面的介绍的文章也很多，比如：@PANKAJ PARASHAR的《Reading Position Indicator》@Jonathan Cutrell的《How to Build a Page Scroll Progress Indicator With jQuery and SVG》但今天咱们要说的是使用纯CSS制作Scroll Indicator效果。说到这里，大家或许会问，这样的效果用CSS实现，吹了吧。其实使用纯CSS实现一点也没有问题。如果你感兴趣，欢迎接着往下阅读。Scroll Indicator几个关键点先来看JavaScript的做法：看代码变化就清楚，通过JavaScript改变容器scroll-line的width值。也就是在滚动内容的时候，width值从0%变化到100%。其中最重要的是要知道滚动条位置的计算。在整个计算中，要知道两个重要的参数:document height:文档的高度$(document ...继续阅读 (15)

最近，我在一个React同构网站工作。这个网站建立在React上，运行于Express服务器上。一切都进行得十分顺利，但是我仍对CSS包的加载阻塞不满意。因此，我开始考虑如何在Express服务器上进行关键路径的优化。这篇文章主要是如何使用Express和Handlebars进行安装以及配置一个关键路径的性能优化的笔记。先决条件本文中，我会使用Node.js以及Express。熟悉这两种技术对于理解文中的示例是十分有帮助的。TL;DR我准备了一个简单容易上手的资源库。基础关键路径(Critical-path)优化是关于如何消除CSS渲染阻塞的一种技术。它可以明显的提高网站负载的速度。该技术的目的是为了帮助用户摆脱CSS包加载的等待时间。一旦包加载后，浏览器进行缓存，之后的任何重载都会从缓存中读取。在此基础上，我们的目标如下:在第一和第二(以及第n)次加载间进行区分。第一次加载，异步加载CSS包，添加一个事件侦听以便知道加载何时完成。当包被加载时，添加一些CSS，让用户尽可能的拥有良好的体验。当侦听事件提示CSS包加载完成，移除内联CSS样式并为包服务。确保其他来源(Javascript包等等)不会阻塞渲染。检测第一次加载使用cookie检测是否为第一次加载。如果cookie没有被设置则表明是第一次加载。否则是第二次或者第n次加载。异步加载CSS包启动异步下载CSS包，使用一种包含一 ...继续阅读 (13)

本文转载自：众成翻译译者：camiler链接：http://www.zcfy.cc/article/872原文：https://www.smashingmagazine.com/2016/07/front-end-challenge-accepted-css-3d-cube/你喜欢挑战么？你愿意承担一项以前从没遇到过的任务并且按时完成么？如果在进行任务中，你碰到来一个似乎无法解决的问题呢？我想分享我使用CSS 3D效果的经历，那是第一次用于实际项目中，以此来激励你接受挑战。那是平常的一天，当Eugene（CreativePeople的经理）写信给我的时候。他寄给我一个视频，说他正在为一个新项目开发一个概念，而且想知道我是否可能开发一个像视频里那样的东西。这是一个绕着一个轴旋转的3D物体（准确地说是个立方体）。对于用CSS 3D工作我已经有一些经验了，于是我的脑海里开始形成一个解决方案。我Google搜索了像“CSS 3D cube”这样的关键词来确认我的想法，随后我回复Eugene说我可以。Eugene下一个问题是问我是否愿意承担这个项目？我喜欢复杂的任务，所以我不能拒绝。在这一刻，我还没有意识到我正陷入其中，但我无法确定是否可以完成。理解轴（字面翻译是磨斧）提醒下这个axes不是战斧，而是数轴的意思，正如我们在学校学到的三维直角坐标系一样的轴线。维基百科定义:直角坐标系是一个两两 ...继续阅读 (99)

本文转载自：@manxisuo写的《通过一张简单的图，让你彻底地、永久地搞懂JS的==运算》。大家知道，==是JavaScript中比较复杂的一个运算符。它的运算规则奇怪，容易让人犯错，从而成为JavaScript中“最糟糕的特性”之一。在仔细阅读了ECMAScript规范的基础上，我画了一张图，我想通过它你会彻底地搞清楚关于==的一切。同时，我也试图通过此文向大家证明==并不是那么糟糕的东西，它很容易掌握，甚至看起来很合理。图1:==运算规则的图形化表示==运算规则的精确描述在此：The Abstract Equality Comparison Algorithm。但是，这么复杂的描述，你确定看完后脑子不晕？确定立马就能拿它指导实践？肯定不行，规范毕竟是给JavaScript运行环境的开发人员看的(比如V8引擎的开发人员们)，而不是给语言的使用者看的。而上图正是将规范中复杂的描述翻译成了更容易看懂的形式。在详细介绍图1中的每个部分前，我们来复习一下JavaScript中关于类型的知识：JS中的值有两种类型：原始类型(Primitive)、对象类型(Object)。原始类型包括：Undefined、Null、Boolean、Number和String等五种。Undefined类型和Null类型的都只有一个值，即undefined和null；Boolean类型有两个值：true和fa ...继续阅读 (28)

JavaScript中的递增和递减运算符都是一元操作符，言外之意就是只能操作一个值的操作符。递增和递减操作符直接借鉴自C语言，各有两种版本：前置型(递增++i，递减--i)和后置型(递增i++，递减i--)。在JavaScript中，递增（递减）的前置和后置运算符对于初学者都非常容易混淆。我就属于这一类型，这次下定决心把这两者的使用和不同之处了解清楚。如果你和我一样，不仿一起来了解一二。前置型递增(递减)前置型递增也称之为前增量(pre-increment)运算符，它对操作数进行增量计算，并返回其计算后的值。这样或许不太好理解，换过一种方式来理解：前增量指的先计算，后赋值。如果文字不好理解，直接上示例，因为代码也是一种好的阐述方式。假设有一个变量i，其值为1。那么前置递增为++i。var i = 1; console.log(i); // => 1 ++i; console.log(i); // => 2这个示例，前置递增++i操作符把i的值变成了2(也就是1+1)。实际上，执行前置递增++i和执行下面的表达式效果相同：var i = 1; i = i + 1; console.log(i); // => 2简单点讲，前置型递增就是先自身计算，再赋值给变量：var i = 1; var a = ++i; // var i = 1; i = i + 1; a = ...继续阅读 (25)

CSS的Animation成为Web Animation中主要实现方式之一。使用CSS 的animation可以在Web中实现一些动画效果。而其中最为关键的还是依赖于@keyframes，让动画可以根据帧定制不同的动画效果。其实这篇文章的主要目的不是要给大空介绍@keyframes的语法和使用方法。因为，大家对它并不会陌生，而且也知道怎么使用？那么大家在使用keyframes的时候是不是碰到一些烦恼，对于不同的动画效果，都需要去创建一个keyframes，而且对于一个复杂的动画，一个动画中用到多个元素元素时，是不是感觉到管理和维护keyframes比较痛苦，易出错。如果你有上述这样的烦恼，那么下面的内容值得你花点时间继续往下阅读。CSS中的keyframes简单的回忆一下，如果要使用animation创建一个动效，就必须先用keyframes创建一个动效。@keyframes animation-name { ... }由于各浏览器厂商对animation支持程度不一样，早期为了兼容各浏览器，需要添加各种前缀：@-webkit-keyframes animation-name {...} @-moz-keyframes animation-name {...} @-o-keyframes animation-name {...} @keyframes animation-n ...继续阅读 (18)

平面设计已成为2016年可见的趋势，显然，这就是SVG用法又重新走入人们的视野的原因。好处有很多: 独立的分辨率、跨浏览器兼容性以及DOM节点的可访问性。本文中，我们将看看如何使用SVG从简单的插图创建看似复杂的动画。简明介绍图1. 创建的效果如何？从简单的SVG插图创建看似复杂的动画。该项目始于一个简单的实验想法:我们可将SVG动画效果进行到多远？那时候，设计师Chris Halaska和我是一个插图竞选网站的同事。在所有的创意搜索中，作品虽然很美观，但是缺乏所需的“魅力”。我们在“摄像系列”中找到了答案，即图形动画。可以使用动画将插图赋予生命，而SVG是做到这一点的最佳媒介。我们所面临的问题(当然也是今天依旧所存在的问题)是，SVG动画应该委托给正在尝试艺术方向的前端开发人员还是正在试图学习JavaScript的设计师。当然，这些场景都是本质上的错误，但是使用少量的应用程序解决问题，实现动画在视觉的天然显示，需要在代码和设计之间搭建一个桥梁。我们的想法是创建一个数据驱动程序，使设计师可以从静态插图到原型动画的快速实现。动画的相关规则在生命的幻象中，Disney概述了添加人物到动画的12个基本原则。适用于将所有无生命或者其他对象赋予生命的: 挤压与伸展(squash and stretch)，预期动作(anticipation)，渐快与渐慢(slow in and slow ou ...继续阅读 (21)

本文转载自：Alon's Blog译者：涂鸦码龙链接：CSS分层动画可以让元素沿弧形路径运动原文：Moving along a curved path in CSS with layered animationCSS 的animations （动画）和transitions（变换）擅于实现从点A到点B的直线运动，运动轨迹是直线路径。给一个元素添加了animation或者transition以后，无论你如何调整贝塞尔曲线，都无法让它沿着弧形路径运动。你可以通过自定义timing function属性，做出弹动的效果，但是它沿着X和Y轴相对移动的值永远是相同的。与其使用 JavaScript 实现外观自然的运动，不如尝试用这种简单的方式：分层动画，绕过已有的限制。通过使用两个或多个元素实现动画效果，我们可以更加细粒度地控制某个元素的路径，沿着X轴运动使用一种timing function，沿着Y轴运动使用另一种timing function。问题所在当我们深入探讨解决方案之前，看看到底问题在哪。CSSanimations和transitions限制我们只能沿直线路径运动。元素总是沿着点A到点B的最短路径运动，如果我们另辟蹊径，告诉 CSS 沿着“更好的路径”，而不是“最短路径”运动呢？用 CSS （开启硬件加速）实现两点之间的运动，最直截了当的方式是使用transform的transl ...继续阅读 (30)

motion-path是CSS新增的一个属性，主要用来定义元素的动画路径。下面的示例是SVG中的路径使用语法：.thing-that-moves { motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); }这个属性自身不会让元素动的，其主要是用来定义动画的路径。使用motion-offset属性就可以让元素动起来。这里有一个简单的示例，在@keyframes中使用了motion-offset:.thing-that-moves { motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; } @keyframes move { 100% { motion-offset: 100%;} }在这个示例中，橙色的圆圈正在沿着用CSS的motion-path绘制的路径运动（沿白色的圈旋转）。绘制的路径与SVG中的path()相同，但这不是必要的运动。这样说，我们可以通过一些SVG的编辑软件，可以画一个时髦的路径：可以得到一个路径：<path d="M18.45,58.46s52.87-70.07,101.25-.75, ...继续阅读 (40)

CSS最近介绍了一个关于scroll snap points的新功能，为触控以及输入设备的用户提供一个流式、精确的滚动体验。关于创建scroll snap效果，有许多jquery插件可供你选择，但是我们今天所讲述的不是通过安装一个插件来控制滚动的行为，而是使用原生的CSS scroll snap points来实现。Scroll Snap Points工作原理通过在x以及y轴上定义“snap points”来控制滚动容器的滚动行为。当用户在水平或者垂直方向滚动时，利用捕捉点，滚动容器会捕捉到内容区域的某一点。水平捕捉点创建一个可滚动的图片画廊，用户可以滚动或滑动每幅图片。代码结构如下:<div class="gallery"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> <img src="4.jpg"> </div>首先，创建一个水平的滚动容器，在div.gallery容器上定义了overflow以及white-space样式:.gallery { overflow-x: auto; overflow-y: hidden; white-space: nowrap; width: 10 ...继续阅读 (13)

CSS画图形在Web运用中时常看到，比如三角形、五角星，心形，Ribbon等。不过以前使用CSS绘制图形一般都是借助于border来绘制，但这样的方式受到一定的限制，而且实用价值也有所限制。这篇文章将介绍使用CSS的clip-path来完成正多边形的绘制，并且借助CSS预处理器Sass给这两种方法定义对应的混合宏和函数，实现正多边形的开发。border和多个元素绘制多边形使用border和多个HTML元素绘制三角形，Ribbon等对于我们来说还是易事，也是常见的事，并且实用性、可扩展性并不受到太多限制。但对于一个多边形来说，那就相对而言会麻烦很多了。比如一个正六边形。比如下面的一个示例：.hexagon { width: 100px; height: 55px; background: red; margin: 150px auto; position: relative; &:before, &:after { content: ""; position: absolute; width: 0; height: 0; } &:before { top: -25px; left: 0; ...继续阅读 (13)

ES6 中的箭头函数、数组解构、rest 参数等特性一经实现就广为流传，但类似 Proxy 这样的特性却很少见到有开发者在使用，一方面在于浏览器的兼容性，另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景。就我个人而言是非常喜欢 ES6 的 Proxy，因为它让我们以简洁易懂的方式控制了外部对对象的访问。在下文中，首先我会介绍 Proxy 的使用方式，然后列举具体实例解释 Proxy 的使用场景。Proxy，见名知意，其功能非常类似于设计模式中的代理模式，该模式常用于三个方面：拦截和监视外部对对象的访问降低函数或类的复杂度在复杂操作前对操作进行校验或对所需资源进行管理在支持 Proxy 的浏览器环境中，Proxy 是一个全局对象，可以直接使用。Proxy(target, handler)是一个构造函数，target是被代理的对象，handlder是声明了各类代理操作的对象，最终返回一个代理对象。外界每次通过代理对象访问target对象的属性时，就会经过handler对象，从这个流程来看，代理对象很类似 middleware（中间件）。那么 Proxy 可以拦截什么操作呢？最常见的就是 get（读取）、set（修改）对象属性等操作，完整的可拦截操作列表请点击这里。此外，Proxy 对象还提供了一个revoke方法，可以随时注销所有的代理操作。在我们正式介绍 Proxy ...继续阅读 (18)

特别声明，本文转载@bubkoo的《深入解析 ES6：箭头函数》，如需转载，烦请注明出处：http://bubkoo.com/2015/06/28/es6-in-depth-arrow-functions/从一开始箭头就是 JavaScript 的一部分，在第一个 JavaScript 中就建议将内联的脚本代码包裹在 HTML 的注释中，这可以防止那些不支持 JavaScript 的浏览器错误滴将你的代码显示为明文。你也许写过下面这样的代码：<script language="javascript"> <!-- document.bgColor = "brown"; // red // --> </script>古老的浏览器将看到两个不被支持的标签和一段注释，只有支持 JavaScript 的新浏览器才会将其解析为 JavaScript 代码。为了支持这个古怪的特性，浏览器的 JavaScript 引擎把<!--作为一个单行注释的开始，这不是开玩笑的，这一直都是这门语言的一部分，并且至今还能用，不仅仅在<script>标签内的首行，而是在 JavaScript 代码的任何部位都可用，它甚至还能在 Node 中使用。凑巧的是，这种风格的注释在 ES6 中首次被标准化。但这并不是我们将谈论的箭头。-->也表示一个单行 ...继续阅读 (16)

本文转载自：众成翻译译者：loveky链接：http://www.zcfy.cc/article/580原文：http://rainsoft.io/how-three-dots-changed-javascript/当在函数调用中通过arguments对象访问参数时，我总是感觉很不爽。它那硬编码的名字使得要想在内层函数(它拥有自己的arguments)中访问外层函数的arguments变得很困难。更糟糕的是它是一个类数组对象。这意味着你不能直接在它身上调用类似.map()或是.forEach()这样的方法。要想在内层函数里访问外层的arguments，你需要采用把它保存在一个单独变量里这样的变通方法。并且当需要遍历这个类数组对象时，你不得不使用鸭子类型并进行间接调用。看看下面的例子：function outerFunction() { // 把arguments保存在单独变量中 var argsOuter = arguments; function innerFunction() { // args is an array-like object var even = Array.prototype.map.call(argsOuter, function(item) { // 访问argsOuter ...继续阅读 (21)

本文转载自：众成翻译译者：MinweiShen链接：http://www.zcfy.cc/article/901原文：https://rainsoft.io/gentle-explanation-of-this-in-javascript/1.this之谜许多时候，this关键词对我以及许多刚起步的JavaScript程序员来说，都是一个谜。它是一种很强大的特性，但是理解它需要花不少功夫。对有Java, PHP或者其他常见的编程语言背景的人来说，this仅仅被看成是类方法中当前对象的一个实例：不会多也不会少。多数时候，它不能在方法外被使用。正是这样一种简单的使用方法，避免了混淆。在JavaScript中，this是当前执行函数的上下文。因为JavaScript有4种不同的函数调用方式：函数调用:alert('Hello World!')方法调用:console.log('Hello World!')构造函数调用:new RegExp('\\d')隐式调用:alert.call(undefined, 'Hello World!')并且每种方法都定义了自己的上下文，this会表现得跟程序员预期的不太一样。同时，strict模式也会影响函数执行时的上下文。理解this的关键点就是要对函数调用以及它如何影响上下文有个清晰的观点。这篇文章将会着重于对函数调用的解释、函数调用如何影响t ...继续阅读 (18)

一个函数一次性定义的代码块可以多次调用。在JavaScript中，一个函数有很多元素组成，同时也受很多元素影响：函数体的代码函数的参数列表接受外部变量域的变量返回值当函数被调用时，this指上下文命名和匿名函数函数对象作为变量声明arguments对象(在ES6中的箭头函数中将丢弃这个)这些元素都会影响到函数，但具体影响函数的行为还是取决于函数的声明类型。在JavaScript中常见的声明类型有以下几种方法：函数声明函数表达式方法定义箭头函数函数生成器函数构造器函数声明类型对函数代码的影响只是轻微的。重要的是函数如何与外部组件交互功能（比如外部作用域、闭包、对象自身拥有的方法等）和调用方式（普通函数调用、方法调用和构造函数调用等）。例如，你需要通过this在一个函数调用封闭的下下文（即this从外部函数继承过来）。最好的选择是使用箭头函数，很清楚的提供了必要的下下文。比如下面示例：class Names { constructor (names) { this.names = names; } contains(names) { return names.every((name) => this.names.indexOf(name) !== -1); } } var countries = new Name ...继续阅读 (9)

在Web网页中主要是以矩形分布的。而平面媒体则倾向于更多不同的形状。造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容。这也就造成了很多设计师的创意发挥，就算是有创意，前端实现也将付出巨大的开发成本。虽然CSS Shapes Module Level 1（CSS形状模块标准1）的规范出现，可以打破矩形设计的限制。但仍需要一些不规则的图形。而早前实现一些不规则的图形，都需借助其它的元素功能，比如CSS绘制图形，很多时候就依赖于伪元素，或多个元素。如此一来，CSS Shapes依旧无法发挥其强大的功能，让我们的Web打破常规的矩形布局。不过值得庆幸的是，CSS的clip-path出现，它可以帮助我们绘制很多特殊的图形（不规则的图形），比如：那么这篇文章，我们就一起来了解这个属性。基本概念clip-path从单词"clip path"的直译上来说，表示的就是裁剪路径。既然有裁剪，咱们就来了解这里面的几个简单的概念。裁剪就是从某样东西剪切一块。比如说，我们在<img>元素上，根据需要，剪切一部分需要留下的区域。而在整个裁剪中，将会碰到两个相关的概念：裁剪路径(Clipping Path)和裁剪区域(Clipping Region)。裁剪路径是我们用来裁剪元素的路径，它标记了我们需要裁剪的区域。它可以是个简单的形状（比如Web中常见的矩形），也可以是一个复杂的多边形 ...继续阅读 (13)

本指南不针对于具有优先级加载以及用例示范的font icons，或许，SVG会是一个更好地长期选择。快速指南如果你正在寻找具体的方法，这里的一些相关链接可能对你的帮助会更加直接。比方说:最全面的方法,对大多数用例都有帮助的，具有class的FOUT。最容易实现的: 我学习了很多关于Web字体的知识。写这篇文章时，浏览器对Web字体的实现缺少最简单有效的方法。如果你想要寻找最简单有效的方法，那么你就需要考虑放弃使用Web字体了。如果你不了解Web字体是如何改善你的设计的，那么你可能也不适合使用Web字体。这里请不要误会我的意思，Web字体还是十分有用的。但是，请正确使用它，以便将它的作用发挥到极致(这里我所了解到的，Robin Rendle对Web字体的使用价值有深刻的研究)。绩效导向最好的方法: 使用一种Critical FOFT的方法。就我个人而言，我的偏好是使用具有Data URI的Critical FOFT。但是，如果浏览器支持preload，我会转向使用具有preload的Critical URI。使用大量的Web字体: 如果你痴迷于Web字体(使用超过4~5种Web字体或者总文件大小超过100KB)，这就会有一点棘手。我会首先建议你减少Web字体的使用，但是如果不可以坚持一种标准的FOFT，或者是具有两种渲染状态的FOUT，请为每种字体使用单独的FOFT(Roman，Bo ...继续阅读 (10)

本文转载自：众成翻译译者：dreamforker链接：http://www.zcfy.cc/article/785原文：https://medium.com/peergrade-io/structuring-css-in-large-projects-37f1695f5ec8#.wyys1qbhg写CSS很容易。 写持续可维护的CSS则很难。你也许听说过不下100次了。因为在CSS中默认都是全局的申明。如果你是个写C的程序员你知道全局变量是糟糕的。如果你是程序员你会知道，独立及可组合的模块是一个可维护系统的关键所在。已经有很多CSS指南帮助人们构建可维护的CSS：SMACSS,OOCSS,BEM,ITCSS,ACSS,CCSS,Atomic Design,Maintanable CSS,rscss, 也许更多.然而CSS的问题在哪里呢？span { font-size: 11px; } .header-right { font-size: 22px; text-align: right; }如上的CSS定义， 样式立即生效于全局，并且影响到引用到此段代码的所有页面。 这里没有封装，没有独立的模块。在一个标准的程序语言中， 仅为需要实现的方法引入需要的模块即可，例：# Python modules import requests from Flask import ur ...继续阅读 (23)

CSS 资源的加载情况对浏览器渲染页面的影响很大，这是因为默认情况下浏览器只有在完成<head>部分 CSS 样式的加载、解析之后才会渲染页面。这种渲染方式意味着，如果 CSS 文件很大，那么用户就必须等待很长的时间才能看到渲染结果。针对这一问题，我们将在接下来的内容中讨论一种非常规的解决方案，提高页面的渲染速度，这一方案常被称为critical rendering path。我们要做的优化就是找出渲染首屏的最小 CSS 集合（Critical CSS），并把它们写到<head>部分，从而让浏览器接收到 HTML 文件后就尽快渲染出页面。对于剩余部分的 CSS，我们可以使用异步的方式进行加载。对于如何判断哪些 CSS 是首屏渲染需要的，我们需要通过分析 DOM 结构来确定，当然，手动来处理这些工作就太单调乏味了，所以在后文我会为大家介绍几种自动化处理的工具。实战首先，我们再重新梳理一遍步骤：将样式分成两份，一份是渲染首屏的最小集合，另一份是渲染页面剩余部分的样式，对于第一份，将其内嵌在<head>部分，对于第二部分则使用异步的方式加载。这种解决方案初看起来有些怪异，但实质上很简单，通过一次请求就获取到 HTML 文档和渲染首屏的 CSS 样式，尽快地为用户提供响应结果。为了更好地理解这一方案，下面的代码演示了核心的 HTML 结构：<!do ...继续阅读 (21)

TypeScript 是 JavaScript 的超集，为 JavaScript 的生态增加了类型机制，并最终将代码编译为纯粹的 JavaScript 代码。类型机制很重要吗？最近的一些项目经历让我觉得这真的很重要。当你陷在一个中大型项目中时（Web 应用日趋成为常态），没有类型约束、类型推断，总有种牵一发而动全身的危机和束缚。Immutable.js 和 Angular 2 都在使用 TypeScript 做开发，它们都是体量颇大的项目，所以我决定尝试一下 Typescript。此外我们还可以尝试 Facebook 的 Flow，比较一下两者的优劣。Typescript 对 ES6 也有良好的支持，目前组内项目使用 Babel 编译 ES6，这也就自然而然的把 TypeScirpt 和 Flow / babel-plugin-tcomb 放在了对立面，也许下一篇文章就是介绍 Flow 和 babel-plugin-tcomb。What and Why如果你想对 TypeScript 有更深入的认识，那么推荐你阅读 Stack Overflow 上的问答What is TypeScript and why would I use it in place of JavaScript?，这一节也是对这篇问答的一个简述。虽然 JavaScript 是 ECMAScript 规范的标准实现 ...继续阅读 (21)

上一篇介绍了前端开发中的九个黑魔法,比如链接的嵌套、破裂图片美化、表格列高亮显示、内联文本背景颜色设置、响应式EDM等，那么这篇文章继续根据@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》往下梳理，希望对您平时开发有所帮助。神奇的FlexboxCSS中Flexbox的出现，对于前端开发的同学来说绝对是一种福音，虽然它的版本众多，浏览器对其支持力度还不完全，甚至规范还在不断的修改，但其部分功能已经运用到实际开发当中。而且这些功能解决我们很多以前认为很痛苦的事情。你可能会说，是不是真的，如果你觉得言过其实，那希望你花点时间继续往下阅读。Input Add-ons初次看到Input Add-ons还是在Bootstrap中。别的先不多说，上张图先：上图的演示，大家应该看到了效果，或许有些同学已经开始在思考，中间的input输入框是如何根据容器的空间来自动调整的。说实在的，早前实现这种效果是件痛苦的事情，不管是使用float还是绝对定位absolute，都无法让input根据其容器空间自动调整。Twitter的工程师想出的一个解决方案是采用display:table-cell来完成。虽然效果实现了，但灵活性还是没有Flexbox的强大。接下来看Flexbox是如何实现的：HTML:& ...继续阅读 (16)

介绍这个新CSS属性之前，我想要先讲一下使用JavaScript实现的一个功能—— 将一个元素锁定在滚动视窗之中。众所周知，使用JavaScript实现滚动的行为还是有些难度的。CSS Scroll Snap Points 新规范指出你仅仅使用几行简单的CSS代码就可以实现以上所述的功能。新出现的Web技术总是在不断的变化之中，这个规范也处于不断的修改之中。也存在“旧的”与“新的”属性与值。随着浏览器的不断地支持，这个新属性的前景还是不错哒~ 在规范处于中间的阶段，我将带你们获取浏览器对其最大的支持性。Polyfilled 示例下面的示例是一个水平的滚动。随着每一个“面板”视口的宽度以及高度响应(这里感谢vh以及vh两个相关的单位)。这里使用了一个polyfill，但是为了其更好地的发挥作用。这里最好同时书写旧版的“值” ——也就是接下来我所要介绍的。Firefox:这是目前支持性最好的浏览器，所以你可以获取原始的最佳效果感受。Chrome 或者 Opera:对其没有任何的支持，所以你在这两个浏览器中所看到的效果都是polyfill所起到的作用。Edge 或者 IE:也可能不会有什么作用。但是会得到部分的支持。移动设备:iOS 9 支持(在iPhone 6已测试)，但是其行为有些怪异。Chrome/Android不支持，但是polyfill可以起到很好的填补功能(已在Android ...继续阅读 (19)

响应式排版是一个棘手的问题。下面这段代码是我一开始写响应式网站时所能想出来的最好的方法：p { font-size: 16px; } @media (min-width: 800px) { p { font-size: 18px; } } /* Repeat for h1 - h6 and other type groups */在那之后，我学习了更多的有关排版的问题，而且收集了一些非常棒的例子，比如使用相对单位，vertical rhythms和恰当的文本缩放排版。这些新的例子都是非常棒的，它们让我的网站更加美观，更加赏心悦目。但是，实现这些功能的过程却是非常糟糕的。我必须去写很复杂的代码，而且我发现在巨大的时间压力下，我挣扎于编写响应式网站中。在几个月的辛苦工作之后，现在我终于找到了一个可以和各位分享的一个解决方法——Typi。Typi是非常棒的，因为在三个简单的步骤之后，它不仅允许我去使用我曾经学过的例子，同时它还解决了大部分我所遇到的问题。现在，就让我通过我研究响应式排版时用过的例子，来向你具体解释一下这三个步骤。当屏幕的大小增长时，增大字体大小和正文的行高。移动端浏览网页和在PC端浏览网页是完全不同的体验。当你在一部屏幕比较小的移动端上浏览网页时，毫无疑问你会将设备靠近你自己。和移动端相比，你的PC的屏幕会离你更远。因此，相同大 ...继续阅读 (10)

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，首发在imweb和w3cplus两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“——imweb 结一圆形进度条具体Demo效果可见：sheral progress这里主要分析下圆环的实现，蓝色的进度条圆环由左右两边构成，这里以右半边的为例，HTML结构为.circle-right > .right-inner(为了视觉效果，把蓝色放在里面了，而非覆盖在灰色上)，如下图：半圆环由两层结构构成，.cicle-right的大小为50px*100px，超过隐藏，而.right-inner的实际大小为100px*100px，因为父容器宽度为50px且超过隐藏所以只会显示右边一半，如果只是这样的话我们旋转.right-inner的话右边一直会有蓝色的半环。所以我们对.right-inner再做个裁剪处理clip: rect(0, 50px, 100px, 0);，这样导致整个.right-inner圆环只有左半边可见，然后加上我们父元素是在右半边且多余隐藏，所以默认看不到我们的蓝色圆环，如要看到蓝色圆环部分只有将.right-inner左边部分旋转到右边父元素的范围内，核心代码如下：.circle-right{ width: 50p ...继续阅读 (32)

可缩放矢量图形(SVG)作为当今新兴的图形格式，在Web应用中往往更受偏爱。你是否也放弃了icon font或者因为浏览器对SVG良好的支持使其取代了旧的jpg、gif以及png图像格式？接下来就让我们看看这将如何影响用户的辅助功能(AT)以及如何确保每个用户都可以拥有良好的用户体验。图形以及可替换文本在开始这篇文章之前，我们先考虑一下图形、可访问性以及可替换文本。1. 图形是否需要可替换文本?如果图形纯粹用于修饰，其并不需要可替换文本。所有的<img>标签均需要合法有效的alt属性，但是属性值为空<img src="pathtofile.svg" alt="">，仍可验证。2.图形上下文以及文本设置?如果图形旁边具有文本/内容显示了可替换文本，这时不需要额外添加文本提示。如:那么什么情况下需要使用alt属性进行图形的可替换文字的提示呢(参考示例4)？根据图形的内容，你可以采取不同方式进行处理:3. 图形是否有功能？如果有的话也应该传送给用户例如，并不是完全按照图标所表示的含义进行标记:不好的示例:<a href="http://codepen.io/username"> <img src="codepen_icon.png" alt="CodePen Logo"> </a>呈现用户一些文本信息:好的示例:< ...继续阅读 (20)

@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》。整个PPT中介绍了一些前端开发中使用到的一些黑魔法，当初看的时候特别的带劲。一直想将里面的内容整理出一篇文章出来，但一直没整，趁最近休假的闲暇时间整理了一下。如果你的英文够好，可以直接听原作者分享的视频：对应的PPT:当然，如果您愿意花时间阅读下面的内容，我会感到非常的开心。同时我也希望下面的内容对您有在平时的工作当中有所帮助。链接嵌套众所周之，在前端开发当中，超链接<a>标签嵌套<a>标签会出问题：浏览器解析的时候，将它们解析成不嵌套的。来看代码：<a href="#url1">When the crisis was over, <a href="#url2">Mr. Jones</a> left the region immediately.</a>浏览器解析上面的HTML代码将会变成这样：<a href="#url1">When the crisis was over,</a> <a href="#url2">Mr. Jones</a> left the region immediately.如 ...继续阅读 (20)

sheral是什么简单来说，sheral是个UI库，目前拥有25+常用移动端组件（如btn,card,media,nav,dialog,toast等），同时允许用户非常方便扩展及定制属于自己的组件。但是sheral决不只限于UI库，它还拥有了30+ Sass 的基础mixin或%的封装及其他基础能力，有了这些基础能力，不仅快捷便利，更是拥有了更多扩展可能。下面是sheral的三张UI截图：虽然UI部分从效果上看与其他的UI库没有什么特殊区别，都是移动端重构需要面对的一些常见的页面效果。但是表面的相似，并不代表本质的类同，只有深入代码才能发现不一样的惊喜。sheral的设计思想虽然目前网上的UI库众多，但是下定决心再造个轮子，也并非等闲之事，当然更不能生搬硬套为了UI而UI，于是在创造sheral的同时，更要赋予其一个思想灵魂。sheral整体设计思想主要分为基础功能部分和UI组件部分，其中基础功能部分由sandal来承载，而UI组件就是基于sandal提供的基础能力实现的UI（一如jQuery和插件的关系，sandal就如jQuery，而一个个组件就如一个个扩展的jQuery插件），如下图：sandal负责基础通用兼容等基础能力处理，犹如人体的心脏，而components为一个个UI组件，如人体的四肢百骸。由心脏sandal向components四肢百骸提供动力，这样就激活了整个s ...继续阅读 (32)

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，首发在imweb和w3cplus两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“——imweb 结一本篇主要从Icon及图片说下移动端重构碰到的一些问题及实践方法。Icon对于Icon的问题多数都集中在颜色和大小上，所以sheral采用了SVG Icon和CSS绘制的Icon，关于SVG Icon网上已经有很多文章了，所以这里主要介绍绘制Icon的一些技巧，如下以搜索图标为例：// icon search .icon-search { position: relative; &::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid currentColor; height: 12px; width: 12px; box-sizing: border-box; border-radi ...继续阅读 (28)

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，首发在imweb和w3cplus两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载。“——imweb 结一form大概要实现的效果如下图（具体demo可见sheral form）：粗略一看，跟line list差不多，好像可以直接套用，但是深究起来还是有那么些不同的，大概有以下几点用户体验差别：输入框可点击范围右边的箭头可点击范围line list设计95%都是整行点击，所以不管你点哪，都是触发整行的点击事件，右边的箭头就是个指引而已，所以伪元素生成是没有问题的；而form就不一样了，右边箭头是真的要挂载事件的，所以除了直接使用元素外，点击范围一定要设计合理，总不能箭头多大就多大，那操作起来就不方便了，同理input框我们也需要设计成整行的高度，方便点击输入。以电话为例，既可以手动在input框输入，也可以点击右边的箭头去通讯录选择，所以单纯的复制line list过来是行不通的，下面从HTML及SCSS代码简单分析下。从HTML结构上，大体分为三列，分别为label，表单元素及右边附加部分.form-item label.item-label .item-field input:text.f-text ...继续阅读 (24)