❗️你有0条未读消息

首先说点题外话,今年本来立了个flag,每周写一篇博客,结果写到第18篇就一直停更到现在了,脸都被打肿了。。。
flag实在是不能立啊。今年上半年忙成狗,还没有拿到好的结果,世事难料啊~唯成长不能停息,下半年博客还是要继续写起来,想分享想记录的还是有很多话题,要克服自己的惰性,虽然下半年还有装修的事要忙,也不要给自己立flag了,尽力克服惰性多分享一些多记录一些吧。

目前HTTPS渐渐普及,Chrome还把http服务的网站标记为不安全。之前把藏经阁升级成了HTTPS,博客呢一直没有弄,有一些外部依赖需要整,不像藏经阁单页应用基本无外部依赖,就搞个证书升级下就好了那么简单。今天抽空把博客也升级成了HTTPS,这里就从头做个简单的总结分享下吧。

一. 申请HTTPS证书

HTTPS为什么能保证信息传输的安全性的理论知识我就不多介绍了,简单说一下,如果要提供HTTPS证书,必不可少的是CA证书。证书就像一个权威机构,你接入了就可以保证数据传输的安全性,因为https协议需要加密传输,加解密的过程需要证书授权。
关键地,一个HTTPS证书通常价格不菲,针对个人站点一般都无法承受。好在阿里云提供针对个人单域名的免费证书服务,貌似腾讯云也有类似服务,这里以阿里云的为例介绍。

  1. 购买证书
    从上面链接进入阿里云证书服务,点击购买证书,选择赛门铁克的免费型证书,如图所示

  2. 补全域名信息
    购买成功后返回证书控制台,点击补全补全域名信息
    这里需要注意的是,阿里云会校验你填写的域名是否真的为你所有,需要你去域名解析处增加一条TXT解析记录,指向所要求的值,按照控制台给出的值进行操作即可

  3. 签发完成
    信息补全后系统会自动检测,满足要求后会自动签发,这个过程还是比较快的。通常添加了解析记录后很快就能收到签发短信。
    在控制台里可以看到已签发的证书。

阅读全文 »

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,每周一篇博,坚持!

  1. 写在前面

    最近在工作中误用了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,每周一篇博,坚持!

续上篇

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

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

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

阅读全文 »