为什么浏览器 Tab 按下去会显示蓝蓝的外框？

#93

在线文件结构 ASCII 图生成器
#92

Git Pre-Commit Hook 是好是壞？
#91

网页色彩对比度怎么规范？
#90

什么是无障碍网页？
#89

怎么让外网连结本地网站与伺服器？
#88

开发者写作三要素：清晰、个性、一致性
#87

为什么 TypeScript 中 Object.keys 接受任何对象都只返回 string[] 类型？
#86

借助 GPT-4o 用不到 0.1 美元在 2 天内翻译了 168 篇部落格短文
#85

即拿即用的数字花园模板 —— Quartz
#84

测试代码应该与被测试系统有相同程度的抽象
#83

网页黏性卷轴滑动 —— scroll-snap-type
#82

如何直接修改项目依赖包原始代码（node_modules）？
#81

为什么浏览器 Tab 按下去会显示蓝蓝的外框？

近期设计反映前端一些互动元素聚焦时都会出现规格外的不明蓝色外框，希望可以取消掉，不过移除前我认为有必要讨论一下细节原因。

蓝色的外框具体名称叫做聚焦标示 Focus Indicators，也有人叫做 Focus Ring 或 Focus Outline，用途是让用户更容易找到网页中聚焦中的内容，通常给视力不良或使用键盘预览网页的用户提供更明确的指示。

浏览器与各大样式库通常内建了这套样式模式来确保网页的适用性，也是为什么默认元素互动时会有蓝色外框的原因。当然这套标准并不是绝对，还是可以取舍网站用户的客群需求并适当调整样式，但可以确定的是越是讲究适用性需求的设计越讲究样式的基本功能可以被正确识别。

最终和设计折中达成共识移除突兀的 Focus Ring 并强化边框对比度 👍

无障碍网页内容指引 WCAG 有更深刻的聚焦状态的外貌定义🔗
#80

最有效率提升网頁速度的方式是改善内容，网站加载时间 -50% 也不是梦
#79

Editor.js 打造类似 Notion 的区块编辑器体验
#78

我的部落格 About Page 没有用处，所以把它砍了
#77

什么是 ARIA - Accessible Rich Internet Applications？
#76

前端怎么看 SEO？
#75

浏览器缩放与显示误差
#74

Intersection Observer 真实案例：自动更新目录
#73

用二维角度思考网页布局
#72

开发者生产力迷思：估算 = 终点
#71

开发者生产力迷思：故事点 = 生产力
#70

开发者生产力迷思：低缺陷 = 生产力
#69

开发者生产力迷思：程序行数 = 生产力
#68

开发者生产力迷思：工作时数 = 生产力
#67

如何管理通用工具函式 (Utility Function)
#66

把 AI 放上 CI - PR Agent
#65

CSS blur() 在 Safari 上要留意的效能问题
#64

往返快取（bfcache）造成前后页面状态问题
#63

什么是桶文件（Barrel File）模式？
#62

了解网页元件化的未来：Web Components
#61

如果不知道自己在干嘛，那大概也没人知道。
#60

为什么要替软件进行测试？
#59

了解 ES6 JavaScript 当中的内建数据结构： Map
#58

前端最有感的的快捷鍵
#57

为什么专案时间预估这么难？
#56

管理 Tailwind 当中的变量可以这样做
#55

具体来说可以怎么建立与管理数字产品的 UI 变量
#54

不要告诉使用者「查看更多」
#53

如何透过 CSS Grid 让元素跳脱容器
#52

生成假资料可以用 TestDataHub
#51

为什么前端生态整体体验迈向 😐
#50

CSS 属性的最大值
#49

替文件增添互动性避免枯燥
#48

在 .gitattributes 设置 Linguist 改变项目语言统计
#47

用正確的方式制作深色模式（或任何网站风格🌞）
#46

前端与开发环境多样性
#45

Cypress 與 jQuery
#44

关于 Low-code / No-code
#43

我透过网页升学的故事
#42

「优雅降级」与「渐进增强」差异在哪？
#41

好奇不同種類色盲眼中的網站是长什么样子？
#40

解决问题的技巧
#39

已经 2024 了，会需要学 Sass 吗？
#38

什么事情在你的工作领域是 common sense 但别人知道了却很讶异
#37

iOS Home Indicator 安全区域 CSS 处理
#36

发现特别是技术类作者会把文章放置在不只一个地方
#35

那个酷酷的网页背景是怎么做到的？
#34

为什么要保持套件版本更新？
#33

你还记得浏览器引擎前缀 (Vendor Prefix) 吗？
#32

Git 如何管理大型档案？
#31

XML 和 AJAX
#30

重新思考如何建构 RWD 网页，透过 CSS Container Queries
#29

听名称就感觉生产力 UP UP 的字体 —— Commit Mono
#28

近期发现不错的免费英文网页开发教学平台 —— Egghead.io
#27

为什么会有 _ 在数字当中？
#26

如何从 Git 历史中彻底移除机密文件？
#25

软件园艺家 Software Gardener
#24

一直以为 PowerShell 就是蓝蓝的 cmd
#23

分享一个我自己在预览 GitHub 专案时常用的诀窍 —— 点
#22

