Happy Hacking!

2015-10-19
学习 React Native for Android:React 基础

学习 React Native for Android:React 基础

React Native 主张用 React 的开发思维来编写 UI 层。因此在学习 React-Native 之前,了解基本的 React 的语法和存在的坑会对今后 React Native 的开发大有裨益。

本文将从一个简单的例子开始,逐步完善我们的程序。在这个过程中,我们将一步步探讨如何用 React 来开发网页应用,以及需要注意的陷阱。与其他教程不同,本文将采用类似 Zed A. Shaw《Learn Code the Hard Way》 系列的案例驱动的形式,从例子开始着手。我相信,掌握一门新技术最好的方法就是自己动手。因此,我并不打算面面俱到的列举所有关于 React 的内容,而更倾向于担任一个引路人的角色:把读者们带到 React 花园的门前,然后让读者们在 React 花园里来一场自助游。为了让这个旅途更加有收获,我会在每节内容的最后安排几个练习,并在最后分享一些值得深入学习的文章和教程。

Read More

2015-10-17
学习 React Native for Android:环境搭建

学习 React Native for Android:环境搭建

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android 。React Native 让开发者使用 JavaScript 和 React 编写应用,利用相同的核心代码就可以创建 Web,iOS 和 Android 平台的原生应用。注意这里的 核心 两个词,它指的是那些底层的、与界面无关的逻辑。与 ionic / PhoneGap 这类 Web App 开发框架不同,React Native 主张使用 React 的开发方式来开发 Native 应用,因为在现阶段 Web App 还无法达到 Native App 的体验。所以,React Native 并不强调 write Once, run everywhere ,而是 learn once, write everywhere :上层使用 JS 和 React 开发不同平台的 UI,下层则可以编写能够复用的核心代码,从而大幅提高开发效率。

关于 React Native 的好处,唐巧在 《谈谈 React Native》 里已经有比较深刻的总结,本文不再赘述。本文将作为一个 React Native for Android 学习系列的一个开篇,从零开始学习 React Native 。我尽量不偷懒,保证文章及时更新。

Read More

2015-10-08
jQuery-based Local Search Engine for Hexo

jQuery-based Local Search Engine for Hexo

早在我最初从 Ruhoh 迁移博客到 Hexo 时,我就有动手写一个本地的搜索引擎的想法。比起使用第三方服务的站内搜索,本地搜索引擎有几个好处:

  1. 更可靠。不用担心由于某些显而易见的原因导致第三方服务不可访问。
  2. 速度更快。不管是 Google 还是 Swiftype ,第三方搜索服务的加载速度总是比较慢,影响浏览体验。
  3. 定制性更强。由于是自己写的插件,检索的具体策略、界面样式都可以自己定义,满足极客们 Bigger than Bigger 的需求。

这个想法起初是受了 Christian Fei 的 Simple Jekyll Search 启发。在了解了它的原理后,我认为在 Hexo 上实现一个本地搜索引擎并不复杂。大致的思路是:

  • 写一个 generator ,生成站点所有文章的索引数据;
  • 当在搜索框中输入关键词时,触发 Javascript 的特定函数,在这个索引数据里头检索包含该关键词的文章;
  • 利用 jQuery 在页面中动态插入检索结果。
Read More

2015-06-02
Dockerize Your Hexo

Dockerize Your Hexo

前言

上篇文章中,我简单提到了在升级 Hexo 3 过程中遇到的一些痛苦。其实还有很多问题没有在上篇文章中提及。比如,我的渲染器使用的是 pandoc ,在 2.x 的时候,hexo-tag-plugins 里头的文字可以通过调用 renderSync 方法传给 markdown 进行渲染,而到了 3.0 ,这些文字无论怎么做都不能被 pandoc 或者 markdown 渲染。

早在我决定挥刀动斧定制我的个人博客之前,我早已经做好了发生这种情况的心理准备。我的博客最早是使用 Ruhoh 编写的,从主题到渲染器进行了大量的个人定制,后面出于种种原因我决定切换到Hexo ,于是我又花了很多力气把原来的博客移植到 Hexo 2.x 上。与其说是移植,不如说是一个基于 Hexo 2.x 的山寨版。现在 Hexo 一旦做了大幅更新,相当于我又得经历和前两次一样的折腾,实在是有心无力呀。考虑再三,我决定放弃使用 Hexo 3 ,而将我的博客所使用的环境 冻结 为 2.8.3 。

但这样又带来了问题:为了方便使用我的主题和插件的朋友们,我已经对这几个项目进行了升级以支持最新的 Hexo 3 。如果我只在我的机器上安装 Hexo 2.8.3 ,那我接下来维护这几个项目就变得非常不方便。

出于以上的原因,我决定使用 Docker 将 Hexo 2 和 Hexo 3 两套写作环境各自打包成镜像。这样,当我需要编写自己的博客时,就使用 Hexo 2 的镜像;当我需要维护几个 Hexo 主题和插件时,就使用 Hexo 3 的镜像。我也顺便将整个过程记录下来,形成此文,以供其他朋友参考借鉴。

Read More

2015-06-01
Speed Up the Rendering Process of hexo 3

Speed Up the Rendering Process of hexo 3

Hexo 3 自从放出更新到现在已经有很长一段时间了,相信很多人跟我一样都经历了一个非常曲折的升级过程。

第一个问题是我所编写的主题和插件全都阵亡了,这个问题在我决定升级 Hexo 之前已经被很多用户轰炸过,于是我花了两个晚上的时间对所有的主题和插件进行了大幅修改和升级。

另一个让我无比郁闷的问题是:官方虽然宣称 3.0 之后站点渲染速度更快了,但实际测试时我发现结果正好相反——全站 168 篇文章,在 Hexo 2.8.3 环境中渲染只需 3~4 秒时间,而更新到 Hexo 3.0 之后,网站的渲染居然花了一个多钟!

为了找出导致这个问题的 bottleneck ,我通过二分的手段很快定位出了问题文章 《ArchLinux安装配置OpenGL》,这篇文章乍一看没啥特别之处,但问题就出在文中这段长长的目录结构图:

Read More

© 2021 wzpan