原文

<Hello World />

如果你深入涉足JavaScript开发领域，难免你会听过：React.js已经进入移动端。1月28号，Tom Occhino--Facebokk软件工程师、React.js Conf 2015 演讲嘉宾，把React Native 公布于众。对比Reac.js，React Native旨于在IOS和Android开发中提供组件式开发。

2011年，Facebook创建一个内部使用的UI库，最终命名为React.js。继收购Instagram，使用React.js构建web应用的Facebook工程师，向流行移动应用致意。2014年5月，Facebook以BSD协议开源了React.js。发布至今，React.js已经迭代很多次，当前版本为v0.12.2(最新beta版v0.13.0)。

Why React Anything?

React.js/React Native ...

前面

仅支持ios8；而且必须有开发者账号，否则编译不通过。

最近想重新学习firefox-ios代码，好久没有更新它的代码，今天git pull 下来后，编译不成功，认真一看发现它使用了Carthage，做为项目的依赖管理工具。

介绍

初学ios，一定也会像原来写java时用maven，写Node时用npm。ios项目是也会有类似工具。

Carthage是非侵入的依赖管理工具，它使用xcodebuild来编译框架，生成二进制文件，然后由用户来选择集成它们（拖拽到你的Xcode项目中）。目前依赖源为github。

安装

pkg安装

去release列表中下载最新版本pkg文件安装

源码编译安装

$ git clone https://github.com/Carthage/Carthage.git
$ cd Carthage
$ make install
$ carthage version

使用

创建Cartfile文件，添加依赖库

github "Masonry ...

参考

介绍

Snap是一个轻量级布局框架，使用优雅的语法封装AutoLayout。Snap拥有自己的布局DSL，它提供一种链式操作描述你的NSLayoutConstraints，使你的布局代码变得简明易读。Snap同时支持IOS和OS X。

Snap使用Swift的特性，例如函数重载，所以它不能在Objective-C中使用。正因如此，我们使用snp_做为前缀，而Masonry使用mas_，所心在你可以在同一项目中同时使用Masonry和Snap。

基于Objective-C，移步Masonry

下载安装

基于不用storyboard开发ios8界面中的代码

下载

在项目的根目录，使用git submobule命令

$ git submodule add https://github.com/Masonry/Snap.git

安装到项目中

Finder中打开Snap，用鼠标拖到项目中

将Snappy.framework添加到项目中

简单示例（添加一个居中的按钮）

不使用自适应布局

上篇RootViewController.swift示例代码为：

override func viewDidLoad ...

这里不讨论 使用xib storyboard和代码编写UI的孰优孰劣。详见iOS User Interfaces: Storyboards vs. NIBs vs. Custom Code

创建新项目

创建新项目，选择Single View Application为模板。

删除storyboard

plist删除key main

新建rootViewController类

代码：

import UIKit

class RootViewController: UIViewController {

