新手上路 前天 18:31
主楼

动画

创建运动和形状变化的过稈
  • Animate.css- 添加水即可使用的 CSS 动画。
  • Animate.less- 一系列酷炫、有趣且跨浏览器的动画,已转换为 LESS 格式,供您在 Bootstrap 项目中使用。
  • Anime.js- Anime 是一个灵活且轻量级的 JavaScript 动画库。它支持 CSS、单个变换、SVG、DOM 属性和 JS 对象。
  • Approach- 一个 jQuery 插件,允许您根据与对象的距离来动画化 CSS 属性。
  • CSS Spritesheet Animation Example- 使用 steps() 功能的 CSS3 像素图动画示例。
  • Caat- 基于 JavaScript 场景图导演的动画框架。
  • CanvasScript3- CanvasScript3 是一个用于新 HTML5 Canvas 的 Javascript 库,其接口类似于 ActionScript3。该库支持 Sprite Groups、Layers、Mouse Events、Keyboard Events、Bitmap Effects、Tween Animations 等。
  • Collie- Collie 是一个 Javascript 库,用于帮助创建高度优化的动画和游戏,使用 HTML 5。Collie 在 PC 和移动设备上均运行,使用 HTML 5 canvas 和 DOM。
  • Emile.js- Emile.js 是一个简洁的、独立的 CSS 动画 Javascript 框架。
  • Firmin- Firmin 是一个使用 CSS 变换和过渡的 JavaScript 动画库。
  • GreenSock 动画平台- GreenSock 动画平台是一套用于脚本动画的工具集。
  • Codepen 代码库- 包含 Greensock 使用示例和代码的 Codepen 代码库。
  • 示例- 这里有一些示例,展示了 Greensock 动画平台的核心功能。
  • 学习中心- GreenSock 动画平台的教学教程和视频。
  • JQuery Transit- 为 jQuery 提供超级平滑的 CSS3 转换和过渡效果。
  • Janis- Janis 是一个轻量级的 JavaScript 框架,通过 CSS 过渡为现代网络浏览器以及移动设备提供简单的动画。
  • Keanu- Keanu 是一个用于 Canvas/JS 动画的微型库。
  • Magic- 具有特殊效果的 CSS3 动画。
  • Move.js- Move.js 是一个轻量级的 JavaScript 库,使基于 CSS3 的动画变得极其简单和优雅。
  • Ramjet- Ramjet 使一个 DOM 元素看起来能够转换成另一个元素,无论这两个元素在 DOM 树中的位置如何。
  • Rekapi- 一个用于 JavaScript 的关键帧动画库。
  • SVG.js- 一个用于操作和动画化 SVG 的轻量级库。
  • Scripty2- Scripty2 是一个强大、灵活的 JavaScript 框架,帮助您编写自己的美味视觉效果和用户界面。
  • Shifty- Shifty 是一个用 JavaScript 构建的补间引擎。它设计用来满足任何数量的补间需求。
  • Snap.svg- Snap.svg JavaScript 库让处理您的 SVG 资源像 jQuery 处理 DOM 一样简单。
  • Stylie- Stylie 是一个有趣的工具,可以轻松创建复杂的 CSS 动画。快速图形化设计您的动画,获取生成的代码并开始使用!
  • Textillate.js- Textillate.js 结合了一些很棒的库,提供了一个易于使用的插件,用于将 CSS3 动画应用于任何文本。
  • Tween.js- 超级简单、快速且易于使用的缓动引擎,集成了优化的 Robert Penner 方程。
  • Twitter Fave Animation- 与依赖 CSS 过渡不同,新的动画利用了一系列图像。这里是如何使用 CSS 动画步骤时间函数重新创建该动画。
  • Web Animation 过去、现在与未来 (2016)- Rachel Nabors 探索了 2016 年的 Web 动画标准、平台和工具:SVG、SMIL、GreenSock AP、Framer、浏览器工具等。
  • Web Animations API- Web Animations 是一个用于在网页上驱动动画内容的新 JavaScript API。通过统一 SVG 和 CSS 的动画特性,Web Animations 解锁了以前只能声明式使用的功能,并将强大的高性能动画能力暴露给开发者。
  • Are we animated yet?- 该页面跟踪在 Firefox 中实现 Web Animations API 的进度。
  • WAAPI Browser Support Test (+ Polyfill)- 此 codepen 测试您的浏览器是否以及到何种程度支持 Web Animations API。测试在包含 Polyfill 后运行。
  • Web Animations Polyfill- Web Animations API 的 JavaScript 实现。

字体排版

字体的风格、排列或外观
  • 字体加载策略全面指南- Zach Leatherman 描述了加载网络字体的不同方法。
  • Adobe Edge Web Fonts- Edge Web Fonts 是一个免费服务,提供对大量字体的访问,用于您的网站。它是 Adobe Edge 工具和服务之一。使用该服务免费且无限制。
  • Baseline.js- 一个简单的 jQuery 插件,用于恢复因奇数图像尺寸而错乱的垂直基线。
  • CSS Typography cheat sheet- 关于 CSS 功能的小总结,将提升您的网页排版。
  • Convincing a browser to load fonts from other domains- 一个关于跨域加载字体的 StackOverflow 问题。
  • FitText- FitText 使字体大小变得灵活。在您的流体或响应式布局上使用此插件,以实现可扩展的标题,使其填满父元素的宽度。
  • FlowType.JS- 基于元素宽度调整字体大小和行高。
  • Fontmatrix- Mac 和 Windows 操作系统、Microsoft Office 和 Adobe Creative Suite 捆绑的字体矩阵。
  • Google Fonts- Google Fonts 让每个人都能快速轻松地使用网络字体。我们的目标是创建一个供世界使用的网络字体目录。我们的 API 服务可以在几秒钟内轻松将 Google Fonts 添加到网站。
  • Gutenberg- Gutenberg 是一个灵活且易于使用的网络排版入门套件,适用于网页设计师和开发者。
  • Lettering.js- Web 字体正在网络上爆炸式增长,但 CSS 目前无法提供逐字控制。因此,我们创建了一个 jQuery 插件来为您提供这种控制。
  • OpenFoundry- 一个在无噪音环境中开放源代码字体的平台;突出其美感,并鼓励进一步探索。
  • Pure Typography- 更好的 Web 字体的 CSS 样式。依赖于 Pure。
  • 通过@font-face 快速了解 Web 字体- CSS3 中的@font-face 功能允许我们在网络上以可访问、可操作和可扩展的方式使用自定义字体。
  • 使用 vh 和 vw 单位实现真正流畅的排版- 本文介绍了视口单位和其他技术,以实现随屏幕平滑缩放的排版。
  • TypeButter- TypeButter 允许您为网站上的任何字体设置光学字距调整。如果您渴望拥有今天浏览器无法提供的精美排版文本,那么这个插件就是为您准备的。
  • Typeset.css- 一个务实的 CSS 排版重置,用于样式化用户生成的内容,如博客文章、评论和论坛内容。
  • Typeset.css- 一个 Sass 库,提供了一些合理的默认样式、可选的类以按需使用和扩展,以及一些实用函数和混合器,使提升您的排版更简单。
  • bacon- Bacon 是一个 jQuery 插件,允许您将文本围绕贝塞尔曲线或直线包裹。
  • slabText- 一个用于生成大号、粗体和响应式标题的 jQuery 插件。
  • trunk8- trunk8 是一个智能文本截断插件,用于 jQuery。当应用于大块文本时,trunk8 会截断足够的文本,以防止其溢出。

可视化

将数据置于视觉环境中_
  • Bonsai.js- 一个轻量级图形库,具有直观的图形 API 和 SVG 渲染器。
  • Chart.js- 简洁、干净且引人入胜的图表,适用于设计师和开发者。
  • Crossfilter- Crossfilter 是一个用于在浏览器中探索大型多元数据集的 JavaScript 库。
  • Cube- Cube 是一个用于收集带时间戳的事件并导出指标的系统。通过收集事件而不是指标,Cube 允许您事后计算汇总统计数据。
  • Cubism.js- Cubism.js 是一个用于可视化时间序列的 D3 插件。使用 Cubism 构建更好的实时仪表板,从 Graphite、Cube 和其他来源获取数据。
  • D3.js- D3.js 是一个基于数据操作文档的 JavaScript 库。D3 帮助您使用 HTML、SVG 和 CSS 使数据生动起来。
  • DataMaps- 使用 D3.js 在单个 JavaScript 文件中为网络创建可定制的 SVG(世界)地图可视化。
  • D3 交互式入门- 我在用 PowerPoint 解释 D3 感到沮丧后,整理的 D3 幻灯片。
  • NVD3- 这个项目试图为 d3.js 构建可重用的图表和图表组件,同时不剥夺 d3.js 赋予你的能力。
  • 教程:D3 入门- 基本上我们只是在屏幕上随机绘制隐藏的圆圈,然后将它们过渡到屏幕的一部分。然后我们添加一些交互,以便当鼠标移动到圆圈上时,圆圈会移动。
  • xCharts- xCharts 是一个 JavaScript 库,用于使用 D3.js 为 Web 构建美观的自定义数据驱动图表可视化。使用 HTML、CSS 和 SVG,xCharts 设计为动态、流畅,并开放集成和定制。
  • Easy Pie Chart- Easy Pie Chart 是一个使用 canvas 元素来为单个值渲染简单饼图的 jQuery 插件
  • Flot- Flot 是一个专注于简单使用、吸引人外观和交互功能的纯 JavaScript 绘图库
  • Google Chart Tools- Google Visualization API 允许您在结构化数据上创建图表和报告应用程序,并帮助您直接将这些集成到您的网站中
  • Paper.js- Paper.js 提供了一个干净的场景图/文档对象模型以及许多强大的功能,用于创建和操作矢量图形和贝塞尔曲线
  • Photon- Photon 是一个 JavaScript 库,为 3D 空间中的 DOM 元素添加简单的光照效果。
  • Piecon- 一个用于在您喜爱的图标中动态生成进度饼图的微小 JavaScript 库。
  • Processing.js- Processing.js 是流行 Processing 可视化编程语言的一个姐妹项目,专为网络设计。Processing.js 使您的数据可视化工作能够使用网络标准。
  • Smoothie Charts- 用于流式数据的 JavaScript 图表库。
  • TimelineJS- TimelineJS 是一个开源工具,使任何人都能创建视觉丰富、交互式的 时间线。
  • Timesheet.js- 使用性感的 HTML5 和 CSS3 可视化您的数据和事件。使用狡猾的 JavaScript 创建简单的工时表。使用 CSS 进行样式设置,并享受移动端的乐趣。
  • Treefun by Jim Blackler- 该工具创建 SVG(标准矢量图形)文件,以说明结构化为基本树形的信息。
  • jQuery.Gantt- 使用著名的 jQuery 开发便利性绘制甘特图。
  • jStat- jStat 是一个用 JavaScript 编写的统计库,允许您执行高级统计操作,而无需专门的统计语言(例如 MATLAB 或 R)。
  • morris.js- Morris.js 是一个非常简单的 API,用于绘制线形图、柱状图、区域图和甜甜圈图。
  • mxgraph- mxGraph 是一个 JavaScript 图形库,能够快速创建交互式图形和图表应用程序,这些应用程序可以在任何主要浏览器中原生运行,同时支持 HTML 5 和 Internet Explorer v7+。
  • three.js- Three.js 是一个库,使 WebGL(浏览器中的 3D)易于使用。虽然原始 WebGL 中的一个简单立方体会产生数百行 JavaScript 和着色器代码,但 Three.js 的等效代码只需其中的一小部分。
  • vis.js- Vis.js 是一个动态的、基于浏览器的可视化库。该库设计易于使用,能够处理大量动态数据,并支持数据的操作。

架构

