基于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浏览器预览。

你不知道的CSS(三)

在前面两篇文章《你不知道的CSS(一)》和《你不知道的CSS(二)》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助,本文作为《你不知道的CSS》系列的第三篇文章,将继续在CSS技巧方面进行探讨,不同于前两篇的是,本文将着重介绍CSS中伪类和伪元素在项目中的应用场景。伪类相信大家最熟悉也是用的最多的莫过于:hover, :active, :focus之类的,因为这些在平常的项目中太常用了(然而我目前依然见过还有用js去添加.hover类来变化背景色的同学😴)。而伪元素如:before, :after相信大家也用的烂熟了。 当然对于比较常见的伪类(元素)不在本文的讨论范围类,本文主要介绍一些生僻的但是又非常实用的伪类(元素)。CSS的世界已经变天了,抛开过去,拥抱变化吧~

你不知道的CSS(二)

在上文《你不知道的CSS(一)》中,介绍了兄弟选择器美化表单,font-size:0消除间隙,overflow清除浮动,border绘制三角形等7个实用技巧。由于文章长度限制,还遗留了一些技巧没有介绍,考虑到日后可能会有更多的技巧需要补充进来,便将上文改名为你不知道的CSS(一),名字其实有点浮夸,希望能完善为一个系列,也希望该系列中介绍的技巧能够帮助到更多人解决实际开发中遇到的问题。在这里感谢SegmentFault的小编在微博上的推荐。本文将重点介绍CSS中未知高度容器的垂直居中技巧。同样每个技巧将结合demo或者图示来说明(如果demo无法打开,请自备梯子,原因你懂得🙀)。

你不知道的CSS(一)

CSS的世界是神奇的。
随着各浏览器WEB标准的日趋统一,CSS在WEB世界中扮演的角色也愈发的重要。甚至于在GitHub上出现了You-Dont-Need-JavaScript这样Star近万的优秀开源项目,抛开该项目的实用性不说,项目中的众多的DEMO就已经证明了CSS的强大。
当然,这篇文章不是为了介绍这个项目,而是整理了一些实用的CSS技巧,来解决我们在实际项目开发中遇到的的问题。文章也会长期更新,总结更多的技巧。每个技巧将结合demo或者图示来说明(如果demo无法打开,请自备梯子,原因你懂得🙀)。也许你此刻正在发愁的一个bug可以在这里找到答案😆。

在原生CSS中使用变量

一直以来,CSS作为一种申明式的样式标记语言,很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态。后来随着scss,less等CSS预处理器的出现,我们可以像优秀的开源框架bootstrap那样,通过维护一个_variables.scss变量文件的方式来维护一个庞大的项目。但预处理需要编译,并非CSS原生支持。而现在,我们可以在原生CSS中使用变量了

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

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

不可思议的CSS之clip-path

曾经和某位朋友在聊天中讨论过这样一个话题:综合90%的网站的布局以及页面中的元素不是方的,就是圆的。就像所有的颜色都是由三原色(RGB)构成的一样,所有规则的形状似乎也都是由方和圆组成的;抛开设计效果的好看与否不说,似乎不规则的设计在实现(CSS)成本上也是一个麻烦,毕竟在CSS3之前,我们实现一个圆都要切图,更何况那些复杂的多边形。好在CSS3时代的到来,尤其是CSS3在借鉴并增加了众多SVG属性的今天,使用纯CSS绘制一个多边形已经不再是什么难事。文章中要介绍的clip-path这个属性也是一个借鉴了SVGclipPath的借鉴品(确切的说应该是css clip属性(已被废弃)的替代品,svg clip-path属性的延伸品🙈)。

Vue实现一个分页组件

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

Mongoose简要API

Mongoose是在node.js环境下对mongodb进行便捷操作的对象模型工具

因此,要使用mongoose,则必须安装node.js环境以及mongodb数据库。mongoose使mongodb操作更简单便捷。可以在github中获得其源码,也可以在这里查看api文档,英文的,文档内容较多,因此本文特意总结下mongooseschema数据模型定义以及简单的增删改查api。

HTML5音乐列表播放器SMusic开发总结

