CSS3 target 伪类实现 Tab 标签切换 // Code Redux 

作者:JerryXia | 发表于 , 阅读 (18)

:target 是 CSS3 中新增的一个伪类,用以匹配当前页面的 URI 中某个标志符的目标元素。简单来说,当前页面 URL 下添加 #news 就会定位到 id=“news” 的位置,使用 :target 伪类可以像 :hover 等伪类一样对目标元素定义样式。
W3C 上的用法示例:

See the Pen eNBZvBby leozhang (@leozhang) on CodePen.

Tab 标签切换效果如下:
See the Pen zGoOJPby leozhang (@leozhang) on CodePen.

实现的基本原理:将 tab 内容框设置为绝对定位,然后通过 :target 伪类调整其 z-index 。
...阅读全文

 解决 Ubuntu 15.04 上采用官方源安装新版 mongoDB 失败问题 // Code Redux 

作者:JerryXia | 发表于 , 阅读 (22)
在使用 Nodejs 配合 mongoDB 开发 Web 应用的过程中,install mongoDB 的 Nodejs driver 时的往往需要提前把 MongoDB 安装妥当,而在最新版本的 Ubuntu 15.04 上通过 mongoDB 官方 Doc的引导,安装则会提示无法找到相关的软件。而原因则是「官方的引导教程只支持 LTS 版本,即提供对长期发行版的支持」
解决方案:通过 mongoDB 官方提供的 Debian 发行版的包安装:在 Vivid 版本里,可以使用 Debian 版的包来通过曲线救国的方法来安装 mongoDB添加至软件源列表至 Ubuntu :
echo “deb http://repo.mongodb.org/apt/debianwheezy/mongodb-org/3.0 main” | sudo tee /etc/apt/sources.list.d/mongodb-org-3.0.list
添加相关 Key:
sudo apt-key adv —keyserver keyserver.ubuntu.com —recv 7F0CEB10更新...阅读全文

 Fix a input method problem in Sublime Text 3 // Code Redux 

作者:JerryXia | 发表于 , 阅读 (29)

Sublime Text 作为自己喜爱的跨平台的 The most sexy text editor,一直以来都很受欢迎,尤其是进入 2015 年以后,推翻了自己之前在版本 2 上「万年未更」的方式,3dev版本更新的及其频繁。
事实上,在 Ubuntu 以及其他 Linux 环境下,Sublime text 3 默认是不支持基于 fctix 的搜狗输入法中文输入的,所以对中文开发者来说多多少少,会有些不便。不过有位来自中国的开发者 cjacker编写了一个库文件,通过在启动 Sublime text 时预加载该库的方法,实现搜狗输入法的状态下的 Sublime Text 中文输入。
This is a dirty fix but at least works. cursor position update alsosupported.
Use LD_PRELOAD to reimplement gtk_im_context_set_client_window and setim focus in. use “gdk_region_get_clipbox” to catch ...阅读全文

 初探 HTTP 2.0 // Code Redux 

作者:JerryXia | 发表于 , 阅读 (27)

HTTP 2.0 的出现,相比于 HTTP 1.x ,大幅度的提升了 web 性能。在与 HTTP/1.1 完全语义兼容的基础上,进一步减少了网络延迟。而对于前端开发人员来说,无疑减少了在前端方面的优化工作。本文将对 HTTP 2.0 协议 个基本技术点进行总结,联系相关知识,探索 HTTP 2.0 是如何提高性能的。
初露锋芒https://http2.akamai.com/demo这是 Akamai 公司建立的一个官方的演示,用以说明 HTTP/2 相比于之前的 HTTP/1.1 在性能上的大幅度提升。 同时请求 379 张图片,从Load time 的对比可以看出 HTTP/2 在速度上的优势。

此时如果我们打开 Chrome Developer Tools 查看 Network 一栏可以发现,HTTP/2 在网络请求方面与 HTTP /1.1的明显区别。HTTP/1:

HTTP/2:
多路复用 (Multiplexing)多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。
众所周知 ,在  HTTP/1.1 协议中 「浏览器客户端在同...阅读全文

 Fixing npm permissions // Code Redux 

作者:JerryXia | 发表于 , 阅读 (16)

解决使用 npm Node 包管理器全局安装(npm install -g xxx) 相关 package 时提示 EACCES error 的权限问题。npm 全局安装相关 package 报 EACCES 错误的原因,通常是因为当前用户没有相关安装目录的写入权限。

对于大多数 *nix 系统来说,npm 的安装目录是在 /usr/local 中,具体可以通过npm config get prefix加以印证,如果不是在 /usr/local 下的话,以下方法将不适用。
Step 1:首先更改 /usr/local 中如下目录的所有者
sudo chown -R username /usr/local/lib/node_modulessudo chown -R username /usr/local/sharesudo chown -R username /usr/local/bin(username 可以通过 whoami 查看,具体示当前用户而定)
Step2:更改完成后正常 npm install -g xxx 相关 package 。如果仍然无法安装,继续出现...阅读全文