使用custom elements创建自定义元素

Web Components 标准非常重要的一个特性是，它使开发者能够将HTML页面的功能封装为 custom elements（自定义标签），而往常，开发者不得不写一大堆冗长、深层嵌套的标签来实现同样的页面功能。这篇文章将会介绍如何使用HTML的custom elements。

gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpack、rollup 和 browserify 三个，Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码。因此，Gulp 构建 ES6 开发环境的方案有很多，例如：webpack-stream、rollup-stream 、browserify等，本文讲述使用 gulp-better-rollup 的构建过程。gulp-better-rollup 可以将 rollup 更深入地集成到Gulps管道链中。

GitHub地址：https://github.com/JofunLiang/gulp-translation-es6-demo

使用 Webpack 与 Babel 配置 ES6 开发环境

Webpack 和 Babel 几乎是现在前端开发必备的工具，Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，Babel 是一个 ES6 编译器，由于目前浏览器对 ES6 的兼容性有差异，无法直接在项目中使用 ES6，需要使用 Babel 编译器转换成 ES5 才能在浏览器中运行。使用 Webpack 和 Babel 也开发了几个项目，使用时间少说也有两三年了，本文就讲解一下使用 Webpack 与 Babel 配置 ES6 开发环境。

使用HTML5原生对话框元素，轻松创建模态框组件

HTML 5.2草案加入了新的dialog元素。但是是一种实验技术。

以前，如果我们想要构建任何形式的模式对话框或对话框，我们需要有一个背景，一个关闭按钮，将事件绑定在对话框中的方式安排我们的标记，找到一种将消息传递出去的方式对话……这真的很复杂。对话框元素解决了上述所有问题。

前端静态资源自动化处理版本号防缓存

浏览器会默认缓存网站的静态资源文件，如：js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰，最常见的问题就是不能及时更新静态资源，造成新版本发布时用户无法及时看到新版本的变化，严重影响了用户体验。

前端JavaScript开发日常技巧

如果你是一个JavaScript新手或仅仅最近才在你的开发工作中接触它，你可能感到失望。所有的语言都有自己的怪癖————JavaScript也不例外，与其他语言相比JavaScript甚至是有过之而无不及。在这篇文章中，我将分享一些JavaScript的怪异行为和一些最常用的技巧，希望我能分享给你一些曾经令我头痛不已的经验。这不是一个完整列表——仅仅是一部分————但希望它让你看清这门语言的强大之处，可能曾经被你认为是障碍或者是你正在困惑的东西。

比较var、let、const的区别

在前端开发工作中，JavaScript 语言是其核心语言。JavaScript 是一门动态弱类型语言，为什么是动态弱类型语言？这是因为 JavaScript 在声明变量时无需严格指定变量类型，且在变量的使用中可以随时显示或隐式变换类型。因此，理解其变量声明语句是非常基础以及非常重要的。而最常用的声明变量关键字是 var,在ES6版本中新增了let和const声明。

Vue组件样式scoped的原理与样式穿透的用法

在Vue文件中的style标签上有一个特殊的属性——scoped。当一个style标签拥有scoped属性时候，它的css样式只能作用于当前的Vue组件。有了这个属性，可以使Vue组件的样式相互不被污染。这就相当于实现了样式的模块化。

初次接触CSS变量

本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大，CSS变得越来越大，越来越多，而且很多时候都很乱，在良好的上下文中使用CSS变量，为您提供重用和轻松更改重复出现的CSS属性的机制。

在“纯粹的”CSS支持变量之前，我们有像Less和Sass这样的预处理器。但是它们需要在使用前进行编译，因此（有时）会增加额外的复杂性。

javaScript识别网址并转为链接

需求

最近项目有个需求：用户发送消息时，如果发送者输入的信息中含有网址文本，要在接受者界面中显示网址链接，点击该链接直接跳转到网页。这个功能和 QQ 发送网址文本的效果类似。