Marmot

色盲：男生患有的比例为 1/12，女生患有的比例为 1/200。 老年人：看不清字需要使用放大镜、视觉灵敏度降低需要对比度太低的内容看不清。 孕妇：抱着小孩不能双手进行操作。 在编码和设计的时可以对这部分人群做出相应的帮助，对于无障碍设计方面可以看看下面这篇文章无障碍设计 非常…

SEO 角度：原有的 heading、a、img 等标签加上新带来的标签，配合良好的结构和语义内容非常有帮助。 B前端 角度：谁会阅读输出后的 HTML ，在项目开发中不使用 语义化 也可以写出结构漂亮的 组件代码。 其他 角度：此处省略一万字。 有的同学会说了：img、hea…

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。浏览器的事件系统相对比较复杂。尽管所有的主要浏览器已经实现了“DOM2级事件”，但这个规范本身并没有涵盖所有事件类型，随着DOM3级的出现，DOM事件API变得更加丰…

毛茸茸的长耳朵。 短短圆圆的小尾巴。 红红的眼睛。 header 标签表示一个网页的页眉。 main 标签表示一个网页的内容。 footer 标签表示一个网页的页脚。 普通用户通过 显示效果 识别出是导航。 程序员通过 nav 标签 识别出是导航。 视障用户通过 屏幕阅读器 识…

无障碍的英文为 Accessibility 由于单词拼写过长往往被缩写为 a11y 其中 11 指的是中间有11个字母。 无障碍指的是在使用过程中，不管什么类型的用户都可以正常使用。生活中最常见的就是无障碍设施 相信很多人都吐槽过，让我们先从生活例子到前端开发 探讨探讨 无障碍…

我们在 每日 30 秒之 arrayToCSV 中一起学习了将数组数据转化为 csv 表格数据并导出，那如果是对象数组怎么办呢？小脑袋瓜转得快的同学肯定会说：“使用 Array.prototype.map 把需要导出的字段先遍历取出，再使用 arrayToCSV 将其导出为 C…

对创建好的 textarea 元素进行选中并使用复制里面的文本内容，最后移除掉 textarea 元素。 移动设备上有一个问题 “当文本框被选中时，会弹出虚拟键盘” 会导致页面出现闪烁，如果手机响应较慢甚至可以看到虚拟键盘弹出和消失的过程。这段代码的点睛之笔之一在于把输入框设置…

把对象数组进行分组可能是日常开发中最经常使用到的功能了，除了杀鸡用牛刀引入lodash外也可以自己实现一个短小精悍的数组分组。 先利用 Array.prototype.map 来对需要分组的数据进行提取，再使用 Array.prototype.reduce 来遍历提取后的数据并…

取出两个对象数组中唯一的数据集，即差集。 代码使用了 Array.prototype.filter 来进行遍历数组并获取过滤，通过 Array.prototype.every 和 fn 来对数据项进行判断是否重复出现过。 从后端或者数据库分别获取到参加不同马拉松的用户并对这些用…