Archive

Web14 writings

7 篇

  1. 从 instant.page 迁移到 Speculation Rules API
    从 instant.page 迁移到浏览器原生的 Speculation Rules API。本文介绍 prefetch 与 prerender 的区别、适用边界、实际配置，以及它为何与 Swup/PJAX 这类 SPA 导航方案的冲突。

    HexoPerformanceWebSwup8 分钟

  1. UI/UX Terminology
    Vibe 毕设前端时，部分术语初看感觉很迷惑，为什么单选按钮叫Radio Button，导航栏叫作 Breadcrumb，弹窗提示叫Toast？这些术语的灵感分别来自老式收音机、格林童话、烤面包机。当时的 GUI 设计师，为了让普通人快速看懂数字世界，从现实世界里借用了熟悉的概念

    WebUIUX18 分钟

  2. 图片渐进式加载方法探究
    深入解析 LQIP、BlurHash、ThumbHash等图片渐进式加载方案

    ImageWebUIUXLQIP6 分钟

  1. Hexo 多主题博客设计：CSS变量 + :Where 选择器实现主题切换

    本文介绍如何利用 CSS 变量与 :where 选择器实现博客多主题管理，包括 Shiki 代码高亮主题切换与页面闪烁（FOUC）的解决方案

    BlogHexoCSSWebRicingCatppuccinJavaScriptShikiTheme8 分钟

  2. Fix Markdown Footnote Jump Overlap With CSS Scroll-Margin-Top
    Fix the common problem where fixed top navbars hide jump targets using scroll-margin-top rule

    BlogCSSWebUIUX2 分钟

  3. Blog & OSS境内外CDN分流配置记录
    备案通过，简单记录下国内外CDN分流配置过程

    BlogPerformanceCDNNetworkWebInternetHTTPS8 分钟

  1. 学习HTTPS协议：加密、证书与TLS
    本文旨在解释HTTPS如何保障网络通信安全。介绍了对称加密与非对称加密的基本概念、工作流程及其优缺点，并解释了两者结合的最佳实践。为了解决公钥分发和信任问题，文章进一步阐述了数字签名和数字证书（CA）机制

    NetworkWebInternetHTTPSTCPSecurity10 分钟

  2. 理解响应式图片：从像素到DPR
    🤖 本文介绍了像素概念及其在网页设计中的应用。首先区分了物理像素和CSS像素，解释了像素密度（PPI）和设备像素比（DPR）的概念，随后探讨了响应式图片的实现方法，包括图片的渲染尺寸与固有尺寸的关系，以及使用srcset属性根据设备DPR或视口宽度提供合适图片资源的技术

    ImageHTMLWebBrowserResponsivesrcsetLCP5 分钟

  3. Making Web Fast —— LCP Optimization
    🤖 Learn to optimize LCP performance using preload、fetchpriority、responsive images and srcset attributes. Master Sharp image processing, CI/CD automation, and preload hints to dramatically improve Core Web Vitals scores.

    BlogHexoPerformanceWebBrowserIcarusResponsivesrcsetLCP10 分钟

  1. Use Medium-Zoom in Hexo Blog
    在 Hexo Blog中，为了增强用户点击图片后的交互体验，我们可以使用medium-zoom这一轻量级库实现图片放大效果。本文记录如何在 Hexo 博客中成功集成 medium-zoom

    BlogHexoWebIcarusPjax3 分钟

  1. Web Authentication & Authorization
    从 Cookie 到 JWT，Web 是如何绕过 HTTP 无状态特性的，每一步又留下了哪些权衡。

    WebAuthorizationAuthentication15 分钟

  2. Blog性能优化记录
    记录网站维护过程中，采取的部分优化措施

    BlogHexoPerformanceWeb4 分钟

  1. Tomcat
    Apache Tomcat，简称 Tomcat，是一个开源的、轻量级的 Web 应用服务器，它实现了 Java Servlet、JavaServer Pages（JSP）和少量Java EE技术规范。

    JavaApacheWebTomcat6 分钟

  2. Http Protocol
    HTTP 是一种应用层协议，用于传输Hypermedia Documents，例如 HTML。它最初是为Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他用途，如机器间通信、API访问等。本文对其请求报文、响应报文以及版本进行介绍

    NetworkWebInternetBrowserHTTPTCP3 分钟