-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1615 lines (992 loc) · 75.3 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>
<html>
<head>
<meta charset="utf-8">
<title>前学僧 | 做项目，学前端</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="前学僧 前端 前端培训 javascript html css angular react react native">
<meta property="og:type" content="website">
<meta property="og:title" content="前学僧 | 做项目，学前端">
<meta property="og:url" content="http://qianxueseng.com/index.html">
<meta property="og:site_name" content="前学僧 | 做项目，学前端">
<meta property="og:description" content="前学僧 前端 前端培训 javascript html css angular react react native">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前学僧 | 做项目，学前端">
<meta name="twitter:description" content="前学僧 前端 前端培训 javascript html css angular react react native">
<link rel="alternative" href="/atom.xml" title="前学僧 | 做项目，学前端" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link rel="stylesheet" href="/css/style.css" type="text/css">
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68425879-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<meta name="google-site-verification" content="4xfwheGUYHnoEOGUNJ0HDHT823ymxMsopQrYB-_oa-Y" />
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">前学僧 | 做项目，学前端</a>
</h1>
<h2 id="subtitle-wrap">
<a href="/" id="subtitle">所有想学前端的人啊，你们好不好。前端是如此的刁，我们注定无处可逃。</a>
</h2>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
<a class="main-nav-link" href="https://github.com/qianxueseng-com/js-projects">Github</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://qianxueseng.com"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-how-to-start" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<h1 id="web前端按照什么顺序学习？">web前端按照什么顺序学习？</h1><p>只有一个先后顺序，从小项目，到中等项目，到大项目。和小伙伴们一起做<a href="https://github.com/qianxueseng-com/js-projects/issues/1" target="_blank" rel="external">这些项目</a>吧。</p>
<p>关注前学僧公众号，每周观看最经典的前端技术视频。我们的口号是：”哪里有天才，我是把别人看美剧的工夫都用在看技术讲座上”。</p>
<p><img src="https://cloud.githubusercontent.com/assets/11914135/14010539/3aa729a0-f153-11e5-8d16-49100ad18177.jpg" alt=""></p>
<p>神马？不会JavaScript？边做项目边学基础知识，请看<a href="https://github.com/qianxueseng-com/js-projects#如果觉得自己还需要巩固基本的javascript" target="_blank" rel="external">一本书和做两个练习</a></p>
<p>受著名的<a href="http://guides.codepath.com/android" target="_blank" rel="external">codepath笔记</a>的影响，这儿是我们众筹和严重建设中的<a href="/guides">前学僧笔记</a>，致力于包含一些实用并且最新的前端知识，欢迎参与编辑我们的<a href="//github.com/qianxueseng-com/guides/wiki">笔记所在的wiki</a>。</p>
<p>先做一个星期就能完成的项目，比如一个简单的静态网站，要能responsive额</p>
<p>再做一个月就能完成的项目，比如能够用户注册，登陆，登出，留个言，发个图</p>
<p>再做几个人一个月能完成的项目，比如实现饿了么点餐系统的后台管理页面，让餐馆老板可以编辑菜单，收订单，收钱，编辑别人的留言</p>
</div>
</div>
</article>
<hr />
<article id="post-how-a-complete-beginner-learned-go" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/how-a-complete-beginner-learned-go/" class="article-date">
<time datetime="2016-04-20T14:45:30.000Z" itemprop="datePublished">2016-04-20</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/how-a-complete-beginner-learned-go/">how a complete beginner learned go</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="一个新手学习go的心路历程">一个新手学习go的心路历程</h1><ul>
<li>态度很好</li>
<li>从新手的角度讲了go和几门其他语言的区别</li>
<li>讲了go是怎样帮助她入门和找到工作的</li>
</ul>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=o0195dxzewr&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2016/04/how-a-complete-beginner-learned-go/" data-id="civh8u7ri001jqeboorejcujo" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/go/">go</a></li></ul>
</footer>
</div>
</article>
<article id="post-f8-2016" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/f8-2016/" class="article-date">
<time datetime="2016-04-14T03:35:21.000Z" itemprop="datePublished">2016-04-13</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/f8-2016/">f8 2016</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="2016_Facebook的开发者大会">2016 Facebook的开发者大会</h1><ul>
<li>十年计划: 让更多的人上网，人工智能，虚拟现实</li>
<li>还有类似微信的聊天机器人平台</li>
<li>像两会一样，这都是政策走向啊</li>
</ul>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=d0193r8frxq&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2016/04/f8-2016/" data-id="civh8u7s7001yqebocallflug" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/f8/">f8</a></li></ul>
</footer>
</div>
</article>
<article id="post-creating-scalable-javascript-architecture" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/creating-scalable-javascript-architecture/" class="article-date">
<time datetime="2016-04-12T03:28:54.000Z" itemprop="datePublished">2016-04-11</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/creating-scalable-javascript-architecture/">creating scalable javascript architecture</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="怎样设计大型前端应用">怎样设计大型前端应用</h2><ul>
<li>如果你在做一个大型的前端引用，应该反复看</li>
<li>还是比较早期的，基于比较基本的框架例如jquery之类的</li>
<li>和某个框架没有关系，通过约定俗成的规定来实现松散的耦合</li>
<li>modules，不知道其他的modules，只和sandbox通讯，只操作自己的DOM</li>
<li>sandbox，确保接口统一，基本是module的包装，可以是个mediator</li>
<li>application core，只管理modules和module的生命周期，集中管理错误，可扩展</li>
<li>base library，最好只有application core知道base library</li>
</ul>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=v01905o610n&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2016/04/creating-scalable-javascript-architecture/" data-id="civh8u7sa0021qebojnlg01zx" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/nicholas-zakas/">nicholas zakas</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/video/">video</a></li></ul>
</footer>
</div>
</article>
<article id="post-be-predictable-not-correct" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/be-predictable-not-correct/" class="article-date">
<time datetime="2016-04-05T03:03:19.000Z" itemprop="datePublished">2016-04-04</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/be-predictable-not-correct/">be predictable not correct</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="要写可预测的代码，哪怕不一定永远正确">要写可预测的代码，哪怕不一定永远正确</h2><p>著名的Pete Hunt讲解了React背后的思想</p>
<ul>
<li>主要讲思想，而不是React本身</li>
<li>分析Ember和Angular</li>
<li>分析two way data binding的问题</li>
<li>强调simple !== familiar</li>
</ul>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=u01917i5abv&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2016/04/be-predictable-not-correct/" data-id="civh8u7si002cqebo2eaqgweg" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/pete-hunt/">pete hunt</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/react/">react</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/video/">video</a></li></ul>
</footer>
</div>
</article>
<article id="post-a-cartoon-guide-to-the-wilds-of-data-handling" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/a-cartoon-guide-to-the-wilds-of-data-handling/" class="article-date">
<time datetime="2016-03-30T04:08:02.000Z" itemprop="datePublished">2016-03-29</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/a-cartoon-guide-to-the-wilds-of-data-handling/">a cartoon guide to the wilds of data handling</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="用漫画展示怎么在React中处理数据">用漫画展示怎么在React中处理数据</h2><ul>
<li>形象的讲解了什么是flux redux relay</li>
<li>flux讲的非常好</li>
<li>redux讲的一般</li>
<li>relay就更一般了</li>
</ul>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=j0191be3vsx&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2016/03/a-cartoon-guide-to-the-wilds-of-data-handling/" data-id="civh8u7sr002jqeboanhn6w6n" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/react/">react</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/redux/">redux</a></li></ul>
</footer>
</div>
</article>
<article id="post-javascript-the-good-parts" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/javascript-the-good-parts/" class="article-date">
<time datetime="2016-03-23T04:18:31.000Z" itemprop="datePublished">2016-03-22</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/javascript-the-good-parts/">javascript the good parts</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="经典不需要解释">经典不需要解释</h2><ul>
<li>最老的视频，效果不是很好，但是经典的东西需要效果好吗？？？？</li>
<li>至少它不是黑白的，不是黑白的，不是黑白的。。。</li>
<li>没看过这个都不好意思和别人说我是学前端的。。。</li>
</ul>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=x0189tzdmdc&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2016/03/javascript-the-good-parts/" data-id="civh8u7rc001eqeboofngwg16" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/video/">video</a></li></ul>
</footer>
</div>
</article>
<article id="post-react-conf-2016-ben-alpert-what-lies-ahead" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/react-conf-2016-ben-alpert-what-lies-ahead/" class="article-date">
<time datetime="2016-03-20T04:50:49.000Z" itemprop="datePublished">2016-03-19</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/react-conf-2016-ben-alpert-what-lies-ahead/">react conf 2016 ben alpert what lies ahead</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="React的2016会是什么样子">React的2016会是什么样子</h2><h3 id="React的核心工程师展望了2016React会是什么样子，主要有">React的核心工程师展望了2016React会是什么样子，主要有</h3><ul>
<li>animation</li>
<li>gestures</li>
<li>data managment (flux/redux)</li>
</ul>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=h0189qsa390&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
<h3 id="原始链接"><a href="https://www.youtube.com/watch?v=-RJf2jYzs8A" target="_blank" rel="external">原始链接</a></h3>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2016/03/react-conf-2016-ben-alpert-what-lies-ahead/" data-id="civh8u7qq000qqeboh1k6x5gi" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ben-alpert/">ben alpert</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/video/">video</a></li></ul>
</footer>
</div>
</article>
<article id="post-pete-hunt-react-rethinking-best-practices" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/pete-hunt-react-rethinking-best-practices/" class="article-date">
<time datetime="2016-03-17T07:37:10.000Z" itemprop="datePublished">2016-03-17</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/pete-hunt-react-rethinking-best-practices/">pete hunt react rethinking best practices</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="最早的React视频之一">最早的React视频之一</h2><ul>
<li>当时非常有争议</li>
<li>现在看起来是那么的自然</li>
</ul>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=n01891s0j8d&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
<h2 id="原始链接"><a href="https://www.youtube.com/watch?v=x7cQ3mrcKaY" target="_blank" rel="external">原始链接</a></h2>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2016/03/pete-hunt-react-rethinking-best-practices/" data-id="civh8u7qy000yqebotxp3z9ut" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/pete-hunt/">pete hunt</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/video/">video</a></li></ul>
</footer>
</div>
</article>
<article id="post-hacker-way-rethinking-web-app-development-at-facebook" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/hacker-way-rethinking-web-app-development-at-facebook/" class="article-date">
<time datetime="2016-03-16T05:51:03.000Z" itemprop="datePublished">2016-03-15</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/hacker-way-rethinking-web-app-development-at-facebook/">hacker way rethinking web app development at facebook</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="Facebook在2014的F8介绍React的第一个视频">Facebook在2014的F8介绍React的第一个视频</h1>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=g0189w2yt1r&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
<h3 id="大纲">大纲</h3><ul>
<li>为什么不用MVC</li>
<li>什么是Flux</li>
<li>真实的Facebook的bug</li>
<li>为什么React解决了所有的问题</li>
<li>总之，这个视频从很高的层面讲了为什么要用React和Flux，值得反复看。</li>
</ul>
<h3 id="网友提供的全文在此">网友提供的<a href="https://github.com/qianxueseng-com/qianxueseng-com.github.io/files/175350/flux-presentation-text.pdf" target="_blank" rel="external">全文在此</a></h3><p><a href="https://www.youtube.com/watch?v=nYkdrAPrdcw" target="_blank" rel="external">原始视频连接</a></p>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2016/03/hacker-way-rethinking-web-app-development-at-facebook/" data-id="civh8u7rs001oqebomsz3d69w" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/react/">react</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/video/">video</a></li></ul>
</footer>
</div>
</article>
<article id="post-new-year-wishes" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/12/new-year-wishes/" class="article-date">
<time datetime="2015-12-31T07:29:05.000Z" itemprop="datePublished">2015-12-30</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/12/new-year-wishes/">new year wishes</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="前端的新年愿望：世界上只有一种浏览器">前端的新年愿望：世界上只有一种浏览器</h1><ul>
<li>哈哈。希望更多的人学习前端，并且在学习的时候以Javascript为主，而不是去写CSS。</li>
</ul>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2015/12/new-year-wishes/" data-id="civh8u7r10012qebojusf67ex" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/soup/">soup</a></li></ul>
</footer>
</div>
</article>
<article id="post-react-baidu-home-page" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/12/react-baidu-home-page/" class="article-date">
<time datetime="2015-12-31T03:28:17.000Z" itemprop="datePublished">2015-12-30</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/12/react-baidu-home-page/">react baidu home page</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="React模块一，实现百度的首页">React模块一，实现百度的首页</h1><h2 id="配套的前端笔记"><a href="//github.com/qianxueseng-com/guides/wiki/react-js-video-tutorials">配套的前端笔记</a></h2><p>##<br><a href="//github.com/yrok/learnReact">完成的代码</a></p>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=j0189wm5dr2&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2015/12/react-baidu-home-page/" data-id="civh8u7qv000vqebonwf27kgi" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/react/">react</a></li></ul>
</footer>
</div>
</article>
<article id="post-github-pages-custom-domain" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/12/github-pages-custom-domain/" class="article-date">
<time datetime="2015-12-29T06:42:37.000Z" itemprop="datePublished">2015-12-28</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/12/github-pages-custom-domain/">github pages custom domain</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="给github_pages设置域名">给github pages设置域名</h1><h3 id="步骤">步骤</h3><ul>
<li><p>创建一个repo，例如<a href="https://github.com/qianxueseng-com/askvc.com" target="_blank" rel="external">https://github.com/qianxueseng-com/askvc.com</a></p>
</li>
<li><p>clone到本地并创建gh-pages branch然后push</p>
<figure class="highlight vim"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">git clone http<span class="variable">s:</span>//github.<span class="keyword">com</span>/qianxueseng-<span class="keyword">com</span>/askvc.<span class="keyword">com</span>.git</span><br><span class="line">git checkout -<span class="keyword">b</span> gh-pages</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"askvc.com"</span> > CNAME</span><br><span class="line"><span class="keyword">echo</span> <span class="string">"this is index.html"</span> > <span class="built_in">index</span>.html</span><br><span class="line">git <span class="built_in">add</span> .</span><br><span class="line">git commit</span><br><span class="line">git push</span><br></pre></td></tr></table></figure>
</li>
<li><p>设置DNS</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">askvc</span><span class="class">.com</span> <span class="tag">--</span> <span class="tag">A</span> <span class="tag">--</span> 192<span class="class">.30</span><span class="class">.252</span><span class="class">.153</span></span><br><span class="line"><span class="tag">askvc</span><span class="class">.com</span> <span class="tag">--</span> <span class="tag">A</span> <span class="tag">--</span> 192<span class="class">.30</span><span class="class">.252</span><span class="class">.154</span></span><br><span class="line"><span class="tag">www</span> <span class="tag">--</span> <span class="tag">CNAME</span> <span class="tag">--</span> <span class="tag">askvc</span><span class="class">.com</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>大功告成，可以访问<a href="askvc.com">askvc</a></p>
</li>
</ul>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2015/12/github-pages-custom-domain/" data-id="civh8u7s1001uqebolbwg2j1x" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/github/">github</a></li></ul>
</footer>
</div>
</article>
<article id="post-the-zen-of-python" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/12/the-zen-of-python/" class="article-date">
<time datetime="2015-12-28T22:45:44.000Z" itemprop="datePublished">2015-12-28</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/12/the-zen-of-python/">the zen of python</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="适用于所有语言的编程理念">适用于所有语言的编程理念</h1><p>如果你在的terminal里面敲入<br><figure class="highlight aspectj"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">python</span><br><span class="line"><span class="keyword">import</span> <span class="keyword">this</span></span><br></pre></td></tr></table></figure></p>
<p>就会出现下面的语句</p>
<h3 id="The_Zen_of_Python,_by_Tim_Peters">The Zen of Python, by Tim Peters</h3><ul>
<li>Beautiful is better than ugly.</li>
<li>Explicit is better than implicit.</li>
<li>Simple is better than complex.</li>
<li>Complex is better than complicated.</li>
<li>Flat is better than nested.</li>
<li>Sparse is better than dense.</li>
<li>Readability counts.</li>
<li>Special cases aren’t special enough to break the rules.</li>
<li>Although practicality beats purity.</li>
<li>Errors should never pass silently.</li>
<li>Unless explicitly silenced.</li>
<li>In the face of ambiguity, refuse the temptation to guess.</li>
<li>There should be one– and preferably only one –obvious way to do it.</li>
<li>Although that way may not be obvious at first unless you’re Dutch.</li>
<li>Now is better than never.</li>
<li>Although never is often better than <em>right</em> now.</li>
<li>If the implementation is hard to explain, it’s a bad idea.</li>
<li>If the implementation is easy to explain, it may be a good idea.</li>
<li>Namespaces are one honking great idea – let’s do more of those!</li>
</ul>
<p>网上的<a href="http://www.douban.com/group/topic/3740034/" target="_blank" rel="external">中文翻译</a></p>
<h3 id="Python之禅">Python之禅</h3><p>赖勇浩翻译</p>
<ul>
<li>优美胜于丑陋（Python 以编写优美的代码为目标）</li>
<li>明了胜于晦涩（优美的代码应当是明了的，命名规范，风格相似）</li>
<li>简洁胜于复杂（优美的代码应当是简洁的，不要有复杂的内部实现）</li>
<li>复杂胜于凌乱（如果复杂不可避免，那代码间也不能有难懂的关系，要保持接口简洁）</li>
<li>扁平胜于嵌套（优美的代码应当是扁平的，不能有太多的嵌套）</li>
<li>间隔胜于紧凑（优美的代码有适当的间隔，不要奢望一行代码解决问题）</li>
<li>可读性很重要（优美的代码是可读的）</li>
<li>即便假借特例的实用性之名，也不可违背这些规则（这些规则至高无上）</li>
<li>不要包容所有错误，除非你确定需要这样做（精准地捕获异常，不写 except:pass 风格的代码）</li>
<li>当存在多种可能，不要尝试去猜测</li>
<li>而是尽量找一种，最好是唯一一种明显的解决方案（如果不确定，就用穷举法）</li>
<li>虽然这并不容易，因为你不是 Python 之父（这里的 Dutch 是指 Guido ）</li>
<li>做也许好过不做，但不假思索就动手还不如不做（动手之前要细思量）</li>
<li>如果你无法向人描述你的方案，那肯定不是一个好方案；反之亦然（方案测评标准）</li>
<li>命名空间是一种绝妙的理念，我们应当多加利用（倡导与号召）</li>
</ul>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2015/12/the-zen-of-python/" data-id="civh8u7qe000fqebo33q067wz" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/zen/">zen</a></li></ul>
</footer>
</div>
</article>
<article id="post-linting-with-eslint-and-atom-video" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/12/linting-with-eslint-and-atom-video/" class="article-date">
<time datetime="2015-12-28T09:00:02.000Z" itemprop="datePublished">2015-12-28</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/12/linting-with-eslint-and-atom-video/">linting-with-eslint-and-atom-video</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="Linting_with_ESLint_and_Atom">Linting with ESLint and Atom</h1><h2 id="配套的前端笔记"><a href="//qianxueseng.com/guides/linting-react-with-eslint-and-atom">配套的前端笔记</a></h2>
<iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=n01893vrgvg&width=500&height=375&auto=0" allowfullscreen frameborder="0" height="375" width="500"></iframe>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2015/12/linting-with-eslint-and-atom-video/" data-id="civh8u7r70017qebouarw1icw" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-github-pages-tips" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/12/github-pages-tips/" class="article-date">
<time datetime="2015-12-16T07:12:08.000Z" itemprop="datePublished">2015-12-15</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/12/github-pages-tips/">github-pages-tips </a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="github_pages_的坑">github pages 的坑</h1><h2 id="有四种page">有四种page</h2><ul>
<li>User Pages site，这个应该取名叫username.github.io</li>
<li>Organization Pages site，这个取名叫orgname.github.io</li>
<li>Project Pages site owned by a user account，这个如果取名叫proa的话，就会在username.github.io/proa</li>
<li>Project Pages site owned by an organization，这个如果取名叫prob的话，就会在orgname.github.io/prob</li>
</ul>
<h2 id="有两种branch">有两种branch</h2><ul>
<li>User Pages site和Organization Pages site应该用<code>master</code> branch</li>
<li>Project Pages site owned by a user account和Project Pages site owned by an organization应该用<code>gh-pages</code> branch</li>
</ul>
<p>绝对坑爹…</p>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2015/12/github-pages-tips/" data-id="civh8u7rw001rqeboz3lgbj69" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/github/">github</a></li></ul>
</footer>
</div>
</article>
<article id="post-the-wrong-way-to-learn-front-end" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/the-wrong-way-to-learn-front-end/" class="article-date">
<time datetime="2015-11-13T06:03:42.000Z" itemprop="datePublished">2015-11-12</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/the-wrong-way-to-learn-front-end/">the wrong way to learn front end</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="学前端不是纸上谈兵">学前端不是纸上谈兵</h1><p>看到各种各样的前端入门指南，只能说，不要纸上谈兵了。</p>
<h3 id="误区一，只看书不练习">误区一，只看书不练习</h3><p>想一想，你是愿意和一个能背出军事名著的人打仗还是和一个身经百战的人打仗。同样的，你是和一个读过很多书的人做项目还是和一个真的写了很多代码的人做项目呢？</p>
<h3 id="误区二，花大量时间学习冷门的css或者html">误区二，花大量时间学习冷门的css或者html</h3><p>然后并没有什么太多用处。茴字有几种写法？我不太管你知道多少种居中的办法，只要你知道一两种，并且知道他们为什么工作，就行了。</p>
<h3 id="误区三，贪全">误区三，贪全</h3><p>我又会指挥水军，又会指挥骑兵，又会攻城。。。估计您是都不太行吧。。。。不用想着上来就是什么都会，一项项来。写几个微信的html5页面，自然会移动端开发了。写几个支持IE的应用，自然会兼容了。</p>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2015/11/the-wrong-way-to-learn-front-end/" data-id="civh8u7qh000iqebo2k7gnx5f" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li></ul>
</footer>
</div>
</article>
<article id="post-what-is-h5" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/what-is-h5/" class="article-date">
<time datetime="2015-11-06T07:18:44.000Z" itemprop="datePublished">2015-11-05</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/what-is-h5/">what is h5</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="h5是什么意思">h5是什么意思</h1><p>我是少见多怪了，从来没有意识到h5变成一个常见的词，专指HTML5的缩写。其实绝大部分的场合，基本和H5没啥关系，就是一个能够在手机上用的网页罢了，最多有点小动画或者背景音乐。。。</p>
<p>HTML5和它的上一代比起来，就是多了一些tag和api，例如video, canvas, audio等。其实绝对是吹了很多，没有实现太多，直到微信横扫天下。。。</p>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2015/11/what-is-h5/" data-id="civh8u7q90009qebo05kak5xs" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html5/">html5</a></li></ul>
</footer>
</div>
</article>
<article id="post-commonjs" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/commonjs/" class="article-date">
<time datetime="2015-11-06T07:10:02.000Z" itemprop="datePublished">2015-11-05</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/commonjs/">commonjs</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="模块化">模块化</h1><p>先大致说下，无非就三种, commonjs, amd 和 es6。例如<a href="https://medium.com/@brianleroux/es6-modules-amd-and-commonjs-c1acefbe6fc0" target="_blank" rel="external">这篇文章</a>。</p>
<h3 id="有什么用呢？">有什么用呢？</h3><ul>
<li>组织代码，不然几万行代码怎么办啊？</li>
<li>实现隔离，每个文件或者模块都是自己的scope，就不会冲突了</li>
<li>更好的重用</li>
</ul>
<p>例子见这个<a href="http://www.zhihu.com/question/37011441" target="_blank" rel="external">知乎帖子</a></p>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2015/11/commonjs/" data-id="civh8u7se0025qebo67sn9jzh" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/commonjs/">commonjs</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/es6/">es6</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/module/">module</a></li></ul>
</footer>
</div>
</article>
<article id="post-wechat-web-apps" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/wechat-web-apps/" class="article-date">
<time datetime="2015-11-04T05:56:48.000Z" itemprop="datePublished">2015-11-03</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/wechat-web-apps/">wechat web apps</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="微信网页的前端框架选择">微信网页的前端框架选择</h1><p>目前数据不多，不敢瞎说。知乎上的<a href="http://www.zhihu.com/question/37152860" target="_blank" rel="external">张小龙说了React还不错</a>，我个人的经验也是React在微信的内嵌浏览器里面表现还可以。特别是因为React其实是支持IE8的，所以对于腾讯自己做的浏览器的支持应该尚可。腾讯浏览器再差也不会比IE8差吧，至少是基于Webkit的。</p>
<p>有数据再向大家汇报。</p>
</div>
<footer class="article-footer">
<a data-url="http://qianxueseng.com/2015/11/wechat-web-apps/" data-id="civh8u7qb000cqebot8zk8id8" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/wechat/">wechat</a></li></ul>
</footer>
</div>
</article>
<article id="post-which-os-for-front-end" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/11/which-os-for-front-end/" class="article-date">