xiaodao

xiaodao

0

192 posts
《卡波特》

三部影片

喜爱电影,尤爱传记类电影。在豆瓣中导演贝尼特·米勒只有四部作品,四部都是传记类电影,看过他三部。 冷静内敛的叙事,克制的音乐,压下那些闪亮的光影,平静的诉说完一段段故事。 《卡波特》 断头台上的一声闷响,会让你问:坏人为什么成为了坏人,而你又为什么没有成为坏人? 《点球成金》 逆袭之后,听着女儿稚嫩的歌声,选择留在家乡,我想这才是最大的勇气。 《狐狸猎手》 和《夜行人》《消失的爱人》并称2014年负能量三最^-^ 《夜行人》荒诞诙谐,《消失的爱人》结构精准,却都不及《狐狸猎手》来的真实,或许回看那段历史本就该感到苍白而无力。 片中几处恨铁不成钢的自我惩罚式自毁看得我很是发颤,即使你吞下了这些血与泪,结果又能如何?

  • xiaodao
    xiaodao
$q

[译]用漫画来解说AngularJs中的Promises

早上,父亲对儿子说:“儿子,去给我预报下天气!” 每一个晴天,父亲都会让他儿子带上他强劲的望远镜,爬山房子附近最高的山顶去查看地平线来预报下午的天气。儿子对他的父亲承诺他会去并且获取到天气预报,在他离开之前他对他的父亲做出了承诺。 在那个时候,父亲会判断明天是否是个好天气,他要准备明日的钓鱼。如果天气不好,他就不会去钓鱼,同时,如果他的儿子没能得到天气预报,他同样会呆在家里。 30分钟之后,他儿子回来了。不同的事情周而复始的发生着: 结果A) 得到了天气预报!晴天:-) 儿子成功的拿到了天气预报,蓝蓝的天空是个晴天!,承诺履行了(儿子遵守了他的诺言),父亲决定周日去钓鱼。 结果B) 得到了天气预报!乌云密布,有雨:-( 儿子成功的拿到了天气预报,但是看起来乌云密布要下雨!,承诺履行了,父亲因为坏天气决定呆在家里。 结果C) 没能拿到天气预报:-/ 儿子没能拿到天气预报,遇到了点麻烦;雾太大了在山上看不到天气怎么样。

  • xiaodao
    xiaodao
AngularJS

[译]探索Angular 1.3 的单次绑定(one -time bindings)

译文:英文原文 激动人心的时刻到了,Angular 1.3终于发布了,附带了大量的新功能、bug修复、改进当然也有不足。因为这些新的东西,我们想通过一系列的博文详解主要的功能和改进来让新的版本更快的让大家适应。这是“探索Angular 1.3”系列的第一篇,包含了有史以来最重要的功能:单次绑定(one-time binding)。 等等!Angular的数据绑定不是自动和Ui保持同步么?是的,确实是的,这确实很棒。然而,为了实现数据绑定,Angular需要时刻监听相关的值,这就导致了性能问题,而单次绑定就是为此而生。在我们探究单次绑定之前,来让我们先了解了解Angular中数据绑定(databing)和监控器(watcher)的概念。 理解数据绑定和观察者 为了实现数据绑定,Angular使用$watch API来监听作用域(scope)中模型(model)

  • xiaodao
    xiaodao
SVG

[译]SVG动画简介

你可以把这篇文章看做通往精通SVG动画之路的第一步,里面的链接资源也是很好的学习资料。所以赶紧收藏本文然后开始你的精通SVG之旅吧。 SVG元素是一种特殊的DOM元素,语法模仿了标准的HTML元素。SVG元素有着独有的标签,属性和行为,能够让它很容易的定义各种形状——能够直接在DOM中创造图像,因此能够被JavaScript和CSS操作。 作为初学者,你们可以看看这些SVG才能实线的效果: Typographic Demo Isotyope Demo Shape Demo Handwriting Demo 在此有三个使用SVG创建图像而不是用图片(PNG, JPET, etc)的好处: 首先SVG可以被压缩的很好。 其次,SVG可以在无损的情况下缩放到任何尺寸,在桌面和移动设备屏幕上看起来都很锐利。 最后,你可以在运行的时候(使用JavaScript,CSS)只让SVG图像的一个组件动画。 创造SVG图像,你即可以直接使用其DOM元素呈现,也可以使用你喜爱的图像编辑软件绘画然后导出SVG文件拷贝它的代码粘贴到HTML中即可。对于初学者,可以看这篇很棒的文章:Working With SVG。 SVG动画 无论jQuery还是CSS

  • xiaodao
    xiaodao
