146

前端技能学习导航 - 知乎专栏

 6 years ago
source link: https://zhuanlan.zhihu.com/p/29515399
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

前端技能学习导航

公众号【代码技巧】分享高质量干货

WebStormJetbrains公司旗下一款JavaScript 开发工具,被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能

Sublime Text一套跨平台的文本编辑器,支持基于Python的插件。Sublime Text 是专有软件,可通过包(Package)扩充本身的功能。大多数的包使用自由软件授权发布,并由社区建置维护

Aptana一个基于Eclipse的集成式Web开发环境,其最广为人知的是它非常强悍的JavaScript编辑器和调试器

Notepad++一套自由软件的纯文本编辑器,由台湾人侯今吾基于同是开放源代码的Scintilla文本编辑组件并独力研发

Brackets一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows、Linux 以及 OS X 平台

Dreamweaver第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页

TopStyle一款 CSS 开发辅助工具,即 HTML5 / CSS3 编辑器,它专注于 HTML CSS 设计辅助,提供比较多的功能,如 CSS 代码检查等,据称 TopStyle 的帮助文件非常好,有详细的 CSS 指令,适于初次接触 CSS 的学习之用

Komodo一个跨平台支持多种程序语言的Integrated Development Environment (IDE)软件,目前他支持了在Windows与Linux上 ,Pythone, Ruby, Rails, Perl, HTML, CSS, and JavaScript,等的程序语言开发,以及多种程序语言语法着色

ChocolatMac系统上最新出现的一款强大的文本编辑器,兼具原生的Cocoa及强大的文本编辑功能。Chocolat支持多种编程语言的关键字高亮显示、窗口分割、标签页、色彩主题等功能。界面和MacVim非常相似

AtomGithub 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器

在线IDE

Dabblet跨浏览器兼容,对前端攻城师们来说是一个不得不处理的问题。为了在浏览器间呈现统一的显示效果,攻城师们不仅要为每个游览器添加CSS前缀,甚至还需要用到一些特殊的CSS Hack技巧。于是,jsFiddle、JSBin等前端代码的在线测试工具应运而生。然而,使用jsFiddle仍有很多不便之处。为了解决这个问题,前端攻城师Lea Verou自己动手,开发了一个名为Dabblet的HTML和CSS代码段在线测试工具

JsfiddlejsFiddle是一个在线的shell编辑器,通过流行的JS框架创建自定义的环境,以简化JS代码。可以用于测试示例代码。不仅如此,你还可以添加一个Ajax echo后端,并且通过一系列的JavaScript框架自动载入资源,如MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla等

CodeMirror又一款“Online Source Editor”,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库

JS BinJSBin 是一个 Web 应用,主要用于帮助测试 JavaScript 和 CSS 的代码片段。功能与 jsFiddle 网站一致

Cloud9利用了云技术,运行在浏览器中,允许你随时随地运行、调试和部署应用程序。一个完整的game-changer会永久性的改变应用程序的开发方式。Cloud 9可以让你集中精力编程,不用顾及到搭建环境等琐事中

AngularJSGoogle收购,用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好

Backbone.js一种种重量级javascript MVC 应用框架,通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互

Ember.js一个雄心勃勃的Web应用程序,消除了样板,并提供了一个标准的应用程序架构的JavaScript框架

knockout一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化

todomvc帮助你选择一个MV*框架

Spine.js通常与 Backbone.js 进行比较;它受到 Backbone.js 的影响,并在使用率方面与前者接近。Spine.js 包含类、模型、控制器和视图,这比 Backbone.js 引入的集合更加传统一些

Polymer加盟Google的原Palm webOS开发团队打造,是一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。Web Components则提供了一种更彻底的解耦方式,更加方便了UI的开发和模块化,可以说是Polymer的基础之一

ReactFacebook开源的JavaScript库,用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件

LABjsLoading 指异步并行加载,Blocking 是指同步等待执行。LABjs 通过优雅的语法(script 和 wait)实现了这两大特性,核心价值是性能优化

