-
Notifications
You must be signed in to change notification settings - Fork 0
/
technologyBlog.html
636 lines (543 loc) · 29.4 KB
/
technologyBlog.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
<!DOCTYPE html>
<html>
<head>
<title>technology blog</title>
<meta charset="utf-8">
<meta name="description" content="this page is build based in tags system.More extendable, you can search the tags and find the topices you want, and just convinence for my study.">
<style type="text/css">
b {
color: skyblue;
font-size: 14px;
}
h3,p {
margin: 0px;
padding: 0px;
line-height: normal;
}
.tags {
color: #614;
font-weight: bold;
}
li {
cursor: pointer;
}
li > small {
display: block;
}
#sort{
background-color: #eaeaea;
padding: 10px;
/*height: 37px;*/
overflow: hidden;
}
#sort > div {
padding-left: 1em;
border: 1px solid #eaeaea;
}
#sort > div > input {
border: 0px;
padding: 10px;
}
#sort > div > button {
border: 0px;
padding: 10px;
color: skyblue;
background-color: #ccc;
cursor: pointer;
}
.time:before {
display: inline-block;
content: '2016-3-2javascript set time';
color: orange;
}
#sortx:checked + label > div {
height: auto;
}
.everydayathought > li {
list-style:none;
}
.everydayathought > li:before {
content: attr(data-title);
color: red;
display: inline-block;
margin-right: 10px;
height: 18px;
line-height: 18px;
padding: 0px 10px;
border: 1px solid red;
border-radius: 3px;
font-size: 12px;
}
</style>
</head>
<body>
<!-- search component -->
<input type="checkbox" id="sortx" name="" style="display:none;s">
<label for="sortx" style="cursor:pointer">
<div id="sort"></div>
</label>
https://leohxj.gitbooks.io/front-end-database/content/jQuery/jQuery-source-code/index.html
http://www.zhihu.com/question/20521802
http://www.logphp.com/html/aWXmtY@op4jlmajosIPnlKjmkYTlg4@lpLQ=.html
https://github.com/RubyLouvre/avalon
http://james.padolsey.com/jquery/
<!-- search component -->
<pre style="display:none;background:#eaeaea;">
一些原则：
plan-study（深入研究）
-donow（已经了解，可以开始做）
-dolater（以及了解，但是没有时间做）
-conclude（做完了，可以总结经验，到下次的项目中可以用上，做成通用的东西。）
-升华
css-study
-experience（）
-rework
tags可以根据tags-name来判断如何现实，如果tags = ‘plan’那么可以有提醒设置;
tags = css 那么该条目录就被归类为css条目。
回归基础，基础要牢固
css可以在这里做很多的尝试，比如各种css样式，linear，grident，canvas，svg等
html presentation framework
http://lab.hakim.se/reveal-js/
https://slides.com/
http://www.w3school.com.cn/svg/svg_grad_linear.asp
https://css-tricks.com/css3-gradients/
https://www.web-tinker.com/article/20134.html
https://www.google.com.hk/search?q=svg%E7%9A%84%E6%B8%90%E5%8F%98%E6%95%88%E6%9E%9C&oq=svg%E7%9A%84%E6%B8%90%E5%8F%98%E6%95%88%E6%9E%9C&aqs=chrome..69i57j69i60l2j69i59l2j69i60.5122j0j7&sourceid=chrome&es_sm=93&ie=UTF-8
https://www.google.com.hk/search?newwindow=1&safe=strict&q=%23000%E5%92%8C%23fff%E7%9A%84%E4%B8%80%E5%8D%8A&oq=%23000%E5%92%8C%23fff%E7%9A%84%E4%B8%80%E5%8D%8A&gs_l=serp.12...0.0.1.6665.0.0.0.0.0.0.0.0..0.0....0...1c..64.serp..0.0.0.oNe0omk8lfU
https://www.google.com.hk/search?q=reddits&oq=reddits&aqs=chrome..69i57j0l5.1995j0j4&sourceid=chrome&es_sm=93&ie=UTF-8
http://www.cnblogs.com/luoxiaomo/p/5732965.html
http://xdsoft.net/jodit/
http://xdsoft.net/jodit/
https://github.com/xdan/datetimepicker
<a href="http://yujiangshui.com/about-table/">于江水blog</a>
<a href="http://xiaoshuo.sogou.com/c3/">注意这个排版，css有两个。</a>
<a href="http://www.codeif.com/">简洁而注重内容</a>
</pre>
<h3>every day a throught</h3>
<ul class="everydayathought">
<li data-title=2016.8.3><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC">mozilla develop</a>切换,替换图片，flexbox css framework，栅格布局，一些理念，meterial，mui，创建图形，创建动画，游戏，hover 特效，meterial，different effect，loading 动画，css3 动画， linear，css media query,svg生成器,Utils
<a href="http://developer.51cto.com/art/201511/498027.htm">javascript模块化以及searjs远吗分析</a>
源码分析 <a href="http://www.zhihu.com/question/20521802">jquery源码分析，外国人做的html5，注意查看结构，字体的单位，字体设置</a>
<a href="http://www.codingdivas.net/divascookies/">eu cookie</a>
<a href="http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html">scrollbar</a>
<a href="http://meyerweb.com/eric/tools/css/reset/">eric</a>
<a href="https://www.berriart.com/sidr/">slide menu</a>
</li>
<li data-title="2016.8.5">延续昨天。</li>
</ul>
<a href="http://tech.gmw.cn/2016-08/06/content_21342903.htm">多级评论样式</a>
http://www.zhixiu86.com/Web/81-3/3558.html
https://w3c.github.io/
http://www.cssmatic.com/box-shadow
<h3>总结·反省</h3>
<p></p>
<q>遇到的问题·经验的不足方面·合作方面的不足，有的时候玩的太过，不好,应该有一套法则，有据可循。</q>
<p>在没做之前应该思考下应该怎么做，先参照下别人的已经做出来的那些东西</p>
<p>怎么做才是争取的</p>
<q>几点原则</q>
<ul>
<li>给到别人手中一定是通过了自己这一关，不需要再修改的了。</li>
<li>有时候会有问题，但是应该不会是大问题。</li>
<li>总结自己有没有自己需要改进的。不断改进。</li>
<li>做好了自己手头的事情，再去做别的事情。</li>
<li>一些东西有了对比就不太容易做好，但是努力去做。</li>
</ul>
<h3>遇到的问题·主程</h3>
<ol>
<b>技术上问题</b>
<li><a href="" data-open="modal">testing modal</a></li>
<q>准确描述问题，找出问题所在，并提出解决方案，就是这个流程。</q>
<li>兼容性，截图，上传</li>
<li><span class="tags">[compability]</span>ie的opacity，以及rgba在jq中设置会报错<br/> <small>用rgb和opacity：alaphy来设置ie的透明度 <span class="tags"> [advanced relatived]</span>ie的render和现代浏览器的render，差别，以及检测方式，一些包，hack，补丁，border-radius，box-shadow <span class="tags">[plan]</span>写篇文章</small></li>
<li><span class="tags">[compability]</span>jquery的css({})设置会有问题。最好不要用来设置css，可以用addClass代替</li>
<li><span class="tags">[css]</span>z-index的设置</li>
<li><span class="tags">[javascript]</span>技术上来说，new一个对象会有很大的开销，可能需要些很多回调。感觉这个做的还不够完善，扩展性是有的，但是要做到layer的还有差距，要研究下。</li>
<li><span class="tags">[jquery version]</span>注意jquery不同版本之间的区别</li>
<li> <span class="tags">[plan]</span>研究一个技术框架也不容易，比如闲心的layer，竟然能够实现自定义的confirm，然后又返回值，从常规上来说，如果函数要有返回值一般是return，但是点击事件发生之前，函数已经有返回值了。浏览器的confirm是用线程阻塞来实现这个问题的。</li>
<li> <span class="tags">[plan]</span>研究下iframe的架构</li>
<li> <span class="tags">[plan]</span>看看类和插件有没有其他写法。自己写的可能还没有那么elegent</li>
<li> <span class="tags">[plan]</span>其实图片还可以压缩，css和js也是，用webpack</li>
<li><span class="tags">[website study]</span>外国网页的命名，class，等到自己看外国网页觉得没什么，自己也已经成为大神。看一个网页，一定要能够把握结构，以及学到一点东西。</li>
<li><span class="tags">[jquery plugins]</span> twbs pagination的问题：1、初始化时自动加载第一页 2、在重新输入分页参数的时候不能刷新 <small>1、解决方案，只能够用twbspagination('destory') 2、$(element).bind('click',dosomething)这个可能会重复绑定，解决方案是：1、$(element).unbind().bind('click',dosomething)或者$(element).bind('click', function(){... $(this).unbind()}),[plan]或者自己做一个分页插件，注意难点的总结</small></li>
<li><span class="tags"></span><a href="http://www.html5tricks.com/demo/pure-css3-jingang/index.html">效果</a></li>
<li><span class="tags">[css]</span>网页字体设置，rem,em,px这三种字体设置以及换算，字体的大小，以及浏览器的渲染，字体的font-style</li>
<li><span class="tags">[function]</span>拍照，上传图片，数据流，</li>
<li><span class="tags">[plan]</span>做一个可以记笔记的读书社区</li>
<li><span class="tags">[before dom]</span>before属于dom？但是怎么refer到dom，js，css</li>
<li><span class="tags">[file upload]</span>文件上传原理</li>
<li><span class="tags">[plugins]</span>注意插件的初始化，有的在插件内部初始化。这样需要些很多回调，要考虑到很多问题</li>
<li><span class="tags">[grid css js]</span>排序表格，用css做出表格的效果 <small>可以用<ul><li><a></a><a></a></li><li><a></a><a></a></li></ul>这种可以解决边线是1的问题，或者如果浏览器支持，可以设置边线为0.5</small></li>
<li><span class="tags">[plan]</span>可以自己制作一个拖拽功能的插件，dynamic table</li>
<li><span class="tags">[plan]</span>font icon</li>
<li><span class="tags">[plan]</span>星星rating,图片延迟加载，瀑布流lazyload，文字滚动，打字机效果，exif读取图像元数据，多级下拉菜单，做一个和bootstrp cms,日历控件，图片裁剪，fullpage，滚动，定位，幻灯片，图片轮播，文字动画，文件上传，uploadify，dropzone的原理，文件流的概念，制作markdown编辑器</li>
<li><span class="tags">[]</span>预加载和懒加载</li>
<li><span class="tags">[plugins]</span><a href="http://benalman.com/projects/jquery-throttle-debounce-plugin/">plugisn http://code.ciaoca.com/static/js/plugins.js</a></li>
<li><b>有的东西是效果原理不容易理解，有的东西是因为各个部分的组合，另外有的东西是需要考虑很周到，很全面，所以比较麻烦</b></li>
<li><span class="tags">[jquery plugisn]</span><a href="http://www.shouce.ren/study/api/s/6910">多级联动菜单</a></li>
<li><span class="tags">[jquery plugin emoji]</span><a href="http://www.shouce.ren/example/try?pc=/api/jq/5733e32681390/index.html">表情插件</a></li>
<li><span class="tags">[plan]</span>gis based javscript app, angular, react, vue, mongodb，ionic, frmaework7,template7,light7;研究这个框架必备的东西</li>
<li><span class="tags"></span>网盘的原理，网盘生成外链，视频网站架构，cdn涉及到了硬件方面（这个需要至少一年的时间来研究）</li>
<li><span class="tags">[微信开发]</span><a href="http://mp.weixin.qq.com/wiki/home/index.html">微信开发</a>，cms管理系统</li>
<li><span class="tags">[开放平台]</span><a href="http://www.shouce.ren/api/open">开放平台</a>需要去摸索的哦东西</li>
<li>模拟一些框架，jqueryUI， codova，angularjs， react,看看这些框架注意到了什么</li>
<li><span class="tags">[plan]</span>rss feed</li>
<li><span class="tags">[learn]</span>组织结构图,反色阅读，字体缩放，不同的样式，可以切换皮肤</li>
<li><span class="tags">[event javascript]</span>在form里面如果使用button，可能会触发button的提交事件，最好用其他的标签，不用button</li>
<li><span class="tags">[compability]</span><a href="http://www.bkjia.com/Javascript/1091250.html">firefox的scrolltop不生效</a></li>
<li><span class="tags">[plugins]</span><a href="http://www.jqpro.net/Image-Effects/20160512882.html">jquery</a></li>
<li><span class="tags">[plugins]</span><a href="http://tech.mozilla.com.tw/posts/3742/%E8%B6%85%E5%A4%AF%EF%BC%81%E8%A6%96%E5%B7%AE%E6%8D%B2%E8%BB%B8%E5%8B%95%E7%95%AB%E5%A4%A7%E8%A7%A3%E5%AF%86%EF%BC%81">卷轴效果视差滚动效果</a></li>
<li><span class="tags">[plugins]</span><a href="http://www.xwcms.net/js/tpdm/97303.html">全屏幕拖动</a></li>
<li>
<a href="http://developer.51cto.com/art/201508/489526.htm">专业设计师的十大动画工具</a>
</li>
<li><span class="tages">[jqeruy plugins]</span><a href="http://www.shouce.ren/api/view/a/11144">模仿的网站，搜索插件，插件collection</a></li>
<li><span class="tags"></span><a href="http://github.phodal.com/">phodal(这个网站非常好有助于自己Fenix)编程的练习，发展之路</a></li>
<li><span class="tags">[plan]</span><a href="http://www.xyhtml5.com/resources/html5-tools/"></a>对hbuilder试下和mui</li>
<li><span class="tags">[plugins]</span><a href="http://www.css88.com/archives/6190">learn </a></li>
<li><span class="tags">[fallback table styling]</span>表格设置样式。</li>
<li><span class="tags">[comapbility]</span>浏览器降级的方法： <a href="">浏览器降级</a>首先应该从css方面进行降级，之后再从js方面降级，js降级的用户体验不是非常好</li>
<li>用javascript获取页面上选中的文字。blog</li>
<li><span class="tags">[github blog python]</span><a href="http://github.phodal.com">github能否不用数据库达到有数据库的效果，sqllit</a></li>
<li><span class="tags"></span><a href="http://e12e.com/2015/05/14/VS_Community%E7%89%88%E6%8F%90%E7%A4%BA%E8%AE%B8%E5%8F%AF%E8%AF%81%E5%B7%B2%E8%BF%87%E6%9C%9F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95/">vs许可证过期</a></li>
<li><span class="tags">[css]</span><a href="http://ourjs.com/detail/532bc9f36922aa7e1d000001">用css做箭头</a></li>
<li><span class="tags">[C#]</span><a href="https://read01.com/5nDB6n.html">不用visualstudio也能开发C#</a>
<a href="http://www.infoq.com/cn/news/2015/12/Visual-Studio-Windows">不用visualstudio开发.net</a>
</li>
<li><span class="tags">[idm 破解]</span><a href="https://www.douban.com/note/170454636/">idm</a></li>
<li><span class="tags">[plugins]</span><a href="http://www.itechzero.com/netease-cloud-music-cannot-create-outchain-solution.html">这个image load 替代图片的效果</a></li>
<li><span class="tags">[css tips]</span>position：relative的定位会保持占位，导致外部的边框被拉长，但是如果用margin-top:-10px;就不会导致占位。</li>
<li><span class="tags">[css tips]</span></li>
<li><b>网站架构</b></li>
<li>在架构前端的时候，其实有一个不好的地方，就是没有考虑可以做成很炫的效果，比如说，可以用多种样式切换，并且集合成一个样式表，另外一个就是数据和结构的分离。静态网页在数据量达到一定的程度一般都需要有存储的需求。但是一旦做成了存储，就在页面比较难以施展拳脚。觉得应该有一种网页的数据库，像sqllit。满足小型blog的需求。加载数据这种东西，也是麻烦。</li>
<li>一点关于技术的思考，如果数据格式不同，网络上是怎么传输的？非要蛋疼的整好多的配置，什么config，用一个$_GET['name']不就可以了，应该研发出另外的一种接收的传输协议出来，避免前后端的这种上传的麻烦</li>
<li><b>合作问题</b> <small>这方面的才是大问题，该想想如何解决。</small></li>
<li>做的页面不能够达到要求。产品的角度来说，页面的逻辑不能够走通</li>
<li>ui的角度上来说，不能够细化到每一个像素</li>
<li> 模块工具类，用来初始化各模块视图、自定绑定事件以及其它辅助功能等</li>
<li>总而言之，不能够领会设计意图。每一分设计都是有意义的。注意看。</li>
<li><b>按照流程来是不是就不会出错？其实应该看东西的时候没有入心，就是别人设计的重点和一些细节没有看到。</b></li>
<li>突然想到高中的时候，打乒乓球，羽毛球。</li>
<li>一直要文字，有没有其他的可能性，别的可能写的更好，而不是写完就算了。尽力，尽力而为。思考另外的路，怎么才能做的更好。每个细节都要做到位。挑战下自己。</li>
</ol>
<h3>big tools</h3>
<q>即将可能用到的，比如说动画场景等，svg，canvas， 或者直接是创建动画的一些东西，声音，视频等。直接生成场景，人物的动作等等</q>
<keywrod>html5 boilplate</keywrod>
<ul>
<li><b>html5开发工具</b></li>
<li><a href="http://www.xyhtml5.com/20-saves-time-html5-development-tools.html">20个大大节省你时间的html5开发工具</a></li>
<li><a href="">创建动画</a></li>
<li>动画工具</li>
<li><a href="http://www.xyhtml5.com/open-source-svg-tools.html">五款开源的svg工具</a></li>
<li><a href="http://www.xyhtml5.com/6-useful-html5-tools.html">6个强大的html5应用在线开发工具</a></li>
<li><a href="http://www.xyhtml5.com/10-best-html5-development-tools.html">10款优秀的html5开发工具</a></li>
<li><a href="http://www.xyhtml5.com/adobe-released-html5-web-animation-tools-adobe-edge.html">adobe edge</a></li>
<li><a href="http://www.xyhtml5.com/10-html5-coding-tools.html">html5的一些东西</a></li>
<li><a href="http://html5demos.com/">html5 demo</a></li>
<li><a href="http://www.imys.net/20150916/webapp-input-use-camera.html">html5调用手机相册</a></li>
<li><a href="http://masonry.desandro.com/">desandro</a></li>
<li><a href="http://xdsoft.net/jqplugins/datetimepicker/">学习下这个网站，好多插件</a></li>
<li><b>调用系统api</b></li>
<li>getUserMedia.js</li>
<a href="http://www.dengzhr.com/frontend/css/797">blog</a>
<li><b>很炫的效果</b></li>
<li>presentations</li>
<li><a href="http://www.xyhtml5.com/developer-must-have-javascript-unit-testing-tool.html">单元测试</a></li>
</ul>
<h3>plugins</h3>
<ul>
<li><b>jquery plugins library</b></li>
<li>各种模式，各种名词，amd，cmd，各种插件，</li>
<li><a href="https://github.com/malsup/form">jquery form</a></li>
<li>jquery ui</li>
<li>modernizer</li>
<li><a href="http://als.musings.it/">anything scroll</a></li>
<li><a href="http://jsbeautifier.org/">prettify.js</a></li>
<li><a href="http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/">jquery plugin for stylish tooltips</a></li>
<li><a href="">knockout js</a></li>
<li><b>css library · 效果 · effect</b></li>
<li><a href="http://tobiasahlin.com/spinkit/">spinkit</a></li>
<li><a href="http://hiloki.github.io/kitecss/">kitecss</a></li>
<li><a href="http://www.vittoriozaccaria.net/dyn-css/#what-is-it">dyncss</a></li>
<li><a href="http://usablica.github.io/progress.js/">progressjs</a></li>
<li><a href="http://ianlunn.github.io/Hover/">hover css</a></li>
<li><a href="http://anijs.github.io/">anijs</a></li>
<li><a href="http://elrumordelaluz.github.io/csshake/#1">csshake</a></li>
<li><a href="http://devinhunt.github.io/typebase.css/">typebse</a></li>
<li><a href="https://github.com/mathiasbynens/jquery-placeholder">jquery placeholder</a></li>
<li><a href="select2">select2 plugin</a></li>
<li><b>wordpress</b></li>
<li><a href="https://codestag.com/themes/ink/">wordpress theme</a></li>
<li><a href="http://fancyapps.com/fancybox/">fancybox</a></li>
<li><a href="http://alexgorbatchev.com/SyntaxHighlighter/">syntax highter</a></li>
<li><a href="">jquery cookie</a></li>
<li><a href="http://www.minimamente.com/example/magic_animations/">magic</a></li>
<li><a href="http://www.minimamente.com/">minimamente</a></li>
<li><a href="http://bouncejs.com/">bouncejs</a></li>
<li><a href="http://unicorn-ui.com/buttons/builder/">unicorn-ui</a></li>
<li><a href="http://github.hubspot.com/odometer/docs/welcome/">hubspot</a></li>
<li><a href="http://csswizardry.com/beautons/">beautons</a></li>
<li><b>workflow</b></li>
<li><a href="http://www.imooc.com/static/sea_config.js?v=201608031700">seajs
http://adamed.iteye.com/</a></li>
<li><b>fonts</b></li>
<li><a href="https://typekit.com/">typekit adobe font</a></li>
<li><a href="http://underscorejs.org/">underscore</a></li>
<li><a href="https://modernizr.com/">modernizr</a></li>
<li><a href="http://960.gs/">960.gs</a></li>
<li><a href="http://www.jintianjihao.com/">做一个日历（这个页面做的东西还不错，ui的方面）</a></li>
<li><a href="http://havanachan.deviantart.com/">发现一个网站</a></li>
</ul>
<h3>study a website a day</h3>
<ul>
<li>http://designmodo.com/steps-css-animations/</li>
<li>
<a href="http://www.ietf.org/rfc/rfc2388.txt">文件上传的规范</a>
<a href="http://blog.csdn.net/ruixj/article/details/5986063">使用http上传的原理</a>
通过上面的例子可以看出，可以通过手动发送文件，并且制作数据流，只要按照规定的格式就可以了。
<a href="http://www.vivtek.com/cgi/getargs.html">perl upload files</a>
主流的上传文件
</li>
<li><a href="https://www.sitepoint.com/5-free-html5-presentation-systems/">sitepoint</a></li>
规划进度，以及其他的一些东西
采购硬件
网页看书，并且注释，像kindle，不过这种算法，存储都比较难写，很多数据库都是基于关系型结构
<a href="http://edu.csdn.net/course/detail/407">html5</a>
<li><b>ui website</b></li>
<li><a href="http://www.ui.cn/">ui.cn</a></li>
recommand webstie
</ul>
<h3>代码社区, cdn</h3>
<ul>
<li><a href="http://sandbox.runjs.cn/">sandbox.runjs</a></li>
<li><a href="http://runjs.cn/">runjs.cn</a></li>
<li><a href="http://goto.io/">goto.io</a></li>
<li><b>cdn</b></li>
<li><a href="http://www.jsdelivr.com/">jsdelivr</a></li>
<li><a href="http://edu.csdn.net/courses">里面有好多课程以及分类，我觉得很多网站的结构都有必要调整，重新整合</a></li>
<li>html5动画，可以自己剪辑视频，做一下东西</li>
</ul>
<h3>study a framework a day</h3>
<ul>
<li></li>
</ul>
<h3>every day a blog</h3>
<ul>
<li><a href="http://sentsin.com/web/">sentsin</a></li>
<li><a href="https://css-tricks.com/css-content/">css-tricks</a></li>
<li><a href="http://www.css3.info/tooltips-with-css3/">css3</a></li>
<li><a href="http://www.shadowsky.cn/">shadowsky</a></li>
<li><a href="http://www.dunsh.org/">dunsh</a></li>
http://www.html-js.com/qa/175
<li><a href="http://www.cnblogs.com/aaronjs/p/3278578.html">aaronjs</a><br/><small>MVVM引入一种叫DOM模块，像knockout, avalon, angular就是用它们实现双向绑定了，可维护性更高</small>
<a href="http://www.cnblogs.com/aaronjs/p/4255232.html">移动设备的布局</a>
<a href="https://github.com/JsAaron/es6-magazine/tree/master/test/unit">快速开发app的应用http://www.cnblogs.com/aaronjs/p/4255232.html</a>
如果把ppt做成后台，应该也是一种不错的选择，前台直接展现出用户的ppt
http://www.cnblogs.com/aaronjs/p/4642015.html
<li><a href="http://www.webhek.com/get-selected-text-with-javascript">web骇客</a></li>
</li>
<li><a href="http://insights.thoughtworkers.org/effective-javascript/">tw洞见
http://insights.thoughtworkers.org/reading-radar-2016/
http://www.html-js.com/article
http://www.html-js.com/article/jsdig-gongjuwuzhuangdiqianduankaifagongchengshi%203661</a>
http://riny.net/2012/the-summary-of-javascript-string/</li>
<li><a href="http://www.cnblogs.com/jr1993/p/4676895.html">jr</a><small>实现网页效果</small><q>css可以怎么玩</q>
<a href="http://www.cnblogs.com/jr1993/p/4676895.html">box布局</a>
网页小效果
多级分类
canvas
进度条
cssloading，css图标，css动画，css hack
常用meta
锚点平滑滚动
<a href="http://www.cnblogs.com/jr1993/p/4436377.html">嵌入web字体</a>
<a href="http://www.cnblogs.com/jr1993/p/4429138.html">html5本地存储</a>
<a href=""></a>
<a href="http://impress.github.io/impress.js/#/bored">impressjs</a>
</li>
<li>
<a href="http://blog.csdn.net/aflyeaglenku/article/details/51644863">afly 接触底层的东西，比如http上传的原理</a>
<a href="http://blog.csdn.net/aflyeaglenku/article/details/51644863">文件上传</a>
C#develop environment https://msdn.microsoft.com/en-us/library/ms173063.aspx
<a href="http://www.xyhtml5.com/3153.html">html5</a>
nodejs
比较有利的工具，可以快速创建场景和故事，
快速创建人物角色
http://www.xyhtml5.com/html5-canvas-event-handler.html
</li>
</ul>
<h3>css tricks</h3>
<h3>一下用大量篇幅来研究所得</h3>
<h3>every day a try</h3>
<ul>
<li class="time"></li>
</ul>
对header的研究：
<pre>
<script type="text/javascript">
var str = '<html lang="en-us" prefix="og:http://ogp.me.ns#" class="no-js">' +
'<meta name="viewport" content="width=device-width, initial-scale=1"> ' +
'<meta property="fb:app_id" content="sfsfsf"> ' +
'<link rel="profile" href="http://gmpg.org/xfn/11"> ' +
'<link rel="pingback" href="https://markmanson.net/xmlrpc.php"> ' +
'<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> ' +
'<link rel="dns-prefetch" href="//fonts.googleapis.com"> ' +
'<meta name="description" content="learning a foreign language can be duanting at first. " >' +
'<meta name="robots" content="noodp"> ' +
'<link rel="canonical" href="https://markmanson.net/foreign-language"> ' +
'/* <![CDATA[ */ ' +
'var ajax_object = {"ajax_url":"https:\/\/markmanson.net\/wp-admin\/admin -ajax.php"}' +
'/* ]]> */ ' ;
document.write(str.toString())
</script>
</pre>
<h3>参考手册</h3>
<ul>
<li><a href="http://www.shouce.ren/api/javascript/ch23-719-fm2xml.html">手册网</a></li>
</ul>
<h3>自己觉得好的和不好的代码，以及别人写的代码。</h3>
<ul>
<li><b>自己写的代码的不足之处，不要沾沾自喜，自己还是有差距的。看到自己和别人的差距在哪里。</b></li>
</ul>
<h3>jquery插件以及插件的一般形式</h3>
功能，有点，不足
自己实现起来的缺陷，不能够实现的地方。
用豆约翰博客备份专家备份
<a href="http://www.runoob.com/csharp/csharp-tutorial.html">C#</a>
有时间弄一下discuz， wechat，cms，分级系统，C#。有能力，模拟一下discuz或者其他的东西。
<h3>problem</h3>
<ul>
<li>amd vs cmd</li>
</ul>
</body>
<style type="text/css">
.modal {
padding: 48px 86px 16px;
width:602px;
}
</style>
<div class="modal">
<div>written-tags-advice · july 27</div>
<div>
<h3>title</h3>
<div class="subtitle">
subtitle
</div>
<div>sdfiosdifjsofjiosdfiosdifjsofjiosdfiosdifjsofjiosdfiosdifjsofjiosdfiosdifjsofjiosdfiosdifjsofjiosdfiosdifjsofjio</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
// 标签系统 tags system
/**
* 这个插件的主题就是用react的局部更新dom
* 搜索算法还需要提升
* 时间复杂度还需要提升，里面有两次的$each
**/
function TS() {
this.$tags = $('.tags');
this.tags = [];
this.template = '<li>#tags#</li>';
this.searchVal = [];
}
TS.prototype = {
search: function() {
var _self = this,
search = '<div><input type="search"><button>ok</button></div>';
this.$search = $(search);
this.$search.find('button').bind('click', function() {
var value = _self.$search.find('input').val();
if (value == '') {
alert('input value is empty');
return;
}
if (value == '*') {
_self.searchVal = _self.tags;
} else {
for(i in _self.tags) {
var xx = _self.tags[i].indexOf(value);
if (xx > -1) {
_self.searchVal.push(_self.tags[i]);
} else {
}
}
}
_self.append(_self.searchVal)
if (_self.searchVal.length == 0) {
alert('tags you serach not exits...');
$('#sort').after('<span style="color:orange">tips:you can type * to get all tags<span>')
}
})
},
main: function() {
var _self = this;
this.collectTags();
this.search();
this.append(_self.tags);
},
collectTags:function() {
var _self = this;
$.each(_self.$tags, function() {
var $this = $(this);
str = $this.html();
_self.tags.push(str)
})
},
searchResult: function(result) {
// 抽取dom算法，比较难（用显示和隐藏可能更好）
var _self = this;
_self.$tags.closest('li').hide();
$.each(_self.$tags, function() {
if ($(this).html() == result) {
$(this).closest('li').show()
}
})
},
append:function(arr) {
var _self = this,
tpl = '<ul>';
for (i in arr) {
tpl += _self.template.replace('#tags#', arr[i]);
}
tpl += '<li class="showAllTags">show all tags</li>'
tpl += '<li class="showAllProblem">show all problem</li>'
tpl += '</ul>';
var $tagsBtn = $(tpl);
$tagsBtn.find('li').bind('click', function() {
if ($(this).hasClass('showAllTags')) {
_self.append(_self.tags)
}
if ($(this).hasClass('showAllProblem')) {
_self.$tags.closest('li').show();
return;
}
var $this = $(this);
_self.searchResult($this.html())
})
$('#sort').empty();
_self.search();
$('#sort').empty().append(_self.$search).append($tagsBtn)
}
}
var xx = new TS();
xx.main();
// dynamic tabled or called json table
/**
*
**/
//cascad menu 联动菜单
//file structor like tree
//会员等级
//如何保证安全性，这个还是值得考究的。
// 开启弹出页面
var popPage = function() {
}
popPage.prototype = {
main: function() {
}
}
$('a[data-open="modal"]').bind('click', function(e) {
e.preventDefault();
alert()
})
</script>
</html>