All posts in Technique

Angular or React ?

如今这又是个容易引发部落冲突的问题,就像当年vim还是emacs,eclipse还是netbeans一样,虽然我打部落战已经相当熟练,但是没有必要的部落战争能不参与还是不参与为妙;

可以值得确认的是,我至今还没有个可以真正自由选择他们从而好好比较一番的契机(我这人最近又比较懒,没事也打不起精神去琢磨他们……);项目里面要不是已经做出了选择要不就是已经各种框死,余地不是不大是根本没有,好在本人早就过了年轻气盛横冲直撞的年纪,最近也反正无欲无求与世无争的,感觉就差遁入空门了……

项目用啥就用啥呗,学学用起来便是,没啥好争的,存在便于存在的意义,所谓开卷有益,开个lib什么的自然也不会害人;真要争也要等都好好用过一番了再说,没用过就评论和豆瓣上那些没看过几遍电影就好评差评的一样极其不负责任;

所以鄙人以下一部分言论属于极其不负责任的范畴;
Continue reading →

Morning Coffee Extension for Chrome

扯淡不分国界,说到就要做到;
尽力了就没有遗憾,即便失败,那也是成功的一种;

不忘初心,方得始终;

As the AngularJS learning experiences continues (actually haven’t touched it for a few days…), I started to feel that it’s better for me to actually implement something instead of just reading. Continuous reading without purpose makes people feel bored really quick.

As I also mentioned earlier that it’s time to follow my heart and actually make some changes. So I’ve been thinking a lot of these days, tried to remember things happened in my mind long time ago.

I’ve had this idea for quite a few year… since the first day I transferred to chrome from firefox (should be more than 5 years now..). Before the transfer, I used a firefox plugin called “Morning Coffee” routinely. Once migrated, I miss the functionalities so much that I started to look for its chrome alternative immediately and it turns out to be no luck. So I gave up and thought about writing one myself if the the original author doesn’t do this.

I thought I should give the author some time before I get started… So I’ve waited for several years… that’s long enough, I guess…

Alright, enough background information…
Continue reading →

SublimeTask for both ST2 and ST3

[Introduction]
Check out this introductory post if you don’t know what is SublimeTask.

[Overview]
There is an issue long long time ago, talking about the support for ST3… yeah, long long time ago… I guess I lost a decent number of users during that period of time , due to my laziness… Sorry, thats’ my bad. But now, since I’ve upgraded to use ST3 myself as well, it’s time to make some changes.

It’s been a long time, without you, my friend, and I’ll tell you all about it when I see you again~

[Upgrade]
After this pull request has been merged (wait a few hours if it’s still not merged), you will be able to upgrade it directly in sublime through “Package Control”. If you’re on ST2, nothing needs to be done, everything will still just work fine.

[Report Issues]
Please feel free to report any issues here: https://github.com/samsonw/SublimeTask/issues

From Sublime Text 2 to Sublime Text 3

首先不要问我为啥还在用sublime text 2,这是个有点历史且形而上学的问题,为此我还特地去查看了 sublimeTask 的initial commit date,发现这个历史已经至少3年了;擦,这时间过得还真叫人无法察觉的快,转眼就是三年,不想说什么时光荏苒岁月如梭物是人非时过境迁,虽然这些词语都他喵的条件反射的直接进入了脑海,既然已经不经过大脑都敲了出来,我也懒得删掉了,就这样吧;

所以本博文可以说是outdated的令人发指,基本没有任何值得分享的必要,放此纯粹是作为个人的一个记录;不过话说回来,也许还真有人比我还out也说不定呢,缘分这东西谁又说的清楚呢呵呵;

ok,让我们闲话少说,直奔主题;

[Install Sublime Text 3]
第一步,没啥好说的,你懂得;唯一值得一提的是如果之前不知道何时装过ST3的话(比如笔者),请更新sublime并把其data目录里的内容删掉,os x下该目录在~/Library/Application\ Support/Sublime\ Text\ 3/,对没有看错,里面东西都清了,重动sublime会重新generate新的data进来;