前段时间写过一篇介绍简单音乐播放器效果开发的博文《为你的博客添加简单的CSS3音乐播放器》,实现了单曲循环播放效果,这个效果也是我的博客首页一直有的效果,同时文中也介绍了一些简单的HTML5 Audio标签的属性和方法,如 play() , paused()等。当然,之前的效果只适合诸如博客或者某个单页面(如专题页面)使用。而现在的可以称之为完整版的播放器弥补了之前的不足,增加了列表播放,音量控制,播放进度,播放时间以及播放模式,上一曲,下一曲等功能,除了歌词外,基本就是个播放器了(本来就是播放器)。

巧用CSS3滤镜实现图片不同渲染效果

本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。

CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。

目前有grayscale、blur、invert、saturate等10个filter-function。
filter属性目前支持的浏览器较少,chrome,Firefox基本都支持了,IE只有EDGE(这个算IE吗)部分支持。具体兼容性请自行测试一下。这里的Demo在chrome(47.0.2526.80),Firefox(43)上测试通过。先来看一下http://caniuse.com/的兼容性评测:

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

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

知识需要积累。

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

升级总结:phantomjs在Centos上的安装过程

想着在年前把博客更新升级一下,于是顺手修复了一些已知的BUG,优化了留言模块,升级了nginx,更是为了利于SEO,在webpack的编译中加入了prerender-spa-plugin预渲染模块。经本地window主机测试后,一切OK。这便着手在线上Linux主机中配置,nginx, node, mongod 等的升级一切顺利,但就是在项目中 npm install 的时候卡住了,而且这一卡就是一天多!难道是我安装姿势不对,需要起来重睡? 查看npm报错原因,就出现在本文的主角phantomjs上。

关于phantomjs,无论是在之前的项目中写单元测试,录制UIrecorder测试用例时都遇到过,但仅仅也是遇到而已,只以为仅仅是一个依赖模块,照着文档npm install一下,对其甚至连基本的了解都没有,于是问题就出现了。

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

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

看懂前端脚手架你需要这篇webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
Webpack 官网
Webpack 中文指南

Mongoose 多条件模糊查询的实现

这是今天手头项目中遇到的一个问题,关于mongoose如何实现类似于SQL中 nick LIKE '%keyword%' or email LIKE '%keyword%' 这种多条件模糊搜索的问题。 查阅了mongoose文档才得以实现,特此记录一下。

主要用到了query.$orquery.$regex这两个find参数。

其中query.$or用于实现多条件查询,其值是一个数组。相关文档

Javascript学习笔记之正则表达式

关于正则表达式的总结一直在草稿箱里躺了很久了,与本文原作者水墨寒湘(😂 呵呵,不是我水墨寒)类似,之前对于正则表达式也是一知半解,用到就谷娘的那种。直到哪天看了慕课网的《JavaScript正则表达式》的视频,豁然开朗啊,正好在掘金上看到这篇文章,顺手手动编辑转载了,用作复习。在此,感谢慕课网以及原作者水墨寒湘的分享。以下为原文:

正则表达式对于我来说一直像黑暗魔法一样的存在。手机正则去网上搜,邮箱正则去网上搜,复杂点的看看文档拼凑一下,再复杂只能厚着脸皮让其他同事给写一个。从来没有系统的学习过,今天准备拿下它。

CSS3实现京东图片鼠标滑过流光效果

京东首页从1F开始,左侧大图都有一个很有意思的效果,当你的鼠标滑过图片时,会有一层质感很强的流光从左侧不可见位置滑动到右侧不可见位置的效果。相较于淘宝的蒙版效果,个人感觉流光效果更好看一些。因此,本站一些图片也采用了这种流光效果,具体可鼠标滑过博文封面图预览。

流光效果实现起来很简单,主要是利用css3的线性渐变(linear-gradient),2D转换(transform)以及倾斜(skew)配合hover来实现,当然如果想要兼容一些低版本浏览器,可以使用图片代替。因此,结构相对简单,只需要一个图片父容器(.image-light),图片容器(img),以及流光容器(:before:after或其他子标签)。