前端代码的高级结构以及创建此类结构的规范_
  • Algorithm Visualizer- 一个包含代码和每个算法的可视化的算法集合。
  • Sorting Algorithms Animations- 以下动画展示了如何从不同的起始点使用不同的算法有效地对数据集进行排序。
  • CSS Modules- CSS 模块是一个默认情况下所有类名和动画名都局部作用域的 CSS 文件。
  • CSS Modules Documentation- 概述和一些实现。
  • ES CSS Modules- 结合 CSS Modules 和 ES 导入的 PostCSS 插件。
  • Tree Shaking Bootstrap- Jacob Parker 描述了如何利用 CSS 模块和 ES6 模块只包含网站实际使用的 Bootstrap 部分。
  • 组件 - 可重用和可组合的 HTML、CSS 和/或 JavaScript 代码片段,主要用于 GUI 元素。
  • 组件检查- 在这个项目中,Donald Pipowitch 比较了 Angular、Ember、Cycle.js 和 React 等几个框架中组件的使用和开发。
  • 容器组件- 容器组件是一种模式,允许将数据获取和渲染分离,从而提高(子)组件的可重用性。
  • Devbridge Styleguide- Devbridge Styleguide 帮助您创建、共享和自动化您的品牌视觉样式库。
  • 展示组件和容器组件- Dan Abramov 创建了一种分离展示组件和容器组件的模式,以提高应用程序代码的可重用性和清晰度。
  • Web Components - Web Components 是一个 W3C 标准,用于为 Web 平台提供封装的、可重用的和可组合的组件。
  • 我们组件化了吗?- 跟踪 Web Components 通过标准化、polyfill 化和实现的过程。
  • 自定义元素- Eric Bidelman 描述了如何创建新的 HTML 元素以及管理它们的生命周期。
  • 自定义元素 W3C 编辑草案- 本规范描述了使作者能够在文档中定义和使用新的 DOM 元素类型的方法。
  • HTML 导入 W3C 编辑草案- HTML 导入是一种在 HTML 文档中包含和重用 HTML 文档的方式。
  • HTML 导入:Web 的 #include- Eric Bidelman 介绍了如何使用 HTML 导入,并讨论了几个边缘情况。
  • HTML 的新模板标签- 模板元素允许您声明 DOM 片段,这些片段在页面加载时被解析为非激活状态,并在运行时稍后实例化。
  • Shadow DOM 101- Dominic Cooney 在本教程中向你展示如何使用 Shadow DOM。
  • Shadow DOM 201- Eric Bidelman 解释了与 Shadow DOM 元素样式相关的进阶主题。
  • Shadow DOM 301- Eric Bidelman 讨论了高级 Shadow DOM 主题,如多个 shadow roots、插入点、事件模型和 Shadow DOM 可视化器。
  • Shadow DOM W3C 编辑器草案- 该规范描述了一种将多个 DOM 树组合成一个层次结构的方法,以及这些树如何在文档中相互作用,从而实现更好的 DOM 组合。
  • ShadowDOM 可视化工具- 该工具允许您可视化 Shadow DOM 在浏览器中的渲染方式。
  • 为什么 Web 组件如此重要- Leon Revill 将 Web 组件与不同框架中的概念进行比较,并解释了 Web 组件的重要性。
  • 使用 ES2015 (ES6) 编写 Web 组件- 本教程展示了如何使用 ES2015 创建 Web 组件,以及如何使用 Babel 将其转译回 ES5。
  • DOM 差异与补丁 - 差异与补丁是一种模式,允许更快、更简单地渲染和更新 DOM 树,类似于 jQuery 的手动操作。
  • JavaScript 框架中的变更及其检测- 本文探讨了多种管理状态的方法:Ember 的数据绑定、Angular 的脏检查、React 的虚拟 DOM,以及其与不可变数据结构的关系。
  • Cito.js- cito.js 的核心是一个受 React/Mithril 启发的虚拟 DOM 库。在此基础上,它将提供一个组件框架,使构建良好封装的组件变得容易。
  • Incremental DOM- Incremental DOM 是一个用于构建和更新 DOM 树的库,当数据变化时,它会在原地更新。它与成熟的虚拟 DOM 方法不同之处在于,不会创建中间树(现有的树会被原地修改)。
  • 介绍 Incremental DOM- Incremental DOM 是一个受虚拟 DOM 启发的 Google 开发的库。
  • Morphdom- 轻量级模块,用于将现有的 DOM 节点树变形以匹配目标 DOM 节点树。它速度快,并且与真实 DOM 一起工作——这里没有虚拟 DOM!
  • React Demystified- 本文试图解释 React.js 和虚拟 DOM 的核心思想。
  • React vs Incremental DOM vs Glimmer- 在这篇帖子中,我们将探索三种构建动态 DOM 的技术。我们还将进行基准测试,找出哪一种更快。
  • React-less Virtual DOM with Snabbdom: functions everywhere!- Yassine Elouafi 在这篇帖子中展示了如何使用一个小型且独立的库编写基于虚拟 DOM 的应用程序。
  • Snabbdom- 一个注重简洁性、模块化、强大功能和性能的虚拟 DOM 库。
  • Virtual DOM- Virtual-dom 是一个模块集合,旨在为您的应用程序提供一种声明式的方式来表示 DOM。因此,您不需要更新 DOM,只需创建一个虚拟树或 VTree,它看起来就像您想要的 DOM 状态。
  • html-to-vdom- 这是另一个将 HTML 转换为 vtree 的库。它与 virtual-dom 一起使用,用于将基于模板的视图转换为虚拟 DOM 视图。
  • html2hyperscript- 自动将旧的 HTML 标记转换为新的 Hyperscript 标记,可直接嵌入到您的组件 JavaScript 代码中。
  • vdom-to-html- 将虚拟 DOM 节点转换为 HTML。
  • vdom-virtualize- 将一个 DOMNode 转换为虚拟 DOM 节点。
  • virtual-html- 将给定的 HTML 转换为虚拟 DOM 对象。
  • vtree-select- 使用 CSS 选择器选择 vtree 节点(由 virtual-dom 使用)。选择器匹配使用 cssauron 完成。有关支持的详细选择器信息,请参阅文档。
  • 设计模式集合 - 概述设计模式的资源与集合。
  • 关于 HTML 语义和前端架构- 一系列关于 HTML 语义、组件、前端架构方法、类命名模式以及 HTTP 压缩的思考、经验和想法的集合。
  • Box Tech Talk: 可扩展 JavaScript 应用架构- Nicholas Zakas(2012 年)关于 JavaScript 架构的视频。
  • 学习 JavaScript 设计模式- 在这本免费书籍中,Addy Osmani 探索了如何将古典和现代设计模式应用于 JavaScript 编程语言。
  • 《大规模 JavaScript 应用架构模式》- Addy Osmani 对前端开发领域中现有架构解决方案的全面概述。
  • 可扩展的 JavaScript 应用架构- 在这个视频(2011 年)中,Nicholas Zakas 讨论了具有大量 JavaScript 元素的复杂、模块化 Web 应用的前端架构。
  • 深入浅出单页应用- 这是我开始使用单页应用时想要的书。它不是特定框架的 API 参考,而是侧重于讨论模式、实现选择和良好的实践。
  • JavaScript 模块 - 模块将程序划分为根据某些标准属于一起的代码簇。
  • 《Eloquent JavaScript》第 10 章:模块- 本章探讨了代码分区的优势,并展示了在 JavaScript 中构建模块的技术。
  • 深入 ES6:模块- 本文重点介绍了 ES6 的导出和导入关键字。
  • 无需打包的高效模块加载- 我们可以将 ES2015 模块、模块的静态分析、HTTP/2、缓存、Service Workers 和布隆过滤器结合起来,创建一个客户端可以高效加载任何模块的服务器-客户端关系。
  • JavaScript 模块:初学者指南- 在这篇帖子中,Preethi Kasireddy 将以简单的英语为您解释模块打包器、AMD 和 CommonJS 等术语,并附带一些代码示例。
  • 现代模块化 JavaScript 设计模式- Essential JavaScript Design Patterns 中关于模块的一章。
  • 模块打包器和加载器 - 用于将 JavaScript 模块打包成一个或多个文件的库。
  • Browserify- Browserify 允许你在浏览器中通过打包所有依赖来 require('modules')。
  • Budo- 一个 Browserify 开发服务器,专注于增量重新加载、LiveReload 集成(包括 CSS 注入)以及其他高级功能。
  • Watchify- Watchify 为 browserify 构建提供监视模式。
  • CrapLoader- crapLoader 的目标是加载包含 document.write 的广告、小部件或任何 JavaScript 代码。该库劫持 document.write,并将从每个脚本加载的内容委托到正确的位置。
  • Modules Webmake- 一个类似于 Browserify 的 CommonJS 模块打包器,但由于不同的需求查找器而更快。
  • Require.js- RequireJS 是一个 JavaScript 文件和 AMD 模块加载器。它针对浏览器使用进行了优化,但也可以用于其他 JavaScript 环境。
  • Require1k- 1KB 大小的浏览器 CommonJS require,无需构建。
  • Rollup.js- Rollup 是一个下一代 JavaScript 模块打包工具。使用 ES2015 模块编写您的应用程序或库,然后有效地将它们打包成一个文件,用于浏览器和 Node.js。
  • SystemJS- 通用动态模块加载器 - 在浏览器和 NodeJS 中加载 ES6 模块、AMD、CommonJS 和全局脚本。与 Traceur 和 Babel 都兼容。
  • Modular JavaScript: A Beginners Guide to SystemJS & JSPM- jspm 和 SystemJS 的组合提供了一种统一的方式来安装和加载依赖项。
  • URequire- 终极 JavaScript 模块构建工具 & 自动化任务运行器。
  • Webpack- Webpack 是一个模块打包工具。它将具有依赖关系的模块作为输入,并生成代表这些模块的静态资源。
  • Block, Element, Modifying Your JavaScript Components- Mark Dalgleish 正在讨论如何使用 BEM 组织 React 代码,并使用 Webpack 构建所有内容。
  • Developing with Docker and Webpack- Chris Harrington 解释了如何使用 Webpack 和 Docker 创建开发环境,以尽可能与生产环境保持一致。
  • 《全栈 Redux 教程》- 我们将使用测试优先开发方法,逐步构建一个用于真实应用的 Node+Redux 后端和 React+Redux 前端。
  • 如何设置 Webpack 图像加载器- 这个简短的教程将帮助你设置 Webpack 中的图像加载器。
  • React + Redux 中的 SoundCloud 客户端- 完成本教程后,你将能够使用 Webpack 和 Babel 创建自己的 React + Redux 项目。
  • 从学徒到大师的 Webpack- 本指南的目的是帮助你入门 Webpack,并超越基础知识。
  • WebpackBin- 一个 Webpack 代码沙箱。
  • 为什么我认为 Webpack 是构建管道的正确方法- Thomas Boyt 比较了 Grunt、Gulp、Broccoli 和 Webpack 发现依赖项的方式。
  • UMD (Universal Module Definition)- 该存储库形式化了 JavaScript 模块的通用模块定义 (UMD) API 的设计和实现。这些模块可以在任何地方工作,无论是在客户端、服务器还是其他地方。
  • 使用 AMD、CommonJS 和 ES Harmony 编写模块化 JavaScript- 在这篇文章中,Addy Osmani 回顾了使用现代模块格式 AMD、CommonJS 和 ES6 模块编写模块化 JavaScript 的几种选项。
  • 可观察对象 - 可观察对象是一个可以发出零个或多个事件的事件流,并且可能结束也可能不结束。如果它结束了,那么它通过发出一个错误或一个特殊的“完成”事件来完成。
  • ECMAScript 可观察对象- 该提案向 ECMAScript 标准库引入了可观察对象类型。可观察对象类型可用于对 DOM 事件、计时器间隔和套接字等基于推送的数据源进行建模。
  • 响应式扩展 (RxJS)- RxJS 是一套使用可观察对象序列和流畅查询运算符来组合异步和事件驱动程序的库。
  • 使用响应式扩展的异步 JavaScript- Jafar Husain 在此视频解释了 Netflix 如何使用响应式扩展 (Rx) 库来构建响应式用户体验,这些体验力求以事件驱动、可扩展和弹性为目标。
  • 探索 Rx 操作符:FlatMap- Christoph Burgdorf 介绍了 FlatMap 操作符及其在集合和可观察对象中的使用方法。
  • 探索 Rx 操作符:Map- Christoph Burgdorf 解释了如何在 RxJS 中使用 map 操作符。
  • 函数式核心响应式外壳- Giovanni Lodi 概述了不同的架构元模式,并描述了他关于函数式编程和可观察对象作为控制副作用方面的当前发现。
  • 学习 RX- 一系列交互式练习,用于学习 Microsoft 的 JavaScript 反应式扩展 (Rx) 库。
  • 学习 RxJS- 该网站专注于使 RxJS 概念易于理解,示例清晰且易于探索,并在整个网站中提供对最佳 RxJS 相关材料的引用。
  • 现实世界的可观察对象- Sergi Mansilla 编写了一个 FTP 客户端,并将其作为基于 RxJS 的现实世界应用程序的示例。
  • Rx 训练游戏- Rx 训练游戏是一个编码游乐场,可用于学习和练习基于 Reactive Extensions 的基于网格的游戏。
  • Rx-Book- 一本关于 RxJS v.4.0 的完整书籍。
  • RxMarbles- 一个用于实验 Rx Observables 图表的 Web 应用,用于学习目的。
  • RxState- 基于 RxJS 和 Immutable.js 的简单、主观的状态管理库。
  • 在 Angular 2 中利用 Observables- Christoph Burgdorf 描述了 Observables 的优势以及如何在 Angular 2 环境中使用它们。
  • 使用 Observable 序列的 Transducers- RxJS 书籍中的一章,描述了 Transducers。
  • 我们为何构建 Xstream- 作者们需要一个为 Cycle.js 定制的流库。它需要仅是“热”的,kB 大小小,并且应该只有少数几个直观的操作符。
  • 路由 - 路由系统解析一个字符串输入(通常是 URL),并通过将字符串与多个模式进行匹配来决定应该执行哪个操作。
  • 用 20 行代码实现一个 JavaScript 路由器- Joakim Carlstein 展示了如何使用数据绑定编写一个简单的路由器。
  • Crossroads.js- Crossroads.js 是一个强大且灵活的路由系统。如果正确使用,它可以通过解耦对象以及抽象导航路径和服务器请求来降低代码复杂性。
  • Director- 一个用于 JavaScript 的微小且同构的 URL 路由器。
  • 使用元素封装路由- Peter Burns 描述了一种基于 Polymer 元素的路由方法,该方法允许创建链式和模块化的路由。
  • Hash.js- Hash.js 是一个 0.5 KB 的脚本,允许你操作 URL 中 # 后面的所有内容。
  • JQuery Address- jQuery Address 插件提供了强大的深度链接功能,并允许创建指向网站部分或应用程序状态的唯一虚拟地址。
  • Page.js- 受 Express 路由器启发的微型客户端路由器。
  • Roadcrew.js- Roadcrew.js 是一个小的 JavaScript 组件,允许你切换单文件网站的页面。
  • Route Recognizer- 一个轻量级的 JavaScript 库,用于将路径与注册的路由进行匹配。它包括对动态和星号段以及嵌套处理程序的支持。
  • Router.js (Ember)- Router.js 是 Ember.js 使用的路由微型库。
  • Router5- 一个简单、强大、模块化和可扩展的路由器,将您的命名路由组织成树形结构并处理路由转换。在其最简单的形式中,Router5 处理路由指令并输出状态更新。
  • UI 数据绑定 - 将 UI 元素绑定到应用程序领域模型。大多数框架采用观察者模式作为底层的绑定机制。
  • Ember 中的绑定- 与大多数包含某种绑定实现的框架不同,Ember.js 中的绑定可用于任何对象。
  • JavaScript 框架中的变更及其检测- 本文探讨了管理状态的几种方法:Ember 的数据绑定、Angular 的脏检查、React 的虚拟 DOM,以及其与不可变数据结构的关系。
  • JavaScript 中的简易双向数据绑定- 双向数据绑定是指将对象属性的变化绑定到 UI 的变化,以及反之亦然的能力。本文描述了如何使用纯 JavaScript 实现数据绑定。
  • Functional Reactive Bindings- 一个 CommonJS 包,包含函数式和通用的构建块,以帮助逐步确保一致的状态。
  • Knockout.js- Knockout 是一个独立的 JavaScript 实现,用于 Model-View-ViewModel 模式,并支持模板。
  • Rivets.js- 轻量级且强大的数据绑定+模板解决方案,用于构建现代 Web 应用程序。
  • Synapse- 用于在几乎任何对象之间支持数据绑定的钩子。
  • 单向数据流 - 一种提倡数据流和事件在单一方向上流动的架构设计模式,通常创建一个交互式循环。
  • Flux- Flux 是 Facebook 用于构建客户端 Web 应用程序的应用程序架构。它通过利用单向数据流来补充 React 的可组合视图组件。它更像是一种模式而不是一个正式的框架,并且您可以立即开始使用 Flux 而无需大量新代码。
  • Fluxiny- flux 架构的 ~1K 实现
  • 不可变用户界面- Lee Byron 讨论了基于不可变数据结构的单向数据流架构,与传统基于 MVC 的设计形成对比。
  • Immutable.js- 用于 JavaScript 的不可变持久化数据集合,提高效率和简洁性。
  • MobX- MobX 是一个经过实战检验的库,通过透明地应用函数式响应式编程,使状态管理变得简单且可扩展。
  • 模型-视图-意图 (MVI) - MVI 是一种单向数据流架构模式,由三个部分组成:意图(监听用户)、模型(处理信息)和视图(输出回用户)。
  • Cycle.js 文档中的 MVI- André Staltz 描述了如何将应用程序重构为 MVI 模式。
  • 使用 React 和 RxJS 的模型-视图-意图- Satish Chilukuri 展示了使用 React 实现 MVI 模式的示例。
  • 响应式 MVC 和虚拟 DOM- André Staltz 描述了响应式编程与交互式编程的概念,接着是 MVI 设计模式,并将其与 React/Flux 进行比较。
  • 开发者需要了解的 MVI(模型-视图-意图)- 文章解释了 MVI 模式的一般概念及其与 React、响应式编程和 Cycle.js 的关系。
  • React 和 Flux 没什么新东西,只有一个例外- Andre Staltz 谈论了 React 和 Flux 中使其创新和吸引人的方面。
  • Redux- Redux 是一个用于 JavaScript 应用的可预测状态容器。它试图通过在更新可以发生的时间和方式上施加某些限制来使状态突变变得可预测。
  • 使用 TypeScript 和 Angular 2 构建 Redux- 在这篇帖子中,我们将讨论 Redux 的思想。如何构建我们自己的 Redux Store 的迷你版本,并将其连接到 Angular 2。
  • 探索 Redux 中间件- 作者解释了如何为 Redux 编写自己的中间件。他深入研究了链中每个中间件函数的执行路径,并展示了一些示例。
  • 《Full-Stack Redux 教程》- 我们将使用测试优先开发方法,逐步构建一个用于真实应用的 Node+Redux 后端和 React+Redux 前端。
  • Immutable.js- 用于 JavaScript 的不可变持久化数据集合,提高效率和简洁性。
  • 学习 Redux- Wes Bos 的视频系列,教授 Redux。从设置 Webpack 到使用 Dev Tools。
  • Normalizr- 根据 schema 将深层嵌套的 JSON API 响应规范化,适用于 Flux 和 Redux 应用。
  • Redux Actions- Redux 的 Flux 标准动作工具集。
  • Redux Form- 使用 react-redux 的更高阶组件,将表单状态保持在 Redux 存储中。
  • Redux Loop- elm-effects 和 Elm 架构的 Redux 移植,允许您通过从 reducer 中返回它们来自然且纯粹地序列化您的效果。
  • Redux Saga- Redux 应用程序的替代副作用中间件。与通过 redux-thunk 中间件处理的 dispatch Thunks 不同,您创建 Sagas 以在中央位置收集所有副作用逻辑。
  • Redux 教程- 该存储库包含一个逐步教程,帮助理解 flux 以及更具体的 Redux。
  • 重新发明 Flux - 与 Dan Abramov 的访谈- Dan 谈到了他开发 Redux 的原因。
  • Reselect- 一个简单的 Redux “选择器”库,灵感来自 NuclearJS 中的获取器和 re-frame 中的订阅。
  • React/Redux 的一些问题- André Staltz 介绍了 React + Redux 的优缺点。
  • 测试 React & Redux 代码库- 这一系列旨在为您提供非常全面的指导,通过测试 React 和 Redux 代码库,您可以真正通过单元测试覆盖大量内容,因为代码大多是通用的。
  • Redux 生态系统- 让我们来看看在适当的时候您将不得不处理的大多数功能,—— 而且 React & Redux 本身无法帮助您。
  • react-europe 2016 上的 Redux 之旅- 在这次演讲中,Dan Abramov 回顾了 Redux 的过去、现在和未来。
  • React + Redux 中的 SoundCloud 客户端- 完成这个逐步教程后,您将能够使用 Webpack 和 Babel 创建自己的 React + Redux 项目。
  • Tic-Tac-Toe.js:使用原生 JavaScript 的 Redux 模式- Ramon Victor 描述了如何使用 Redux 与纯 JavaScript。没有 React,没有 jQuery,没有微型库,它不依赖任何其他东西。它只是纯 JS。
  • 理解 Redux 中间件- 作者描述了创建和应用中间件函数所涉及的功能性编程概念。
  • 单向数据流架构(演讲)- Andre Staltz 比较了现代架构模式,包括 Flux、Redux、Model-View-Intent、Elm Arch 和 BEST。
  • 原子设计- 原子设计讨论了构建强大设计系统的重要性,并介绍了一种用于创建智能、有意界面系统的方法论。
  • 更无缝的工作流程——风格指南助力更好的设计与开发- Ash Connolly 解释了什么是风格指南以及它们为设计师和开发者带来的好处。
  • Atomic Docs- Atomic Docs 是一个风格指南生成器和组件管理器。Atomic Docs 是用 PHP 构建的。灵感来自 Brad Frost 的原子设计原则。
  • Atomic Lab- 基于原子设计的模板共享和编码环境。
  • 编写 jQuery 插件 - jQuery 是一个工具库和插件框架。本节收集了关于创建此类插件的相关资源。
  • 高级插件概念- jQuery 插件编写最佳实践的集合。
  • 如何创建一个基本插件- 文章描述了基本插件的创建,并提供了一个简单的模板。
  • 编写糟糕的 jQuery 插件的迹象- jQuery 插件反模式的集合。
  • 编写 jQuery 插件的终极指南- 关于如何开发 jQuery 插件的全面指南,包括一个简单的模板。
  • 使用 jQuery UI 组件工厂编写有状态插件- 文章通过构建一个简单的进度条插件,展示了组件工厂的功能。
  • jQuery 模板- 该项目不会试图为每一种可能的模式提供一个完美的解决方案,但会尝试为初学者和以上水平的人提供一个简单的模板。
  • jQuery 插件模式- 该项目不会试图为每一种可能的模式提供实现,但会尝试涵盖开发者在实际中常用的流行模式。
  • 块元素修饰符 (BEM)- 一种旨在实现快速开发、长期项目、团队可扩展性和代码重用的方法论。
  • 一种新的前端方法论:BEM- SmashingMagazine 上 Varvara Stepanova 的介绍。
  • BEM 方法论简介- tutsplus 上关于 BEM 方法论的入门文章。
  • BEM 入门- Joe Richardson、Robin Rendle 和 CSS-Tricks 团队合作的帖子,介绍了 BEM 并附带了一些好的示例。
  • BEM 我终于明白了- 在这篇文章中,Andrei Popa 将专注于 BEM 的基础知识以及如何处理从简单到复杂的解剖结构。
  • 对抗 BEM(扩展版):10 个常见问题及如何避免它们- 本文旨在为已经对 BEM 感兴趣并希望更有效地使用它的人,或对 BEM 感兴趣并希望了解更多的人提供帮助。
  • 块、元素、修改你的 JavaScript 组件- Mark Dalgleish 正在讨论如何使用 BEM 组织 React 代码,并使用 Webpack 构建所有内容。
  • Emmet 的 BEM 过滤器- 如果你以 OOCSS 风格编写 HTML 和 CSS 代码,特别是 Yandex 的 BEM 风格,你会喜欢这个过滤器。它提供了一些别名和自动插入常用块和元素名称到类中。
  • BEM 的五十种色调- 文章描述了 BEM 的不同变体。
  • 我们如何使用 BEM 模块化我们的 CSS- Andrei Popa 描述了 AlphaSights 团队在项目中实施 BEM 时遇到的挑战。
  • BEM 方法论简介 (Toptal)- BEM 方法论和平台的总体介绍。
  • MindBEMding – 了解 BEM 语法- csswizardry 上的一篇文章,解释了 CSS 类的 BEM 语法。
  • Pobem- 用于 BEM 语法的 PostCSS 插件。
  • Sass 3.3 对 BEM 模块的支持- Sass 的下一个主要版本即将发布,并带来了对 BEM 风格模块的真实支持...
  • 是否采用 BEM- 关于 BEM 方法的系列访谈。
  • Cycle.js- 一个函数式和响应式的 JavaScript 框架,解决了在人与计算机之间的对话(相互观察)过程中出现的可观察对象的循环依赖问题。
  • Async Driver- 用于创建 cycle.js 异步请求驱动的高阶工厂。几乎可以完全消除这种驱动程序的样板代码。
  • Cycle.js 旨在解决问题- 在这个视频中,André Staltz 展示了 Cycle.js 的实际用途,旨在解决您的客户/业务可能遇到的问题。
  • Cycle.js 和函数式响应式用户界面- 在这次演讲中,我们将发现 Cycle.js 如何纯粹地实现响应式和函数式,以及它为何是 React 的一个有趣替代方案。
  • Draw Cycle- 简单的 Cycle.js 程序可视化
  • 驱动器- 驱动器是监听可观察数据源(其输入),执行命令式副作用,并可能返回可观察数据源(其输出)的函数。
  • 动画- 一个用于 requestAnimationFrame 的 Cycle 驱动程序。
  • 音频图驱动- 基于 virtual-audio-graph 的 Cycle.js 音频图驱动程序。
  • Cookie- Cycle.js Cookie 驱动程序,基于 cookie_js 库。
  • DOM- 基于 virtual-dom 的 Cycle.js 标准 DOM 驱动程序,以及其他辅助工具。
  • Fetch- 一个用于发起 HTTP 请求的 Cycle.js 驱动,使用 Fetch API。
  • Fetcher- 一个使用 stackable-fetcher 发起 HTTP 请求的 Cycle.js 驱动。
  • Firebase- Firebase JavaScript API 的一个薄层封装,允许你查询并声明式地更新你最喜欢的实时数据库。
  • HTTP- 基于 superagent 的 Cycle.js 驱动,用于发起 HTTP 请求。
  • Hammer.js- 该驱动程序集成了 Hammer.js 手势库。
  • History- 基于 rackt/history 库的 Cycle.js URL 驱动程序。
  • Keys- 一个用于键盘事件的 Cycle.js 驱动程序。
  • Mongoose.js- 一个用于在 Cycle JS 中使用 Mongoose 的驱动程序。支持读写操作。
  • 通知- 一个用于显示和响应 HTML5 通知的 Cycle.js 驱动程序。
  • 路由器- 一个专为 Cycle.js 设计从头构建的路由器。它建立在经过实战考验的 switch-path 库用于路由匹配和 rackt/history 用于处理 History API 的肩膀上。
  • Router5- 基于 router5 的 Cycle.js 源/接收器路由驱动程序。
  • 服务器发送事件- Cycle.js 的服务器发送事件 (SSE) 驱动程序,SSE 也是一种称为 EventSource 的浏览器功能。服务器发送事件允许服务器持续用新事件更新页面,而无需采用长轮询等技巧。
  • Snabbdom- 使用 snabbdom 库的另一个 DOM 驱动程序。
  • Socket.IO- 用于使用 Socket.IO 的 Cycle 驱动程序
  • Storage- 用于在浏览器中使用 localStorage 和 sessionStorage 的 Cycle.js 驱动程序。
  • 示例项目 - 使用 Cycle.js 构建的示例应用程序
  • Cycle.js 示例- 浏览和学习使用 Core、DOM 驱动器、HTML 驱动器、HTTP 驱动器、JSONP 驱动器等的小 Cycle.js 应用的示例。
  • RX Marbles- Rx 可观察对象的交互式图表。
  • TODO: 最小可行披萨- 使用 Cycle.js 实现的最小可行披萨。
  • Tricycle- 尝试 Cycle.js 的草稿板。
  • 使用 Cycle.js 的函数式响应式编程入门- Nick Johnstone 在这个视频演示中介绍了使用 Cycle.js 进行开发。
  • 学习如何骑行:Cycle.js 入门- 在这次演讲中,Fernando Macias Pereznieto 向我们介绍了使用 Cycle.js 的优点、缺点和美好之处,无论你是完全的新手还是经验丰富的 JS 大师。
  • Motorcycle.js- 这是一个兄弟项目,将在可预见的未来与 Cycle.js 一起继续发展和成长。这个项目的重点是尽可能地进行性能优化。
  • Most- 高性能的单子式响应式流。
  • 即插即用 Cycle.js 让您的可观察流工作起来- Frederik Krautwald 解释了 Cycle.js 的原理、内部工作原理以及如何使用它创建一个简单的驱动程序程序。
  • Tricycle- 一个用于尝试 Cycle.js 的草稿板。
  • 开发者需要了解的 MVI(模型-视图-意图)- 文章解释了通用的 MVI 模式以及它与 React、响应式编程和 Cycle.js 的关系。
  • Polymer 项目- Polymer 库旨在使开发者能够更轻松、更快地创建现代 Web 的优秀、可重用组件。
  • 使用 ES6 类构建 Web 组件- Web 组件将标记演变成更有意义、可维护且高度模块化的东西。得益于这些新的 API 原语,我们不仅在使用中获得了更好的易用性,还获得了更好的整体结构、设计和可重用性。
  • 开发前端微服务- 在这个系列文章中,我们将探讨在微服务背景下进行 Web 组件开发。
  • 页面惰性加载- iron-lazy-pages 是一个 Polymer 组件,允许按需加载页面。
  • ShadowDOM 可视化工具- 这个工具允许你可视化 Shadow DOM 在浏览器中的渲染方式。
  • 在 Polymer 中思考 (Polymer Summit 2015)- Kevin Schaaf 解释了如何使用数据绑定和组合仅使用 Polymer 构建复杂应用程序。
  • 使用 Polymer + RxJS + 只读数据实现单向数据流架构- Richard Anaya 描述了如何结合 Polymer、RxJS 和 Freezer 实现单向数据流架构。
  • 使用元素- 本指南描述了如何在现有项目中安装和使用独立的 Polymer 组件。
  • 使用 Polymer 与 Flux 和全局应用状态- Paulus Schoutsen 描述了他将 Polymer 和 NuclearJS 集成的经验。
  • 什么是阴影 DOM?- 在支持阴影 DOM 的浏览器上,可以有一个元素渲染复杂的 DOM,但可以将这种复杂性作为实现细节隐藏起来。
  • SMACSS- SMACSS(发音为“smacks”)是一种审视设计过程的方式,也是将那些严格的框架融入灵活的思维过程的一种方式。它试图在使用 CSS 时记录一致的网站开发方法。
  • T3- T3 是由 Box Inc. 赞助的一个极简 JavaScript 框架,为代码提供核心结构。
  • Elm 架构- Elm 架构是一种简单的、无限嵌套组件的模式。它非常适合模块化、代码重用和测试。
  • TodoMVC- 一个项目,它提供了使用当今流行的 JavaScript MV* 框架中的 MV* 概念实现的相同待办事项应用程序。
  • 不同观察者模式实现的比较- 以下比较仅涉及订阅事件类型、派发和移除事件监听器的基本功能。
  • 事件发射器、发布/订阅或延迟承诺- 在这篇文章中,Pete Otaqui 探索了每种模式的工作原理(非常基本的实现),并探讨了选择其中一种的原因。
  • 实现 - 使用事件驱动编程范式的库、框架和工具。
  • Bacon.js- 一个用于 JavaScript 的轻量级函数式响应式编程库。通过从命令式转换为函数式,将您的事件杂乱无章转变为干净且声明式的“风水” Bacon。
  • Flight- 由 Twitter 开发的一个事件驱动型 Web 框架。
  • Mediator.js- Mediator 是一个简单的类,允许您注册、注销和调用订阅方法,以帮助基于事件、异步编程。
  • Postal.js- Postal.js 采用了熟悉的“事件式”范例,并通过提供“代理”和订阅者实现来扩展它
  • Radio.js- Radio.js 是一个轻量级的、无依赖的发布/订阅 JavaScript 库。使用它来在您的代码中实现观察者模式,以帮助解耦您的应用程序架构,从而提高可维护性。
  • js-signals- JavaScript 的自定义事件/消息系统。
  • pubsub.js- 一个小巧 (~600 字节,压缩后 ~300 字节) 且健壮的发布/订阅实现。
  • 《函数式 JavaScript 入门指南》 - 由 Derick Bailey 撰写,Chet Harrison 参与的 3 部系列文章,关于使用 JavaScript 进行函数式编程,包含许多示例。
  • 单子、单群和函数式 JavaScript 中的组合- Chet Harrison 以表单验证为例解释了单子。
  • 来自 Crowdcast 的笔记和代码- Chet Harrison 概述了函数式编程概念,并提供了逐步教程来构建单子。
  • 函数式编程的基础- 在这一集的第一集中,你将学习函数式编程的基本原理、它是什么、它来自哪里以及它的核心是什么。你将看到函数组合、函数纯度、柯里化、高阶函数和一等函数。
  • JS 中的无数种折叠方式- Brian Lonsdorf 在这段视频中提供了许多替代循环的函数式方法。
  • 函数式编程之旅- 吉姆·韦里奇 (Jim Weirich) 的演讲,展示了如何使用函数式编程和 Lambda 演算推导 Y 组合子。
  • Allong.es- Allong.es 是一个基于《JavaScript Allongé》一书中介绍的函数组合子和装饰器配方构建的 JavaScript 库。
  • Barely Functional- 一个小巧(2.7kb)的函数式编程库,使用原生 es5/6 操作。
  • JavaScript 中的基本惰性求值和缓存- 缓存是一种优化代码的方法,使其对于相同的输入返回缓存的计算结果。
  • Bilby.js- 基于范畴论的功能性库,具有不可变多方法、功能性数据结构、功能性运算符重载、自动化规范测试。
  • Composability: from Callbacks to Categories in ES6- 作者借鉴了一些函数式语言的思想,探索了一种解决回调地狱的不同方法。
  • Curry or Partial Application?- Eric Elliott 描述了部分应用和柯里化的区别。
  • Daggy- 用于创建带 catamorphism 的标记构造函数的库。
  • 日期 FP- 函数式编程日期操作库。
  • 函数式调试- 这篇文章将展示一个简单的解决方案,可以大大提升函数式 JavaScript 应用程序的调试体验。
  • 确定性- 一份涵盖 Web 函数式编程(尤其是前端)的有趣新闻和文章的每周摘要。
  • 示例项目 - 使用函数式编程的开源项目,最好是无参和无副作用的。
  • Async Problem- 该项目考虑了在目录内并发读取文件并连接其内容的各种方法。
  • CommonJS 模块依赖项解析器- 模块及其所有相关模块均使用无点风格编写。
  • Egg Hunt Server- 一种使用 FP 风格编写的 RESTful API。
  • Idealist- 一种函数式 HTTP 微框架。
  • Sanctuary Build Script- 用于生成 Sanctuary 网站的构建脚本。
  • FP DOM- 在 DOM 上下文中支持函数式编程的函数集合。
  • Fantasy Combinators- 用于 fantasy-land 项目的组合子。
  • Fantasy Land- 用于 JavaScript 中常见代数结构互操作的规范。
  • 符合规范的实现- 一份实现 Fantasy Land 规范的库列表。
  • Fantasy Lenses- 可组合的、不可变的数据获取器和设置器。
  • JavaScript 开发者的函数概念:柯里化- Andrew Robbins 讨论了柯里化的概念及其用途。
  • 函数核心响应式外壳- Giovanni Lodi 概述了不同的架构元模式,并描述了他对函数编程和可观察对象作为控制副作用的当前发现。
  • 函数式前端架构- 该仓库旨在记录和探索所谓的"Elm 架构"的实现。一种用于构建前端应用的简单函数式架构。
  • 函数式 JavaScript 小册子- Jichao Ouyang 介绍了使用 JavaScript 进行函数式编程,并描述了一些 Typeclasses,如 Functor 和 Monad。
  • 函数式 JavaScript 工作坊- 该工作坊的目标是创建一些可以通过简洁、原汁原味、规范的 JavaScript 解决的问题。
  • React 中的函数式原则- Jessica Kerr 讨论了四个函数式原则:组合、声明式风格、隔离和数据流,以及它们在 React 中的使用。
  • 函数式编程术语- 函数式编程领域的术语,用简单语言解释。
  • 面向 JavaScript 人员的函数式编程- Chet Corcos 解释了函数式编程的不同特性,如组合、柯里化、惰性求值、引用透明性,并比较了 Clojure 与 Haskell。
  • JavaScript 中的函数式重构- 在这篇文章中,Victor Savkin 展示了如何在重构 JavaScript 代码时应用函数式思维。他通过将一个简单的函数转换成一个更可扩展的函数,其中没有可变状态,也没有 if 语句来实现这一点。
  • Functional.js- Functional.js 是一个函数式 JavaScript 库。它支持柯里化和点式/隐式编程,并且这种方法论从一开始就得到了坚持。
  • Functionize- 一套辅助将非功能性库转化为功能性库的函数集合。
  • Futures and Monoids- Yassine Elouafi 以 Future、数字和字符串为例,解释了 Monoids 的本质。
  • 嘿 Underscore,你搞错了!- 在这次演讲中,Brian Lonsdorf 温和地批评了 underscore.js 在库设计上没有考虑柯里化和部分函数应用。
  • 不可变性、交互性与 JavaScript- 我们将深入探讨 JavaScript 数组的树形结构如何允许构建高效的不可变集合。然后我们将看到,通过拥抱不可变值,可以极大地简化客户端编程中的一些经典难题,包括但不限于撤销、错误回放以及在线/离线同步。
  • Immutable Sequence.js- 基于 Finger Tree 的 JavaScript 中不可变序列的高性能实现。
  • Immutable.js- 用于 JavaScript 的不可变持久化数据集合,提高效率和简洁性。
  • JSAir - JavaScript 中的函数式和不可变设计模式- JavaScript Air 的一期节目,关于“JavaScript 中函数式编程和不可变设计模式的如何和为何”,由 Dab Abramov 和 Brian Lonsdorf 作为嘉宾。
  • JavaScript 和类型思考- Yassine Elouafi 介绍代数数据类型,并举例说明简单类型和递归类型。
  • Reginald Braithwaite 的 JavaScript 组合器- 在这次演讲中,我们将探讨消费并返回函数的函数,并了解它们如何用于构建紧密遵循 JavaScript 自然风格的富有表现力的程序。
  • Lamda.js- 该库将字符串、数组、对象、数字和正则表达式实例上的所有方法转换为可以在无点方式中使用的函数。
  • Lenses 快速且实用- Brian Lonsdorf 的视频,介绍了 lenses。
  • Lenses 和虚拟 DOM 支持开放封闭- Hardy Jones 通过一个简单的虚拟 DOM 操作示例解释了 Lenses 的工作原理。
  • Lenses.js- 可组合的 kmett 风格的透镜。
  • Lodash/fp- lodash/fp 模块是 lodash 的一个实例,其方法被包装以产生不可变、自动柯里化的迭代器优先、数据最后的函数。
  • Making your JavaScript Pure- Jack Franklin 比较了纯函数和不纯函数,并描述了如何在 JavaScript 中利用函数式编程原则。
  • 单子 - 可组合的计算描述。单子的本质是将组合时间线与组合计算执行时间线分离,以及计算隐式携带额外数据的能力。
  • 单子集合 - 单子实现库。
  • Akh- Akh 包含一组常见的单子转换器,以及从这些转换器派生出的单子。Akh 结构实现了 Fantasy Land 规范。
  • Folktale- Folktale 是一套用于 JavaScript 通用函数式编程的库,它允许您编写更优雅、更少错误、更多可重用的模块化应用程序。
  • Monet.js- Monet 是一个辅助函数式编程的工具包,提供丰富的单子和其他有用函数。
  • 继续 Monad - 表示以继续传递风格(CPS)进行的计算。在继续传递风格中,函数结果不是返回,而是传递给另一个函数,作为参数(继续)。
  • JavaScript 中的限定继续 Monad- 这篇文章概述了 Atum 中的继续,并涵盖了 JavaScript 中限定继续 Monad 的实现。
  • Either Monad - Either 类型表示具有两种可能性的值:类型为 Either a b 的值要么是 Left a,要么是 Right b。它通常用于错误处理。
  • Lazy Either- LazyEither 类型用于表示一个惰性 Either 值。它与 Future 和 Promise 类型相似。
  • JavaScript 中的 Monads 实用入门:Either- Jakub Strojewski 介绍了 Either Monad,这是一种用于快速失败、同步计算链的工具。
  • 自由 Monad - 自由 Monad 满足所有 Monad 定律,但不进行任何计算。它只是构建一个嵌套的上下文序列。创建这种自由 Monad 值的用户负责对这些嵌套上下文进行处理。
  • Fantasy Frees- Coyoneda、Yoneda、Trampoline、Free Monad 和 Free Applicative 的实现,附带使用示例。
  • Hardy Jones 的自由 Monad 实验- Coyoneda、Coproduct、Either、Free、State、AJAX 等。
  • Free Monads Video Series- Brian Lonsdorf 关于自由 Monad 的视频系列,解释了 Coyoneda、Free Monad 和解释器。
  • Freeky- Brian Lonsdorf 的自由 Monad 集合。
  • Futures - Futures 表示异步操作(I/O)成功或失败时产生的值。
  • Fluture- 可调试的 Fantasy Land Future 库。
  • Folktale Task- 一个用于时间相关值的结构,为延迟计算、延迟等提供显式效果。
  • 从回调到 Future -> 函数式 -> 单子- Yassine Elouafi 通过一个简单的实现来介绍 Future,并将其与 Promise 进行比较。
  • Future IO- 一个符合 fantasy-land 规范的 Node.js 单子 IO 库。
  • Futurizer- 将回调风格的函数或 Promise 转换为 Future!
  • 简介 - 关于单子(monads)的入门材料。
  • JavaScript 中的单子- 本文解释了单子及其在 JavaScript 中的使用,包括 Identity(身份)、Maybe(可能)、List(列表)、Continuation(连续)、Do 语法和 Chaining(链接)。
  • JavaScript 中单子的实用入门- 为 JavaScript 开发者提供的一个简单实用的教程,展示了如何使用某些单子。
  • 使用 JavaScript 理解单子- 作者从一个处理显式不可变状态的问题开始,并使用 JavaScript 和单子来解决这个问题。
  • Maybe Monad - 使用 Maybe 是一种处理错误或异常情况的好方法,而无需采取极端措施,如错误。它是一种简单的错误 Monad,其中所有错误都由 Nothing 表示。可以使用 Either 类型构建更丰富的错误 Monad。
  • 《Monads 的温和介绍… Maybe?》- Maybe 和 Monad 世界的简短介绍。
  • 《Monad 的实用性:一级失败》- 本文展示了如何使用 Maybe Monad 处理简单的失败用例。然后扩展到复杂的失败场景,并展示如何用 Either Monad 对这些情况进行建模。
  • JavaScript 中的 Monad 实践介绍- 为 JavaScript 开发者提供的简单实用教程,展示了一些 Monad 的使用方法。
  • 读取单子 - 表示一个计算,可以从共享环境中读取值,将值从函数传递到函数,并在修改后的环境中执行子计算。
  • 不要害怕读取单子- Pascal Hartig 解释如何在 JavaScript 中使用读取单子。
  • Fantasy Readers- Fantasy Land 兼容的读取单子实现。
  • 读取单子实现的 LiveCoding 视频- 在这个视频中,你将学习如何从零开始使用和实现一个读取单子。
  • 每日一 Monad:Reader- Brian Lonsdorf 关于 Reader Monad 的短片视频。
  • 转换器 - 特殊类型,允许我们将两个 Monad 组合成一个共享两者行为的 Monad。
  • Akh- Akh 包含一组基本的常见 Monad 转换器,以及从这些转换器派生出的 Monad。Akh 结构实现了 Fantasy Land 规范。
  • Fantasy ArrayT- JavaScript 数组的 Monad 转换器。
  • Monad Transformers- Monad transformers 比较复杂,它们需要大量的类型转换。这个包的一个目标是通过减少创建新 transformer 所需的包装和解包来简化操作,并提供一种简单的方式来定义和组合 transformers。
  • Monad Transformers Library- JS 实用 Monad transformers。
  • Validation Monad - 适用于验证输入和聚合错误的析取类型。
  • Folktale Validation- Folktale 库的 Validation Monad 实现。
  • JavaScript 中的 Monads 实用入门:验证- Jakub Strojewski 展示了如何在简单的验证用例中累积错误。
  • Mori- 一个库,用于在纯 JavaScript 中舒适地使用 ClojureScript 的持久化数据结构和支持 API。
  • 函数式编程的足够好指南- Brian Lonsdorf 编写的一本书,介绍了 JavaScript 中的代数函数式编程。
  • Nanoscope- Nanoscope 是一个 javascript 库,旨在使数据复杂转换变得更加容易。它基于函数式 Lens 的概念构建——一种能够聚焦于数据结构子部分以获取和修改的构造。
  • Pointfree Fantasy- fantasy-land 的点式封装。函数使用 lodash 的 curry 函数进行柯里化,并在最后接收数据。它还提供了我们熟悉的 haskell 别名。
  • Pointfree Javascript- 在这篇博文中,Lucas Reis 介绍了所谓的点式编程风格,并通过一些常见场景展示了其优势。
  • 实用函数式编程:选择两项- James Coglan 在这段视频中试图展示如何在日常 JavaScript 编程中使用函数式概念。
  • Promises + FP = Beautiful Streams- Yassine Elouafi 展示了如何使用函数式编程和代数数据类型来推导出像流这样的响应式编程的纯函数式定义。
  • 纯 JavaScript- Christian Johansen 向你展示如何通过摆脱循环并采用函数作为主要的抽象单元来提升你的技能。
  • 纯 UI- Guillermo Rauch 讨论了应用程序 UI 的定义,它作为应用程序状态的一个纯函数。
  • PureScript- PureScript 是一种强类型、静态类型的语言,它编译成 JavaScript。它用 Haskell 编写并受其启发。
  • Ramda- 这是一个专为函数式编程风格设计的实用库,它使得创建函数式管道变得容易,并且永远不会修改用户数据。
  • 实用 Ramda - 函数式编程示例 - Tom MacWright 提供了一些 Ramda 的实用示例。
  • Ramda Fantasy- Fantasy Land 兼容类型,便于与 Ramda 集成。这是一个实验性项目,可能会与 Sanctuary 合并。
  • Sanctuary- Sanctuary 是一个受 Haskell 和 PureScript 启发的函数式编程库。它依赖于 Ramda 并与其配合良好。Sanctuary 使无需空值检查即可编写安全代码成为可能。
  • Sanctuary 构建脚本- 用于生成 Sanctuary 网站的构建脚本。
  • 函数式编程的小想法- Jack Hsu 尝试探讨构成函数式编程背后小想法的几个简单概念,并将这些概念与 JavaScript 中的代码示例联系起来。
  • Timm- 提供不可变性的辅助工具,具有快速读取和可接受的写入性能。
  • 转换器- 转换器是一种强大且可组合的方式来构建算法转换,您可以在许多上下文中重用这些转换。
  • Strange Loop 上的“转换器”演讲- 这次演讲将描述转换器,这是 Clojure 的一项新库功能(但对其他语言也很有兴趣),它强调可组合、无上下文、无中间结果的观念,如“映射”和“过滤”,以及它们在上述所有上下文中的具体重用。
  • 弄清楚转换器有什么用- Tim Cuthbertson 尝试了一些在 JavaScript 中使用转换器的合理但详细的示例。
  • 实现 - 实现转换器协议的库,并包含可立即使用的转换器。
  • Transduce- Kevin Beaty 从 underarm 中提取的实现。
  • Cognitect Labs 的 Transducers-js- Cognitect Labs 为 JavaScript 开发的高性能转换器实现。
  • 詹姆斯·朗的 Transducers.js 库- 一个用于通用数据转换的小型库(受 Clojure 的 transducers 启发)
  • Transducers.js 第二轮及基准测试- Transducers.js 的重构版本,包含一些基准测试、惰性求值、转换器协议。
  • Transducers.js:一个用于数据转换的 JavaScript 库- 一篇宣布 transducers.js 库并附带一些解释的文章。
  • 使用 Transducers 和 Ramda 流式处理日志- 在这篇文章中,我们将使用 Ramda 解析一个没有花括号的日志文件(同时介绍 transducers)。
  • Clojure 的 Transducers 文档- Transducers 是可组合的算法变换。它们独立于输入和输出源的上下文,并且仅以单个元素的形式指定变换的本质。
  • Transducers 详解:第一部分- 使用 JavaScript 介绍 Transducers。我们将从对数组进行归约开始,定义变换为转换器,然后逐步引入 Transducers 并使用它们与 transduce。
  • Transducers 详解:管道- 在本文中,我们将介绍四个新的 Transducers:filter、remove、drop 和 take。我们将展示如何将 Transducers 组合成管道,并讨论变换的顺序。
  • Transducers 即将到来- Rich Hickey 的首次宣布。
  • 具有可观察序列的转换器- RxJS 书籍中的一个章节,描述了转换器。
  • 理解 JavaScript 中的转换器- Roman Liutikov 将类似 Clojure 文章中的代码示例翻译成了 JavaScript。所以你仍然可以阅读这篇文章并检查代码示例。
  • 联合类型- 联合类型是一种将不同值组合在一起的方式。Union-type 是一个小型 JavaScript 库,用于定义和使用联合类型。
  • 反应性的一般理论- Kris Kowal 描述了反应性编程的流行原语和一些用例。
  • 《反应性的一般理论》(视频)- Kris Kowal 讨论了反应性原语及其特性。
  • 控制时间和空间- 这次演讲将快速涵盖 FRP 的基础知识,然后介绍人们开始使用的几种不同的 FRP 表达形式。我们将探讨这些表达形式在历史和理论上的契合方式。
  • Cycle.js- 一个函数式和反应性的 JavaScript 框架,解决了在人与计算机之间的对话(相互观察)过程中出现的可观察对象的循环依赖问题。
  • Async Driver- 用于创建 cycle.js 异步请求驱动的高阶工厂。几乎可以完全消除这种驱动程序的样板代码。
  • Cycle.js 旨在解决问题- 在这个视频中,André Staltz 展示了 Cycle.js 的实际用途,旨在解决您的客户/业务可能遇到的问题。
  • Cycle.js 和函数式反应式用户界面- 在这次演讲中,我们将发现 Cycle.js 如何纯粹地实现反应式和函数式,以及它为何是 React 的一个有趣替代方案。
  • Draw Cycle- 简单的 Cycle.js 程序可视化
  • Drivers- Drivers 是监听可观察数据源(其输入),执行命令式副作用,并可能返回可观察数据源(其输出)的函数。
  • 动画- 一个用于 requestAnimationFrame 的 Cycle 驱动程序。
  • 音频图驱动- 基于 virtual-audio-graph 的 Cycle.js 音频图驱动程序。
  • Cookie- Cycle.js Cookie 驱动程序,基于 cookie_js 库。
  • DOM- 基于 virtual-dom 的 Cycle.js 标准 DOM 驱动程序,以及其他辅助工具。
  • Fetch- 一个用于发起 HTTP 请求的 Cycle.js 驱动,使用 Fetch API。
  • Fetcher- 一个使用 stackable-fetcher 发起 HTTP 请求的 Cycle.js 驱动。
  • Firebase- Firebase JavaScript API 的一个轻量级封装层,允许你查询并声明式地更新你最喜欢的实时数据库。
  • HTTP- 基于 superagent 的 Cycle.js 驱动,用于发起 HTTP 请求。
  • Hammer.js- 该驱动程序集成了 Hammer.js 手势库。
  • History- 基于 rackt/history 库的 Cycle.js URL 驱动程序。
  • Keys- 一个用于键盘事件的 Cycle.js 驱动程序。
  • Mongoose.js- 一个用于在 Cycle JS 中使用 Mongoose 的驱动程序。支持读写操作。
  • 通知- 一个用于显示和响应 HTML5 通知的 Cycle.js 驱动程序。
  • 路由器- 一个专为 Cycle.js 设计从零开始构建的路由器。它建立在经过实战考验的 switch-path 库用于路由匹配和 rackt/history 用于处理 History API 之上。
  • Router5- 基于 router5 的 Cycle.js 源/接收器路由驱动程序。
  • 服务器发送事件- Cycle.js 的服务器发送事件 (SSE) 驱动程序,SSE 也是一种称为 EventSource 的浏览器功能。服务器发送事件允许服务器持续用新事件更新页面,而无需采用长轮询等技巧。
  • Snabbdom- 使用 snabbdom 库的替代 DOM 驱动程序。
  • Socket.IO- 一个用于使用 Socket.IO 的应用程序的 Cycle 驱动程序
  • 存储- 一个用于在浏览器中使用 localStorage 和 sessionStorage 的 Cycle.js 驱动程序。
  • 示例项目 - 使用 Cycle.js 构建的示例应用程序
  • Cycle.js 示例- 浏览和学习使用 Core、DOM 驱动器、HTML 驱动器、HTTP 驱动器、JSONP 驱动器等的小 Cycle.js 应用的示例。
  • RX Marbles- Rx 可观察对象的交互式图表。
  • TODO: 最小可行披萨- 使用 Cycle.js 实现的最小可行披萨。
  • Tricycle- 尝试 Cycle.js 的草稿板。
  • 使用 Cycle.js 介绍函数式响应式编程- Nick Johnstone 在这个视频演示中介绍了使用 Cycle.js 进行开发。
  • 学习如何骑行:Cycle.js 简介- 在这次演讲中,Fernando Macias Pereznieto 向我们介绍了使用 Cycle.js 的优点、缺点和美好之处,无论你是完全的新手还是经验丰富的 JS 大师。
  • Motorcycle.js- 这是一个兄弟项目,将在可预见的未来与 Cycle.js 一同发展和成长。这个项目的重点是尽可能地进行性能优化。
  • Most- 高性能的单子式响应式流。
  • 即插即用 Cycle.js 让您的可观察流轻松运行- Frederik Krautwald 解释了 Cycle.js 的原理、内部工作原理以及如何使用它创建一个简单的驱动程序程序。
  • Tricycle- 一个用于尝试 Cycle.js 的草稿板。
  • 开发者需要了解的 MVI(模型-视图-意图)- 本文解释了通用的 MVI 模式及其与 React、响应式编程和 Cycle.js 的关系。
  • Cycle.js 和函数式响应式用户界面- 在这次演讲中,我们将发现 Cycle.js 如何纯粹地实现响应式和函数式,以及它为何是 React 的一个有趣替代方案。
  • 变化的动态:为何响应式很重要- 在这次演讲中,我们将看到被动或响应式策略何时有利,以及响应式策略为何是合理的默认选择。
  • 国家的敌人- Philip Roberts 对函数响应式编程和 Bacon.js 的介绍。
  • MobX- MobX 是一个经过实战检验的库,通过透明地应用函数响应式编程,使状态管理变得简单且可扩展。
  • Promises + FP = 美丽的流- Yassine Elouafi 展示了如何使用函数式编程和代数数据类型来推导出像流一样的纯函数式响应式编程定义。
  • 流库 - 帮助你在时间变化值和事件流上组合异步操作的库。
  • Bacon.js- 一个小的函数式响应式编程库,用于 JavaScript。通过从命令式转换为函数式,将你的事件杂乱无章转变为干净和声明式的 feng shui bacon。
  • Kefir.js- Kefir 是一个受 Bacon.js 和 RxJS 启发的 JavaScript 响应式编程库,专注于高性能和低内存使用。
  • Most- 高性能的单子式响应式流。
  • 响应式扩展 (RxJS)- RxJS 是一套使用可观察序列和流畅查询运算符来组合异步和基于事件的程序的库。
  • 使用响应式扩展的异步 JavaScript- Jafar Husain 在这个视频中解释了 Netflix 如何使用响应式扩展 (Rx) 库来构建响应式用户体验,这些体验力求基于事件驱动、可扩展和有弹性。
  • 探索 Rx 运算符:FlatMap- Christoph Burgdorf 介绍了 FlatMap 运算符及其在集合和可观察对象中的使用。
  • 探索 Rx 运算符:Map- Christoph Burgdorf 解释了如何在 RxJS 中使用 map 运算符。
  • 功能核心响应式外壳- Giovanni Lodi 对不同的架构元模式进行了概述,并描述了他关于函数式编程和可观察对象的当前发现,将其作为一种控制副作用的方式。
  • 学习 RX- 一系列交互式练习,用于学习 Microsoft 的 JavaScript 反应式扩展 (Rx) 库。
  • 学习 RxJS- 该网站专注于使 RxJS 概念易于理解,示例清晰且易于探索,并在整个网站中提供了对最佳 RxJS 相关材料的参考。
  • 现实世界中的可观察对象- Sergi Mansilla 编写了一个 FTP 客户端,将其作为基于 RxJS 的现实世界应用程序的示例。
  • Rx Training Games- Rx Training Games 是一个编程游乐场,可用于学习和练习基于网格的 Reactive Extensions 编程游戏
  • Rx-Book- 一本关于 RxJS v.4.0 的完整书籍。
  • RxMarbles- 一个用于实验 Rx Observables 图表的 Web 应用,用于学习目的。
  • RxState- 基于 RxJS 和 Immutable.js 的简单、主观的状态管理库。
  • 在 Angular 2 中利用 Observables- Christoph Burgdorf 介绍了 Observables 的优势以及如何在 Angular 2 环境中使用它们。
  • 使用 Observable 序列的 Transducers- RxJS 书籍中的一个章节,描述了 Transducers。
  • 我们为何构建 Xstream- 作者们需要一个为 Cycle.js 定制的流库。它需要是“热”的,kB 大小小,并且应该只有少数几个直观的操作符。
  • Xstream- 一个极其直观、小巧且快速的 JavaScript 函数式响应式流库。
  • 我们为何构建 Xstream- 作者们需要一个为 Cycle.js 定制的流库。它需要仅是“热”的,kB 大小小,并且应该只有少数几个直观的操作符。
  • 响应式编程简介- André Staltz 提供了关于响应式编程和 RxJS 的完整介绍。
  • 如果用户是一个函数会怎样?- 在这个视频中,André Staltz 讨论了人与计算机之间的输入/输出循环,以及如何通过使用 FRP 和事件流来利用这一模型。

