 18/53，每周一篇博，坚持！

今天七月一号了，不知不觉2018年又已经过去了一半了，工作后压力大感觉时间都过的快了些。想来也是，上了年纪了，现在的一年占你所剩人生的比例越来越重了，不由得让人对时间的流逝关注起来。大家都加油，与诸君共勉。

这一篇博文是小而美的库分享第三篇，准备分享一个SVG图标的库，名字叫做Vivid.js。

关于Vivid.js

现如今，我们在web开发过程中，需要用到图标的时候已经很少直接插入一张图片了，更多的时候使用的都是SVG、iconfont形式的图标了。这种图标的好处就是可以自定义大小、颜色等样式。
这其中，国内有阿里开源的阿里巴巴矢量图标库，也有bootstrap之类好用的图标库。
Vivid.js也是一款优秀的矢量图标库，可以作为备选之一。

 17/53，每周一篇博，坚持！

这一篇博文是小而美的库分享第二篇，准备分享一个JS键盘事件捕获的库，名字就叫做KeyPress。

关于KeyPress

我们在web开发过程中，为了给用户带来良好的用户体验，通常就不仅仅需要响应用户的鼠标操作，更多的是需要响应用户的键盘操作。通常这时候我们总是需要各种搜索查询键盘上各个按键对应的键码。
这是一个很繁琐而又没什么技术含量的事。而”KeyPress”这个库基本上就让我们摆脱了查询键码的繁琐过程，托管了我们对键盘映射的响应。
“非常容易使用，大小合理(9kb)，没有任何依赖，健壮性良好的键盘输入捕获JS库”，这是KeyPress的自我评价。

 16/53，每周一篇博，坚持！

(翻译自Github blog)

我很高兴地宣布，微软正在谋求收购Github并且有望在今年年底完成收购协议。虽然最终达成收购还需要几个月的时间，但我们想尽快分享这个消息给大家。

当十年前刚建立Github的时候，我从未想到过这个“标题”。Git是一个强大且优秀的工具（原文niche疑为nice笔误），“云”只是天上的东西，而微软则是一个非常不同的公司。人们谈论到开源和商业的时候，仿佛它们是水火不容的两件事。

 15/53，每周一篇博，坚持！

0. 写在前面

   最近在工作中误用了mysql的in查询，导致了一个线上问题，花了我一个下午的时间排查加修复。mysql算是我的一个薄弱项了，主要是没有系统性的训练过。一些没用过的查询方式使用的时候借助搜索引擎，中文技术领域里一些技术分享还是比较坑的，语焉不详的算是一部分，误人子弟的也不乏其人。

   这篇博文就主要整理一下我所梳理的mysql中in的用法及和find_in_set用法的差异所在。也许网上已经有很多的文章介绍了，但不乏一些介绍不够清晰的，我这里的博文都是经过实践验证的，不敢保证一定做到简洁明了人人能懂，但绝不做误人子弟之事。

   阅读全文 »

 14/53，每周一篇博，坚持！

每周一篇博文的目标还是比较艰巨的，有时候时间比较紧张的时候根本来不及想主题。。

准备开一个系列，介绍下我收藏的那些小而美的JS开源库。这是第一篇，关于一个设计良好的美观实用PC、移动兼容良好的弹框库–notie。

关于notie

众所周知，浏览器默认的弹框–alert是异常丑陋的，我们在业务中通常是不会直接使用alert来显示应用弹框消息的，一般都会重新设计应用自己的弹框来替代之。
notie就是一款用来替代alert的消息弹框库。

 13/53，每周一篇博，坚持！

背景

Mysql一直是我的弱项之一，以前跟数据库打交道比较少，基本只限于基本的操作。现在专职做后端之后，跟数据库打交道的机会多了很多，Mysql这块也在有意识的补强。这篇博客就记录一下最近项目中使用到的CASE…WHEN的使用。

很多情况下，我们会用到映射结构，如将某个类型描述映射为某个数字，常见的如页面下拉框中通常我们会把文本赋值具体显示的值，把value赋值映射过的数字，如下代码所示：

1
2
3
4
5
6

<select name="status">
	<option value="0">全部</option>
	<option value="1">试运营</option>
	<option value="2">运营中</option>
	<option value="3">已退出</option>
</select>

我们在代码中拿到了相应的数字通常是使用Switch…Case结构来获取映射的状态值。而Mysql中的CASE…WHEN结构就是做类似的事情。

 12/53，每周一篇博，坚持！

背景

我的工作性质是属于全栈的，也就是前后端都需要干的那种”全干工程师”。在阿里又会用到很多内部自研的框架，有的框架就不那么的好用。如工作中用到的这个前端框架，写的CSS文件不支持@import语法。。。这意味着，如果你想将不同页面间样式的公共部分抽取出来再@import的方式不可行，你只能不停的重复同样的样式代码，丑陋且不可维护。
好在框架支持less等CSS编译语言，而在less中写@import语句是没问题的。于是想到了一个可行的方式：项目维护less样式文件，抽取公共的部分，在需要的地方@import进来，唯一的问题就是需要将这些less文件编译成浏览器认识的CSS。我可不想每次自己来执行编译。

 11/52，每周一篇博，坚持！

续上篇

前面几篇把如何搭建一个评论系统的后端描述了一下，这篇就主要讲一下如何把评论系统的前台搭起来。

第四部分 前端交互及页面UI的实现

前端不涉及应用，主要就是HTML、CSS、JS。
评论系统的前端部分主要包括：

1. 评论框主体
2. 用户登录
3. 评论提交动作
4. 消息提醒
5. 评论信息的渲染
6. 事件注册响应

主要是以上几个部分，还有一些细节部分。前端部分主要是仿造原来畅言的风格，具体的渲染方式，如HTML容器怎么放置，CSS样式怎么编写等细节，本篇就不再赘述，前端的实现“一千个人眼中有一千个哈姆雷特”，同样的效果可以有完全不同的实现方式。

 10/52，每周一篇博，坚持！

续上篇

上一篇里我们主要讲了评论系统的后端应用搭建及主要评论接口的实现，这篇里继续讲一下后端应用里其他一些逻辑的实现，如评论提醒功能。
前端的交互逻辑和渲染放到下一篇里进行。

第三部分 后端应用的其他功能逻辑实现

为了给评论系统提供更好的体验，我们有必要给评论系统添加上消息提醒，这里存在两种场景：
一个是当有评论被回复时，评论者应该收到提醒消息，
二是若评论时选择了记住个人信息，那么在同一个人再次访问时如果有未读的评论消息应该在页面上显示出提醒框。

 9/53，每周一篇博，坚持！

续上篇

上一篇我们主要讲了一下一个评论系统的基本设计思路和数据库的设计，这篇我们主要讲一下如何使用Node.js来构建评论系统所需要的后端服务。

第二部分 搭建后端应用

Express框架介绍

这里我们使用Node.js的Express框架来构建相应的后端应用，相应的准备工作大致包括Node.js环境的安装，npm的安装，MongoDB的安装等，不赘述。

首先我们需要安装Node下的Express框架：

1

npm i express-generator -d -g

上述命令为我们安装了Express框架的生成器，我们只需调用：

1

express comment

即可生成一个comment的Express框架工程的目录。
然后安装工程依赖：

1
2

cd comment
npm install

依赖安装完成后，该目录即已完成一个Express工程的初始化了，启动后就是一个WEB服务器了。

1

npm start

该命令在本地的3000端口启动了一个WEB服务器，可以通过访问：http://localhost:3000来测试下是否正常。

以上只是一个简单的Node.js下Express框架的介绍，详细可以查看官方文档。