    var button: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        button = UIButton.buttonWithType(.System) as? UIButton
        button.frame = CGRect(x: 110, y: 70, width ...

安装node

# MAC
brew install node
node -v
npm -v

# WIN[下载][0]
# 安装cli
npm install -g grunt-cli
npm install -g grunt
npm install -g grunt-init   #编写插件用
grunt --version

基本操作

grunt init

编写插件

git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
grunt-init gruntplugin
npm install

#npm配置代理
npm config set ...

自省

git --help
git add --help

基本操作

git init
git add .
git add -e .
git delete test.txt
git commit -m 'fix sth.'

git status
git log
git reset
git diff
git checkout

远程操作

git clone https://github.com/stormhouse/pyStudy.git
git pull
git push -u origin master

查看 ...

thanks kirupa

链接鼠标悬停状态类似于卡片盒子。你可以对它做无穷无尽有趣得事。通过学习本章你可以做一件是当鼠标悬停链接时让某背景色滑入视野。

下面，你将看到我所说的例子：

当你将鼠标悬停到Jerry, George, Kramer, 和Elaine链接上，注意会发生什么。一个绿色的背景色滑入视野，同样当鼠标移开背景色滑出视野。相当棒，不是吗？在接下来的章节中，让我们看看如果在自然语言和CSS中实现它。

Onwards!

Overview of How This Works

首先，在深入实现细节之前，让我们分步用自然语言描述它是如果工作的。露个底吧，简言之，和其它一些CSS背景技巧一样，你看到的效果无非是定位背景颜色 ...

thanks kirupa

我经常提到的非常酷的一个例子就是当你鼠标悬停图片上发生滑动的动画。如果你不清楚我在说什么，鼠标悬停下面例子中的方框上：

每个方框由一个高的图片组成。当你鼠标悬停每个图片上，图片会向下滑动展现出它的另一部分。当鼠标移开时，返回原来的状态。所做的全部这些均是由CSS3的transitions来实现的。

在本教程中，我将告诉你怎样实现这种效果并理解它的工作原理。

How This Effect Works

在深入实现其细节之前，让我们先看一下用简单语言描述它的原理。一会儿你将看，一切是如此简单。

首先，你得有这样一个图片：

这个图片默认展示了两个部分。我们要做的是在最初的时候，只显示图像的上半部分认。鼠标悬停上去后，显示下半部分。

我们实现这个目的的方法是，用一个是该图片高度一半的容器包裹它：

注意，容器可以将图片划分为两个不同的部分。在HTML里，将一个图片放到一个小于它的容器里 ...

thanks kirupa

Transition的故事历经考验和磨难。从被无耻浏览器厂商所忽略而必须添加厂商前缀到目前被普遍接受，该旅程肯定是崎岖不平。尽管transition属性在过去几年有了很大进步，但与它更帅更靓的前辈animation相比，在实现某些东西方面并不容易。

我在CSS3: Animations vs. Transitions教程中完全描述transitions和animations的差异，在这里我将重申一个transition的重要局限。这个限制就是transitions没有一个属性指定让它循环。是的！在今天这个时代，transition被设计成只执行一次。的确是个笑话。

幸运的是，这里有一个方法。在本教程里，我将通过一个小伎俩解决 transitionend event 如何使transitions支持循环。

The Example

为了证实我有点疯狂，下面的例子展示了一个永远循环的transition。鼠标移到圆形上看到transition开始运行...永远不会停止。

注意到圆形从小到大的来回振荡。学完本章，你将能创建类似的动画并理解它的运行原理。

How to Make a Transition Loop

在深入做这件事之前，让我们首先退一步理清我们将要做的是什么 ...

thanks kirupa

在理想的世界里，JavaScript会默默的坐在餐桌的一边。CSS将安静的坐在另一边。HTML会依旧那么尴尬，但我们不会谈论它。无论怎样，在某种程度上，这种情况存在相当一段时间。人们建造的东西很长一段时间的范围内下降这完美的世界。

现在，web编程已经发生改变。JavaScript和CSS不再是小孩子了。不再像《辛普森一家》中的角色了，它们已经在一个世界里长大，JavaScript和CSS各自的职责已经越来越模糊了：

[ the Simpsons family has aged really well over the years (credit: usps) ]

尤其是动画的到来使这种模糊变得更为显明。因为CSS3的animations和transitions的高性能，今天你看到越来越的纯粹使用CSS创建动画。你也能看到使用CSS和JavaScript结合创建动画。

在本教程，我将提到一个很小但又非常重要的使用JavaScript和CSS交叉创建动画。这一点就是你使用JavaScript分析哪些是CSS的可动画属性。你将和我一样兴奋想知道如何做到这一点。

Let's get started.

The Example

啥都没有变得无聊，有个示例变得更有感觉，所以我们看一个我提及的例子。将鼠标移到蓝色图片上：

thanks kirupa

虽然 transition在CSS中着实占据一席之地，但它又与JavaScript有一定水平的协作。在与JavaScript协作时的事件领域展示了它自身。

你已知道transition有三个状态：

起始状态、过渡状态和终止状态。在这里，我将告诉你检测这三个状态的存在。不幸的是，这不可能做到的。你将必须接受这里只有一种状态存在，它是终止状态。这个事件被亲切的称之为transitionend，本章是关于这部分的内容。

Meet the transitionend Event

Transitionend事件原理很简单。该事件在transition一次过渡完成后被触发。让我给出CSS代码如下：

#blueCircle {
    transition: all .5s ease-out;
    opacity: .3;
}
#blueCircle:hover {
    transform: scale(3);
    opacity: 1;
}

