乐观 UI (Optimistic User Interface) 是什么?有哪些实践细节是你应该注意的?
不要让使用者等待!越多的等待时间,就越容易让使用者流失,因此让应用程式的回馈即时,是很基础重要的原则。 Optimistic UI 强调即时、乐观的使用者介面回馈。在用户触发操作后,系统即时假定成功,迅速更新介面,提升使用者体验。这种方法有效缩短用户等待时间,创造更流畅、令人满意的互动体验。
不要让使用者等待!越多的等待时间,就越容易让使用者流失,因此让应用程式的回馈即时,是很基础重要的原则。 Optimistic UI 强调即时、乐观的使用者介面回馈。在用户触发操作后,系统即时假定成功,迅速更新介面,提升使用者体验。这种方法有效缩短用户等待时间,创造更流畅、令人满意的互动体验。
我既设计网页也开发网页,并且在过去几年经验中总结发现设计与开发配合上容易遇到的问题像是:我需要绘制多少种尺寸的网页?我需要为网页设置多少个断点?这篇文章我分享自己作为设计者与开发者的经历以及你为何应该使用越少的断点来制作响应式网页越好。
赋予网页元素相对的关系而非绝对的数值,让我们强烈联系元素之间的差异,而非取决于某个魔法数字可以避免很多折腾。最近看到一篇文章,作者提到用 CSS Variable 来赋予相对而非绝对数值的 `z-index` 值,真是优雅简洁的方法!完美的发挥了 CSS 变量的优势,促使我写下这篇文章。
索取并显示资料对前端工程师来说是家常便饭的事,但随着背后延伸的状态越来越多,就会让整个专案极度混乱,因此想要藉由这篇文章点出现有问题并提出一些可行的方案,纪录寻找更高效解法的过程。在索取资料时连带的有许多状态需要被管理和调整,文章透过 Vue 来探讨如何更优雅的处理这些状态。
本文描述近期在维护既有代码时的故事,目前的专案中有各式各样前人尚未统一的验证方式,例如:有些是使用 HTML 原生客户端验证、伺服器端验证、第三方套件、自造的验证方法,如何统一规范验证方式是一大问题,同时也要思考:「要如何避免创造更多的陈旧代码?」
本系列 Astro 文章终于完结了,必须说连续 30 天到了后段有点写不太出来任何东西,秉持着有写任何东西无论如何都比没写强的精神完成了这次的挑战!本系列文章是当完兵出来没多久马上开始写的,因此是在最后一天开赛而且还只有不到 10 篇的屯稿的状态下进行的,加上日后工作也忙碌起来,能够完赛算是很幸运。
终于到第 29 天了……前面写太多没有规划好反而到后面也不知道要多写什么。其实在撰写这 30 天文章之前我有先试写纪录一下我用 Astro 制作个人网站的过程,可以参考看看:制作个人前端作品集 - 准备篇以及实作篇,里面有记录从发想草稿到实作的过程,如果想要制作个小网站试试水温可以参考看看。
感觉 30 天真的要写不下去了 😅,感觉要写的前面都写过了,今天这一篇来介绍 Astro 有那些资源可以入门以及近期的新闻。就在昨天 Astro 发布了 3.3 版本,来了崭新的实验性图片组件 <Picture />,改进了语法突出显示的相容性,引入了套件的可信性证明,以及其他一些提升使用体验的改进。
本章节来谈谈 Astro 3.0 版本最吸睛的一项功能:View Transitions ,让你的静态网页也能达成 App 应用一样的丝滑感受。由于这项技术还在实验阶段,因此放在后面的章节补充。 View Transitions API 是浏览器正推出的一项 API,提供简易的方法对任何 DOM 状态更换提供转场特效。
很多时候建构网站都太着重在技术层面该如何应对,但要怎么经营自己的网站或产品好像却没什么概念,因此这里添加一下我建构网站的历程与收获。我从几年前刚学习网页到现在一直在为写部落格做准备,期间尝试用很多不同技术与挑战,但一直以来都没有特别满意的成果,直到近期才比较有「写部落格」这件事究竟是什么的体会。
在 Astro 中串接 CMS 是一件非常容易的事情。内容管理系统 (Content Management System)是一种用于编写和管理网站内容的工具,可以让帮助撰写内容与管理网站资产,不同的 CMS 厂商有各式各样的特色像是:排程发布、编辑器、合作编辑、资产管理……等特色。
我喜欢使用自动化的工具来为专案的代码提供错误检查与整理,因此使用 ESLint 与 Prettier 让撰写的代码更一致无错,还有额外添加 TypeScript 的检查与 VSCode 提示。本篇文章将带你认识我如何替自己的 Astro 部落格添加 ESLint 与 Prettier。
当网站规模愈复杂,使用相对关系路径就会需要花费很多心力去解读与撰写,在撰写引入路径时会发现撰写相对位置的路径既又繁琐又难维护,可以透过额外设置路径别名来解决这个问题。本篇文章介绍如何透过设定 Astro 中的 TS 设定档来达成路径别名。
环境变数提供在不同开发阶段切换伺服器地址的灵活性,避免硬编码,同时安全存储敏感信息,如 API 金钥或数据库密码,使程式更具适应性和安全性。如果你熟悉 Vite 的话应该会非常熟悉,因为 Astro 即是使用 Vite 作为底层。
到这个章节介绍了绝大多数会使用到的 Astro 功能,后续的章节会着重在讲解一些额外的环境设置。让我们把制作好的网站放到伺服器上可以被其他人造访吧。到目前为止教学都是以静态生产的方式的使用 Astro,也就是预先渲染的网页文件可以被静态的放置在伺服器上被索取。