Archive

Web14 writings

7 writings

  1. Migrating From instant.page to the Speculation Rules API
    Migrating from instant.page to the browser-native Speculation Rules API, with notes on prefetch, prerender, side effects, and Swup/PJAX conflicts.

    HexoPerformanceWebSwup8 min

  1. UI/UX Terminology
    Why is it called a Radio Button, a Breadcrumb, a Toast? These UI terms trace back to car radios, Grimm's fairy tales, and toasters — metaphors early GUI designers borrowed from the real world.

    WebUIUX17 min

  2. Exploring Progressive Image Loading Techniques
    A deep dive into LQIP, BlurHash, ThumbHash, and other progressive image loading strategies for the web.

    ImageWebUIUXLQIP5 min

  1. Multi-Theme Blog Design in Hexo: Theme Switching With CSS Variables and the :Where Selector
    How to manage multiple blog themes with CSS variables and the :where selector, including Shiki syntax highlighting theme switching and a FOUC fix.

    BlogHexoCSSWebRicingCatppuccinJavaScriptShikiTheme7 min

  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 min

  3. Blog & OSS CDN Traffic Splitting Between Mainland China and Overseas
    ICP filing approved. A quick record of setting up split CDN routing for domestic and international visitors.

    BlogPerformanceCDNNetworkWebInternetHTTPS7 min

  1. Understanding HTTPS: Encryption, Certificates, and TLS
    How HTTPS secures web traffic, covering symmetric and asymmetric encryption, digital signatures, CA certificates and chain validation, and the TLS handshake.

    NetworkWebInternetHTTPSTCPSecurity9 min

  2. Understanding Responsive Images: From Pixels to DPR
    🤖 From physical pixels and CSS pixels to PPI and device pixel ratio, then on to responsive images with rendered vs. intrinsic size and srcset descriptors.

    ImageHTMLWebBrowserResponsivesrcsetLCP5 min

  3. Making Web Fast —— LCP Optimization
    🤖 Optimize LCP with preload, fetchpriority, responsive images and srcset. Covers Sharp image processing, CI/CD automation, and preload hints for better Core Web Vitals.

    BlogHexoPerformanceWebBrowserIcarusResponsivesrcsetLCP9 min

  1. Use Medium-Zoom in Hexo Blog
    Integrate medium-zoom into a Hexo blog to replace image-link jumps with an in-page zoom interaction, including Icarus and PJAX notes.

    BlogHexoWebIcarusPjax3 min

  1. Web Authentication & Authorization
    From cookies to JWT: how the web works around HTTP's statelessness, and the trade-offs each step inherits.

    WebAuthorizationAuthentication14 min

  2. Blog Performance Optimization Notes
    Optimizations adopted while maintaining this site, from image compression to lazy loading and CDN.

    BlogHexoPerformanceWeb4 min

  1. Tomcat
    Apache Tomcat is an open-source, lightweight web application server that implements the Java Servlet and JavaServer Pages (JSP) specs and part of Java EE.

    JavaApacheWebTomcat6 min

  2. Http Protocol
    HTTP is an application-layer protocol for transferring hypermedia documents such as HTML. This post covers request and response messages.

    NetworkWebInternetBrowserHTTPTCP3 min