CSS代码中，定义了一个transition，它应用在blueCircle 元素上，在半秒内影响到它所有的属性。当你鼠标移到blueCircle 上，设置的 ...

thanks kirupa

当你的CSS animations运行时，它不仅是纯粹的视觉变化。在背后，它们在运行过程的某个关键点触发事件。在本节简短的内容中，你将学习这些事件以及如何在JavaScript中监听它们。

Let's get started.

Meet the Animation Events

当一个animation运行时，三个被触发的相关动画事件为：

• animationstart
• animationend
• animationiteration

根据这些事件的名称可知它们分别表示的含义！animationstart事件在一个animation起始时触发，animationend事件在animation终止时触发，animationiterration事件在除一第一次迭代外的每一次迭代开始触发。

看下示意图，下图表示一个迭代为3次的简单animation：

值得注意的一件事，不是说所有这三个事件都会被触发。唯一一个总是被触发的事件是animationstart。animationiteration事件会在第二次迭代开始时被触发-animation设置的迭代至少大于一次。如果animation只运行一次，animationiteration事件将永不被触发。animationend事件在动画结束时的某个点触发（仅一次）。如果动画迭代次数无限次，这就没有结束...如果没有结束，animationend事件将不会被触发 ...

thanks kirupa

使动画有趣的很大一部分就是让物体在屏幕上四处游走。适当的使用它们，为你的内容添加更多色彩，突显一些UI元素、提供一些动画交互等等。这是相当酷滴。

看下面这个比较疯狂的动画：

也可看一下更加微妙的动画，比如下面例子，当鼠标移到方框上时发生的变化：

在上面的两个例子中，动画效果完成使用CSS完成的。CSS中的Animations和Transitions很容易能让元素从静止状态变成运动状态。尽管是那么容易，这也需要你保证一些东西确保动画平滑的运行。本节内容帮助你如何创建它们 ...

thanks kirupa

当你创建一个animation或transition的动画，动画运行过程中属性发生的变化与在终止状态时发生的变化同等重要。比如，属性值随时间线性变化：

在这个例子里，动画看起来不会加速也不会减速。动画以固定单调的速率移动。你可以通过更多的一些属性风格变化把动画提高一个档次：

在这个例子中，开始时属性值变化的比较快，接近终止时变慢。

上面两个例子中，最终结果是相同的。起始状态，确定一个属性初始值。终止状态，经过指定的时延后，变为终止值。如果只在动画起始和终止状态睁开眼，而在动画运行过程中闭上眼，你看不到两个动画的区别。唯一不同的是，在动画生命过程中不同时间段属性值变化的速率，一个是线性的另一个是非线性的。

动画属性如何从初始值到终止值变化的速率有个名字。这个名字是easing function，该内容将贯穿本章始终。

Onwards!

Making Sense of Easing Functions

在前面小节中，谈到缓动函数时，两种不同颜色图表展示属性如何变化。其中一个颜色的线性缓动函数没做太多的东西。另一个颜色的非线性缓动函数，在你的动画运行后，速率减慢。在本节中，让我们转换下视角，关注于缓动函数而不去关注实际属性值的变化和时延。在该部分里，你将看到一些可爱的图表包括lines, labels ...

thanks kirupa

在CSS中，视觉变化上这里有两种技术竞相你的注意： Animations &Transitions. 在本文中，让我们来了解它们之间的异同点，这样你就能知道在什么时候使用哪一个。

