个人分享--web前端学习资源分享

大约 39 分钟

个人分享--web前端学习资源分享

1.前言

时间过得真快,转眼间现在是2016年最后一个星期,而今天也是圣诞节,过几天也是元旦了。每到年底,大家都习惯总结和分享,我也不例外。但是经历,我之前已经发过了,那么我今天就分享吧!把我接触的一些资源分享给大家,算是送给大家的双旦礼物吧!希望大家能够从中获取自己所需的资源。从我接触前端的开始,到发稿时间截止的这段时间我看过很多的博客,开源项目也了解过一些,质量有参差不齐(甚至还出现过广告文,鸡汤文),但下面的推荐的博客,文章,项目或者其它资源都是我接触过的。不敢说资源最好,最全,适合每一个人,但是内容质量上让我满意的。可能有些资源我未必看完,看懂,看细。但我觉得是可以帮到大家的,能让大家提升技术水平的。希望能给大家起到一个引导,指路或者解惑的作用。如果大家有什么好的资源,也欢迎分享!

有一些资源链接,在后面我会加上括号的注释!比如: html5推广open in new window(介绍html5开发的创意广告) ,加上注释的原因可能有以下几点: 1.资源很不错,干货比较多,提醒大家看! 2.资源是一个系列的其中一个资源。比如一个系列有20多篇文章,每一篇都有用,我不可能把20多篇链接都贴上,所以一般我贴这个系列的第一条,提醒大家不要忘记读完所在系列! 3.资源里面的部分内容我个人觉得很有用,有部分我觉得没什么用!提醒大家挑着看,按需求看! 4.资源的标题可能会有些小误导,或者资源的其它注意事项,我加以自己的解释和备注。

2.推荐文章(教程)

html(5)

css(3)

sass

javascript

javascript(es6,es7,es8)

typeScript

官网文档open in new window(ts的一个官方文档,写得较好)

jquery

vue

webpack

(下面的文章,有些是webpack1.x和2.x的,考虑到现在已经更新到3.x了,大家看时候要注意区别) webpack中文网open in new windowwebpack官方文档open in new windowwebpack使用优化(基本篇)open in new windowwebpack常用功能介绍open in new windowwebpack 3 零基础入门教程 #1 - 介绍open in new window(看了第一篇,不要忘记下面的,这个系列值得一看) 开发工具心得:如何 10 倍提高你的 Webpack 构建效率open in new windowWebpack 大法之 Code Splittingopen in new windowwebpack多页应用架构系列(一):一步一步解决架构痛点open in new window(看了第一篇不要忘记剩下的,这个系列的文章不错)

parcel

宣布 Parcel:一个快速,零配置的 Web 应用打包工具open in new window前端构建工具吐槽与parcel极简入门open in new window折腾记:Hello Parcelopen in new window从 webpack 到全面拥抱 Parcel #1 探索 Parcelopen in new window(这篇应该会用后续内容,大家可以跟着学)

gulp

gulp详细入门教程open in new window前端构建工具gulp的使用介绍及技巧open in new windowgulp入门指南open in new window

react

(react我刚接触不久,暂时看过的网站就这两个) React中国open in new windowReact 技术栈系列教程open in new windowReact组件规范open in new windowopen in new window在 2017 年学习 React + Redux 的一些建议(中篇)open in new window在 2017 年学习 React + Redux 的一些建议(下篇)open in new window学习 React.js 比你想象的要简单open in new window

git

猴子都能懂的GIT入门open in new windowGit教程 - 廖雪峰的官方网站open in new window

browsersync

(Browsersync中文网 - 省时的浏览器同步测试工具)open in new window

node.js

使用npm - NodeSource的绝对入门指南open in new windowNode.js和npm - NodeSource中的Package.json的基础知识open in new window配置.npmrc以获取最佳Node.js环境open in new window

Markdown

认识与入门 Markdownopen in new window

yoeman

教你从零开始搭建一款前端脚手架工具open in new window

lodash

这是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。open in new window4.17.4版本open in new window

Fiddler

官网open in new windowFiddler教程open in new window

