发表于   |   分类于 ，   |  

模版链接和图片

数据

注意 phones.json 文件包含了唯一的 Id 和图像 url，url 指向 app/img/phones/ 路径：

1
2
3
4
5
6
7
[
{
  "id": "motorola-defy-with-motoblur",
  "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
  "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
},
]

模版

1
2
3
4
5
6
7
<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
    <a href="#/phones/\{\{phone.id}}" class="thumb"><img ng-src="\{\{phone.imageUrl}}"></a>
    <a href="#/phones/\{\{phone.id}}">\{\{phone.name}}</a>
    <p>\{\{phone.snippet}}</p>
  </li>
</ul>

image 标签用了 ngSrc 指令，这一指令阻止浏览器按字面意思对待 angular {{表达式}}，阻止它请求一个无效的 url http://localhost:8000/app/{{phone.imageUrl}}。使用 ngSrc 指令阻止浏览器发起无效的 http 请求。

实验

把 ngSrc 换成 src 属性，用 Firebug 之类的工具查看服务器访问日志，确认应用发起了无关的请求 /app/%7B%7Bphone.imageUrl%7D%7D (或 /app/{{phone.imageUrl}})。

阅读全文 »

发表于   |   分类于 ，   |  

过滤

Controller

没作任何变化

Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="container-fluid">
  <div class="row-fluid">
  <div class="span2">
Search: <input ng-model="query">
  </div>
   <div class="span10">
   <ul class="phones">
   <li ng-repeat="phone in phones | filter:query">
      \{\{phone.name}}
      <p>\{\{phone.snippet}}</p>
   </li>
   </ul>
  </div>
  </div>
</div>

加个标准的 <input> 标签，使用 Angular 的 $filter 函数为 ngRepeat 指令处理输入内容。

原理说明如下：

  • 数据绑定：Angular 的核心特色之一。页面加载时，Angular 把输入框的名字和数据模型的同名变量绑定，保持两者同步。
    用户在输入框输入内容（取名 query），立即作为手机列表的过滤器（phone in phones | filter:query）

  • 过滤器（filter ）的使用：filter 函数利用 query 值创建一个匹配 query 结果的新数组。
    ngRepeat 自动更新视图，通过过滤器改变手机的数量。

    阅读全文 »

发表于   |   分类于 ，   |  

五一放假没干啥正事，想起鼓捣 AngularJS 了，把它的新手指南一口气翻了个遍，算是入了点门了。个人感觉这货挺适合做 web app 的（可能因为我没接触过别的 MVC 框架吧…），它的亮点是数据绑定，扩展 HTML，居然把 DOM 操作都替咱做了…

话不多说，下面是我边看边记的笔记，自认为重点的记了下中文。

原文地址：AngularJS Tutorial
笔记作者：涂鸦码龙

搭环境

  • 安装nodejs

    1
    node --version    //nodejs 版本

  • 安装 Git

  • 克隆 angular-phonecat 项目

    1
    git clone git://github.com/angular/angular-phonecat.git

  • 找到项目目录 

    1
    cd angular-phonecat

  • 起 http 服务器 

    1
    node scripts\web-server.js
阅读全文 »

发表于   |   分类于 ， ，   |  

原作者：Peter-Paul Koch(PPK)
原文链接：Blink
翻译：涂鸦码龙

Google 为 Chrome 和 Opera 创建了 新的渲染引擎 Blink。其中有没有天大的秘密，影响又是怎样的呢？

这儿有一些值得关注的 Blink 资源，我把它作为综述：

除了这些之外，Peter Beverloo 非常热心地通过电子邮件发了我一些信息。

Blink 是一个新的渲染引擎，这意味着它对 CSS 和 JavaScript 的解析将与 WebKit （Gecko 或者 Trident） 有所不同。它将驱动所有使用 Chromium 的浏览器（Google 的开源浏览器）。

Blink 已成为 WebKit 的分支，这意味着当前它跟 WebKit 几乎一样。不过，WebKit 本身不是一个单一的实体；正如我原先的研究成果 ，一款基于 WebKit 的浏览器对 CSS 和 JavaScript 的支持并不完全一致。如今，Blink 作为一种 WebKit 不足为奇。

将来这些会改变，从现在开始，WebKit 和 Blink 将带着不同的目标和不同的支持特性分道扬镳。当前 Blink 和 WebKit 的代码共享存在可行性，但是，久而久之，两者差异越来越大时，共享变得不那么容易。

因此，Blink 已成为一个 WebKit 版本，久而久之，它会像其它分支一样，离 WebKit 越来越远，越来越远……

阅读全文 »

发表于   |   分类于 ， ， ，   |  

原文作者：Chris Mills
原文链接：Advanced cross-browser flexbox
翻译：涂鸦码龙

引言

