/
how-to-learn.html
175 lines (144 loc) · 5.83 KB
/
how-to-learn.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
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>How to Learn</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/night.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<style>
.authorArea {
margin-top: 100px !important;
text-align: right;
font-size: 90% !important;
}
.code {
}
pre {
margin: 0px !important;
font-size: 105% !important;
}
code {
font-family: monospace !important;
}
small {
font-size: .8em !important;
margin: 10px 0px !important;
}
ul {
margin: 10px 0px !important;
list-style: none !important;
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>我是如何学习前端技术</h2>
<div class="authorArea">
</div>
</section>
<section>
<h2>前端技术有哪些?</h2>
</section>
<section>
<h2>前端工程师应该具备哪些技能?</h2>
</section>
<section>
<iframe src="http://html5ify.com/fks/fks_chart" width="1024" height="500">前端技能汇总图</iframe>
<h2>你认为上图中哪些技能最重要</h2>
</section>
<section>
<h2>忘掉那张图吧!</h2>
<img src="img/how-to-learn.png">
</section>
<section>
<h2>学习能力才是我想说的</h2>
</section>
<section>
<h2>那么应该具备什么样的学习能力?</h2>
</section>
<section>
<h2>第一,搜集资料的能力</h2>
<p>以学习angularJS为例, 你能找到那些资料?</p>
<!-- segmentfault上的答案, 我回答的 https://segmentfault.com/q/1010000003853757/a-1020000003855974 -->
<!-- 如何使用google https://www.zhihu.com/question/20161362 -->
<!-- stackoverflow and github-->
</section>
<section>
<h2>第二,归纳总结的能力</h2>
<p>将资料转化成自己的武器, 毕竟人的大脑容量是有限的</p>
<!-- 我当时有一个同事, 是做support的, 当时我们产品的客户都是不允许上网的, 所以很多东西
他自己都有总结在笔记本上, 例如搭建 NFS+NIS+Samba 服务器, 尤其牵扯到 windows -->
</section>
<section>
<h2>第三,实践的能力</h2>
<p>学到的知识,如果不使用,不去实践, 一是理解不深刻, 二是会被遗忘</p>
<!-- 必要的时候, 自己写一些demo, 或者github上找一些项目去做 -->
</section>
<section>
<h2>第四,英语能力</h2>
<p>其实,我应该把英语能力放在第一位的, 英语真的很重要, 英语真的很重要, 英语真的很重要</p>
<!-- 说一个真实的事情, 关于我当时在电话面试的时候, 面试官, 刚好问我angularJS 1.x 的缺点 -->
<!-- 资料被翻译成中文, 如果译者, 在理解上有偏差或加入个人观点, 可能会对读者产生误导 -->
</section>
<section>
<h2>那么怎样才能具备上面所说的四种能力?</h2>
</section>
<section>
<h2>Practice and Practice</h2>
<!--p> 在平时工作和学习中, 刻意实践和锻炼, 例如 英语不好, 那我就多读英文文档, 譬如, 我归纳总结能力比较弱,
我就在看书的过程中, 多写写笔记, 对了, 其实, 公司的日报, 其实挺锻炼人的 </p-->
</section>
<section>
<h2>我是这样学习的</h2>
<img src="img/how-to-learn2.png" height="500px" width="800px"/>
</section>
<section>
<h2>Q&A</h2>
</section>
<section>
<h2>参考资料</h2>
<ul>
<li><a href="http://html5ify.com/fks/fks_chart/">前端技能图谱</a></li>
<li><a href="https://github.com/hjzheng/front-end-collect">前端资料收集</a></li>
<li><a href="https://www.zhihu.com/question/20161362">知乎 - 如何用好 Google 等搜索引擎?</a></li>
</ul>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
Reveal.initialize({
history: true,
transition: 'linear',
progress: true,
math: {
// mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS_HTML-full'
},
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
]
});
</script>
</body>
</html>