追蹤浏览器版本支持程度 —— Can I Use 网站
#21

Chromium 开发者工具 —— Layers
#20

可视化 JSON 数据 - JSON Crack
#19

不知道不同团队是如何巩固与记录开发制度的？
#18

处理金钱、单位、时间的转换原生 JavaScript 就办得到
#17

关于纯手工
#16

想要快速视觉化网页元素之间的边界可以怎么做？
#15

资料库图示的来由
#14

想要及时编辑预览网页内容可以怎么做？
#13

你能说明设计系统与元件库在网页领域中的差异吗？
#12

举例 Radix、Headless UI，为什么无样式元件这么热门？
#11

关于写作
#10

建构正确的网页 UI 不应该是个麻烦的问题
#9

AI 取代人类的恐惧
#8

如何验证客户端资料的正确性
#7

关于经营博客
#6

制作了博客想要额外添加文章搜索功能该怎么办？
#5

推荐免费网页图片编辑器 —— Photopea
#4

你有多久没有升级专案的套件版本了呢？
#3

与朋友的 TDD 观念闲谈
#2

你会如何解这个下拉式选单样式问题呢？
#1

使用 Iconify 在网页中加入各式各样的图示

在线文件结构 ASCII 图生成器

Git Pre-Commit Hook 是好是壞？

网页色彩对比度怎么规范？

什么是无障碍网页？

怎么让外网连结本地网站与伺服器？

开发者写作三要素：清晰、个性、一致性

为什么 TypeScript 中 Object.keys 接受任何对象都只返回 string[] 类型？

借助 GPT-4o 用不到 0.1 美元在 2 天内翻译了 168 篇部落格短文

即拿即用的数字花园模板 —— Quartz

测试代码应该与被测试系统有相同程度的抽象

网页黏性卷轴滑动 —— scroll-snap-type

如何直接修改项目依赖包原始代码（node_modules）？

为什么浏览器 Tab 按下去会显示蓝蓝的外框？

最有效率提升网頁速度的方式是改善内容，网站加载时间 -50% 也不是梦

Editor.js 打造类似 Notion 的区块编辑器体验

我的部落格 About Page 没有用处，所以把它砍了

什么是 ARIA - Accessible Rich Internet Applications？

前端怎么看 SEO？

浏览器缩放与显示误差

Intersection Observer 真实案例：自动更新目录

用二维角度思考网页布局

开发者生产力迷思：估算 = 终点

开发者生产力迷思：故事点 = 生产力

开发者生产力迷思：低缺陷 = 生产力

开发者生产力迷思：程序行数 = 生产力

开发者生产力迷思：工作时数 = 生产力

如何管理通用工具函式 (Utility Function)

把 AI 放上 CI - PR Agent

CSS blur() 在 Safari 上要留意的效能问题

往返快取（bfcache）造成前后页面状态问题

什么是桶文件（Barrel File）模式？

了解网页元件化的未来：Web Components

如果不知道自己在干嘛，那大概也没人知道。

为什么要替软件进行测试？

了解 ES6 JavaScript 当中的内建数据结构： Map

前端最有感的的快捷鍵

为什么专案时间预估这么难？

管理 Tailwind 当中的变量可以这样做

具体来说可以怎么建立与管理数字产品的 UI 变量

不要告诉使用者「查看更多」

如何透过 CSS Grid 让元素跳脱容器

生成假资料可以用 TestDataHub

为什么前端生态整体体验迈向 😐

CSS 属性的最大值

替文件增添互动性避免枯燥

在 .gitattributes 设置 Linguist 改变项目语言统计

用正確的方式制作深色模式（或任何网站风格🌞）

前端与开发环境多样性

Cypress 與 jQuery

关于 Low-code / No-code

我透过网页升学的故事

「优雅降级」与「渐进增强」差异在哪？

好奇不同種類色盲眼中的網站是长什么样子？

解决问题的技巧

已经 2024 了，会需要学 Sass 吗？

什么事情在你的工作领域是 common sense 但别人知道了却很讶异

iOS Home Indicator 安全区域 CSS 处理

发现特别是技术类作者会把文章放置在不只一个地方

那个酷酷的网页背景是怎么做到的？

为什么要保持套件版本更新？

你还记得浏览器引擎前缀 (Vendor Prefix) 吗？

Git 如何管理大型档案？

XML 和 AJAX

重新思考如何建构 RWD 网页，透过 CSS Container Queries

听名称就感觉生产力 UP UP 的字体 —— Commit Mono

近期发现不错的免费英文网页开发教学平台 —— Egghead.io

为什么会有 _ 在数字当中？

如何从 Git 历史中彻底移除机密文件？

软件园艺家 Software Gardener

一直以为 PowerShell 就是蓝蓝的 cmd

分享一个我自己在预览 GitHub 专案时常用的诀窍 —— 点

追蹤浏览器版本支持程度 —— Can I Use 网站

Chromium 开发者工具 —— Layers

可视化 JSON 数据 - JSON Crack

不知道不同团队是如何巩固与记录开发制度的？

处理金钱、单位、时间的转换原生 JavaScript 就办得到

关于纯手工

想要快速视觉化网页元素之间的边界可以怎么做？

资料库图示的来由

想要及时编辑预览网页内容可以怎么做？