sketch

[译]Sketch的10个小技巧

1.学会“Insert”的快捷键 什么是你在设计中最常用的?创建一个新的Artboard A,插入文字T,创建一个矩形R或者椭圆形O。 2.用正确的方式缩放 缩放到100%:⌘CMD+0; 查看你画布全部的设计:⌘CMD+1; 缩放特定的对象:选择对象然后按下⌘CMD+2。 3.滚动 在没有触控板的情况下如何横向滚动? 使用⇧Shift+滚轮。 4.隐藏/显示sidebars 如果你再一个小的屏幕上作业,你可能需要隐藏左右两边的图层面板(Layer-List-sidebar)和右侧的工具面板(Inspector Sidebar),使用⌘CMD+⌥Alt +3。或者只隐藏左侧⌘CMD+⌥Alt +1,

  • xiaodao
    xiaodao
《横道世之介》

一个温暖的故事

泡上咖啡,在一个鸟鸣的清晨看完这个三小时的电影确实是件幸福的事情。 故事缓缓流过,就像一杯白水再填上一丝甜味,我想这就是《横道世之介》的味道。 当时纵有万般滋味,走过时间,回忆起来也总是淡淡的美好,也就是在回忆的那一瞬间,心底旋起一个漩涡,乘着时光机器,没有爱恨情仇,只是见见当年的自己,那是或许单纯,或许懵懂,亦或迷失了自己,或许正在低谷,倘若再加上勾起回忆的那个人,对影三人,也便是副绝美的画卷。 走出电影,随着成长,随着变老,朋友间也便渐渐断了联系,如果有一天,谁能在回忆中忆起我,我想说,谢谢你!

  • xiaodao
    xiaodao
sketch

Sketch插件dynamic-button,及bug修复

