akira_cn 发布于 06月26, 2017

漫谈 JS 函数式编程(一)

原文:https://www.h5jun.com/post/js-functional-1.html

这可能是最简单易懂的函数式编程介(扯)绍(淡)了

目前前端界(以及其他一些领域)对函数式编程大体上两种态度,一些人是觉得函数式编程特牛逼,尤其是现在许多新生的框架和库都在标榜自己的函数式特征。而另一些人,又觉得函数式编程学起来很难,而且似乎也没有什么卵用,理由是在自己经历的项目里面很难看到具体的函数式编程应用场景,甚至其中许多人认同一个观点,觉得函数式编程只适合于学术研究,很难在工程项目中实际使用。

不管你在阅读本文之前属于哪一种人,又或者你是刚接触函数式编程的新人,都没有关系。本文不是研究函数式编程范式的学术研究,而函数式编程作为一个可以说是程序设计理论中最古老的编程范式,在它几十年上百年的发展历史中,已经积累了大量的资料和素材,对于想要在学术领域里完全弄明白它的同学,完全可以在网上、书店里找到各种资料。本文的重点不在于概念,而在于实战。因此,你不会听到太多各种函数式编程的名词讨论,比如诸如 Curry、Mond 之类的专业术语。相反,我们主要来讨论函数式编程在前端领域内使用的一些实际例子,了解为什么前端需要学习函数式编程,使用函数式编程写代码能给我们带来什么。如果弄明白了这些,那么关于函数式编程不实用的谣言也就不攻自破了。

阅读全文 »

公子 发布于 06月18, 2017

SVG动画实践

原文:https://imnerd.org/svg-animation-in-action.html

SVG 是基于 XML 的矢量图形描述语言,可以近似理解成 HTML,所以能和 JS 以及 CSS 进行交互。 特别是 CSS,配合 CSS Animation 就能实现一些令人心旷神怡的动画,这实在是让人兴奋。下面我们就来看看 SVG 配合 CSS 实现动画的一些方法。

本文内容主要是我之前分享的文字版,若想看重点的话可以看之前的 Slide:

也可以查看分享视频:http://cloud.live.360vcloud.net/theater/play?roomid=2079

阅读全文 »

akira_cn 发布于 03月08, 2017

使用 webpack2 和 NPM Scripts 进行 JavaScript 组件开发

原文:https://www.h5jun.com/post/using-webpack2-and-npm-scripts.html

最近 webpack 成为非常流行的打包工具,很多项目都在使用它。在我们进行 JavaScript 独立组件开发的时候,如果我们想要使用语言新特性,又想发布的时候产出兼容性好的代码,那么使用 webpack 就能够很大程度上帮助我们实现这一目标。

现在让我们来看看究竟该怎么做吧。

阅读全文 »

akira_cn 发布于 03月07, 2017

用60行代码实现JavaScript动画序列播放

原文:https://www.h5jun.com/post/sixty-lines-of-code-animation.html

最近在给学生上课,上周六的第一堂课是关于 JavaScript 动画的内容,其中包括一些简单的动画,比如匀速或者匀加/减速的运动,也包括复杂一些的组合动画。而动画的基本原理,在我之前的文章已经有了详细的介绍。在这里,我想谈一谈的是,我们可以如何针对现代浏览器设计更加简单的 API,来实现动画的序列播放。

阅读全文 »

akira_cn 发布于 02月23, 2017

轻松管理你的 Node 版本

原文:https://www.h5jun.com/post/manage_node_with_n.html

玩 Node.js 的小伙伴们都知道,现在 Node 的版本更新很快,目前最新稳定版已经更新到 v7.6.0 了,而生产环境一般选择使用 LTS(Long-term Support)版本,目前最新的是 v6.10.0。

新版的 Node 7.x.x 有非常有用的更新,那就是支持了 --harmony-async-await。这样就不用依赖 babel 来使用 async/await 特性了。

但是,如何让 7.x.x 和 LTS 的 6.x.x 并存呢?就需要用 Node 版本管理工具了。

阅读全文 »

akira_cn 发布于 01月17, 2017

5分钟现场撸代码——谈总结会抽奖程序

原文:https://www.h5jun.com/post/luckey-draw-in-5-minutes.html

昨天给奇舞团小伙伴们开年度总结会。JK大大为我们捐了10个小水滴摄像机,在开会前5分钟,裕波临时说要写一个抽奖程序,现场抽10名中奖的小伙伴,于是这个抽奖任务就理(莫)所(名)当(其)然(妙)地落到了我这个团长的头上。

闲话少说,那么如何在开会前现场写一个抽奖程序,满足这一要求呢?

阅读全文 »

zhengqingxin 发布于 11月13, 2016

Chrome Dev Summit 2016 内容整理(部分)

原文:http://www.zhengqingxin.com/post/cds.html

Progressive Web Apps

今年如果你关注过 Chrome 开发团队的话,那一定或多或少的会听到过 Progressive Web Apps(PWA),实际上,今年 Chrome 团队可谓是 倾尽全力的推广 PWA,从上半年的 Google IO 大会关于 各类有关 PWA 的 9 个专题,直到今天刚刚结束的,基本是 PWA 推广大会的 CDS,可见随着 PWA 技术的成熟以及浏览器的支持度提高,不久必将会迎来一次爆发。如果你目前还不了解什么是 PWA ,请去 这里 自行补脑,这里我简单来说,PWA 就是能够提供类似像 Navive App 一样体验的 Web App。它主要有几个特点:

  • 可以添加到桌面,文艺点说就是具有可安装性
  • 离线能力
  • 消息推送
  • 安全
  • 响应式

博主凑热闹,最近把博客添加了离线和添加到主屏幕功能,如果你的手机支持(安卓手机新版 Chrome,目前苹果还不支持),当然,或者是 PC 端的 Chrome,欢迎体验。

好了,废话不多说,这次大会在 youtube 上实时更新,我趁热挑选了自己感兴趣的几个主题,整理了主要内容,由于时间比较短,有些内容只是知道了概念(甚至有些只知道了个新名词),如果不对,欢迎大家留言指正,我后面也会陆续更新。

阅读全文 »

zhengqingxin 发布于 11月05, 2016

【Service Worker】生命周期那些事儿

原文:http://www.zhengqingxin.com/post/lifecycle.html

生命周期是 Service Worker 中比较复杂的一部分,如果你不知道它什么时间将要做什么,以及它带来的好处,那么你可能会有一种感觉:就是它一直在和你较劲。如果理解它的工作机制,你就可以给用户提供完美的,无感知的更新体验。 这篇文章是 Chrome 团队最近总结的一片文章,配合例子讲述生命周期,让我们更容易理解,也解决了我之前开发中遇到的一些困惑,所以决定翻译出来。此处 阅读原文

阅读全文 »