feat: update articles

上级 945a622b
- 现代社会观念转型的本质,就是“从身份到契约”。 —— 梅因
- 现代社会观念转型的本质,就是“从身份到契约”。—— 梅因
- 人是一切社会关系的总和。 —— 马克思
- 人是一切社会关系的总和。—— 马克思
- 求之于势,不责于人。
- 可胜在敌,不可胜在己。 —— 孙子
- 可胜在敌,不可胜在己。—— 孙子
......@@ -2,10 +2,10 @@
- 信仰,让选择变的更简单 - 默克尔,222 期
- 你能看到多远的过去,就能看到多远的未来。 - 丘吉尔
- 你能看到多远的过去,就能看到多远的未来。- 丘吉尔
- 人是悬挂在自己编织的意义之网上的动物。 - 马克思·韦伯
- 人是悬挂在自己编织的意义之网上的动物。- 马克思·韦伯
- 竞争意识损害竞争力。
- 不可胜在己,可胜在敌。 - 孙子
\ No newline at end of file
- 不可胜在己,可胜在敌。- 孙子
\ No newline at end of file
......@@ -12,7 +12,7 @@
- [再见,Firebug](https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug/): Firebug 是曾经最为流行与强大的 Web 开发调试工具,无数的 Web 开发者都曾经使用过 Firebug。在 2005 年 Firebug 面世之初,它是首个能够允许开发者审查、编辑以及直接在 Firefox 浏览器中直接调试代码的工具;一年之后 Firebug 宣布开源,也吸引了更多的开发者协同维护这个工具。直到 2016 年,Firefox 宣布将会统一 Firebug 与 Firefox 的内置调试工具;近日发布的新版的 Firefox 的内置开发工具也是基于 React/Redux/Webpack 等流行的 Web 开发技术栈,为开发者们提供了更多酷炫的功能。
- [Apollo Client 2.0 发布](https://dev-blog.apollodata.com/apollo-client-2-0-5c8d0affcec7): Apollo Client 是灵活易用的、完全由社区驱动的,能够与 React、Vue.js、Angular 等常见的 JavaScript 框架无缝集成的 GraphQL 客户端。目前 KLM、IBM、Intuit 等公司都已经在他们的项目中使用了 Apollo Client。 2.0 版本也是更来了一系列的功能更新与特性增强。在新版本中,我们可以使用 Apollo Link 来作为网络层以优化数据交互的性能,通过 apollo-link-state 与 apollo-link-rest 则能够平滑地兼容原有的内部状态与 REST 接口;更详细的版本说明请参考原文。
- [Apollo Client 2.0 发布](https://dev-blog.apollodata.com/apollo-client-2-0-5c8d0affcec7): Apollo Client 是灵活易用的、完全由社区驱动的,能够与 React、Vue.js、Angular 等常见的 JavaScript 框架无缝集成的 GraphQL 客户端。目前 KLM、IBM、Intuit 等公司都已经在他们的项目中使用了 Apollo Client。2.0 版本也是更来了一系列的功能更新与特性增强。在新版本中,我们可以使用 Apollo Link 来作为网络层以优化数据交互的性能,通过 apollo-link-state 与 apollo-link-rest 则能够平滑地兼容原有的内部状态与 REST 接口;更详细的版本说明请参考原文。
- [React Studio 1.2 发布](https://parg.co/USd):React Studio 是基于 React 的可视化 Web 开发工具,近日其发布了 1.2 版本;该版本中主要包含以下特性更新:内置集成了 Git 版本管理工具、集成了插件编辑器、添加了 Create Plugin 等命令、允许基于 Canvas 的 3D 预览。此外,项目的结构图功能也得到了增强,能够帮助开发者自动优化显示的组件树结构,并且优化了 Plugin Store 中插件的提交与安装方式。
......
......@@ -40,7 +40,7 @@
`深度思考,升华开发智慧`
- [我是如何 7 分钟之内黑进 40 个网站的](https://parg.co/U5b): 本文作者详细介绍了对于某个包含漏洞的网站渗透提权的过程,是一篇不错的安全实践教程。作者依次使用了 Nmap 进行嗅探踩点,使用 gobuster 进行路径枚举,构造虚拟邮箱地址并且上传 WebShell;然后从 cgi-admin/pages 获取明文数据库密码并且成功地获取全部数据库权限。 更多 Web 安全相关知识可以阅读[现代 Web 开发工程化实践](https://parg.co/UHO)
- [我是如何 7 分钟之内黑进 40 个网站的](https://parg.co/U5b): 本文作者详细介绍了对于某个包含漏洞的网站渗透提权的过程,是一篇不错的安全实践教程。作者依次使用了 Nmap 进行嗅探踩点,使用 gobuster 进行路径枚举,构造虚拟邮箱地址并且上传 WebShell;然后从 cgi-admin/pages 获取明文数据库密码并且成功地获取全部数据库权限。更多 Web 安全相关知识可以阅读[现代 Web 开发工程化实践](https://parg.co/UHO)
- [Atom 中的远程代码执行](https://parg.co/U56): 本文作者针对 Atom 1.21.1 版本中,因为 Markdown 解析漏洞导致的远程代码执行(RCE ),进行了深度分析,也是不错的了解常见的 Web 安全问题对桌面应用的影响的文章。本文首先介绍了 Atom 如何通过 CSP 来限制 XSS,然后分析了 Atom 是如何解析 Markdown 文件,如何针对这种解析机制构造 local DOM XSS Payload,以及如何执行本地任意代码并且加载执行远程代码;更多 Web 安全相关知识可以阅读[现代 Web 开发工程化实践](https://parg.co/UHO)
......
......@@ -22,7 +22,7 @@
- [《Web 常见权限认证技术详解》](https://github.com/teesloane/Auth-Boss):此文详细阐述了 Web 开发中常用的权限认证技术,首先介绍了 Web 开发中与权限相关的常见名词,而后介绍了 HTTP Basic Authentication、基于 Session 的认知、基于 Token 的认证、JWT、OAuth 以及 OpenID。( https://github.com/teesloane/Auth-Boss  )
- [《ECMAScript 4 背后的故事》](https://auth0.com/blog/the-real-story-behind-es4/):  本文是对于 1999 ~ 2008 年之间 JavaScript 世界发生的大事件的详细介绍,阐述了 ECMAScript 4 从提出到角力到流产的前世今生。 ( http://suo.im/phBiE  )
- [《ECMAScript 4 背后的故事》](https://auth0.com/blog/the-real-story-behind-es4/):  本文是对于 1999 ~ 2008 年之间 JavaScript 世界发生的大事件的详细介绍,阐述了 ECMAScript 4 从提出到角力到流产的前世今生。( http://suo.im/phBiE  )
- [《React Native 与 Swift 性能对比》](https://medium.com/the-react-native-log/comparing-the-performance-between-native-ios-swift-and-react-native-7b5490d363e2#.azcqq063o):作为混合式开发框架,React Native 在运行时仍然会实际调用 Objective-C 或者 Java。此文作者同时用 Swift 与 React Native 构建了相同的应用,并且从 CPU、GPU、内存使用、电池耗费等多个角度对这二者进行性能分析。结果表明二者性能相差无几,Swift 在 CPU 占用略占优势,二者的 GPU 占用不相伯仲,而 React Native 在内存上则有一定长处。( http://suo.im/2MWZnA  )
......@@ -34,11 +34,11 @@
`立足实践,提示实际水平`
- [《React 开发中的 10 个微模式》](https://hackernoon.com/10-react-mini-patterns-c1da92f068c5#.5v2hpgurn):此文是  Gilbertson 在工作中总结而来的 React 开发中常见的设计模式总结,譬如输入域的唯一标识分配、CSS 控制等等  。 ( http://suo.im/42S8Kb )
- [《React 开发中的 10 个微模式》](https://hackernoon.com/10-react-mini-patterns-c1da92f068c5#.5v2hpgurn):此文是  Gilbertson 在工作中总结而来的 React 开发中常见的设计模式总结,譬如输入域的唯一标识分配、CSS 控制等等  。( http://suo.im/42S8Kb )
- [《美团点评前端无痕埋点实践》](http://tech.meituan.com/mt-mobile-analytics-practice.html):构建一个数据平台大体上包括数据采集、数据上报、数据存储、数据计算,以及数据的可视化展示等几个重要的环节。前端数据采集与上报是整个流程中最重要的一环,只有确保前端数据生产的全面、准确、及时,最终产生的数据结果才是可靠的、有价值的。为了解决前端埋点的准确性、及时性、开发效率等问题,业内各家公司从不同角度,提出了多种技术方案,本文则是美团点评前端无痕埋点实践。( http://suo.im/fVPpT )
- [《工程实践中的 PWA 利器清单》](https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34#.3u42kd67r): 本文是 Google Chrome 团队的 Addy Osmani 所写,介绍了这两年来他们团队开发或者推荐的一系列能够用于生产环境的 PWA 开发工具或者辅助库。此文作者同时来列举了目前在很多主流站点应用 PWA 之后带来的一系列包括离线优先、首屏加载优化等提升用户体验的实践案例。 ( http://suo.im/1IxGPJ )
- [《工程实践中的 PWA 利器清单》](https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34#.3u42kd67r): 本文是 Google Chrome 团队的 Addy Osmani 所写,介绍了这两年来他们团队开发或者推荐的一系列能够用于生产环境的 PWA 开发工具或者辅助库。此文作者同时来列举了目前在很多主流站点应用 PWA 之后带来的一系列包括离线优先、首屏加载优化等提升用户体验的实践案例。( http://suo.im/1IxGPJ )
- [《深入了解 JavaScript 中错误对象与堆栈跟踪》](http://lucasfcosta.com/2017/02/17/JavaScript-Errors-and-Stack-Traces.html):JavaScript 中 Error 对象的堆栈跟踪信息包含了从异常抛出点到构造函数的所有栈帧信息,而手动地去捕获与操作堆栈跟踪信息有助于我们在开发测试或者异常处理相关的框架时有更好地实践。( http://suo.im/MiMWd )
......
......@@ -67,7 +67,7 @@
`乐于分享,共推前端发展`
- [《手淘发布 Atlas》](https://github.com/alibaba/atlas):手机淘宝安卓客户端容器化框架 Atlas 正式宣布开源。Atlas 由阿里巴巴移动团队自研,以容器化思路解决大规模团队协作问题,实现并行开发、快速迭代和动态部署,适用于 Android 4.x 以上系统版本的大小型 App 开发。 (https://github.com/alibaba/atlas)
- [《手淘发布 Atlas》](https://github.com/alibaba/atlas):手机淘宝安卓客户端容器化框架 Atlas 正式宣布开源。Atlas 由阿里巴巴移动团队自研,以容器化思路解决大规模团队协作问题,实现并行开发、快速迭代和动态部署,适用于 Android 4.x 以上系统版本的大小型 App 开发。(https://github.com/alibaba/atlas)
- [《Animista》](http://animista.net/):Animista 是开箱即用的 CSS 动画库,其作者还发布了非常易用的在线预览与选择站点,适合于设计人员选择合适的动画效果。( http://animista.net/ )
......
......@@ -65,7 +65,7 @@
- [《jsinspect》](https://github.com/danielstjules/jsinspect):jsinspect 提供了方便的命令行工具或者构建插件来检测代码库中的复制粘贴或者结构相似的代码片,以方便开发者在优化过程中完成代码的重构。( https://github.com/danielstjules/jsinspect )
- [《Reactide》](https://github.com/reactide/reactide):Reactide 是首个面向 React Web 应用开发 IDE,其基于 Electron 提供了跨平台的特性。Reactide 允许我们像传统开发那样打开单个文件就可以完成预览,并且提供了便捷的组件导入、格式化等功能。该项目仍处于积极的开发中,可以拭目以待。 ( https://github.com/reactide/reactide )
- [《Reactide》](https://github.com/reactide/reactide):Reactide 是首个面向 React Web 应用开发 IDE,其基于 Electron 提供了跨平台的特性。Reactide 允许我们像传统开发那样打开单个文件就可以完成预览,并且提供了便捷的组件导入、格式化等功能。该项目仍处于积极的开发中,可以拭目以待。( https://github.com/reactide/reactide )
- [《marky》](https://github.com/nolanlawson/marky):marky 是基于 performance.mark/measure 封装的高性能 JavaScript 计时器,其相较于`console.time()`以及`console.timeEnd()`具有更好地性能表现,相较于简单的`Date.now()`具有更好地准确度。( https://github.com/nolanlawson/marky )
......
......@@ -42,7 +42,7 @@
- [《使用 gRPC-Web 从 Restful JSON API 迁移到类型安全的 Web API》](https://parg.co/bNf):目前 Web 开发中,REST + JSON 是标准的 Web 应用于 API 服务器之间的交互方式。不过这种缺少强类型限制的、更多倾向于约定的通信方式往往会使得网络调试相对复杂。本文即介绍了如何扩展 gRPC 以及使用 TypeScript 设计新的系统中多个微服务之间的交互协议。( https://parg.co/bNf )
- [《实测 Vue SSR 的渲染性能:避开 20 倍耗时》](https://parg.co/bNv):Vue SSR 是 Vue.js 2.0 引入的直出渲染方案,本文将全面解析 virtual-dom-based 及 string-based 的原理并对其进行对比。Vue SSR 的模板是 virtual-dom-based,所以 QQ 空间 Hybrid 业务做 Vue 2.0 的改造的同时,模板类型也从之前的 a 类转换成 b 类。 本文是在实际业务场景中对 Vue SSR 的渲染性能做测试,并解析渲染步骤,给出尝试优化的方案和最终结论。( https://parg.co/bNv )
- [《实测 Vue SSR 的渲染性能:避开 20 倍耗时》](https://parg.co/bNv):Vue SSR 是 Vue.js 2.0 引入的直出渲染方案,本文将全面解析 virtual-dom-based 及 string-based 的原理并对其进行对比。Vue SSR 的模板是 virtual-dom-based,所以 QQ 空间 Hybrid 业务做 Vue 2.0 的改造的同时,模板类型也从之前的 a 类转换成 b 类。本文是在实际业务场景中对 Vue SSR 的渲染性能做测试,并解析渲染步骤,给出尝试优化的方案和最终结论。( https://parg.co/bNv )
- [《从零开始基于 JavaScript 构建简单神经网络》](https://parg.co/bNa):本文不是纯粹的前端开发文章,对于听说过人工智能与神经网络并且有兴趣的开发者不妨一读。而本文则是渐进地介绍神经网络与深度学习理论基础、如何使用 JavaScript 实现简单的数学公式、如何实现简单的神经网络等内容。( https://parg.co/bNa )
......
......@@ -8,7 +8,7 @@
`国内国外,前端最新动态`
- [《Stack Overflow 发布技术趋势工具》](https://parg.co/btI):平均每天有约 8000 名开发者在 Stack Overflow 上提问工作学习中碰到的问题,Stack Overflow 对这些问题关联的技术进行了提取与分析,形成了 Stack Overflow Trends tool。 Stack Overflow Trends tool 能够根据每个月提出的问题涉及到的技术,形成对于编程语言或者框架等技术相关内容的热度变化分析图。( https://parg.co/btI )
- [《Stack Overflow 发布技术趋势工具》](https://parg.co/btI):平均每天有约 8000 名开发者在 Stack Overflow 上提问工作学习中碰到的问题,Stack Overflow 对这些问题关联的技术进行了提取与分析,形成了 Stack Overflow Trends tool。Stack Overflow Trends tool 能够根据每个月提出的问题涉及到的技术,形成对于编程语言或者框架等技术相关内容的热度变化分析图。( https://parg.co/btI )
- [《Git 2.13 发布》](https://github.com/blog/2360-git-2-13-has-been-released):近日开源项目 Git 发布其 2.13.0 版本,包含了来自 65 个贡献者提供的新特性与错误修复。新版本中提供了 SHA-1 碰撞检测、更方便地路径匹配、条件配置等功能。( https://github.com/blog/2360-git-2-13-has-been-released )
......@@ -46,7 +46,7 @@
`深度思考,升华开发智慧`
- [《React 新引擎 React Fiber 究竟要解决什么问题?》](https://parg.co/btw):Facebook 正在以流行的 JavaScript 框架 React 为基础开发一个全新的架构。这个名为 React Fiber 的全新设计改变了检测变更的方法和时机,借此可改进浏览器端和其他渲染设备的响应速度。 这一 全新架构 最初已于 2016 年 7 月公开发布,其中蕴含着过去多年来 Facebook 不断改进的工作成果。该架构可向后兼容,彻底重写了 React 的协调(Reconciliation)算法。该过程可用于确定出现变更的具体时间,并将变更传递给渲染器。( https://parg.co/btw )
- [《React 新引擎 React Fiber 究竟要解决什么问题?》](https://parg.co/btw):Facebook 正在以流行的 JavaScript 框架 React 为基础开发一个全新的架构。这个名为 React Fiber 的全新设计改变了检测变更的方法和时机,借此可改进浏览器端和其他渲染设备的响应速度。这一 全新架构 最初已于 2016 年 7 月公开发布,其中蕴含着过去多年来 Facebook 不断改进的工作成果。该架构可向后兼容,彻底重写了 React 的协调(Reconciliation)算法。该过程可用于确定出现变更的具体时间,并将变更传递给渲染器。( https://parg.co/btw )
- [《测试中 Fakes、Mocks 以及 Stubs 概念明晰》](https://dev.to/milipski/test-doubles---fakes-mocks-and-stubs):在自动化测试中,我们经常会使用一些简化但是类似于生产环境下的对象复制品来进行测试,从而简化测试的复杂度、允许仅对测试目标而独立于其实际耦合模块进行测试。本文则是形象生动地介绍了常见的测试复制品(Test Doubles)中 Mocks、Fakes 以及 Stubs 的区别。( https://dev.to/milipski/test-doubles---fakes-mocks-and-stubs )
......
......@@ -40,7 +40,7 @@
- [《AMP 与 MIP 等移动页面加速框架的探索与实践》](https://parg.co/bkU):随着移动互联网技术发展与 H5 生态的不断演化,在前端领域涌现出了一些通用的、开源的移动 H5 页面加速框架。其中以 Google 提出的 AMP(Accelerated Mobile Pages)开源框架与百度提出的 MIP(Mobile Instant Pages)开源框架为代表。本主题主要从技术的层面讨论: 移动 H5 页面速度体验方面遇到的挑战和问题,以及解决方法的探索过程; 从架构设计层面,解析通用移动页面加速框架的设计思路和实现原理; 从技术实现角度,剖析移动页面加速中的重难点问题与解决方法实践; 从实际应用上,提供提升移动页面加速切实可行的操作方法。( https://parg.co/bkU )
- [《如何做好 H5 性能优化?》](https://parg.co/bkl):智能手机的普及、移动互联网的发展、微信异军突起,都为 H5 的发展提供了良好的环境。当前,H5 已被广泛应用于营销、广告、传播之中。而针对 H5 效率慢、体验差的硬伤,如何做好性能测试并优化其性能就显得尤为重要。 红豆 Live 是微博子公司有信旗下的一款语音直播产品,有各种 H5 页面。我们在做 H5 性能测试时进行了总结,本文将为大家详细介绍 H5 性能测试的关注点、测试工具及常见问题。( https://parg.co/bkl )
- [《如何做好 H5 性能优化?》](https://parg.co/bkl):智能手机的普及、移动互联网的发展、微信异军突起,都为 H5 的发展提供了良好的环境。当前,H5 已被广泛应用于营销、广告、传播之中。而针对 H5 效率慢、体验差的硬伤,如何做好性能测试并优化其性能就显得尤为重要。红豆 Live 是微博子公司有信旗下的一款语音直播产品,有各种 H5 页面。我们在做 H5 性能测试时进行了总结,本文将为大家详细介绍 H5 性能测试的关注点、测试工具及常见问题。( https://parg.co/bkl )
- [《如何快速地为 React 站点设置 A/B 测试》](https://parg.co/bkE):A/B 测试,或者称为分割测试,是用来随机地为用户展示网页以测试不同产品设计的反馈效果。A/B 测试对提升真实应用的用户接受度非常有帮助,而本文则是介绍了如何利用 react-ab-test 这个工具快速地针对 React 站点设置 A/B 测试收集用户反馈信息。( https://parg.co/bkE )
......
......@@ -38,7 +38,7 @@
- [《hyperapp》](https://github.com/hyperapp/hyperapp):hyperapp 是仅 1KB 大小的用于构建前端应用的 JavaScript 库,它基于 Elm 架构,支持声明式界面编程与函数式编程,允许使用 JSX 声明界面并且灵活地分割与合并自定义的标签。hyperapp 实现的简洁明了,是不错的可以阅读源码的轻量级框架。( https://github.com/hyperapp/hyperapp )
- [《HTTP 2 推送技术之难,真的远超我们想象》](https://parg.co/biR):在讨论页面加载性能问题时,我经常听到有人说“HTTP/2 推送可以解决这问题”,但我对这个技术的了解不多,于是打算深入研究一下。 HTTP/2 推送远比我最初想象中更复杂,也更底层,但最让我措手不及的地方在于,这种技术在不同浏览器上的表现竟然有这么大的差别,本来我还觉得这技术已经足够成熟,可以在生产环境中使用了。 本文并不是那种认为“HTTP/2 推送一无是处”的吐槽文。我觉得 HTTP/2 推送真的很强大,以后还会更加完善,但并不算能解决所有问题的万灵药。。( https://parg.co/biR )
- [《HTTP 2 推送技术之难,真的远超我们想象》](https://parg.co/biR):在讨论页面加载性能问题时,我经常听到有人说“HTTP/2 推送可以解决这问题”,但我对这个技术的了解不多,于是打算深入研究一下。HTTP/2 推送远比我最初想象中更复杂,也更底层,但最让我措手不及的地方在于,这种技术在不同浏览器上的表现竟然有这么大的差别,本来我还觉得这技术已经足够成熟,可以在生产环境中使用了。本文并不是那种认为“HTTP/2 推送一无是处”的吐槽文。我觉得 HTTP/2 推送真的很强大,以后还会更加完善,但并不算能解决所有问题的万灵药。。( https://parg.co/biR )
- [《这 WebAssembly,是 Mozilla 赢了》](http://robert.ocallahan.org/2017/06/webassembly-mozilla-won.html):Mozilla 提出 1 asm.js 与 Google Chrome 提出的 PNaCI 是都是致力于在浏览器中运行原生代码的技术方案。不过 PNaCI 却存在着自绝于 JavaScript 以及 HTML 等问题,并且其他的浏览器厂商很难去支持 PNaCI 标准。而 asm.js 则以轻量级的对于标准 Web 平台扩展的方式实现了这一目标,也就导致了最终 WebAssembly 决定靠近 asm.js 而不是 PNaCI。( http://robert.ocallahan.org/2017/06/webassembly-mozilla-won.html )
......
......@@ -48,7 +48,7 @@
`深度思考,升华开发智慧`
- [大前端公共知识梳理:这些知识你都掌握了吗?](https://parg.co/byS):近年来,随着移动化联网浪潮的汹涌而来与浏览器性能的提升,iOS、Android、Web 等前端开发技术各领风骚,大前端的概念也日渐成为某种共识。 其中特别是 Web 开发的领域,以单页应用为代表的富客户端应用迅速流行,各种框架理念争妍斗艳,百花竞放。Web 技术的蓬勃发展也催生了一系列跨端混合开发技术,希望能够结合 Web 的开发便捷性与原生应用的高性能性;其中以 Cordova、PWA 为代表的方向致力于为 Web 应用尽可能添加原生体验,而以 NativeScript、ReactNative、Weex 为代表的利用 Web 技术或者理念开发原生应用。 平心而论,无论哪一种开发领域或者技术,他们本质上都是进行图形用户界面(GUI)应用程序的开发,面对的问题、思考的方式、架构的设计很大程度上仍然可以回溯到当年以 MFC、Swing、WPF 为主导的桌面应用程序开发时代,其术不同而道相似。( https://parg.co/byS )
- [大前端公共知识梳理:这些知识你都掌握了吗?](https://parg.co/byS):近年来,随着移动化联网浪潮的汹涌而来与浏览器性能的提升,iOS、Android、Web 等前端开发技术各领风骚,大前端的概念也日渐成为某种共识。其中特别是 Web 开发的领域,以单页应用为代表的富客户端应用迅速流行,各种框架理念争妍斗艳,百花竞放。Web 技术的蓬勃发展也催生了一系列跨端混合开发技术,希望能够结合 Web 的开发便捷性与原生应用的高性能性;其中以 Cordova、PWA 为代表的方向致力于为 Web 应用尽可能添加原生体验,而以 NativeScript、ReactNative、Weex 为代表的利用 Web 技术或者理念开发原生应用。平心而论,无论哪一种开发领域或者技术,他们本质上都是进行图形用户界面(GUI)应用程序的开发,面对的问题、思考的方式、架构的设计很大程度上仍然可以回溯到当年以 MFC、Swing、WPF 为主导的桌面应用程序开发时代,其术不同而道相似。( https://parg.co/byS )
- [React Express](https://github.com/dabbott/react-express):针对目前 React 及其生态圈学习曲线过于陡峭的囧境,作者希望创建一个多合一的面向初学者的 React 技术栈学习教程,从最简单的 create-react-app、npm、webpack、babel 等工具的使用,到 ES2015、ES2016、JSX 等基础语法,最后还包括 React、Redux、CSS-in-JS 等工程实践。( https://github.com/dabbott/react-express )
......
......@@ -24,11 +24,11 @@
- [基于 Headless Chrome 的自动化测试](https://parg.co/beo):本文介绍了如何在 Headless Chrome 环境中使用 Karma 作为测试驱动运行基于 Mocha 与 Chai 的自动化测试用例。Headless Chrome 允许我们在无界面环境下,使用特性完备的 Chrome 来执行 JavaScript 脚本并且渲染网页。本文首先介绍了使用 karma-chrome-launcher 来搭建本地启动 Chrome 环境,然后介绍了使用 Mocha 与 Chai 来编写基础测试用例,最后还讨论了如何自定义 Headless Chrome 启动器并且集成到 Travis CI 环境下。( https://parg.co/beo )
- [Angular 2+ 项目实战系列](https://parg.co/beA):本系列文章包含了八个不同的章节,从零开始介绍如何利用 MongoDB、Express、Angular 2+ 以及 Node.js(MEAN Stack)来构建某个真实的应用项目。第一部分着眼于进行基础环境的搭建,包括搭建 Angular 应用开发环境、本地搭建 MongoDB、在 Auth0 申请账户与开发者密钥、搭建 Node.js 服务器并且为 Angular 应用添加基础的组件等等。第二部分着眼于添加基础的权限验证功能,并且构建数据模型等。 ( https://parg.co/beA )
- [Angular 2+ 项目实战系列](https://parg.co/beA):本系列文章包含了八个不同的章节,从零开始介绍如何利用 MongoDB、Express、Angular 2+ 以及 Node.js(MEAN Stack)来构建某个真实的应用项目。第一部分着眼于进行基础环境的搭建,包括搭建 Angular 应用开发环境、本地搭建 MongoDB、在 Auth0 申请账户与开发者密钥、搭建 Node.js 服务器并且为 Angular 应用添加基础的组件等等。第二部分着眼于添加基础的权限验证功能,并且构建数据模型等。( https://parg.co/beA )
- [利用树莓派、Node 与 React 打造智能家居](https://parg.co/bXB):作者自小就喜欢倒腾电路与计算机,而本文则简要记述了作者如何利用树莓派来将自己的电子家居变得智能可控。作者主要是由了 React Native 来开发客户端应用,并且通过 WebSocket 来与 NodeJS 后端进行数据通信,并且使用 `pi-blaster``wiringPi` 等库来保证 NodeJS 后端控制树莓派并且获取实时数据。另一方面,作者利用树莓派作为中控枢纽,分别将其连接到不同的控制器中,作者在本文中还给出了详细的电路图设计,全部的代码参考[这里](https://github.com/deepsyx/home-automation)。( https://parg.co/bXB )
- [VueConf 观后感](https://parg.co/ber):首届官方举办的 Vue.js 大会刚刚落幕,本文即是作者对于自己参会之后的感想进行的简要阐述。作者首先介绍了自己参与的数个 WorkShop 与演讲,从 Evan You 对于 Vue.js 发展历史与现状的介绍,到基于 Vuex 的状态管理、服务端渲染、代码分割等多个具体的技术实现。本文是非常不错的对于 VueConf 的回顾,如果没有参会或者尚未了解过议程的同学可以一看,并且选择自己感兴趣的议题查看对应的胶片与演讲视频。 ( https://parg.co/ber  )
- [VueConf 观后感](https://parg.co/ber):首届官方举办的 Vue.js 大会刚刚落幕,本文即是作者对于自己参会之后的感想进行的简要阐述。作者首先介绍了自己参与的数个 WorkShop 与演讲,从 Evan You 对于 Vue.js 发展历史与现状的介绍,到基于 Vuex 的状态管理、服务端渲染、代码分割等多个具体的技术实现。本文是非常不错的对于 VueConf 的回顾,如果没有参会或者尚未了解过议程的同学可以一看,并且选择自己感兴趣的议题查看对应的胶片与演讲视频。( https://parg.co/ber  )
- [Webpack 中的作用域提升简介](https://parg.co/beE):近日发布的 Webpack 3 中引入了所谓的 Scope Hoisting 新特性,从社区的反馈来看该特性已经在很多项目中成功地帮助开发者减少包体大小,提高首屏加载效率;本文则是简要地介绍了 Webpack 3 中作用域提升的基础原理。本文假设你对于 JavaScript 中闭包与模块语法有所了解,首先介绍了在老版本 Webpack 中采用的作用域分割机制及其存在的额外的性能损耗,然后对比呈现了在引入作用域提升机制之后,打包而成的文件的形式,与其带来的性能提升原理。( https://parg.co/beE )
......@@ -36,7 +36,7 @@
`立足实践,提示实际水平`
- [ React 组件解耦之道](https://parg.co/bXz):React 的组件非常地灵活可扩展,不过随着业务复杂度的增加和许多外部工具库的引入,组件往往也会显得浮肿;作者在本文中阐述了常见的几种,遵循单一职责原则的,组件分割与解耦的方法。 本文首先介绍了基础的分割 render 函数的使用范式,然后讨论了将元素以属性方式传入,最后还介绍了部分高阶组件相关的用法与知识;更多 React 相关资料参考[ https://parg.co/bM1 ](https://parg.co/bM1)。( https://parg.co/bXz )
- [ React 组件解耦之道](https://parg.co/bXz):React 的组件非常地灵活可扩展,不过随着业务复杂度的增加和许多外部工具库的引入,组件往往也会显得浮肿;作者在本文中阐述了常见的几种,遵循单一职责原则的,组件分割与解耦的方法。本文首先介绍了基础的分割 render 函数的使用范式,然后讨论了将元素以属性方式传入,最后还介绍了部分高阶组件相关的用法与知识;更多 React 相关资料参考[ https://parg.co/bM1 ](https://parg.co/bM1)。( https://parg.co/bXz )
- [为什么我们选择 TypeScript](https://parg.co/beb):本文是 Reddit 工程师  Niranjan Ramadas 记述在前端技术选型时选用 TypeScript 的考虑过程。作者认为任何语言都有其优缺点,不过合适的语言应该具备如下特点:强类型、完备的工具链支持、能够用于生产环境等。作者还特地比较了 TypeScript 与 Flow,TypeScript 是能够编译到 JavaScript 的超集语言,而 Flow 则是提供了一系列额外的注解来实现类型系统。Flow 能够保证较好的类型覆盖,但是其对于多态性的支持并不是很好,并且 TypeScript 的社区也相对活跃。( https://parg.co/beb  )
......
......@@ -14,7 +14,7 @@
- [Webkit 着手开发 PWA 特性支持](https://parg.co/bFU):Progressive Web Applications(PWAs)通过创建 Service Worker 来使 Web 用户能享受到推送、离线支持等原生应用的特性,是现代 Web 开发中重要的组成。不过令人遗憾的是 Safari 一直未表态支持 PWAs 相关特性,这一点让很多开发者也颇为不满,在 [Apple’s refusal to support Progressive Web Apps is a detriment to future of the web](https://parg.co/bFY) 此文中就进行了许多的讨论;不过近日有开发者发现,在 Webkit 的 BugList 与 Changelog 上出现了有关 PWA 的内容,尽管可能还需要数月乃至于更长的时间,我们相信未来 Safari 会给予 PWA 更好的支持。
- [TensorFire:基于 WebGL 的浏览器端高性能神经网络框架](https://parg.co/bFp):深度学习与人工智能技术正在逐步地改变人们的生活,以 TensoFlow 为代表的一系列深度学习与神经网络框架也是如日中天,迅猛发展。 TensorFire 是基于 WebGL 的,运行在浏览器中的神经网络框架。使用 TensorFire 编写的应用能够在实现前沿深度学习算法的同时,不需要任何的安装或者配置就直接运行在现代浏览器中。
- [TensorFire:基于 WebGL 的浏览器端高性能神经网络框架](https://parg.co/bFp):深度学习与人工智能技术正在逐步地改变人们的生活,以 TensoFlow 为代表的一系列深度学习与神经网络框架也是如日中天,迅猛发展。TensorFire 是基于 WebGL 的,运行在浏览器中的神经网络框架。使用 TensorFire 编写的应用能够在实现前沿深度学习算法的同时,不需要任何的安装或者配置就直接运行在现代浏览器中。
## 开发教程
......@@ -38,7 +38,7 @@
- [深入 React 动画实践](https://parg.co/bFh):本文介绍了在  React 开发中多种创建动画效果的途径,包括了基于 React 组件状态的 CSS 动画、基于 React 组件状态的 JavaScript 样式动画以及第三方依赖的 React Motion、Animated、Velocity-React 等库。本文最后还讨论了如何用 GreenSock 等经典强大的动画库来辅助 React 组件动画开发;更多 React 相关资料参考[ https://parg.co/bM1 ](https://parg.co/bM1)
- [Node.js 如何解析 Form 上传?](https://parg.co/bF3):NPM 和 GitHub 里的开源组件帮我们解决了很多繁琐的工作,但是也让我们失去了很多深入技术细节的机会。在现有组件无法满足我们需求的时候,就需要我们来自己动手丰衣足食了。 作者前段时间遇到了一个需要手动解析 Form 表单上传的机会,也借此为各位解析一下 Node.js 解析 Form 上传的实现细节。更多 Node.js 相关资料参考 [ https://parg.co/be0 ](https://parg.co/be0)
- [Node.js 如何解析 Form 上传?](https://parg.co/bF3):NPM 和 GitHub 里的开源组件帮我们解决了很多繁琐的工作,但是也让我们失去了很多深入技术细节的机会。在现有组件无法满足我们需求的时候,就需要我们来自己动手丰衣足食了。作者前段时间遇到了一个需要手动解析 Form 表单上传的机会,也借此为各位解析一下 Node.js 解析 Form 上传的实现细节。更多 Node.js 相关资料参考 [ https://parg.co/be0 ](https://parg.co/be0)
## 深度阅读
......
......@@ -50,7 +50,7 @@
`深度思考,升华开发智慧`
- [FreeWheel 前后端分离改造实践](https://parg.co/bz6):在现代前端应用的工程实践中,前后端分离的架构会为两端带来更多的灵活性,已成为主流趋势。与之相对的,传统的单体 Web 应用(Monolithic Web Application)则将前后端代码放在一起,虽然耦合性较强,但在产品研发的特定阶段仍具有较强的优势,早期的 ASP.NET、Java Spring MVC,以及 Ruby On Rails 都是单体应用的代表性框架。 本文将以 FreeWheel 从单体应用改造为前后端分离的实践为例,着重介绍其间前端所遇到的挑战和解决方案。
- [FreeWheel 前后端分离改造实践](https://parg.co/bz6):在现代前端应用的工程实践中,前后端分离的架构会为两端带来更多的灵活性,已成为主流趋势。与之相对的,传统的单体 Web 应用(Monolithic Web Application)则将前后端代码放在一起,虽然耦合性较强,但在产品研发的特定阶段仍具有较强的优势,早期的 ASP.NET、Java Spring MVC,以及 Ruby On Rails 都是单体应用的代表性框架。本文将以 FreeWheel 从单体应用改造为前后端分离的实践为例,着重介绍其间前端所遇到的挑战和解决方案。
- [原生 JavaScript 中的 MVC 设计模式](https://parg.co/bzE):近些年各种前端框架争妍斗艳,百花齐放,每个前端框架都有其自身的设计理念与模式,并且使得开发者更多的关注于上层应用开发;本文则返璞归真,讨论了如何基于原生的 JavaScript 去实现 MVC 模式。本文首先介绍了 MVC 模式的概念,然后讨论了展示一只企鹅需要分成几步:构建用于连接视图与模型的 Controller、构建用于处理数据的 Model 以及构建用于将数据渲染到界面上的 View 层。更多 JavaScript 相关参考[这里](https://parg.co/b2O)
......
......@@ -40,7 +40,7 @@
- [基于 Webpack 的 Vue.js 应用代码分割](https://parg.co/b7c):早期利用 Webpack 打包前端应用的一大缺陷在于其会产生较大的包体,而后来引入的代码分割特性则能有效地提升首屏加载速度。本文介绍了 Vue.js 应用开发中,如何利用 Webpack 与 Async components 来进行代码的动态加载;更多 Vue.js 相关资料参考[这里](https://parg.co/byL)
- [SparkUI:FreeWheel 的 React 开发实践](https://parg.co/b7E):SparkUI 是由 FreeWheel 根据自身业务特点开发的一套完整且灵活的前端开发解决方案。该方案基于 React,由 Modula 应用状态管理框架、一系列可重用的前端组件、以及构建 SPA 所需的各类支持库组成。 该方案重视可重用性、灵活性、可测试性以及开发效率,解决了前端社区常见的一些针对商业前端应用开发的痛点,如复杂状态、Side Effect,组件拆分等,更在工程实践、文档化、本身代码质量等方面达到较高标准,为前后端分离架构下的商业前端应用开发提供了坚实的基础。目前 SparkUI 已成功应用在 FreeWheel 的前端项目中。
- [SparkUI:FreeWheel 的 React 开发实践](https://parg.co/b7E):SparkUI 是由 FreeWheel 根据自身业务特点开发的一套完整且灵活的前端开发解决方案。该方案基于 React,由 Modula 应用状态管理框架、一系列可重用的前端组件、以及构建 SPA 所需的各类支持库组成。该方案重视可重用性、灵活性、可测试性以及开发效率,解决了前端社区常见的一些针对商业前端应用开发的痛点,如复杂状态、Side Effect,组件拆分等,更在工程实践、文档化、本身代码质量等方面达到较高标准,为前后端分离架构下的商业前端应用开发提供了坚实的基础。目前 SparkUI 已成功应用在 FreeWheel 的前端项目中。
## 深度阅读
......
......@@ -48,7 +48,7 @@
- [ExtJS:从崛起到沉寂](https://medium.com/@ModusJesus/the-rise-and-fall-of-ext-js-c9d727131991):对于许多的开发者而言,ExtJS  仍是非常好的开发企业级应用的平台;而本文作者从 2006 年起到 2015 年一直活跃在 Sencha 社区中,为社区的发展贡献着自己的力量。而随着 Sencha 被 IDERA 收购,作者有感而发编写此文以盘点下 ExtJS 走过的风雨十年。本文从 2005 年开始谈起,彼时 SPA 的潮流逐渐兴起,Yahoo 发布的 YUI 框架也成为了一时之选;最初的时候 ExtJS 还是 YUI-ext,算是对于 YUI 的实验性扩充,后来随着组件库复杂度的增加,也正式独立成为了 ExtJS(Extensible JavaScript)。2010 年左右,Sencha 正式成立,吸纳了 jQTouch、Raphel JS 以及许多的开源技术,形成了 Sencha Touch 等更加完善的社区;此时 ExtJS 4.0 也带来了极大的革新,不过其性能问题也令社区出现了分化。最后的 ExtJS 6.0 则将 ExtJS 与 Sencha Touch 中优秀的部分整合起来,但是随着 React.js 的蓬勃发展,ExtJS 的社区活跃度也在不断下降,其未来也是犹未可知。
- [Web 应用的重用策略](https://parg.co/UH7):随着产品线的扩充与产品复杂度的增加,我们不可避免地需要在应用中集成来自其他团队或者开发组的模块,乃至于完整的应用;本文则是介绍了三种不同的重用集成策略:利用  iframe 直接引入界面、重用整个 APP 组件、重用 UI 组件。 iframe 方式最为简单直接,能够较好地进行应用隔离,在整个技术栈不同、不需要重复认证、没有数据交互的情况下是不错的选择。而 APP 组件方式则在技术栈融合、动态尺寸、少量交互的情况下使用;最后的 UI 组件方式则是最为优雅的方式,但是也需要团队统一的技术栈与编程规范。更多 Web 应用架构相关内容参考[这里](https://parg.co/Ul1)
- [Web 应用的重用策略](https://parg.co/UH7):随着产品线的扩充与产品复杂度的增加,我们不可避免地需要在应用中集成来自其他团队或者开发组的模块,乃至于完整的应用;本文则是介绍了三种不同的重用集成策略:利用  iframe 直接引入界面、重用整个 APP 组件、重用 UI 组件。iframe 方式最为简单直接,能够较好地进行应用隔离,在整个技术栈不同、不需要重复认证、没有数据交互的情况下是不错的选择。而 APP 组件方式则在技术栈融合、动态尺寸、少量交互的情况下使用;最后的 UI 组件方式则是最为优雅的方式,但是也需要团队统一的技术栈与编程规范。更多 Web 应用架构相关内容参考[这里](https://parg.co/Ul1)
- [面试中所需要的技术与非技术指南](https://github.com/yangshun/tech-interview-handbook):本文是对于程序员面试中常见的算法与前端领域的知识进行盘点,希望能帮助程序员更好地进行面试。本文依次讨论了如何准备技术面试、按照主题分类的算法技巧与最佳实践的问题、常见的前端面试问题与答案、顶级技术公司常见的面试形式、不同公司的行为性问题、面试结束时候你可以反问的优秀的问题。
......
......@@ -34,7 +34,7 @@
- [利用 Windowing 创建高效的 React 视图](https://parg.co/UiL): 本文是 [bvaughn](https://github.com/bvaughn/) 讨论 React 性能、搜索与应用架构相关演讲上的 Presentation,他着眼于到底是什么拖慢了 React 应用性能,并且分享了如何解决问题以及学到的经验。值得一提的是,他讨论了很多关于 Windowing 工作原理,以及如何仅创建那些用户可见数据的实践;更多 React 教程参阅 [React 与前端工程化实践](https://github.com/wx-chevalier/Web-Series)
- [SPA 技术选型时的考量](https://parg.co/UiI): 本文作者讨论了他在对于网页的技术选型中,是否应该采用 SPA 方案的考量,需要注意的是,本文带有了较多的主观态度,请批判性地看待。作者提出的考量点包括:速度与性能,高开发成本,不稳定性,不易长期维护,低安全性,重造轮子,社交媒介属性,低可访问性,对于内存的浪费等。 更多 Web 架构相关资料参考[这里](https://parg.co/UiB)
- [SPA 技术选型时的考量](https://parg.co/UiI): 本文作者讨论了他在对于网页的技术选型中,是否应该采用 SPA 方案的考量,需要注意的是,本文带有了较多的主观态度,请批判性地看待。作者提出的考量点包括:速度与性能,高开发成本,不稳定性,不易长期维护,低安全性,重造轮子,社交媒介属性,低可访问性,对于内存的浪费等。更多 Web 架构相关资料参考[这里](https://parg.co/UiB)
- [基于 IntersectionObserver 进行资源延迟加载](https://parg.co/Uiu): 本文中,我们将会讨论页面滚动交互里经常涉及到的资源懒加载,不仅仅是图片,而是基于 IntersectionObserver 的任何资源懒加载。本文也会讨论如何根据元素的可见性来判断是否触发某个函数,更多 Web 性能优化相关内容参考 [Web 开发基础与工程实践](https://parg.co/bMe)
......
......@@ -22,7 +22,7 @@
- [React 16.3 新特性介绍](https://parg.co/UX4): React 16.3-alpha 近日登陆 npmjs,并且能够引入到项目中,本文即是对于 16.3 版本中的新特性进行介绍。该版本引入了新的 Context API,允许开发者使用 React.createContext() 生成两个关联组件;重构了生命周期回调,废除了 componentWillMount, componentWillUpdate, componentWillReceiveProps,引入了 getDerivedStateFromProps;提供了 StrictMode,以保证代码符合最佳实践;更新了 React Developer Tools 等。更多相关资料参考 [React Reference](https://parg.co/UXI)
- [Service workers 介绍与使用](https://parg.co/UXo): Service workers 可以看做 Progressive Web Apps 的核心组成,提供了资源缓存与通知推送的功能,这也是 Web 应用与原生应用当前的区别之一。 本文会包含 Service Worker 的基本概念与使用,具体讨论了后台处理、离线支持、资源预抓取、网络请求缓存、安装与基础使用等内容。更多相关资料参考 [PWA Reference](https://parg.co/UX1)
- [Service workers 介绍与使用](https://parg.co/UXo): Service workers 可以看做 Progressive Web Apps 的核心组成,提供了资源缓存与通知推送的功能,这也是 Web 应用与原生应用当前的区别之一。本文会包含 Service Worker 的基本概念与使用,具体讨论了后台处理、离线支持、资源预抓取、网络请求缓存、安装与基础使用等内容。更多相关资料参考 [PWA Reference](https://parg.co/UX1)
- [React’s ⚛️ new Context API](https://parg.co/UXl): 本文将会详细介绍 React 16.3 版本中提供的新 Context API,它主要包含了三个部分:React.createContext 允许输入初始值,并且返回包含 Provider 与 Consumer 的对象。Provider 组件被放置在组件树中的较高层,允许传入名为 value 的属性,而 Consumer 属性则可以放置在组件树的任意位置,通过传入渲染回调函数的方式来接收 value 参数。更多相关内容参阅 [React 与前端工程化实践](https://github.com/wx-chevalier/Web-Series)系列。
......
......@@ -28,11 +28,11 @@
`立足实践,提示实际水平`
- [Typescript 2.8 React 组件开发模式](https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935): TypeScript 是非常优秀的 JavaScript 静态类型扩展,本文则在常见的 React 开发模式的基础上,使用 TypeScript 2.8 实现了常见的模式:Stateful, Stateless, Default Props, Render Callbacks, Component Injection, Generic Components, High Order Components, Controlled Components。 更多相关内容参考 [React DevOps Links](https://github.com/wx-chevalier/Awesome-Lists/blob/master/Web/Framework/React/React-DevOps-List.md)
- [Typescript 2.8 React 组件开发模式](https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935): TypeScript 是非常优秀的 JavaScript 静态类型扩展,本文则在常见的 React 开发模式的基础上,使用 TypeScript 2.8 实现了常见的模式:Stateful, Stateless, Default Props, Render Callbacks, Component Injection, Generic Components, High Order Components, Controlled Components。更多相关内容参考 [React DevOps Links](https://github.com/wx-chevalier/Awesome-Lists/blob/master/Web/Framework/React/React-DevOps-List.md)
- [React 应用中使用的不同动画库比较](https://parg.co/Ux9): 优雅的动画是 Web 站点体验性的重要保障,现在已经有了很多介绍使用方式、使用案例、适用场景的文章。本文则是对于常见的动画库进行了横向对比,从而帮助开发者更好地针对自身的需求选择不同的动画库,包括了以下维度的考量:项目的维护情况如何,入手的难易程度如何,语法如何,性能如何等等。更多相关内容参考 [Awesome Links](https://github.com/wx-chevalier/Awesome-Lists)
- [CSS Grid 渐进式实践](https://julian.is/article/css-grid-at-scale/): 上个月我们重新设计了 Thomasnet.com,并且使用 CSS Grid 作为主要的布局方式。本文即是 CSS Grid 渐进式实践的分享: CSS Grid 语法速览以及技巧分享,CSS Grid 与 Flexbox 对比,CSS Grid 基础以及浏览器的兼容性保障。 更多相关内容参考 [现代 Web 开发--基础篇](https://github.com/wx-chevalier/Web-Series)
- [CSS Grid 渐进式实践](https://julian.is/article/css-grid-at-scale/): 上个月我们重新设计了 Thomasnet.com,并且使用 CSS Grid 作为主要的布局方式。本文即是 CSS Grid 渐进式实践的分享: CSS Grid 语法速览以及技巧分享,CSS Grid 与 Flexbox 对比,CSS Grid 基础以及浏览器的兼容性保障。更多相关内容参考 [现代 Web 开发--基础篇](https://github.com/wx-chevalier/Web-Series)
## 深度阅读
......
......@@ -62,7 +62,7 @@
- [Angular 2+ 项目实战系列](https://parg.co/beA):本系列文章包含了八个不同的章节,从零开始介绍如何利用 MongoDB、Express、Angular 2+ 以及 Node.js(MEAN Stack)来构建某个真实的应用项目。第一部分着眼于进行基础环境的搭建,包括搭建 Angular 应用开发环境、本地搭建 MongoDB、在 Auth0 申请账户与开发者密钥、搭建 Node.js 服务器并且为 Angular 应用添加基础的组件等等。第二部分着眼于添加基础的权限验证功能,并且构建数据模型等。 ( https://parg.co/beA )
- [Angular 2+ 项目实战系列](https://parg.co/beA):本系列文章包含了八个不同的章节,从零开始介绍如何利用 MongoDB、Express、Angular 2+ 以及 Node.js(MEAN Stack)来构建某个真实的应用项目。第一部分着眼于进行基础环境的搭建,包括搭建 Angular 应用开发环境、本地搭建 MongoDB、在 Auth0 申请账户与开发者密钥、搭建 Node.js 服务器并且为 Angular 应用添加基础的组件等等。第二部分着眼于添加基础的权限验证功能,并且构建数据模型等。( https://parg.co/beA )
......
......@@ -14,7 +14,7 @@
- [《理解 JavaScript 中的作用域》](https://scotch.io/tutorials/understanding-scope-in-javascript):JavaScript 中的作用域、闭包以及上下文绑定一直是令人凌乱的知识,此文作者详细地从函数作用域、块作用域、词法作用域、闭包等进行详细阐述,值得一读做个梳理。
- [《ECMAScript 4 背后的故事》](https://auth0.com/blog/the-real-story-behind-es4/):  本文是对于 1999 ~ 2008 年之间 JavaScript 世界发生的大事件的详细介绍,阐述了 ECMAScript 4 从提出到角力到流产的前世今生。 ( http://suo.im/phBiE  )
- [《ECMAScript 4 背后的故事》](https://auth0.com/blog/the-real-story-behind-es4/):  本文是对于 1999 ~ 2008 年之间 JavaScript 世界发生的大事件的详细介绍,阐述了 ECMAScript 4 从提出到角力到流产的前世今生。( http://suo.im/phBiE  )
- [《深入了解 JavaScript 中错误对象与堆栈跟踪》](http://lucasfcosta.com/2017/02/17/JavaScript-Errors-and-Stack-Traces.html):JavaScript 中 Error 对象的堆栈跟踪信息包含了从异常抛出点到构造函数的所有栈帧信息,而手动地去捕获与操作堆栈跟踪信息有助于我们在开发测试或者异常处理相关的框架时有更好地实践。( http://suo.im/MiMWd )
......
......@@ -165,7 +165,7 @@
- [Node.js 如何解析 Form 上传?](https://parg.co/bF3):NPM 和 GitHub 里的开源组件帮我们解决了很多繁琐的工作,但是也让我们失去了很多深入技术细节的机会。在现有组件无法满足我们需求的时候,就需要我们来自己动手丰衣足食了。 作者前段时间遇到了一个需要手动解析 Form 表单上传的机会,也借此为各位解析一下 Node.js 解析 Form 上传的实现细节。更多 Node.js 相关资料参考 [ https://parg.co/be0 ](https://parg.co/be0)
- [Node.js 如何解析 Form 上传?](https://parg.co/bF3):NPM 和 GitHub 里的开源组件帮我们解决了很多繁琐的工作,但是也让我们失去了很多深入技术细节的机会。在现有组件无法满足我们需求的时候,就需要我们来自己动手丰衣足食了。作者前段时间遇到了一个需要手动解析 Form 表单上传的机会,也借此为各位解析一下 Node.js 解析 Form 上传的实现细节。更多 Node.js 相关资料参考 [ https://parg.co/be0 ](https://parg.co/be0)
......
......@@ -11,7 +11,7 @@
- [工程实践中的 PWA 利器清单](https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34#.3u42kd67r): 本文是 Google Chrome 团队的 Addy Osmani 所写,介绍了这两年来他们团队开发或者推荐的一系列能够用于生产环境的 PWA 开发工具或者辅助库。此文作者同时来列举了目前在很多主流站点应用 PWA 之后带来的一系列包括离线优先、首屏加载优化等提升用户体验的实践案例。 ( http://suo.im/1IxGPJ 
- [工程实践中的 PWA 利器清单](https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34#.3u42kd67r): 本文是 Google Chrome 团队的 Addy Osmani 所写,介绍了这两年来他们团队开发或者推荐的一系列能够用于生产环境的 PWA 开发工具或者辅助库。此文作者同时来列举了目前在很多主流站点应用 PWA 之后带来的一系列包括离线优先、首屏加载优化等提升用户体验的实践案例。( http://suo.im/1IxGPJ 
......@@ -40,7 +40,7 @@
- [大前端公共知识梳理:这些知识你都掌握了吗?](https://parg.co/byS):近年来,随着移动化联网浪潮的汹涌而来与浏览器性能的提升,iOS、Android、Web 等前端开发技术各领风骚,大前端的概念也日渐成为某种共识。 其中特别是 Web 开发的领域,以单页应用为代表的富客户端应用迅速流行,各种框架理念争妍斗艳,百花竞放。Web 技术的蓬勃发展也催生了一系列跨端混合开发技术,希望能够结合 Web 的开发便捷性与原生应用的高性能性;其中以 Cordova、PWA 为代表的方向致力于为 Web 应用尽可能添加原生体验,而以 NativeScript、ReactNative、Weex 为代表的利用 Web 技术或者理念开发原生应用。 平心而论,无论哪一种开发领域或者技术,他们本质上都是进行图形用户界面(GUI)应用程序的开发,面对的问题、思考的方式、架构的设计很大程度上仍然可以回溯到当年以 MFC、Swing、WPF 为主导的桌面应用程序开发时代,其术不同而道相似。( https://parg.co/byS )
- [大前端公共知识梳理:这些知识你都掌握了吗?](https://parg.co/byS):近年来,随着移动化联网浪潮的汹涌而来与浏览器性能的提升,iOS、Android、Web 等前端开发技术各领风骚,大前端的概念也日渐成为某种共识。其中特别是 Web 开发的领域,以单页应用为代表的富客户端应用迅速流行,各种框架理念争妍斗艳,百花竞放。Web 技术的蓬勃发展也催生了一系列跨端混合开发技术,希望能够结合 Web 的开发便捷性与原生应用的高性能性;其中以 Cordova、PWA 为代表的方向致力于为 Web 应用尽可能添加原生体验,而以 NativeScript、ReactNative、Weex 为代表的利用 Web 技术或者理念开发原生应用。平心而论,无论哪一种开发领域或者技术,他们本质上都是进行图形用户界面(GUI)应用程序的开发,面对的问题、思考的方式、架构的设计很大程度上仍然可以回溯到当年以 MFC、Swing、WPF 为主导的桌面应用程序开发时代,其术不同而道相似。( https://parg.co/byS )
......
......@@ -54,7 +54,7 @@
- [React 开发中的 10 个微模式](https://hackernoon.com/10-react-mini-patterns-c1da92f068c5#.5v2hpgurn):此文是 Gilbertson 在工作中总结而来的 React 开发中常见的设计模式总结,譬如输入域的唯一标识分配、CSS 控制等等 。 ( http://suo.im/42S8Kb )
- [React 开发中的 10 个微模式](https://hackernoon.com/10-react-mini-patterns-c1da92f068c5#.5v2hpgurn):此文是 Gilbertson 在工作中总结而来的 React 开发中常见的设计模式总结,譬如输入域的唯一标识分配、CSS 控制等等 。( http://suo.im/42S8Kb )
......@@ -240,7 +240,7 @@
- [React 新引擎 React Fiber 究竟要解决什么问题?](https://parg.co/btw):Facebook 正在以流行的 JavaScript 框架 React 为基础开发一个全新的架构。这个名为 React Fiber 的全新设计改变了检测变更的方法和时机,借此可改进浏览器端和其他渲染设备的响应速度。 这一 全新架构 最初已于 2016 年 7 月公开发布,其中蕴含着过去多年来 Facebook 不断改进的工作成果。该架构可向后兼容,彻底重写了 React 的协调(Reconciliation)算法。该过程可用于确定出现变更的具体时间,并将变更传递给渲染器。( https://parg.co/btw )
- [React 新引擎 React Fiber 究竟要解决什么问题?](https://parg.co/btw):Facebook 正在以流行的 JavaScript 框架 React 为基础开发一个全新的架构。这个名为 React Fiber 的全新设计改变了检测变更的方法和时机,借此可改进浏览器端和其他渲染设备的响应速度。这一 全新架构 最初已于 2016 年 7 月公开发布,其中蕴含着过去多年来 Facebook 不断改进的工作成果。该架构可向后兼容,彻底重写了 React 的协调(Reconciliation)算法。该过程可用于确定出现变更的具体时间,并将变更传递给渲染器。( https://parg.co/btw )
......@@ -325,7 +325,7 @@
- [大前端公共知识梳理:这些知识你都掌握了吗?](https://parg.co/byS):近年来,随着移动化联网浪潮的汹涌而来与浏览器性能的提升,iOS、Android、Web 等前端开发技术各领风骚,大前端的概念也日渐成为某种共识。 其中特别是 Web 开发的领域,以单页应用为代表的富客户端应用迅速流行,各种框架理念争妍斗艳,百花竞放。Web 技术的蓬勃发展也催生了一系列跨端混合开发技术,希望能够结合 Web 的开发便捷性与原生应用的高性能性;其中以 Cordova、PWA 为代表的方向致力于为 Web 应用尽可能添加原生体验,而以 NativeScript、ReactNative、Weex 为代表的利用 Web 技术或者理念开发原生应用。 平心而论,无论哪一种开发领域或者技术,他们本质上都是进行图形用户界面(GUI)应用程序的开发,面对的问题、思考的方式、架构的设计很大程度上仍然可以回溯到当年以 MFC、Swing、WPF 为主导的桌面应用程序开发时代,其术不同而道相似。( https://parg.co/byS )
- [大前端公共知识梳理:这些知识你都掌握了吗?](https://parg.co/byS):近年来,随着移动化联网浪潮的汹涌而来与浏览器性能的提升,iOS、Android、Web 等前端开发技术各领风骚,大前端的概念也日渐成为某种共识。其中特别是 Web 开发的领域,以单页应用为代表的富客户端应用迅速流行,各种框架理念争妍斗艳,百花竞放。Web 技术的蓬勃发展也催生了一系列跨端混合开发技术,希望能够结合 Web 的开发便捷性与原生应用的高性能性;其中以 Cordova、PWA 为代表的方向致力于为 Web 应用尽可能添加原生体验,而以 NativeScript、ReactNative、Weex 为代表的利用 Web 技术或者理念开发原生应用。平心而论,无论哪一种开发领域或者技术,他们本质上都是进行图形用户界面(GUI)应用程序的开发,面对的问题、思考的方式、架构的设计很大程度上仍然可以回溯到当年以 MFC、Swing、WPF 为主导的桌面应用程序开发时代,其术不同而道相似。( https://parg.co/byS )
......
......@@ -72,7 +72,7 @@
- [实测Vue SSR的渲染性能:避开20倍耗时](https://parg.co/bNv):Vue SSR是Vue.js 2.0引入的直出渲染方案,本文将全面解析virtual-dom-based 及 string-based 的原理并对其进行对比。Vue SSR的模板是virtual-dom-based,所以QQ空间Hybrid业务做Vue 2.0的改造的同时,模板类型也从之前的a类转换成b类。 本文是在实际业务场景中对Vue SSR的渲染性能做测试,并解析渲染步骤,给出尝试优化的方案和最终结论。( https://parg.co/bNv )
- [实测Vue SSR的渲染性能:避开20倍耗时](https://parg.co/bNv):Vue SSR是Vue.js 2.0引入的直出渲染方案,本文将全面解析virtual-dom-based 及 string-based 的原理并对其进行对比。Vue SSR的模板是virtual-dom-based,所以QQ空间Hybrid业务做Vue 2.0的改造的同时,模板类型也从之前的a类转换成b类。本文是在实际业务场景中对Vue SSR的渲染性能做测试,并解析渲染步骤,给出尝试优化的方案和最终结论。( https://parg.co/bNv )
......@@ -150,7 +150,7 @@
- [VueConf 观后感](https://parg.co/ber):首届官方举办的 Vue.js 大会刚刚落幕,本文即是作者对于自己参会之后的感想进行的简要阐述。作者首先介绍了自己参与的数个 WorkShop 与演讲,从 Evan You 对于 Vue.js 发展历史与现状的介绍,到基于 Vuex 的状态管理、服务端渲染、代码分割等多个具体的技术实现。本文是非常不错的对于 VueConf 的回顾,如果没有参会或者尚未了解过议程的同学可以一看,并且选择自己感兴趣的议题查看对应的胶片与演讲视频。 ( https://parg.co/ber  )
- [VueConf 观后感](https://parg.co/ber):首届官方举办的 Vue.js 大会刚刚落幕,本文即是作者对于自己参会之后的感想进行的简要阐述。作者首先介绍了自己参与的数个 WorkShop 与演讲,从 Evan You 对于 Vue.js 发展历史与现状的介绍,到基于 Vuex 的状态管理、服务端渲染、代码分割等多个具体的技术实现。本文是非常不错的对于 VueConf 的回顾,如果没有参会或者尚未了解过议程的同学可以一看,并且选择自己感兴趣的议题查看对应的胶片与演讲视频。( https://parg.co/ber  )
......@@ -158,7 +158,7 @@
- [VueConf 观后感](https://parg.co/ber):首届官方举办的 Vue.js 大会刚刚落幕,本文即是作者对于自己参会之后的感想进行的简要阐述。作者首先介绍了自己参与的数个 WorkShop 与演讲,从 Evan You 对于 Vue.js 发展历史与现状的介绍,到基于 Vuex 的状态管理、服务端渲染、代码分割等多个具体的技术实现。本文是非常不错的对于 VueConf 的回顾,如果没有参会或者尚未了解过议程的同学可以一看,并且选择自己感兴趣的议题查看对应的胶片与演讲视频。 ( https://parg.co/ber  )
- [VueConf 观后感](https://parg.co/ber):首届官方举办的 Vue.js 大会刚刚落幕,本文即是作者对于自己参会之后的感想进行的简要阐述。作者首先介绍了自己参与的数个 WorkShop 与演讲,从 Evan You 对于 Vue.js 发展历史与现状的介绍,到基于 Vuex 的状态管理、服务端渲染、代码分割等多个具体的技术实现。本文是非常不错的对于 VueConf 的回顾,如果没有参会或者尚未了解过议程的同学可以一看,并且选择自己感兴趣的议题查看对应的胶片与演讲视频。( https://parg.co/ber  )
......
......@@ -35,7 +35,7 @@
![](http://mmbiz.qpic.cn/mmbiz_png/uMh5nccSicmIoRWfnfq6nPePibiaX5dAR4UbfFOqkKI789ibhfG6OyHnYgFotwxLqcN1MsEf5d29sBB10b3ENl5FkQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1)
笔者在[GUI 应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean](https://segmentfault.com/a/1190000006016817)一文中谈到,所谓 GUI 应用程序架构,就是对于富客户端的代码组织/职责划分。纵览这十年内的架构模式变迁,大概可以分为与 Unidirectional 两大类,而 Clean Architecture 则是以严格的层次划分独辟蹊径。从笔者的认知来看,从 MVC 到 MVP 的变迁完成了对于 View 与 Model 的解耦合,改进了职责分配与可测试性。而从 MVP 到 MVVM,添加了 View 与 ViewModel 之间的数据绑定,使得 View 完全的无状态化。最后,整个从 `MV*`到 Unidirectional 的变迁即是采用了消息队列式的数据流驱动的架构,并且以 Redux 为代表的方案将原本中碎片化的状态管理变为了统一的状态管理,保证了状态的有序性与可回溯性。 具体到前端的衍化中,在 Angular 1 兴起的时代实际上就已经开始了从直接操作 Dom 节点转向以状态/数据流为中心的变化,jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/状态为中心的开发模式。应用复杂后,直接操作 DOM 意味着手动维护状态,当状态复杂后,变得不可控。React 以状态为中心,自动帮我们渲染出 DOM,同时通过高效的 DOM Diff 算法,也能保证性能。
笔者在[GUI 应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean](https://segmentfault.com/a/1190000006016817)一文中谈到,所谓 GUI 应用程序架构,就是对于富客户端的代码组织/职责划分。纵览这十年内的架构模式变迁,大概可以分为与 Unidirectional 两大类,而 Clean Architecture 则是以严格的层次划分独辟蹊径。从笔者的认知来看,从 MVC 到 MVP 的变迁完成了对于 View 与 Model 的解耦合,改进了职责分配与可测试性。而从 MVP 到 MVVM,添加了 View 与 ViewModel 之间的数据绑定,使得 View 完全的无状态化。最后,整个从 `MV*`到 Unidirectional 的变迁即是采用了消息队列式的数据流驱动的架构,并且以 Redux 为代表的方案将原本中碎片化的状态管理变为了统一的状态管理,保证了状态的有序性与可回溯性。具体到前端的衍化中,在 Angular 1 兴起的时代实际上就已经开始了从直接操作 Dom 节点转向以状态/数据流为中心的变化,jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/状态为中心的开发模式。应用复杂后,直接操作 DOM 意味着手动维护状态,当状态复杂后,变得不可控。React 以状态为中心,自动帮我们渲染出 DOM,同时通过高效的 DOM Diff 算法,也能保证性能。
## 工具化的不足:抽象漏洞定理
......
......@@ -165,7 +165,7 @@ Pivotal 是云原生应用的提出者,并推出了 Pivotal Cloud Foundry 云
![](https://i.postimg.cc/gcxWt8FX/image.png)
VM 需要硬件虚拟化才能实现机器级隔离,而容器则只需要在同一操作系统内进行隔离操作。 随着隔离空间数量的增加,开销差异变得非常明显。
VM 需要硬件虚拟化才能实现机器级隔离,而容器则只需要在同一操作系统内进行隔离操作。随着隔离空间数量的增加,开销差异变得非常明显。
## 容器
......
......@@ -54,7 +54,7 @@
- 线程的堆栈:堆栈是保证线程独立运行所必须的。线程函数可以调用函数,而被调用函数中又是可以层层嵌套的,所以线程必须拥有自己的函数堆栈, 使得函数调用可以正常执行,不受其他线程的影响。
- 错误返回码:由于同一个进程中有很多个线程在同时运行,可能某个线程进行系统调用后设置了 errno 值,而在该 线程还没有处理这个错误,另外一个线程就在此时 被调度器投入运行,这样错误值就有可能被修改。 所以,不同的线程应该拥有自己的错误返回码变量。
- 错误返回码:由于同一个进程中有很多个线程在同时运行,可能某个线程进行系统调用后设置了 errno 值,而在该 线程还没有处理这个错误,另外一个线程就在此时 被调度器投入运行,这样错误值就有可能被修改。所以,不同的线程应该拥有自己的错误返回码变量。
- 线程的信号屏蔽码:由于每个线程所感兴趣的信号不同,所以线程的信号屏蔽码应该由线程自己管理。但所有的线程都共享同样的信号处理器。
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册