Socket.IO 订阅 Redis Channel

Node.js Redis Socket.IO NPM

在Node.js程序中,可以借助Socket.IO来构建实时应用。 然而有时候后台与Socket.IO是异构的,比如Java、Python的Web后台。 这时可以利用Redis的订阅/发布机制作为中转,连接异构的后台和Socket.IO服务。 本文介绍如何在Socket.IO中订阅Redis Channel。

至于如何在Java/Python/C#中发布消息到Redis Channel,请参照对应语言的Redis SDK。

Github Pages (Jekyll) 自动生成文章标签

Bash Github Vim grep awk sed JSON Jekyll

在Github Pages上写博客快三年了,为文章添加标签一直是一件困难的事情。 由于Harttle一直在Unix+Vim做开发和写博客, 所以写了一个『Bash脚本』来为文章生成标签列表, 并为Jekyll项目写了一点『Vim插件』,以便在编辑文章时一键生成标签。

为什么需要生成标签?

并不是所有人都有这样的困惑。对我来讲Jekyll最不方便之处就是『为文章添加标签』。 原因有二:

  1. 标签名不统一。同样的标签经常会因大小写、中英文、连字符等原因被识别为不同标签。
  2. 提取标签困难。写完文章后需要仔细挑选标签,并参考以往的文章标签, 这一过程在标签变多时非常困难。

用怎样的策略生成标签?

既然这件事情一定要自动化,那么用怎样的逻辑生成标签呢? 想到提取标签,第一印象便是统计词频。 然而词频最高的词语往往是语言表述相关的东西,但它们不是文章的重点。 下面将会看到我们需要一个标签库、一个Bash脚本、再加一个Vim插件。

寻找并删除Git记录中的大文件

Shell Git Github awk grep

最近发现HarttleLand的Git仓库已经达到了142M,严重影响Fork和Clone。 今晨Harttle从Git记录中定位了数百个大文件并将其删除,现在仓库恢复了27M的大小。 借此机会,本文来介绍查找和重写Git记录的命令:git rev-list, git filter-branch。 本文用于学习用途,生产环境请考虑使用 bfg 等效率工具(感谢 oott123 的评论)。

CSS控制表格样式

CSS Chrome HTML 伪类 选择符

表格是HTML中用来显示比较密集的信息,在HTML早期就有支持。 表格的HTML标记较其他元素复杂很多,浏览器也为<table>标签提供了不少默认样式, 所以表格的排版行为也较为复杂。 本文讨论了表格的边框模型,以及如何利用CSS3设置条纹样式和视觉反馈。

CSS3 实现导航栏

CSS HTML float inline inline-block 搜索引擎

导航栏是Web中常用的UI组件,在Bootstrap等CSS框架中基本都会提供。 既然导航栏这么重要,下面我们便来手动实现一个导航栏。 这个过程还是需要掌握一些排版技巧和CSS3特性的。

列表样式

导航栏通常使用<ul>来标记:

<ul>
  <li><a>First Item</a></li>
  <li><a>Second Item</a></li>
  <li class="active"><a>Third Item</a></li>
  <li><a>Fourth Item</a></li>
</ul>

首先便要去掉列表的那些默认样式,比如左边的项目标记(小圆点)和边距:

ul {
  left-margin: 0;         /* IE/Opera 默认使用外边距 */
  left-padding: 0;        /* Safari/Firefox 默认使用内边距 */
  list-style-type: none;  /* 左侧项目标记 */
}

这样便去掉了浏览器给<ul>设置的默认样式了。 至于如何自定义左侧的项目标记,可参考那些 CSS 背景图的技巧一文。

玩转超链接的样式

CSS HTML inline-block white-space 伪类 字体 盒模型 选择符

超链接虽然不起眼,但它却是万维网(Web)的基石,它使得用户可以在整个万维网进行导航。 链接的默认样式却很低调,在富有设计感的网站中通常会重写链接的样式。 下文介绍常用的一些链接样式技巧:链接状态选择符、自定义下划线、设置外链样式、按钮的实现等。

链接状态选择符

超链接标签有很多状态:未访问、已访问、悬停、激活。这些都可以通过CSS伪类选择符来识别。 其中悬停和激活是一般HTML元素都具有的状态,对于链接而言,当鼠标悬停时:hover生效, 点击后:active生效。比如我们设置未访问的链接呈蓝色,已访问的链接呈绿色:

a:link {color: blue;}
a:visited {color: green;}
a:hover, a:active {color: red;}

那些 CSS 背景图的技巧

CSS HTML float 搜索引擎

HTML的精髓在于文本的、结构化的数据格式。 这样的设计使得搜索引擎、屏幕阅读器、文本处理软件能够非常方便地读取信息。 尤其是CSS样式的分离与HTML5语义标签的提出,使得HTML的这一特性更加明显。 然而对于Web设计师,他们需要除文本外更加丰富的表示形式。 幸运的是CSS的分离,使得我们在不添加标记的同时,可以在页面上显示图片。 下面来看看这些有用的CSS背景图技术。

导航: 上一页 下一页

加载中...

🔝