兼容性

产品与不同输入/输出设备和渲染软件兼容的能力。包括打印机、电子邮件、移动设备和不同的浏览器。
  • 我能使用...吗?- "Can I use" 提供最新的浏览器支持表格,用于支持桌面和移动网络浏览器上的前端网页技术。
  • Microsoft 开发工具- 这些工具允许您在不同的 Internet Explorer 和 Microsoft Edge 版本上测试您的产品。
  • HTML5 跨浏览器垫片- 因此,我们在这里收集了所有垫片、回退和垫片,以便在原生不支持它们的浏览器中植入 HTML5 功能。
  • HTML5 Please- 查找 HTML5、CSS3 等特性,了解它们是否可以使用,如果可以,则找出应该如何使用——使用 polyfill、回退方案或直接使用。
  • Modernizr- 它是一系列超级快速测试的集合——我们更喜欢称之为“检测”——在您的网页加载时运行,然后您可以使用结果来定制用户体验。
  • Normalize.css- 一个现代的、适用于 HTML5 的 CSS 重置替代方案。
  • Polyfill.io- 为您的网站量身定制的 polyfill,针对每个浏览器。
  • 防弹邮件按钮- 使用渐进增强的 VML 和 CSS 设计精美的按钮。
  • Email Lab- 这是一个用于开发和测试邮件模板的项目。它使用 Grunt 来简化和加速邮件模板的创建。邮件模板可以由可重用的组件构建。
  • Email-Boilerplate- 使用这些代码示例作为格式化 HTML 邮件的指南,以避免 HTML 邮件设计中的主要样式陷阱。
  • Foundation for Emails 2- 邮件前端框架,包括网格、全局样式、对齐类、按钮、提示面板、缩略图样式、排版、可见性类。
  • MJML- MJML 是一种标记语言,旨在简化响应式电子邮件的编码过程。其语义化语法使其易于使用且直观,丰富的标准组件库可加快开发速度并减轻电子邮件代码库的负担。
  • MailChimp E-Mail Blueprints- Email Blueprints 是一系列 HTML 电子邮件模板,可作为电子邮件设计的坚实基础和起点。
  • Open Source Email Templates- sendwithus 开源模板项目是由 sendwithus 团队和社区创建和管理的一组免费电子邮件模板。
  • Really Simple Responsive HTML Email Template- 有时你需要的只是一个非常简单的 HTML 电子邮件模板。这里就是。
  • 响应式邮件设计- 在这个指南中,作者将涵盖设计和构建移动友好型邮件的基础知识,并辅以一些巧妙的技巧和技巧。
  • 响应式邮件模板- Zurb Studios 汇集了这套非常棒的邮件模板,以便您可以使您的邮件活动响应式。
  • CSS 终极指南- 对全球前 10 款最受欢迎的移动、网络和桌面邮件客户端的 CSS 支持进行完整分析。
  • KeyboardEvents 有什么新功能?键和代码!- Jeff Posnick 讨论了代码和键事件属性以及如何在实践中使用它们。
  • 模拟 - 用于在桌面上模拟移动设备功能的工具。
  • Responsinator- 快速在流行分辨率中测试任何网站。
  • 使用 Chrome 开发者工具模拟移动设备- 使用 Chrome DevTools 的设备模式来构建移动优先、完全响应式网站。学习如何使用它来模拟各种设备和它们的功能。
  • Touché- Touché:将触摸事件带到非触摸浏览器(触摸的感觉!)。无依赖项。无代码膨胀。
  • thumbs.js- 为您的浏览器添加触摸支持。
  • 手势 - 用于处理触摸机制(手指在屏幕上的操作)和触摸活动(特定手势的结果)的资源。
  • Hammer.js- Hammer 帮助您为页面添加触摸手势支持,并消除点击的 300ms 延迟。
  • 手势简介- 不同手势及其含义的描述。
  • Pointer Events Polyfill- PEP polyfills 在所有尚未实现 pointer events 的浏览器中,提供统一的、响应式的输入模型,适用于所有设备和输入类型。
  • Touchy- Touchy 是一个 jQuery 插件,用于在 W3C 兼容浏览器(如 Mobile Safari 或 Android 浏览器)或支持 ontouchstart、ontouchmove 和 ontouchend 事件的任何浏览器上管理触摸事件。
  • jGestures- 一个 jQuery 插件,允许您像原生 jQuery 事件一样添加手势事件。包括鼠标事件的替代事件。
  • 布局 - 网站各部分的排列或布局方式。
  • Snap.js- 一个用于在 Javascript 中创建美观移动抽屉(侧边菜单)的库。
  • Swipe- Swipe 是最精确的触摸滑块。
  • Swiper- Swiper 是一个免费的移动触摸滑块,具有硬件加速的过渡和原生行为。它旨在用于移动网站、移动 Web 应用和移动原生/混合应用。
  • jqm-pagination- 一个用于页面之间顺序分页的 jQuery Mobile 插件,支持触摸、鼠标和键盘。
  • swipeslide- 一个类似 iOS 手势导航的 Zepto 插件。
  • 滚动 - 浏览器原生的滚动并不总是适合移动网站。有一些资源可以解决这个问题。
  • Overscroll- Overscroll 是一个 jQuery 插件,可以在浏览器中模拟 iPhone/iPad 的滚动体验。
  • Overthrow- 一个与框架无关的 overflow: auto 兼容性填充,用于响应式设计。
  • Zynga Scroller- 一个纯逻辑的滚动/缩放组件。它不依赖于任何特定的渲染或事件系统。
  • iScroll- iScroll 是一个高性能、小体积、无依赖、多平台的 JavaScript 滚动组件。
  • jQuery.pep.js- 一个轻量级的插件,用于在移动/桌面设备上进行运动拖拽。
  • jSwipeKinetic- 一个 jQuery 插件,使您能够在触摸优化的项目中添加运动滚动。jSwipeKinetic 是基于 jGestures 构建的。
  • pull-to-refresh.js- 该插件为具有原生滚动功能的移动 Safari 中的可滚动块元素启用下拉刷新功能。
  • 点击加速 - 每个基于触摸的移动浏览器在您点击屏幕上的某个内容并认为它是一个"点击"之间存在约 300 毫秒的人工延迟,但有一些方法可以绕过这种行为。
  • 300ms 点击延迟已消失- 一篇由 Google 撰写的文章,描述了 300 毫秒的延迟以及 Android 上的 Chrome 32+ 如何处理它。
  • Hammer.js- Hammer 帮助您为页面添加对触摸手势的支持,并消除点击的 300 毫秒延迟。
  • Tappable- Tappable 是一个简单的、独立的库,用于在触摸友好的网络浏览器中触发点击事件。
  • fastclick- FastClick 是一个简单易用的库,用于消除移动浏览器中物理点击与点击事件触发之间的 300ms 延迟。
  • 触摸键盘 - 几乎所有现代智能手机都提供基于触摸的键盘用于文本输入。有一些策略可以影响它们并解决它们的怪癖。
  • 设计触摸键盘的指南- 在这篇文章中,我们将更深入地探讨与触摸键盘相关的可用性问题,包括五个设计指南,这些指南将缓解其中一些痛点。
  • 与传感器合作 - 所有移动设备都配备了陀螺仪、加速度计、光计、磁力计等传感器。其中一些可以通过 JavaScript 在浏览器中访问。
  • This End Up: 使用设备方向- 在这篇文章中,我们将探讨设备方向和运动事件,并使用 CSS 根据设备的方向旋转图像。
  • lenticular.js- 浏览器中的倾斜控制图像。
  • 打印样式表的技巧和窍门- 一份全面的打印优化指南,包括背景图像和颜色、扩展外部链接、二维码、用于打印质量的 CSS3 滤镜。
  • 数据表 - 包含数据的表格在小屏幕上表现不佳。这里有一些资源来控制它们。
  • 响应式数据表- Chris Coyier 关于如何处理响应式表格的几个想法。
  • stacktable.js- 用于在小屏幕上堆叠表格的 jQuery 插件。
  • Future Friendly Thinking- 我们想要制作未来友好的东西。最近我们一直在思考以下想法。帮助我们进一步探索或提出新的想法。
  • 如何制作响应式报纸样式的布局- 文章描述了创建多列网站的几种方法。
  • 图片 - 图片在响应式网站中提出了一系列问题:缩放、性能、视网膜屏幕和文件大小。
  • 自适应图片- 自适应图片检测您的访客屏幕尺寸,并自动创建、缓存和交付适合设备的重新缩放版本,您的网页嵌入的 HTML 图片。
  • 选择响应式图片解决方案- 本文将您引导至基础知识,然后为您提供选择适合您情况的最佳响应式图片解决方案所需的信息。
  • 小丑车技术- 我们可以在 SVG 中使用媒体查询来提供正确的图像。"小丑车"技术的优点是所有逻辑都保留在 SVG 文件中。
  • 如何使用响应式图像...- Shutterstock 的工程师描述了关于响应式图像的不同问题和解决方案。
  • Picturefill- 一个用于 <picture>、srcset、sizes 等的响应式图像 polyfill。
  • Riloadr- 该库的目标是在响应式布局中提供优化的、上下文相关的图像尺寸,这些布局在不同的分辨率下使用差异巨大的图像尺寸,以改善页面加载时间。
  • 为什么我们需要响应式图片- Tim Kadlec 讨论了页面权重和响应式图片解决方案。
  • imgLiquid- 一个 jQuery 插件,用于调整图片大小以适应容器。
  • jQuery Picture- jQuery Picture 是一个微小的(2kb)插件,用于为您的布局添加对响应式图片的支持。它支持带有一些自定义数据属性的 figure 元素以及新的建议的 picture 格式。
  • 监控断点 - 在不同的断点触发 JavaScript 事件。
  • Breakpoints.js- 为您的响应式设计定义断点,当浏览器进入和/或退出该断点时,Breakpoints.js 将触发自定义事件。
  • Harvey- Harvey 帮助您监控和管理行为变化,每当您的媒体查询被激活时,它都会触发一个事件。
  • enquire.js- enquire.js 是一个轻量级、纯 JavaScript 库(无依赖),用于通过编程方式响应媒体查询。
  • 导航 - 适应不同屏幕尺寸的网站导航。
  • 复杂导航模式- 文章描述了一些处理复杂、冗长和/或多层导航的 emerging patterns。
  • 复杂网站上的响应式导航- 为了说明在大型网站上实现响应式导航所涉及的技术,作者引用了两个实际客户案例。
  • 响应式导航模式- 文章描述了一些在响应式设计中处理导航的更受欢迎的技术。
  • 响应式设计工作流程- 在这个视频中,Stephen Hay 探索了一种基于内容的设计工作流程方法,该方法基于我们的多平台现实,而不是固定宽度的 Photoshop 组件和过度制作的线框图。
  • Responsive Elements- Responsive Elements 使任何元素都能够适应并响应其占据的区域。它是一个可以今天就集成到您项目中的小型 JavaScript 库。
  • Responsive Patterns- 响应式设计的模式和模块集合。
  • 文本 - 在不同视口尺寸的上下文中处理文本。
  • FitText- FitText 使字体大小变得灵活。在您的流体或响应式布局上使用此插件,以实现可扩展的标题,这些标题填充父元素的宽度。
  • Out Of Words!- Words App 背后的响应式排版框架。
  • Responsive Font Sizing- 让你的字体大小响应屏幕大小,简单易维护。
  • Responsive Measure- 一个用于生成响应式理想尺寸的 jQuery 插件。
  • Truly Fluid Typography With vh And vw Units- 本文描述了视口单位和其他技术,以实现随屏幕平滑缩放的排版。
  • Viewport Component- Viewport 是一个用于简化视口管理的组件。您可以获取视口的尺寸等信息,这对于使用 JavaScript 进行一些检查非常有帮助。
  • HTML 中使用 ARIA 的注意事项- 本文档是针对开发者如何使用可访问富互联网应用规范向 HTML 元素添加可访问性信息的实用指南。
  • The A11Y Project- 一个由社区驱动的努力,旨在使网络可访问性更容易。