RequireJS鼓励代码的模块化,它使用了不同于传统 script 标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址

Sea.js简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣

Kissy淘宝开源,一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。除了完备的工具集合如 DOM、Event、Ajax、Anim 等,它还提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架,KISSY 为移动终端做了大量适配和优化,让你的程序在全终端均能流畅运行。

Bootstrap目前开源社区最受欢迎的项目之一,可谓大名鼎鼎了,最新版本3.x兼容IE9+

Foundation属于WEB前端框架的先驱者,知名度被Bootstrap反超,但其优秀程度相比Bootstrap只强不弱!最新版本5.x兼容IE9+

Semantic UIUI框架的后起之秀,UI动画效果很棒,一个很有潜力的项目!兼容IE9+

knockout一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化

PureIE7+,大名鼎鼎的Yahoo!支持开发的UI框架,其特点简洁小巧,对于喜欢简洁的朋友来说是一个不可多得的好项目!

YAMLIE6+,一个历史悠久的前端框架,功能单一小巧,模块化的 CSS 框架,特点是灵活、可访问和响应式

jQuery UIIE6+,以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件

Famo.us用于构建移动应用以及桌面应用,独特之处在于其javaScript渲染引擎和3D物理引擎,它向开发者展示了使用JavaScript也能达到原生应用程序动画的质量

Concise适合从头构建移动应用,而且还包含了一个简单的网格布局系统、漂亮的印刷字体,以及少量花哨的特性

OnSenUI适合PhoneGap/Cordova混合应用的开发,它注重差劲可用的移动应用

Tuktuk一个轻量级的面向对象的CSS框架,使用它可以轻松地创建响应式、可扩展的网站。它包括多达12列的网格布局,以及表单、按钮、表格、打印字体等等

jQuery最新版jquery-3.2.1兼容IE9+,文档说明很全很想起,社区很大。操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

vue.js简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

vue.js组件实战学习

Prototype版v1.7.2 兼容IE6+,非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax

Zepto版v1.7.2 兼容IE10+,一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api

YUI最新版v3.18.1 兼容IE10+,建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术

Underscore.js提供了100多个函数,包括常用的: map, filter, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等

snapsvg用于在HTML前端生成SVG的JavaScript工具集;SVG的工具集其实有很多,如svg.js、raphaeljs,离开了这些工具,我们依然可以实现SVG作图,只不过要自己写SVG XML

Dojo让你更容易使Web页面具有动态能力,或者在任何能够稳定支持JavaScript语言的环境中发挥作用

MochiKit一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发,另外还缓解了浏览器版本之间的不一致性。

MooTools一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似,语法几乎一样。但它提供的功能要比prototypejs多,而且更强大。比如增加了动画特效、拖放操作等等

Mock.js一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。根据数据模板生成模拟数据、模拟 Ajax 请求,生成并返回模拟数据、基于 HTML 模板生成模拟数据

Three.jsJavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象

D3.js最流行的可视化库之一,它可以将任意数据绑定到DOM(Document Object Model,文档对象模型),然后对该文件提供数据驱动转换。还可以将一组数据生成基本的HTML表,或生成一个SVG条形图

Kite一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际,易于理解且容易使用。Kite用 法与flexbox相似:justify-content,等等。你可以很轻松地创建复杂的模块。Kite是基于OOCSS 与 MindBEMding,它可以帮助您快速构建自己的组件。Kite支持几乎所有浏览器,它属于MIT许可

DynCSS将您的CSS解析成-dyn-(attribute)规则。这些规则是模拟浏览器事件(如滚动和缩放)的javascript表达式。其结果会应用到上面 指出的CSS属性。你可以将任何CSS属性设置为动态--前提是它对于jQuery的css()方法是可写的。你可以通过附加-dyn-前缀并指定一个引 用的javascript表达式来实现

Hover.CSS一个有用的CSS3悬停效果集合,可用于动作调用,按钮,商标,特性图片等。 自定或直接应用到你自己的元素上都非常的简单。 hover.css可以用多种方式来使用; 可以复制粘贴你喜欢的效果到你自己的样式表里,也可以引用样式表。然后只需向你想要的元素需添加对应效果的class名称即可。如果你只打算使用一个或几 个效果,最佳实践是复制粘贴一个效果。