调试

web调试优化-chrome开发者工具不完全指南open in new window分享几个日常调试方法让js调试更简单open in new window用 Chrome 调试你的 JavaScriptopen in new windowJavaScript 中 console 的用法open in new window(看了这篇和上面一篇文章,你可能会感觉以前根本不会使用console) Chrome开发者工具系列open in new windowWeb 的现状:网页性能提升指南open in new window移动 Web 开发问题和优化小结open in new window前端优化不完全指南open in new window

细节,优化

浅谈移动前端的最佳实践open in new window前端优化带来的思考,浅谈前端工程化open in new window前端优化实践总结open in new window减少前端代码耦合open in new window判断单、多张图片加载完成open in new window终端代码重复率检测open in new window【组件化开发】前端进阶篇之如何编写可维护可升级的代码open in new window作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的open in new window【单页应用】我们该如何处理框架弹出层层级关系?open in new window剥离模板代码加速Web页面加载open in new window移动前端系列——移动页面性能优化open in new window [聊一聊系列]聊一聊百度移动端首页前端速度那些事儿open in new window

其它

socket.io 中文手册 socket.io 中文文档open in new windowWebSocket 与 Socket.IOopen in new windowVR进化论|教你搭建通用的WebVR工程open in new windowRxJS 入门open in new windowdeeplearn.js:浏览器端机器智能框架open in new window

分享和技能清单