生态系统

重要的开发者、公司、组织和新闻来源。
  • Angular- AngularJS 是一个试图解决开发单页应用程序时遇到的许多挑战的 Web 应用程序框架。
  • Adventures in Angular- Adventures in Angular 是一个每周播客,致力于 Angular JavaScript 框架及相关技术、工具、语言和实践。
  • Angular 2 ESNext Starter- 这个仓库是尝试使用 Javascript 的 Angular 2 开发者的起点。它展示了不使用 TypeScript 也可以如何轻松进行开发的技术。
  • Angular 2 模板语法- Victor Savkin 撰写了关于 Angular 2 模板的文章,包括绑定、插值、语法糖、Web 组件支持以及更多内容。
  • 从 Angular 1.x 升级到 Angular 2 的策略- 关于一般升级到 Angular 2 的思考,以及你/你的团队可以如何准备。
  • 使用 TypeScript 构建 Redux 与 Angular 2- 在这篇文章中,我们将讨论 Redux 的思想。如何构建我们自己的 Redux Store 的迷你版本,并将其与 Angular 2 连接起来。
  • Angular 2 中的变更检测- 在这篇文章中,Victor Savkin 深入探讨了 Angular 2 的变更检测系统。
  • 如何在模型驱动表单中实现条件验证- 在这篇文章中,我们将学习如何使用最新的表单模块在我们的模型驱动表单中处理条件验证。
  • 如何在 Angular 2 提供者中防止命名冲突- 不透明标记是可区分的,可以防止我们遇到命名冲突。每当我们创建一个不是类型的标记时,都应该使用 OpaqueToken。
  • Ng-Newsletter- 网络上最好的 AngularJS 内容的免费、每周简报。
  • PrimeNG- PrimeNG 是用于 AngularJS2 的一组丰富的 UI 组件。PrimeNG 是流行 JavaServer Faces 组件套件 PrimeFaces 的兄弟。
  • 简单语言翻译- 创建一个我们可以用来在 HTML 视图中翻译单词的管道,以及一个我们可以用来在 JS / TypeScript 中翻译我们单词的服务。
  • 使用 FormGroup 和 FormControl 构建模型驱动表单- 在本文中,我们将学习如何使用最新的表单模块构建带有验证的模型驱动表单,然后我们将讨论与模板驱动表单相比,使用模型驱动表单的优势和劣势。
  • Backbone.js- Backbone 通过提供模型、集合、带有声明式事件处理的视图,为 JavaScript 密集型应用程序提供结构,并通过 RESTful JSON 接口将其与现有应用程序连接起来。
  • Bootstrap- Bootstrap 是一个用于开发响应式、移动优先的 Web 项目的 HTML、CSS 和 JS 框架。
  • Bootstrap 4 快速参考- Alexander Rechsteiner 编写的 Bootstrap v4 快速参考。
  • Tree Shaking Bootstrap- Jacob Parker 描述了如何利用 CSS 模块和 ES6 模块,只包含您网站真正使用的 Bootstrap 部分。
  • Cycle.js- 一个函数式和响应式的 JavaScript 框架,解决了在人类与计算机之间的对话(相互观察)过程中出现的可观察对象的循环依赖问题。
  • Async Driver- 用于创建 cycle.js 异步请求驱动的高阶工厂。几乎可以完全消除这类驱动程序的样板代码。
  • Cycle.js 旨在解决问题- 在这个视频中,André Staltz 展示了 Cycle.js 的实际用途,旨在解决您的客户/业务可能遇到的问题。
  • Cycle.js 和函数式响应式用户界面- 在这次演讲中,我们将发现 Cycle.js 如何纯粹地实现响应式和函数式,以及它为何是 React 的一个有趣替代方案。
  • Draw Cycle- 简单的 Cycle.js 程序可视化
  • 驱动程序- 驱动程序是监听可观察数据源(其输入)、执行命令式副作用,并可能返回可观察数据源(其输出)的函数。
  • 动画- 一个用于 requestAnimationFrame 的 Cycle 驱动程序。
  • 音频图驱动- 基于 virtual-audio-graph 的 Cycle.js 音频图驱动程序。
  • Cookie- Cycle.js Cookie 驱动程序,基于 cookie_js 库。
  • DOM- 基于 virtual-dom 的 Cycle.js 标准 DOM 驱动程序,以及其他辅助工具。
  • Fetch- 一个用于发起 HTTP 请求的 Cycle.js 驱动,使用 Fetch API。
  • Fetcher- 一个使用 stackable-fetcher 发起 HTTP 请求的 Cycle.js 驱动。
  • Firebase- 一个围绕 firebase javascript API 的薄层封装,允许你查询并声明式地更新你最喜欢的实时数据库。
  • HTTP- 基于 superagent 的 Cycle.js HTTP 请求驱动。
  • Hammer.js- 该驱动集成了 Hammer.js 手势库。
  • History- 基于 rackt/history 库的 Cycle.js URL 驱动。
  • Keys- 用于键盘事件的 Cycle.js 驱动。
  • Mongoose.js- 一个用于在 Cycle JS 中使用 Mongoose 的驱动程序。支持读写操作。
  • Notification- 一个 Cycle.js 驱动程序,用于显示和响应 HTML5 通知。
  • Router- 一个专为 Cycle.js 设计的从零开始的路由器。基于经过实战检验的 switch-path 库进行路由匹配,以及 rackt/history 库处理 History API。
  • Router5- 基于 router5 的 Cycle.js 源/接收器路由驱动程序。
  • Server-Sent Events- Cycle.js 的 Server-Sent Events (SSE) 驱动,这是一种浏览器特性,也称为 EventSource。Server-Sent Events 允许服务器持续更新页面上的新事件,而无需采用长轮询等技巧。
  • Snabbdom- 利用 snabbdom 库的替代 DOM 驱动。
  • Socket.IO- 用于使用 Socket.IO 的 Cycle 驱动。
  • Storage- Cycle.js 的 Storage 驱动,用于在浏览器中使用 localStorage 和 sessionStorage。
  • 示例项目 - 使用 Cycle.js 构建的示例应用程序
  • Cycle.js 示例- 浏览和学习使用 Core、DOM 驱动器、HTML 驱动器、HTTP 驱动器、JSONP 驱动器等的小型 Cycle.js 应用程序的示例。
  • RX Marbles- Rx 可观察对象的交互式图表。
  • TODO:最小可行披萨- 使用 Cycle.js 实现的最小可行披萨。
  • Tricycle- 一个用于尝试 Cycle.js 的草稿板。
  • 使用 Cycle.js 的函数式响应式编程入门- Nick Johnstone 在这个视频演示中介绍了如何使用 Cycle.js 进行开发。
  • 学习如何骑行:Cycle.js 入门- 在这次演讲中,Fernando Macias Pereznieto 介绍了使用 Cycle.js 的优点、缺点和美好之处,无论你是完全的新手还是经验丰富的 JS 大师。
  • Motorcycle.js- 这是一个兄弟项目,将在可预见的未来与 Cycle.js 一起继续发展和成长。这个项目的主要重点是尽可能地进行性能调优。
  • Most- 高性能的 Monad 反应式流。
  • Plug and Play All Your Observable Streams With Cycle.js- Frederik Krautwald 解释了 Cycle.js 背后的原理,其内部工作原理以及如何使用它来创建一个简单的驱动程序程序。
  • Tricycle- 一个用于尝试 Cycle.js 的草稿板。
  • 开发者需要了解的 MVI(模型-视图-意图)- 文章解释了通用的 MVI 模式以及它与 React、响应式编程和 Cycle.js 的关系。
  • Dojo Toolkit- 一个节省您时间的 JavaScript 工具包,可随着您的开发过程进行扩展。提供构建 Web 应用所需的一切。语言工具、UI 组件等,全部集成在一个地方,设计完美协同工作。
  • Ember- Ember.js 是一个基于 MVC 模式的开源 JavaScript Web 框架。它允许开发者创建可扩展的单页 Web 应用。
  • Ember 中的绑定- 与大多数包含某种绑定实现的框架不同,Ember.js 中的绑定可与任何对象一起使用。
  • Router.js (Ember)- Router.js 是 Ember.js 使用的路由微库。
  • Foundation- Foundation 提供响应式网格和 HTML 及 CSS UI 组件、模板和代码片段,包括排版、表单、按钮、导航和其他界面组件,以及可选的 JavaScript 扩展。
  • Gulp- Gulp 是一个帮助你自动化开发流程中繁琐或耗时任务的工具包。它非常快速、跨平台且简单。
  • 文章与教程 - 关于 gulp 的出版物或逐步指南,用于在项目中设置和使用 gulp。
  • 使用 Gulp 3 和 4 构建(系列)- 关于单个组件和整个 gulp 的精彩文章系列。
  • 第一部分:示例- 介绍 gulp 和 gulpfile.js。
  • 第二部分:gulp 的结构- Orchestration, Undertaker, Vinyl 和 Vinyl FS, Gulp 插件。
  • 第三部分:编写转换器- 使用 map-stream, though2 和 event-stream。
  • 第四部分:增量构建- 构建自上次运行以来更改的文件并进行缓存。
  • 第 5 部分:注意事项- Gulp 3 中的错误管理及"伪装成 1:1 的 MANY:1"问题。
  • 项目的愿景、历史和未来(2014 年 4 月)- 文章讨论了 Gulp 4 中的流(Streams)、Vinyl、Vinyl Adapters、Orchestrator 和错误管理。
  • Gulp 可能不是答案的原因- ...Gulp 仍然存在一个尚未解决的问题。许多构建步骤不是 1:1(一个文件输入,一个文件输出),而是 n:1 或 1:n。
  • CSS - 用于处理 CSS 文件的 Gulp 插件。
  • gulp-clean-css- 使用 clean-css 的 gulp 插件,用于压缩 CSS。
  • gulp-cssnano- 使用 cssnano 压缩 CSS。
  • 连接 - 用于文件连接的插件。例如打包 CSS 或 JavaScript 文件。
  • gulp-concat- 该插件将根据您的操作系统的新行符连接文件。它将从通过它的第一个文件中获取基本目录。
  • gulp-group-concat- 将多个文件组合成较少的文件
  • 部署 - 用于将构建文件推送到生产环境的插件。
  • gulp-tar- 从文件创建 tarball。
  • vinyl-ftp- 用于 FTP 的极速 vinyl 适配器。
  • vinyl-s3- 将 S3 作为 vinyl 文件的源或目标。
  • 生态系统 - 围绕 gulp 的开发者网络和插件
  • @sindresorhus 插件- Sindre Sorhus 开发的一系列插件。
  • Gulp Friendly NPM Packages- 与 Gulp 兼容的普通 Node.js 包。
  • 过滤器 - 用于过滤黑胶流文件的工具插件。
  • gulp-cache- 基于临时文件的 gulp 缓存代理任务。
  • gulp-cached- 为 gulp 提供简单的内存文件缓存。
  • gulp-changed- 仅传递已更改的文件。
  • gulp-filter- 对 vinyl 流中的文件进行过滤。
  • gulp-newer- 仅传递更新的源文件。
  • gulp-remember- 一个用于 gulp 的插件,可以记住并召回流经它的文件。
  • vinyl-diff- 该库允许你对 vinyl 流进行差异比较。
  • 图片 - 用于处理图片的插件。
  • gulp-imagemin- 压缩 PNG、JPEG、GIF 和 SVG 图片。
  • gulp-webp- 将 PNG、JPEG、TIFF 图片转换为 WebP。
  • JavaScript - 用于处理 JavaScript 文件的模块加载器、压缩器和其他工具。
  • gulp-pure-cjs- Pure CommonJS 构建器的 Gulp 插件。
  • gulp-uglify- 使用 UglifyJS 压缩文件。
  • yoloader- 一个 CommonJS 模块加载器实现。它提供工具来打包基于 CommonJS 的项目,并加载这些包。
  • SourceMaps - Source map 提供了一种将压缩文件中的代码映射回其原始位置在源文件中的方法。
  • 支持 gulp sourcemaps 的插件- 支持 gulp-sourcemaps 的插件列表。
  • gulp-sourcemaps- Gulp.js 的源码映射支持。
  • vinyl-sourcemaps-apply- 将源码映射应用于 vinyl 文件,并将其与现有的源码映射合并。
  • 实用工具 - 用于构建 gulp 插件的工具和组件。
  • gulp-count- 统计 vinyl 流中的文件数量。
  • gulp-debug- 调试 vinyl 文件流,查看哪些文件通过 gulp 管道运行。
  • gulp-size- 记录流中文件的总大小,并可选地记录单个文件大小。
  • lazypipe- Lazypipe 允许你创建一个不可变、延迟初始化的管道。它设计用于在需要重用部分管道的环境中使用,例如与 gulp 一起使用。
  • map-stream- 从异步函数创建一个 through 流。
  • Vinyl- Vinyl 是一个非常简单的描述文件的元数据对象。
  • gulp-chmod- 更改 Vinyl 文件的权限。
  • gulp-rename- 一个可以轻松重命名文件的插件。
  • mem-fs- 简单的内存式 vinyl 文件存储。
  • vinyl-ast- Gulp 插件的一次解析和一次生成 AST 工具桥接
  • vinyl-buffer- 创建一个转换流,该流以 vinyl 文件为输入,输出缓冲的(isStream() === false)vinyl 文件。
  • vinyl-file- 从实际文件创建一个 vinyl 文件。
  • vinyl-fs- 文件系统适配器 Vinyl。
  • vinyl-fs-fake- 一个扩展 vinyl-fs 的适配器,通过传递虚拟文件而不是通配符,以及调用函数而不是写入,来轻松进行调试。
  • vinyl-git- git 适配器 Vinyl。
  • vinyl-map- 将 vinyl 文件的内容映射为字符串,这样您就可以轻松使用现有代码,而无需另一个 gulp 插件!
  • vinyl-paths- 获取 vinyl 流中的文件路径。
  • vinyl-source-buffer- 将文本流转换为内容为缓冲区的 vinyl 管道。
  • vinyl-source-stream- 在 gulp 或 vinyl 管道的起始处使用常规文本流,以实现与现有 npm 流的更好互操作性。
  • vinyl-to-stream- 将 vinyl 流转换为文本流。
  • vinyl-transform- 将标准文本转换流封装起来,以便您可以编写更少的 gulp 插件。它与 vinyl-map 和 vinyl-source-stream 具有相似的使用场景。
  • Meteor- Meteor 是一个全栈 JavaScript 平台,用于开发现代 Web 和移动应用程序。Meteor 包含了一套关键技术,用于构建具有连接客户端的响应式应用程序、一个构建工具以及一套精选的软件包。
  • React- React 是一个用于创建用户界面的 JavaScript 库。许多人选择将 React 视为 MVC 中的 V。我们创建 React 的目的是解决一个问题:构建具有随时间变化的数据的大型应用程序。
  • 3 个轻量级 React 替代方案- Dan Prince 探索了 Preact、VirtualDom 和 Deku。
  • 无状态 React 应用?- James K Nelson 描述了如何在 React 组件中避免状态。
  • Block, Element, 修改您的 JavaScript 组件- Mark Dalgleish 正在讨论如何使用 BEM 组织 React 代码,并使用 Webpack 构建 everything。
  • CSS Modules 来拯救.jsx- 如果您使用类似 react 的模板/组件,请使用 webpack CSS 加载器启用 CSS Modules,并忘记全局 CSS 问题。
  • 找到您的完美 React 启动项目- 一个简单的 React 模板搜索引擎,可以挑选所需的组件。
  • 《Full-Stack Redux 教程》- 我们将使用测试优先开发方法,逐步构建一个真实的 Node+Redux 后端和一个 React+Redux 前端。
  • 《函数式 DOM 编程》- Pete Hunt 对 React 及其目的的早期介绍之一。
  • 《React 中的函数式原则》- Jessica Kerr 谈论四个函数式原则:组合、声明式风格、隔离和数据流,以及它们在 React 中的使用。
  • 《在 React 中开始使用 TDD》- 学习如何使用最少的设置,通过 TDD 方法测试 React 组件,同时了解要测试的内容以及如何避免常见陷阱。
  • 《从 Angular 转向 React 入门》(作为 Angular 开发者)- 在一系列文章中,Dave Ceddia 尝试帮助你将“Angular 特性”的知识应用到 React 中。
  • React 中如何处理状态。缺失的 FAQ- Osmel Mora 挑战了 React 应用中始终需要 Flux 架构的常见误解。
  • 我们在 Delve 中如何使用 Flux 架构- Øystein Hallaråker 描述了 Delve 如何利用 Flux 应用架构。
  • 不可变数据与 React- Lee Byron 谈到了持久化不可变数据结构的工作原理,以及如何在 React 应用中使用 Immutable.js 的技巧。
  • JSX Transform- JSX 转换器。一个标准且可配置的 JSX 解耦实现,与 React 无关。
  • Jest- 一个 JavaScript 单元测试框架,由 Facebook 用于测试服务和 React 应用程序。
  • 使用 React 和 RxJS 的 Model-View-Intent- Satish Chilukuri 展示了一个使用 React 实现 MVI 模式的示例。
  • Monocle- 一个开发者工具,用于生成 React 应用程序组件层次结构的可视化表示。
  • React 和 Flux 没什么新东西,只有一个例外- Andre Staltz 谈论了 React 和 Flux 中使其创新和吸引人的方面。
  • Pure UI- Guillermo Rauch 讨论了应用程序 UI 的定义,即应用程序状态的一个纯函数。
  • React - 基本理论概念- Sebastian Markbage 尝试正式解释他对 React 的心智模型。目的是用演绎推理来描述这一设计。
  • React App- React App 是一个由 React、Universal Router 和 History 驱动的库,它处理同构(通用)和单页应用程序中的路由、导航和渲染逻辑。
  • React 组件、元素和实例- Dan Abramov 解释了 React 中的虚拟 DOM 字典。
  • React 解密- 本文试图解释 React.js 和虚拟 DOM 的核心思想。
  • React Native for Web- 该项目允许基于 React Native 构建的组件在 Web 上运行,并自动管理所有组件样式。
  • React Starter Kit- 包含 Node.js、Express、GraphQL、React.js、Babel 6、PostCSS、Webpack 和 Browsersync 的同构 Web 应用脚手架。
  • React Storybook- 将您的 React UI 组件开发与主应用程序隔离。
  • React Workshop- 这是一个自我导向的工作坊。您可以按照自己的节奏跟随步骤,并在过程中随时向指导老师提问。
  • React in Patterns- 在使用 React 开发过程中所使用的设计模式/技术列表。
  • React vs Incremental DOM vs Glimmer- 在这篇帖子中,我们将探索三种用于构建动态 DOM 的技术。我们还将进行基准测试,找出哪一种更快。
  • React:重新思考最佳实践(2013)- Pete Hunt 介绍 React 的视频。
  • ReactPerfTool- ReactPerfTool 试图以更直观的方式帮助您调试 React 应用的性能。它通过使用 React 团队和社区提供的插件来获取测量数据,并使用图表进行可视化。
  • 移除用户界面复杂性,或为什么 React 很棒- 在这篇文章中,James Long 试图不特指地推广 React,而是解释其技术为何如此深刻。
  • 重新思考最佳实践- Pete Hunt 谈论 React 的设计决策如何挑战既定的最佳实践。
  • Retractor- Retractor 用于端到端测试,它暴露了 React 应用的内部结构。这允许您根据渲染节点的 React 组件名称以及其状态或属性来选择 DOM 节点。
  • React/Redux 的一些问题- André Staltz 介绍了 React + Redux 的优缺点。
  • 管理 React 设置- Cody Lindley 在这篇文章中列出了七个 React 设置,并解释了 React 与 BYOA(自带架构)方法的关系。
  • 测试 React & Redux 代码库- 这系列旨在为您提供非常全面的指南,用于测试 React 和 Redux 代码库,因为代码大多是通用的,只需单元测试就可以覆盖很多内容。
  • React 的最小配置要求- Krasimir Tsonev 描述了在仅安装 7 个依赖项和仅学习三个命令后如何开始使用 React。
  • Redux 生态系统- 让我们看看在需要时你将不得不处理的大多数功能,—— 以及 React 和 Redux 本身无法为你提供帮助的地方。
  • React + Redux 中的 SoundCloud 客户端- 完成本教程后,你将能够使用 Webpack 和 Babel 创建自己的 React + Redux 项目。
  • 教程:克隆 Yelp- 这篇文章将指导你构建一个完整的 React 应用程序,即使你对该框架的经验很少。我们将使用 React 构建一个 Yelp 克隆。
  • 使用 React 同步更新和离线活动- Firas Durri 描述了基于 React 的架构如何使跨设备同步状态变得更加容易。
  • 开发者需要了解的 MVI(模型-视图-意图)- 文章解释了通用的 MVI 模式以及它与 React、响应式编程和 Cycle.js 的关系。
  • 你为什么更新?- 一个通过猴子补丁 React 并在控制台中通知您可能不必要的重新渲染发生的函数。
  • 我们为什么要构建 React?- Pete Hunt 尝试解释 Facebook 开发者最初为什么要构建 React。
  • Yeoman- Yeoman 帮助您启动新项目,推荐最佳实践和工具,帮助您保持高效。它提供了一个生成器生态系统。
  • jQuery- jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等操作变得更加简单。
  • 替代品 - 其他旨在以某种方式取代 jQuery 的库。
  • Cash- Cash 是一个为现代浏览器提供 jQuery 风格语法以操作 DOM 的小型库。
  • Chibi- Chibi 专注于核心功能,经过优化处理后,创建了一个非常轻量级的微型库,允许你实现令人惊叹的功能。
  • DOM CSS- 用于快速可靠 DOM 样式的小模块。
  • Minified.js- Minified.js 是一个功能强大且体积小的客户端 JavaScript 库。它提供类似 jQuery 的功能和实用函数,具有单一、一致的 API。
  • Plain.js- 用于编写不依赖 jQuery 的强大 Web 应用程序的纯 JavaScript 工具。
  • Zepto.js- Zepto 是一个为现代浏览器设计的极简 JavaScript 库,具有与 jQuery 高度兼容的 API。
  • 编写 jQuery 插件 - jQuery 是一个工具库和插件框架。本节收集了关于创建此类插件的相关资源。
  • 高级插件概念- 收集了 jQuery 插件编写最佳实践的一系列文章。
  • 如何创建一个基本插件- 文章描述了基本插件的创建方法,并提供了一个简单的模板。
  • 编写糟糕的 jQuery 插件迹象- jQuery 插件反模式集合。
  • 编写 jQuery 插件的终极指南- 关于如何开发 jQuery 插件的全面指南,包括一个简单的模板。
  • 使用 jQuery UI Widget Factory 编写有状态插件- 文章通过构建一个简单的进度条插件展示了 Widget Factory 的功能。
  • jQuery 模板- 该项目不会试图为每一种可能模式提供完美的解决方案,但会尝试为初学者及以上水平的人提供一个简单的模板。
  • jQuery 插件模式- 该项目不会试图为每一种可能模式提供实现,但会尝试涵盖开发者在实际开发中常用的流行模式。
  • 实用 jQuery 风格- 与 jQuery 合作时的编码指南。
  • jQuery 基础- 一份关于 jQuery 基础的指南,包括用于示例的内置编辑器。
  • jQuery UI- jQuery UI 是一个精选的用户界面交互、效果、组件和主题集合,构建在 jQuery JavaScript 库之上。
  • 学习 jQuery UI- learn.jquery.com 上关于 jQuery UI 的系列文章。
  • 一滴 JavaScript- 每两周通过邮箱送达一条 JavaScript 小技巧。
  • CSS Weekly- Zoran Jambor 筛选的每周 CSS 文章、教程、实验和工具汇总。
  • Deterministic- 每周一期,涵盖 Web 函数式编程的有趣新闻和文章,尤其侧重前端。
  • Frontend Dev Weekly- 每周精心挑选的前端开发者新闻、工具和灵感。
  • HTML5 Bookmarks- 每日 HTML5 相关资源书签。
  • HTML5 Weekly- 每周一次的 HTML5 和 Web 平台技术汇总。CSS 3、Canvas、WebSockets、WebGL、Native Client 等。
  • JavaScript Weekly- 免费每周一次的电子邮件汇总 JavaScript 新闻和文章。
  • Ng-Newsletter- 网上最佳 AngularJS 内容的免费、每周一期的简报。
  • Responsive Design Newsletter- 免费每周一期,汇总响应式设计文章、工具、技巧、教程和灵感链接。
  • WDRL- 精心挑选的网页开发相关资源列表。通常每周发布。
  • Web Design Weekly- 每周一期无垃圾邮件、无闲聊的电子邮件。只提供本周互联网上最佳新闻和文章的纯优质链接。
  • Web Platform Daily- 每日网络开发新闻摘要。
  • Web Tools Weekly- Web Tools Weekly 是一份专注于前端开发和网络设计的工具类新闻简报。
  • echo.js- Echo JS 是一个完全专注于 JavaScript 开发、HTML5 和前端新闻的社区驱动新闻网站。
  • Addy Osmani- Google 工程师,负责开放网络工具开发。
  • 学习 JavaScript 设计模式- 在这本免费书籍中,Addy Osmani 探索了将经典和现代设计模式应用于 JavaScript 编程语言。
  • 大型 JavaScript 应用程序架构模式- Addy Osmani 对前端开发领域现有架构解决方案的全面概述。
  • 使用 AMD、CommonJS 和 ES Harmony 编写模块化 JavaScript- 在这篇文章中,Addy Osmani 回顾了使用现代模块格式 AMD、CommonJS 和 ES6 模块编写模块化 JavaScript 的几种选项。
  • Alex Sexton- Alex Sexton 是 Stripe 的工程师。他是 Modernizr 核心团队、jQuery 理事会以及 Dojo 基金会理事会的成员。
  • Modernizr- 它是一个由超快速测试组成的集合——或者像我们所说的“检测”——这些测试在您的网页加载时运行,然后您可以使用结果来定制用户体验。
  • André Staltz- cycle.js 框架的创始人,也是 ReactiveX 的重要贡献者。
  • Cycle.js 和函数式反应式用户界面- 在这次演讲中,我们将发现 Cycle.js 如何纯粹地具有反应性和函数性,以及它为什么是 React 的一个有趣替代方案。
  • 变化的动态:为什么反应性很重要- 在这次演讲中,我们将看到被动或反应式策略何时有利,以及反应式策略为何是一个合理的默认选择。
  • Cycle.js 文档中的 MVI- André Staltz 描述了如何将应用程序重构为 MVI 模式。
  • React 和 Flux 没什么新东西,只有一个例外- Andre Staltz 讨论了 React 和 Flux 中使其创新和吸引人的方面。
  • RxMarbles- 一个用于实验 Rx 观察者图示的 Web 应用,用于学习目的。
  • React/Redux 的一些问题- André Staltz 介绍了 React + Redux 的优缺点。
  • 响应式编程导论- André Staltz 提供了关于响应式编程和 RxJS 的完整介绍。
  • 单向数据流架构(演讲)- André Staltz 比较了现代架构模式,包括 Flux、Redux、Model-View-Intent、Elm Arch 和 BEST。
  • 如果用户是一个函数?- 在这个视频中,André Staltz 讨论了人与计算机之间的输入/输出循环,以及如何通过使用 FRP 和事件流来利用这一模型。
  • 我们为什么要构建 Xstream- 作者们需要一个为 Cycle.js 定制的流库。它需要仅是“热”的,KB 大小小,并且应该只有少数几个直观的操作符。
  • Xstream- 一个极其直观、小巧且快速的 JavaScript 函数式响应式流库。
  • Why We Built Xstream- 作者们需要一个为 Cycle.js 定制的流库。它需要“热”的,kB 大小小,并且只有少数几个直观的操作符。
  • Brad Frost- 一位美丽的匹兹堡的网页设计师、演讲者、作家、顾问、音乐家和艺术家。
  • Atomic Design- Atomic Design 讨论了构建强大设计系统的重要性,并介绍了一种创建智能、精心设计的界面系统的方法论。
  • 更流畅的工作流程——风格指南助力设计与开发- Ash Connolly 解释了什么是风格指南以及它们为设计师和开发者带来的好处。
  • Atomic Docs- Atomic Docs 是一个风格指南生成器和组件管理器。Atomic Docs 是用 PHP 构建的。灵感来自 Brad Frost 的原子设计原则。
  • Atomic Lab- 基于原子设计的模板共享和编码环境。
  • 响应式导航模式- 文章描述了一些处理响应式设计中导航的流行技术。
  • Brian Lonsdorf- Salesforce 的资深用户体验工程师,JavaScript 开发者兼演讲者,以在函数式编程社区的工作而闻名。
  • A Million Ways to Fold in JS- Brian Lonsdorf 在这段视频中提供了许多用于替代循环的函数式方法。
  • Debugging Functional- 这篇文章将展示一个简单的解决方案,可以显著提升函数式 JavaScript 应用程序的调试体验。
  • Free Monads Video Series- Brian Lonsdorf 关于自由单子(free monads)的视频系列,解释了 Coyoneda、自由单子(Free Monad)和解释器(Interpretors)。
  • Freeky- Brian Lonsdorf 的自由单子集合。
  • Hey Underscore, You're Doing It Wrong!- 在这次演讲中,Brian Lonsdorf 温和地批评了 underscore.js 在库设计上没有考虑柯里化和部分函数应用。
  • JSAir - Functional and Immutable Design Patterns in JavaScript- JavaScript Air 的一期节目,讨论了“JavaScript 中的函数式编程和不可变设计模式的如何和为何”,嘉宾包括 Dab Abramov 和 Brian Lonsdorf。
  • Lenses Quick n’ Dirty- Brian Lonsdorf 制作的视频,介绍了透镜。
  • Lenses.js- 可组合的 kmett 风格透镜。
  • 每日单例:Reader- Brian Lonsdorf 关于 Reader 单例的短片。
  • 每日单例 1:Reader- Brian Lonsdorf 解释 Reader 单例的视频。
  • 每日单例 2:Future- Brian Lonsdorf 在这个视频中解释了 Future 单例。
  • 每日一 Monad 3:状态- Brian Lonsdorf 在这个视频中解释了状态 Monad。
  • 函数式编程的足够好指南- Brian Lonsdorf 编写的一本书,介绍了 JavaScript 中的代数函数式编程。
  • Charles Max Wood- Devchat.tv 的播客主持人,远程会议如 Angular RC、React RC、Rails RC 的组织者。软件顾问和开发者。
  • Angular 的冒险- Adventures in Angular 是一个每周播客,专注于 Angular JavaScript 框架及相关技术、工具、语言和实践。
  • JavaScript Jabber- 一档每周播出的关于 JavaScript 的播客,包括 Node.js、前端技术、职业发展、团队协作等更多内容。
  • Chris Coyier- Codepen 的设计师。CSS-Tricks 的作家。ShopTalk 的播客主持人。
  • Responsive Data Tables- Chris Coyier 提出的几种处理响应式表格的方法。
  • Douglas Crockford- 一位计算机程序员,以其在 JavaScript 语言开发中的持续参与、推广数据格式 JSON 以及开发 JSLint 和 JSMin 而闻名。
  • 单子与性腺- 在 YUIConf 2012 的这期视频中,Douglas Crockford 试图打破长期以来的单子教程诅咒,通过一种真正能让观众理解的方式来解释单子的概念和应用。
  • JavaScript 中的原型继承- Douglas Crockford 撰写的一篇文章,介绍了 Object.create()方法并描述了其背后的原理。
  • James Long- 在 Mozilla 工作,负责 Firefox 开发者工具。
  • 关于使用 JavaScript 生成器解决回调的研究- 这篇文章描述了生成器如何帮助对抗回调地狱。
  • 移除用户界面复杂性,或 React 为何如此出色- 在这篇帖子中,James Long 试图不特别宣扬 React,而是解释其技术为何如此深刻。
  • James Long 的 Transducers.js 库- 一个用于通用数据转换的小型库(受 Clojure 的 transducers 启发)
  • Transducers.js 第 2 轮及基准测试- Transducers.js 的重构版本,一些基准测试,惰性,转换器协议。
  • Transducers.js:一个用于数据转换的 JavaScript 库- 一篇宣布 transducers.js 库的帖子,附带一些解释。
  • Transducers.js Round 2 with Benchmarks- Transducers.js 的重构版本,一些基准测试,惰性求值,转换器协议。
  • Transducers.js: A JavaScript Library for Transformation of Data- 一篇宣布 transducers.js 库并附带一些解释的文章。
  • Jonathan Snook- 一位网页设计师和开发者,目前担任 Xero 的 UX 架构师。曾是 Shopify 的前端开发负责人。
  • SMACSS- SMACSS(发音为“smacks”)是一种审视设计过程的方式,也是一种将那些严格的框架融入灵活思维过程的方法。它试图在使用 CSS 时记录一种一致的网站开发方法。
  • Mikito Takada (mixu)- Stripe 公司的软件工程师。
  • 以严谨的方式学习 CSS 布局- 带你深入了解 CSS 布局的每一个主要概念,不试图简化 CSS 2.1 和 flexbox 规范中描述的底层机制。
  • 深入浅出单页应用- 这本免费书籍是我开始使用单页应用时所期望的。它不是特定框架的 API 参考,而是专注于讨论模式、实现选择和良好的实践。
  • Nicholas C. Zakas- 曾是雅虎的首席前端工程师和 YUI 开发者。目前在 Box 公司领导一个前端工程师团队。
  • Box Tech Talk: 可扩展的 JavaScript 应用架构- Nicholas Zakas (2012) 的视频,关于 JavaScript 架构。
  • 可扩展的 JavaScript 应用架构- 在这个视频 (2011) 中,Nicholas Zakas 讨论了具有大量 JavaScript 元素的复杂、模块化 Web 应用的前端架构。
  • T3- T3 是由 Box Inc. 赞助的极简主义 JavaScript 框架,为代码提供核心结构。
  • 理解 ECMAScript 6- Nicholas C. Zakas 编写的免费(按你想要的价格支付)电子书,描述了 EcmaScript 6 中的新特性。
  • Nicolas Gallagher- Twitter 的 Frontend 工程师。
  • Normalize.css- 一个现代的、适用于 HTML5 的 CSS 重置替代方案。
  • Pete Hunt- HelloSmyte 的联合创始人兼 CEO。前 Facebook 和 Instagram 员工。参与过 React.js 的开发。
  • Functional DOM Programming- Pete Hunt 早期对 React 及其目的的介绍之一。
  • React: 重塑最佳实践 (2013)- Pete Hunt 的 React 视频介绍。
  • 我们为什么要构建 React?- Pete Hunt 尝试解释 Facebook 开发者最初构建 React 的原因。
  • Airbnb- Airbnb 是一个供人们发布、查找和租赁住宿的网站。
  • Airbnb CSS + Sass 风格指南- 该风格指南涵盖了术语、规则声明、选择器、属性、格式化、注释、OOCSS 和 BEM、ID 选择器、JavaScript 钩子 Sass、语法、排序、混入、占位符、嵌套选择器。
  • Airbnb JavaScript Style Guide- Airbnb 的 JavaScript 代码风格指南。
  • Enzyme- Enzyme 是一个用于 React 的 JavaScript 测试工具,它使得断言、操作和遍历 React 组件的输出更加容易。
  • Polyglot- Polyglot.js 是一个用 JavaScript 编写的 I18n 辅助库,可以在浏览器和 CommonJS 环境(Node)中工作。它为插值和复数化提供了简单的解决方案。
  • Turbocharged JavaScript Refactoring with Codemods- Joe Lencioni 描述了他们如何使用 codemods 将 Airbnb 的大型 JavaScript 代码库进行转换。
  • Box Inc.- Box 是一家总部位于加利福尼亚州红木城的在线文件共享和内容管理服务公司。
  • Leche- 一种与 Mocha 和 Sinon 一起使用的 JavaScript 测试工具。它既适用于 Node.js,也适用于浏览器,因此任何更改都必须在这两种环境中都能正常工作。
  • Nicholas C. Zakas- Yahoo! 的前首席前端工程师和 YUI 开发者。目前在 Box 领导一个前端工程师团队。
  • Box Tech Talk: Scalable JavaScript Application Architecture- Nicholas Zakas (2012) 关于 JavaScript 架构的视频。
  • 可扩展的 JavaScript 应用架构- 在这个视频(2011 年)中,Nicholas Zakas 讨论了具有大量 JavaScript 元素的复杂、模块化 Web 应用的前端架构。
  • T3- T3 是由 Box Inc. 赞助的一个极简主义 JavaScript 框架,为代码提供核心结构。
  • 理解 ECMAScript 6- 由 Nicholas C. Zakas 编写的免费(按你想要支付)电子书,描述了 EcmaScript 6 中的新特性。
  • Shalam- 一个友好的 CSS 喷绘工具。Shalam 允许您在不修改任何标记的情况下,将 Retina 友好、高质量的图像精灵添加到您的网站。
  • T3- T3 是由 Box Inc. 赞助的一个极简 JavaScript 框架,为代码提供核心结构。
  • stalker- 一个 jQuery 插件,允许元素跟随用户滚动页面。
  • Facebook- Facebook 是一家总部位于美国加利福尼亚州门洛帕克的 corporations 和在线社交网络服务公司。
  • Immutable.js- 用于 JavaScript 的不可变持久化数据集合,提高效率和简洁性。
  • React- React 是一个用于创建用户界面的 JavaScript 库。许多人选择将 React 视为 MVC 中的 V。我们创建 React 的目的是解决一个问题:构建具有随时间变化的数据的大型应用程序。
  • 3 个轻量级 React 替代方案- Dan Prince 探索了 Preact、VirtualDom 和 Deku。
  • React 无状态应用?- James K Nelson 描述了如何在 React 组件中避免状态。
  • Block、Element、修改您的 JavaScript 组件- Mark Dalgleish 正在讨论如何使用 BEM 组织 React 代码,并使用 Webpack 构建所有内容。
  • CSS Modules To The Rescue.jsx- 如果你使用类似 react 的模板/组件,使用 webpack CSS 加载器来启用 CSS Modules,并忘记全局 CSS 问题。
  • 找到您的完美 React 启动项目- 一个用于 React 模板库的简单搜索引擎,能够选择所需的组件。
  • 全栈 Redux 教程- 我们将使用测试优先开发方法,逐步构建一个真实应用程序的 Node+Redux 后端和 React+Redux 前端。
  • 函数式 DOM 编程- Pete Hunt 早期对 React 及其目的的介绍之一。
  • React 中的功能原则- Jessica Kerr 谈论了四个功能原则:组合、声明式风格、隔离和数据流,以及它们在 React 中的使用。
  • 在 React 中开始使用 TDD- 学习如何使用最少的设置使用 TDD 方法测试 React 组件,同时了解要测试的内容以及如何避免常见陷阱。
  • 与 React(作为 Angular 开发者)熟悉- 在一系列文章中,Dave Ceddia 试图帮助你将“Angularisms”的知识应用到 React 中。
  • 如何在 React 中处理状态。缺失的 FAQ- Osmel Mora 挑战了在 React 应用程序中始终需要一个类似 Flux 的架构的常见误解。
  • 我们如何在 Delve 中使用 Flux 架构- Øystein Hallaråker 描述了 Delve 如何利用 Flux 应用架构。
  • 不可变数据与 React- Lee Byron 谈到了持久化不可变数据结构的工作原理,以及在使用 Immutable.js 的 React 应用中使用它们的技巧。
  • JSX Transform- JSX 转换器。一个与 React 解耦的标准且可配置的 JSX 实现。
  • Jest- 一个 JavaScript 单元测试框架,由 Facebook 用于测试服务和 React 应用程序。
  • 使用 React 和 RxJS 的 Model-View-Intent- Satish Chilukuri 展示了使用 React 实现 MVI 模式的示例。
  • Monocle- 一个用于生成 React 应用组件层次结构的可视化表示的开发工具。
  • React 和 Flux 没什么新东西,除了一个方面- Andre Staltz 讨论了 React 和 Flux 的创新和吸引人的方面。
  • Pure UI- Guillermo Rauch 讨论了应用程序的 UI 作为应用程序状态纯函数的定义。
  • React - 基础理论概念- Sebastian Markbage 尝试正式解释他的 React 思维模型。目的是通过演绎推理来描述这一设计。
  • React App- React App 是一个由 React、Universal Router 和 History 驱动的库,用于处理同构(通用)和单页应用程序中的路由、导航和渲染逻辑。
  • React 组件、元素和实例- Dan Abramov 解释了 React 中的虚拟 DOM 词汇表。
  • React 解密- 本文试图解释 React.js 和虚拟 DOM 的核心思想。
  • React Native for Web- 该项目允许基于 React Native 构建的组件在 Web 上运行,并自带所有组件样式管理。
  • React Starter Kit- 包含 Node.js、Express、GraphQL、React.js、Babel 6、PostCSS、Webpack、Browsersync 的同构 Web 应用脚手架。
  • React Storybook- 将您的 React UI 组件开发与主应用隔离。
  • React Workshop- 这是一个自我指导的工作坊。你可以按照自己的节奏跟随步骤,并在过程中随时向你的指导老师提问。
  • React in Patterns- 在使用 React 开发过程中所使用的各种设计模式/技术列表。
  • React vs Incremental DOM vs Glimmer- 在这篇文章中,我们将探索三种用于构建动态 DOM 的技术。我们还将进行基准测试,找出哪一种更快。
  • React: Rethinking best practices (2013)- Pete Hunt 对 React 的视频介绍。
  • ReactPerfTool- ReactPerfTool 试图以更直观的方式帮助您调试 React 应用的性能。它通过使用 React 团队和社区提供的插件来获取测量数据,并使用图表进行可视化。
  • 移除用户界面复杂性,或为什么 React 很棒- 在这篇文章中,James Long 试图不特指地推广 React,而是解释其技术为何如此深刻。
  • 重新思考最佳实践- Pete Hunt 谈论 React 的设计决策如何挑战既定的最佳实践。
  • Retractor- Retractor 用于端到端测试目的,暴露 React 应用的内部结构。这允许您根据渲染节点的 React 组件名称以及其状态或属性来选择 DOM 节点。
  • React/Redux 的一些问题- André Staltz 探讨了 React + Redux 的优缺点。
  • 驯服 React 设置- Cody Lindley 在这篇文章中列出了七种 React 设置,并解释了 React 与 BYOA(自带架构)方法的关系。
  • 测试 React & Redux 代码库- 这系列旨在为您提供非常全面的指导,通过测试 React 和 Redux 代码库,您可以真正利用单元测试覆盖大量内容,因为代码大多是通用的。
  • 与 React 一起工作的最小配置- Krasimir Tsonev 描述了在仅安装 7 个依赖项和学习三个命令后如何开始使用 React。
  • Redux 生态系统- 让我们来看看在适当的时候,您将不得不处理的大多数功能——以及 React & Redux 本身无法帮助您的地方。
  • React + Redux 中的 SoundCloud 客户端- 完成本教程后,您将能够使用 Webpack 和 Babel 创建自己的 React + Redux 项目。
  • 教程:克隆 Yelp- 本文将指导您构建一个完整的 React 应用程序,即使您对框架的经验很少。我们将使用 React 构建一个 Yelp 克隆。
  • 使用 React 同步更新和离线活动- Firas Durri 描述了基于 React 的架构如何使跨设备同步状态变得更加容易。
  • 开发者需要了解的 MVI(模型-视图-意图)- 文章解释了通用的 MVI 模式及其与 React、响应式编程和 Cycle.js 的关系
  • 你为什么更新?- 一个用于猴子补丁 React 的函数,并在控制台中通知你可能不必要的重新渲染发生。
  • 我们为什么要构建 React?- Pete Hunt 试图解释 Facebook 开发者最初构建 React 的原因。
  • Regenerator- 该包实现了一种源转换,它采用未来版本 JS 中为生成器/yield 提出的语法,并输出行为相同的当前高效 JS(ES5)。
  • Google- Google 的使命是组织世界信息,使其普遍可访问且有用。
  • Addy Osmani- Google 工程师,从事开放网络工具开发工作。
  • Learning JavaScript Design Patterns- 在这本免费书籍中,Addy Osmani 探讨了如何将经典和现代设计模式应用于 JavaScript 编程语言。
  • Patterns For Large-Scale JavaScript Application Architecture- Addy Osmani 对前端开发领域现有架构解决方案的全面概述。
  • 使用 AMD、CommonJS 和 ES Harmony 编写模块化 JavaScript- 在这篇文章中,Addy Osmani 回顾了使用现代模块格式(AMD、CommonJS 和 ES6 模块)编写模块化 JavaScript 的几种选项。
  • Closure Compiler- Closure Compiler 解析您的 JavaScript,分析它,删除死代码,并重写和最小化剩余部分。它还检查语法、变量引用和类型,并警告常见的 JavaScript 陷阱。
  • 介绍 Incremental DOM- Incremental DOM 是一个受 Google 开发的虚拟 DOM 启发的库。
  • Microsoft- 微软公司是一家美国跨国科技公司,开发、制造、许可、支持和销售计算机软件、消费电子产品和个人计算机及服务。
  • Microsoft 开发工具- 这些工具允许您在不同的 Internet Explorer 和 Microsoft Edge 版本上测试您的产品。
  • Knockout.js- Knockout 是一个独立的 JavaScript 实现,用于 Model-View-ViewModel 模式,并支持模板。
  • 响应式扩展 (RxJS)- RxJS 是一套用于使用可观察序列和流畅查询运算符组合异步和基于事件的程序的库。
  • 使用响应式扩展的异步 JavaScript- Jafar Husain 在此视频中解释了 Netflix 如何使用响应式扩展 (Rx) 库构建响应式用户体验,这些体验力求以事件驱动、可扩展和弹性为目标。
  • 探索 Rx 操作符:FlatMap- Christoph Burgdorf 介绍了 FlatMap 操作符及其在集合和可观察对象中的使用方法。
  • 探索 Rx 操作符:Map- Christoph Burgdorf 解释了如何在 RxJS 中使用 map 操作符。
  • 函数式核心响应式外壳- Giovanni Lodi 概述了不同的架构元模式,并描述了他关于函数式编程和可观察对象作为控制副作用方面的最新发现。
  • 学习 RX- 一系列交互式练习,用于学习 Microsoft 的 JavaScript 反应式扩展 (Rx) 库。
  • 学习 RxJS- 该网站专注于使 RxJS 概念易于理解,示例清晰且易于探索,并在整个网站中提供对最佳 RxJS 相关材料的引用。
  • 现实世界的可观察对象- Sergi Mansilla 编写了一个 FTP 客户端,并将其作为基于 RxJS 的现实世界应用程序的示例。
  • Rx 训练游戏- Rx 训练游戏是一个编码游乐场,可用于学习和练习基于 Reactive Extensions 的基于网格的游戏。
  • Rx-Book- 一本关于 RxJS v.4.0 的完整书籍。
  • RxMarbles- 一个用于实验 Rx Observables 图表的 Web 应用,用于学习目的。
  • RxState- 基于 RxJS 和 Immutable.js 的简单、主观的状态管理库。
  • 在 Angular 2 中利用 Observables- Christoph Burgdorf 描述了 Observables 的优势以及如何在 Angular 2 环境中使用它们。
  • 使用 Observable 序列的 Transducers- RxJS 书籍中的一章,描述了 Transducers。
  • 我们为何构建 Xstream- 作者们需要一个为 Cycle.js 定制的流库。它需要仅是“热”的,KB 大小小,并且应该只有少数几个直观的操作符。
  • Visual Studio Code- 构建和调试现代 Web 和云应用程序。VS Code 是免费的,并且可以在您喜欢的平台上使用 - Linux、Mac OS X 和 Windows。
  • Mozilla- Mozilla 是一个社区,它使用、开发、传播和支持免费软件产品。它由 Mozilla 基金会及其纳税子公司 Mozilla 公司提供机构支持。
  • Firefox- Firefox 是非常受欢迎的免费网络浏览器。它适用于 Linux、Mac、Windows、手持设备,并且有 70 多种不同的语言版本。
  • 詹姆斯·朗- 在 Mozilla 工作,负责 Firefox 开发者工具。
  • 《关于使用 JavaScript 生成器解决回调问题的研究》- 本文描述了生成器如何帮助对抗回调地狱。
  • 《移除用户界面复杂性,或 React 为何如此出色》- 在这篇帖子中,詹姆斯·朗试图不特指地推广 React,而是解释其技术为何如此深刻。
  • 詹姆斯·朗的 Transducers.js 库- 一个用于通用数据转换的小型库(受 Clojure 的 transducers 启发)。
  • Transducers.js 第二轮及基准测试- Transducers.js 的重构版本,一些基准测试,惰性求值,转换器协议。
  • Transducers.js:一个用于数据转换的 JavaScript 库- 一篇宣布 transducers.js 库并附带一些解释的文章。
  • Transducers.js 第二轮及基准测试- Transducers.js 的重构版本,一些基准测试,惰性求值,转换器协议。
  • Transducers.js:一个用于数据转换的 JavaScript 库- 一篇宣布 transducers.js 库并附带一些解释的文章。
  • Mozilla Developer Network (MDN)- MDN 是一个用于 Web 技术和驱动 Web 的软件的完整学习平台。
  • Nunjucks- 一种丰富且强大的 JavaScript 模板语言。
  • Stripe- Stripe 是一家爱尔兰科技公司,允许个人和企业通过互联网接受付款。
  • Alex Sexton- Alex Sexton 是 Stripe 的工程师。他是 Modernizr 核心团队、jQuery 董事会以及 Dojo 基金会董事会成员。
  • Modernizr- 它是一个由极快的测试组成的集合——我们更喜欢称之为“检测”——这些测试在您的网页加载时运行,然后您可以使用结果来定制用户体验。
  • Mikito Takada (mixu)- Stripe 公司的软件工程师。
  • Learn CSS Layout the pedantic way- 带您深入了解 CSS 布局的每一个主要概念,而不试图简化 CSS 2.1 和 flexbox 规范中描述的底层机制。
  • Single Page Apps in Depth- 这是一本免费书籍,当我开始使用单页应用程序时,这正是我所需要的。它不是特定框架的 API 参考,而是重点讨论模式、实现选择和良好实践。
  • jquery.mobilePhoneNumber- 一个用于验证和格式化手机号码的通用库。
  • jquery.payment- 一个用于构建信用卡表单、验证输入和格式化数字的通用库。
  • TODO Group- TODO 是一个由希望合作实践、工具和其他方式来运行成功和有效开源项目和程序的公司的开放组织。
  • Twitter- Twitter 是一个在线社交网络服务,使用户能够发送和阅读称为“推文”的 140 字符短消息。
  • Flight- 由 Twitter 开发的一个基于事件驱动的 Web 框架。
  • Hogan.js- Hogan.js 是一个由 Twitter 开发的 3.4k JS 模板引擎。它是基于 mustache 测试套件开发的。
  • Nicolas Gallagher- Twitter 的前端工程师。
  • Normalize.css- 一个现代的、适用于 HTML5 的 CSS 重置替代方案。
  • 万维网联盟 (W3C)- W3C 是一个国际社区,成员组织、全职员工和公众共同合作,制定网络标准。
  • 万维网架构:识别- 由 W3C 发布的架构文档讨论了网络的核心设计组件。它们包括资源的识别、资源状态的表示,以及支持代理和空间中资源交互的协议。
  • CSS 弹性盒模型模块级别 1- W3C 的 CSS 弹性盒模型规范。
  • 文档对象模型 (DOM) 技术报告- W3C 的规范。
  • 使用 ARIA 在 HTML 中的注意事项- 该文档是针对开发者如何使用可访问富互联网应用规范向 HTML 元素添加可访问性信息的实用指南。
  • Service Workers- 一种使应用程序能够利用持久后台处理的方法,包括用于在离线时启动 Web 应用程序的钩子。
  • 使用应用外壳架构实现即时加载的 Web 应用- Addy Osmani 描述了如何利用 Service Worker API 大幅提高 Web 应用的加载速度。
  • Service Worker 简介- Matt Gaunt 在这篇文章中介绍了 Service Worker API 的主要功能。
  • 服务工作者是否就绪?- 跟踪主要浏览器中的实现状态。
  • W3C 编辑草案 Shadow DOM- 本规范描述了将多个 DOM 树组合成一个层次结构的方法,以及这些树如何在文档中相互作用,从而实现更好的 DOM 组合。
  • Yandex- Yandex 是欧洲最大的互联网公司之一,运营着俄罗斯最受欢迎的搜索引擎和最访问量最大的网站。
  • 块元素修饰符 (BEM)- 一种旨在实现快速开发、长期项目、团队可扩展性和代码重用的方法论。
  • 一种新的前端方法论:BEM- SmashingMagazine 的 Varvara Stepanova 的介绍。
  • BEM 方法论简介- tutsplus 上的通用介绍文章。
  • BEM 101- Joe Richardson、Robin Rendle 和 CSS-Tricks 团队合作的帖子,介绍了 BEM 并附带了一些好的示例。
  • BEM I (终于)理解了- 在这篇文章中,Andrei Popa 将专注于 BEM 的基础知识以及如何处理从简单到复杂解剖结构的方法。
  • 对抗 BEM(扩展版):10 个常见问题及如何避免它们- 本文旨在为已经对 BEM 感兴趣并希望更有效地使用它的人,或对 BEM 感兴趣并希望了解更多的人提供帮助。
  • 块、元素、修改你的 JavaScript 组件- Mark Dalgleish 正在讨论如何使用 BEM 组织 React 代码,并使用 Webpack 构建所有内容。
  • Emmet 的 BEM 过滤器- 如果你以 OOCSS 风格编写 HTML 和 CSS 代码,特别是 Yandex 的 BEM 风格,你会喜欢这个过滤器。它提供了一些别名和自动插入常见块和元素名称到类中。
  • BEM 的五十种色调- 文章描述了不同种类的 BEM。
  • 我们如何使用 BEM 模块化我们的 CSS- Andrei Popa 描述了 AlphaSights 团队在项目中实施 BEM 时遇到的挑战。
  • BEM 方法论简介 (Toptal)- BEM 方法论和平台的总体介绍。
  • MindBEMding – 了解 BEM 语法- csswizardry 上的一篇文章,解释了 CSS 类的 BEM 语法。
  • Pobem- 用于 BEM 语法的 PostCSS 插件。
  • Sass 3.3 对 BEM 模块的支持- Sass 的下一个主要版本即将发布,并带来了对 BEM 风格模块的真实支持...
  • 是否采用 BEM- 关于 BEM 方法的系列访谈。
  • Yandex 浏览器- 由 Yandex 开发的基于 Chromium 的浏览器。
  • Zurb- ZURB 是一家自 1998 年起提供产品设计服务的公司。通过咨询、产品设计工具和培训,他们改变了企业处理渐进式设计的方式。
  • Foundation- Foundation 提供响应式网格和 HTML 及 CSS UI 组件、模板和代码片段,包括排版、表单、按钮、导航和其他界面组件,以及可选的 JavaScript 扩展。
  • Foundation for Emails 2- 用于电子邮件的前端框架,包括网格、全局样式、对齐类、按钮、提示面板、缩略图样式、排版、可见性类。
  • Responsive Email Templates- Zurb Studios 整理了这套非常棒的电子邮件模板,以便您可以使您的电子邮件活动响应式。
  • Adventures in Angular- Adventures in Angular 是一个每周播客,致力于 Angular JavaScript 框架及相关技术、工具、语言和实践。
  • CDNify Podcasts- CDNify 播客涵盖所有科技、创业、网络性能和加速相关内容。
  • JavaScript Air- 关于 JavaScript 的直播播客。
  • JavaScript Jabber- 一档关于 JavaScript 的每周播客,包括 Node.js、前端技术、职业发展、团队等更多内容。
  • Non Breaking Space Show- 寻找数字艺术、设计和开发领域中最优秀、最聪明、最睿智的人才。从工作流程到生活技巧,我们探讨他们为何这样做以及他们是如何做到的。
  • Shop Talk Show- 一档关于互联网的互联网广播节目,由 Dave Rupert 和 Chris Coyier 主演。
  • The Big Web Show- 获奖的 Big Web Show 特邀嘉宾和主题,如网络出版、艺术设计、内容策略、排版、网络技术等。它涵盖了所有重要的网络内容。
  • The Web Ahead- 与世界级专家探讨变革中的技术和互联网的未来。The Web Ahead 是你保持更新的捷径。
  • Web Security Warrior- Web Security Warriors 是开发者每周讨论如何保护网站、数据、服务器和其他互联网据点的安全。

