现代 CSS

转载

SVG应用指南

我们处于一个用像素来作为度量衡的互联网世界中。 对于一名在互联网世界中工作的设计师和开发者来说, 像素对于我们来说亦敌亦友。 我们希望自己创作出的Web中每一张图片、每一像素都能棱角分明(如网站中的logoicon以及任何修饰性的图片),清晰的在任何设备上展现给用户的同时, 也能尽可能的保证图片的体积来优化性能。而SVG就是解决上面问题非常棒的一个方案。SVG 意为可缩放矢量图形(Scalable Vector Graphics)与屏幕分辨率无关, 体积上能使用Gzip的方式压缩, 而且修改编辑都很方便。本文是SVG在Web开发中一些常见的应用场景、技巧以及使用方法的一个简单的入门指南。

不炫技,SVG+CSS3 旋转动画属性就能实现的梦幻效果

CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移、轨迹、旋转、缩放、斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些基本的动画加以无穷无尽的变换,就已经能做出很多华丽丽的效果了,这篇呢,源于做一个练习时,AI的连续旋转复制功能,试着做了几个动效,简单、省时、高效,最主要的是用到CSS3的transform:rotate()旋转属性,辅以位移和缩放。

前端路由一探

路由,引导、指路之意。譬如我们熟知的路由器,蹦跶在网络层的数据包转发设备,在网络中也是扮演着指路明灯的角色,肩负着将数据包正确导向目的地址的重任。前端路由也借用了这个词,但是承担的工作全然不同,它是服务于客户端浏览器的指路人。所谓的前端路由,拥有这样一种能力:客户端浏览器可以不依赖服务端,根据不同的URL渲染不同的视图页面。

从JavaScript属性描述器剖析Vue.js响应式视图

学习每一门语言,一般都是从其数据结构开始,JavaScript也是一样,而JavaScript的数据结构中对象(Object)是最基础也是使用最频繁的概念和语法,坊间有言,JavaScript中,一切皆对象,基本可以描述对象在JavaScript中的地位,而且JavaScript中对象的强大也使其地位名副其实,本篇介绍JavaScript对象属性描述器接口及其在数据视图绑定方向的实践,然后对Vue.js的响应式原理进行剖析。

Vue.js 定义组件模板的七种方式

在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式):字符串、模板字面量、x-template、内联模板、render 函数、JSF和单文件组件。在这篇文章中,我将通过示例介绍每个选项,并探讨利弊。以便你知道在任何特定情况下最适合的是哪一种。

被誉为神器的requestAnimationFrame

setTimeoutsetInterval不同requestAnimationFrame不需要设置时间间隔。这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详细介绍HTML5新增的定时器requestAnimationFrame

理解setTimeout和setInterval

很长时间以来,定时器一直是JavaScript动画的核心技术。但是,关于定时器,人们通常只了解如何使用setTimeout()setInterval(),对它们的内在运行机制并不理解,对于与预想不同的实际运行状况也无法解决。本文将详细介绍定时器的相关内容。

Vue的双向绑定原理及实现

使用Vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版Vue的双向绑定版本。是不是看起来跟Vue的使用方式差不多?接下来就来从原理到实现,从简到难一步一步来实现这个SelfVue。由于本文只是为了学习和分享,所以只是简单实现下原理,并没有考虑太多情况和设计,如果大家有什么建议,欢迎提出来。

Vue双向绑定的实现原理Object.defineproperty

2016年,Vue.js可谓是大放异彩,以迅雷不及掩耳之势赶React超Angular,用惯jQuery的我一下子被Vue开篇介绍的双向绑定给惊着了!一下子按捺不住好奇心,打算刨根究底,看看双向绑定到底是怎样实现的?

更快地构建DOM: 使用预解析, async, defer 以及 preload

在 2017年,保证我们的页面能够快速加载的手段包括压缩,资源优化到缓存,CDN,代码分割以及 Tree Shaking 等。 然而,即便你不熟悉上面的这些概念,或者你感到无从下手,你仍然可以通过几个关键字以及精细的代码结构使得你的页面获得巨大的性能提升。这些新的 Web 标准 <link rel="preload">,使你能够实现更快的关键资源的加载,在这个月晚些时候,Firefox 就能看到这些特性。在 Firefox Nightly 版本中或者 开发者版本 已经可以使用这些功能。于此同时,这也是回顾基本原理,深入了解 DOM 解析相关性能的一个好时机。

页面

返回顶部