鸡年大吉!继续前行的前端周刊(第十五期)open in new window(虽然差不多狗年了,但是里面的内容并没有过时) 前端收藏夹open in new window(和上面那篇一样,都是别人的总结的,干货不少,但是‘前端收藏夹’,可能是资源太多了,给我的感觉也有点一股脑放资源的感觉,只要是资源,都放进去,少部分资源质量有点低,建议大家带参考思想看) 移动web干货收藏夹open in new windowawesomesopen in new window(前端一个巨大的资源库,里面的资源应有尽有) 知识库open in new window(拥有很多语言,框架,库的知识图谱,值得一看!能让你了解哪个语言,框架,库所包含的知识点,每一个知识点的详情讲解,也有栗子和文章,如:javascript知识图谱open in new windowhtml5知识图谱open in new windowreact知识图谱open in new window前端资源分享open in new window送给前端的你,推荐几篇前端汇总文章。 - 知乎专栏open in new window前端面试问题合集(Front-end-Developer-Interview-Questions)open in new windowgithub上值得关注的前端项目open in new window(trigkit4大神审理的一份清单,里面推荐的项目很多,大家可以按需所需) 前端那点事儿(书列)open in new windowFPB 2.0:免费的计算机编程类中文书籍 2.0open in new window(迷渡大神分享的书籍,各类图书都有,也有前端的,大家可以挑着看) 腾讯 Web 工程师的前端书单open in new window前端开发者手册open in new window印记中文-手册open in new window(各种开发文档,webpack,vue,sass等) (以下几个链接,不是文章,也不算问题吧,都是segmentfault官方举行的比赛,分享或者讨论的内容,在上面看大神的分享,代码,绝对有收获) 1024 HackGame 第四关面壁人这些题目是怎么想出来的?open in new window把 SegmentFault 全部带回家 —— 码文章,送周边open in new window官方送书活动第二弹 —— 增长姿势之SF喊你来谈开发open in new window官方活动,深入浅出之SF喊你来谈开发!一起来分享一下你的开发知识?open in new window官方30行js比赛:30行js你能做出什么?open in new window【官方比赛】社区 1111 秀代码,让你来秀让你飞!open in new window

3.推荐博客

团队博客

淘宝前端团队fedopen in new window阿里巴巴open in new window百度前端团队open in new window360奇舞团open in new window奇舞团视频教程open in new window京东设计体验部-凹凸实验室open in new window腾讯网前端研发中心open in new window腾讯alloyteamopen in new window腾讯前端IMWEB团队open in new window腾讯前端IMWEB团队-githubopen in new window腾讯游戏open in new window新浪UEDopen in new window去哪儿网移动架构组open in new window大前端(饿了么)open in new window搜车大无线团队博客open in new window (上面的团队博客,值得关注,博文内容质量很高,但是就是更新不频繁,下面的更新会比较多,质量也不错) 极乐科技open in new windowIMWeb前端社区open in new window爱前端-知乎专栏open in new window前端杂货铺open in new window前端外刊评论open in new window前端解忧杂货铺open in new windowDDFE 技术周刊open in new window前端之巅open in new windowFed汇总open in new window

大牛博客

十年踪迹open in new window张鑫旭open in new window阮一峰open in new window叶小钗open in new window司徒正美博客open in new window汤姆大叔open in new window廖雪峰open in new window勾三股四open in new windowchokCoCoopen in new windowchokCoCo-githubopen in new windowCherry's Blogopen in new window雅X共赏的前端技术博客-前端路上open in new window

4.推荐书籍

我看过的书比较杂七杂八,与前端有关的,推荐的就是下面这些了!下面的书,我都看过,区别就在于有些我是整本都看完了(有些也来回看过几次),有些粗略的看了其中一部分(有些就看了几页)!

关于看书的建议,下面的书,大家可以根据自己的需求兴趣去挑着看。一本书,不要看完就可以了,要弄懂书中的内容。有些书值得大家来回看几遍的!

关于书的资源,下面的推荐的书(我看的是电子书)我都是从网上下载的。为避免侵权,我在这里就不放资源的链接了!大家自行购买纸质书或者电子书,或者到网上找资源!

《JavaScript高级程序设计》:(红皮书或者红宝石书)可以作为入门书籍,但同时也是高级书籍,可以快速吸收基础,等到提升再回来重新看 《JavaScript权威指南》:(犀牛书)可以说是js最经典的一本书了,新手看着可能会有点吃力,但是对于学js的人来说,必备的,不理解的地方就去查阅一下,很有帮助。 《数据结构与算法JavaScript描述》(刺猬书) 《编写可维护的JavaScript》(乌龟书) 《JavaScript DOM编程艺术 第2版》 《JavaScript语言精粹》(蝴蝶书):经典的书,也是普及JavaScript的开发思维的一本书。 《javascript框架设计》(第二版)-司徒正美 《JavaScript设计模式 》-张榕铭(百度员工写的一本书,案例生动易懂,涉及的设计模式比较全) 《JavaScript设计模式与开发实践》-曾琛(腾讯员工写的一本书,讲了js里面更加常用的14个设计模式) 《单页Web应用 JavaScript从前端到后端》 《ECMAScript 6 入门open in new window》可以作为es6新特性文档的一本书,而且这本书开源了(ECMAScript 6 入门),直接看就好!需要的也可以购买!

《HTML5移动Web开发实战》 《HTML5移动Web开发指南》 《HTML5 Canvas核心技术》:对于感受canvas的魅力,使用,动画的实现,都非常有帮助。 《html5与css3权威指南 第三版》-陆凌牛,这本书貌似有同名的,注意作者,另外该书分上册和下册的。我当时看的是第二版,现在已经出了第三版就推荐第三版了。 《锋利的jquery》:我学jquery就是看这本书,这本书给我身边的同行印象不是很好,但是我感觉不错,而且我学jquery就看了这一本书,就推荐这本了! 《了不起的Node js 将JavaScript进行到底》 《css揭秘》:看了这本书,我再也不敢说自己会css了!里面很多都是你想不到的!

5.推荐社区

我推荐社区虽然有这么多个,但是我注册账号并且活跃的只有两三个,其它的社区基本都是我在学习的时候偶然接触到的,并且觉得不错的,所以也推荐下。至于大家想活跃哪几个社区,就看大家的选择了。如果大家有什么好的社区资源,也不妨推荐下!

githubopen in new window:这个起初我经常在上面找资源。但是没注册账号,但是后来被老大催着注册,就去了。在里面可以阅读别人的代码,向大家学习! 稀土掘金open in new window:我现在活跃的一个社区,是写文章的一个很好的地方! segmentfaultopen in new window:我现在活跃的一个社区,主打问答,也有文章和讲堂,质量也很不错! 知乎open in new window:虽然不是单纯的IT社区,但是里面有很多大牛和高质量的专栏! stackoverflowopen in new window:一个问答社区,基本上各种问题都能在上面获得解答 w3cplusopen in new window:一个前端学习的网站,里面的文章质量都挺不错的,特别是关于CSS(3)的 前端网open in new window前端乱炖open in new window:一个前端文章分享的社区,有很多优秀文章 开发者头条open in new window前端周刊open in new windowHTML5梦工场open in new window毕业僧open in new window慕课网open in new window(貌似现在很多视频收费了,以前我看的时候,基本都是免费的) 汇智网open in new window

6.公众号

前端大全

img

segmentfault

img

前端之巅

img

前端早读课

img

W3cplus

img

稀土圈

img

(以上图片来源网络)

7.推荐关注项目

github上的项目

vueopen in new windowreactopen in new window(我只接触过几次react,使用起来还不错,现在也正在学习) gulpopen in new windowparcelopen in new windowwebpackopen in new windowd3open in new windowchartopen in new window(和d3一样,属于数据可视化方面,体验过。但是在项目上没用过,感觉功能强大,就推荐下) element-uiopen in new window(基于vue2.x开发的一个组件库,一般用于后台管理系统开发,现在我们公司开发的后台管理就是用这个) muse-uiopen in new window(同样是基于vue的组件库,ui非常的漂亮) 一起学 Node.jsopen in new window(这个其实应该是node.js教程) AlloyTeam移动端手势解决方案open in new windowfrontend-dev-bookmarksopen in new window(前端各方面的学习清单) 免费的编程中文书籍open in new window(中文分享书籍,不止前端,各方面都有,大家按需查看) animate.cssopen in new windowhover.cssopen in new windowmuse-uiopen in new window(基于vue2.0的一个UI库,样式漂亮,种类全) CSS3 实现各类3D效果的博客open in new window(和下面三个连接同属一个作者,这个大牛的作品不错,效果酷炫,虽然star数量与其它几个推荐项目没法比,但是很值得推荐) chokcoco/boomJSopen in new windowchokcoco/magicCssopen in new windowchokcoco/iCSSopen in new windowhandtouchopen in new windowawesome-vueopen in new windowElectronopen in new windowvue-skeleton-webpack-pluginopen in new window梁少峰的个人博客open in new window(里面的文章质量也不错,各种都有,js,jquery,vue,react,node.js等) RxJsopen in new windowdeeplearnopen in new window(谷歌出版,一个关于人工智能深度学习的框架,有兴趣可以看,我看了一会,没看懂)

(下面这两个是我自己的开发的项目,虽然跟其他项目比较欠缺火候,但是还不至于用不了或者拿不出手的地步,也算是我的一个小广告吧!(●'◡'●)) ec-doopen in new window(封装了日常开发常用的javascript实例,实例为日常开发常用的小实例,包括数组去重,打乱数组,字母大小写转换,cookie操作的封装等。) ec-cssopen in new window(基于css3开发的代码库,包括日常使用的hover过渡效果,动画效果,以及预设动画)

其它推荐项目

腾讯css3 ui库open in new windowNEC : 更好的CSS样式解决方案open in new window(网易的一个css3解决方案,但是貌似挺旧了,不维护了,但是里面的案例大家可以参考,绝对有收获)

8.综合项目教程(学习实录)

使用node.js + socket.io + redis实现基本的聊天室场景open in new window前端开发,从草根到英雄(第一部分)open in new window前端开发,从草根到英雄(第二部分)open in new window我的前端进阶之路open in new window(看着标题以为是杂谈,实际上感觉是一篇总结性文章,大家可以看下) 为你的移动页面寻找一丝新意——手机互动网页项目总结(上)open in new window为你的移动页面寻找一丝新意——手机互动网页项目总结(下)open in new window前端开发指南2017open in new window【实战HTML5与CSS3 第一篇】初探水深,美丽的导航,绚丽的图片爆炸!!open in new window(看完别忘记下面的,是叶小钗大神仿智能社官网的实战) 基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件.open in new window发现最好的你-设计中如何打造最合适的组件open in new windowwebpack+vue项目实战(一,搭建运行环境和相关配置)open in new window(我自己的文章,关于使用vue+webpack开发一个单页应用,一个后台管理系统的开发搭建,这个系列一共有五篇文章)

9.开发杂谈

web前端--10个妨碍进步的学习方式open in new window前端入行两年--教会了我这些道理open in new window关于IT培训机构的个人看法open in new windowOpenDoc - 前端简历评级标准open in new window(美团出的一份简历评级,可以适当参考下,对比下自己的实力和美团评级。当然有兴趣的也可以去面试) 前端代码规范及最佳实践open in new windowVue.js 很好,但是比 Angular 或 React 更好吗?open in new window聊聊技术选型 - Angular2 vs Vue2open in new window写给前端工程师看的,移动应用选型指南open in new window网站架构-从无到有open in new window前端架构那些事儿open in new window技术大牛养成指南,一篇不鸡汤的成功学实践open in new window6 个值得好好学习的 JavaScript 框架open in new window更快学习 JS 的 6 个简单思维技巧open in new window程序员怎么学英语open in new window8个让程序员追悔莫及的职业建议open in new window当心!程序员应警惕七种错误的职业规划open in new window1024程序员节,写给年轻程序员的建议open in new window给新程序员的10条建议open in new window前端框架这么多,该何去何从?open in new window2017年前端开发工具趋势open in new window现代前端开发技术栈open in new window听说2017你想写前端?open in new window如何跟上前端开发的最新前沿open in new window前端开发人员必须了解的七大技能图谱open in new window前端技能汇总(JacksonTian)open in new window另一张前端技能汇总图open in new window(和上面的一个链接一样,但是看的话,建议大家带参考的思想看) 怎样成长为一个优秀的 Web 前端开发工程师?open in new window月薪10-12k的前端人员应该具备怎样一种技术水平?open in new window作为一名前端开发人员,有哪些值得一读的js代码?open in new window不吹不黑聊聊前端框架--尤雨溪Live整理open in new window前端开发者指南(2017)open in new window为什么一些公司招前端不想要培训班出来的人?open in new window前端新人不容易open in new window现在Web前端是不是已经饱和了?open in new window2017前端技术发展回顾open in new windowhexo高阶教程:教你怎么让你的hexo博客在搜索引擎中排第一open in new window(有兴趣的可以看一下,有用) 开放源码的法律面open in new window(因为国外对版权,许可证很是注重,该文章就讲代码开源后关于许可证的文章,看得我有点蒙,但是最终整理后,我的开源项目就用MIT)

10.开发经常会接触的网站

MDN-web技术文档open in new window智图_图片压缩在线工具_在线制作webpopen in new window多视通图片转换Base64open in new window微信JS-SDK说明文档open in new window草料二维码open in new window菜鸟教程open in new windoww3cschoolopen in new window

11.小结

好了,我学前端看过的博客文章,关注过的大牛和项目,项目技术栈的教程基本都在这里了!我分享的这些,不敢说最好,最全,适合每个人。但是都是我看过或者接触过的,至少内容上让我满意的,让我觉得是对学习有用的,能帮到大家的。如果大家有什么学习资源推荐的,我也希望大家不吝啬的共享给我,给大家!

这篇文章,对于大家而言是一个资源的合集,但对于我而言,可能是一个分割线。发完2017最后一篇文章在以后我可能会在务实基础的前提下,注重深入的探究,发的文章可能会比现在的文章深入,文章产量可能不会像现在这么频繁!

还有一个建议就是,学习web前端,上面分享的可以起到一个引导,指路,解惑的作用。但是,大家不要忘记多练,毕竟实操最重要!大家有空余的时间或者周末也可以自己做下自己有兴趣的项目,并且用在自己工作的项目开发上!项目不求比别人好,只求自己能练习,提升自己的技术水平!

JavaScriptopen in new window