AngularJS

使用gulp压缩合并AngularJS项目中js

AngularJS项目中js众多,上线的时候压缩合并下还是很有必要的^_^ 在此之前如果不了解gulp,推荐访问Gulp开发教程(翻译)。 值得注意的是,一般书写时按照简写的格式: angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) { }); 但是压缩js会破快AngularJS文件所需的依赖注入,以至于无法工作,因此压缩前你需要将代码手动修改为下面的形式: angular.module("MyMod").controller("MyCtrl", ["$scope&

Hipo

Hipo那些事儿

Hipo 2014年8月下旬1.0.0版本上线至今更新到1.5.0版本,并发布到所有的国家,想在此谈谈这整个令人心碎的过程^_^ 缘起 一直有记账的欲望,但是一直没能坚持下来,近两年的工作之后觉得自己应该需要实实在在,完完整整的做点东西来落实验证下自己的所学,也能顺道满足下自己的所需,和几个朋友交流之后5月正式确定这个项目。 想法总是美好的…… 初期的设想相当的庞杂,也就导致相当长的一段时间内一直处于空想YY的状态,现在回顾,那时美剧刷的最多-_-# 到现在为止,初期设想的功能还未完成。 开发,上线,迭代 在忍无可忍+自我鄙视了很久之后才正式开始,拖延过久直接导致便是真正干活时候的急不可耐,毛毛躁躁。 然后就是尽可能的砍掉第一版本的功能,甚至放弃了发布到全球这么让人垂涎欲滴的好处,只为了能够尽快的发布到App

年终总结

2014年终

感官上来说,春节才算是旧年的终点,新年的开始。 在这寒冷而宁静的小村,远离那些喧闹,反而更适合写下此文。 家 家人还算健康,节俭,时时为我担忧着,还是一切从我出发。不说追梦,也不说能够荣耀乡里,至少没能陪伴在他们身边。 在外归来,家乡总是这么慢,家人总是老的很快,而我却仍在路上。 在家很少做梦,在外倒是经常梦回家乡。 我 初时学剑,拔剑四顾,世界如此之大。而今有了剑招,又恨这出剑总不能又快又准。 Hipo 不得不提Hipo,这算是个意外的惊喜,漫漫长路,至少它能让我走的更远一点。 书 2014年书确实读的少了,

AngularJS

用Ionic开发hybrid APP

使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势。而且私以为在目前激烈而又变化快速的移动APP市场环境下,用phonegap来开发APP未尝不是一种低成本mvp的方案,快速发布,成王败寇^-^ 为什么选用ionic 其中ionicframework便是phonegap开发hybrid APP技术中的一员新秀,甚至可以说是一员虎将,而且免费且开源。 Ionic的优势非常显著: 性能优异 基于红的发紫AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃, 相关配套非常齐全: 相对充足的学习资料,Learn Iconic,The Iconic book ngcordova,将主流的Cordova

Ghost

博客从wordpress迁移到Ghost

Ghost不支持wordpress中的文章URL格式,又舍不得已经外链着的链接失效,也就一直没有将博客从积重难返的wp迁移到Ghost。 不过今天本着破罐子破摔、不折腾的会死,实在很想用markdown来写博客,不懂PHP……的精神一试,结果发现过程异常顺利^-^ 迁移wp博客图片 这个地方讨巧的使用了七牛的云存储。 注册七牛免费账户, 安装七牛wordpress插件,配置,测试成功(访问你博客文章时,博文图片链接已是七牛链接) 通过这两步基本就可以确保你不用费力的转移图片,而且图片放七牛+CDN,节省空间,加速访问,何乐而不为? 导出wp中博文 安装Ghost wordpress插件,导出json格式的文件 安装配置Ghost 我这边一直使用的digitalocean的最低配vps,5$/月,相对性价比较高推荐使用(

《卡波特》

三部影片

喜爱电影,尤爱传记类电影。在豆瓣中导演贝尼特·米勒只有四部作品,四部都是传记类电影,看过他三部。 冷静内敛的叙事,克制的音乐,压下那些闪亮的光影,平静的诉说完一段段故事。 《卡波特》 断头台上的一声闷响,会让你问:坏人为什么成为了坏人,而你又为什么没有成为坏人? 《点球成金》 逆袭之后,听着女儿稚嫩的歌声,选择留在家乡,我想这才是最大的勇气。 《狐狸猎手》 和《夜行人》《消失的爱人》并称2014年负能量三最^-^ 《夜行人》荒诞诙谐,《消失的爱人》结构精准,却都不及《狐狸猎手》来的真实,

$q

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

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

AngularJS

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

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

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)

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)

《横道世之介》

一个温暖的故事

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

sketch

Sketch插件dynamic-button,及bug修复

之前发了蛮多关于Sketch的文章,都是一些介绍,资源性的文章,这次推荐一个Sketch的插件dynamic-button。 sketch-dynamic-button在我看来就是一个在Sketch中方便创建一致性按钮的插件。反而dynamic有点词不达意的感觉。 当然网站UI设计/移动APP UI设计中一致性包含很多方面,其中一点就是按钮的尺寸一致性,如下图所示: [![sketch-dynamic-button](https://oeuys8rx2.qnssl.com/wp-content/uploads/2014/05/sketch-dynamic-button.png)](https://oeuys8rx2.qnssl.com/wp-content/uploads/2014/05/sketch-dynamic-button.png)按钮尺寸的一致性

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模板。

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;

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

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之后,在需要精确移动图层的时候,