Spinkit一个酷炫的加载动画CSS集合。 Spinkit使用CSS动画来创建吸引人的易于自定义的动画。该集合目标不是提供所有浏览器的解决方案--如果你需要支持哪些还没实现CSS动画属性 (像是IE9及之前的版本)的浏览器,你需要检测下这些动画属性并实现一个变通方案。

Magic CSS3 Animations一个特殊效果的CSS3动画库,你可以免费用于你的web项目。简单的引用CSS样式:magic.css或精简版magic.min.css即可

Buttons一个可以创建高度自定义、灵活和现代感十足的web按钮的CSS库。该库由Sass+Compass构建,支持正方形、圆角矩形或 者圆形的按钮,并且可选是否扁平以及其他自定义的效果(如发光)。所使用到的尺寸、颜色、效果和字体可以通过变量的帮助进行修改,并且可以非常容易的进行 扩展。

CSS Spinner一个CSS螺旋动画加载的集合。每个旋转包含一个使用‘loader’ class的div,其文本内容为‘Loading…’。文本是为屏幕阅读器使用的且可用作老浏览器的后退的状态。

Typebase.css是个最小化的、可定制的字体样式表。它有less和SASS版本,所以能够很容易地修改融入现代的Web项目。它提供了所有排版 所必要的基础工具且不需添加其他任何设计内容。它被创建用来完成项目发展和成长期时的修改,能和normalize.css很好的工作

Beautons一个用来创建漂亮、简洁按钮的易用库。你可以应用各种样式、函数已经其他的更多内容到按键上,包括改变它们的大小,设置它们的可用与否以及更多设置

Hint.css一个使用SASS构建只使用CSS和HTML的提示库。该库使用数据属性、内容属性、伪元素以及CSS3转换。提示框简洁漂亮,有箭头且可放置在父元素的任何一边

《大巧不工》2013年7月19日,以Web前端设计的流程为主线,以前端设计的方法和原则为基础,围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳实践.同时对Web前端设计领域的经典设计思维进行了剖析,为读者提供了极具指导价值的思想和极具操作性的实践方法。此外,《大巧不工:Web前端设计修炼之道》还讲解了前端性能的测试和度量方法,总结了大量前端性能优化技巧

《Web性能权威指南》2014年5月1日,适合所有Web应用及站点开发人员阅读,包括但不限于前端、后端、运维、大数据分析、UI/UX、存储、视频、实时消息,以及性能工程师。

《Web站点优化》Andy King重视搜索引擎营销与Web优化之间内在的协同。他是一个思想领导者并且确实懂得Web站点优化的复杂性。这本书中研究的深度和所教授的经验令人惊讶。本书是优化你的Web站点和进行利润最大化的最佳实践所必需的一本书

《Node.js开发指南》首先简要介绍Node.js,然后通过各种示例讲解Node.js的基本特性,再用案例式教学的方式讲述如何用Node.js进行Web开发,接着探讨一些Node.js进阶话题,最后展示如何将一个Node.js应用部署到生产环境中

《JS高级程序设计》将对JavaScript追根溯源,从它在最早的Netscape浏览器中诞生谈起,一直谈到今天的它对DOM和AjaX的强大支持。读者将通过《JavaScript高级程序设计(第3版)》掌握如何运用和扩展这门语言,从而更好地满足自己的需求,以及如何实现客户端与服务器的无缝通信,而又不必求助于Java或隐藏的网页框架(frame元素)

《JS权威指南》经典权威的JavaScript工具书,是程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册。第6版涵盖HTML5和ECMAScript5

《JS语言精粹》一门美丽的、优雅的、轻量级的和非常富有表现力的语言,它使您创建高效的代码,不管您编写代码的目的是管理对象库还是仅仅使Ajax运行得更快。如果您为web开发站点或应用程序,这本《JavaScript语言精粹》绝对应该是必备的