[Migrate Packages]
如果没有以前一堆精心设置调教过的plugin就没有那么多事,当初ST3刚出来的时候没有第一时间migrate过来的原因也是因为大部分plugin/package都还没migrate好;这一晃三年,大部分critical的plugin肯定已经都完事了,这件事情如今竟然变得如此简单,直接copy所有的package过来……

ST2的Package目录是 ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/
相应的,ST3的是 ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/

哦,只有俩个例外,一个是Default,这个copy过来会出错因为毕竟是ST2特有的Core,另外一个是Package Control,这个我们接下来会另外安装;所以finder里面copy的时候全选后专门deselect这俩个目录就行了;这件事如今变得如此轻松是我所始料未及的;
Continue reading →

AngularJS Tutorial – Learn AngularJS in 30 minutes (Part 2)

由于篇幅过长,所以人为强行分成两篇,望见谅。

接上篇,AngularJS Tutorial – Learn AngularJS in 30 minutes (Part 1)

隐藏和显示elements

AngularJS另外还提供了一套指令(directive),允许用户根据一些条件或者表达式来隐藏或者显示某个DOM element。这些指令有ngHide,ngShow,ngSwitch和ngIf。这些指令提供了相类似的结果,不过在不同的情况下它们分别会很有用。当你遇到一些类似case switch的情况下ngSwitch指令会很有用,比如一些单选按钮开关(radio switch toggle)。ngHide,ngShow和ngIf有些本质上的不同,虽然表面十分相似。ngIf会将受影响的element从DOM里面移除,而ngHide和ngShow只是加了一个 display:none 的css属性来隐藏它。

因此因尽量可能的使用ngIf,因为这样可以为已经忍受杂乱不堪DOM的浏览器省掉一部分内存。ngHide和ngShow在显示动画效果的时候会特别有用,因为ngIf会由于牵涉到DOM的创建和删除这类比较消耗资源的操作通常会影响到动画的展示效果。

在我们这个简单的例子里,我想在每个我最喜欢的TV show的边上加上一个星星。可以使用ngIf来达到这个效果,让我们来修改index.html。

<h3>A list of TV shows</h3>
<ul class="list-group">
    <li class="list-group-item" ng-repeat="show in main.shows"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>
</ul>

这样在show.favorite这个属性是true的时候,页面DOM就会被简单的加上一个星星。这里还另外支持表达式,所以像 show.favorite == true 或者 show.favorite != false这样的表达式在这里也同样可行。
Continue reading →

AngularJS Tutorial – Learn AngularJS in 30 minutes (Part 1)

每当我要逼自己去学习点新东西的时候,我总是强迫自己去认真读完一系列关于此类知识或是技术的一看上去就不错的文章,所谓开卷有益;但鄙人有个坏习惯就是喜欢一目十行断章取义,可能互联网的快餐式节奏让我和我的小伙伴们都渐渐趋于浮躁了,当然也许趋于浮躁的只有鄙人也说不定,小伙伴们可能都很淡定,无故拉上不明真相的群众垫背纯属鄙人以小人之心度君子之腹;

于是,本文就在这样的大背景下诞生了;

本文为译文,翻译自原文:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/

同理按我以前翻(xue)译(xi) )其他文章的尿性,标题通常保留原文标题,属于不被待见的范畴,标题君默默哭晕在厕所;

============================== 我是分割线 ==============================

摘要

本AngularJS教程将会在30分钟里以一套合理优化过的知识介绍带你浏览整个AngularJS的世界,带你装逼带你飞(译者注)。当看完本篇篇幅不长但内容细致的教程后,您将能快速的创建强大且直观的web应用程序。

观看演示
查看源代码
Continue reading →

当我们在谈论无损音乐时 我们在谈论什么

好久不写技术文章,诚惶诚恐惶惶不可终日,以至于经意不经意的点了上面这个标题就无奈的超过了两行,遗憾的影响了页面整体的美感…… 诚然本文也非什么「纯」技术文章,而且极有可能是在知情不知情的情形下班门弄斧自不量力,所以套用后世界杯时代的某个网络流行词汇,此所谓「伪」技术;

