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

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

3 minute read

ICONO 纯 CSS 绘制的一套图标库

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

2 minute read

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

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

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 这种方法比较简单,...

2 minute read

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

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

3 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...

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...

2 minute read