forked from Fadeoc/fadeoc.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
263 lines (221 loc) · 24 KB
/
index.html
File metadata and controls
263 lines (221 loc) · 24 KB
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
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Fadeoc 博客</title>
<meta name="description" content="Fadeoc的博客">
<meta name="keywords" content="Fadeoc,火红的鱼,html,css,诗歌,散文,评论,Code,刹那">
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div id="firsec"> <!--第一行和第二行-->
<h1 class="pagetitle">A Fadeoc Page</h1>
<h5 class="pagetitle">诗歌、散文、评论、Code、刹那。</h5>
</div>
<div id="thirdbody"> <!--第三行，即body-->
<div id="thirdbodymain">
<div id="innertext">
<section>
<article id="article5">
<h2>随波逐流（5）——何时触底</h2>
<p>微博上看到一个励志条目，大意是「真正的能人不在于能攀多高，而在于触底后如何反弹」，也不知道是自我嘲讽还是怎么着，我竟然生出了「但我一直不触底怎么办」的脑洞……</p>
<p>废话不多说。上周说了，重新回到 js 上来，说到做到。</p>
<h4>console.log</h4>
<p>先是 Chapter 2 的作业 1，因为已经做了出来，所以对比了作者的答案，想看看一下思路。果然，发现了 <code>console.log</code> 会自动换行，这是基本知识点，忘记了，或者说，第一次看的时候当时留意了一下，却压根没记住。</p>
<h4>switch 的 case 可以接括号</h4>
<p>一个月之前，在博客上说过那么一句「但是 switch 的模式在我心中久久不去，下周继续」，未曾知会被其他的事情打断，这一断就是一个月，回来的时候继续啃，得到个好习惯，那就是去 MDN。</p>
<ul>
<p><li>MDN 里面的 case 后面与 if 一样，是可以接括号的，有了标准的确定，心中舒服了许多。</li></p>
<p><li>又学到了一个「hack」方法，就是在 switch 的表达式中使用 true。我非常喜欢这个方式，逻辑上合理。</li></p>
<p><li>偶然中发现了原来别人说的浏览器的控制台里可以调试 js 而我没找到的原因是 chrome 中那个表示可供输入的地方实在不明显，如同 cmd 一样的 > 标识，太不容易发现。不过既然发现了，必然会大大加快进度。</li></p>
</ul>
<h4>没想出来的作业 3</h4>
<p>实在不甘心去看答案，最开始想的思路就是通过两个参数的 .length 属性来判断何时停止何时换行，这时候我自己的弱点才展现出来，我不知道如何让 “#” 和 “ ” 交替输入。而 js 这个部分，就这么点语法，已经基本掌握，有工具，不会写……</p>
<p>后来看到了答案中是用行数和位数的和来控制，有点对自己绝望。果然数学才是弱项。</p>
<h4>Charpter 3 作业 3</h4>
<p>统计字符串 n 中有多少个 m 字符。</p>
<p>直接上图，思考过程我用英文注释了。</p>
<img src="homeworkcode3-3.jpg" alt="code of the chapter 3 homework 3">
<p>前两个作业没什么难点，这里就不加赘述了。</p>
</article>
<hr />
<hr />
<hr />
<article id="article4">
<h2>随波逐流（4）——忙碌与专注</h2>
<P>这一个月的具体成果如下：</P>
<ol>
<li>联系到了知乎某兄，要到一次应聘机会，做了两份面试题，第一次没有很好的领悟到某兄的意图，又被告知过于追求细节，还有一些非专业性错误。经过两周的忙碌，终于写出了进步十足（不知道是不是某兄安慰我）的二稿，得到了电话面试机会。电面时某兄的态度非常不错，和蔼有磁性，后来回想自己所说的那些自己的短处，都是按照其他职位的面试来答的，诸如「没有工作经验不专业」等等。诚然这些是可以弥补的，不过产品经理的面试，大概是要说出个一二三的，必须要有条理和本质性，大概是被扣分了。某兄表示希望帮我搞定我不满足应聘硬性要求的部分，大概我太差了，扶不起吧。最后说，会有知乎的人力联系我，大概三周过去了，没有动静，一边安慰自己大公司都是这样慢的，一边心中对自己失望。总是觉得自己可以，有能力，面试了才知道，真的只是散兵游勇，所谓的能力，并非是工作能力，而是一种提升能力。我还是静心下来，把心收一下。</li>
<li>第二个完成的目标是《铃铛》，被邀请参加豆瓣第二届征文大赛是个挺开心的事，正如后面的又被邀请做特邀读者评委，认真总是有回报。写《铃铛》的过程中常常陷入人物中不能自拔，尝试以时间顺序交叉描述两对情侣的感情，后来竟然是仍旧使用了最开始的混乱叙述方式。写完了，一块石头落地，结果又遇到豆瓣抽风，磨蹭了3个小时才终于传上去，已经23点40左右，第二天看到豆瓣微博说共收到投稿2402份，啊，大概我就是 No.2402。</li>
<li>紧接着知乎二次笔试、豆瓣征文的是给「知乎盐系列」《金钱有术》写书评，中信的小雪与物流的结合导致收书晚了三天（小雪酱大概吐血了），于是原定的10天时间出书评就延后了3天。之前是在二次笔试和征文的混乱期的回家的火车上每天看30-40页，幸好坚持了这个，所以提前一天看完了这本书。不过因为书被我误放在热的地方，一觉醒来，因为过热，书胶开了，很是懊悔。剩下的一天就是写书评，上午参考其他各种类似书评，学习了风格，糅进自己的东西，下午写了1200-1400字的书评，临下班前又检查了两遍，唯恐出现谬误，又修改了许多不当句式。大概10天左右，小雪告诉我已经准备把书评发在杂志上了，但也不知道是三件事忙起来的后遗症，还是因为知乎面试对自己的失望，竟然只有对自己努力得到了肯定的那种欣慰，也无更多欢喜之情。</li>
<li>《德拉诺之王》也掺合进来，正赶上这时段，给公会制定计划，一点点实施。后来公会的一位主力坦克突然 AFK，另一位赶上学校典礼，还一位加班，于是耽搁了一整周，在联盟遥遥领先的进度被超过了，很不甘心。计划了那么久，人算竟然还是不如天算。三位坦克为什么要在同一周出问题？晚一周或者早一周都不会导致这样差的后果。不甘心啊，明明努力计划，最终被上天打败，不甘心啊。用了两天从失落中走出来，心中仍然不甘，可是不甘没有意义，路还要走，铭记这次失败，我们必须前行，也许这次失败并非命运不公，而是我本没做好充足准备。诚然，责任不应该由我来揽，不过必须如此，我不能改变别人，也不能改变命运，只能改变自己，做更充分的准备。</li>
</ol>
<P>看似做的东西很多，成果也不少，知乎的面试让我对产品有了很多的新认识和新成长；豆瓣征文对自己的内心有了新的交代；书评也被采纳到了企业导刊杂志的一月刊上。是吧，看起来不错吧？可是生活可有实质变化？依然窝在东北这个老旧肮脏落后的城市，Eloquent Javascript 这本电子书打开之后仍然还在 Chapter 4。本来对 Array 还有环境变量以及各种 Object & Properties 还有 Values 已经蒙瞪了，隔了一个月，连之前的函数代码也忘的差不多了。</P>
<p>对自己说一句：「专注点吧，哥，我们的时间不够了」。Focus 在 JS 和明年11月的安徽梦上，虽然后面还有一个 1000 余页的《夏威夷史诗》要在3周内出3000字的书评，和知乎上的2万字答案要维护……别怕，伊卡洛斯之翼说了，作死就要作个大的。</p>
</article>
<hr />
<hr />
<hr />
<article id="article3">
<h2>随波逐流（3）——别倒下</h2>
<P>持续不断的学习是如此重要，只有记录了曾经的事，才能知道现在的自己于曾经的自己有多么不同，是怎样的向上努力着。</P>
<P>这一周的事情实在是太多了，豆瓣的征文又没写成，关于 js 的部分也没有搞懂太多，仿佛进入了一个瓶颈。着凉，嗓子难受，肺出气不易。我知道明后天就会好，但这个周末却着实什么都没做成，光睡觉了。昨天（周六）下午在群里跟「弦子」还说睡半个小时就能起来，然后精神一下午，结果呢，15点躺下，19点才起来，嗓子还是难受，不想动。</P>
<P>人，还是要稳下来，稳中求胜，一点点累积。不能去一个不知名的远方公司冒险，危险系数太高，以及无尽的加班。好歹积累一年经验，然后再看看其他地方有没有适合的位置。</P>
<P>狗跑丢了。从上午10点开始找，找到晚上8点，累计走了20公里，还是没有。</P>
<P>疲惫，腰酸腿疼，感冒加重。</P>
<p>难挨的日子，绝望蔓延，如没有希望一般的等待。</p>
<hr />
<h4>.x 和 [x]</h4>
<p>.x 的 x 必须是 valid 的变量名，所以当确定某个对象有x属性的时候，为了简便，就要使用.x，但是如果 x 不是一个 valid 的变量名，或者需要「运算」然后把结果赋予这个属性，那么就用「x」，这个上周没有读懂，这周终于读懂了。</p>
<h4>数组</h4>
<p><code>[x0,x1,x2]</code>，数组中，第一位的 index 是0。</p>
</article>
<hr />
<hr />
<hr />
<article id="article2">
<h2>随波逐流（2）——书读百遍，举一反三</h2>
<img src="cover.jpg" alt="bookcover of eloquentjavascript" />
<p>前端的浪潮实在太快，跳进去只能随波逐流。</p>
<p>这是从过去的失败日子里收获的教训，只有实践了才会知道这个世界是怎么样的，宅在家中想，觉得自己什么都行，真的没什么价值，不仅没有普世价值，连现在的自己回望从前的自己时，都有一种恍然的感觉。</p>
<p>生活何尝不是一种修行，在没有能力的时候，先随波逐流没什么不好。当然，也许不会有现在的心境，但如果另一条时间线上的我在毕业时就选择了辛勤工作，心境就比现在的要差吗？</p>
<p>不好说</p>
<p>这周包括未来几周都要暂时搁置 css 和 html，开始系统的学习 javascript，在横拉窗口的时候发现博客的「Email 块」竟然没有 <code>float:right</code> ，我也不知道当时是怎么想的。</p>
<hr />
<h4>Parameter 的 variable 本质</h4>
<p><a href="http://eloquentjavascript.net/">Eloquent Javascript</a> 是非常不错的 js 教程，简明易懂，比如在说「数据类型」的时候，就讲到数据类型的来源是什么。而在讲解 function 的 parameter 的时候，也是深入浅出的解释道——parameter 其实就是 function 中 variables，并且这个 variable 的值是由 caller 赋予的。当时看第一边的时候真的没懂，正如我在知乎的某个答案说学习 <code>null undefined false NaN</code> 之间的关系的时候，陆续看了三遍，function 显然是 js 的重点，看不懂就再看，三遍不行就四遍、五遍，终于看懂了。parameter 不仅仅是一个 function 内的 variable,更是一个由 caller 控制的 variable，所以 function 内一定不能将 parameter 绑定在一个自己不想控制的 variable 上。</p>
<h4>null 与 0</h4>
<p>null 只等于 undefined 或者 null 本身，而 <code>null*8 = 0</code> 是因为类型强制（type coercion），为了计算，js 必须将 null 转换成数值，null 转换成数值就是 0。</p>
<h4>for 循环</h4>
<p><code>for(var x= 1; x < 10; x++)</code></p>
<p>必须有三项 parameter，除了最后一项 parameter 之外，其他的 parameter 即使不想设置也必须用 <code>""</code> 即空值来表示，不然 js 的自动不全会导致 parameter 的对应关系错乱。</p>
<h4>function 是难点</h4>
<p><code>var x= function(y)</code> 和 <code>function x(y)</code> 是同时允许的。逻辑上有些不同，本书的后面又说了 Closure 和 Recursion 等问题，云山雾罩的，让我一个程序小白理解这些问题真的很难，来来回回读不下十次了，还是理解不了。</p>
<h4>举一反三</h4>
<img src="homework1.jpg" alt="homework1: 7 lines of # from 1 to 7">
<p>很简单的作业，如果这是用 Python 写，估计早就搞定了。现实寻找 js 的 IDLE 费了好久时间，连 Visual Studio 都安装了，还是没搞定，结果最后是在教程内置的 code 编辑器里面完成的。骑驴找驴啊。</p>
<img src="homeworkcode1.jpg" alt="code of homework 1">
<p>基本的逻辑还是有，浪费在 syntax 上大概有10分钟，先尝试了用 function 来完成，后来突然发现这根本就不用 function 嘛。</p>
<p>突发奇想，如果需要的不是 7 行，而是 n 行怎么办？</p>
<p>当然用 function 啦，这就是 function 存在的目的啊。于是有了下面的代码：</p>
<img src="homeworkcode1-a.jpg" alt="wrong code of homework warpped in function">
<p>但是问题来了，每次运行之后，都会多出最末一行字符 <code>undefined</code>，爪子会这样嘞？</p>
<p>原来在 homeworkdamnhard(7) 调用函数之后，最末行的 console.log 又返回了 function 的默认值，当然就是 undefiend。</p>
<p>在 function 中使用 return 当然会返回 variable 的值，改变返回 undefiend 的结果。但是这个 statement 中，需要循环输出，可是 return 会终止 function 的计算过程，所以不能用 return。</p>
<p>找了很久，到底改返回什么，经过在知乎请教，得知还有另一种方法，就是去掉最外层的 console.log。难道这样不会变成什么结果都不显示吗？</p>
<p>答案是不会，因为在 function 内部还有 console.log，在 statement 每次循环的时候都会返回对应的值。</p>
<p>所以正确的代码应该是：</p>
<img src="homeworkcode1-b.jpg" alt="right code of homework warpped in function">
<p>举一反三，对一个问题给出了两个代码，同时还深刻的理解了 return 和 console.log。开心~~</p>
<p>第二个练习本想用 switch 来写，结果写出来才发现很多问题，比如 switch 后面的 expression 要怎么写？还比如 case 下的多条件用什么连接。然后矛盾的地方就来了：</p>
<ol>
<li>为什么 var x=***, y=***,z=*** 的多项要用 <code>,</code> 来分隔，而在 if 或 case 等条件语句中就要用 <code>&&</code>？这难道不矛盾吗？</li>
<li>为什么 if 后面的条件判断要用 <code>()</code> 来界定，而 case 后面则不能用 <code>()</code>？这也太矛盾了吧？</li>
</ol>
<img src="homeworkcode2-a.jpg" alt="code of the second homeword method a">
<p>总之，最后好歹是用 if 的模式完成了，也就是上图。同样是做了一个 function，搞成了万用模式，我就好像有强迫症是的。但是 switch 的模式在我心中久久不去，下周继续。</p>
<h4>数学，还有 Python</h4>
<p>数学和后端对前端无疑裨益良多，要多多学习。天色已晚，明日上班，睡前学学 MIT 的「单变量微积分」就当看美剧了吧。虽然名字听起来有点蛋疼，不过老师还是萌萌的。Python 下周也争取多熬出一节课来。时间时间实在是不够，浪费了十年青春，忙成这个德行也是活该。豆瓣阅读邀请参加的大赛稿子还没写完，本来打算这周末写，结果时间都花在 js 上了。看来对 GTD 也不能再反感了，找个时间取其精华。</p>
<p>加油。</p>
</article>
<hr />
<hr />
<hr />
<article id="article1">
<h2>随波逐流（1）——编辑器</h2>
<img src="emacs-vs-vim.jpg" alt="编辑器对比图" />
<p>昨天下午纠结于编辑器的选择，心中的抑郁之情就如同今天万里晴空中的绵羊状白云般散乱不堪。对更佳工具的渴望在不知不觉中变得朦胧了，模糊了，越来越远，远的自己已经看不清为什么而来。</p>
<p>我曾经有很多偏执的想法，部分因当前互联网技术的发展解决了，部分没有。那时候的心情必然是如跳不出去的井底之蛙，仿佛受伤的雏鹰，心中清楚自己能飞的更高，却被现实束缚了翅膀，只能忍着。比如云服务。这世界本应该只有一种优美的云服务，而不是遍地开花。但这个想法有致命的缺点——垄断必然造成产品不思进取，可以参考IE6。</p>
<p>产品多可以看作一种好事，但起码作为个人来讲是要追求统一的。很久之前，别人说我是强迫症，完美主义者。前者我不同意，至于完美主义，谁不喜欢呢？几年前我甚至开始纠结为什么很多程序有相同重复的功能，甚至魔兽世界的插件也有重复的功能，这太不完美了。要么你给我一种单一的功能；要么你给我完善的功能，到处都是半吊子算什么？</p>
<p>甚至连单一的环境内部，都无法达到基本的统一。效率软件常见吧，Calendar，Memo，Reminder，这些难道不重复吗？难道 Reminder 就不能整合进 Calendar 里？</p>
<p>不能！</p>
<p>我知道肯定有人这么说，他们有各种各样的理由。事实是，几年前我对完美的偏执，比如要求多平台的同步，在当时也只是一个『偏执』而已，如今人类的技术实现了，不知道当时以各种理由反驳我的诸位作何感想？</p>
<p>Windows 也有它致命的缺点，如今我在PC上运行着 Windows10 Technical Preview，各种新的 Feature 真的让我感觉到微软的用心，但有些功能让我感觉很不爽，比如：</p>
<img src="GDI vs Direct.jpg" alt="GDI vs Direct" class="toobig"/>
<ul>
<li>万年不变的字体渲染。我已经不想再去争论 GDI，Cleartype 或者 DirectX，这些是我一个用户应该感兴趣的东西吗？我需要一个更好的渲染，单纯的是因为 Windows 下的字体渲染实在太丑，于是我才安装了 Mactype。在 GDI 的渲染下，雅黑大概是最好看的字体了，甚至超越了冬青黑。有这么好的字体，微软怎么就不能好好渲染呢？有人说英文下效果还是不错的，我只能说：Windows 下默认英文的渲染也是发飘的啊亲。</li>
<li>不断变化的搜索。在 Window7 中，搜索是基于内容的，这代表着可以搜索到包含某段字符的文档，强大到爆表！但是 Windows10 又改回了标题搜索。我觉得这两种搜索应该合并，而不是发展什么 Bing……Bing 的『本机搜索』实在太难用了，怎么就不能好好迭代呢？但微软的心似乎太急切了，就像一个刚刚成年的少女，还未成熟，就急于嫁出去。</li>
</ul>
<p>回到编辑器上来，选来选去，连Visul Studio都试过了，还是 notepad++ 好用。为什么说 notepad++ 好用呢？纯粹是因为我打开就能用，并且它的界面比较中规中矩。至于 vim ，就说这个『~』标记，难道编辑器不应该是空白的更好么？每行都是 ~ 好难看。也许有很多方法可以调试 vim，但是我懒得折腾。</p>
<p>这并不是说 notepad++ 就比 vim 好，我想说的是，正常的一个经过考研的工具没有『好』或者『不好』，只有适用还是不适用。将来有一天，我也许会使用 vim，但目前的情况是，我每天写的代码大概只有70-100行，甚至少于50行。对我而言，目前很多代码写的还不熟练，很多项目只是理论上了解它的框架，实际编写中会遇到很多很多需要大量思考的问题。换言之，我大部分时间是在思考而非编写，写两三行就要思考个 10 几分钟。就这么个情况，我用得着 vim 吗？</p>
<p>我们需要完美产品的本质并不是我们对完美产品的追求，也不是一个人的偏执，而是它给我们带来了实实在在的便利啊。</p>
<p>可我们却常常忘记了这个初衷。</p>
<hr />
<p>接下来说一点在编写这个博客的时候遇到的一些问题：</p>
<ol class="ol">
<li>
<p>浏览器默认的 Padding，对 body 标签而言就是 margin。为了达到铺满全窗口的效果，如果是像知乎那样的白色，完全可以搞个 div 设置个宽度然后 {margin:0 auto;}，在这里宽度是必要的，因为本身没宽度在哪里算居中呢？明显是强人所难。<p>
<p>但如果背景色不是白色，就有问题了。之前我处理的方式是 {position:absolute; left:0; top:0;} 这个方法是在知乎上模仿蓝色的 banner 时学习的，但如果全部的 div 都用这个方法就不好办了。</p>
<p>虽然知乎的背景是白色，但是代码仍然是可以参考的，参考别人的代码，说起来就是搞懂人家的思维。于是看到了 body{margin:0}，这样一来，body 的四周没有 margin，自然会铺满。</p>
</li>
<li>
<p>a 标签只有在假如 href 属性后，文字的颜色才会变成 visited 的样式，架构的时候一定要把 href 标签写好，不然到最后还得改颜色，废二遍事。</p>
</li>
<li>
<p>在 body{margin:0} 的方法下，h 标签，也就是标题，自带一个 margin，可以把框架挤出应有的位置，去掉对应方向的 margin 可以解决问题。遇到莫名问题的时候可以使用 F12 迅速发现造成布局问题的根本原因，不要猜来猜去。</p>
</ol>
<hr />
<p>然后是这个博客未来的 Coding 计划，按目前猜测难度顺序是：</p>
<ol class="ol">
<li>
<p>Article 的发布时间标记。</p>
</li>
<li>
<p>赞、转发、评论、标签等功能。</p>
</li>
<li>
<p>若有若无的分割线。</p>
</li>
<li>
<p>多页面文章列表等功能。</p>
</li>
<li>
<p>右边栏的顶部触发定位效果。</p>
</li>
</ol>
<hr />
<p>还是不喜欢直接使用 JellyII，同样，并不是因为它不好，而是因为我目前要学习造轮子，而不是直接使用轮子。By the way，感谢 Vzch 帮我重新认识了微软和 Coding。</p>
</article>
</section>
</div>
</div>
<div id="thirdbodyinfo">
<div id="navbar">
<nav id="navbarnav">
<ul>
<a href="poem.html"><li class="bordernone">诗歌</li></a>
<a href=""><li class="bordernone">散文 (开发中)</li></a>
<a href=""><li class="bordernone">评论 (开发中)</li></a>
<a href=""><li class="bordernone">Code (首页)</li></a>
<a href=""><li>刹那 (开发中)</li></a>
</ul>
</nav>
</div>
<div id="signaturerelative">
<article id="signature">
<p>你是天上的流星，</p>
<p>燃烧了黑暗的夜空;</p>
<p>你是风中的信使，</p>
<p>托起我萦绕的孤独;</p>
<p>你是盛开的昙花，</p>
<p>落尽了千年的情缘;</p>
<p>你是来生的相伴，</p>
<p>注定我今生的等待。</p>
<br />
<p>F & 火红的鱼</p>
<p>2013.10</p>
</article>
</div>
</div>
<br class="clear"></br>
</div>
<div id="banner">
<div>
<h5>如大海一般波澜不惊隐藏波涛起伏，并因为秘密和创痛闪烁出无尽的暗与美</h5>
</div>
<div id="email">
<a href="mailto:fadeoc@gmail.com"><strong>fadeoc@gmail.com</strong></a>
</div>
<div>
</body>
</html>