很多时候你可能很纠结，你应该使用reduce更多或者你不应该使用filter，更应该使用map；或者是for，为什么不使用forEach？是不是太纠结了。事实上呢？数组和数组的迭代函数对于初学者来说都会感到困惑，所以我将试着为每个简化问题，最后提出的问题是：你想要返回什么？

网格布局最终使我们能够在CSS中定义网格，并将项目放置到网格单元格中。这本身就很好，但事实上我们也不必指定每个网格轨道，也不必手动拖动每一个网格项目。网格足够灵活，可以适应它们的网格项目。这些都由所谓的显式和隐式网格来处理的。

网站服务看起来很简单：发送HTML，浏览器进行处理并加载资源，然后我们只要耐心的等页面渲染好即可。但是你很少知道，整个过程背后发生了很多事情。你有没有想过，浏览器如何知道应该加载哪些资源，并且以什么顺序来加载这些资源？今天我们将看看如何利用资源优先级来提高加载速度。

这篇文章提供了十条有关于提高网页可访问性的指导原则，这些原则将保证提高你网站的可访问性。引用万维网（W3C）的创始人@Tim Berners-Lee一句话来说网络的力量是它的普遍性。作为靠制作网站谋生的人，我们有责任确保每个人都能更好接触到他们。网页可访问性似乎是一项艰巨的任务，但它确实比听起来要容易很多。这十条网页可访问性准则旨在确保所有网站都是通用的。这不仅能帮助屏幕阅读器用户，而且还能改善浏览体验，以减缓连接速度。我们已经按照实施时间对我们的指导方针进行了排序，让您清楚地了解在这个过程中需要付出多大的努力。在你不知所措之前，请相信我的话，这是值得的。

在这个系列的上几篇文章中, 我们已经学会了如何使用输入类型和验证属性本地进行表单验证。我们也学会了如何使用约束验证 API 来提高浏览器原生的验证能力以提供更好的用户体验。 并且我们写了一个 polyfill 将支持一直延伸到IE9（并在一些较新版本中添加了几个功能）。现在, 让我们把学到的知识运用到一个真实的例子中:MailChimp注册表单。

在这个系列的上一篇文章中, 我们创建了一个轻量级的脚本 (6kb, 2.7kb缩小后) 使用这个 Validity State API 来提高原生的表单验证体验。 这个脚本可以在所有的现代浏览器上运行，并且支持 IE10版本以下的浏览器。但是，浏览器本身仍然具有一些缺陷。

在上一篇文章中, 我向大家展示了如何通过组合输入类型 (例如, <input type='email'>) 和验证属性 (像required和 pattern)来使用原生的浏览器表单验证机制。诚然,这种方式非常的简单而且轻量级。但是它仍然具有一些缺点 。

大多数的JavaScript表单验证类库体积都非常庞大，而且往往需要引入其他的库，像jQuery。 例如，MailChimp的嵌入式表单，包含了140kb的 验证文件(压缩后)。它引入了整个jQuery库，以及一个第三方的表单验证插件，还有一些原生的MaiChimp代码。实际上，正是MailChimp的嵌入式表单引发了我对于现代表单验证的一系列思考。我们现在有哪些新工具可以进行表单验证？哪些是可行的？哪些又是仍然需要的？

在CSS Grid Layout中，如果没有人提出display:contents;来解决一部分问题，那么你就无法深入的讨论CSS Grid Layout中的subgrid，那么我们真的需要subgrid？事实并非如此，display:contents的确帮我们解决了这类问题，但这些问题与subgrid帮助我们解决的问题不同。在这篇文章中，我将用实例来介绍他们的不同之处。

前端圈真乱，这话一点不假。但乱也乱的好处，乱则生变，有变化才有进步。今天还是老调重谈，聊聊移动端页面的适配。因为对于一枚前端而言，天天和页面打交道（H5页面），那么布局的活总是少不了，这也将面临不同终端的适配问题。不知道你是否和我一样，页面布局总是或多或少会有一些蛋疼的事情发生。如果是的话，建议你花点时间阅读完下面我扯蛋的东东。