现代 CSS

TypeScript初识

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。

前端开发中的一些黑魔法Pt2

上一篇介绍了前端开发中的九个黑魔法,比如链接的嵌套、破裂图片美化、表格列高亮显示、内联文本背景颜色设置、响应式EDM等,那么这篇文章继续根据@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》往下梳理,希望对您平时开发有所帮助。

CSS Scroll Snap Points简介

介绍这个新CSS属性之前,我想要先讲一下使用JavaScript实现的一个功能—— 将一个元素锁定在滚动视窗之中。众所周知,使用JavaScript实现滚动的行为还是有些难度的。CSS Scroll Snap Points 新规范指出你仅仅使用几行简单的CSS代码就可以实现以上所述的功能。新出现的Web技术总是在不断的变化之中,这个规范也处于不断的修改之中。也存在“旧的”与“新的”属性与值。随着浏览器的不断地支持,这个新属性的前景还是不错哒~ 在规范处于中间的阶段,我将带你们获取浏览器对其最大的支持性。

我所知道的所有的响应式网站排版

响应式排版是一个棘手的问题。我学习了很多的有关排版的问题,而且收集了一些非常棒的例子,比如使用相对单位,vertical rhythms和恰当的文本缩放排版。这些新的例子都是非常棒的,它们让我的网站更加美观,更加赏心悦目。但是,实现这些功能的过程却是非常糟糕的。在几个月的辛苦工作之后,现在我终于找到了一个可以和各位分享的一个解决方法——Typi。

具有可访问性的SVG

可缩放矢量图形(SVG)作为当今新兴的图形格式,在Web应用中往往更受偏爱。你是否也放弃了icon font或者因为浏览器对SVG良好的支持使其取代了旧的jpg、gif以及png图像格式?接下来就让我们看看这将如何影响用户的辅助功能(AT)以及如何确保每个用户都可以拥有良好的用户体验。

前端开发中的一些黑魔法Pt1

@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》。整个PPT中介绍了一些前端开发中使用到的一些黑魔法,当初看的时候特别的带劲。一直想将里面的内容整理出一篇文章出来,但一直没整,趁最近休假的闲暇时间整理了一下。

JavaScrit的变量:如何检测变量类型

在《变量值的数据类型》一文中,了解到了JavaScript的变量主要有基本类型(undefinednullbooleannumberstring, ES6中还新增了Symbol)和引用类型(对象、数组、函数)。但在JavaScript中用户定义的类型(object)并没有类的声明,因此继承关系只能通过构造函数和原型链接来检查。而在这篇文章中,主要整理了在JavaScript中如何检测一个变量的类型。

【转载】抛弃变量,编写更加可读的JavaScript代码

理解一段代码最大的阻碍是大量的变量。而变量可以引入状态,这又将成倍的增加复杂性。每一个变量都使得理解代码更加困难。一个布尔值可以有两个状态,两个布尔值有四个。如果你的方法里有十个布尔值的话,它们可以产生1024种不同的状态。这远远超出人们的理解范畴。正确划分代码的作用域以及利用常量取代变量可以大大增加代码的可读性。从长远来看,几乎在所有情况下这都是最重要的。

重新创建Twitter点赞动效

最近,我在CodePen上看到了一个Twitter心形点赞动画。一般,如果我有时间就会研究案例代码,看是否可以进行利用或更改。在这个案例中,我很惊讶的看到演示使用的是Sprites图片。后来我学习了Twitter对其实现的原理。当然,这可以不使用图片就可以实现,不是吗?

JavaScript的变量:变量提升

在《JavaScript变量:变量声明》一文中了解了,在JavaScript中可以通过关键词varletconst来声明一个变量。并且提到过,使用letconst声明的变量不存在变量提升;而使用var声明的变量存在变量提升。那么什么是变量提升,这篇文章主要来介绍的就是这方面的知识。

页面

返回顶部