编程与软件工程developers.google.com
Web 基础:最佳实践手册
Web Fundamentals: A handbook for best practices
2014 — 2016,它一次次回到首页
黑点是上首页(≥ 50 分)的那次投稿,空心点是没冲上去的投稿,点越大分数越高。
导读
这是 Google 面向 Web 开发者的 Web Fundamentals 最佳实践手册,按平台基础主题组织文档,并随新 Web 能力(如推送通知)持续增补和修订。它在 2014/2016 年登上 Hacker News 时,既被当作权威参考,也因自身可用性和响应式建议引发争议。
为什么经久不衰:由 Google 官方长期维护、覆盖 Web 平台基础且不断更新;当年的批评也让这份手册成为观察“最佳实践”如何落地的有趣样本。
HN 评论精选
官方最佳实践站点自身的导航、可点击性和一致性并不理想。
我不觉得这个网站本身是可用性的好范例。它不算糟糕,但既然以高权威口吻讲最佳实践,本应做得更好。例子:(1) 那个“2 guides”看起来像按钮却不能点,而下面两个同色链接却可点;(2) 点顶部“Getting Started”后,导航没有像首页那样用粗体标出当前区块;(3) 文档页有面包屑,其他子站却没有。考虑到受众是开发者能自己绕过去,但还是该吃自己的狗粮。
aresant查看英文原文
I don't find this site to be a fundamentally good example of usability. It's not TERRIBLE, but given that they're speaking from a position of high-authority, it should be better. Three examples: (1) https://developers.google.com/web/fundamentals/documentation/user-input/index - What am I supposed to click? The "2 guides" thingy looks like a button. No. Not clickable. But then just below are two identically colored "Create Amazing Forms" and "Add Touch to Your Site". Easily solvable with (a) buttons (b) underlined links (c) consistent navigation colors (2) Click on "Getting Started" in the top navigation section. Would you expect that the text should now be bold, as it was on the home screen indicating which page / section I'm on? (3) Back to this page "https://developers.google.com/web/fundamentals/documentation/user-input/index" - why is there a cookie-crumb nav element in Documentation that's not present on other subs like https://developers.google.com/web/fundamentals/resources/styleguide/markdown-guide In their defense, I understand that their audience is "developers" who are going to be able to solve poor UX and find what they want. But still feels like a moment to eat your own dogfood . . .
页面在图标、标题可点击性和视频控件上犯了基础 UI 错误。
这是讲 Web UI 最佳实践的指南,但代表各主题的图标却不能点击?另外我都没注意到后续页面里有些标题/h2 其实可点。更糟的是他们把 <video> 包在 <a> 标签里,点视频控件会打开链接,没法留在本页使用控件。一分钟内在一个简单文本站上发现三个基础错误,我不想从这个人那里听取 UI 设计建议。
yaix查看英文原文
Its a giude about web UI best practices, and the icons symbolizing the different topics are not clickable? Besides, I didn't even notice that some of the headlines/h2s in the subsequent pages are actually clickable. Then, they actually enlosed their <video> elements inside a <a> tag. So now, when I click on the controls of a video, it will open the linked page. No way to use the video's controls without leaving the page I am reading. Three basic errors found in under a minute on a simple text site. I don't think I want to take any UI design advice from that person.
响应式设计建议未必适用于所有产品,移动版与桌面版可能不只是 CSS 差异。
关于 min-width 与 min-device-width 的建议我觉得有争议:文中说应避免 *-device-width,因为桌面浏览器窗口缩放时页面不会响应。但 Gmail、Facebook、纽约时报等并不在视口很小时展示移动版,它们桌面端 min-width 约 980px。这可能是因为移动站需要不同 DOM/JS 交互,这些交互不适合桌面,或者窗口缩放时行为变化令人困惑,或者不想给不会用到的设备发送无用 JS/DOM。
ispivey查看英文原文
The advice on min-width vs min-device-width strikes me as controversial: Therefore, you should avoid using *-device-width, since the page won’t respond when the desktop browser window is resized. GMail, Facebook, New York Times, and lots of other smart folks don't show their mobile-web versions if you make the browser viewport very small. Their sites have min-width ~980px when viewed on desktop. I imagine this is because (a) their mobile sites use different interactions that require different DOM and JS, not just different CSS styles, and/or (b) those different interactions might not be appropriate on desktop even if you shrink the viewport and/or (c) it's confusing for the site to work differently when you resize your window and/or (d) they don't want to send unused JS/DOM to devices that aren't going to use it. Any thoughts, kinlan?
官方持续维护并承认首页需要更新,目标是提供有观点的平台基础指导。
我是这个网站的负责人:我们确实需要更新 landing page,网站上线两年经历多次更新,我觉得这页已没解释清楚 Web Fundamentals 是什么。我们这部分的目标是从平台自下而上解释 Web 开发基础,并给出有观点的最佳实践指导。我们持续为新领域(如推送通知)增加内容,并根据生产中的使用情况重构指南。
kinlan查看英文原文
Owner of the site here: We do need to update the landing page, we've gone through many updates over the two years that this site has been out and I think this page doesn't explain what Web Fundamentals site is. Our goal with this section is to explain the fundamentals of web development from the platform upwards with opinionated best practice guidance. We are constantly adding new content for new areas of the web (like push notifications) and refactoring guidance as we learn more of how this is used in production (things change, but we base the initial guidance off how we have used it).
历次讨论
同类还值得读
开源应用架构
The Architecture of Open Source Applications
《开源软件架构》(AOSA)是一本在线免费书,邀请知名开源项目的作者亲自剖析其内部设计,涵盖 SQLAlchemy、LLVM、Audacity、Apache、Bash 等系统。
编程与软件工程上首页 9 次 · 2011–2024aosabook.org编辑精选编程语言简史:简短、不完整且多半错误
A Brief, Incomplete, and Mostly Wrong History of Programming Languages
一篇以戏谑、故意不准确的方式回顾编程语言史的博客文章,用夸张轶事和讽刺定义串起 Lisp、C、C++、Java、JavaScript、PHP 等语言。
编程与软件工程上首页 8 次 · 2009–2021james-iry.blogspot.comSQLite 是如何测试的
How SQLite is tested
SQLite 官方文档页,系统介绍 SQLite 的测试体系:多种测试方法(TCL 测试、模糊测试、回归测试、静态分析等)和海量测试用例,展示了这个小型开源项目如何靠极致测试获得…
编程与软件工程上首页 8 次 · 2009–2025sqlite.org编辑精选高级编程语言(2009)
Advanced programming languages (2009)
Matt Might 的经典文章,按用途推荐“高级编程语言”:如果追求就业就选主流语言,如果追求表达力、学术研究或创业,则推荐 Haskell、OCaml、Scala 等函数式语…
编程与软件工程上首页 8 次 · 2009–2022matt.might.net我的 Forth 与栈机器经历
Yosefk - My history with Forth & stack machines
作者以亲身经历回顾了使用 Forth 语言和栈式机器的历程:既赞叹其简洁优雅、代码量小、可自举的优点,也坦率指出栈操作在实际编程中的痛苦,以及 Forth 社区文化中的问题。
编程与软件工程上首页 8 次 · 2010–2024yosefk.com编辑精选