将Markdown代码块转换成可运行实例

之前在文章中插入示例DEMO是通过异步加载codepen来实现的,但是受制于网络条件,有时候加载缓慢,甚至无法加载。就想着将一些简单的示例直接在Markdown中写为HTML代码输出到前端页面运行,可是这样一来,不仅让Markdown失去了严谨性和优美性,而且如果不小心写了一个可能污染全局的样式或者脚本,那就翻船咯~
但是Markdown最终是要转换成HTML的,因此只要在Markdown的转换过程中做点手脚,再配合上Shadow DOM这个魔法盒子将示例代码运行在一个沙箱中,问题就能得到解决。

炫彩字实现的几种方案

看到这个标题的时候,很多人可能会像我一样,脑海里会一下子跳出CSS3的方案来。的确如此,CSS3是实现渐变文字最简单直接的方案,本站就有很多用CSS3实现的双色水平渐变的文字实例。我这里把描述突然从炫彩字转到了渐变字,两者的概念一样吗?我不知道,可能只是各个行业的叫法不一而已。我所在的行业是为LED显示屏提供云节目制作和发布服务的,行业内把这种文本称之为炫彩字媒体,比如大街上司空见惯的显示屏上写着诸如“欢迎光临”的五彩斑斓的文字。受阻于业务需要,CSS的方案是我们最先Pass掉的,为什么呢?

前端跨页面通信技术

在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。

正如下面这个例子:我在列表页点击“收藏”后,对应的详情页按钮会自动更新为“已收藏”状态;类似的,在详情页点击“收藏”后,列表页中按钮也会更新。

基于Webpack/TypeScript/Koa的环境配置

TypeScript是一种开源编程语言,在软件开发社区中越来越受欢迎。TypeScript带来了可选的静态类型检查以及最新的ECMAScript特性。
作为Javascript的超集,它的类型系统通过在键入时报告错误来加速和保障我们的开发,同时越来越多对的库或框架提供的types文件能够让这些库/框架的API一目了然。我对这门语言垂涎已久,但是迟迟无法找到练手的地方。
很显然的,个人博客又一次的成了我的学习试验田😸。我放弃了上一版Vue单页面的框架,改为基于TypeScript/Koa的多页面应用。在改造的过程中,我试着将服务端(Koa)代码以及前端代码都使用TypeScript来开发,中间使用了webpack作为开发时前后端的桥梁。

HTML原生组件

HTML5中有很多十分有趣的标签,相比于article/section等这些我们所熟知并且已经应用的标签,还有些标签或者因为兼容性,或者因为还处于草稿阶段而不那么为人所知。在使用Bootstrap/Element等UI组件时,常常看到某个标签上会应用一些如role="dialog"的不常见的属性,这是因为HTML语义化的需要。role属性主要供有障碍人士使用,作用是告诉如屏幕朗读程序等辅助程序当前元素所扮演的角色。由于HTML5标签本身已经实现了语义化,role属性不建议被添加。而对于一些老浏览器或者一些模拟元素(如div模拟dialog),role属性则应该被注明。Bootstrap中有很多注明了role属性的组件,而这些组件有一部分已经被HTML5所实现,并已经标签化,如dialog,progress等。当然,这些标签的原始样式各个浏览器不统一,并且可以说很简陋,对此,可以通过一些自定义CSS样式来进行优化。

特别说明:本文介绍的标签,目前兼容性都很差(虽然部分标签有对应的polyfill),仅供学习和了解,请勿用于生产环境。同时,DEMO仅限Chrome浏览器预览。

前端魔法堂——异常不仅仅是try/catch

编程时我们往往拿到的是业务流程正确的业务说明文档或规范,但实际开发中却布满荆棘和例外情况,而这些例外中包含业务用例的例外,也包含技术上的例外。对于业务用例的例外我们别无它法,必须要求实施人员与用户共同提供合理的解决方案;而技术上的例外,则必须由我们码农们手刃之,而这也是我想记录的内容。
我打算分成《前端魔法堂——异常不仅仅是try/catch》和《前端魔法堂——调用栈,异常实例中的宝藏》两篇分别叙述内置/自定义异常类,捕获运行时异常/语法异常/网络请求异常/PromiseRejection事件,什么是调用栈和如何获取调用栈的相关信息。
是不是未出发就已经很期待呢?好吧,大家捉紧扶手,老司机要开车了^_^

