三步驟了解並實踐無限滾動加載 feat.Vue / Intersection Observer API
近期工作剛好接觸很多介面開發的部分,其中一個需求實作「無限滾動加載功能」,當使用者滾動到頁面底部時會自動加載更多的資料,不用點擊按鈕就能瀏覽更多的資料,就像是自動版的加載按鈕。近期工作剛好接觸很多相關的介面功能開發,讓我們用 Vue Composition API 來實作。
近期工作剛好接觸很多介面開發的部分,其中一個需求實作「無限滾動加載功能」,當使用者滾動到頁面底部時會自動加載更多的資料,不用點擊按鈕就能瀏覽更多的資料,就像是自動版的加載按鈕。近期工作剛好接觸很多相關的介面功能開發,讓我們用 Vue Composition API 來實作。
The longer the wait, the more likely users will drop off. Optimistic UI emphasizes immediate, optimistic feedback.
不要让使用者等待!越多的等待时间,就越容易让使用者流失,因此让应用程式的回馈即时,是很基础重要的原则。 Optimistic UI 强调即时、乐观的使用者介面回馈。在用户触发操作后,系统即时假定成功,迅速更新介面,提升使用者体验。这种方法有效缩短用户等待时间,创造更流畅、令人满意的互动体验。
不要让使用者等待!越多的等待时间,就越容易让使用者流失,因此让应用程式的回馈即时,是很基础重要的原则。 Optimistic UI 强调即时、乐观的使用者介面回馈。在用户触发操作后,系统即时假定成功,迅速更新介面,提升使用者体验。这种方法有效缩短用户等待时间,创造更流畅、令人满意的互动体验。
How many sizes of web pages do I need to create? Share why you should use fewer breakpoints to create a responsive web page.
我既设计网页也开发网页,并且在过去几年经验中总结发现设计与开发配合上容易遇到的问题像是:我需要绘制多少种尺寸的网页?我需要为网页设置多少个断点?这篇文章我分享自己作为设计者与开发者的经历以及你为何应该使用越少的断点来制作响应式网页越好。
我既設計網頁也開發網頁,並且在過去幾年經驗中總結發現設計與開發配合上容易遇到的問題像是:我需要繪製多少種尺寸的網頁?我需要替網頁設置多少個斷點?這篇文章我分享自己身為設計者與開發者的經歷以及你為何應該使用越少的斷點來製作響應式網頁越好。
By giving web elements relative relationships instead of absolute values. Using CSS Variables for relative `z-index` values, which is an elegant method!
赋予网页元素相对的关系而非绝对的数值,让我们强烈联系元素之间的差异,而非取决于某个魔法数字可以避免很多折腾。最近看到一篇文章,作者提到用 CSS Variable 来赋予相对而非绝对数值的 `z-index` 值,真是优雅简洁的方法!完美的发挥了 CSS 变量的优势,促使我写下这篇文章。
賦予網頁元素相對的關係而非絕對的數值,讓我們強烈聯繫元素之間的差異,而非取決於某個魔法數字可以避免很多折騰。最近看到一篇文章,作者提到用 CSS Variable 來賦予相對而非絕對數值的 `z-index` 值,真是優雅簡潔的方法!完美的發揮了 CSS 變數的優勢,促使我寫下這篇文章。
Fetching and displaying data is routine for front-end developers, but as more states arise, projects can become chaotic.
索取并显示资料对前端工程师来说是家常便饭的事,但随着背后延伸的状态越来越多,就会让整个专案极度混乱,因此想要藉由这篇文章点出现有问题并提出一些可行的方案,纪录寻找更高效解法的过程。在索取资料时连带的有许多状态需要被管理和调整,文章透过 Vue 来探讨如何更优雅的处理这些状态。
索取並顯示資料對前端工程師來說是家常便飯的事,但隨著背後延伸的狀態越來越多,就會讓整個專案極度混亂,因此想要藉由這篇文章點出現有問題並提出一些可行的方案,紀錄尋找更高效解法的過程。在索取資料時連帶的有許多狀態需要被管理和調整,文章透過 Vue 來探討如何更優雅的處理這些狀態。
This article describes recent experiences in maintaining legacy code, where various validation methods need to be unified, avoiding more legacy code.
本文描述近期在维护既有代码时的故事,目前的专案中有各式各样前人尚未统一的验证方式,例如:有些是使用 HTML 原生客户端验证、伺服器端验证、第三方套件、自造的验证方法,如何统一规范验证方式是一大问题,同时也要思考:「要如何避免创造更多的陈旧代码?」