《CSS权威指南》告诉你怎样将最新的CSS2以CSS2.1里面所定义的各种CSS元素应用到实际工作当中。通过书中的例子,你将学会怎样使用CSS创建或修改网站的外观,并且达到普通HTML无法实现的效果

《深入浅出Node.js》Node.js让JavaScript在服务器端焕发生机,这是一本带着文艺调调的好看的技术书,书中详细阐述TNode.js的方方面面。如果你是前端工程师,这会是你迈向全端工程师的关键一步

《JS设计模式》如何把经典和现代设计模式应用到JavaScript语言中,来编写优美、结构化和可维护的代码。如果想让代码保持高效、更易于管理,并且能同步最新的最佳实践,那么本书正是为你打造的

《HTTP权威指南》详细解释了HTTP协议,包括HTTP是如何工作的,如何用HTTP来开发基于Web的应用程序,核心的因特网协议如何与架构构建块交互,如何正确实现因特网客户和服务器等。《HTTP权威指南》的中心内容是HTTP,本质是理解Web的工作原理,以及如何将这些知识应用到Web编程和管理之中,主要涵盖HTTP的技术运作方式、产生动机、性能和目标以及一些相关技术问题

《Web前端黑客》Web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术,主要包含Web前端安全的跨站脚本(XSS)、跨站请求伪造(CSRF)、界面操作劫持这三大类,涉及的知识点涵盖信任与信任关系、Cookie安全、Flash安全、DOM渲染、字符集、跨域、原生态攻击、高级钓鱼、蠕虫思想等,这些都是研究前端安全的人必备的知识点。《安全技术大系:Web前端黑客技术揭秘》作者深入剖析了许多经典的攻防技巧,并给出了许多独到的安全见解

工程化工具

Gulp用自动化构建工具增强你的工作流程!

GruntJavaScript 世界的构建工具

FIS3解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题

Webpackwebpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.

NPM一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。

Paul Irish著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr、 Yeoman、CSS3 Please和HTML5 Boilerplate的lead developer

TJ Holowaychuk程序员兼艺术家,Koa、Co、Express、jade、mocha、node-canvas、commander.js 等知名开源项目的创建和贡献者

Addy Osmani谷歌前端开发工程师,创建了 TodoMVC、jQuery UI Bootstrap、jQuery Plugin Patterns 和 Backbone Paginator,出版了《Learning JavaScript Design Patterns》和《Developing Backbone.js Applications》两本技术书籍,而且还是著名的 jQuery、Modernizr 以及Backbone.js 框架的贡献者

John ResigjQuery的创始人和技术领袖,目前在Mozilla担任JavaScript工具开发工程师。著有《Pro JavaScript Techniques》(即《精通JavaScript》)等经典JavaScript书籍

Douglas CrockfordJavaScript开发社区最知名的权威,是JSON、JSLint、JSMin和ADSafe之父,是《JavaScript: The Good Parts》的作者。他同时也服务于ECMA的JavaScript2.0技术委员会(TC39)

Mike Bostock纽约时报图形编辑,知名可视化库 D3.js的主要作者

Mark OttoTwitter前设计师,与Jacob Thornton合作开发了大名鼎鼎的CSS/HTML框架Bootstrap

James Hallidaynode社区最活跃的贡献者,NPM排名仅次于TJ Holowaychuck,在写代码之外他还是个自成一派的 插画家。目前substack在NPM上发布了300+的模块

Mr.doobJS三维模型库three.js, Code Editor(编码器)的作者

Jessica Lord2013年5月份加入Github设计团队。是开源项目sheetsee.js的作者

Steve Souders就职于Google;《High Performance Web Sites》的作者,创建了YSlow,位居Firefox扩展TOP25的首位,创建了很多其他的性能工具和服务,包括HTTP Archive、Cuzillion、Jdrop、SpriteMe、ControlJS和Browserscope,担任Velocity的联合主席,Firebug Working Group的联合创始人,在斯坦福大学教授 “CS193H: High Performance Web Sites”科目,经常进行公开演讲