本文大部分内容帮助你熟悉animations和transitions。如果你还没有亲自动手实践它们， Creating a Simple CSS Animation 和Looking at CSS3 Transitions 这两篇教程帮助你开始。

Similarities

宏观上，animations和transitions极其相似。它们都可以实现：

• 指定要监听CSS属性的变化
• 设置缓动函数改变属性从开始到结束值变化的速率。
• 指定animation或transition所需要运行的多长时间
• 以编程方式监听animation和transition规定事件，可以做自己想做的事。
• CSS可视化的属性改变

不过，除了这些，你将看到animations 和 transitions的不同，并将它们的特点展现出来。让我们来更详细的看下各自的特点吧。

Differences

Animations 和 transitions会在以下方面会有不同：当你如何触发它们运行时、它们是否容易循环、定义一个transition是多么复杂、怎么在正确场合的使用它们和与JavaScript友好的结合。来更详细的探讨这些话题吧。

Triggering

正如刚看到的animations和animations最大的一个不同就是你怎样触发它们运行 ...

thanks kirupa

CSS中，当你改变一个属性的值，页面立即发生变化。示例，使元素CSS hover状态时，改变transform属性tranlate3d函数一个不同的参数值。

#box img {
    transform: translate3d(0, -350px, 0);
}
#box img:hover {
    transform: translate3d(0, 0px, 0);
    cursor: pointer;
}

该值是将图片垂直向上平移350像素。看看这个实例，在下面例子中将鼠标悬停到HTML标志上：

thanks kirupa

在HTML中动画实现的三种的方式之一是众所周知CSS animations。CSS animations是非常简单的。你能通过控制动画CSS属性来影响元素。它可以让你做出很酷的事比如元素移动、元素淡入淡出、改变元素颜色。

首先让我们看一个例子，让下面的云彩缓慢的上下飘动：

在本篇中，你将学习所有CSS animations，不仅仅是让云朵移动，还有其它更酷更有用的事情。你将会学习通过animation属性怎样定义一个CSS动画，怎么添加关键帧，以及如果调整各种动画相关的属性，这才是你所想要的。

Onwards!

Creating a Simple Animation

学习动画最简单的的方式，就是亲自动手实验， 然后再学习它的工作机制。那么来创建一个HTML文档，写HTML和CSS代码吧 ...

thanks kirupa

也许你们认为动画是电影和计算机中的近代产物，实际上人类在很久很久以前就开始鼓捣它并作为沟通的方式了：

[ a sequence of pictures from 3000 BC (wikipedia) ]

这些动画方式追溯到古代的洞穴壁画，直到现代的精密的机械，正如你现在看到的电视、电脑和手机。今天，生活中几乎在所有的设备屏幕上单击、摇一摇(tap)或按键就可以让它动起来：

动画已不仅仅是壁画中的事物了，而主要在游戏、intros、卡通，横幅广告领域。 它已经根深蒂固于我们用户体验中，它可让你的应用操作简单；可以使你的内容更加漂亮；可以使你的作品更加生动有趣。谁不希望这样啊？

至此你有足够的背景认识。不用去关心它的历史或被信服动画为什么这么有用。可能你已经认识到动画的重要性。如果你想知道如何来实现这些动画，那么你来对地方了。本篇入门教程以及后面的文章，你将学习html中的动画。短期内，你将成为动画的高手， 或至少在屏幕上完成一个动画。

Onwards!

What Is An Animation?

在我们继续进行之前，确定从哪开始学以及怎样创建动画，退一步讲，就是弄清动画是什么 ...

Animation翻译系列文章

Tutorials, videos, and even a book to help you learn how to create great animations in HTML, CSS, and JavaScript.

The Basics

• Introduction to Animation in HTML （译）
• Dealing with Vendor Prefixes in CSS and JavaScript （墙内云盘分享）

CSS Animations and Transitions

• All About CSS Animations（译）
• All About CSS ...