语言、协议、浏览器 API

编程/标记语言和与网页相关的标准。
  • CSS 编码规范 - 编码规范是一套针对特定编程语言的指南,推荐该语言编写的每个程序部分的编程风格、实践和方法。
  • CSS 指南- 编写合理、可管理、可扩展的 CSS 的高级建议和指南。
  • Idiomatic CSS- 以下文档概述了 CSS 开发的一个合理风格指南。这些指南强烈鼓励使用现有的、常见的、合理的模式。
  • Maintainable CSS- MaintainableCSS 是一种编写模块化、可扩展的,当然,可维护的 CSS 的方法。
  • Primer- Primer 是 GitHub 的内部 CSS 框架。它包括基本的排版全局样式、按钮和选项卡等小型组件样式,以及我们编写 HTML 和 CSS 的通用指南。
  • Wordpress CSS Coding Standards- WordPress CSS 编码标准的目的是为 WordPress 开源项目和社区的不同方面(从核心代码到主题再到插件)的合作和审查创建一个基准。
  • CSS 变量 W3C 编辑草案- 该模块引入了级联变量作为所有 CSS 属性接受的一种新的原始值类型,以及用于定义它们的自定义属性。
  • Flexbox - 弹性盒模型(Flexbox)正式称为 CSS 弹性盒布局模块,是 CSS3 中的一种新布局模块,旨在改善容器中项目的对齐、方向和顺序,即使它们具有动态或甚至未知的大小。
  • 5 个你需要了解的 Flexbox 技术- 在这篇文章中,我们将探讨五种 Flexbox 方法来解决常见的 CSS 布局问题。我们还提供了实际示例,以展示这些技术在实际场景中的应用。
  • Flexbox 完全指南- Chris Coyer 提供了一个带有代码示例的 Flexbox 功能参考。
  • 《CSS3 Flexbox 属性可视化指南》- 与其解释 flex 属性如何工作,本指南将着重以可视化的方式展示 flex 属性如何影响布局。
  • CSS 弹性盒模型模块级别 1- W3C 的 CSS flexbox 规范。
  • Flex-Grow 是奇怪的。或者不是?- Manuel Matuzovic 描述了 flex-grow 的工作原理,包括它的奇怪特性。然后他通过几个例子展示了如何使用 flex-grow 和 flex-basis 实现常见的布局模式。
  • Flexbox Froggy- 通过玩游戏来学习 Flexbox 的有趣方式,在游戏中你将帮助 Froggy 和朋友们到达一片荷叶。
  • Flexbox Patterns- 这些交互式示例将向您展示使用 Flexbox 构建 UI 组件的实用方法。
  • Flexbugs- 该存储库是一个社区维护的 Flexbox 问题列表及其跨浏览器解决方案。
  • How To Center in CSS- 该工具整合了居中 div 的多种方法,并为您提供每种情况所需的代码。
  • The Complete Guide to Centering a DIV- 本文旨在展示如何通过一些 CSS 技巧,使任何 div 都可以居中;水平、垂直或两者兼有。无论是在页面内还是在 div 内。
  • 理解 border-image- 新的 CSS3 属性 border-image 可以让你使用单个 div 和单个图像创建具有自定义边框的灵活框。
  • 关于 z-index,没人告诉你的事- z-index 的问题在于它并不复杂,但如果你从未花时间去阅读它的规范,那么几乎可以肯定你完全不了解其关键方面。
  • 文档事件 - DOM 事件模型是一个通用的事件系统,以及用于用户界面控制和文档变异通知的标准事件模块集。
  • DOM 事件入门- Wilson Page 介绍了 DOM 事件处理的基础知识,然后深入探讨了其内部工作原理,解释了我们如何可以利用它们来解决常见问题。
  • DOM Level 2 事件模型- W3C 规范中关于 DOM Level 2 事件的章节。
  • Gator- Gator 是一个小型(最小约 0.8 kb,经过压缩和 gzip 压缩),简单、独立的、事件委托库。
  • 概述 - 关于 DOM 的高级指南、文章和文档。
  • 你不知道存在的 DOM 功能- Louis Lazaris 讲解了你可能不知道的 DOM 功能。
  • MDN 的 DOM 参考- 由 Mozilla 开发网络提供的 DOM 完整参考。
  • 文档对象模型(DOM)技术报告- 由 W3C 制定的规范。
  • DOM 简介- 本节提供了对 DOM 的简要概念介绍:它是什么,如何为 HTML 和 XML 文档提供结构,如何...
  • 深入 HTML5(书籍)- 深入 HTML5 详细阐述了从 HTML5 规范和其他优秀标准中挑选出来的一部分特性。
  • Google HTML/CSS Style Guide- 本文档定义了 HTML 和 CSS 的格式和样式规则。旨在提高协作能力、代码质量,并支持基础设施。
  • HEAD- 一个包含所有可能放入文档 <head> 部分的列表。
  • Idiomatic HTML- 以下文档概述了 HTML 开发的一个合理样式指南。这些指南强烈鼓励使用现有、常见、合理的模式。应根据需要调整以创建自己的样式指南。
  • 视频 & 音频 - 使用 HTML video 和 audio 元素在文档中嵌入视频内容。
  • 将制作视频带到网上- Stefan Lederer 为您提供了关于网络视频现状和未来的良好概述。
  • WordPress HTML 编码规范- WordPress 的编码约定。
  • HTTP/2 前端部署最佳实践- 本文描述了如何设置和使用新的 HTTP/2 协议。
  • 理想的 HTTP 性能- 本文讨论了 HTTP 协议的设计、其性能缺陷以及如何规避这些问题。
  • 控制流与错误处理 - 你可以在应用程序中使用的语句,以实现交互性。
  • JavaScript 正确错误处理指南- Camilo Reyes 描述了在 JavaScript 中处理异常和异步错误的方法。
  • 增强库 - 通过提供实用函数来尝试改进和增强原味 JavaScript 语言的库。
  • Flow- Flow 是一个 JavaScript 静态类型检查器。它可以在 JavaScript 程序运行之前捕获常见的错误。
  • Lodash- 一个现代的 JavaScript 工具库,提供模块化、性能和额外功能。
  • MOUT- MOUT 提供了许多类似于其他语言标准库(例如 Python、Ruby、PHP)中的辅助方法。
  • Ramda- 一个专为函数式编程风格设计的实用库,它使得创建函数式管道变得容易,并且永远不会修改用户数据。
  • 实用 Ramda - 函数式编程示例 - Tom MacWright 提供了一些 Ramda 的实用示例。
  • RubyJS- RubyJS 是 Ruby 类中所有方法(如 Array、String、Numbers、Time 等)的 JavaScript 实现。
  • 函数 - 函数是 JavaScript 过程——一组执行任务或计算值的语句。
  • Jim Ley 对闭包的解释- JavaScript 中闭包的解释。
  • 学习 JavaScript 闭包- 这篇文章将专注于闭包如何以及为什么以它们的方式工作的基本原理。
  • MDN Guide 关于函数的章节- 定义函数、作用域、闭包、参数、参数、箭头函数和预定义函数。
  • MDN 函数参考- 定义函数、参数、参数、方法、块级函数和浏览器兼容性。
  • 生成器 - 生成器允许你通过编写一个可以保持自身状态的函数来定义一个迭代算法。
  • 深入理解无 Promise 的生成器- 作者探讨了用于异步编程的生成器库,但无需 Promise。
  • 《关于使用 JavaScript 生成器解决回调的研究》- 本文描述了生成器如何帮助对抗回调地狱。
  • 回调与协程- 在这篇帖子中,TJ Holowaychuk 分享了他对协程的经验以及为什么他认为协程是一个伟大的工具。
  • JavaScript 中的协程事件循环- 协程的一个有趣用途是作为回调函数的替代方案来实现事件循环。这在 JavaScript 中尤其相关,因为回调的使用非常普遍。
  • 协程与 continuation 与生成器- StackOverflow 关于协程、continuation 和生成器之间区别的讨论。
  • Regenerator- 该包实现了一种源代码转换,它采用未来版本 JS 中提出的生成器/yield 语法,并输出与当前 JS(ES5)行为相同的有效代码。
  • 语法和类型 - JavaScript 的基本语法、变量声明、数据类型作用域、提升和字面量。
  • Well-Known Symbols 的详细概述- Well-known symbols 由内置 JavaScript 算法使用。本文档通过 well-known symbols 列表进行指导,并解释如何在代码中舒适地使用它们。
  • MDN 上的 Grammar and Types 章节- 本章讨论 JavaScript 的基本语法、变量声明、数据类型和字面量。
  • 变量提升详解- 作者解释了 JavaScript 中变量提升的工作原理,包括变量声明和 ES6 let 运算符。
  • 变量生命周期:为什么 let 不被提升- ES2015 为 let 提供了一种不同且改进的机制。它要求更严格的变量声明实践,并因此提高了代码质量。让我们深入了解这一过程。
  • JS 编码规范 - 编码规范是一套针对特定编程语言的指南,推荐编程风格、实践和方法,适用于用该语言编写的程序每个方面。
  • Airbnb JavaScript 风格指南- Airbnb 对 JavaScript 的合理方法。
  • Google JavaScript 风格指南- JavaScript 是 Google 许多开源项目的主要客户端脚本语言。这份风格指南是 JavaScript 程序的“应该做”和“不应该做”的列表。
  • Idiomatic.js- 以下列表概述了 Rick Waldron 在他作为原始作者的所有代码中使用的实践。
  • JavaScript Standard Style- 一套用于检查和改进您代码风格的模块。
  • WordPress JavaScript 编码标准- JavaScript 已成为开发基于 WordPress 的应用程序(主题和插件)以及 WordPress 核心的关键组成部分。需要对 JavaScript 代码的格式化和样式进行标准化。
  • 对象 - 对象是一组相关状态和行为捆绑的软件包。软件对象通常用于模拟你在日常生活中所发现的现实世界对象。
  • ECMA-262-3 详细说明:面向对象编程 - 一般理论- 在这篇文章中,我们考虑了 ECMAScript 中面向对象编程的主要方面。文章重点关注理论方面,以便从内部了解这些过程。
  • JavaScript 中 this 关键字的温和解释- 这篇文章专注于调用解释,说明函数调用如何影响 this,并展示了识别上下文时的常见陷阱。
  • JavaScript 中的面向对象编程:你需要知道的- 在这篇文章中,我们只关注继承和封装,因为只有这两个概念适用于 JavaScript 中的面向对象编程。
  • TypeScript / ES6 中的面向对象设计- 作者深入探讨了高级面向对象编程主题,如函数式编程原则、继承和控制反转。
  • JavaScript 中的原型继承- Douglas Crockford 撰写的文章介绍了 Object.create()方法,并描述了其背后的原理。
  • 使用 JavaScript 的原型面向对象编程- Mehdi Maujood 描述了原型式面向对象风格,并将其与 JavaScript 中的类进行了比较。
  • JavaScript 中的原型和继承- 本文试图揭开 JavaScript 中原型的概念。它展示了原型如何允许对象从其他对象继承功能,使用 new 运算符和构造函数构建对象的方法。
  • 概述 - JavaScript 语言的通用、高级指南和介绍。
  • 《Eloquent JavaScript (Book)》- 一本关于 JavaScript 语言、浏览器和 Node.js 的综合性书籍。
  • JavaScript Garden- JavaScript Garden 是一个不断增长的关于 JavaScript 编程语言最奇特部分的文档集合。它提供了避免常见错误和微妙错误的建议。
  • Mozilla Developer Network 的 JavaScript 指南- JavaScript 指南展示了如何使用 JavaScript 并概述了该语言。
  • 简化的 JavaScript 行话- 一个社区驱动的尝试,用几句话解释当前 JavaScript 生态系统中的大量流行术语。
  • 理解 ECMAScript 6- 由 Nicholas C. Zakas 编写的免费(意指你想付多少钱就付多少钱)电子书,描述了 EcmaScript 6 中的新特性。
  • 这到底是怎么回事?事件循环- Philip Roberts 在这个视频中试图直观地理解 JavaScript 运行时会发生什么。他谈论了调用栈、事件循环、回调队列和其他概念。
  • 你不知道的 JavaScript- 这些书分别针对语言中最常被误解或理解不足的核心部分,并深入而详尽地探讨它们。
  • Promises- Promise 代表异步操作的结果。
  • Bluebird.js- Bluebird 是一个功能齐全的 promise 库,具有无与伦比的性能。
  • Promise 和 Task 的区别- 一旦你有了 Promise 实例,操作就已经开始了。Task 实例直到有人调用.fork()才会运行。
  • ECMAScript Promises 规范- Promises 的标准 ES 规范。
  • MDN 关于 Promise 的页面- Promise 对象用于延迟和异步计算。Promise 代表一个尚未完成但预期在未来完成的操作。
  • The Promises/A+ Spec- 一个用于可靠、可互操作的 JavaScript Promise 的开标准——由实现者制定,供实现者使用。
  • 跟踪未处理的 Promise 拒绝- 在基于 Promise 的异步代码中,拒绝用于错误处理。一个风险是拒绝可能会丢失,导致静默失败。
  • 什么是 Promise.try,以及它为什么重要?- 在这篇文章中,Sven Slootweg 更好地解释了 Promise.try 是什么,以及为什么你应该始终使用它,而不需要例外。
  • 承诺的要点是什么?- 承诺的要点是表示操作最终产生的结果值,但使用它们的原因是更好地并行同步操作并解决回调地狱。
  • JSON-LD- JSON-LD 是一种轻量级的链接数据格式。它基于已经成功的 JSON 格式,并提供了一种帮助 JSON 数据在 Web 规模下互操作的方式。
  • 编辑、转换和优化 SVG 的工具和资源- 本文将为您提供简化编辑、转换、优化和交付 SVG 的工具和资源。
  • 使用应用外壳架构实现即时加载的 Web 应用- Addy Osmani 描述了如何利用 Service Worker API 大幅提高您的 Web 应用的加载速度。
  • 服务工作者简介- Matt Gaunt 在这篇文章中介绍了 Service Worker API 的主要功能。
  • 服务工作者是否就绪?- 跟踪主要浏览器中的实现状态。
  • Dot.js- 适用于 Node.js 和浏览器的最快 + 简洁的 JavaScript 模板引擎。
  • LinkedIn 的 Dust.js- Dust 是一个 JavaScript 模板引擎。它继承了 ctemplate 语言家族的外观,并设计为在服务器和浏览器上异步运行。
  • Dōmo- dōmo 允许您使用 JavaScript 语法编写 HTML 标记和 CSS 样式。它是模板引擎和 CSS 预处理器的更简单、更便捷的替代方案。
  • HyperScript- 使用 JavaScript 创建超文本,可在客户端或服务器端运行。
  • Marko- Marko 是由 eBay 开发的一个非常快速且轻量级的基于 HTML 的模板引擎。Marko 可在 Node.js 和浏览器中运行,并支持流式传输、异步渲染和自定义标签。
  • Mustache- Mustache 是一种无逻辑模板语言。没有 if 语句、else 子句或 for 循环。取而代之的是只有标签。
  • Handlebars.js- Handlebars.js 是 Mustache 模板语言的扩展。Handlebars.js 和 Mustache 都是无逻辑模板语言,它们像我们所知的那样将视图和代码分离。
  • Hogan.js- Hogan.js 是 Twitter 开发的 3.4k JS 模板引擎。它是基于 Mustache 测试套件开发的。
  • Mustache Specification- 本文档解释了 Mustache 标签的不同类型。
  • Walrus- Walrus 是一个受 mustache、handlebars、ejs 等启发的模板库。