当小伙伴都以为我要为世界杯结束感慨一番的时候,鄙人竟然重操旧业写起了技术文章,很有种朝花夕拾的赶脚,这以后还怎么愉快的在一起玩耍……

突然留意到四年前的今天鄙人正在总结世界杯后遗症(移步文章最后「历史上的今天」),四年前的景象顿时浮现脑海栩栩如生,下意识有种时空错乱的赶脚;鄙人年轻的时候学的天文,正经的没学会啥皮毛倒是学会相信了平行宇宙、虫洞还有大爆炸,但是很多人至今仍旧对我们怀有偏见,因为他们始终认为 当我们在谈论时间和宇宙的时候,我们正在谈论如何神经紊乱;

OK,那么,当我们在谈论无损音乐时 我们在谈论什么……
Continue reading →

Bash like history search functionality for Zsh

Bash uses readline to do its line editing and history search functionality, which works pretty well in the past for me. To enable this, just put these 2 lines of configurations in your ~/.inputrc (the config for your readline):

# Enabling History Search
"\e[A":history-search-backward
"\e[B":history-search-forward

After restart your terminal or shell, you can now use Up Arrow and Down Arrow to navigate your bash history, the beauty of this is it will match the thing you typed between the prompt and the cursor (if typed nothing, it will just use your last command of the history).

This solution works so well that it increases a lot of my productivity and efficiency in the past and now it becomes a must-have for my shell features. Once I switched to Zsh, I was looking for a similar solution since the first day of using Zsh.

Turns out oh-my-zsh includes a default history search functionality already (up-line-or-beginning-search, down-line-or-beginning-search), which works well for a lot of people, but unfortunately not for me.

The issue for this command is it only matches the command, not the entire thing before your cursor, for example, if I typed:

cd code

Then do a tab, it will only match the command starts from “cd”, not the entire “cd code”. You may still call this a history search functionality, but for me, it’s not working as I expected since I come from the bash/readline world.
Continue reading →

ZSH Startup Issue

今天一早(其实也不早了,嘿嘿)打开iterm2,oh_my_zsh提示是否upgrade,一手贱于是几乎不假思索的敲了Yes,更新完毕reload完terminal顿时很吓人的给了我上百行如下错误:

/usr/local/etc/bash_completion: command not found: complete

然后敲任何命令都出现:

fork: Resource temporarily unavailable

一下子让人菊花一紧,虎躯一震;这几乎是无法做事的节奏啊… 紧接着便发现chrome都无法正常工作了(事后证明这应该是心理作用),第一感觉是中毒了,再一想不会吧,应该大概可能是zsh upgrade干了啥好事吧,于是去check了下upgrade script,grep一下哪里call过bash completion,终于发现了事故原因;

原来~/.oh-my-zsh/tools/check_for_upgrade.sh的line 23加了一句:

[ -f ~/.profile ] && source ~/.profile

而我的~/.profile里恰巧有不应该在这里被调用的东西,解决方法便是把这一行注掉,然后再重启iterm2,世界终于清静了…… 把之前不应该存在在.profile里的东西移到.bashrc后,一切终于又恢复“正常”;虚惊一场,不过下次upgrade我肯定会多犹豫个2秒,一朝被蛇咬十年怕井绳了……

Switch From Bash to Zsh

Have used bash for 6+ years, I finally decided to switch to zsh. This is not my first time trying zsh tho, last time I tried zsh I believe oh-my-zsh is not out or very popular yet, somehow zsh seems doesn’t impressive me a lot. Probably at that time I still feel strong tied to bash somehow, habit, workflow, autocompletion style etc.

Yesterday I tried to give zsh one more chance, thanks to oh-my-zsh and peepcode, this time the exprience is much more better than last time, I managed to reuse most of my bash configuration when I can try the new features of zsh, which is pretty good for my transition and the habit I already get used to in bash in the past.

[Shell Prompt]
Zsh users love to share their prompt, to follow their tradition, I’m going to do that here as well, below is my Zsh prompt screenshot:

zsh prompt

The idea is mostly inspired from topfunky’s zsh-simple, except that I used the dark background and customized some of the colors.
Continue reading →