之前发了蛮多关于Sketch的文章,都是一些介绍,资源性的文章,这次推荐一个Sketch的插件dynamic-button。 sketch-dynamic-button在我看来就是一个在Sketch中方便创建一致性按钮的插件。反而dynamic有点词不达意的感觉。 当然网站UI设计/移动APP UI设计中一致性包含很多方面,其中一点就是按钮的尺寸一致性,如下图所示: [![sketch-dynamic-button](https://image.hicc.pro/wp-content/uploads/2014/05/sketch-dynamic-button.png)](https://image.hicc.pro/wp-content/uploads/2014/05/sketch-dynamic-button.png)按钮尺寸的一致性   不管按钮里面的文本多长,其四周的空间都是一致的,在Sketch中手动调整很不方便也不准确,这个插件就是让其自动发生。 使用介绍 这里也简单介绍下插件的使用方法,较为直接的方式是: 快捷键T,键入按钮文本; 然后快捷键Cmd + J;

  • xiaodao
    xiaodao
android

Sketch Android UI Kit

sketch 3 发布之后内置了iOS的UI Kit模板,但是Android也需要爱嘛:) [![sketch-android-kit](https://image.hicc.pro/wp-content/uploads/2014/04/sketch-android-kit.png)](https://image.hicc.pro/wp-content/uploads/2014/04/sketch-android-kit.png)sketch-android-kit-symbol [![sketch-android-kit-symbol](https://image.hicc.pro/wp-content/uploads/2014/04/sketch-android-kit-symbol.png)](https://image.hicc.pro/wp-content/uploads/

  • xiaodao
    xiaodao
sketch

Sketch 3 新功能

前端时间sketch推出了新的版本Sketch 3 ,网上一片叫好,下面介绍下Sketch 3的新功能:) 以下主要来源于,只是做了简单的整理: http://bohemiancoding.com/sketch/whats-new/ https://medium.com/p/4b92d8b25f3 http://designcode.io/sketch 更好用的UI “一切都恰到好处。” 其实,了解Sketch 3的新特性,看下面这个视频就够了,新增的Symbols功能, 改善的artboards、文字样式、工具面板、导出功能,以及内置的iOS模板。 [https://image.hicc.pro/sketchintro.mp4](https://image.hicc.pro/sketchintro.

  • xiaodao
    xiaodao
css

[译]WTF,HTML&CSS?

绝非是标题党,下面的东西至少让你少踩几次坑,翻译完才发现这篇文章已经有人翻译过了,但是经过对比,还是自以为翻译的要用心点:(。 译自:http://wtfhtmlcss.com/。 —————译文————— 一些HTML和CSS的组合也许会让你忍不住爆粗口,下面是整理出的列表 声明文档模型 如果遗漏文档模型会导致,浏览器使用怪异模式渲染页面,表格,输入框等会显得畸形。 盒模型的计算方式 元素设置了padding,border-width之后width值就会变大,如果要改变这种计算的方式,可以使用box-sizing:border-box来重置。 移动端Safari下的rem单位 移动端Safari支持rem单位,但它在使用其作为媒体查询时候会变得很糟糕,页面中的文字会在不同大小间不停闪烁。 对于现在,解决的方案便是,使用em代替rem。 html { font-size: 16px; } /* Causes flashing bug in Mobile Safari */ @media (min-width: 40rem) { html { font-size:

  • xiaodao
    xiaodao
sketch

用Sketch来设计

之前一直是使用Ai做移动应用方便的设计,试用过sKetch之后,发现确实名副其实,非常的好用,下面译文介绍了sKetch的几个亮点。 翻译自:https://medium.com/design-with-sketch/92608a88c103 —————–译文—————– 自从一年前的关于sKetch的文章之后,sKetch陆续发布了Mirror,Bacground Blue,并且对Artboards,和SVG的支持和速度做了改善。所有的这些大大的方便了我们为未来设计——一句话尽可能少的设计,并且将UI设计放在了首位。这也就让我们专注于响应式的设计而不是照片的编辑,关注于交互和动画而不是人造的材质。sKetch让我们以速度设计,也就留出时间关注设计的其他部分。 Artboards 这么多年来我一直在调整我的设计过程。现在,我直接为手机端设计,然后再往上扩展到web端。我发现使用Artboards是响应设计的最有效方式。 Sketch Mirror Mirror和Artboards配合的非常完美。你可以快速在iPhone上常看你的设计以及在artboards间滑动。 矢量和SVG 我不足以言明矢量在设计工作中的重要性。作为视觉设计师,我们不能将PixelLove和Streamline拿来用即可,我们还需要自定义它们!让它们有爱,根据你的设计上下文对它们填色和变形。 SVG变得逐渐流行是有原因的,你可以为它们填色,

  • xiaodao
    xiaodao
photoshop

photoshop脚本——精确移动所选图层

在此介绍来自morris-photographics.com的Photoshop脚本,该脚本可以让你自行输入移动的像素,并且可以实时预览。 下载 原地址:[Move Selected Layers.JSX](http://morris-photographics.com/photoshop/scripts/downloads/Move Selected Layers.jsx)或者ZIP 本地下载:MoveSelectedLayers.zip 支持cs3以上的软件 安装使用 将jsx后缀的脚本文件移动到Adobe Photoshop CS安装目录的/Presets/Scripts文件夹下。 在重启photoshop之后,在需要精确移动图层的时候,选择文件》脚本》Move selected Layers即可使用该脚本。 更多的细节可以访问Scripting Photoshop, Part 1 的Installing Scripts部分。

  • xiaodao
    xiaodao
品质认知

[译]空状态的设计

译注:有时候设计师乃至所有参与开发的人员,在和APP胶着之后往往陷入了一种假想的繁忙之中,却忘记了初始的空状态,空状态至关重要,空状态决定了用户的第一印象…… 原文来自realmacsoftware.com,著名的效率类应用clear便出自该团队。 ————–以下是译文—————- 拿到新的APP,我最喜欢的事便是查看第一次运行时的体验并为之截图。在浏览完所有的初始欢迎界面后,我开始研究空的状态——通常是指,APP内没有内容和数据时候的试图。本质上来讲,用户的第一印象来自于,空白状态(blank state),空的状态(empty state)。这点很重要,也很有趣,因为空状态的设计甚至可以作为一个指标,一个APP细节完成程度的指标。你将会看到,空视图远非只是空白那么简单(empty views can often be far from empty)。 体贴的欢迎 或许这只是QA工程师的天性,但我还是会承认,初次使用APP,在它给予我明确证明之前,

  • xiaodao
    xiaodao
垂直居中

三行CSS代码让任何元素垂直居中

在transform: translateY的帮助下我们可以使用三行CSS代码让任何,甚至不知道高度的元素垂直居中。 CSS的transform属性常用来旋转和缩放元素,现在我们可以使用它的translateY函数垂直对齐元素。垂直居中通常的做法是使用绝对定位或者设置行高,但是这两种方案的弊端是要么需要你知道元素的高度,要么智能作用与单行文本(译注:inline或者inline-block元素)。 我们的代码如下 .element { position: relative; top: 50%; transform: translateY(-50%); } 以上就是所有代码,它和据对定位的方案类似,但是不需要设定元素的高度,也不需要为其父元素设定position属性,它独立工作,甚至支持IE9! 为了让它用起来更简单,我们可以在包含浏览器前缀之后写入一个混合里面(mixins): @mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .element

  • xiaodao
    xiaodao
《无人区》

无人区

无人区是部好电影。 宁浩疯狂系列之后野心更大的一部作品,即使四年的改改补补之后,仍算是华语片中上乘的作品,至少也算是上乘的西部片,《西风烈》不算,《西风烈》空有招式,内劲全无。 对,还是讲故事的水准,疯狂系列,宁浩就已证明能够讲好故事,拍出能让观众大呼过瘾的故事,只是技巧太重,与人口舌。 《无人区》压住各种华丽的招式,只打一套普通长拳,收敛之下,便也到了新的高度。 不讲技巧,也就不耍花招,拼的自然是内力,相比之前,华语片更多片子招式三流,却又贪多,《扫毒》我想减掉三分之一应该更好。 不讲技巧就是最大的技巧,所谓无招胜有招。一部好电影,必然是一件隽永的作品,它能给你带来愈久弥香的味道,或入木三分,或淡若清茶。《无人区》没有做到这一点,相比还是处处痕迹,它只是认认真真讲好了故事,认认真真讲了一种动物般贪婪而黑暗的西部。 不说结尾!

  • xiaodao
    xiaodao
动态文档目录

使用md-toc.js来生成文章目录

使用markdown语法来博,绝逼一大利器,再配合各种静态博客技术,更是如虎添翼,唯一的问题是要想给文章增加目录,就得手工书写HTML代码,这样做绝对是大煞风景,因此一个思路便是在用户浏览文章的时候动态生成,这样一来照常使用md语法写博,二来也能增强文章可读性…… 不多说直接上地址:https://github.com/yijian166/md-toc.js,page:http://yijian166.github.io/md-toc.js/ ————- # [](#md-toc)md-toc.js 动态生成静态HTML页面目录,特别适合由markdown语法生成的页面(例如诸多静态博客文章)。 说明 扫描指定元素(文章内容)内h1~h6标签,再生成对应的嵌套目录列表。 根据文章结构层级,生成相应层级的目录。 目录实在页面加载之后动态生成,对搜索引擎无用因此链接hash值顺次排序 无需手动编辑markdown文件,不违背md宗旨,又能增加文章阅读时候的便利性,

  • xiaodao
    xiaodao
《百万宝贝》

每个人的梦想

[![Million Dollar Baby](https://image.hicc.pro/wp-content/uploads/2013/11/Million-Dollar-Baby.jpg)](https://image.hicc.pro/wp-content/uploads/2013/11/Million-Dollar-Baby.jpg)Million Dollar Baby 又是梦想,年轻的最大优势便是可以肆无忌惮的谈论梦想,倘若发生在儿时……,好吧,我已经不记得我小时候是否有过梦想。再倘若过了年岁,再谈论梦想,在电影中,我会说这个家伙可爱,在现实中,我没有经历,也无法想象。 再说年轻,你有这拥有梦想的体力,你也知道了什么才是你的梦想……剩下的一切就是你向着你的梦想往前冲。 麦琪已经过了拥有拳击梦想的年龄,麦琪过着“

  • xiaodao
    xiaodao
-webkit-line-clamp

多行省略

对于多行文字经常会有控制行数的需求,特别是字数不可控的的标题,其中的难点是最后行末的省略号,加上省略号也让文本显得更为优雅,易读。 单行省略 .text-overflow { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; max-width: 100%; } 上述代码使用频率较高,浏览器的支持情况也良好。 多行省略 webkit弹性盒模型方案 .line-clampin { overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; } webkit的浏览器支持多行省略号,这种方案的好处很明显比较优雅,代码量少,特别适用针对Android,iOS移动设备的网页。 当然需要注意的是此方法使用了弹性盒模型(flexbox),而且使用它的盒子中不能使用padding,倘若使用padding,会让其余行露出来。 after伪元素方案 此处的思路是在行末使用after伪元素的content属性或者backgroud属性创造出省略的样式。 p { position:

  • xiaodao
    xiaodao
You've successfully subscribed to cc log!