但哲学和风格上有一些重要差异。
  • mustache.js- mustache.js 是 JavaScript 中 mustache 模板系统的实现。
  • templayed.js- 最快且最小的 Mustache 兼容型 JavaScript 模板库,编写于 1806 字节。
  • Nunjucks- 一种丰富且强大的 JavaScript 模板语言。
  • Pithy- 一个用于在 JavaScript 中生成 HTML 的内部 DSL。
  • T- T.js 是一个模板引擎,它使用简单的 JavaScript 数据结构来表示 HTML/xml 数据。
  • Template7- Template7 是一个以移动设备优先的 JavaScript 模板引擎,具有类似 Handlebars 的语法。它被用作 Framework7 的默认模板引擎。
  • Transparency- Transparency 是一个为 jQuery 设计的最小化模板引擎。它将 JSON 对象映射到 DOM 元素,无需任何配置。
  • Weld- Weld 将数据绑定到标记,并且可以根据您的数据生成标记。不需要特殊的语法或数据重塑。
  • ClojureScript- ClojureScript 是一种针对 JavaScript 的 Clojure 编译器。它设计用于生成与 Google Closure 优化编译器的高级编译模式兼容的 JavaScript 代码。
  • Dart- Dart 是一种开源的、可扩展的编程语言,具有强大的库和运行时,用于构建 Web、服务器和移动应用程序,编译为 JavaScript。
  • Elm- Elm 是一种用于声明式创建基于浏览器的图形用户界面的函数式编程语言。
  • Elm 架构- Elm 架构是一种简单的、可无限嵌套的组件模式。它非常适合模块化、代码重用和测试。
  • Less- Less 是一种 CSS 预处理器,它扩展了 CSS 语言,添加了变量、混入、函数以及其他许多功能,使你能够创建更易于维护、主题化和扩展的 CSS。
  • PureScript- PureScript 是一种强类型、静态类型的语言,编译成 JavaScript。它用 Haskell 编写并受其启发。
  • Sass- Sass 是 CSS 的扩展,添加了嵌套规则、变量、混入、选择器继承等。它使用命令行工具或 Web 框架插件转换为格式良好、标准的 CSS。
  • Scala.js- 一个将 Scala 编译成 JavaScript 的编译器。
  • Stylus- Stylus 是一种革命性的新语言,提供了一种高效、动态和表达力强的生成 CSS 的方式。支持缩进语法和常规 CSS 风格。
  • TypeScript- JavaScript 的一个带类型的超集,编译成普通的 JavaScript。在 Angular 和 Microsoft 社区中很受欢迎。
  • Angular 2: 为什么使用 TypeScript?- Angular 2 是用 TypeScript 编写的。在本文中,Victor Savkin 讨论了他们做出这一决策的原因。
  • InversifyJS- 一个由 TypeScript 支持的强大且轻量级的 JavaScript & Node.js 应用的控制反转容器。
  • Safety in the Absence of Types- Victor Savking 讨论了 TypeScript 静态类型检查器的局限性以及如何缓解这些问题。
  • Architecture of the World Wide Web: Identification- W3C 发布的这份架构文档讨论了 Web 的核心设计组件。它们包括资源的识别、资源状态的表示,以及支持代理和资源在空间中交互的协议。
  • SpeakingURL- 该模块旨在转写输入字符串并创建所谓的语义或语音 URL。
  • URI.js- URI.js 是一个用于处理 URL 的 JavaScript 库。它提供了一个 "jQuery 风格" 的 API 来读取和写入所有常规组件,并提供了一些便利方法。
  • Are we animated yet?- 该页面跟踪在 Firefox 中实现 Web Animations API 的进度。
  • WAAPI Browser Support Test (+ Polyfill)- 该 CodePen 测试您的浏览器是否以及到何种程度支持 Web Animations API。测试在包含 Polyfill 后运行。
  • Web Animations Polyfill- Web Animations API 的 JavaScript 实现。
  • 关于 WebAssembly 的 7 个你应该知道的事实- 在这篇帖子中,我们将探讨关于 WebAssembly 的七个关键事实,这是未来几年 Web 将经历的最大变革之一。