Mathias Bynens协助开发多个开源项目,如jsPerf、HTML5 Boilerplate

玉伯淘宝前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库Arale的创始人

阮一峰70年代生于上海。毕业于上海财经大学,经济学博士,同时也是程序员,个人博客访问量过千万,译有《黑客与画家》、《软件随想录》。目前供职于一所上海本地高校。本文为阮一峰笔记体博客文集《如何变得有思想?》和《一个寻找作者的读者》的代序

老赵金融行业程序员,目前就职于摩根大通(香港)。多年微软MVP,InfoQ中文站兼职编辑。虽然广泛涉猎各类技术,但早就被人民群众贴上“微软”标签,现已认命

朴灵阿里数据平台数据产品部资深工程师。致力前端、数据可视化、Node等领域

克军前雅虎中国前端工程师,现豆瓣前端工程师,休闲范儿长发帅哥一枚

司徒正美著名的JavaScript专家,去哪儿网前端架构师,立志做考古学家的日语系工程师,穿梭于二次元与二进制间的“魔法师”,做过陶艺,写过小说,涉猎Java、Ruby、 JavaScript。曾出版《JavaScript框架设计》一书

Winter阿里巴巴高级技术专家,著名JavaScript专家。曾参与Bambook开发,更早为微软工作,开发Windows CE平台的IE浏览器

周爱民Node-Webkit的项目发起人。目前任职于Intel公司开源技术中心(OTC),从事Web和浏览器技术开发工作。现在主要工作是开发和维护Node-Webkit项目。此前从事过MeeGo、Tizen和JNI xml性能库的开发和数据中心解决方案服务。毕业于中科大少年班,在计算机系获得博士学位,研究方向为高性能计算

小鱼国内资深前端开发工程师,Web 标准布道者,前支付宝前端开发部 CSS 样式库负责

苏千淘宝网数据产品部资深Web开发工程师,CNode.org社区核心成员

汤姆大叔熟悉Waterfall、Agile(Scrum&XP),染指C#、ASP.NET、MVC、EF、NHibernate、SQL Server、Oracle、JavaScript、HTML5、CSS3、JQuery、Knockout、Silverlight、WPF、WCF、ADFS等技术

GitHub一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理。在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中

StackOverflow一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题,浏览问题,索引相关内容,在创建主页的时候使用简单的HTML。在问题页面,我们不会弹出任何广告,销售信息,JavaScript 窗口等

SegmentFault一家中文的开发者社区及媒体。最初的产品原型来自于国外最大的程序员问答社区 StackOverflow,但其产品形态经过一年多的发展,已经有问答、博客、活动等,它还是多个黑客马拉松活动的组织方。

Google CodeGoogle公司利用自身服务器资源提供的开发人员主页。其最初目的是为Google自身的开源软件提供开发平台,以及协助开发者扩展Google产品的功能。随着Google开源之夏等项目的推进,Google代码正在成为一个开放的项目托管平台。

掘金掘金是中国质量最高的技术分享社区,邀请稀土用户作为 Co-Editor 来分享优质的技术干货,从前端到后端开发,从设计到产品,让每一个掘金用户都能挖掘到有价值的干货。

编程小技巧

内推网内推网,一个接地气的互联网招聘社区,专注于做互联网行业内部推荐、公司直招类型的网络招聘;内推网打造内推行业最大最专业的互联网招聘、内部推荐的网络招聘平台,内推网(neitui.me),互联网招聘内部推荐直招平台。 内推网(neitui.me),互联网招聘内部推荐直招平台

拉勾网拉勾网于2013年7月20日上线,专业的互联网领域招聘平台,专注于为互联网从业者提供更好的职业机会,企业覆盖领域包括互联网、移动互联网、电子商务、游戏、O2O、大数据、云计算、社交网络、互联网金融、在线教育、在线旅游、等25个互联网细分市场

周伯通公司源于豆瓣小组上的积累,组长冯涛(兽汰姆)创业做了周伯通招聘。冯涛给周伯通划定的方


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK