-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1918 lines (877 loc) · 58.7 KB
/
index.html
File metadata and controls
1918 lines (877 loc) · 58.7 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
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 class="theme-next mist use-motion">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.0.1" rel="stylesheet" type="text/css" />
<meta name="keywords" content="笔记, Thoughts, code" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.1" />
<meta property="og:type" content="website">
<meta property="og:title" content="Programmer Swimming">
<meta property="og:url" content="http://qianxux.github.io/index.html">
<meta property="og:site_name" content="Programmer Swimming">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Programmer Swimming">
<script type="text/javascript" id="hexo.configuration">
var NexT = window.NexT || {};
var CONFIG = {
scheme: 'Mist',
sidebar: {"position":"left","display":"post"},
fancybox: true,
motion: true,
duoshuo: {
userId: 0,
author: 'Author'
}
};
</script>
<link rel="canonical" href="http://qianxux.github.io/"/>
<title> Programmer Swimming </title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="en">
<div class="container one-collumn sidebar-position-left
page-home
">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">Programmer Swimming</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">Qian's blog</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
Home
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
Archives
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
Categories
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
Tags
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
About
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/02/25/FCC_Random_quote-machine/" itemprop="url">
实现一个格言网站并分享到推特
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2017-02-25T17:32:27-08:00" content="2017-02-25">
2017-02-25
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/学习笔记/" itemprop="url" rel="index">
<span itemprop="name">学习笔记</span>
</a>
</span>
,
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/学习笔记/FreeCodeCamp/" itemprop="url" rel="index">
<span itemprop="name">FreeCodeCamp</span>
</a>
</span>
</span>
<span class="post-comments-count">
|
<a href="/2017/02/25/FCC_Random_quote-machine/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2017/02/25/FCC_Random_quote-machine/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p><a href="https://github.com/QianXuX/FCCNotes/tree/master/quote-machine" target="_blank" rel="external">Github 地址</a></p>
<p>Run<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">python -m SimpleHTTPServer 8000</div></pre></td></tr></table></figure></p>
<p><a href="http://freecodecamp.cn/challenges/build-a-random-quote-machine" target="_blank" rel="external">FreeCodeCamp课程链接</a></p>
<p><a href="http://codepen.io/freeCodeCamp/full/bELoPJ" target="_blank" rel="external">目标</a></p>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><p>随机生成一个能产生格言警句的网页，点击刷新按钮后能够获得新一条格言；并且有一个按钮能把格言发送到twitter。</p>
<h3 id="步骤"><a href="#步骤" class="headerlink" title="步骤"></a>步骤</h3><p>按照结构->样式->功能 进行开发，重点在功能。</p>
<h3 id="结构"><a href="#结构" class="headerlink" title="结构"></a>结构</h3><p>简单结构，分为格言内容，更新按钮和推特按钮。</p>
<h3 id="样式"><a href="#样式" class="headerlink" title="样式"></a>样式</h3><p>简单的样式，在每次刷新格言时，会变换背景颜色、格言字体颜色和按钮颜色。</p>
<h3 id="功能-1"><a href="#功能-1" class="headerlink" title="功能"></a>功能</h3><p>####思考弹幕墙实现的过程：</p>
<ol>
<li>更新格言按钮能更新一条格言,同时更新展示的样式。</li>
<li>分享到twitter的时候，用一个anchor元素指向了一个url，在点击该元素时动态生成分享的内容到url字串尾部。</li>
</ol>
<h3 id="踩坑记录"><a href="#踩坑记录" class="headerlink" title="踩坑记录"></a>踩坑记录</h3><ol>
<li>jQuery新手，$(document).ready()内部定义的函数，普通的onclick监听是不能读取到的。scope问题。</li>
</ol>
<h3 id="心得"><a href="#心得" class="headerlink" title="心得"></a>心得</h3><ol>
<li>Google dev console break point 好顶赞。</li>
</ol>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/02/20/开发者关系-那些并非显而易见的细节/" itemprop="url">
开发者关系-那些并非显而易见的细节
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2017-02-20T20:16:03-08:00" content="2017-02-20">
2017-02-20
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/DevRel博客翻译/" itemprop="url" rel="index">
<span itemprop="name">DevRel博客翻译</span>
</a>
</span>
,
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/DevRel博客翻译/个人博客书写/" itemprop="url" rel="index">
<span itemprop="name">个人博客书写</span>
</a>
</span>
</span>
<span class="post-comments-count">
|
<a href="/2017/02/20/开发者关系-那些并非显而易见的细节/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2017/02/20/开发者关系-那些并非显而易见的细节/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p><a href="https://github.com/DevRelCon2017-Beijing/translation" target="_blank" rel="external">2017开发者关系大会翻译主页</a><br><a href="https://devrel.net/craft/starting-in-developer-relations-the-non-obvious-bits" target="_blank" rel="external">原文链接</a><br>作者：<a href="https://medium.freecodecamp.com/@gilbertginsberg" target="_blank" rel="external">Steven Gilbert</a><br>译者：<a href="https://github.com/qianXuX/" target="_blank" rel="external">QianXuX@github</a></p>
<blockquote>
<p>开发者关系是一个相对崭新的领域，很多人才刚刚开始接触。但当你决定要接手这份工作的时候，有什么细节是你没有考虑到的呢？</p>
</blockquote>
<p>我花了很长时间思考什么样的人最适合从事开发者关系的工作。我没有使用布道者、提倡者或『开发者教皇』(Michael Ludden)这样的术语，因为我相信无论我们的职位名称是什么，我们都面对着相同的任务、相似的权益关系者和相同的开发者社区。</p>
<p>我担任IBM Watson数据平台(当初的IBM Cloudant)的开发者支持人员已经两年多了。在此前的两年，我特别想投身于开发者关系的工作中。我开始向那些早已经从事开发者关系的同行请教，他们之前的背景和经历是什么。对我来说幸运的是，我之前举办了一个叫做Hackference的小活动，通过这个活动我结识了一些人，包括那些刚开始工作和已拥有多年工作经验的人。几乎所有人在从事开发者关系工作前都曾经是一名开发者（作为全职工作或业余爱好），此后跳上了开发者关系的列车。</p>
<h2 id="开发者关系需要什么技能"><a href="#开发者关系需要什么技能" class="headerlink" title="开发者关系需要什么技能"></a>开发者关系需要什么技能</h2><p>在过去四年里，许多事情发生了变化，只有一件事情没有， 而这普遍被视为胜任开发者关系工作的『必需技巧』。对于这点，一般有如下粗略的要求：</p>
<ul>
<li>从事软件开发行业X年，担任CTO或者类似的职务</li>
<li>使用编程语言XYZ</li>
<li>技术创作（ O’Reilly 出版社的作者有加分）</li>
<li>发表过公开演讲</li>
</ul>
<p>目前这些要求在大多数情况下还是非常有必要的。但这不意味着一切，而许多公司招聘时也注意到了这一点。我最近参加<a href="http://london-2016.devrel.net/" target="_blank" rel="external">开发者关系峰会</a>时，和Machael Ludden一起展示了这张幻灯片，里面有一个详尽的表单，列举了一个从事开发者关系的人有可能要完成的任务。</p>
<p><img src="https://pbs.twimg.com/media/CzEqufsXUAAC_py.jpg" alt="enter image description here"></p>
<p>但尽管这份表单比大部分开发者关系工作的实际内容来得要全面，它没有告诉我们一个人要有怎样的品质才能成为一名杰出的开发者关系工作者。</p>
<h2 id="感同身受是关键"><a href="#感同身受是关键" class="headerlink" title="感同身受是关键"></a>感同身受是关键</h2><p>过去的两年里，我也见过一些从未发布过产品级代码的优秀开发者关系工作者。他们中的一些来自科技写作领域，或者刚刚踏出大学校门，但已成为开发者关系中的毕业生了。那么，除了上面我所提到的内容外，那些不起眼的额外要求是什么呢？</p>
<p>无论你在开发者关系的工作中具体做什么，你都必须要让那些使用你产品的用户感同身受。无论是从技术和代码的层面，还是从解决问题的层面，如果你能从产品使用者的角度来考虑问题，生活就会变得简单许多。</p>
<p>让人感同身受真的很有帮助，对于一个(为促进职业发展)建立信息交流网的人更是如此。我发誓，我在『报名职位』一事上花费了相当长的时间。无论是离线还是在线，如果某件事你不能直接帮上忙，那么把问题转交给某个能帮上忙的人同样也会让自己心情愉悦。这可能通过你的产品、你的公司、一门语言、一个API或一个开发者社区来完成。Rey Bango 有一张很棒的幻灯片来展示这一点：</p>
<p><img src="https://pbs.twimg.com/media/CzF7kM7XAAA93I5.jpg" alt="enter image description here"></p>
<h2 id="参与其中"><a href="#参与其中" class="headerlink" title="参与其中"></a>参与其中</h2><p>了解你举办的活动。开发者关系工作中很重要的一环，是找到开发者社区和开发者活动，并参与其中。你的产品也许很新，又或许你的才刚刚从事开发者关系的工作。因此，对于如何开展工作有一个大概的了解，并且建立良好的声誉是一个很好的开端。</p>
<h2 id="传递善意"><a href="#传递善意" class="headerlink" title="传递善意"></a>传递善意</h2><p>最后，请成为一名好公民。传递你的善意。请记住开发者关系的领域还很新颖，大家都在探索完成工作最适合的办法。 如果你需要帮助，请提出问题，其他人会尽量帮忙回答。Rey Bango 有另一幅幻灯片描述这一点：</p>
<p><img src="https://pbs.twimg.com/media/CzF7csDXAAMpsPG.jpg" alt="enter image description here"></p>
<p>任何对科技有兴趣并且愿意帮助他人的人都能做到上面所说的。谁都能学习解决问题的逻辑，而且只要知道如何找到解决方法，你肯定能成为一名极其出色的开发者关系工作者。前进吧，在帮助其他优秀的人的同时开展一段令人赞叹的工作，达成一些令人叹为观止的成就！</p>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/02/15/FCC_frontend_danmu_app/" itemprop="url">
实现一个弹幕墙
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2017-02-15T11:23:38-08:00" content="2017-02-15">
2017-02-15
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/学习笔记/" itemprop="url" rel="index">
<span itemprop="name">学习笔记</span>
</a>
</span>
,
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/学习笔记/FreeCodeCamp/" itemprop="url" rel="index">
<span itemprop="name">FreeCodeCamp</span>
</a>
</span>
</span>
<span class="post-comments-count">
|
<a href="/2017/02/15/FCC_frontend_danmu_app/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2017/02/15/FCC_frontend_danmu_app/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="Github-repo"><a href="#Github-repo" class="headerlink" title="Github repo"></a><a href="https://github.com/QianXuX/FCCNotes/tree/master/danmu" target="_blank" rel="external">Github repo</a></h2><p>Run<br><figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">python -m SimpleHTTPServer <span class="number">8000</span></div></pre></td></tr></table></figure></p>
<h2 id="实现一个弹幕墙"><a href="#实现一个弹幕墙" class="headerlink" title="实现一个弹幕墙"></a>实现一个弹幕墙</h2><p><a href="http://freecodecamp.cn/challenges/design-a-danmu-app" target="_blank" rel="external">FreeCodeCamp课程链接</a><br><a href="https://vshaonian.github.io/2016/11/23/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%BC%B9%E5%B9%95%E5%A2%99APP/" target="_blank" rel="external">参考链接</a></p>
<p><strong>功能</strong>：实现一个如Bilibili弹幕一样的网页</p>
<p><strong>步骤</strong>：按照结构->样式->功能 进行开发，重点在功能。尤其对于jQuery不太熟练的我，在调试的过程中遇到了各种奇奇怪怪的问题。</p>
<h3 id="结构"><a href="#结构" class="headerlink" title="结构"></a>结构</h3><p>按照弹幕框，输入区两部分分。输入区内有三部分，输入框，发射按钮和清屏按钮。</p>
<h3 id="样式"><a href="#样式" class="headerlink" title="样式"></a>样式</h3><p>弹幕框居中，占较大面积。输入区居中，输入框单独占一行。发射按钮和清屏按钮颜色不同，选用了FontAwesome的按钮点缀。</p>
<blockquote>
<p>弹幕文字的实现使用了绝对定位。通过不断改变left的值实现滚动。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">/**弹幕文字样式关键**/</div><div class="line">.absolute {</div><div class="line"> position: absolute;</div><div class="line"> top: 0;</div><div class="line"> bottom: 0;</div><div class="line"> left: 0;</div><div class="line"> right: 0;</div><div class="line"> height:20px;</div><div class="line">}</div></pre></td></tr></table></figure>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><h4 id="思考弹幕墙实现的过程："><a href="#思考弹幕墙实现的过程：" class="headerlink" title="思考弹幕墙实现的过程："></a>思考弹幕墙实现的过程：</h4><ol>
<li>从输入框拿到用户输入的内容，存入本地一个存储结构中</li>
<li>要显示弹幕，必然要遍历该存储结构，把每一条都加到弹幕框div元素中</li>
<li>要实现弹幕消息的滚动效果，需要一个函数，隔一段时间改变每条弹幕消息的css中{left}值。</li>
<li>要清空弹幕时，清空该存储结构，同时清空弹幕框div元素包含的所有child元素。</li>
</ol>
<h4 id="拓展思考："><a href="#拓展思考：" class="headerlink" title="拓展思考："></a>拓展思考：</h4><ol>
<li>上述实现会重复遍历已经展示过的弹幕。如果每条弹幕显示且仅显示一次，那么应该设置一个标识符，当标识符为false时说明该弹幕还未被显示，当标识符为true时表示该弹幕已经被显示过</li>
</ol>
<h4 id="函数、事件"><a href="#函数、事件" class="headerlink" title="函数、事件"></a>函数、事件</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">//点击发射按钮事件</div><div class="line"></div><div class="line">//清空按钮事件</div><div class="line"></div><div class="line">//弹幕滚动函数（设置css值和jQuery滚动特效）</div><div class="line"></div><div class="line">//弹幕颜色随机生成函数</div><div class="line"></div><div class="line">//每隔一段时间在屏幕上输出弹幕</div></pre></td></tr></table></figure>
<h3 id="踩坑记录"><a href="#踩坑记录" class="headerlink" title="踩坑记录"></a>踩坑记录</h3><ol>
<li>弹幕消息的滚动需要css样式为绝对定位</li>
<li>setTimeOut(function(){}, time)的用法</li>
<li>jQuery的断点调试(Chrome Dev Console)，如何查看变量的当前值</li>
<li>遇到『看似不可解』问题-Read-Search-Ask-Try循环</li>
<li>拓展需求如何实现并改进：<ul>
<li>一开始采用了两个数据结构，danmus和inDisplay。后面发现这两个结构保存的内容几乎一样，重复</li>
<li>在写这篇readMe的时候发现标识符是一个更高效直观的做法</li>
</ul>
</li>
</ol>
<h3 id="心得"><a href="#心得" class="headerlink" title="心得"></a>心得</h3><ol>
<li>jQuery调试没有扎实的javascript基本功还是挺吃力的</li>
<li>纸上得来终觉浅，绝知此事要躬行。</li>
</ol>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/02/13/java_4_classes_and_interfaces/" itemprop="url">
Effective Java notes - Classes and Interfaces
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2017-02-13T21:26:23-08:00" content="2017-02-13">
2017-02-13
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/学习笔记/" itemprop="url" rel="index">
<span itemprop="name">学习笔记</span>
</a>
</span>
,
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/学习笔记/Effective-Java/" itemprop="url" rel="index">
<span itemprop="name">Effective Java</span>
</a>
</span>
</span>
<span class="post-comments-count">
|
<a href="/2017/02/13/java_4_classes_and_interfaces/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2017/02/13/java_4_classes_and_interfaces/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/02/13/运用蔡加尼克记忆效应加快编程学习/" itemprop="url">
运用蔡加尼克记忆效应加快编程学习
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2017-02-13T20:01:42-08:00" content="2017-02-13">
2017-02-13
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/FreeCodeCamp博客翻译/" itemprop="url" rel="index">
<span itemprop="name">FreeCodeCamp博客翻译</span>
</a>
</span>
,
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/FreeCodeCamp博客翻译/个人博客书写/" itemprop="url" rel="index">
<span itemprop="name">个人博客书写</span>
</a>
</span>
</span>
<span class="post-comments-count">
|
<a href="/2017/02/13/运用蔡加尼克记忆效应加快编程学习/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2017/02/13/运用蔡加尼克记忆效应加快编程学习/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p><a href="https://medium.freecodecamp.com/can-the-zeigarnik-effect-help-you-learn-to-code-c64282ed0f7b#.x1fys8vrz" target="_blank" rel="external">原文链接</a><br>作者：<a href="https://medium.freecodecamp.com/@gilbertginsberg" target="_blank" rel="external">Steven Gilbert</a><br>译者：<a href="https://github.com/qianXuX/" target="_blank" rel="external">QianXuX@github</a></p>
<p><img src="https://cdn-images-1.medium.com/max/2000/1*23_Mknh2ibTmD6EhDStSdQ.jpeg" alt=""></p>
<blockquote>
<p>译者注：<a href="http://baike.baidu.com/view/1302263.htm?fromtitle=%E8%94%A1%E6%88%88%E5%B0%BC%E5%85%8B%E6%95%88%E5%BA%94&fromid=2118018&type=syn" target="_blank" rel="external">蔡格尼克记忆效应</a>（Zeigarnik effect；又称蔡加尼克效应） 是一种记忆效应，指人们对于尚未处理完的事情，比已处理完成的事情印象更加深刻。 这个现象是由蔡格尼克通过实验得出的结论。</p>
</blockquote>
<p><a href="https://en.wikipedia.org/wiki/Zeigarnik_effect" target="_blank" rel="external">蔡加尼克效应</a>能帮助人们加快编程的学习。首先我将解释什么是蔡加尼克记忆效应，然后我会给出一个实用的方法帮助大家学习编程。</p>
<h2 id="什么是蔡加尼克效应？"><a href="#什么是蔡加尼克效应？" class="headerlink" title="什么是蔡加尼克效应？"></a>什么是蔡加尼克效应？</h2><p>此时是夜晚9点，你在学习JavaScript。 你坐在办公桌前，打开笔记本电脑，启动了代码编辑器，开始写freecodecamp的维基百科项目。</p>
<p>工作了一段时间以后，你打开了浏览器，阅读火狐开发者社区里一篇关于<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS" target="_blank" rel="external">跨域资源共享</a>的文章。你希望借此了解跨域Ajax请求如何实现。</p>
<p>一切进展顺利。当你阅读的跨域资源共享的文章越来越多，你觉得自己对这个领域的认识也越来越深刻。</p>
<p>天色渐晚，是休息的时候了。</p>
<p>接下来你会做什么？</p>
<ul>
<li>去休息，即使文章只读了一半。明早起来接着读。</li>
<li>把文章读完</li>
</ul>
<p><strong>蔡加尼克效应会让你选择前者，而不是在休息前把文章读完。</strong></p>
<p>为什么？</p>
<p><strong><em>因为蔡加尼克效应研究结果表明，中断的任务比完成的任务更容易被人记住。</em></strong></p>
<p>作为人类，我们渴望能够完成一件事情，尤其当它尚未尘埃落定之前。想想你阅读侦探小说时那种逐步发现真相的感觉，或是挂断电话后想起刚刚和爱人的争吵还没有结论。正是这种紧张——诞生于完成的渴望——它帮助我们更深刻的记住未完成的任务。</p>
<p>因此，如果你是一个有创新精神的程序员，在学习新工具和深入钻研软件开发时，你可能会考虑应用蔡加尼克效应。因为在给定相同的时间和材料的条件下，蔡加尼克效应能帮助你更好更快地记住这些编程的概念。</p>
<p>这里是运用蔡加尼克效应学习编程的一个例子。</p>
<h2 id="提示：当写代码进展顺利时，不妨缓一缓，过一段时间再完成"><a href="#提示：当写代码进展顺利时，不妨缓一缓，过一段时间再完成" class="headerlink" title="提示：当写代码进展顺利时，不妨缓一缓，过一段时间再完成"></a>提示：当写代码进展顺利时，不妨缓一缓，过一段时间再完成</h2><p>你正在钻研<a href="https://www.freecodecamp.com/" target="_blank" rel="external">freecodecamp</a>上的算法挑战，脑袋里想的全是要怎么解决这个问题。你在草稿纸上记下了好多笔记和伪代码，而且已经为如何编写算法制定了一个计划。</p>
<p>你开始把你的思维转化成代码。一行代码，又一行代码，一切进展十分顺利。你的大脑正在分泌多巴胺，你期待着freecodecamp挑战完成的奖励，这是非常积极的信号。</p>
<p><img src="https://cdn-images-1.medium.com/max/1600/1*YmkGZm81ETDvFULOoiZxfQ.png" alt=""></p>
<p>现在停下，在你完成挑战前，停下。</p>
<p>故意停止继续写代码，并远离你的计算机，去做别的事情。</p>
<p>『但我差不多完成了！』你说。</p>
<p>这么做的目的在于，如果你在写代码的过程中打断自己，不仅可以加深自己对这些概念的记忆，而且也会加强对完成freecodecamp算法挑战的信念。</p>
<p>渴望完成任务的力量太强了，这使你不可能离开计算机太久。而当你回来时，你会准备好报复。</p>
<p>总而言之，运用蔡加尼克记忆效应，您将：1）更好地记住编程挑战里的概念，2）创造了完成挑战的动力。</p>
<p>你的生产力翻倍了。</p>
<p>这是双重胜利。</p>
<h2 id="实践中的蔡加尼克效应"><a href="#实践中的蔡加尼克效应" class="headerlink" title="实践中的蔡加尼克效应"></a>实践中的蔡加尼克效应</h2><p>最近，我一直沉迷阅读<a href="https://en.wikipedia.org/wiki/Roald_Dahl" target="_blank" rel="external">罗尔德·达尔</a>的小说，他是一位了不起的作家。在接受采访时他提到了他是如何写作的，这听起来和蔡加尼克效应十分相似：</p>
<blockquote>
<p>我从来不回到空白页进行创作。一旦我开始创作，我总是先完成一半。面对一个完全空白的页面不太容易。但海明威，一位伟大的美国作家，他教会了我创作长篇小说的第一个技巧——那就是他所说的，『<strong>当一切进展顺利时，停止写作。</strong>』</p>
<p>这意味着，当一切进展顺利时，你知道每个章节会在哪里结束，每个人物接下来会做什么。这时候，不要继续把故事写完，因为当你的故事到了尾声，你会感到迷茫，不知道接下来应该做什么。</p>
<p>但如果在奋笔疾书兴致正浓的时候，你停下了，那么你就有机会思考接下来应该做什么。<strong>你让自己停止工作，放下铅笔，远离工作台。你不能期待自己立刻回来，因为你知道下一步你要写什么，你会写一些很棒的文字，你肯定会想尽办法这么做的 。请尝试在进展顺利的时候停下吧，每一次，每一天。</strong></p>
<p> 而当你在进展不顺的时候选择了放弃，你将惹上新的麻烦！</p>
</blockquote>
<p>你可以在<a href="http://www.roalddahl.com/create-and-learn/write/roald-dahl-on-writing" target="_blank" rel="external">这里</a>听罗尔德·达尔的采访完整版。</p>
<p>写小说和写代码其实比你想象中更为相似。两者都处于对创造强烈的追求。如果在创作小说时有计划性的停止能帮助两位了不起的作家写出世界上最好的小说，那么这个方法也能帮助你开发出世界上最好的软件。</p>
<p>还有没有其他什么办法能帮助开发者应用蔡加尼克记忆效应在编程上取得进步呢？请在留言区留下您宝贵的评论。感谢阅读本文！</p>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">