-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1206 lines (797 loc) · 38.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>没有标题的博客</title>
<meta name="author" content="思扬">
<meta name="description" content="这个AngularJS课程意在为你揭露Angular各方面话题的最佳资源。我们尽量展示其各方面优势，使得你可得到这些话题完整的全景。 课程 课程的学习曲线就像曲棍球。在初期离开地面时可以轻松的几个基本功能的应用开始，但当应用变大变复杂时，若不注意结构会使开发变得棘手与笨重。 …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://fancyoung.com/">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="/atom.xml" rel="alternate" title="没有标题的博客" type="application/atom+xml">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="https://lib.baomitu.com/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="/javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="https://fonts.loli.net/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="https://fonts.loli.net/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = 'https://hm.baidu.com/hm.js?00da83c9dca8db90150561e426211e08';
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body >
<header role="banner"><hgroup>
<h1><a href="/">没有标题的博客</a></h1>
<h2>记录与分享</h2>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="sitesearch" value="fancyoung.com">
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/">首页</a></li>
<li><a href="/blog/archives">博客</a></li>
<li><a href="/notes">笔记</a></li>
<li><a href="/about">关于我</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div class="blog-index">
<article>
<header>
<h1 class="entry-title"><a href="/blog/a-better-way-to-learn-angularjs/">学习AngularJS方法（翻译）</a></h1>
<p class="meta">
<time class='entry-date' datetime='2013-09-07T19:59:00+08:00'><span class='date'><span class='date-month'>Sep</span> <span class='date-day'>7</span><span class='date-suffix'>th</span>, <span class='date-year'>2013</span></span> <span class='time'>7:59 pm</span></time>
</p>
</header>
<div class="entry-content"><p>这个AngularJS课程意在为你揭露Angular各方面话题的最佳资源。我们尽量展示其各方面优势，使得你可得到这些话题完整的全景。</p>
<h4>课程</h4>
<p>课程的学习曲线就像曲棍球。在初期离开地面时可以轻松的几个基本功能的应用开始，但当应用变大变复杂时，若不注意结构会使开发变得棘手与笨重。</p>
<p>AngularJS入门时, 随便看几篇教程与文档的“准备-射击-瞄准”的学习方法会导致混淆与挫折。
这个课程可以带你遍历Angular的每个关键点。最后你可以流畅高效地架构大型应用。</p>
<h4>预备知识</h4>
<ul>
<li>掌握HTML、CSS、JavaScript， 以及下面的概念：
<ul>
<li>POJO(plain old JavaScript object)，包括：</li>
<li>面向对象变成，包括封装与继承</li>
<li>对象的创建、原型</li>
</ul>
</li>
<li>基本的MVC概念</li>
<li>DOM</li>
<li>JavaScript函数、事件、错误处理</li>
</ul>
<h4>资源</h4>
<p>与其他JavaScript框架相比，AngularJS还在初期阶段，资源还有所不足。但是，本课程会介绍一批优秀的博客。</p>
<ul>
<li>必修资源
<ul>
<li><a href="http://shop.oreilly.com/product/0636920028055.do">AngularJS - O’Reilly Media</a> (available on <a href="http://www.amazon.com/AngularJS-Brad-Green/dp/1449344852/ref=sr_1_1?ie=UTF8&qid=1372874049&sr=8-1&keywords=angularjs">Amazon</a>)</li>
<li><a href="http://www.egghead.io/">John Lindquist’s egghead.io</a></li>
<li><a href="https://github.com/msfrisbie/egghead-angularjs">egghead.io source code</a></li>
<li><a href="http://docs.angularjs.org/">AngularJS docs</a></li>
</ul>
</li>
<li>补充读物
<ul>
<li><a href="http://jimhoskins.com/">Jim Hoskins blog</a></li>
<li><a href="http://www.bennadel.com/">Ben Nadel blog</a></li>
<li><a href="http://onehungrymind.com/">OneHungryMind</a></li>
<li><a href="http://www.yearofmoo.com/">year of moo</a></li>
<li><a href="http://blog.brunoscopelliti.com/">Bruno Scopelliti blog</a></li>
</ul>
</li>
</ul>
<h2>剩余部分参看原文：<a href="http://www.thinkster.io/angularjs/GtaQ0oMGIl">A Better Way to Learn AngularJS</a></h2>
<p>PS：
半年多后才在电脑中发现这篇刚翻译了开头的博客，而我已经从AngularJS转向了KnockoutJS。
Octopress的缺点是发布成本高，导致我的EverNote中躺满了未整理的杂乱资料。
但同时这也是优点，时刻提醒我博客与随手笔记是不同的。
每次写博客时可以从作者角度观察而获得更深入的理解，
感受到写作难度后对网上创作技术文章的人也更加佩服。
最近几年的技术瓶颈始终没有突破，而记博客的时间也反映出自己的碌碌无为，接下来该进行一些知识的整理了，希望会有所帮助。</p>
<p>PSPS：
作为想法和感情异常丰富的我，开本博客的那天便告诉自己这里只记录客观的技术。
所以与这段话类似的内容以后会尽量不出现。</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/use-octopress-new-post-function-with-zsh/">Octopress在zsh下无法新建博客的问题</a></h1>
<p class="meta">
<time class='entry-date' datetime='2012-08-12T16:50:00+08:00'><span class='date'><span class='date-month'>Aug</span> <span class='date-day'>12</span><span class='date-suffix'>th</span>, <span class='date-year'>2012</span></span> <span class='time'>4:50 pm</span></time>
</p>
</header>
<div class="entry-content"><p>执行：<code>$ rake new_post["arch-linux-reinstall-glibc.markdown"]</code></p>
<p>报错：<code>zsh: no matches found: new_post[arch-linux-reinstall-glibc]</code></p>
<p>原因：zsh中若出现‘*’, ‘(’, ‘|’, ‘<’, ‘[’, or ‘?’符号，则将其识别为查找文件名的通配符</p>
<p>快速解决：用引号括起来<code>$ rake "new_post[arch-linux-reinstall-glibc.markdown]"</code></p>
<p>彻底解决：取消zsh的通配(GLOB),
在<code>.zshrc</code>中加入<code>alias rake="noglob rake"</code></p>
<hr />
<p>PS：在git回滚操作<code>git reset --soft HEAD^</code>时出现报错：
<code>zsh: no matches found HEAD^</code>，</p>
<p>也为同样原因，因为<code>^</code>也为正则中的符号，
需要转义为<code>git reset --soft HEAD\^</code>。</p>
<h2>参考</h2>
<p><a href="https://github.com/imathis/octopress/issues/117">Not compatible with Zsh</a></p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/arch-linux-reinstall-glibc/">Arch升级失败后修复glibc记录</a></h1>
<p class="meta">
<time class='entry-date' datetime='2012-08-10T00:27:00+08:00'><span class='date'><span class='date-month'>Aug</span> <span class='date-day'>10</span><span class='date-suffix'>th</span>, <span class='date-year'>2012</span></span> <span class='time'>12:27 am</span></time>
</p>
</header>
<div class="entry-content"><h2>起因</h2>
<p><code>$ pacman -Syu</code>时提示错误，
因为Arch前段时间将<code>/lib</code>目录链到了<code>/usr/lib</code>，
见公告<a href="http://www.archlinux.org/news/the-lib-directory-becomes-a-symlink/">The /lib directory becomes a symlink</a>。
当时没有看到这篇公告，而在网上搜到某贴说使用<code>--force</code>参数，
结果执行完后系统挂掉，因<code>glibc</code>不存在，所有命令行不可使用。</p>
<h2>解决方法</h2>
<ul>
<li>从光盘启动Arch。</li>
<li><code>$ fdisk -l</code>查看磁盘状态，
我的系统分区为<code>/dev/sda6</code>。</li>
<li>创建目录：<code>$ mkdir /root/tmp_disk</code>。</li>
<li>mount分区，我机子上是：<code>$ mount /dev/sda6 /root/tmp_disk</code>。</li>
<li>下载<a href="http://www.archlinux.org/packages/?q=glibc">相应的</a><code>glibc</code>安装包（网络或U盘，配置网络参考下面相关部分）,
我的为<a href="http://www.archlinux.org/packages/core/x86_64/glibc/">x86_64 v2.16.0-2</a>，
所以<code>wget http://www.archlinux.org/packages/core/x86_64/glibc/download/</code></li>
<li>安装<code>pacman -U glibc-2.16.0-2-x86_64.pkg.tar.xz -r /root/tmp_disk</code></li>
<li><code>pacman -Su</code></li>
</ul>
<h4>注意</h4>
<h2>其它</h2>
<h4>配置网络</h4>
<p>用启动光盘进入系统后，需要配置网络来下载最新glibc。
配置<code>/etc/rc.conf</code></p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>interface=eth0
</span><span class='line'>address=192.168.0.2
</span><span class='line'>netmask=255.255.255.0
</span><span class='line'>gateway=192.168.22.1</span></code></pre></td></tr></table></div></figure>
<p>配置<code>/etc/resolv.conf</code></p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>nameserver 8.8.8.8</span></code></pre></td></tr></table></div></figure>
<p>最后重启网络服务<code>$ /etc/rc.d/network restart</code></p>
<h4>目录</h4>
<p><code>/lib</code>、<code>/lib64</code>皆应软链到<code>/usr/lib</code>目录。
在修复过程中查看<code>/lib</code>发现里面只有一个<code>modules</code>目录，
将其移至<code>/usr/lib</code>里后建立软链。
系统正常运行，但之后执行<code>pacman</code>后无法升级。
移除<code>/usr/lib/modules</code>目录后<code>$ pacman -Su</code>解决问题。</p>
<h4>时间错误的解决</h4>
<p>遇到报错</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>******************* FILESYSTEM CHECK FAILED *************
</span><span class='line'>* Please repair manually and reboot. Note that the root *
</span><span class='line'>* filesystem is currently mounted read-only. To remount *
</span><span class='line'>* it read-write type: mount -n -o remount,rw / *
</span><span class='line'>* When you exit the mantenance shel the system will *
</span><span class='line'>* reboot automatically. *
</span><span class='line'>*********************************************************</span></code></pre></td></tr></table></div></figure>
<p>因为BIOS时间设置有问题。</p>
<h2>参考</h2>
<p><a href="https://bbs.archlinux.org/viewtopic.php?id=142459">bug修复方案：How to re-install glibc?</a></p>
<p><a href="https://wiki.archlinux.org/index.php/Configuring_Network">Arch网络配置：Configuring Network</a></p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/tmux-study/">Tmux使用</a></h1>
<p class="meta">
<time class='entry-date' datetime='2012-07-12T15:29:00+08:00'><span class='date'><span class='date-month'>Jul</span> <span class='date-day'>12</span><span class='date-suffix'>th</span>, <span class='date-year'>2012</span></span> <span class='time'>3:29 pm</span></time>
</p>
</header>
<div class="entry-content"><h2>简介</h2>
<p>tmux是与screen类似的工具，但是功能更强大。</p>
<p>tmux的三个层级概念：<br/>
- session(会话)<br/>
- window(窗口)<br/>
- pane(面板)</p>
<p>命令：<br/>
<code>$ tmux</code><br/>
<code>$ tmux attach -t session</code></p>
<h2>快捷键</h2>
<p><code>C-b</code>激活控制台，然后输入下面命令</p>
<h4>系统</h4>
<table>
<thead>
<tr>
<th>快捷键 </th>
<th> 功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>? </td>
<td> 快捷键帮助</td>
</tr>
<tr>
<td>[ </td>
<td> 进入视图模式</td>
</tr>
<tr>
<td>s </td>
<td> 切换会话</td>
</tr>
<tr>
<td>d </td>
<td> 脱离当前会话，<code>$ tmux attach</code>继续</td>
</tr>
</tbody>
</table>
<h4>窗口</h4>
<table>
<thead>
<tr>
<th>快捷键 </th>
<th> 功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>c </td>
<td> 新建窗口</td>
</tr>
<tr>
<td>& </td>
<td> 关闭窗口</td>
</tr>
<tr>
<td>l </td>
<td> 前一个窗口</td>
</tr>
<tr>
<td>n/p </td>
<td> 下/上一个窗口</td>
</tr>
<tr>
<td>数字 </td>
<td> 跳到相应窗口</td>
</tr>
<tr>
<td>w </td>
<td> 列出所有窗口</td>
</tr>
<tr>
<td>, </td>
<td> 重命名当前窗口</td>
</tr>
<tr>
<td>. </td>
<td> 修改窗口编号，相当于排序</td>
</tr>
<tr>
<td>f </td>
<td> 查找</td>
</tr>
</tbody>
</table>
<h4>面板</h4>
<table>
<thead>
<tr>
<th>快捷键 </th>
<th> 功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>“/% </td>
<td> 上下/左右分割面板</td>
</tr>
<tr>
<td>x </td>
<td> 关闭当前面板</td>
</tr>
<tr>
<td>! </td>
<td> 将当前面板置于新窗口</td>
</tr>
<tr>
<td>o </td>
<td> 移到下一面板</td>
</tr>
<tr>
<td>q </td>
<td> 显示面板编号，当时输入数字可跳到相应面板</td>
</tr>
<tr>
<td>C/M-方向</td>
<td> 以1/5的速度调节面板尺寸</td>
</tr>
<tr>
<td>SPACE </td>
<td> 调整布局</td>
</tr>
<tr>
<td>{/} </td>
<td> 向前/后调节当前面板顺序</td>
</tr>
<tr>
<td>C/M-o </td>
<td> 逆/顺时针旋转窗口中的面板</td>
</tr>
</tbody>
</table>
<h4>复制/粘贴模式</h4>
<p>(以Emacs模式为例)<br/>
1. <code>C-b [</code>进入视图模式<br/>
2. <code>C-Space</code>开始选择（可能与输入法快捷键冲突，最简单的办法是使用<code>C-@</code>，同样效果）<br/>
3. <code>C-n/p/f/b/...</code>选择结束后<code>C-w</code>复制<br/>
4. <code>C-]</code>粘贴</p>
<h2>配置</h2>
<p><code>~/.tmux.conf</code></p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>#将激活控制台键绑定与Emacs相同
</span><span class='line'>unbind C-b
</span><span class='line'>set -g prefix C-x</span></code></pre></td></tr></table></div></figure>
<h2>其他</h2>
<ul>
<li>默认快捷键为Emacs模式，也可设置为vi模式。</li>
<li>Ubuntu下翻页的M-v与菜单键可能有冲突，需要在终端窗口菜单<code>Edit -> Keyboard Shortcuts</code>取消<code>Enable menu access keys</code>前面的勾。</li>
</ul>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/emacs-tramp-hangs-bug-in-zsh/">解决Emacs远程连接时卡住的bug</a></h1>
<p class="meta">
<time class='entry-date' datetime='2012-07-04T00:14:00+08:00'><span class='date'><span class='date-month'>Jul</span> <span class='date-day'>4</span><span class='date-suffix'>th</span>, <span class='date-year'>2012</span></span> <span class='time'>12:14 am</span></time>
</p>
</header>
<div class="entry-content"><p>前几天终于买了Linode的VPS，配置过程中遇见一个灵异问题：<br/>
Emacs无法远程SSH编辑文件，状态一直卡在<code>Tramp: Waiting for prompts from remote shell</code>。</p>
<p>折腾了好久，终于定位到zsh的配置oh-my-zsh上。<br/>
最后查到原来Emacs Wiki上已经有解决方案，在<code>.zshrc</code>底部加上：</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>if [[ "$TERM" == "dumb" ]]
</span><span class='line'>then
</span><span class='line'> unsetopt zle
</span><span class='line'> unsetopt prompt_cr
</span><span class='line'> unsetopt prompt_subst
</span><span class='line'> unfunction precmd
</span><span class='line'> unfunction preexec
</span><span class='line'> PS1='$ '
</span><span class='line'>fi</span></code></pre></td></tr></table></div></figure>
<p>参考：<a href="http://emacswiki.org/emacs/TrampMode#toc6">TrampMode Troubleshooting</a></p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/edit-remote-file-with-emacs/">用Emacs远程编辑文件及相关笔记</a></h1>
<p class="meta">
<time class='entry-date' datetime='2012-06-02T10:16:00+08:00'><span class='date'><span class='date-month'>Jun</span> <span class='date-day'>2</span><span class='date-suffix'>nd</span>, <span class='date-year'>2012</span></span> <span class='time'>10:16 am</span></time>
</p>
</header>
<div class="entry-content"><h4>Emacs编辑远程文件</h4>
<p>非常简单：<code>C-x C-f</code>后<code>/ssh:user@host#port:file</code></p>
<p>由此可以推出一个小技巧：</p>
<h4>Emacs编辑本地需要sudo的文件</h4>
<p><code>/ssh:root@locahost:file</code></p>
<p>过程中可能会遇到的问题：</p>
<ul>
<li><p>1<br/>
问题：<code>ssh: connect to host localhost port 22: Connection refused</code><br/>
原因：没装openssh-server<br/>
解决：安装即可</p></li>
<li><p>2<br/>
问题：<code>ssh root@localhost</code>并输入密码后报<code>permission denied</code><br/>
原因：发现直接用<code>su</code>也不行（之前一直都只是sudo），因为没设root密码<br/>
解决：<code>sudo passwd root</code><br/>
注：
<code>/etc/ssh/sshd_config</code>中有个参数<code>PermitRootLogin</code>需设置为<code>yes</code>。<br/>
虽然有安全问题，不过是本机，问题不大。<br/>
修改配置后需重启服务：<code>sudo /etc/init.d/ssh restart</code></p></li>
</ul>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/solve-bundle-install-problems/">Bundle Install时的一些灵异bug</a></h1>
<p class="meta">
<time class='entry-date' datetime='2012-05-02T13:12:00+08:00'><span class='date'><span class='date-month'>May</span> <span class='date-day'>2</span><span class='date-suffix'>nd</span>, <span class='date-year'>2012</span></span> <span class='time'>1:12 pm</span></time>
</p>
</header>
<div class="entry-content"><p>升级博客后，在另一台电脑上无法启动了。</p>
<h2>在新电脑上Octopress写博客时没法<code>$ bundle install</code></h2>
<h4>现象：</h4>
<p><code>$ bundle install</code>安装到fast-stemmer时报一大堆错，
无法继续。</p>
<h4>原因：</h4>
<p>不详，可能是rvm里的bundle没升级</p>
<h4>解决</h4>
<p>做了一通操作，不知怎么就好了。。。
其中包括：</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rvm gem update</span></code></pre></td></tr></table></div></figure>
<p>不过我2次都引发了下面几个问题</p>
</div>
<footer>
<a rel="full-article" href="/blog/solve-bundle-install-problems/">查看全文 →</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/githug-cheat-sheet/">Githug通关全攻略</a></h1>
<p class="meta">
<time class='entry-date' datetime='2012-05-02T12:49:00+08:00'><span class='date'><span class='date-month'>May</span> <span class='date-day'>2</span><span class='date-suffix'>nd</span>, <span class='date-year'>2012</span></span> <span class='time'>12:49 pm</span></time>
</p>
</header>
<div class="entry-content"><p><a href="https://github.com/Gazler/githug">Githug</a>将git的入门与游戏相结合，太有意思了。<br/>
游戏过程中少不了网上查找资料，man，难度4以后不停的hint。<br/>
通关后对git的了解又加深了许多。<br/>
取连接名时很是矛盾，写完博客后还是将链接中的walkthrough改为了cheat sheet。<br/>
希望大家不需要使用到这篇博客吧。</p>
<p>因关卡随时处于更新状态，可能会稍有不同<br/>
<del>- 最后更新时间2012-11-14</del><br/>
<del>- 最后更新时间2013-05-17</del> <br/>
- 最后更新时间2016-02-25</p>
<h2>准备</h2>
<p>安装Githug：<code>$ gem install githug</code>。<br/>
安装完成后直接执行<code>$ githug</code>开始游戏，同一条命令进入下一关。<br/>
<code>$ githug hint</code>查看过关提示，<br/>
当操作错误无法过关时，可以<code>$ githug reset</code>重置当前关卡。</p>
<h2>开始</h2>
<h4>0</h4>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>y</span></code></pre></td></tr></table></div></figure>
<h4>1 初始化git项目</h4>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cd git_hug
</span><span class='line'>$ git init</span></code></pre></td></tr></table></div></figure>
<h4>2 配置git用户信息</h4>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git config user.name xxx
</span><span class='line'>$ git config user.email [email protected]</span></code></pre></td></tr></table></div></figure>
<p>或者直接在<code>.git/config</code>文件里添加</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>[user]
</span><span class='line'> name = xxx
</span><span class='line'> email = [email protected]</span></code></pre></td></tr></table></div></figure>
<p>回答时分别输入<code>xxx</code>和<code>[email protected]</code><br/>
- 扩展<br/>
使用<code>--global</code>参数修改本机全局设置</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git config --global user.name = xxx</span></code></pre></td></tr></table></div></figure>
<ul>
<li>问题<br/>
命令行里不要带等号<code>$ git config user.name = xxx</code>,
否则去文件里查时会发现等号变成值<code>name = =</code>。
(之前好像可以用的？待解决)</li>
</ul>
<h4>3 stage一个文件</h4>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git add README</span></code></pre></td></tr></table></div></figure>
<h4>4 提交已stage的文件</h4>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git commit -m '-'</span></code></pre></td></tr></table></div></figure>
</div>
<footer>
<a rel="full-article" href="/blog/githug-cheat-sheet/">查看全文 →</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/better-transparentize-mixin-for-sass/">Sass中通过mixin封装透明背景模块</a></h1>
<p class="meta">
<time class='entry-date' datetime='2012-05-01T22:51:00+08:00'><span class='date'><span class='date-month'>May</span> <span class='date-day'>1</span><span class='date-suffix'>st</span>, <span class='date-year'>2012</span></span> <span class='time'>10:51 pm</span></time>
</p>
</header>
<div class="entry-content"><p>之前讲到过<a href="/blog/css-background-transparency/">CSS实现背景透明完美解决方案</a>，<br/>
在Sass里可以通过mixin将其封装起来。</p>
<h2>先回顾一下</h2>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>/* 白色背景,透明度0.6 */
</span><span class='line'>.alpha60 {
</span><span class='line'> background: rgb(255, 255, 255);
</span><span class='line'> background: rgba(255, 255, 255, 0.6);
</span><span class='line'> background: transparent\9;
</span><span class='line'> zoom: 1;
</span><span class='line'> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff);
</span><span class='line'> -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>
<h2>分析</h2>
<p>需要做的工作有：<br/>
- 颜色和透明值应该通过参数传入<br/>
- 需要能计算出rgba值：<code>rgb(255, 255, 255)</code><br/>
- 需要计算出IE下的值<code>#99ffffff</code><br/>
- 封装成minix模块，以便调用</p>
<h2>过程</h2>
<p>Sass的文档不全，为了查找一些计算函数，我只好去源码里找。<br/>
开始想寻求的是一个转十六进制的方法，结果发现<code>ie_hex_str</code>已经实现了。<br/>
在这里贴段里面的实现代码，来看看Sass的计算功能：</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'># Sass
</span><span class='line'>alpha = (color.alpha * 255).round.to_s(16).rjust(2, '0')
</span><span class='line'># 等价于JS中的：
</span><span class='line'>Math.round(0.6 * 255).toString(16);</span></code></pre></td></tr></table></div></figure>
<p>最后的rjust方法，应该是空位补零。</p>
<p>非常有用的两个页面：
<a href="https://github.com/nex3/sass/blob/master/lib/sass/script/functions.rb">函数源码</a>，
<a href="http://sass-lang.com/try.html">在线调试Sass</a></p>
<h2>总结</h2>
<p>最终代码如下：</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>@mixin better_transparentize($color, $alpha)
</span><span class='line'> $c: rgba($color, $alpha)
</span><span class='line'> $ie_c: ie_hex_str($c)
</span><span class='line'> background: rgba($color, 1)
</span><span class='line'> background: $c
</span><span class='line'> background: transparent\9
</span><span class='line'> zoom: 1
</span><span class='line'> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})
</span><span class='line'> -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})"</span></code></pre></td></tr></table></div></figure>
<p>然后在需要的地方直接引用即可，如：</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>.box
</span><span class='line'> @include better_transparentize(white, .8)</span></code></pre></td></tr></table></div></figure>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/bootstrap-bug-when-responsive-css-with-navbar-fixed-top/">Bootstrap使用响应式设计(Responsive Design)时导航条上部有空白的解决方案</a></h1>
<p class="meta">
<time class='entry-date' datetime='2012-03-07T17:32:00+08:00'><span class='date'><span class='date-month'>Mar</span> <span class='date-day'>7</span><span class='date-suffix'>th</span>, <span class='date-year'>2012</span></span> <span class='time'>5:32 pm</span></time>
</p>
</header>
<div class="entry-content"><h4>原因</h4>
<p>Bug出现需要同时满足以下3个条件:<br/>
- 顶部导航条navbar使用class<code>navbar-fixed-top</code><br/>
- 参考Bootstrap官方网站, 给body添加样式<code>padding-top: 60px;</code><br/>
- 使用响应式(Responsive design), 并且处在此状态下(默认为宽度<=980时触发)</p>
<h4>解决方案1</h4>
<p>给此段样式加上条件</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>@media (min-width: 981px) {
</span><span class='line'> body {
</span><span class='line'> padding-top: 60px;
</span><span class='line'> }
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>
<h4>解决方案2</h4>
<p>将bootstrap-responsive.css放在body样式之后</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class=''><span class='line'><link href="../css/bootstrap.css" rel="stylesheet">
</span><span class='line'><style type="text/css">
</span><span class='line'> body {
</span><span class='line'> padding-top: 60px;
</span><span class='line'> }
</span><span class='line'></style>
</span><span class='line'><link href="../css/bootstrap-responsive.css" rel="stylesheet"></span></code></pre></td></tr></table></div></figure>
<p>Rails3.2的Asset Pipeline就更方便了，放在import中即可（我用的是Sass）</p>