├── img
└── front-end-chart.png
├── bower.json
├── css
└── style.css
├── index.html
├── js
└── app.js
├── data
└── front-end.json
└── README.md
/img/front-end-chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jikeytang/front-end-collect/HEAD/img/front-end-chart.png
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "front-end-collect-",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "ignore": [
6 | "node_modules",
7 | "bower_components",
8 | "test",
9 | "tests"
10 | ],
11 | "dependencies": {
12 | "angular": "~1.2.19",
13 | "d3": "~3.4.9",
14 | "bootstrap": "^3.2.0"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | /*Dendrogram*/
2 | .node circle {
3 | fill: #fff;
4 | stroke: steelblue;
5 | stroke-width: 1.5px;
6 | }
7 |
8 | .node {
9 | font: 16px sans-serif;
10 | cursor: pointer;
11 | }
12 |
13 | .node text:hover {
14 | fill: steelblue;
15 | }
16 |
17 | .link {
18 | fill: none;
19 | stroke: #ccc;
20 | stroke-width: 1.5px;
21 | }
22 |
23 | /*tooltip*/
24 | #tooltip {
25 | position: fixed;
26 | width: 200px;
27 | height: auto;
28 | padding: 10px;
29 | background-color: #444;
30 | -webkit-border-radius: 10px;
31 | -moz-border-radius: 10px;
32 | border-radius: 10px;
33 | -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
34 | -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
35 | box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
36 | pointer-events: none;
37 | color: #fff;
38 | }
39 |
40 | #tooltip.hidden {
41 | display: none;
42 | }
43 |
44 | #tooltip p {
45 | margin: 0;
46 | font-family: sans-serif;
47 | font-size: 16px;
48 | line-height: 20px;
49 | }
50 |
51 | .title {
52 | width: 460px;
53 | position: fixed;
54 | top: 10px;
55 | right: -40px;
56 | height: auto;
57 | padding: 10px;
58 | margin: 15px;
59 | background-color: #444;
60 | -webkit-border-radius: 10px;
61 | -moz-border-radius: 10px;
62 | border-radius: 10px;
63 | -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
64 | -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
65 | box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
66 | color: #fff;
67 | }
68 |
69 | a:hover {
70 | text-decoration: none;
71 | }
72 |
73 | @media (max-width: 768px) {
74 | .title {
75 | display: none;
76 | }
77 | }
78 |
79 | /*fix IE10, IE11 type=range can not display in bootstrap style*/
80 | input[type=range] {
81 | width: 200px\0;
82 | display: inline;
83 | }
84 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
17 | Follow me on Github hjzheng
20 |
21 |
22 |
23 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
1 | angular.module('frontEnd', [])
2 | .factory('data', ['$http', function($http) {
3 | return {
4 | getFrontEndData: function() {
5 | var url = 'data/front-end.json';
6 | return $http.get(url);
7 | }
8 | };
9 | }])
10 | .controller('frontEndCtrl', ['$scope', '$window', 'data',
11 | function($scope, $window, data) {
12 | $scope.type = 'cluster';
13 | $scope.frontEndData = '';
14 | $scope.rotate = 0;
15 |
16 | $window.addEventListener('resize', function() {
17 | $scope.$broadcast('windowResize');
18 | });
19 |
20 | data.getFrontEndData()
21 | .success(function(res) {
22 | if (res.error) {
23 | throw new Error(res.message);
24 | } else {
25 | $scope.frontEndData = res
26 | }
27 | });
28 | }
29 | ]).directive('frontEndChart', ['data','$window', '$timeout', function(data, $window, $timeout) {
30 |
31 | var link = function($scope, $el, $attrs) {
32 |
33 | var radius = 960 / 2;
34 |
35 | var tree = d3.layout.tree()
36 | .size([radius*2, radius*2]);
37 |
38 | var diagonalTree = d3.svg.diagonal()
39 | .projection(function(d) { return [d.y, d.x]; });
40 |
41 | var cluster = d3.layout.cluster()
42 | .size([360, radius - 120]);
43 |
44 | var diagonalCluster = d3.svg.diagonal.radial()
45 | .projection(function(d) {
46 | return [d.y, d.x / 180 * Math.PI];
47 | });
48 |
49 | var svg = d3.select($el[0]).append("svg")
50 | .attr("width", document.documentElement.clientWidth)
51 | .attr("height", document.documentElement.clientHeight - 30)
52 | .call(
53 | d3.behavior.zoom().scaleExtent([0.6, 3]).on("zoom", zoom)
54 | );
55 |
56 | var g = svg.append("g")
57 | .attr("transform", "translate(" + radius + "," + radius + ")");
58 |
59 | function zoom () {
60 | //TODO: set translate range
61 | //TODO: after rotate, we need add rotate for zoom translate
62 | g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")" );
63 | }
64 |
65 | var timeout;
66 |
67 | function rotate(oldValue, newValue){
68 | if (timeout) $timeout.cancel(timeout);
69 | timeout = $timeout(function() {
70 | var rotate = $scope.rotate*6;
71 | var trans = g.attr("transform");
72 | if(trans.indexOf("rotate") !== -1){
73 | trans = trans.replace(/rotate\([^()]*\)/, "rotate(" + rotate + ")");
74 | }else{
75 | trans += "rotate(" + rotate + ")";
76 | }
77 | g.transition().duration(600).attr("transform", trans);
78 | }, 350);
79 | }
80 |
81 | var update = function() {
82 | if ($scope.frontEndData === '') return;
83 |
84 | var data = $scope.frontEndData;
85 |
86 | var nodes = cluster.nodes(data);
87 | var links = cluster.links(nodes);
88 | var diagonal = diagonalCluster;
89 |
90 | g.remove();
91 |
92 | g = svg.append("g")
93 | .attr("transform", "translate(" + radius + "," + radius + ")");
94 |
95 | if($scope.type == 'tree') {
96 | nodes = tree.nodes(data);
97 | links = tree.links(nodes);
98 | diagonal = diagonalTree;
99 | g.attr("transform", "translate(" + 160 + "," + 0 + ")");
100 | }
101 |
102 | var link = g.selectAll("path.link")
103 | .data(links)
104 | .enter().append("path")
105 | .attr("class", "link")
106 | .attr("d", diagonal);
107 |
108 | var node = g.selectAll("g.node")
109 | .data(nodes)
110 | .enter().append("g")
111 | .attr("class", "node")
112 | .attr("transform", function(d) {
113 | if ($scope.type == 'tree') {
114 | return "translate(" + d.y + "," + d.x + ")";
115 | } else {
116 | return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
117 | }
118 |
119 | });
120 |
121 | node.append("circle")
122 | .attr("r", 4.5);
123 |
124 | node.append("text")
125 | .attr("dy", ".31em")
126 | .attr("dx", function(d) {
127 | if($scope.type == 'tree') {
128 | return d.children ? -8 : 8;
129 | } else {
130 | return 0;
131 | }
132 | })
133 | .attr("text-anchor", function(d) {
134 | if($scope.type == 'tree') {
135 | return d.children ? "end" : "start";
136 | } else {
137 | return d.x < 180 ? "start" : "end";
138 | }
139 | })
140 | .attr("transform", function(d) {
141 | if ($scope.type == 'tree') {
142 | return "";
143 | } else {
144 | return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)";
145 | }
146 | })
147 | .text(function(d) {
148 | return d.name;
149 | })
150 | .attr("fill", "#000")
151 | .on("click", function(d){
152 | if(typeof d.url !== "undefined" ){
153 | $window.open(d.url, "_blank");
154 | }
155 | }).on("mouseover", function(d) {
156 |
157 | //Update the tooltip position and value
158 | d3.select("#tooltip")
159 | .style("left", d3.event.x + 10 + "px")
160 | .style("top", d3.event.y - 10 + "px")
161 | .select("#desc")
162 | .text(d.description)
163 |
164 | d3.select("#name")
165 | .text(d.name);
166 |
167 | //Show the tooltip
168 | d3.select("#tooltip").classed("hidden", false);
169 | })
170 | .on("mouseout", function() {
171 | d3.select("#tooltip").classed("hidden", true);
172 | });
173 | };
174 |
175 | $scope.$watch('frontEndData', update);
176 | $scope.$watch('type', update);
177 | $scope.$watch('rotate', rotate);
178 |
179 | };
180 | return {
181 | template: '',
182 | replace: true,
183 | link: link,
184 | restrict: 'E'
185 | };
186 | }
187 | ]);
--------------------------------------------------------------------------------
/data/front-end.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "前端资料收集",
3 | "description": "在前端路上摸索前行，在这里分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。",
4 | "url": "https://github.com/hjzheng/front-end-collect",
5 | "children": [
6 | {
7 | "name": "聚合&&周报订阅",
8 | "description": "无",
9 | "children": [
10 | {
11 | "name": "Html5 Weekly",
12 | "size": 5534,
13 | "url": "http://html5weekly.com/",
14 | "description": "Html相关文章"
15 | },
16 | {
17 | "name": "CSS Weekly",
18 | "size": 5731,
19 | "url": "http://css-weekly.com/",
20 | "description": "CSS相关文章"
21 | },
22 | {
23 | "name": "Javascript Weekly",
24 | "size": 7840,
25 | "url": "http://javascriptweekly.com/",
26 | "description": "JS相关文章，同样也有 html,css 和工具相关"
27 | },
28 | {
29 | "name": "Web Design Weekly",
30 | "size": 7914,
31 | "url": "http://web-design-weekly.com/",
32 | "description": "设计、技术、技巧、工具聚合"
33 | },
34 | {
35 | "name": "UX Weekly",
36 | "size": 4416,
37 | "url": "http://uxwkly.com/",
38 | "description": "用户体验、网页设计相关"
39 | },
40 | {
41 | "name": "Web Tools Weekly",
42 | "size": 7700,
43 | "url": "http://webtoolsweekly.com/",
44 | "description": "JS, 工具推送"
45 | },
46 | {
47 | "name": "RESPONSIVE DESIGN NEWSLETTER",
48 | "size": 8900,
49 | "url": "http://responsivedesignweekly.com/",
50 | "description": "每周推送一次响应式设计相关"
51 | },
52 | {
53 | "name": "Tutorialzine",
54 | "size": 5000,
55 | "url": "http://tutorialzine.com/",
56 | "description": "精品教程和资源推送"
57 | },
58 | {
59 | "name": "Sidebar",
60 | "size": 4600,
61 | "url": "http://sidebar.io/",
62 | "description": "每天、每半周、每周推送5条设计相关"
63 | },
64 | {
65 | "name": "The Hacker News Newsletter",
66 | "size": 9600,
67 | "url": "http://www.hackernewsletter.com/",
68 | "description": "HN 每周精选"
69 | },
70 | {
71 | "name": "Design News",
72 | "size": 5600,
73 | "url": "https://news.layervault.com/",
74 | "description": "F2类资讯聚合"
75 | },
76 | {
77 | "name": "HACKDESIGN",
78 | "size": 4600,
79 | "url": "http://hackdesign.org/",
80 | "description": "每周发布一个设计类课程"
81 | }
82 | ]
83 | },
84 | {
85 | "name": "专业博客",
86 | "description": "无",
87 | "children": [
88 | {
89 | "name": "中文博客",
90 | "description": "无",
91 | "children": [
92 | {
93 | "name": "W3Cplus",
94 | "size": 4700,
95 | "url": "http://www.w3cplus.com/",
96 | "description": "国内最优秀的前端博客，原创居多"
97 | },
98 | {
99 | "name": "W3Cfuns",
100 | "size": 4700,
101 | "url": "http://www.w3cfuns.com/",
102 | "description": "专注于web前端开发行业的综合性门户网站"
103 | },
104 | {
105 | "name": "前端观察",
106 | "size": 6700,
107 | "url": "http://www.qianduan.net/",
108 | "description": "曾经最优秀，最近更新不频繁了"
109 | },
110 | {
111 | "name": "腾讯web前端",
112 | "size": 7800,
113 | "url": "http://www.alloyteam.com/",
114 | "description": "来自于腾讯SNG(社交网络事业群)"
115 | },
116 | {
117 | "name": "张鑫旭-鑫空间-鑫生活",
118 | "size": 8000,
119 | "url": "http://www.zhangxinxu.com/wordpress/",
120 | "description": "重构很厉害，不少经典文章经验"
121 | },
122 | {
123 | "name": "ria之家",
124 | "size": 4000,
125 | "url": "http://www.36ria.com/",
126 | "description": "无"
127 | },
128 | {
129 | "name": "大前端",
130 | "size": 4000,
131 | "url": "http://www.daqianduan.com/",
132 | "description": "无"
133 | },
134 | {
135 | "name": "CSS森林",
136 | "size": 8000,
137 | "url": "http://www.cssforest.org/blog/",
138 | "description": "无"
139 | },
140 | {
141 | "name": "设计达人",
142 | "size": 8000,
143 | "url": "http://www.shejidaren.com/",
144 | "description": "更新较频繁，但转载也较多"
145 | },
146 | {
147 | "name": "Be For Web",
148 | "size": 5000,
149 | "url": "http://beforweb.com/",
150 | "description": "关注移动应用及互联网产品、用户体验设计、前端开发"
151 | }
152 | ]
153 | },
154 | {
155 | "name": "国外博客",
156 | "description": "无",
157 | "children": [
158 | {
159 | "name": "Smashing Magazine",
160 | "size": 6700,
161 | "url": "http://www.smashingmagazine.com/",
162 | "description": "业界权威，web 设计很赞"
163 | },
164 | {
165 | "name": "Tuts",
166 | "size": 3200,
167 | "url": "http://tutsplus.com/tutorials",
168 | "description": "国外知名开发者网站"
169 | },
170 | {
171 | "name": "Developer Drive",
172 | "size": 5600,
173 | "url": "http://www.developerdrive.com/",
174 | "description": "优质前端技术信息"
175 | },
176 | {
177 | "name": "CSS-TRICKS",
178 | "size": 5000,
179 | "url": "http://css-tricks.com/",
180 | "description": "无"
181 | },
182 | {
183 | "name": "Web Designer Wall",
184 | "size": 7000,
185 | "url": "http://webdesignerwall.com/",
186 | "description": "优质 Html5,CSS3等教程"
187 | },
188 | {
189 | "name": "Tutorialzine",
190 | "size": 5200,
191 | "url": "http://tutorialzine.com/",
192 | "description": "大量 web 教程和资源"
193 | },
194 | {
195 | "name": "Inspect Element",
196 | "size": 6302,
197 | "url": "http://inspectelement.com/",
198 | "description": "CSS,wordpress 相关教程挺多"
199 | },
200 | {
201 | "name": "Codrops",
202 | "size": 4100,
203 | "url": "http://tympanus.net/codrops/",
204 | "description": "设计、交互、CSS"
205 | },
206 | {
207 | "name": "Jake Rutter",
208 | "size": 4700,
209 | "url": "http://www.onerutter.com/",
210 | "description": "Jquery 作者，不解释了"
211 | },
212 | {
213 | "name": "Paul Irish",
214 | "size": 4600,
215 | "url": "http://www.paulirish.com/",
216 | "description": "大神,Google Chrome团队,Yeoman"
217 | },
218 | {
219 | "name": "Krasimir Tsonev",
220 | "size": 5600,
221 | "url": "http://krasimirtsonev.com/blog",
222 | "description": "html5,css3,javascript"
223 | },
224 | {
225 | "name": "NCZOnline",
226 | "size": 4500,
227 | "url": "http://www.nczonline.net/",
228 | "description": "html5,css3,javascript"
229 | }
230 | ]
231 | }
232 | ]
233 | },
234 | {
235 | "name": "活跃微博",
236 | "description": "无",
237 | "children": [
238 | {
239 | "name": "@w3c中国",
240 | "size": 3600,
241 | "url": "http://weibo.com/w3cchina",
242 | "description": "万维网联盟中国办事处官方微博"
243 | },
244 | {
245 | "name": "@TheFrontEnd",
246 | "size": 3800,
247 | "url": "http://weibo.com/javascriptdev",
248 | "description": "JavaScript技术资讯、新闻、教程、深度文章。"
249 | },
250 | {
251 | "name": "@前端快爆",
252 | "size": 4600,
253 | "url": "http://weibo.com/fekb",
254 | "description": "爆前端资讯，谈中外技术"
255 | },
256 | {
257 | "name": "@HTML5中国",
258 | "size": 4200,
259 | "url": "http://weibo.com/html5cn",
260 | "description": "html5学习、实战、交流平台html5中国www.html5cn.org官方微博"
261 | },
262 | {
263 | "name": "@developerWorks",
264 | "size": 4700,
265 | "url": "http://weibo.com/developerworks",
266 | "description": "码农周刊（manong.io）& 开发者头条（toutiao.io）"
267 | }
268 | ]
269 | },
270 | {
271 | "name": "开发者",
272 | "description": "微博微信流行后，明显感觉到写博客的人还是越来越少了，下面推荐的这些开发者属于在网上比较活跃的，或者博客积累了大量优质资源的。",
273 | "children": [
274 | {
275 | "name": "阮一峰",
276 | "size": 2600,
277 | "url": "http://www.ruanyifeng.com/blog/",
278 | "description": "阮一峰，70后，英文名Frank。他原是上海财经大学世界经济博士研究生。主要研究宏观金融、货币政策与美国经济。"
279 | },
280 | {
281 | "name": "老赵",
282 | "size": 2700,
283 | "url": "http://blog.zhaojie.me/",
284 | "description": "赵劼，网名老赵，洋名Jeffrey Zhao，花名赵姐夫，金融行业程序员，目前就职于摩根大通（香港）。"
285 | },
286 | {
287 | "name": "玉伯",
288 | "size": 2800,
289 | "url": "https://github.com/lifesinger",
290 | "description": "seajs作者"
291 | },
292 | {
293 | "name": "kejun",
294 | "size": 2600,
295 | "url": "http://hikejun.com/",
296 | "description": "张克军，豆瓣前端工程师"
297 | },
298 | {
299 | "name": "winter",
300 | "size": 2900,
301 | "url": "http://winter-cn.cnblogs.com/",
302 | "description": "无"
303 | },
304 | {
305 | "name": "左耳朵耗子",
306 | "size": 3400,
307 | "url": "http://coolshell.cn/",
308 | "description": "陈皓（@左耳朵耗子），酷壳coolshell.cn博主。14年软件开发相关工作经验，8年以上项目和团队管理经验，6年的软件行业咨询经验。"
309 | },
310 | {
311 | "name": "朴灵",
312 | "size": 2500,
313 | "url": "https://github.com/JacksonTian",
314 | "description": "淘宝数据平台产品部资深前端开发工程师 朴灵"
315 | },
316 | {
317 | "name": "陈广琛",
318 | "size": 3000,
319 | "url": "http://catchen.biz/home.zh-CN.html",
320 | "description": "陈广琛（网名 Cat Chen），前端工程师，现就职于 Facebook。"
321 | },
322 | {
323 | "name": "BYVod",
324 | "size": 3200,
325 | "url": "https://www.byvoid.com/",
326 | "description": "就职于Facebook(英国)"
327 | },
328 | {
329 | "name": "郭宇",
330 | "size": 2800,
331 | "url": "http://blog.guoyu.me/",
332 | "description": "就职于支付宝"
333 | },
334 | {
335 | "name": "大猫",
336 | "size": 2600,
337 | "url": "http://bigc.at/",
338 | "description": "无"
339 | },
340 | {
341 | "name": "C7120",
342 | "size": 2700,
343 | "url": "http://beforweb.com/",
344 | "description": "UX玩家、交互设计师、猫奴、guitar fucker，现就职于腾讯ISUX(上海)"
345 | },
346 | {
347 | "name": "lucifr",
348 | "size": 3000,
349 | "url": "",
350 | "description": "Geek | 拖延症患者 | 间歇性话痨 | 爱 Google | 爱 Mac | Hackintosher | Octopressor | Nikon D90 | Bookmarker | and more."
351 | },
352 | {
353 | "name": "Smallni",
354 | "size": 3200,
355 | "url": "http://www.smallni.com",
356 | "description": "本名丁小倪，小名小倪，英文名Smallni，混迹于互联网，目前在南极洲企鹅村打杂，崇尚简单一目了然的设计风格，注重代码的性能和易维护性，也关注信息无障碍和用户心理学。有点不自信，所以正在努力学习，为早日成为祖国的可树之才而努力。目前同时兼职于W3C CSS工作组和HTML工作组，致力于为WEB标准贡献自己的绵薄之力。"
357 | },
358 | {
359 | "name": "TQ",
360 | "size": 2700,
361 | "url": "http://targetkiller.net/",
362 | "description": "Hi，我是TQ，刚毕业小前端，现就职腾讯ISUX。喜欢折腾前端技术，关注互联网前沿资讯，崇尚简洁至上的设计和交互。"
363 | },
364 | {
365 | "name": "LOO2K",
366 | "size": 3400,
367 | "url": "http://loo2k.com/blog/",
368 | "description": "无"
369 | },
370 | {
371 | "name": "周爱民",
372 | "size": "3200",
373 | "url": "http://blog.csdn.net/aimingoo/",
374 | "description": "国内软件开发界资深软件工程师，从1996年开始涉足商业软件开发，历任部门经理、区域总经理、高级软件工程师、平台架构师等职。周爱民先生在软件开发、软件工程、团队建设以及部门管理方面经验丰富，是Borland Delphi产品技术专家，也是Qomo开源项目（JavaScript）的发起者。在JavaScript开发方面，有超过9年的实践经验。"
375 | },
376 | {
377 | "name": "司徒正美",
378 | "size": 3500,
379 | "url": "http://www.cnblogs.com/rubylouvre",
380 | "description": "无"
381 | },
382 | {
383 | "name": "安记",
384 | "size": 2200,
385 | "url": "http://cssha.com/",
386 | "description": "Hi，我是阿安,双子座，宅男，喜欢编程，更爱足球。现居北京，就职于去哪儿网，前端开发工程师。"
387 | }
388 | ]
389 | },
390 | {
391 | "name": "社区",
392 | "description": "",
393 | "children": [
394 | {
395 | "name": "V2EX",
396 | "size": 3000,
397 | "url": "http://v2ex.com/",
398 | "description": "小众活跃社区"
399 | },
400 | {
401 | "name": "Node.js 中文社区",
402 | "size": 6000,
403 | "url": "http://cnodejs.org/",
404 | "description": "Node.js 国内最活跃的社区"
405 | }
406 | ]
407 | },
408 | {
409 | "name": "企业博客",
410 | "description": "",
411 | "children": [
412 | {
413 | "name": "ISUX 社交用户体验设计",
414 | "size": 9000,
415 | "url": "http://isux.tencent.com/",
416 | "description": "负责腾讯的社交网络相关产品的用户体验设计与研究。"
417 | },
418 | {
419 | "name":"腾讯 CDC",
420 | "size": 4700,
421 | "url": "http://cdc.tencent.com/",
422 | "description":"CDC成立于2006年5月18日,全称是Customer Research & User Experience Design Center（即用户研究与体验设计中心）作为腾讯的核心部门之一。CDC自成立以来，就一直向着“做世界一流的互联网设计团队，为用户创造优质‘在线生活’体验”这一愿景努力，致力于不断提升腾讯全线产品的用户体验。"
423 | },
424 | {
425 | "name":"TID",
426 | "size":7000,
427 | "url":"http://tid.tenpay.com/",
428 | "description":"腾讯财付通设计中心"
429 | },
430 | {
431 | "name":"MXD",
432 | "size":7000,
433 | "url":"http://mxd.tencent.com/",
434 | "description": "腾讯MXD移动互联网设计中心"
435 | },
436 | {
437 | "name":"新浪UED",
438 | "size":5000,
439 | "url":"http://ued.sina.com.cn/",
440 | "description": "无"
441 | },
442 | {
443 | "name":"网易UED",
444 | "size":4000,
445 | "url":"http://uedc.163.com/",
446 | "description":"网易用户体验设计中心（User Experience Design Center），简称“设计中心（UEDC）”，成立于2008年底。"
447 | },
448 | {
449 | "name":"阿里巴巴（中国站）UED",
450 | "size": 6000,
451 | "url":"http://www.aliued.cn/",
452 | "description":"阿里巴巴中国站UED成立于1999年，全称是用户体验设计部（User Experience Design Department），花名为“有一点”，是阿里巴巴集团最资深的部门之一。"
453 | },
454 | {
455 | "name":"携程UED",
456 | "size": 6000,
457 | "url":"http://ued.ctrip.com/blog/",
458 | "description":"携程UED,携程前端开发团队,UED,Javascript,重构,ux"
459 | },
460 | {
461 | "name":"百度FEX",
462 | "size": 6000,
463 | "url":"http://fex.baidu.com/",
464 | "description":"百度前端团队Blog,关注前端技术，还更重视全端及全栈的能力"
465 | }
466 | ]
467 | },
468 | {
469 | "name": "书籍",
470 | "description": "",
471 | "children": [
472 | {
473 | "name": "JavaScript语言精粹",
474 | "size": 3000,
475 | "url": "http://book.douban.com/subject/3590768/",
476 | "description": "绝对经典，相信看完后，对Javascript这门语言有了重新认识，原来这个语言是这么的美丽！"
477 | }
478 | ]
479 | }
480 | ]
481 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 前端收集
2 | =================
3 |
4 | 在前端路上摸索前行，在这里分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。欢迎更新，以下各排名不分先后顺序。
5 |
6 | 自己 RSS 长期订阅了一些IT 和技术相关博客，这里是我Feedly 输出的opml，可直接导入一些RSS 阅读器:
7 | https://github.com/foru17/luolei-dotfiles/blob/master/feedly.opml
8 |
9 | ====
10 |
11 | #### [前端收集图谱](http://get-set.cn/front-end-collect/)
12 |
13 | - git clone https://github.com/hjzheng/front-end-collect
14 | - cd front-end-collect
15 | - bower install
16 | - 放入你喜欢的web容器,访问index.html即可
17 | - 你也直接可以访问: http://get-set.cn/front-end-collect/
18 | - 支持Chrome, Firefox and IE10&11以上浏览器
19 |
20 | 
21 |
22 | #### 聚合&&周报订阅
23 |
24 | |名称 |订阅地址 | 介绍 |
25 | | ----- | ----- | ------ |
26 | |Html5 Weekly|http://html5weekly.com/| Html 技术类|
27 | |CSS Weekly|http://css-weekly.com/| |
28 | |Javascript Weekly|http://javascriptweekly.com/|JS相关，同样有 html,css 和工具相关|
29 | |Web Design Weekly| http://web-design-weekly.com/ | 设计、技术、技巧、工具聚合|
30 | |UX Weekly|http://uxwkly.com/|用户体验、网页设计推送|
31 | |Web Tools Weekly|http://webtoolsweekly.com/|Js，工具推送|
32 | |RESPONSIVE DESIGN NEWSLETTER|http://responsivedesignweekly.com/|每周推送一次响应式设计相关|
33 | |Tutorialzine|http://tutorialzine.com/|精品教程和资源推送|
34 | |Sidebar|http://sidebar.io/|每天、每半周、每周推送5条设计相关|
35 | |The Hacker News Newsletter|http://www.hackernewsletter.com/|HN 每周精选|
36 | |Design News|https://news.layervault.com/|F2类资讯聚合|
37 | |HACKDESIGN|http://hackdesign.org/|每周发布一个设计类课程|
38 | |前端资源分享 半月刊|http://www.hacke2.cn/monthly/|每半月发布最新高质量的前端资源|
39 | |中文推送|||
40 | |SegmentFault精选 |http://segmentfault.com/|国内开发者技术问答社区每周精选问答|
41 | |FE Weekly|http://www.feweekly.com/|每周一次，内容主要是英文的，不过有中文导读
42 | |EchoJs_News|http://www.echojs.com/|每天推送若干好文，都是英文的，JS技术类|
43 |
44 |
45 | #### 专业博客
46 |
47 | 注:此处`活跃度`为博客更新频率，`原创度`指的是作者原创或者翻译的文章所占博文比例。请尊重原创，大量转载其他网站资讯的网站和聚合类网站不做推荐。
48 |
49 | ###### 中文博客
50 | |名称 |活跃度 | 原创度 | 维护者|其他|
51 | | ----- | ----- | ------ |----- |-----|
52 | |[W3Cplus](http://www.w3cplus.com/)|★★★★★|★★★★★|淘宝 @大漠 |国内最优秀的前端博客，原创居多|
53 | |[W3Cfuns](http://www.w3cfuns.com/)|★★★★★|★★★★☆|[#](http://www.w3cfuns.com/misc.php?mod=faq&action=faq&id=1) |专注于web前端开发行业的综合性门户网站|
54 | |[前端观察](http://www.qianduan.net/)|★★★★☆|★★★★☆|腾讯 ISUX @神飞|曾经最优秀，最近更新不频繁了|
55 | |[腾讯web前端 AlloyTeam 团队](http://www.alloyteam.com/)|★★★★|★★★★|[@腾讯AlloyTeam](http://t.qq.com/AlloyTeam)|来自于腾讯SNG(社交网络事业群)|
56 | |[张鑫旭-鑫空间-鑫生活](http://www.zhangxinxu.com/wordpress/)|★★★★☆|★★★★★|张鑫旭|重构很厉害，不少经典文章经验|
57 | |[ria之家](http://www.36ria.com/)|★★★★☆|★★★★☆|淘宝 @明河|#|
58 | |[大前端](http://www.daqianduan.com/)|★★★★☆|★★★★☆|[#](http://www.cssforest.org/blog/index.php?s=about)|#|
59 | |[CSS森林](http://www.cssforest.org/blog/)|★★★★☆|★★★★☆|[关于](http://www.cssforest.org/blog/index.php?s=about)|#|
60 | |[设计达人](http://www.shejidaren.com/)|★★★★☆|★★★☆☆|[#](http://www.cssforest.org/blog/index.php?s=about)|更新较频繁，但转载也较多|
61 | |[阮一峰博客](http://www.ruanyifeng.com/blog/)|★★★★☆|★★★☆☆|[#](http://www.ruanyifeng.com/about.html)|牛人一个|
62 | |[Be For Web - 为网而生 - 原创译文博客](http://beforweb.com/)|★★★★☆|★★★★☆|[@C7210](http://weibo.com/c7210)|关注移动应用及互联网产品、用户体验设计、前端开发|
63 |
64 |
65 |
66 | ###### 国外博客
67 | |名称 |活跃度 | 原创度 | 维护者|其他|
68 | | ----- | ----- | ------ |----- |------|
69 | |[Smashing Magazine](http://www.smashingmagazine.com/)|★★★★★|★★★★★| # |业界权威，web 设计很赞|
70 | |[Tuts](http://hub.tutsplus.com/)|★★★★★|★★★★★| - |国外知名开发者网站|
71 | |[DeveloperDrive](http://www.developerdrive.com/)|★★★★★|★★★★★| - |优质前端技术信息|
72 | |[CSS-TRICKS](http://css-tricks.com/)|★★★★★|★★★★★| Chris Coyier |左边这位是大神|
73 | |[Web Designer Wall](http://webdesignerwall.com/)|★★★★★|★★★★★| Nick La.|优质 Html5,CSS3等教程|
74 | |[Tutorialzine](http://tutorialzine.com/)|★★★★★|★★★★★| #|大量 web 教程和资源|
75 | |[Inspect Element](http://inspectelement.com/)|★★★★★|★★★★★| #|CSS,wordpress 相关教程挺多|
76 | |[Codrops](http://tympanus.net/codrops/)|★★★★★|★★★★★| #|设计、交互、CSS|
77 | |[Jake Rutter](http://www.onerutter.com/)|★★★★★|★★★★★| Jake Rutter|Jquery 作者，不解释了|
78 | |[Paul Irish](http://www.paulirish.com/)|★★★★★|★★★★★| Paul Irish|大神,Google Chrome团队,Yeoman|
79 | |[Krasimir Tsonev](http://krasimirtsonev.com/blog)|★★★★★|★★★★★| Krasimir Tsonev|html5,ccs3,javascript|
80 | |[NCZOnline](http://www.nczonline.net/)|★★★★★|★★★★★| Nicholas C. Zakas |html5,ccs3,javascript|
81 | |[HTML5 Rocks](http://www.html5rocks.com/en/)|★★★★★|★★★★★| # |html5权威网站|
82 | |[A List Apart](http://alistapart.com/)|★★★★★|★★★★★| # |可以改变世界的文章|
83 | |[hakim](http://hakim.se/)|★★★★★|★★★★★| HAKIM EL HATTAB|ccs3,javascript|
84 | |[DailyJS](http://dailyjs.com/) | ★★★★★ | ★★★★★ | # | javascript |
85 |
86 | ##### 活跃微博
87 | |ID |公司 | 简介 |
88 | |-----|------|------|
89 | |[@w3c中国](http://weibo.com/w3cchina)|#|万维网联盟中国办事处官方微博|
90 | |[@TheFrontEnd](http://weibo.com/javascriptdev)|#|JavaScript技术资讯、新闻、教程、深度文章。|
91 | |[@前端快爆](http://weibo.com/fekb)|阿里巴巴|有HTML5、CSS3、JS |
92 | |[@HTML5中国](http://e.weibo.com/html5cn)|#|中国www.html5cn.org官方微博|
93 | |[@developerWorks](http://weibo.com/developerworks)|#|#|
94 |
95 |
96 | #### 开发者博客
97 |
98 | 微博微信流行后，明显感觉到写博客的人还是越来越少了，下面推荐的这些开发者属于在网上比较活跃的，或者博客积累了大量优质资源的。
99 |
100 | ###### 国内开发者
101 |
102 | 国内开发者一块欢迎大家 `Fork`提交推荐，最好能推荐一些在前端界较活跃的的开发者。
103 |
104 | |ID |博客 |微博 |Github|Twitter| 公司 |关键字|
105 | |-----|-----|------|------|-----|-----|------|
106 | |阮一峰|[阮一峰博客](http://www.ruanyifeng.com/blog/)|[@ruanyf](http://weibo.com/ruanyf)|#|[@ruanyf](https://twitter.com/ruanyf)|上海金融学院国际金融学院| 教师，博客写作人，翻译人，《黑客与画家》的译者|
107 | |老赵| http://blog.zhaojie.me/|[@老赵](http://weibo.com/jeffz)|#|[#]()|摩根大通（香港）| 资深码农|
108 | |玉伯|[岁月如歌](http://lifesinger.wordpress.com/)|[@玉伯也叫射雕](http://weibo.com/lifesinger)|[@lifesinger](https://github.com/lifesinger)|[@lifesinger](https://twitter.com/lifesinger)| 支付宝|大牛|
109 | | kejun |http://hikejun.com/|[@kejunz](http://weibo.com/kejunz)|#|[@kejunz](https://github.com/kejun)| 豆瓣|前端大神|
110 | |寒冬winter|[winter-cn](http://winter-cn.cnblogs.com/)|[@寒冬winter](http://weibo.com/wintercn)|#|#|#|#|
111 | |左耳朵耗子|[酷壳](http://coolshell.cn/)|[@左耳朵耗子](http://weibo.com/haoel)|#|[@haoel](https://twitter.com/haoel)|淘宝|#|
112 | |fool2fish|#|[@fool2fish](http://weibo.com/fool2fish)|#|#|支付宝|#|
113 | |朴灵|[Html5fiy](http://html5ify.com/)|[@朴灵](http://weibo.com/shyvo)|[JacksonTian](https://github.com/JacksonTian)|#|阿里巴巴|《深入浅出Node.js》作者,大牛|
114 | |Cat Chen|[陈广琛](http://catchen.biz/home.zh-CN.html)|[@CatChen](http://weibo.com/u/1640352230)|[@CatChen](https://github.com/CatChen)|[@CatChen](https://twitter.com/CatChen)|Facebook |大牛|
115 | |BYVod|[Beyond the Void](https://www.byvoid.com/)|[@BYVoid](http://weibo.com/byvoid)|[@byvoid](https://github.com/BYVoid)|[@BYVoid](https://twitter.com/byvoid)|Facebook 英国|《Node.js 开发指南》作者,大牛|
116 | |郭宇|[Einmal ist keinmal](http://blog.guoyu.me/)|[@郭宇](http://weibo.com/137601206)|[@turingou](https://github.com/turingou)|[@turingou](https://twitter.com/turingou)|糗事百科,原支付宝|Node.js|
117 | |勾三股四|[勾三股四博客](http://jiongks.name/)|[@勾三股四](http://weibo.com/mx006)|#|#|淘宝|#|
118 | |cnberg|[冰山一角](http://cnberg.com)|[@berg](http://weibo.com/berg)|@cnberg|[@cnberg]()| 百度| 骑行|
119 | |大猫| [意淫笔记](http://bigc.at)|[@daemao](http://weibo.com/daemao)|[@Damao](https://github.com/Damao)|[@13igcat](https://twitter.com/13igcat)|腾讯 |[知乎](http://www.zhihu.com/people/13igcat)|
120 | | hzlzh |[自力博客](https://zlz.im)|[@hzlzh](http://weibo.com/hzlzh)|[@hzlzh](http://github.com/hzlzh)|[@hzlzh](http://twitter.com/hzlzh)| 腾讯|前端开发|
121 | | C7210 |beforweb.com/|[@C7210](http://weibo.com/c7210)|[@C7210](http://twittercom/hzlzh)|[@C7210](http://github.com/hzlzh)|#|UX、交互设计师、视觉与前端|
122 | | kejun |http://hikejun.com/|[#](http://weibo.com/kejun)|[#](http://twittercom/kejun)|[#](http://github.com/hzlzh)| 腾讯|前端开发|
123 | | 张鑫旭 |[张鑫旭博客](http://www.zhangxinxu.com/wordpress/)|[@张鑫旭](http://weibo.com/zhangxinxu)|[@zhangxinxu](https://github.com/zhangxinxu)|[@zhangxinxu](https://twitter.com/zhangxinxu)| 腾讯 上海 ISUX|前端开发|
124 | | lucifr |http://lucifr.com/|[@lucifr](http://weibo.com/lucifr)|[@lucifr](http://twittercom/lucifr)|[@lucifr](http://github.com/lucifr)| #|Mac,ios|
125 | | smallni |http://www.smallni.com/|[#](http://weibo.com/hzlzh)|[@Smallni](https://twitter.com/smallniding/)|[#](http://github.com/hzlzh)| 腾讯|前端开发|
126 | | TQ |http://targetkiller.net/|[@Piser-TQ](http://weibo.com/targetkiller)|[@tqtan](https://twitter.com/tqtan/)|[@targetkiller](https://github.com/targetkiller)| 腾讯 ISUX | 网页重构|
127 | |LOO2K|[LOO2K](http://loo2k.com/blog/)|[@LOO2K](http://weibo.com/loo2k)|[LOO2K](https://github.com/loo2k)|[LOO2K](https://twitter.com/loo2k/)|墨筹网|少年才俊|
128 | |qiqiboy|[qiqiboy](http://www.qiqiboy.com/)|[@qiqiboy](http://weibo.com/qiqiboy)|#|#|金山网络 UX|吐槽清理大师开发者|
129 | |foru17|[罗磊的独立博客](http://luolei.org)|[@罗罗磊磊](http://weibo.com/foru17)|[@foru17](https://github.com/foru17)|[@foru17](https://twitter.com/foru17)|金山网络 UX|打酱油的|
130 | |周爱民|[aimingoo专栏](http://blog.csdn.net/aimingoo/)|#|#|#|支付宝|JavaScript语言精髓与编程实践作者|
131 | |hax|[hax的技术部落格](http://hax.iteye.com/)|#|#|#|#|前端大牛|
132 | |三生石上|[三生石上](http://www.cnblogs.com/sanshi)|#|#|#|#|js秘密花园译者|
133 | |司徒正美|[Ruby's Louvre](http://www.cnblogs.com/rubylouvre)|#|#|#|#|前端开发|
134 | |叶小钗|[叶小钗](http://www.cnblogs.com/yexiaochai)|#|#|#|#|前端开发|
135 | |聂微东|[Darren](http://www.cnblogs.com/Darren_code/)|#|#|#|百度移动云|前端开发|
136 | |当耐特|[iamzhanglei](http://www.cnblogs.com/iamzhanglei/)|#|#|#|#|HTML5实验室作者|
137 | |教主|[_frank](http://www.cnblogs.com/_franky)|#|#|#|#|又一牛|
138 | |typeof|[typeof](http://typeof.net/)|#|#|#|#|又一牛|
139 | |Gray Zhang|[Gray Zhang](http://www.cnblogs.com/GrayZhang)|#|#|#|#|百度一牛|
140 | |李松峰|[为之漫笔](http://www.cn-cuckoo.com)|#|#|#|#|高程2等书的译者|
141 | |小鱼|[sofish](http://sofish.de/)|[@sofish](http://weibo.com/sofish)|#|#|#|百姓网一牛|
142 | |vilic|[vilic](http://vilic.info/)|#|#|#|#|年轻一牛|
143 | |彬Go|[彬Go](http://blog.bingo929.com/)|#|#|#|#|人人网一牛|
144 | |PuterJam|[PuterJam's Blog](http://www.pjhome.net)|#|#|#|#|腾讯一牛|
145 | |css森林|[cssforest](http://www.cssforest.org)|#|#|#|#|前端博客|
146 | |99css|[99css](http://www.99css.com/)|[@ytzong](http://weibo.com/ytzong)|#|#|#|腾讯一牛|
147 | |秦歌|[Kaven](http://dancewithnet.com/)|#|[@kavenyan](http://twitter.com/kavenyan)|#|#|js语言精粹译者|
148 | |linxz|[linxz](http://www.linxz.de/)|#|#|#|#|css那些事儿的作者|
149 | |米随随|[米随随](http://s5s5.me/)|#|#|#|#|腾讯ISUX 一牛|
150 | |飘飘|[飘飘](http://pufen.net/)|#|#|#|#|腾讯一牛|
151 | |Along|[Along's Blog](http://jinlong.github.io/)|[@newwave](http://weibo.com/newwave)|#|#|#|Opera 欧朋一牛|
152 | |安记|[cssha](http://www.cssha.com/)|[@hanan321](http://weibo.com/hanan321)|[hanan198501](https://github.com/hanan198501)|#|#|去哪网一牛|
153 | | 余弦 | [EVILCOS](http://evilcos.me/) | [余弦](http://weibo.com/evilcos) | [evilcos](https://github.com/evilcos) | # | [知道创宇](http://www.knownsec.com/) | 安全（黑客）、架构、团队的各种观点与分享 | # | [冯大辉](http://dbanotes.net/) | 现在就职于丁香园 (http://dxy.cn) ，担任技术团队负责人.
154 | |汤姆大叔|[汤姆大叔的博客](http://www.cnblogs.com/TomXu/)|#|#|#|#|《深入理解Bootstrap》、《JavaScript启示录》、《JavaScript设计模式》等多本前端书籍翻译作者|
155 |
156 |
157 | #### 一些社区
158 |
159 | |名称 |地址 |介绍 |
160 | |-----|-----|------|
161 | |V2EX|http://v2ex.com/|小众活跃社区|
162 | |知乎|http://www.zhihu.com/|综合问答社区|
163 | |前端乱炖|http://www.html-js.com/|专业的前端知识平台|
164 | |segmentfault|http://segmentfault.com/|综合问答社区|
165 | |果壳问答|http://www.guokr.com/ask/pending/|综合问答社区|
166 | |Ruby|http://ruby-china.org/|同 V2EX 氛围类似，不局限于Ruby|
167 | |Node.js 中文社区|http://cnodejs.org/|Node.js 国内最活跃的社区|
168 | |Code Wall|https://coderwall.com/|国外技术社区|
169 | | DIV.IO | http://div.io/ | 国内前端技术社区 |
170 | | 稀土掘金 | http://gold.xitu.io/ | 中国高质量的技术分享社区 |
171 |
172 |
173 | ##### 企业官方博客
174 |
175 | 在开头我的 Feedly 订阅 opml 文件里比较全面。
176 |
177 | |名称 |公司 | 部门|活跃度 | 简介|微博|
178 | | ----- | ----- | ------ | ------ |-----|-----|
179 | | [ISUX 社交用户体验设计](http://isux.tencent.com/) | 腾讯 | ISUX| ★★★★☆|负责腾讯的社交网络相关产品的用户体验设计与研究。|#|
180 | | [腾讯 CDC](http://cdc.tencent.com/) | 腾讯 | CDC| ★★★★☆| 简介 |#|
181 | | [腾讯Web前端 Alloy 团队 Blog](http://www.alloyteam.com/) | 腾讯 | SNG| ★★★★☆|主要负责手机QQ、QQ互联、腾讯Q+、WebQQ项目的团队。 |[alloyteam](http://weibo.com/alloyteam)|
182 | | [TID-财付通设计中心](http://tid.tenpay.com/) | 腾讯 | TID| ★★★★☆|简介 |#|
183 | | [腾讯MXD移动互联网设计中心](http://mxd.tencent.com/) | 腾讯 | MXD| ★★★★☆|简介 |[@腾讯MXD](http://e.t.qq.com/tencent_mxd)|
184 | | [人人网FED Team](http://tid.tenpay.com/) | 人人网 | FED| ★★★★☆|简介 |#|
185 | | [微博UDC](http://udc.weibo.com/) | 新浪 | UDC| ★★★★☆|简介 |[@微博UDC设计中心](http://weibo.com/sudc)|
186 | | [新浪UED](http://ued.sina.com.cn/) | 新浪 | UED| ★★★★☆|简介 |[#](http://weibo.com/sudc)|
187 | | [网易用户体验设计中心](http://uedc.163.com/) | 网易 | UED| ★★★★☆|简介 |[#](http://weibo.com/sudc)|
188 | | [阿里巴巴（中国站）用户体验设计部博客](http://www.aliued.cn/) | 阿里巴巴 | UED| ★★★★☆|简介 |[@Alibaba-UED](http://weibo.com/aliued)|
189 | | [携程UED-携程旅行前端开发团队](http://ued.ctrip.com/blog/) | 携程网 | UED| ★★★☆☆|携程UED,携程前端开发团队,UED,Javascript,重构,ux|#|
190 | | [百度FEX](http://fex.baidu.com/) | 百度 | FEX| ★★★★☆| 百度前端团队Blog,关注前端技术，还更重视全端及全栈的能力。|#|
191 | |[淘宝UED](http://ued.taobao.org/blog/)|淘宝网|UED|★★★★☆|用户体验、交互设计、视觉设计、前端技术博客|[@淘宝UED](http://weibo.com/taobaoued)|
192 |
193 |
194 | ## 书籍
195 |
196 | |名称 | 作者 | 价格 | 出版社|简评 |
197 | | ----- | ----- | ------ |----- |------|
198 | | [Web标准设计](http://book.douban.com/subject/3327829/) | 刘杰（嗷嗷） | RMB 60.00 | 清华大学出版社 |基础入门|
199 | | [大巧不工 : Web前端设计修炼之道](http://book.douban.com/subject/4914146/) | 赖定清 / 林坚 | RMB 59.00 | 机械工业出版社|适合入门，了解前端全局|
200 | |[高性能网站建设指南:前端工程师技能精髓](http://book.douban.com/subject/3132277/)|Steve Souders |RMB 35.00|电子工业出版社|能从原理层理解各种方法|
201 | |[高性能网站建设指南:Web开发者性能优化最佳实践](http://book.douban.com/subject/4719162/)|Steve Souders |RMB 49.80|电子工业出版社|#|
202 | |[Web站点优化 : Web站点优化](http://book.douban.com/subject/4124141/)|金 |RMB 55.00|#|#|
203 | |[Node.js开发指南](http://book.douban.com/subject/10789820/)| 郭家寶 |RMB 45.00|#|作者很牛|
204 | |[JavaScript高级程序设计](http://book.douban.com/subject/10546125/)| Nicholas C. Zakas |RMB 99.00|人民邮电出版社|适合没事就翻翻|
205 | |[JavaScript权威指南](http://book.douban.com/subject/2228378/)| 弗拉纳根 |RMB 109.00|机械工业出版社|犀牛书|
206 | |[JavaScript语言精粹](http://book.douban.com/subject/3590768/)| Douglas Crockford |RMB 35.00| 电子工业出版社|绝对经典，相信看完后，对Javascript这门语言有了重新认识，原来这个语言是这么的美丽！|
207 |
208 | ##捐赠目录
209 | - [【张鑫旭】的个人博客](http://www.zhangxinxu.com/wordpress/2014/12/css3-animation-dotting-loading/)
210 | - [【艾伦】- 博客园 - jQuery源码分析系列](http://www.cnblogs.com/aaronjs/p/3279314.html)
211 | - [【大漠】 W3CPLUS是一个前端爱好者的家园](http://www.w3cplus.com/w3cplus-2014.html)
212 | - [【司徒正美】 - 博客园](http://www.cnblogs.com/rubylouvre/archive/2009/09/15/1566722.html)
213 | - [【Hemin】jQuery API 中文手册](http://hemin.cn/jq/)
214 | - [【鸟哥】Laruence](http://weibo.com/p/1001603794538257899132)
215 | - [【Highcharts】Highcharts中文赞助](http://www.hcharts.cn/about/donate.php)
216 | - [【芒果云】 在线资源管理器](http://wwhttp://kalcaddle.com/about.html)
217 | - [wangeditor 轻量级web富文本编辑器](http://www.wangeditor.com/contact.html)
218 | - [YouMeek - IntelliJ-IDEA-Tutorial](http://www.youmeek.com/donate/)
219 |
220 | ##[大漠](http://www.w3cplus.com)分享
221 |
222 | ###性能优化优秀教程
223 |
224 | - [5173首页前端性能优化实践](http://ued.5173.com/?p=1731)
225 | - [给网页设计师和前端开发者看的前端性能优化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers)
226 | - [复杂应用的 CSS 性能分析和优化建议](http://www.orzpoint.com/profiling-css-and-optimization-notes/)
227 | - [张鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/)
228 | - [前端性能监控总结](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html)
229 | - [网站性能优化之CSS无图片技术](http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF/)
230 | - [web前端性能优化进阶路](http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html)
231 | - [前端技术：网站性能优化之CSS无图片技术](http://my.eoe.cn/tuwandou/archive/4544.html)
232 | - [浏览器的加载与页面性能优化](http://www.baiduux.com/blog/2011/02/15/browser-loading/)
233 | - [页面加载中的图片性能优化](http://www.w3ctech.com/p/1503)
234 | - [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD)
235 | - [html优化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/)
236 | - [99css——性能](http://www.99css.com/archives/tag/%E6%80%A7%E8%83%BD)
237 | - [Yslow——性能优化](http://www.yslow.net/category.php?cid=20)
238 | - [YSLOW中文介绍](http://www.cnblogs.com/yslow/)
239 | - [转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化](http://www.360ito.com/article/40.html)
240 | - [Yahoo!团队实践分享：网站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml)
241 | - [网站性能优化指南：什么使我们的网站变慢？](http://blog.jiasule.com/i/153)
242 | - [网站性能优化实践，减少加载时间，提高用户体验](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html)
243 | - [浅谈网站性能优化 前端篇](http://www.umtry.com/archives/747.html)
244 | - [前端重构实践之如何对网站性能优化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html)
245 | - [前端性能优化：使用媒体查询加载指定大小的背景图片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/)
246 | - [网站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html)
247 | - [加载，不只是少一点点](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml)
248 | - [前端性能的测试与优化](http://mzhou.me/article/95310/)
249 | - [分享网页加载速度优化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/)
250 | - [页面加载中的图片性能优化](http://www.f2es.com/images-bytes-opt/)
251 | - [web前端优化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html)
252 | - [网站性能优化工具大全](http://www.qianduan.net/website-performance-optimization-tool.html)
253 | - [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/)
254 | - [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/)
255 | - [由12306谈谈网站前端性能和后端性能优化](http://coolshell.cn/articles/6470.html)
256 | - [AlloyTeam——前端优化](http://www.alloyteam.com/category/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/)
257 | - [毫秒必争，前端网页性能最佳实践](http://www.cnblogs.com/developersupport/p/3248695.html)
258 | - [网站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html)
259 | - [前端工程与性能优化（上）：静态资源版本更新与缓存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1)
260 | - [前端工程与性能优化（下）：静态资源管理与模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2)
261 | - [HTTPS连接的前几毫秒发生了什么](http://blog.jobbole.com/48369/)
262 | - [Yslow](http://uicss.cn/yslow/#more-12319)
263 | - [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/)
264 | - [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/)
265 | - [YUISlide,针对移动设备的动画性能优化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html)
266 | - [Improving Site Performance](http://joelglovier.com/improving-site-performance/)
267 | - [让网站提速的最佳前端实践](http://blog.segmentfault.com/laopopo/1190000000367899)
268 | - [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/)
269 | - [Need for Speed – How to Improve your Website Performance](http://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/)
270 |
271 | =======
272 |
273 | ####线上的一些翻译版好书
274 |
275 | |书名|地址|作者|译者|介绍|
276 | |----|----|----|----|----|
277 | |JavaScript秘密花园|http://bonsaiden.github.io/JavaScript-Garden/zh/|伊沃·韦特泽尔&张易江|[三生石上](http://sanshi.me/)|完整书籍，界面美观，有详细demo|
278 | | Material Design 中文版 | http://design.1sters.com/ | Google设计手册 | 协同翻译 | Google I/O 2014 发布的 Material Design 官方手册的中文翻译 |
279 | |[JavaScript DOM编程艺术](http://book.douban.com/subject/6038371/)|Jeremy Keith /Jeffrey Sambells|RMB 49.00|人民邮电出版社|适合Javascript入门看|
280 | |[深入浅出node.js](http://book.douban.com/subject/25768396/)|朴灵|RMB 69.00|人民邮电出版社|一本从前端通往全端的好书|
281 | |[CSS开发王](http://book.douban.com/subject/3137282/)|张亚飞|RMB 49.00|电子工业出版社|适合有一定基础后CSS进阶用|
282 |
283 | ##关于
284 | ======
285 |
286 | 本 repo 会 不断更新，感谢推荐和分享新资源的朋友。
287 |
--------------------------------------------------------------------------------