用户界面组件

适用于网站和应用程序的即插即用 UI 组件。
  • Quantum Paper Buttons- 使用这个插件,你可以将任何 div 隐藏在 Quantum Paper Button 或 Qutton 后面。Quantum Paper 是一种可以改变其大小、形状和颜色以适应新内容的数字纸张。Quantum Paper 是 Google 新 Material Design 语言的一部分。
  • Sharingbuttons.io- 该生成器输出不使用 JavaScript 的社交媒体分享按钮,不会阻止您的网站渲染,具有可访问性,并且不会跟踪用户。
  • Behave.js- Behave.js 是一个轻量级库,用于向纯文本区域添加 IDE 风格的行为,使编写代码变得更加愉快。
  • CodeMirror- CodeMirror 是一个用 JavaScript 实现的浏览器文本编辑器。它专门用于编辑代码,并带有多种语言模式和插件,实现更高级的编辑功能。
  • Intelligist- 一个 jQuery 插件,可轻松在页面内分享和演示代码,使用 GitHub gists。
  • Prism- Prism 是一个轻量级、可扩展的语法高亮器,专为现代网络标准而构建。
  • Rainbow- Rainbow 是一个用 Javascript 编写的代码语法高亮库。
它被设计为轻量级、易于使用和可扩展。
它可以通过 CSS 完全进行主题定制。
  • ansi_up- 一个 javascript 库,可以将带有 ANSI 终端代码的文本转换为彩色 HTML
  • tabIndent.js- tabIndent.js 增强了一个文本区域,使得 Tab 键不再跳转到下一个输入,而是像文本编辑器一样插入 Tab 字符。
  • ALAJAX- 一个 jQuery 插件,可以简单地将普通 HTML 表单转换为 AJAX 表单。使用这个插件可以使你的 HTML 表单实现 Ajax 功能。无需在服务器端进行任何更改。
  • Fields.js- 一种与字段交互的抽象方式。Fields.js 创建了字段集合。每个字段都会不断被评估其有效性,并且可以通过集合进行访问。
  • Grid Forms- 一个微型的 Javascript/CSS 框架,帮助您轻松在网格上创建表单。
  • HTML5Forms.js- HTML5Forms.js 是一个 JavaScript 兼容层,实现了 HTML5 表单模块的一个子集。该脚本仅在不存在原生实现时,才会为模块的不同部分添加支持。
  • Ladda- 带有内置加载指示器的按钮。
  • Native form elements- 这是在您当前的操作系统和浏览器上每个 HTML5 表单元素的外观。
  • Redux Form- 一个使用 react-redux 的更高阶组件,用于将表单状态保存在 Redux 存储中。
  • 序列化器 - 用于在 JavaScript 中收集表单数据的库。
  • form2js- 一种方便的方法,用于将结构化表单数据收集到 JavaScript 对象中。
  • jQuery.serializeObject- 将一组表单元素编码为 JSON 对象,以便进行操作/提交。
  • jquery-serialize-object- 为 jQuery 添加 serializeObject 方法,用于将复杂表单序列化为 JavaScript 对象。
  • jquery.serializeJSON- 将表单元素转换为对象。
  • serializeForm- jQuery 插件,用于将表单元素序列化为对象。
  • 验证 - 表单验证行为在将数据传递给服务器之前,会检查数据是否符合一组标准。
  • HTML 和 CSS 中的表单验证 UX- Chris Coyier 描述了如何仅使用 HTML 属性和一些 CSS 技巧来实现表单验证。
  • Mailcheck.js- 一个 JavaScript 库和 jQuery 插件,当用户在电子邮件地址中拼写错误时,它会建议正确的域名。
  • One Validation- 这是一个用于一般验证目的的正则表达式集合。基本设计概念是将正则表达式分成模式的意义部分进行匹配。
  • Parsley- JavaScript 表单验证,实际上不需要编写一行 JavaScript 代码!
  • jQuery Super Labels 插件- 该插件诞生于需要使用表单中的标签覆盖字段方法的需求。
  • Lightgallery.js- 一个功能齐全的 JavaScript Lightbox 图片库,无需任何依赖。
  • Bourbon Neat- 一个轻量级的语义网格框架,适用于 Sass 和 Bourbon。
  • Profound Grid- 一个适用于固定和流式布局的响应式网格系统。基于 SCSS 构建,为您提供灵活性和完全控制权。
  • RWDGrid- 2kb,移动优先的网格系统,HTML5 Boilerplate 头部,类似 960grid 的命名规范。包含 PSD 网格。
  • Simple Grid- Simple Grid 是为需要基础网格的开发者创建的。具有流动列的 Simple Grid 可响应至移动设备。
  • 内容净化器 - 富文本编辑器在您将内容复制粘贴到它们中时经常产生不干净的输入。内容净化器帮助您清理文本。
  • FilteredPaste.js- 一个 jQuery 插件,可过滤任何粘贴的输入,使您的应用程序获得干净的输入,没有任何您不想要的标签或属性。
  • Sanitize.js- Sanitize.js 是一个基于白名单的 HTML 清理工具。给定一组可接受的元素和属性,Sanitize.js 将从 DOM 节点中移除所有不可接受的 HTML。
  • html-janitor- 清理您的标记并让您控制您的 HTML。HTMLJanitor 使用定义的白名单来限制其接收的 HTML,使其仅限于定义的子集。
  • Create.js- Create.js 是一个用于内容管理系统的全面网络编辑界面。它旨在提供一个现代的、完全基于浏览器的 HTML5 环境,用于管理内容。
  • Demarcate- demarcate.js 允许您直接在页面中编辑,并从 HTML 元素中生成 Markdown。
  • Hallo- Hallo 是最简单的网络编辑器。它没有杂乱的表单或工具栏,你可以直接编辑你的网络内容。只有你、你的网页设计和你的内容。
  • 受 Medium 启发 - Medium.com 内置了一个非常简单且优秀的富文本编辑器。这个库试图克隆它的行为。
  • Medium.js- 一个微小的 JavaScript 库,用于使 contenteditable 变得美观(像 Medium 的编辑器)
  • Pen- 受 Medium 启发并支持 Markdown 的富文本编辑器。
  • grande.js- 一个小的 JavaScript 库,实现了 Medium 编辑体验中的功能。
  • medium-editor- Medium.com WYSIWYG 编辑器克隆。使用 contenteditable API 实现富文本解决方案。
  • Kajero- 支持 Markdown 和智能绘图的交互式 JavaScript 笔记本。
  • MarkItUp- markItUp! 是一个基于 jQuery 库构建的 JavaScript 插件。它允许你将任何 textarea 转换为标记编辑器。
  • Mercury Editor- Mercury 是一个功能全面的 HTML5 编辑器。它从底层构建,旨在帮助您的团队在现代浏览器中充分利用内容编辑功能。
  • Quill- Quill 是一个为兼容性和可扩展性而构建的现代富文本编辑器。它由 Jason Chen 和 Byron Milligan 创建,并由 Salesforce.com 开源。
  • Scribe- 一个用于网络平台的富文本编辑器框架,包含针对浏览器不一致性的补丁和合理的默认设置。由 The Guardian 开发。
  • Inside the Guardian’s CMS: meet Scribe, an extensible rich text editor- The Guardian 的数字内容管理系统团队谈论了他们构建和开源 Scribe 的方式和原因。
  • Substance- Substance 是一个用于基于 Web 的内容编辑的 JavaScript 库。它提供了构建模块,用于实现自定义文本编辑器和基于 Web 的发布系统。
  • 使用 Substance 构建自己的编辑器- 本文介绍了 Substance 背后的理念以及如何开始使用。
  • TextAngular- 一个轻量级的、双向绑定的 Angular.js 文本编辑器。
  • WYSIHTML5- wysihtml5 是一个基于 HTML5 技术和渐进增强方法的开源富文本编辑器。它旨在通过防止不可维护的标签汤和内联样式来生成完全有效的 HTML5 标记。
  • Voog 分支- wysihtml 是一个基于 HTML5 技术的扩展且不那么严格的 xing/wysihtml5 开源富文本编辑器。代码完全与库无关:不需要 jQuery、Prototype 或类似库。
  • WYSIHTML5 增强版- WYSIHTML5 增强版是一个基于优秀的 wysihtml5 编辑器的富文本编辑器,得到了 Twitter Bootstrap、Font-Awesome、Jcrop 以及 HTML5 的拖放和文件 API 的一些帮助。
  • bootstrap3-wysiwyg- Bootstrap-wysihtml5 是一个 javascript 插件,借助 wysihtml5 和 Twitter Bootstrap 的帮助,可以轻松创建简单、美观的 wysiwyg 编辑器。
  • X-editable- 该库允许您在页面上创建可编辑元素。它可以与任何引擎(bootstrap、jquery-ui、仅 jquery)一起使用,并包含弹窗和行内模式。
  • Tocbot- Tocbot 从 HTML 文档中的标题构建目录 (TOC)。
  • CloudFlare Components- CloudFlare 开发的一套基于 React 的 UI 组件。
  • Ink- SAPO 使用的 HTML5/CSS3 框架,用于快速高效的网站设计和原型制作。
  • PrimeNG- PrimeNG 是 AngularJS2 的一组丰富的 UI 组件。PrimeNG 是流行 JavaServer Faces 组件套件 PrimeFaces 的兄弟。
  • Primer- Primer 是 GitHub 的内部 CSS 框架。它包含基本的全球排版样式、按钮和标签等小型组件,以及我们编写 HTML 和 CSS 的一般指南。
  • Pure.css- 一套小型、响应式的 CSS 模块,可用于每个 Web 项目。
  • UIkit- 一个轻量级和模块化的前端框架,以及用于开发快速强大 Web 界面的组件集。
  • Vital- 一个适用于现代 Web 应用的最小化入侵 CSS 框架。
  • Audio.js- audio.js 是一个即插即用的 JavaScript 库,允许 HTML5 的 audio 标签在任何地方使用。
  • Howler.js- howler.js 是一个面向现代网络的音频库。它默认使用 Web Audio API,并在需要时回退到 HTML5 Audio。
  • JPlayer- jPlayer 是一个用 JavaScript 编写的媒体库。作为一个 jQuery 插件,jPlayer 允许您快速将跨平台音频和视频编织到您的网页中。
  • MediaElement.js- HTML5 音频或视频播放器,带有 Flash 和 Silverlight 衬垫,模拟 HTML5 MediaElement API,使所有浏览器中的 UI 保持一致。
  • Stratus 2- Stratus 是一个基于 jQuery 的 SoundCloud 播放器,它位于您网站或博客的底部(或顶部)。
  • Video.js- Video.js 是一个为 HTML5 时代从零开始构建的网页视频播放器。它支持 HTML5 和 Flash 视频,以及 YouTube 和 Vimeo(通过插件)。它支持在桌面和移动设备上播放视频。

工作流程

任务自动化和资源交付。
  • 关于 TDD 和单元测试的 5 个常见误解- Eric Elliott 剖析了一些常见误解,并解释了如何从 TDD 和单元测试中获益最大。
  • JavaScript 测试驱动开发的温和介绍- 在这个系列的整个过程中,James Sinclair 逐步开发了一个涉及网络请求和操作 DOM 的 JavaScript 全功能应用程序。
  • 反模式及其修复- Shane Tomlinson 展示了一个包含多个常见反模式的示例应用程序,以及如何重构这些模式使其更易于测试。
  • Chai- Chai 是一个适用于 node 和浏览器的 BDD/TDD 断言库,可以与任何 JavaScript 测试框架配合使用。
  • Cucumber- Cucumber 是一个软件工具,计算机程序员使用它来测试其他软件。它运行行为驱动开发(BDD)风格的自动化验收测试。
  • Cucumber.js- Cucumber.js 是一个用纯 JavaScript 编写的 Cucumber 实现。它可以在 Node.js、IO.js、浏览器和其他任何 JavaScript 平台上运行。
  • Gherkin- Gherkin 是 Cucumber 所理解的语言。它是一种业务可读、领域特定语言,允许您描述软件的行为,而无需详细说明该行为的实现方式。
  • FiveUI- FiveUI 是一个用于评估 HTML 用户界面的可扩展工具。