Base64编码是将任意二进制数据转换为可打印的ASCII字符。

从8位到6位

它是将一个8位字节序列拆散为6位，并为每个6位片段分配一个字符（2^6=64，推之Base64字符集为64个以内，实际65个字符）。Base64的码表为：

来个实例，下图以中文编码两个字符（utf-8格式）为例：

可以在Base64 Decode and Encode - Online上验证一下结果。

补码

Base64编码是将二进制截成每6位一个单位，会有二进制序列不能正好平均分成6位块的情况，这时要在序列末尾填充零位，补够总位数是6*8的最小公倍数，任何完全填充的6位组由特殊的第65个符号=表示。比如ASCII码的字符a：

用途

Base64编码是对二进制序列为操作对象，那对于任意的二进制序列都可以编码，如文件。 在网上搜集了一些Base64编码应用：

• CSS中url属性：适用于小图片，减少HTTP请求数。
• 早期电子邮件中
• 简单加密：防君子不防小人的加密方式
• HTTP基本认证
• 文件入库：将文件的二进制流转换成文本存入数据库

实现

JavaScript实现

在线工具 ...

URL(统一资源定位符, Uniform Resource Location)是URI(统一资源标识符, Uniform Resource Identifier)的一种，一般来讲，URL是Internet上用来描述信息资源的字符串，用于客户端访问www服务器或其它服务器的方式。来几个URL：

* ftp://host/filepath/
* http:// 
* ftp://表示通过文件传输协议FTP访问FTP服务器。  
* telnet://表示通过远程登录协议Telnet进行远程登录。  
* gopher://表示通过gopher协议访问Gopher服务器。

当然协议也可以自己扩展。

这个不扯太多，今天只讨论编码。

URL中包括中文

看代码，文件名编码-test.html放到tomcat（全局web.xml配置listings设置成true）下webapp目录下中的encoding目录下

<!DOCTYPE html>
<html>
<head>
    <meat charset="utf-8"/>
</head>
<body>
    <form>
        <input name="q ...

字符编码和python中的字符编码两文对字符编码简单的介绍。现在开始讨论http中的编码问题，当完成编码系列的文章后，开始完成一系统http的文章，本文还是需要一些http基本的知识。

做为java出身的coder，今天还是用python语言来实现http的实例，java实现个东西太麻烦，Simple is better than complex.

响应头中的Content-Type

我们知道http响应报文，包括两部分实体首部（响应头）和实体主体（响应主体），响应头是对主体内容的描述，告知浏览器怎么处理主体内容（文本，图片等等）。上代码：

#coding=utf-8

from BaseHTTPServer import HTTPServer, BaseHTTPRequestHandler

class MyRequestHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-Type', 'text ...

上篇字符编码对字符编码做了简单的介绍，除了演示几个简单的例子外，没有将字符编码与编程语言，看本文的标题相信就明白，这是与伟大的python结合一些实例（python版本为2.7.5）。

准备工作，去码表（GB2312, Unicode, UTF-8）查取编码的GB2312和Unicode字符集编码及按gb2312和utf-8编码方式保存的二进制。注意，要亲自查一下 哦～～

编码                  对应十六进制
GB2312字符集：        b1e0 c2eb
GB2312编码(同上):     b1e0 c2eb
Unicode字符集：       7f16 7801
UTF-16编码(同上):     7f16 7801
UTF-8编码:            e7bc96 e7a081

字符串操作

话不多说，打开python解释器，输入：

>>> s = '编码'
>>> s ...

每个软件开发人员应该无条件掌握的知识！

字符编码是一个基础话题，不管你从事哪种语言的开发，还是前端、后端或网络开发，乱码问题一直困扰着像我这样的低水平的生手。接下来的内容是我参考了好多的文章，并整理的便于自己理解的脉络。
就像别人一样的开场：计算机比较傻，在它的世界里只有 1 0，如何才让人类可理解的字符(Character,如字母、数字，一些符号，汉字...)打印到显示屏幕上呢。这需要有一个从由1 0组合成的序列到可打印字符的一个映射 (编码Encoding)，可打印的字符是一个集合(字符集Charset)。在这里就引出了几个概念:

• 字符(Character)：是文字与符号的总称，包括文字、图形符号、数学符号等。
• 字符集(Charset)：即字符的集合，规定了在这些集合里面有哪些字符。
• 字符编码(Encoding)：就是规定用一个字节还是多个字节来存储一个字符，用固定的二进制码值表示某个字符。
• 字节(byte)：计算机中存储数据的单元，一个8位的二进制数，是一个很具体的存储空间 ...

原文地址
翻译原地址

了解javascript定时器底层的工作原理是十分重要的。一般它们表现的不那么直观，是因为它在单独的一个线程中，所以它的行为表现的不很直观，甚至有些怪异。 以下三种方式可以让我们去创建并操作定时器:

• var id = setTimeout(fn, delay); 用于起动一个定时器，经过给定的时间后调用特定的函数。该函数返回一个id，来取消这个定时器
• var id = setInterval(fn, delay); 和setTimeout类似，间隔给定的时间来调用函数，直到被取消
• clearInterval(id);, clearTimeout(id); 接收一个参数定时器函数id，用于取消定时器

为理解定时器内部如果工作，需要声明一个很重要的概念：定时器延时，并不可靠的。这是因为js在浏览器执行是单线程的，异步事件（如鼠标事件和定时器）只在当执行过程中有机会执行时（CPU空闲时）才执行。下图给了很好的解释。

（左侧为正常时序，右侧为定时器注册和发生顺序）。该图提供很多信息，帮助你完全理解javascript异步执行工作方式。这是一个一维图，垂直方向为时间轴，单位是毫秒。中间蓝色部分的表示一个个javascript代码执行块 ...

开发前端demo时需要有后台数据交互，chrome浏览器默认不支持读取本地json数据，也配置启动参数：

--allow-file-access-from-files

firefox又用的不太习惯。以前是下载一个tomcat，还要修改tomcat中conf目录下的server.xml文件

一直以来都学着python，学到网络这块发现很方便的SimpleHTTPServer类:

python -m SimpleHTTPServer 9000

非常欣喜，不过该方法不支持jquery的post请求（我安装的是版本是64位2.7.5），解决方法： 将SimpleHTTPServer.py复制一份，如StormHTTPServer.py。找到do_GET方法，在下面添加do_POST方法

def do_POST(self):
    self.do_GET()

将该文件复制到${py_home}\Lib目录下

python -m StormHTTPServer 9000

这样就可以支持POST请求了，比起用tomcat方便多啦。

(完)

1 安装

1.1 安装pelican

参见

2 写博客

2.1 快速入门

mkdir myblog
cd myblog
pelican-quickstart

在content创建一个2013-11-04-test.md文件

Date: 2013-06-06
Title: My Super Beginning
Slug: my-super-beginning
Tags: Writing, Life
Category: Life

生成页面

pelican content

预览页面

cd output
python -m SimpleHTTPServer 9000

2.2 设置

设置article生成目录，参见 ...

安装1 python

安装1.1 python2.7.5，添加环境变量${PY_HOME}\Scripts

$ python --version
Python 2.7.5

#1.2 安装easy_install

安装setuptools下载ez_setup.py，执行

$ python ez_setup.py
$ easy_install --version
setuptools 1.3

1.3 安装pip

安装pip，下载解压后，到根目录下

$ python setup.py install
$ pip --version
pip 1.4 ...

1. 安装

1.1 cygwin安装

cygwin下载
注意：添加make命令，在Select Packages一步，将Devel@Default改为Devel@Install

1.2 git for windows下载安装

下载

2. github配置

2.1 github.com上注册用户

用户名:stormhouse; 邮箱:stormhouse@yeah.net

2.2 初始配置

打开Git Bash，执行以下命令

git config --global user.name "stormhouse"
git config --global user.email stormhouse@yeah ...