键盘的方向键控制div 进行上下左右移动，上左下右等斜方移动

写这个东西很简单，主要是组合键的处理，div移动的方式有很多，我用的最简单的方式就是 父容器relative，需要子滑块absolute。 这样控制子滑块的left 和 top 就可以控制它移动了。 组合键的方式也很简单，当 keydown 的时候，将keyCode 放入一个Set里面 ， 然后将 将这个set遍历 进行移动操作， 如果...

2017, Jan 21   —  3 minute read

ICONO 纯 CSS 绘制的一套图标库

说明 ICONO是一套使用CSS 绘制的图标库。 优点是不包含任何其他依赖，体积较小min+gzip后只有 7kb，包含137个图标，但是CSS图标的缺点也很明显，不能像字体图标一样那么简单就能修改图标大小。CSS绘制的图标，修改大小只能通过一些其他的方式，我是用 CSS3 的 transform:scale(0.5) 来进行图标的大小修改。 我使用ICONO作为我博客前端的图标库使用。 这里整理了一个 class 对应的图标表，方便自己使用这些图标。 ICONO 图标名称对应表...

2017, Jan 20   —  2 minute read

SEO优化 - 使用nodejs动态生成网站sitemap.xml 优化抓取

主要讲一下如何用Nodejs + express + sitemap.js 来动态生成 sitemap.xml。 自己的博客前端动态生成 sitemap.xml 来让搜索引擎（google_site:diamondfsd.com）抓取，生成了 sitemap.xml 过后，果然自己博客的收录速度快了很多。 下面就简单的介绍一下 sitemap.xml 的作用以及...

2017, Jan 19   —  2 minute read

javax.net.ssl.SSLHandshakeException - Received fatal alert - handshake_failure 邮件发送失败

今天在写邮件发送的时候，报了一个错误javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure。 看字面上意思应该是握手失败。查了一些资料，是因为Java8开始禁用了 RC4 加密方式。而刚刚好，QQ的服务器用的就是这种方式。 这就很尴尬了，最后找到两个方法来解决这个问题。 方法一、 跳过 JCE（java加密组件） API 参考stackoverflowlink 这种方法比较简单，...

2017, Jan 17   —  2 minute read

Nuxt.js教程之 —— Nuxt的路由生成规则

Nuxt.js 帮助我们集成了路由的功能，只要掌握一些基本要点，就能创造出自己想要的效果，这一篇文章主要就是讲nuxt的几种路由规则。 基本路由 nuxt.js 会根据你项目目录下 pages 文件夹内的 *.vue文件来自动生成 vue-router 路由配置。 例如如下目录 pages/ --| team/ -----|...

2017, Jan 15   —  4 minute read

Nuxt.js - 基于Vue的服务端渲染框架

博客的前端想了很久，要用什么框架。 之前一直用Vue在做一些Web应用，Vue从2.0开始支持 SSR（Server Side Render 服务器端渲染），于是萌生了用Vue来做我的博客前端框架。可是仔细一看，Vue2的SSR配置太过于繁琐，于是就先用 pug/jade 来做我前端的模板引擎，直接用 express 来完成了博客前端的初版。 有一天，无意中发现了，有nuxtjs，这样一个框架，看着官网的例子，只需要简单配置，就能够写出一个服务端渲染，客户端单页面的webapp。着实满足了自己的需求，于是这里分享一些使用 nuxtjs 中的一些经验和趟过的一些坑。写这篇文章的时候，Nuxt的最新版本是0.9.5，相信很快就能迎来1.0的发布。 如何开始 方式1...

2017, Jan 13   —  1 minute read

什么是NPM, 为什么要用NPM来管理包

NPM 全称 node package manager， 是 nodejs 的包管理工具。npm的出现，使得我们前端开发者可以更好的引用别人的代码，还可以很方便的分享自己的代码。并且可以很轻松的更新自己分享出去的代码。如果你学过java，那一定对maven并不陌生，npm和maven功能上大体相同，可以毫不夸张的说，npm就是nodejs中的maven。 npm init（创建一个简单的npm项目） npm最基本的一个命令，就是 npm init ，输入这个命令后，npm会引导你输入一些内容 name...

2017, Jan 07   —  2 minute read