违反编码的 UI 指南。
  • 介绍 BDD- Dan North 介绍了行为驱动开发 (BDD)。这是一种从测试驱动开发 (TDD) 中产生的软件开发流程。
  • Jasmine- Jasmine 是一个用于 JavaScript 的行为驱动开发测试框架。它不依赖于浏览器、DOM 或任何 JavaScript 框架。因此它适用于网站、Node.js 项目或任何可以运行 JavaScript 的地方。
  • JavaScript 测试:单元测试、功能测试与集成测试- 单元测试、集成测试和功能测试都是自动化测试的类型,它们是持续交付的基本基石。持续交付是一种开发方法,它允许你在几天或几小时内安全地部署到生产环境,而不是几个月或几年。
  • Jest- 一个 JavaScript 单元测试框架,由 Facebook 用于测试服务和 React 应用程序。
  • Kakapo.js- Kakapo 是一个功能齐全的 HTTP 模拟库,它允许您以简单和声明性的方式直接在浏览器中完全复制您的后端逻辑。
  • Karma- 一个简单的工具,允许您在多个真实浏览器中执行 JavaScript 代码。
  • Leche- 一个专为与 Mocha 和 Sinon 一起工作而设计的 JavaScript 测试工具。这既适用于 Node.js,也适用于浏览器,因此任何更改都必须在这两个位置都有效。
  • 我的 Node 测试策略- Remy Sharp 分享了他的自动化测试流程,使用 tape、proxyquire、sinon 和 browserify。
  • PhantomCSS- PhantomCSS 拍摄屏幕截图并将其与基线图像进行比较,以测试 RGB 像素差异。PhantomCSS 然后生成图像差异,以帮助您找到原因。
  • QUnit- QUnit 是一个强大且易于使用的 JavaScript 单元测试框架。它被 jQuery、jQuery UI 和 jQuery Mobile 项目使用,并能够测试任何通用的 JavaScript 代码。
  • 重构以避免反模式- Shane Tomlinson 继续重构原始应用程序,包括测试反模式,使其更易于阅读、更易于重用和更易于测试。
  • Sinon.JS 断言库 Chai- Sinon–Chai 提供了一套自定义断言,用于在 Chai 断言库中使用 Sinon.JS 的监视器、存根和模拟框架。您可以获得 Chai 的所有好处以及 Sinon.JS 的所有强大工具。
  • Sinon.js- 独立 JavaScript 测试监视器、存根和模拟。无依赖项,可与任何单元测试框架一起使用。
  • 如何存根/模拟复杂对象- 在本文中,我们将探讨如何存根深度嵌套的对象,以及当函数具有更复杂的返回值并与其他对象交互时的情况。
  • Tape- 用于 node 和浏览器的 Tap 生成测试框架。
  • 使用 Tape 测试 JavaScript 模块- 在这篇文章中,我们将深入探讨三个模块:tape、proxyquire 和 sinon。
  • 为什么我选择 Tape 而不是 Mocha(你也应该这样做)- Eric Elliott 描述了 Tape 的优势,并将其与更流行的测试框架进行了比较。
  • TestCheck- TestCheck 是一个用于生成式测试程序属性的库,类似于 QuickCheck。
  • 测试 React 和 Redux 代码库- 这系列旨在成为一个非常全面的指南,通过测试 React 和 Redux 代码库,你可以真正地通过单元测试覆盖很多内容,因为代码大多是通用的。
  • 编写可测试的 JavaScript - Rebecca Murphey 讨论了如何在单元测试中组织代码以使 JavaScript 更具可测试性。
  • Automaton- 基于 JavaScript 构建的任务自动化工具。
  • Grunt- Grunt 是一个用于 JavaScript 项目的基于任务的命令行构建工具。
  • Grunt 初学者指南:Redux- 前端工作流使用的简单 Grunt 模板,附带详细说明。
  • GruntStart- 一个基于 H5BP、jQuery、Modernizr 和 Respond 的 Grunt 启动工具。它提供了快速开始使用 Grunt 创建优化网站的基础组件。
  • 跨浏览器/设备同步测试- 这篇文章描述了一种在您的设备上测试项目的简便方法。
  • Web 开发正变得复杂。让我们去购物吧。- 一个逐步教程,用于使用 grunt 构建新项目。
  • Gulp- Gulp 是一个帮助你自动化开发流程中痛苦或耗时任务的工具包。它非常快速、跨平台且简单。
  • 文章与教程 - 关于 gulp 的出版物或逐步指南,用于在项目中设置和使用 gulp。
  • 使用 Gulp 3 和 4 构建(系列) - 关于单个组件和 gulp 整体的优秀文章系列。
  • 第 1 部分:示例- 介绍 gulp 和 gulpfile.js。
  • 第 2 部分:gulp 的解剖- 总线、收尸者、Vinyl 和 Vinyl FS、Gulp 插件。
  • 第 3 部分:编写转换器- 使用 map-stream、though2 和 event-stream。
  • 第 4 部分:增量构建- 构建自上次运行以来更改的文件并缓存。
  • 第 5 部分:注意事项- Gulp 3 中的错误管理以及 "MANY:1 伪装成 1:1" 的问题。
  • 项目的愿景、历史和未来 (2014 年 4 月)- 文章讨论了 Gulp 4 中的流、Vinyl、Vinyl 适配器、Orchestrator 和错误管理。
  • 为什么 Gulp 可能不是答案- ...仍然存在一个 Gulp 尚未解决的问题的概念性问题。许多构建步骤不是 1:1(一个文件输入,一个文件输出),而是 n:1 或 1:n。
  • CSS - 用于处理 CSS 文件的 Gulp 插件。
  • gulp-clean-css- 使用 clean-css 进行 CSS 最小化的 Gulp 插件。
  • gulp-cssnano- 使用 cssnano 进行 CSS 最小化。
  • 连接 - 用于文件连接的插件。例如打包 CSS 或 JavaScript 文件。
  • gulp-concat- 该插件将根据您的操作系统的换行符连接文件。它将从通过它的第一个文件中获取基本目录。
  • gulp-group-concat- 将多个文件组合成较少的文件
  • 部署 - 用于将构建文件推送到生产的插件。
  • gulp-tar- 从文件创建 tarball。
  • vinyl-ftp- 用于 FTP 的极速 vinyl 适配器。
  • vinyl-s3- 将 S3 作为黑胶文件源或目标使用。
  • 生态系统 - 围绕 gulp 的开发者网络和插件
  • @sindresorhus 插件- Sindre Sorhus 编写的一系列插件。
  • Gulp Friendly NPM 包- 可以与 gulp 一起使用的普通 Node.js 包。
  • 过滤器 - 用于在 vinyl 流中过滤文件的插件。
  • gulp-cache- 基于 temp 文件的缓存代理任务,用于 gulp。
  • gulp-cached- gulp 的简单内存文件缓存。
  • gulp-changed- 仅传递已更改的文件。
  • gulp-filter- 在 vinyl 流中过滤文件。
  • gulp-newer- 仅传递更新的源文件。
  • gulp-remember- 一个用于 gulp 的插件,可以记住并召回通过它的文件。
  • vinyl-diff- 这个库允许你在 vinyl 的流之间进行差异比较。
  • 图片 - 用于处理图片的插件。
  • gulp-imagemin- 压缩 PNG、JPEG、GIF 和 SVG 图片。
  • gulp-webp- 将 PNG、JPEG、TIFF 图片转换为 WebP 格式。
  • JavaScript - 用于处理 JavaScript 文件的模块加载器、压缩器和其它工具。
  • gulp-pure-cjs- Pure CommonJS 构建器的 Gulp 插件。
  • gulp-uglify- 使用 UglifyJS 压缩文件。
  • yoloader- 一个 CommonJS 模块加载器实现。它提供工具来打包基于 CommonJS 的项目并加载这些包。
  • SourceMaps - Source map 提供了一种将压缩文件中的代码映射回其原始位置在源文件中的方法。
  • 支持 gulp sourcemaps 的插件- 支持 gulp-sourcemaps 的插件列表。
  • gulp-sourcemaps- Gulp.js 的 source map 支持。
  • vinyl-sourcemaps-apply- 将源映射应用于 vinyl 文件,将其与现有的源映射合并。
  • Utility - 用于构建 gulp 插件的工具和部件。
  • gulp-count- 统计 vinyl 流中的文件数量。
  • gulp-debug- 调试 vinyl 文件流,查看哪些文件通过 gulp 管道运行。
  • gulp-size- 记录流中文件的总大小,并可选地记录单个文件的大小。
  • lazypipe- Lazypipe 允许您创建一个不可变、惰性初始化的管道。它设计用于在您希望重用部分管道的环境中使用,例如与 gulp 一起使用。
  • map-stream- 从异步函数创建一个 through 流。
  • Vinyl- Vinyl 是一个非常简单的元数据对象,用于描述文件。
  • gulp-chmod- 修改 Vinyl 文件的权限。
  • gulp-rename- 一个可以轻松重命名文件的插件。
  • mem-fs- 简单的内存中 Vinyl 文件存储。
  • vinyl-ast- 用于 Gulp 插件的解析一次和生成一次的 AST 工具桥接。
  • vinyl-buffer- 创建一个转换流,该流以 vinyl 文件为输入,输出缓冲的(isStream() === false)vinyl 文件。
  • vinyl-file- 从实际文件创建一个 vinyl 文件。
  • vinyl-fs- 文件系统适配器 Vinyl。
  • vinyl-fs-fake- 一个 vinyl-fs 的适配器,通过传递虚拟文件而不是 glob,以及调用函数而不是写入,来扩展 vinyl-fs,从而实现轻松调试。
  • vinyl-git- git 的 Vinyl 适配器。
  • vinyl-map- 将 vinyl 文件的内容映射为字符串,这样您就可以轻松地使用现有代码,而无需另一个 gulp 插件!
  • vinyl-paths- 获取 vinyl 流中的文件路径。
  • vinyl-source-buffer- 将文本流转换为内容为缓冲区的 vinyl 管道。
  • vinyl-source-stream- 在你的 gulp 或 vinyl 管道开始处使用常规文本流,以实现与现有 npm 流更佳的互操作性。
  • vinyl-to-stream- 将 vinyl 流转换为文本流。
  • vinyl-transform- 包装标准文本转换流,以便你可以编写更少的 gulp 插件。与 vinyl-map 和 vinyl-source-stream 具有类似的使用场景。
  • Mimosa- Mimosa 是一个开箱即用的 web 开发工作流工具,它将让你在几秒钟内开始编码,而不是花费数小时寻找插件和配置。
  • Plop- 微型生成器框架,使整个团队能够轻松创建具有统一格式的文件。
  • 使用 plop 自动化工作流- 使用 Riot.js 和 ES6 Javascript 自动化 UI 开发。
  • Webpack- Webpack 是一个模块打包工具。它将具有依赖关系的模块打包成静态资源。
  • Block, Element, 修改你的 JavaScript 组件- Mark Dalgleish 正在讨论如何使用 BEM 组织 React 代码,并使用 Webpack 构建所有内容。
  • 使用 Docker 和 Webpack 开发- Chris Harrington 解释了如何使用 Webpack 和 Docker 创建开发环境,以尽可能匹配生产环境。
  • 全栈 Redux 教程- 我们将逐步介绍如何使用先测试开发方法构建一个真实应用程序的 Node+Redux 后端和 React+Redux 前端。
  • 如何设置 Webpack 图像加载器- 这个简短的教程将帮助你设置 Webpack 中的图像加载器。
  • React + Redux 中的 SoundCloud 客户端- 完成这个逐步教程后,你将能够使用 Webpack 和 Babel 自己创建 React + Redux 项目。
  • Webpack 从入门到精通- 本指南的目的是帮助你入门 Webpack 并超越基础知识。
  • WebpackBin- 一个 Webpack 代码沙盒。
  • 为什么我认为 Webpack 是构建管道的正确方法- Thomas Boyt 比较了 Grunt、Gulp、Broccoli 和 Webpack 发现依赖的方式。
  • Yeoman- Yeoman 帮助你启动新项目,推荐最佳实践和工具,帮助你保持高效。它提供了一个生成器生态系统。
  • CSS Pack- 将 dgraph 或 module-deps 生成的 CSS 依赖图打包成一个 CSS 打包文件,假设图中每个节点都包含 CSS 源代码,并且图本身已使用 deps-sort 排序
  • CSS Stringify- 使用 'css.parse' 生成的 AST 的 CSS 字符串化工具
  • CSSCSS- 一个 CSS 冗余分析器,用于分析冗余
  • Clean CSS- Clean-css 是一个快速高效的 Node.js 库,用于压缩 CSS 文件
  • Helium CSS- Helium 是一个用于发现网站多个页面上未使用的 CSS 的工具。
  • PostCSS- PostCSS 将 CSS 解析为抽象语法树 (AST),通过一系列插件,然后重新连接成一个字符串。
  • PostCSS 入门- 本文介绍了 PostCSS 是什么以及如何开始使用。
  • ES CSS Modules- 结合 CSS Modules 和 ES Imports 的 PostCSS 插件。
  • 使用 PostCSS 提升您的 CSS 质量- 在这篇文章中,我们将探讨如何利用 PostCSS 帮助我们保持 CSS 代码的高质量。
  • React Starter Kit- 包含 Node.js、Express、GraphQL、React.js、Babel 6、PostCSS、Webpack、Browsersync 的同构 Web 应用程序脚手架。
  • 在样式表中处理图像- Aleks Hudochenkov 很好地展示了 PostCSS 的优势以及它在前端堆栈中扮演的角色。
  • Stylelint- Stylelint 的雄心勃勃的目标是补充我们的纪律性,通过自动执行来提供一套核心规则和一个可插拔的框架,CSS 作者可以使用它来执行自己的策略。
  • 使用 Stylelint 整理 CSS- David Clark 撰写了关于使用 CSS 断言器的原因以及 Stylelint 的优势。
  • Atom- Atom 是一个现代、易用且核心可定制的文本编辑器——你可以将其定制为任何功能,但也可以在不接触配置文件的情况下高效使用。
  • Brackets- 一个用于网络的开放源代码代码编辑器,使用 JavaScript、HTML 和 CSS 编写。
  • Notepad++- Notepad++ 是一个免费(既指“言论自由”,也指“免费啤酒”)的源代码编辑器和 Notepad 替代品,支持多种语言。在 MS Windows 环境中运行,其使用受 GPL 许可证约束。
  • Visual Studio Code- 构建和调试现代 Web 和云应用程序。VS Code 是免费的,并且可以在您喜欢的平台上使用 - Linux、Mac OS X 和 Windows。
  • Atomic Docs- Atomic Docs 是一个样式指南生成器和组件管理器。Atomic Docs 是用 PHP 构建的。灵感来自 Brad Frost 的 Atomic Design 原则。
  • Daux- Daux.io 是一个文档生成器,它使用简单的文件夹结构和 Markdown 文件动态创建自定义文档。
  • Dexy- Dexy 通过为您处理重复部分,使创建技术文档变得更加容易。Dexy 提供了一致的工具和脚本界面,因此您不必手动运行它们。
  • Docco- Docco 是一个快速且简陋的文档生成器。它生成一个 HTML 文档,将您的注释与代码混合显示。
  • JSDoc Documentation- JSDoc 的综合指南。
  • Ronn- Ronn 构建(生成)手册。它将简单的、人类可读的文本文件转换为用于终端显示的 roff,以及用于网页的 HTML。
  • Transcribe- Transcribe 是一个简单的程序,它从代码注释中生成 Markdown 文档。
  • YUIDoc- YUIDoc 是一个 Node.js 应用程序,它可以从源代码中的注释生成 API 文档,其语法与 Javadoc 和 Doxygen 等工具类似。
  • coddoc- coddoc 是一个 jsdoc 解析库。Coddoc 的不同之处在于它通过允许用户添加标签和代码解析器来实现易于扩展。它还解析源代码以用于 API。
  • devdocs.io- Devdocs 是一个集成的 API 文档阅读器,具有快速、组织和一致的用户界面。
  • dox- 使用 markdown 和 jsdoc 为 node 生成的 JavaScript 文档生成器。
  • styledocco- StyleDocco 从您的样式表中生成文档和样式指南文档。
  • Droid Sans Mono- Droid Sans Mono 是一种很棒的编程字体。它唯一的缺点是没有带斜线的零。
  • Free Programming Fonts- 为喜欢编程的人展示一些漂亮的字体。
  • Mononoki- Mononoki 是由 Matthias Tellen 创建的一种字体,旨在增强代码格式。
  • Profont- Profont 是一种等宽字体,专为编程而设计,旨在成为最易读的字体。它被设计成在小尺寸下也能看起来很好
  • Source Code Pro- Source Code Pro 是一套 OpenType 字体,设计用于在用户界面(UI)环境中表现良好。
  • Space Mono- Space Mono 是由 Colophon Foundry 为 Google 设计的一种原创固定宽度字体家族。
  • 前端流程 - 平面构建和自动化(系列)- 平面构建基本上是使用 HTML 和 CSS 编写静态页面(或多个页面)的过程。其理念是向我们的开发人员提供设计资源,如样式指南、模式库或原型,包括图像、字体、CSS 和 JavaScript 等资源,以平面构建的形式提供。
  • CSS 框架 (Inuit)- 在这一部分,作者介绍了 Inuit CSS 框架,并描述了如何将框架集成到开发过程中。
  • 环境设置与 Yeoman- 在这一部分,作者概述了如何设置开发环境,以及如何使用 Yeoman 创建项目脚手架。
  • Grunt 任务- 作者概述了如何设置开发环境,以及如何使用 Yeoman 创建项目脚手架。在这一部分的第三部分,我们将探讨如何安装和配置一些 grunt 任务。
  • html-inspector- HTML Inspector 是一个代码质量工具,帮助您和您的团队编写更好的标记。它使用 JavaScript 编写,并在浏览器中运行,因此测试 HTML 从未如此简单。
  • html-minifier- HTMLMinifier 是一款高度可配置、经过充分测试的基于 JavaScript 的 HTML 压缩工具,具有类似代码检查的功能。
  • ImageOptim-CLI- 将无损优化图像作为您自动化构建过程的一部分。
  • Jpegoptim- 用于优化/压缩 JPEG 文件的工具。
  • Optimize Images for Web – Ultimate Guide- 我们将讨论三个可以更好地优化网络图像的领域:更好的网络性能、在搜索引擎中更好地排名和索引、更好的社交媒体参与度和点击率。
  • Pngcrush- Pngcrush 是一种用于 PNG(便携式网络图形)文件的优化器。
  • SMLR- 重新编码 jpeg 图像,且无可察觉的质量损失。使用 butteraugli 心理视觉比较和 k-ary 搜索来确定最佳的 jpeg 质量设置。
  • Babel- Babel 是一个通用的多用途 JavaScript 编译器。使用 Babel 你可以使用(并创建)下一代 JavaScript,以及下一代 JavaScript 工具。
  • Full-Stack Redux Tutorial- 我们将使用测试优先开发方法,逐步构建一个真实应用程序的 Node+Redux 后端和 React+Redux 前端。
  • JavaScript 编译器:它们是什么以及为什么我们需要它们- 学习如何使用 Babel,以及这与 JavaScript 的未来有什么关系。
  • Closure Compiler- Closure Compiler 解析您的 JavaScript,分析它,删除死代码,并重写和最小化剩余部分。它还检查语法、变量引用和类型,并警告常见的 JavaScript 陷阱。
  • Flow- Flow 是一个 JavaScript 静态类型检查器。它可以在 JavaScript 程序运行之前捕获常见的错误。
  • JSCodeshift- 代码修改工具是帮助大规模、部分可自动化的代码库重构的工具。JSCodeshift 是一个用于在多个 JS 文件上运行代码修改的工具包。
  • 使用 Codemods 进行 Turbocharged JavaScript 重构- Joe Lencioni 描述了他们如何使用 Codemods 在 AirBnB 上转换大型 JavaScript 代码库
  • JavaScript 代码 linting - Linting 是运行一个程序来分析代码以发现潜在错误的过程。
  • ESLint- 用于 JavaScript 和 JSX 的可插拔 linting 工具。
  • JSHint- JSHint 是一个用于 JavaScript 程序更灵活静态分析的工具。
  • JSLint- JSLint 是一个通过静态分析 JavaScript 程序来检测错误或问题的工具。
  • JSLint、JSHint 和 ESLint 错误解释- JSLint 错误解释旨在通过理解 JSLint、JSHint 和 ESLint 有时产生的神秘错误消息来帮助您改进 JavaScript,并教您如何避免此类错误。
  • 模块打包器和加载器 - 用于将 JavaScript 模块打包成一个或多个文件的库。
  • Browserify- Browserify 允许您在浏览器中通过打包所有依赖项来 require('modules')。
  • Budo- 一个基于浏览器 ify 的开发服务器,专注于增量重载、LiveReload 集成(包括 CSS 注入)以及其他高级功能。
  • Watchify- 浏览器 ify 构建的监视模式。
  • CrapLoader- crapLoader 的目标是加载包含 document.write 的广告、小部件或任何 JavaScript 代码。该库劫持 document.write,并将从每个脚本加载的内容委托到正确的位置。
  • Modules Webmake- 一个类似于 Browserify 的 CommonJS 模块打包器,但由于不同的需求查找器而更快。
  • Require.js- RequireJS 是一个 JavaScript 文件和 AMD 模块加载器。它针对浏览器使用进行了优化,但也可以用于其他 JavaScript 环境。
  • Require1k- 浏览器中的 CommonJS require,体积为 1KB,无需构建。
  • Rollup.js- Rollup 是下一代 JavaScript 模块打包工具。使用 ES2015 模块编写您的应用程序或库,然后有效地将它们打包成一个文件,用于浏览器和 Node.js。
  • SystemJS- 通用动态模块加载器 - 在浏览器和 NodeJS 中加载 ES6 模块、AMD、CommonJS 和全局脚本。支持 Traceur 和 Babel。
  • 模块化 JavaScript:系统 JS 与 JSPM 初学者指南- jspm 与 SystemJS 的结合提供了一种统一的方式来安装和加载依赖。
  • URequire- 终极 JavaScript 模块构建器与自动化任务运行器。
  • Webpack- Webpack 是一个模块打包工具。它将带有依赖关系的模块作为输入,并生成代表这些模块的静态资源。
  • Block, Element, 修改你的 JavaScript 组件- Mark Dalgleish 正在讨论如何使用 BEM 组织 React 代码,并使用 Webpack 构建一切。
  • 使用 Docker 和 Webpack 开发- Chris Harrington 解释了如何使用 Webpack 和 Docker 创建开发环境,以尽可能匹配生产环境。
  • 全栈 Redux 教程- 我们将逐步介绍如何为实际应用程序构建 Node+Redux 后端和 React+Redux 前端,使用测试优先开发。
  • 如何设置 Webpack 图像加载器- 这个简短的教程将帮助你设置 Webpack 中的图像加载器。
  • React + Redux 中的 SoundCloud 客户端- 完成这个逐步教程后,你将能够使用 Webpack 和 Babel 自己创建 React + Redux 项目。
  • Webpack 从入门到精通- 本指南的目的是帮助你入门 Webpack 并超越基础知识。
  • WebpackBin- 一个 Webpack 代码沙箱。
  • 为什么我认为 Webpack 是构建管道的正确方法- Thomas Boyt 比较了 Grunt、Gulp、Broccoli 和 Webpack 发现依赖的方式。
  • Regenerator- 该包实现了一种源转换,它采用未来版本 JS 中为生成器/yield 提出的语法,并输出行为相同的当前高效 JS(ES5)。
  • Bower- Bower 提供了一种通用、不带有任何偏见的解决方案来解决前端包管理的问题,同时通过一个 API 暴露包依赖模型,该 API 可被更具偏见的构建堆栈所消费。
  • Lerna- Lerna 是一个优化围绕使用 git 和 npm 管理多包仓库工作流程的工具。
  • NPM- NPM 使 JavaScript 开发者能够轻松地共享和重用代码,并且能够轻松地更新他们正在共享的代码。
  • combine-source-map- 添加多个文件的源映射,偏移它们然后将它们合并成一个源映射。
  • convert-source-map- 可以在不同的格式之间转换源映射,并允许添加/更改属性。
  • exorcist- 将流中找到的源映射外部化到一个外部 .js.map 文件
  • generate-sourcemap- 为打包到捆绑包中的文件生成源映射。
  • inline-source-map- 添加源映射并将其进行 base64 编码,以便可以嵌入到生成的文件中。
  • mold-source-map- 将几乎完美的源映射塑造成你所需要的。
  • source-map-cjs- 生成和消费源映射。仅适配 commonjs,并在旧版浏览器中工作。
  • Git- Git 是一个免费且开源的分布式版本控制系统,设计用于以速度和效率处理从小到非常大的项目。
  • Become a Git Guru- Atlassian 提供的 Git 教程系列。
  • OctoLinker- OctoLinker 是一个浏览器扩展,它将 GitHub 中其他文件的引用设置为可点击。
😀 😊 😵‍💫 😡 🤝 🙏 👍 👎 ❤️