CSS3 弹性布局模块 —— 短命名叫 Flexbox —— 为我们的 web 开发带来了许多能量和令人兴奋的畅想空间，我们可以快速轻松地搭建复杂的网站布局，摒弃一些我们惯常使用的不合理的 hacks 和 补丁。我的文章 《伸缩布局 — 打开布局天堂之门？》讲述了一些 Flexbox 的基础，本文将是进阶教程，我会带大家看一些高级点的例子，使用 Modernizr 为那些参差不齐的 flexbox 支持情况提供不同的样式，以便提供当前可用的最优的跨浏览器方案。

看下面例子

我为文章做的例子如图1：

图1：最终布局例子的截图

实例包含多层 flexbox 容器，比较急切的话可以先看看最终效果，然后继续探索代码细节。

您对此篇文章感兴趣的话，欢迎到我们的欧朋技术博客看全文，这里没有复制全文，见谅见谅~

发表于   |   分类于 ，   |  

先啰嗦啰嗦，吐槽几句，木有同感可以略过……

“尼玛，真是应了 Octopress 那句口号：黑客专用博客框架，一般人想搞定它真不易啊！自从决定用 Octopress 起就开始处处踩坑，基本木有顺利的时候。就想用用Markdown ，体验一下所谓的畅快淋漓的写作快感，只想少花时间折腾博客样式，容易嘛……”

开始选的 jekyllbootstrap 按照教程步骤一步步来，安个 Ruby 费了老鼻子劲，最后卡在 jekyll --server 上，死活在本地无法预览，写个博客，做点改动都要传到 Github 看效果，实在忍受不了…… 放弃!

不破不立，正当我打算放弃折腾 Jekyll 这破玩意儿的时候，发现了 Octopress ，它真像黑夜里的一盏明灯啊，让我又燃起了希望~~~

果不其然，Octopress 配置起来容易许多，再加我有了一些折腾 Jekyll 的经验，虽然过程有点小坎坷，但在 Google 的帮助下总算搭起了环境。

Google 的文章一大把，但适合自己最重要，还是把配置 Octopress 的过程总结了一篇博文留念《Deploy Github Pages Using Octopress on Windows》

阅读全文 »

发表于   |   分类于 ，   |  

原文地址：http://css-tricks.com/the-lengths-of-css/
原文作者：CHRIS COYIER
译者：张金龙 @金龙Along

CSS 里有不少把长度作为值的属性，盒模型的属性就是明显的例子：width, height, margin, padding, border。还有其它例子：box-shadow的偏移和阴影半径，或者字体的大小和字间距。CSS 都有哪些可用的“长度单位”呢？已经相当多啦。

绝对长度

px

1
2
3
.wrap {
  width: 400px; 
}

Pixel 可能是最容易想到的衡量“设备像素”的单位，它不需要对显示器上的屏幕像素做任何事。它的确是一个简单易用的度量尺寸。

它被设想成一个跨设备和显示器的标准化的值，实际上这一设想越来越不成立。举例来说，在 iPad mini 和 iPad 上渲染同一个网站，如果长度单位都被设成 px ，按理说 iPad mini 上的网站会超出屏幕。

px 尽管一直有些缺点，它仍然是网络上典型的度量单位。许多其它的长度会直接换算成 px，JavaScript 就是用的 px 。

阅读全文 »

发表于   |   分类于 ，   |  

最近项目中用到了 git branch 和 git submodule，查阅了一些文章，总算有点头绪了，连同一些常用的 git 命令记录在此，以便查阅。

git 常用命令

  • 远程仓库相关命令

检出仓库：$ git clone git://github.com/jquery/jquery.git

查看远程仓库：$ git remote -v

添加远程仓库：$ git remote add [name] [url]

删除远程仓库：$ git remote rm [name]

修改远程仓库：$ git remote set-url --push [name] [newUrl]

拉取远程仓库：$ git pull [remoteName] [localBranchName]

推送远程仓库：$ git push [remoteName] [localBranchName]

初始化仓库：git init

阅读全文 »

发表于   |   分类于 ，   |  

官方文档

“Octopress is a blogging framework for hackers”
Octopress 是黑客专属的博客框架，命令行可以搞定一切部署。

前期准备

  1. 安装 Git http://git-scm.com/ (需翻墙), google code 也提供下载
  2. 使用 rbenv 或 RVM 安装 Ruby 1.9.3
    这俩儿货我均搞不定，总是磕磕绊绊不顺利，最终发现了一个简单的套件 RailsInstaller 。这个相当爽啊，包含：Ruby 1.9.3-p125，Bundler 1.0.18，Git 1.7.6，DevKit等工具，虽然有的用不着，但比起配置 Ruby 和一些插件痛快多了。
    阅读全文 »

发表于   |   分类于 ， ，   |  

这里记录我原创的一些文章，有翻译的，有自己写的，算是一点积淀吧。旧的文章已放到了其它博客上，这里只列出了链接；以后新的文章会在此博客更新。