知识需要积累。

打开有道云笔记,在前端目录中已经有约30多篇来自工作中,项目中或者书本中的知识点总结,大概看了一些,大部分都是JavaScript相关的知识点,css不多,这里筛选出一些来,按照时间顺序汇总分享出来。文章没有具体内容,也没有章节顺序,仅仅是一些知识点的碎片或者理论化的论点。时间跨度较长,可能有些知识已经过时或者本身总结过程中有错误或遗漏,请指正。

如何实现一个颜色选择器

在开发公司UI组件库的过程中,颜色组件ColorPicker由于时间关系没有去深入研究,看着花花绿绿的色谱图,以为实现起来会很复杂,就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了,这篇文章也在我的博客中以草稿形式(只有标题没有内容,当时是做了一个记录,想着后来有时间了去研究,目前这种草稿还有很多😂)存放了半年了。前段时间请教了公司UI同事一些颜色相关的概念,又去搜索了下这方面的知识,收获还是蛮大的,尤其是知乎色彩空间中的 HSL、HSV、HSB 有什么区别?这篇提问中,@Forrest近乎大白话的回答,超赞👍。

JAVASCRIPT学习笔记之强制类型转换

最近在读《你不知道的javascript》系列图书,收获蛮大,感慨也挺多的。
是的,关于javascript,你不是不知道,而是真的不知道。🐶
就比如类型转换,从开始到看完到第二第三第N遍,我经历了如下的心路历程:
这有什么不知道的 → 一脸懵逼 → 有点意思 → 卧槽,怎么这样? → 原来是这样 → 靠,还是坑...
真可谓是不学不知道,一学吓一跳。
为了避免再次入坑,这里做个总结,不,了结。

Vue实现一个分页组件

分页是WEB开发中很常用的功能,尤其是在各种前后端分离的今天,后端API返回数据,前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代,分页功能都是必不可少的。
分页大多数(基本上)情况下都是对异步数据列表的处理,这里首先需要明白一下分页的流程。
在已知每页显示数据量pageSize以及当前页码pageIndex的情况下:

Vue2.0利用vue-resource上传文件到七牛

关于上传,总是有很多可以说道的。
16年底,公司项目番茄表单的前端部分,开始了从传统的jqueryvue 2.0的彻底重构。但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化。为什么呢?因为兼容性。没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器。否则,上传部分完全可以利用Vue-Resource以及FormData来抛开对FileAPI的依赖。这让我深感遗憾,幸好这个简单的遗憾在个人博客Vue化重构的时候得以弥补。

JavaScript学习笔记之Dom知识点总结

JavaScript的window对象对应着浏览器窗口本身,因此这个对象的属性和方法统称为BOM(浏览器对象模型),如window.open(),window.location等。

JavaScript的document对象是指文档对象模型,主要是处理网页内容。DOM(Document Object Model)即文档对象模型,是针对 HTML 和 XML 文档的 API 。字母D指document(文档),字母O指object(对象),字母指Model(模型)。DOM 描绘了一个层次化的节点树。节点表示一个连接点,文档是由节点构成的集合,DOM的节点主要分为三类:元素节点、文本节点(不是文本内容)、属性节点

微信公众平台开发 JS-SDK开发(图像接口实例)

本文内容已过于陈旧,请以最新微信文档为准

本文并非是对微信JS-SDK说明文档的复制,而是通过一个简单的例子来更深入的了解使用微信JS-SDK,具体文档请参考官方说明文档《微信JS-SDK说明文档》。微信公众平台面向开发者开放微信内网页开发工具包(微信JS-SDK),通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

微信JS-SDK提供的11类接口(分享接口、图像接口、音频接口、智能接口、设备信息、界面操作、地理位置、微信扫一扫、微信小店、微信卡券、微信支付)在使用方式上完全相同,唯一需要注意的是,这11类接口并不是都开放的,有些接口非认证用户是没有权限的,比如分享接口,小店接口、卡券接口、支付接口则必须通过微信认证后才能使用。具体权限问题可参考你的接口权限表