网络科技

    今日:544| 主题:279122
收藏本版
互联网、科技极客的综合动态。

[其他] Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集

[复制链接]
告诉自己忘了他 投递于 2016-11-29 04:12:19
199 4
Introduction & Overview:入门与概览

  欢迎来到,前端世界!
   

Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集

Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集-1-网络科技-软件工程师,应用程序,开发者,数据流,客户端

  
       
  • 2016 – 对于未来五年内Web发展的7个预测   
  • 2015 – 我的前端之路:从命令式到响应式,以及组件化与工程化的变革   
  • 怎么成为一名优秀的软件工程师   
  • GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean :十年前,Martin Fowler撰写了GUI Architectures一文,至今被奉为经典。本文所谈的所谓架构二字,核心即是对于对于富客户端的代码组织/职责划分。纵览这十年内的架构模式变迁,大概可以分为MV 与Unidirectional两大类,而Clean Architecture则是以严格的层次划分独辟蹊径。从笔者的认知来看,从MVC到MVP的变迁完成了对于View与Model的解耦合,改进了职责分配与可测试性。而从MVP到MVVM,添加了View与ViewModel之间的数据绑定,使得View完全的无状态化。最后,整个从MV 到Unidirectional的变迁即是采用了消息队列式的数据流驱动的架构,并且以Redux为代表的方案将原本MV*中碎片化的状态管理变为了统一的状态管理,保证了状态的有序性与可回溯性。  
  Tutorials

  
       
  • MDN :Mozilla 开发者网络(MDN)提供有关开放网络技术(Open Web)的信息,包括HTML、CSS 和万维网及HTML5 应用的API。非常权威与详细的各种语法细节介绍,必看首推。   
  • How-To-Become-A-Great-Front-End-Engineer :如何成为一名伟大的前端工程师   
  • 专治前端焦虑的学习方案   
  • Frontend-Guidelines-Questionnaire :一个单页的问卷能帮助你的团队建立高效一直的前端指南。   
  • 四分钟交互式地了解Web设计基本规范:从零开始设计得体的个人网站  
  Playground / StartKits

  
       
  •   在线编译: CodePen 、 JSFiddle 、 RunJS :这些网站为我们提供了可以在线编辑HTML/CSS/JavaScript与即时预览的工作台。同时,在这些网站上也沉淀了大量优秀的代码片与示例,笔者就经常在CodePen上欣赏各种神奇的动画效果。

    Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集

    Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集-2-网络科技-软件工程师,应用程序,开发者,数据流,客户端
      
  Resources:综合

  Collections:资源汇总帖

  
       
  • MyBridge搜集的一系列面向Web开发者有用的书籍   
  • Frontend-Dev-Resources :一系列关于前端的会议   
  • 关于前端面试相关的资源整理 :整理一下最近在网上收集的前端面试相关资料,包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多,就光从知乎、前端乱炖、w3cplus 等网站就能找到很多,所以针对细节不发散,仅挑一些内容丰富的合集,更多的资料可以从其中找到。   
  • Update-To-Date Frontend Technologies :保持更新的前端最新的资料、博客、工具集合。  
  Books & Serials:书籍与系列文章

  
       
  • 2016 – JavaScript Stack From Scratch【Series】 :从零开始的常用JavaScript前端框架开发栈教程   
  • 2015 – SurviveJS 【Book】 :基于React与Webpack构建一个看板应用程序来讲解Webpack/React技术栈的知识要点   
  • 2016 – 阮一峰 全栈工程师培训材料【Series】 :全栈工程师培训材料,帮助学习者掌握全栈开发的基本知识,承担简单 Web 应用的前后端开发  
  Courses:教程

  
       
  • FreecodeCamp : FreecodeCamp是一个非常伟大的项目,其致力于提供优秀的免费教程与练习示范,目前其在前端方面已经累计了数百小时的课程,同时其也包含了数据可视化、后端开发等等。

    Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集

    Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集-3-网络科技-软件工程师,应用程序,开发者,数据流,客户端
       
  • 实验楼-Web专区  
  Blogs & Forums:博客与论坛

  企业

  
       
  • 百度: 百度前端学院 , 百度FEX技术周刊   
  • 阿里: 阿里-AMFE   
  • 腾讯: AlloyTeam  
  英文

  
       
  • RisingStack Engineering :一系列关于JavaScript与NodeJS的博客,笔者感觉其在NodeJS方面行文还是很深入的  
  中文

  
       
  • [王下邀月熊 – 前端系列博客]():笔者自己的博客,不断完善中,放在这里纯属私心,不能和下面的相提并论。笔者自己觉得行文倒是其次,笔者一直主张要建立属于自己的完善的知识体系。   
  • 前端外刊评论 :关注前端前沿技术,探寻业界深邃思想 qianduan.guru。   
  • 奇舞周刊 :汇聚前端精华,每周五更新的周刊,内容尚可。   
  • [前端之巅公众号]():定期推送的前端文章,有精品也有套文。   
  • Div.io :文章更新不是很快,不过也有不少的好文章。   
  • Fouber-系列博客   
  • JSFront :JS前端开发群月报,由豪情等人维护。  
  Tools:工具

  
       
  • Can I Use :CAN I USE,相信每个前端同学都不陌生,查询浏览器兼容性的利器。   
  • JSHint :一个在线JS检测工具,可以检测JavaScript代码中的错误和潜在问题。   
  • Javascript-Obfuscate :一个在线混淆工具,通过先进的算法,来混淆你的JavaScript代码,使其不可读。该工具还可以减小文件的大小,以便快速加载。   
  • Best CSS Button Generator :网站主要提供各种按钮的CSS代码,你可以从预设的按钮中选择并使用模板用于自己的设计,还可以查看源代码,非常适合学习。   
  • Chrome Tools 介绍: 我的 Chrome 插件集 、 私人珍藏的Chrome插件,吐血推荐 、 前端程序员必知的30个Chrome扩展 、 Dev Tips(讲了很多Chrome开发技巧) 、 Chrome控制台实用指南 、 Chrome 实用调试技巧   
  • 配色类网站,为设计师提供很多配色方案与建议: ColorHunt 、 Adobe Color Wheel 、 ColorHunter 、 BootCSS WebSafeColors   
  • 图标类网站: 阿里巴巴图标库:IconFont 、 IconSearch   
  • CSS属性生成工具: Box Shadow Generator 、 Gradient Generator 、 Ultimate CSS Gradient Generator 、 CSS3 Generator 。  
  仰望星空

  
       
  • JS1K :大名鼎鼎的js1K,1K字节以内的Javascript代码,实现一个酷炫的动画、特效、小游戏之类的。官网从2010年开始征集参赛作品,现在已经办了7年了,还在办。  
  Syntax:基础语法

  HTML

  CSS

  
       
  • 如果你觉得CSS非常简单那么看看这些啪啪打脸的: If CSS is so easy why does everyone suck?   
  • 语法速查工具: CSS属性指引 , 免费的可视化CSS各个属性效果展示  
  BestPractices

  
       
  • CSS Styleguide: 20个编写现代CSS代码的建议 , 瞅瞅Facebook是怎么保证CSS代码质量的 , 提升你的CSS姿势  
  JavaScript

  
       
  • 我应该从哪一门编程语言上车? :这里有你学习JavaScript的理由。   
  • 廖雪峰JavaScript教程 :介绍了基础的语法与API。   
  • JavaScript 标准参考教程(alpha) -阮一峰 :阮一峰老师出品,相当完善与成体系,也是以基础语法与API为主。   
  • 2015 – Speaking JavaScript【Book】 :Dr. Axel出品的详细JavaScript基础语法的书籍。   
  • 2015 – You-Dont-Know-JS【Series】 :告诉你关于许多你并不知道的JS知识  
  ES6/ES7专区

  
       
  • 中文教程: 阮一峰 ECMAScript 6 入门 、 30分钟掌握ES6/ES2015核心内容(上)   
  • 语法规范手册: EcmaScript6 全规范(含node) -ouvens 、 ES2015规范 英文   
  • 2015 – Setting Up ES6【Book】 :Dr. Axel出品的介绍如何搭建ES6开发环境的书籍。   
  • 2015 – Exploring ES6【Book】 & 2015 – ES2016&ES2017【Book】 :Dr. Axel出品的详细的ES6的语法介绍书籍。  
  Practices & Tips:实战与提高

  
       
  • JavaScript设计模式: JavaScript 设计模式 系列 AlloyTeam , Addy Osmani 编写的 2015 – Learn JavaScript Design Patterns【Book】 学习常见的JavaScript设计模式,本书不仅仅阐述JavaScript语言本身的常见设计模式,还结合了DOM&jQuery介绍了一些常用的界面上的设计模式   
  • Effective JavaScript :68 Specific Ways to Harness the Power of JavaScript,中文译本在 Effective JavaScript   
  • 代码性能: 2016:编写高性能的JavaScript 、[]()  
  StyleGuides:样式与风格

  DOM

  Advanced

  StateManagement:状态管理

  
       
  • Web开发中所谓状态浅析:Domain State&UI State   
  • 思考:我需要怎样的前端状态管理工具?  
  Browser:浏览器

  Engine

  Electron

  
       
  • Electron 概述与初探   
  • Hokein编辑的Electron示范项目   
  • 基于Electron的OSX下桌面OCR应用:Cute OCR Toolkits For OSX, Based On Electron,React&Tesseract  
  Headless Browser

  PhantomJS

  Selenium

  JSDOM

  Render:渲染

  
       
  • 浏览器工作原理: 浏览器的工作原理:新式网络浏览器幕后揭秘 、 浏览器工作原理 、 从输入 URL 到页面加载完成的过程中都发生了什么事情?   
  • 网页渲染: CSDN-开发者应该知道的有关于网页渲染的事 、 JS一定要放在Body的最底部么?聊聊浏览器的渲染机制   
  • 高性能JavaScript重排与重绘   
  • how-browsers-work   
  • the-rendering-process-of-a-web-page   
  • 渲染性能   
  • 应该知道的前端性能二三事:Reflow 和 Repaint  
  Framework:常用框架

  
       
  • JavaScripting :一个搜集所有的优秀JavaScript前端库以及对其打分评比的网站  
  View

  React

  
       
  • 博客与论坛: PureRender,知乎专栏,分享关于 React 相关经验及发展动态 , React入门与最佳实践系列总纲【Series】 。   
  • 入门学习: 使用Facebook的create-react-app快速构建React开发环境 , React开发中常用的工具集锦 。   
  • 脚手架与实战: 在重构脚手架中掌握React/Redux/Webpack2基本套路 。   
  • React 设计思想与理念: React 概念模型——脱离React谈谈它的设计思想 。   
  • React RoadMap: React的未来特性 。   
  • React StyleGuide: 如何写出漂亮的React组件 。  
  StateManagement

  Redux

  
       
  • 博客与论坛: Redux 入门与最佳实践系列总纲【Series】 。   
  • 最佳实践: 深入理解Redux:10个来自专家的Redux实践建议 。  
  Utils:辅助工具

  jQuery

  
       
  • 你应该知道的jQuery的小技巧 :介绍一系列jQuery使用的小技巧。   
  • You-Dont-Need-jQuery :前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10+ 以上浏览器。  
  NodeJS

  
       
  • 一起学NodeJS【Series】 :使用 Express + MongoDB 搭建多人博客   
  • 我在阅读NodeJS文档中读出的19个套路  
  Builder

  Webpack

  
       
  • 中文教程: Webpack傻瓜式指南 , Webpack 中文指南 -赵达  
  Career & Interview:工作与面试

   

Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集

Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集-4-网络科技-软件工程师,应用程序,开发者,数据流,客户端

  
       
  • Front-end-Developer-Interview-Questions :H5BP出品的一系列的前端问题   
  • Cracking-The-Front-End-Interview :解决你的前端面试,中文译本为 解决你的前端面试  



上一篇:靠“美”赚钱的美图更新了招股书,明年要发两款手机,还要靠电商盈利 ...
下一篇:Grab Google Home for just $74.25 at Best Buy with Visa Checkout
linan737 投递于 2016-12-1 03:39:38
爱情就像两个拉着橡皮筋的人,受伤的总是不愿意放手的那一个!
回复 支持 反对

使用道具 举报

难拥友 投递于 2016-12-1 21:24:51
连广告也信,读书读傻了吧
回复 支持 反对

使用道具 举报

一点开门 投递于 2016-12-2 03:51:56
高手在民间
回复 支持 反对

使用道具 举报

mumu无敌 投递于 2016-12-16 02:39:25
沙发???
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表