前端小资讯主要是撷取阮大大的每周分享中,关于前端(更明确说,是自己比较感冒的部分),方便后期查阅。当然偶尔也有自己查找的资料,也会放进来。
NVDA
供盲人使用的网页屏幕阅读器。如果你想体验盲人怎么浏览网页,可以下载这个软件试试看。GitHub Timeline
只要输入用户名,就能看到该用户自己看到的 GitHub 时间线。howler.js
支持各种网页音频格式解码的 JS 库。localroast
一个根据 JSON 文件快速生成 API 的 Web 服务端,主要用了测试和开发环境。Code I like
该网站使用图形和动画,解释一些常见的算法问题。链接是如何在二叉搜索树里面插入一个值的动画。-
排版入门(英文)
介绍排版的基本知识。
-
常用符号的 Unicode 码点、HTML 代码和 HTML 实体写法。
你可能不需要单页应用(英文)
现在的前端开发大量使用单页应用 SPA,使得前端的复杂性急剧增加。这篇文章提出,SPA 可能被过度使用了,大部分情况下,你可能不需要单页应用。React.js 小书
国人编写的 React 入门教程。(@LeeChar 投稿)gRPC-Web
gRPC-Web 是一个JavaScript客户端库,使 Web 应用程序能够直接与后端gRPC服务通信,不需要 HTTP 服务器充当中介。这意味着可以构建真正的端到端 gRPC 应用程序体系结构。Sketch 2 Code
微软的在线工具,将手绘草图转成 HTML 代码。(@xiaohesong 投稿)
15.arwes
一个质量不错的科幻风格 React UI 组件库。(@Anderson-Liu 投稿)
-
svg-inject
这个 JS 库可以将网页上的外联 SVG 图像,变为内嵌的 SVG 图像,从而使得全局的 CSS 样式文件可以对这个图像生效。
13.ScriptOJ
国人开发的前端题库,可以用作评测系统,带有讨论区。(@LeeChar 投稿)
33 个 JS 程序员需要知道的概念
按照主题,收集 JS 学习资源的仓库。停止无限滚动(英文)
本文提出网页的无限滚动并不是一个好的设计,应该限制使用或者停止使用。WebAssembly 的未来(英文)
WebAssembly 目前只是 MVP(最小可行产品)阶段,本文介绍了这种编译语言未来可能具有的功能。
-
Web Performance 101(英文)
网页性能的基础知识,针对初学者,内容比较全。
celine: 这个花了点时间浏览了下,英文上也比较简单,普通水平也能看懂。
主要从js、css、html、图片、缓存等几个方面入手讲解处理方式。还比较详细。最后还给出了一些测评网站访问速率分析的的一些工具。很实用!
从中也了解到一些小东西:比如Html5里的<img srcset>
、 <picture>
标签 、HTTP的cache-control
。
正确使用 HTML5 标签:img, picture, figure 的响应式设计
- 康威定律(Conway's law)
1968年,计算机学家梅尔文·E·康威发表了一篇著名论文,后来被称为康威定律(Conway's law)。
"软件系统的架构,反映了公司的组织结构。"
这个定律说,公司的行政组织架构,会反映在软件产品之中。举例来说,如果四个小组一起写编译器,那么这个编译器内部一定会分成四个环节。很多实证研究,都证实了这个定律。
为什么这样?原因是大公司里面,主管的地位主要取决于他的团队规模和预算。团队越大、预算越多,主管在公司里面的地位就越高,这就是为什么主管都会争取尽可能大的团队和预算。问题在于,团队变得越来越大时,你不得不做出安排,让每个成员有事可做。因此,当团队的所有人都在做一个项目时,随着组织结构的膨胀,软件的架构不得不跟着膨胀,以容纳所有的人手。
根据康威定律,大公司的大型项目一定会有复杂架构,哪怕这种架构可能是不必要的。另一方面,许多程序员崇拜复杂性,认为软件越复杂,表示作者的能力越高。这导致了这样一种状况:大公司(比如阿里腾讯)由于组织架构复杂,会做出复杂软件,然后大家认定,软件必须那么复杂,为了向业内前进水平看齐,自己的软件也必须模仿他们的复杂性。这种想法是不对的,仅仅因为阿里腾讯那样做,并不意味着你也应该那样做,他们无法摆脱复杂性,并不意味着你也需要那种复杂性。
轻量级网站列表
很多网站有一个轻量级版本(lite version),这个仓库收集这些网站的清单。
HTML 网页的 head 元素 指南(英文)
网页的<head>
元素可以放置很多东西,本文列出了其中一些主要的内容,可以当作参考手册。fullPage.js
有的网页每次滚动就是一屏,fullPage.js 就是制作这种效果的一个 JS 库。如何让不纯的函数变纯?(英文)
通过 JavaScript 代码解释函数式编程的一些基本概念。
-
HTTPS 协议图解(英文)
图解 HTTPS 对话过程,非常形象,每一个字节的含义都讲到了。
大部分来源于:
阮一峰的每周分享第 28期
阮一峰的每周分享第 29期
阮一峰的每周分享第 30期
阮一峰的每周分享第 31期
阮一峰的每周分享第 32期