├── README.md ├── bower.json ├── css └── style.css ├── data └── front-end.json ├── img └── front-end-chart.png ├── index.html ├── js └── app.js └── qq.md /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 | ![image](https://raw.githubusercontent.com/hjzheng/front-end-collect/master/img/front-end-chart.png) 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 | | ----- | ----- | ------ |----- |-----| 53 | |[W3Cplus](http://www.w3cplus.com/)|★★★★★|★★★★★|携程 @大漠 |国内最优秀的前端博客，原创居多| 54 | |[W3Cfuns](http://www.w3cfuns.com/)|★★★★★|★★★★☆|[#](http://www.w3cfuns.com/misc.php?mod=faq&action=faq&id=1) |专注于web前端开发行业的综合性门户网站| 55 | |[前端观察](http://www.qianduan.net/)|★★★★☆|★★★★☆|腾讯 ISUX @神飞|曾经最优秀，最近更新不频繁了| 56 | |[腾讯web前端 AlloyTeam 团队](http://www.alloyteam.com/)|★★★★|★★★★|[@腾讯AlloyTeam](http://t.qq.com/AlloyTeam)|来自于腾讯SNG(社交网络事业群)| 57 | |[张鑫旭-鑫空间-鑫生活](http://www.zhangxinxu.com/wordpress/)|★★★★☆|★★★★★|张鑫旭|重构很厉害，不少经典文章经验| 58 | |[ria之家](http://www.36ria.com/)|★★★★☆|★★★★☆|淘宝 @明河|#| 59 | |[大前端](http://www.daqianduan.com/)|★★★★☆|★★★★☆|[#](http://www.cssforest.org/blog/index.php?s=about)|#| 60 | |[CSS森林](http://www.cssforest.org/blog/)|★★★★☆|★★★★☆|[关于](http://www.cssforest.org/blog/index.php?s=about)|#| 61 | |[设计达人](http://www.shejidaren.com/)|★★★★☆|★★★☆☆|[#](http://www.cssforest.org/blog/index.php?s=about)|更新较频繁，但转载也较多| 62 | |[阮一峰博客](http://www.ruanyifeng.com/blog/)|★★★★☆|★★★☆☆|[#](http://www.ruanyifeng.com/about.html)|牛人一个| 63 | |[Be For Web - 为网而生 - 原创译文博客](http://beforweb.com/)|★★★★☆|★★★★☆|[@C7210](http://weibo.com/c7210)|关注移动应用及互联网产品、用户体验设计、前端开发| 64 | 65 | 66 | 67 | ######国外博客 68 | |名称 |活跃度 | 原创度 | 维护者|其他| 69 | | ----- | ----- | ------ |----- |------| 70 | |[Smashing Magazine](http://www.smashingmagazine.com/)|★★★★★|★★★★★| # |业界权威，web 设计很赞| 71 | |[Tuts](http://hub.tutsplus.com/)|★★★★★|★★★★★| - |国外知名开发者网站| 72 | |[DeveloperDrive](http://www.developerdrive.com/)|★★★★★|★★★★★| - |优质前端技术信息| 73 | |[CSS-TRICKS](http://css-tricks.com/)|★★★★★|★★★★★| Chris Coyier |左边这位是大神| 74 | |[Web Designer Wall](http://webdesignerwall.com/)|★★★★★|★★★★★| Nick La.|优质 Html5,CSS3等教程| 75 | |[Tutorialzine](http://tutorialzine.com/)|★★★★★|★★★★★| #|大量 web 教程和资源| 76 | |[Inspect Element](http://inspectelement.com/)|★★★★★|★★★★★| #|CSS,wordpress 相关教程挺多| 77 | |[Codrops](http://tympanus.net/codrops/)|★★★★★|★★★★★| #|设计、交互、CSS| 78 | |[Jake Rutter](http://www.onerutter.com/)|★★★★★|★★★★★| Jake Rutter|Jquery 作者，不解释了| 79 | |[Paul Irish](http://www.paulirish.com/)|★★★★★|★★★★★| Paul Irish|大神,Google Chrome团队,Yeoman| 80 | |[Krasimir Tsonev](http://krasimirtsonev.com/blog)|★★★★★|★★★★★| Krasimir Tsonev|html5,ccs3,javascript| 81 | |[NCZOnline](http://www.nczonline.net/)|★★★★★|★★★★★| Nicholas C. Zakas |html5,ccs3,javascript| 82 | |[HTML5 Rocks](http://www.html5rocks.com/en/)|★★★★★|★★★★★| # |html5权威网站| 83 | |[A List Apart](http://alistapart.com/)|★★★★★|★★★★★| # |可以改变世界的文章| 84 | |[hakim](http://hakim.se/)|★★★★★|★★★★★| HAKIM EL HATTAB|ccs3,javascript| 85 | |[DailyJS](http://dailyjs.com/) | ★★★★★ | ★★★★★ | # | javascript | 86 | 87 | ##### 活跃微博 88 | |ID |公司 | 简介 | 89 | |-----|------|------| 90 | |[@w3c中国](http://weibo.com/w3cchina)|#|万维网联盟中国办事处官方微博| 91 | |[@TheFrontEnd](http://weibo.com/javascriptdev)|#|JavaScript技术资讯、新闻、教程、深度文章。| 92 | |[@前端快爆](http://weibo.com/fekb)|阿里巴巴|有HTML5、CSS3、JS | 93 | |[@HTML5中国](http://e.weibo.com/html5cn)|#|中国www.html5cn.org官方微博| 94 | |[@developerWorks](http://weibo.com/developerworks)|#|#| 95 | 96 | 97 | #### 开发者博客 98 | 99 | 微博微信流行后，明显感觉到写博客的人还是越来越少了，下面推荐的这些开发者属于在网上比较活跃的，或者博客积累了大量优质资源的。 100 | 101 | ###### 国内开发者 102 | 103 | 国内开发者一块欢迎大家 `Fork`提交推荐，最好能推荐一些在前端界较活跃的的开发者。 104 | 105 | |ID |博客 |微博 |Github|Twitter| 公司 |关键字| 106 | |-----|-----|------|------|-----|-----|------| 107 | |阮一峰|[阮一峰博客](http://www.ruanyifeng.com/blog/)|[@ruanyf](http://weibo.com/ruanyf)|#|[@ruanyf](https://twitter.com/ruanyf)|上海金融学院国际金融学院| 教师，博客写作人，翻译人，《黑客与画家》的译者| 108 | |老赵| http://blog.zhaojie.me/|[@老赵](http://weibo.com/jeffz)|#|[#]()|摩根大通（香港）| 资深码农| 109 | |玉伯|[岁月如歌](http://lifesinger.wordpress.com/)|[@玉伯也叫射雕](http://weibo.com/lifesinger)|[@lifesinger](https://github.com/lifesinger)|[@lifesinger](https://twitter.com/lifesinger)| 支付宝|大牛| 110 | | kejun |http://hikejun.com/|[@kejunz](http://weibo.com/kejunz)|#|[@kejunz](https://github.com/kejun)| 豆瓣|前端大神| 111 | |寒冬winter|[winter-cn](http://winter-cn.cnblogs.com/)|[@寒冬winter](http://weibo.com/wintercn)|#|#|#|#| 112 | |左耳朵耗子|[酷壳](http://coolshell.cn/)|[@左耳朵耗子](http://weibo.com/haoel)|#|[@haoel](https://twitter.com/haoel)|淘宝|#| 113 | |fool2fish|#|[@fool2fish](http://weibo.com/fool2fish)|#|#|支付宝|#| 114 | |朴灵|[Html5fiy](http://html5ify.com/)|[@朴灵](http://weibo.com/shyvo)|[JacksonTian](https://github.com/JacksonTian)|#|阿里巴巴|《深入浅出Node.js》作者,大牛| 115 | |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 |大牛| 116 | |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 开发指南》作者,大牛| 117 | |郭宇|[Einmal ist keinmal](http://blog.guoyu.me/)|[@郭宇](http://weibo.com/137601206)|[@turingou](https://github.com/turingou)|[@turingou](https://twitter.com/turingou)|糗事百科,原支付宝|Node.js| 118 | |勾三股四|#|[@勾三股四](http://weibo.com/mx006)|#|#|淘宝|#| 119 | |cnberg|[冰山一角](http://cnberg.com)|[@berg](http://weibo.com/berg)|@cnberg|[@cnberg]()| 百度| 骑行| 120 | |大猫| [意淫笔记](http://bigc.at)|[@daemao](http://weibo.com/daemao)|[@Damao](https://github.com/Damao)|[@13igcat](https://twitter.com/13igcat)|腾讯 |[知乎](http://www.zhihu.com/people/13igcat)| 121 | | hzlzh |[自力博客](https://zlz.im)|[@hzlzh](http://weibo.com/hzlzh)|[@hzlzh](http://github.com/hzlzh)|[@hzlzh](http://twitter.com/hzlzh)| 腾讯|前端开发| 122 | | C7210 |beforweb.com/|[@C7210](http://weibo.com/c7210)|[@C7210](http://twittercom/hzlzh)|[@C7210](http://github.com/hzlzh)|#|UX、交互设计师、视觉与前端| 123 | | kejun |http://hikejun.com/|[#](http://weibo.com/kejun)|[#](http://twittercom/kejun)|[#](http://github.com/hzlzh)| 腾讯|前端开发| 124 | | 张鑫旭 |[张鑫旭博客](http://www.zhangxinxu.com/wordpress/)|[@张鑫旭](http://weibo.com/zhangxinxu)|[@zhangxinxu](https://github.com/zhangxinxu)|[@zhangxinxu](https://twitter.com/zhangxinxu)| 腾讯 上海 ISUX|前端开发| 125 | | lucifr |http://lucifr.com/|[@lucifr](http://weibo.com/lucifr)|[@lucifr](http://twittercom/lucifr)|[@lucifr](http://github.com/lucifr)| #|Mac,ios| 126 | | smallni |http://www.smallni.com/|[#](http://weibo.com/hzlzh)|[@Smallni](https://twitter.com/smallniding/)|[#](http://github.com/hzlzh)| 腾讯|前端开发| 127 | | TQ |http://targetkiller.net/|[@Piser-TQ](http://weibo.com/targetkiller)|[@tqtan](https://twitter.com/tqtan/)|[@targetkiller](https://github.com/targetkiller)| 腾讯 ISUX | 网页重构| 128 | |LOO2K|[LOO2K](http://loo2k.com/blog/)|[@LOO2K](http://weibo.com/loo2k)|[LOO2K](https://github.com/loo2k)|[LOO2K](https://twitter.com/loo2k/)|墨筹网|少年才俊| 129 | |qiqiboy|[qiqiboy](http://www.qiqiboy.com/)|[@qiqiboy](http://weibo.com/qiqiboy)|#|#|金山网络 UX|吐槽清理大师开发者| 130 | |foru17|[罗磊的独立博客](http://luolei.org)|[@罗罗磊磊](http://weibo.com/foru17)|[@foru17](https://github.com/foru17)|[@foru17](https://twitter.com/foru17)|金山网络 UX|打酱油的| 131 | |周爱民|[aimingoo专栏](http://blog.csdn.net/aimingoo/)|#|#|#|支付宝|JavaScript语言精髓与编程实践作者| 132 | |hax|[hax的技术部落格](http://hax.iteye.com/)|#|#|#|#|前端大牛| 133 | |三生石上|[三生石上](http://www.cnblogs.com/sanshi)|#|#|#|#|js秘密花园译者| 134 | |司徒正美|[Ruby's Louvre](http://www.cnblogs.com/rubylouvre)|#|#|#|#|前端开发| 135 | |叶小钗|[叶小钗](http://www.cnblogs.com/yexiaochai)|#|#|#|#|前端开发| 136 | |聂微东|[Darren](http://www.cnblogs.com/Darren_code/)|#|#|#|百度移动云|前端开发| 137 | |当耐特|[iamzhanglei](http://www.cnblogs.com/iamzhanglei/)|#|#|#|#|HTML5实验室作者| 138 | |教主|[_frank](http://www.cnblogs.com/_franky)|#|#|#|#|又一牛| 139 | |typeof|[typeof](http://typeof.net/)|#|#|#|#|又一牛| 140 | |Gray Zhang|[Gray Zhang](http://www.cnblogs.com/GrayZhang)|#|#|#|#|百度一牛| 141 | |李松峰|[为之漫笔](http://www.cn-cuckoo.com)|#|#|#|#|高程2等书的译者| 142 | |小鱼|[sofish](http://sofish.de/)|[@sofish](http://weibo.com/sofish)|#|#|#|百姓网一牛| 143 | |vilic|[vilic](http://vilic.info/)|#|#|#|#|年轻一牛| 144 | |彬Go|[彬Go](http://blog.bingo929.com/)|#|#|#|#|人人网一牛| 145 | |PuterJam|[PuterJam's Blog](http://www.pjhome.net)|#|#|#|#|腾讯一牛| 146 | |css森林|[cssforest](http://www.cssforest.org)|#|#|#|#|前端博客| 147 | |99css|[99css](http://www.99css.com/)|[@ytzong](http://weibo.com/ytzong)|#|#|#|腾讯一牛| 148 | |秦歌|[Kaven](http://dancewithnet.com/)|#|[@kavenyan](http://twitter.com/kavenyan)|#|#|js语言精粹译者| 149 | |linxz|[linxz](http://www.linxz.de/)|#|#|#|#|css那些事儿的作者| 150 | |米随随|[米随随](http://s5s5.me/)|#|#|#|#|腾讯ISUX 一牛| 151 | |飘飘|[飘飘](http://pufen.net/)|#|#|#|#|腾讯一牛| 152 | |Along|[Along's Blog](http://jinlong.github.io/)|[@newwave](http://weibo.com/newwave)|#|#|#|Opera 欧朋一牛| 153 | |安记|[cssha](http://www.cssha.com/)|[@hanan321](http://weibo.com/hanan321)|[hanan198501](https://github.com/hanan198501)|#|#|去哪网一牛| 154 | | 余弦 | [EVILCOS](http://evilcos.me/) | [余弦](http://weibo.com/evilcos) | [evilcos](https://github.com/evilcos) | # | [知道创宇](http://www.knownsec.com/) | 安全（黑客）、架构、团队的各种观点与分享 | # | [冯大辉](http://dbanotes.net/) | 现在就职于丁香园 (http://dxy.cn) ，担任技术团队负责人. 155 | |汤姆大叔|[汤姆大叔的博客](http://www.cnblogs.com/TomXu/)|#|#|#|#|《深入理解Bootstrap》、《JavaScript启示录》、《JavaScript设计模式》等多本前端书籍翻译作者| 156 | 157 | 158 | ####一些社区 159 | 160 | |名称 |地址 |介绍 | 161 | |-----|-----|------| 162 | |V2EX|http://v2ex.com/|小众活跃社区| 163 | |知乎|http://www.zhihu.com/|综合问答社区| 164 | |前端乱炖|http://www.html-js.com/|专业的前端知识平台| 165 | |segmentfault|http://segmentfault.com/|综合问答社区| 166 | |果壳问答|http://www.guokr.com/ask/pending/|综合问答社区| 167 | |Ruby|http://ruby-china.org/|同 V2EX 氛围类似，不局限于Ruby| 168 | |Node.js 中文社区|http://cnodejs.org/|Node.js 国内最活跃的社区| 169 | |Code Wall|https://coderwall.com/|国外技术社区| 170 | |前端乱炖|http://www.html-js.com/|国内前端技术社区| 171 | | DIV.IO | http://div.io/ | 国内前端技术社区 | 172 | 173 | 174 | ##### 企业官方博客 175 | 176 | 在开头我的 Feedly 订阅 opml 文件里比较全面。 177 | 178 | |名称 |公司 | 部门|活跃度 | 简介|微博| 179 | | ----- | ----- | ------ | ------ |-----|-----| 180 | | [ISUX 社交用户体验设计](http://isux.tencent.com/) | 腾讯 | ISUX| ★★★★☆|负责腾讯的社交网络相关产品的用户体验设计与研究。|#| 181 | | [腾讯 CDC](http://cdc.tencent.com/) | 腾讯 | CDC| ★★★★☆| 简介 |#| 182 | | [腾讯Web前端 Alloy 团队 Blog](http://www.alloyteam.com/) | 腾讯 | SNG| ★★★★☆|主要负责手机QQ、QQ互联、腾讯Q+、WebQQ项目的团队。 |[alloyteam](http://weibo.com/alloyteam)| 183 | | [TID-财付通设计中心](http://tid.tenpay.com/) | 腾讯 | TID| ★★★★☆|简介 |#| 184 | | [腾讯MXD移动互联网设计中心](http://mxd.tencent.com/) | 腾讯 | MXD| ★★★★☆|简介 |[@腾讯MXD](http://e.t.qq.com/tencent_mxd)| 185 | | [人人网FED Team](http://tid.tenpay.com/) | 人人网 | FED| ★★★★☆|简介 |#| 186 | | [微博UDC](http://udc.weibo.com/) | 新浪 | UDC| ★★★★☆|简介 |[@微博UDC设计中心](http://weibo.com/sudc)| 187 | | [新浪UED](http://ued.sina.com.cn/) | 新浪 | UED| ★★★★☆|简介 |[#](http://weibo.com/sudc)| 188 | | [网易用户体验设计中心](http://uedc.163.com/) | 网易 | UED| ★★★★☆|简介 |[#](http://weibo.com/sudc)| 189 | | [阿里巴巴（中国站）用户体验设计部博客](http://www.aliued.cn/) | 阿里巴巴 | UED| ★★★★☆|简介 |[@Alibaba-UED](http://weibo.com/aliued)| 190 | | [携程UED-携程旅行前端开发团队](http://ued.ctrip.com/blog/) | 携程网 | UED| ★★★☆☆|携程UED,携程前端开发团队,UED,Javascript,重构,ux|#| 191 | | [百度FEX](http://fex.baidu.com/) | 百度 | FEX| ★★★★☆| 百度前端团队Blog,关注前端技术，还更重视全端及全栈的能力。|#| 192 | |[淘宝UED](http://ued.taobao.org/blog/)|淘宝网|UED|★★★★☆|用户体验、交互设计、视觉设计、前端技术博客|[@淘宝UED](http://weibo.com/taobaoued)| 193 | 194 | 195 | ## 书籍 196 | 197 | |名称 | 作者 | 价格 | 出版社|简评 | 198 | | ----- | ----- | ------ |----- |------| 199 | | [Web标准设计](http://book.douban.com/subject/3327829/) | 刘杰（嗷嗷） | RMB 60.00 | 清华大学出版社 |基础入门| 200 | | [大巧不工 : Web前端设计修炼之道](http://book.douban.com/subject/4914146/) | 赖定清 / 林坚 | RMB 59.00 | 机械工业出版社|适合入门，了解前端全局| 201 | |[高性能网站建设指南:前端工程师技能精髓](http://book.douban.com/subject/3132277/)|Steve Souders |RMB 35.00|电子工业出版社|能从原理层理解各种方法| 202 | |[高性能网站建设指南:Web开发者性能优化最佳实践](http://book.douban.com/subject/4719162/)|Steve Souders |RMB 49.80|电子工业出版社|#| 203 | |[Web站点优化 : Web站点优化](http://book.douban.com/subject/4124141/)|金 |RMB 55.00|#|#| 204 | |[Node.js开发指南](http://book.douban.com/subject/10789820/)| 郭家寶 |RMB 45.00|#|作者很牛| 205 | |[JavaScript高级程序设计](http://book.douban.com/subject/10546125/)| Nicholas C. Zakas |RMB 99.00|人民邮电出版社|适合没事就翻翻| 206 | |[JavaScript权威指南](http://book.douban.com/subject/2228378/)| 弗拉纳根 |RMB 109.00|机械工业出版社|犀牛书| 207 | |[JavaScript语言精粹](http://book.douban.com/subject/3590768/)| Douglas Crockford |RMB 35.00| 电子工业出版社|绝对经典，相信看完后，对Javascript这门语言有了重新认识，原来这个语言是这么的美丽！| 208 | 209 | ##捐赠目录 210 | - [【张鑫旭】的个人博客](http://www.zhangxinxu.com/wordpress/2014/12/css3-animation-dotting-loading/) 211 | - [【艾伦】- 博客园 - jQuery源码分析系列](http://www.cnblogs.com/aaronjs/p/3279314.html) 212 | - [【大漠】 W3CPLUS是一个前端爱好者的家园](http://www.w3cplus.com/w3cplus-2014.html) 213 | - [【司徒正美】 - 博客园](http://www.cnblogs.com/rubylouvre/archive/2009/09/15/1566722.html) 214 | - [【Hemin】jQuery API 中文手册](http://hemin.cn/jq/) 215 | - [【鸟哥】Laruence](http://weibo.com/p/1001603794538257899132) 216 | - [【Highcharts】Highcharts中文赞助](http://www.hcharts.cn/about/donate.php) 217 | - [【芒果云】 在线资源管理器](http://wwhttp://kalcaddle.com/about.html) 218 | 219 | ##[大漠](http://www.w3cplus.com)分享 220 | 221 | ###性能优化优秀教程 222 | 223 | - [5173首页前端性能优化实践](http://ued.5173.com/?p=1731) 224 | - [给网页设计师和前端开发者看的前端性能优化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers) 225 | - [复杂应用的 CSS 性能分析和优化建议](http://www.orzpoint.com/profiling-css-and-optimization-notes/) 226 | - [张鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/) 227 | - [前端性能监控总结](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html) 228 | - [网站性能优化之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/) 229 | - [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) 230 | - [前端技术：网站性能优化之CSS无图片技术](http://my.eoe.cn/tuwandou/archive/4544.html) 231 | - [浏览器的加载与页面性能优化](http://www.baiduux.com/blog/2011/02/15/browser-loading/) 232 | - [页面加载中的图片性能优化](http://www.w3ctech.com/p/1503) 233 | - [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD) 234 | - [html优化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/) 235 | - [99css——性能](http://www.99css.com/archives/tag/%E6%80%A7%E8%83%BD) 236 | - [Yslow——性能优化](http://www.yslow.net/category.php?cid=20) 237 | - [YSLOW中文介绍](http://www.cnblogs.com/yslow/) 238 | - [转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化](http://www.360ito.com/article/40.html) 239 | - [Yahoo!团队实践分享：网站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml) 240 | - [网站性能优化指南：什么使我们的网站变慢？](http://blog.jiasule.com/i/153) 241 | - [网站性能优化实践，减少加载时间，提高用户体验](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html) 242 | - [浅谈网站性能优化 前端篇](http://www.umtry.com/archives/747.html) 243 | - [前端重构实践之如何对网站性能优化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html) 244 | - [前端性能优化：使用媒体查询加载指定大小的背景图片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/) 245 | - [网站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html) 246 | - [加载，不只是少一点点](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml) 247 | - [前端性能的测试与优化](http://mzhou.me/article/95310/) 248 | - [分享网页加载速度优化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/) 249 | - [页面加载中的图片性能优化](http://www.f2es.com/images-bytes-opt/) 250 | - [web前端优化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html) 251 | - [网站性能优化工具大全](http://www.qianduan.net/website-performance-optimization-tool.html) 252 | - [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/) 253 | - [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/) 254 | - [由12306谈谈网站前端性能和后端性能优化](http://coolshell.cn/articles/6470.html) 255 | - [AlloyTeam——前端优化](http://www.alloyteam.com/category/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/) 256 | - [毫秒必争，前端网页性能最佳实践](http://www.cnblogs.com/developersupport/p/3248695.html) 257 | - [网站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html) 258 | - [前端工程与性能优化（上）：静态资源版本更新与缓存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1) 259 | - [前端工程与性能优化（下）：静态资源管理与模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2) 260 | - [HTTPS连接的前几毫秒发生了什么](http://blog.jobbole.com/48369/) 261 | - [Yslow](http://uicss.cn/yslow/#more-12319) 262 | - [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/) 263 | - [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/) 264 | - [YUISlide,针对移动设备的动画性能优化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html) 265 | - [Improving Site Performance](http://joelglovier.com/improving-site-performance/) 266 | - [让网站提速的最佳前端实践](http://blog.segmentfault.com/laopopo/1190000000367899) 267 | - [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/) 268 | - [Need for Speed – How to Improve your Website Performance](http://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/) 269 | 270 | ======= 271 | 272 | ####线上的一些翻译版好书 273 | 274 | |书名|地址|作者|译者|介绍| 275 | |----|----|----|----|----| 276 | |JavaScript秘密花园|http://bonsaiden.github.io/JavaScript-Garden/zh/|伊沃·韦特泽尔&张易江|[三生石上](http://sanshi.me/)|完整书籍，界面美观，有详细demo| 277 | | Material Design 中文版 | http://design.1sters.com/ | Google设计手册 | 协同翻译 | Google I/O 2014 发布的 Material Design 官方手册的中文翻译 | 278 | |[JavaScript DOM编程艺术](http://book.douban.com/subject/6038371/)|Jeremy Keith /Jeffrey Sambells|RMB 49.00|人民邮电出版社|适合Javascript入门看| 279 | |[深入浅出node.js](http://book.douban.com/subject/25768396/)|朴灵|RMB 69.00|人民邮电出版社|一本从前端通往全端的好书| 280 | |[CSS开发王](http://book.douban.com/subject/3137282/)|张亚飞|RMB 49.00|电子工业出版社|适合有一定基础后CSS进阶用| 281 | 282 | ##关于 283 | ====== 284 | 285 | 本 repo 会 不断更新，感谢推荐和分享新资源的朋友。 286 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /img/front-end-chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LittlewhiteChen/Front-end-collect/fb33e38df2d726968a09e57dd4a3a3a90697b15d/img/front-end-chart.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 |

18 | Front-end-collect Chart 19 |

Follow me on Github hjzheng

20 |

21 | 22 |
23 |
24 | 27 | 30 | 33 | 36 |
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 | ]); -------------------------------------------------------------------------------- /qq.md: -------------------------------------------------------------------------------- 1 | # QQ交流群规 2 | [在线地址](http://t.cn/Rw2qmAS) `http://t.cn/Rw2qmAS` 3 | 4 | 这是一份公共的QQ交流规则，供各群主引用。规则会不断的修改调整，希望得到各个行业群主的支持。 5 | 6 | --- 7 | 8 | 9 | ###前言 10 | 1. 宗旨：高效，高质量的交流，禁止无意义的闲扯，话题内容尽量保持在技术与职业相关范围内。原则上：白天上班时间禁止闲聊，业余时间话题可以稍为宽松。 11 | 2. 随着群人数越来越多，为了使群的价值能够保持技术的高质量输送或新鲜度，也为了使新人能够快速的溶入这个团队，特编写此约定，希望大伙能够积极遵守或推进，谢谢各位的支持或厚爱。此群规是原来 12 | 3. 此群规是待运行版，公布出之后默认是大伙已经阅读并认可通过，如有违反，可能采取相应的措施。我们的目的侧重于引导，并不是把谁要T出去，我们希望自此群规出台之后不要有一个人是被T出去的。 13 | 4. 此群规也是引导大于惩罚，我们是前端相关从业人士，注重用户感知或行为约定，所以引导为辅，自觉为主。另外氛围还是需要大伙共同参与维护，我们鄙视每一个不尊重时间或浪费青春的人，我们希望在激情岁月里边能够留下成长的痕迹，我们希望这份共同的回忆能够N年后还能念念不忘或值得回忆。今天因为你在此群与各高手交流而感到自豪，明天此群因为有你的存在而感到骄傲，后天因为我们回忆中有你的身影而感到难忘。 14 | 15 | ###一. 如何提问: 16 | 1. 提问请提供重现问题场景的demo文件或在线url地址。(必须是完整的静态资源包，换个环境之后能够完整重现所说bug，如果团队对代码有保密要求，请找其它解决办法，不建议继续提问)。 17 | 2. 文字描述不清的bug，建议发文件后用截图示意，明确表明某处某问题。 18 | 3. 没有图片的代码建议发： 19 | - [Runjs](http://runjs.cn) 20 | - [Jsbin](http://jsbin.com) 21 | - [Jsbin 的用法](http://w3cshare.com/jsbin-editor/) 22 | 4. 国内免费云引擎 23 | - [Sina云](http://sae.sina.com.cn/) 24 | 优点：不需要手工发布，只需三级域名就可以访问，支持语言：php,python,java， 25 | 缺点：需要身份证验证获取免费云豆 26 | 版本控制工具：svn 27 | - [京东云](http://jae.jd.com/) 28 | 优点：不需要身份验证，支持：java,php,nodejs,python,ruby 29 | 缺点：需要在控制台手动发布才能在线上预览 30 | 版本控制工具：git 31 | - [github](http://github.com) 32 | 优点：注册即有，方便 33 | 缺点：只支持静态 34 | 版本控制工具：git 35 | 36 | ###二. 禁问: 37 | 38 | - 早上问早，晚上道晚安。聊天起于问早，止于呵呵。 39 | - 有没有人在？ 40 | - 谁能帮我解决一个问题？ 41 | - 有没有jQuery高手在等？ 42 | 43 | ###三. 禁发: 44 | 45 | - 广告，求职，推广，八卦。 46 | - 尽量不要发无意义的大图片，建议发qq提供的默认的等于行距表情，约束这个目的在于： 47 | 1. 人脑对图片的接受速度明显快于文字，过多的无意义图片会分散讨论的主题。 48 | 2. 不方便回查，或聊天记录中寻找有价值的消息。 49 | 3. 另外这是一个信息爆炸时代，人脑的接收是有上限的，过多的垃圾信息会占用有限的带宽。 50 | - 尽量不要在群邮件中无意义回复，每次一个人回复是一次消息的广播，每个人都会收到，会产生信息垃圾。 51 | 52 | ###四. 警告: 53 | 54 | - 字体在10-12号之间，字体颜色不建议特别刺眼的颜色。 55 | - 禁止闲聊，或无意义回复。 56 | - 提问之前最好百度，google过，着重培养的是一种能力或方法，不是一个结果。 57 | - 不建议直接索要代码，可以追问技术实现的思路或方法。 58 | 59 | ###五. 综合类资源: 60 | 61 | - [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html) 62 | - [前端知识结构](https://github.com/JacksonTian/fks) 63 | - [免费的编程中文书籍索引](https://github.com/justjavac/free-programming-books-zh_CN) 64 | - [前端书籍](https://github.com/dypsilon/frontend-dev-bookmarks) 65 | 66 | ###六. API: 67 | 68 | ####1. jQuery 69 | 70 | * [jQuery API 中文文档](http://jquery.bootcss.com/) 71 | * [hemin 在线版](http://hemin.cn/jq/) 72 | * [css88 jq api](http://www.css88.com/jqapi-1.9/on/) 73 | * [css88 jqui api](http://www.css88.com/jquery-ui-api/) 74 | * [devdocs](http://devdocs.io/) 75 | * [jqschool](http://api.jq-school.com/) 76 | * [学习jquery](http://learn.jquery.com/) 77 | 78 | ####2. Ecmascript 79 | 80 | - [阮一峰 es6](http://es6.ruanyifeng.com/) 81 | - [阮一峰 Javascript](http://javascript.ruanyifeng.com/) 82 | - [ECMA-262，第 5 版](http://yanhaijing.com/es5/) 83 | - [es5](http://es5.github.io/) 84 | 85 | ####3. Js template 86 | 87 | - [artTemplate](https://github.com/aui/artTemplate) 88 | - [tomdjs](https://github.com/aui/tmodjs/blob/master/README.md) 89 | - [淘宝模板juicer模板](http://juicer.name/docs/docs_zh_cn.html) 90 | - [Fxtpl v1.0 繁星前端模板引擎](http://koen301.github.io/fxtpl/) 91 | - [laytpl](http://sentsin.com/layui/laytpl/) 92 | 93 | ####4. 弹出层 94 | 95 | - [artDialog 最新版](https://github.com/aui/artDialog) 96 | - [artDialog 文档](http://aui.github.io/artDialog/doc/index.html) 97 | - [google code 下载地址](https://code.google.com/p/artdialog/downloads/list) 98 | - [贤心弹出层](http://sentsin.com/jquery/layer/) 99 | 100 | ####5. Nodejs 101 | 102 | - [nodejs 篇幅比较巨大](http://liuqing.pw/) 103 | - [篇幅比较少](http://rainweb.cn/article/category/Nodejs) 104 | - [node express 入门教程](http://www.w3cfuns.com/article-5598538-1-1.html) 105 | - [nodejs定时任务](http://my.oschina.net/u/568264/blog/193773) 106 | - [一个nodejs博客](http://60sky.com/) 107 | - [【NodeJS 学习笔记04】新闻发布系统](http://www.cnblogs.com/yexiaochai/p/3536547.html) 108 | - [过年7天乐，学nodejs 也快乐](http://www.cnblogs.com/qqloving/p/3541099.html) 109 | - [七天学会NodeJS](https://github.com/nqdeng/7-days-nodejs) 110 | - [Nodejs学习笔记（二）--- 事件模块](http://www.cnblogs.com/zhongweiv/p/nodejs_events.html) 111 | - [nodejs入门](http://www.cnblogs.com/liusuqi/p/3735491.html) 112 | - [angularjs nodejs](https://github.com/zensh/jsgen) 113 | - [从零开始nodejs系列文章](http://blog.fens.me/series-nodejs/) 114 | - [理解nodejs](http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb) 115 | - [nodejs事件轮询](http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/) 116 | - [node入门](http://www.nodebeginner.org/index-zh-cn.html) 117 | - [nodejs cms](http://ourjs.com/detail/53e1f281c5910a9806000001) 118 | 119 | ####6. Angularjs 120 | 121 | - [angularjs中文社区](http://angularjs.cn/) 122 | - [Angularjs源码学习](http://www.cnblogs.com/xuwenmin888/p/3739096.html) 123 | - [Angularjs源码学习](http://www.ifeenan.com/?c=AngularJS) 124 | - [angular对bootstrap的封装](http://angular-ui.github.io/bootstrap/) 125 | - [angularjs + nodejs](http://cnodejs.org/topic/51404e0f069911196d2e3923) 126 | - [吕大豹 Angularjs](http://www.cnblogs.com/lvdabao/tag/AngularJs/) 127 | - [AngularJS 最佳实践](http://www.infoq.com/cn/news/2013/02/angular-web-app) 128 | - [Angular的一些扩展指令](http://www.lovelucy.info/angularjs-best-practices.html) 129 | - [Angular数据绑定原理](https://github.com/Pasvaz/bindonce) 130 | - [一些扩展Angular UI组件](https://github.com/angular-ui/) 131 | - [Ember和AngularJS的性能测试](http://voidcanvas.com/emberjs-vs-angularjs-performance-testing/) 132 | - [带你走近AngularJS - 基本功能介绍](http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html) 133 | - [Angularjs开发指南](http://angular.duapp.com/docs/guide) 134 | - [Angularjs学习](http://www.cnblogs.com/amosli/p/3710648.html) 135 | - [不要带着jQuery的思维去学习AngularJS](http://www.rainweb.cn/article/angularjs-jquery.html) 136 | - [angularjs 学习笔记](http://wangjiatao.diandian.com/?tag=angularjs) 137 | - [angularjs 开发指南](http://www.angularjs.cn/T008) 138 | - [angularjs 英文资料](https://github.com/jmcunningham/AngularJS-Learning) 139 | - [angular bootstrap](http://angular-ui.github.io/bootstrap/) 140 | - [angular jq mobile](https://github.com/opitzconsulting/jquery-mobile-angular-adapter) 141 | - [angular ui](http://mgcrea.github.io/angular-strap/) 142 | - [整合jQuery Mobile+AngularJS经验谈](http://www.tuicool.com/articles/7ZZVr2) 143 | - [有jQuery背景，该如何用AngularJS编程思想](http://blog.jobbole.com/46589/ ) 144 | 145 | ####7. 移动端API 146 | 147 | - [99移动端知识集合](https://github.com/jtyjty99999/mobileTech) 148 | - [司徒正美移动知识集合](https://github.com/RubyLouvre/mobileTech) 149 | - [移动端前端开发知识库](https://github.com/AlloyTeam/Mars) 150 | - [zepto 1.0 中文手册](http://mweb.baidu.com/zeptoapi/) 151 | - [zepto 1.0 中文手册](http://www.html-5.cn/Manual/Zepto/) 152 | - [zepto 1.1.2](http://www.css88.com/doc/zeptojs_api/) 153 | - [zepto 中文注释](http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html) 154 | - [jqmobile 手册](http://app-framework-software.intel.com/api.php) 155 | - [移动浏览器开发集合](https://github.com/maxzhang/maxzhang.github.com/issues) 156 | - [js移动调试](http://thx.github.io/mobile/debugging-in-mobile/) 157 | - [移动开发大杂烩](https://github.com/hoosin/mobile-web-favorites) 158 | 159 | ####8. 图表类 160 | 161 | - [Highcharts 中文API](http://www.hcharts.cn/api/index.php) 162 | - [Highcharts 英文API](http://api.highcharts.com/highcharts) 163 | - [ECharts 百度的图表软件](http://echarts.baidu.com/ ) 164 | - [高德地图](http://lbs.amap.com/api/) 165 | 166 | ####9. Requriejs 167 | 168 | - [Javascript模块化编程（一）：模块的写法 ](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html) 169 | - [Javascript模块化编程（二）：AMD规范](http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html) 170 | - [Javascript模块化编程（三）：require.js的用法](http://www.ruanyifeng.com/blog/2012/11/require_js.html) 171 | - [RequireJS入门（一）](http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html) 172 | - [RequireJS入门（二）](http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html) 173 | - [RequireJS进阶（三）](http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html) 174 | - [requrie源码学习](http://www.cnblogs.com/yexiaochai/p/3632580.html ) 175 | - [requrie 入门指南](http://www.oschina.net/translate/getting-started-with-the-requirejs-library ) 176 | - [requrieJS 学习笔记](http://www.cnblogs.com/yexiaochai/p/3214926.html ) 177 | - [requriejs 其一 ](http://cyj.me/why-seajs/requirejs/ ) 178 | - [require backbone结合](http://www.cnblogs.com/yexiaochai/p/3221081.html ) 179 | 180 | ####10. Seajs 181 | 182 | - [seajs](http://seajs.org/) 183 | - [seajs 中文手册](http://cyj.me/why-seajs/zh/) 184 | 185 | ####11. less,sass 186 | 187 | - [less](http://less.bootcss.com/) 188 | - [sass](http://www.w3cplus.com/sassguide/) 189 | - [sass中国](http://www.cn-sass.com/) 190 | 191 | ###七. 开发规范 192 | 193 | - [前端编码规范之js](http://yuwenhui.github.io/) 194 | - [前端编码规范之js](http://www.cnblogs.com/hustskyking/p/javascript-spec.html) 195 | - [最流行的PHP 代码规范](http://segmentfault.com/a/1190000000443795) 196 | - [最流行的PHP 代码规范](https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md) 197 | - [AMD与CMD规范的区别](http://www.zhihu.com/question/20351507) 198 | - [AMD与CMD规范的区别](http://www.cnblogs.com/tugenhua0707/p/3507957.html) 199 | - [KISSY 源码规范](http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html) 200 | - [bt编码规范](http://codeguide.bootcss.com/) 201 | - [规范加强版](https://github.com/Suxiaogang/Code_Guide) 202 | - [前端代码规范 及 最佳实践](http://blog.jobbole.com/79075/) 203 | - [百度前端规范](http://coderlmn.github.io/code-standards/) 204 | - [百度前端规范](http://isobar-idev.github.io/code-standards/) 205 | - [百度前端规范](http://zhuanlan.zhihu.com/fuyun/19884834) 206 | - [【敏捷开发】Android团队开发规范](http://www.cnblogs.com/lcw/p/3619181.html) --------------------------------------------------------------------------------