Archive
Web 14 writings
Tags
rb5xE8/8D0YXLEDj/NYxfd3M4U6pm2p852uFGdyiQkzVZAN7kSxbkO915ZXQSFPdHZF1f6gw7PSjd8B1KTHfw5Vs3HpQ/hrajPrHG2zJnLYW0bWcd1btKFXgaOfp4s+R4PHbFGmgpPjRE/lQnf3WhhmBXPuHDisN34w+3AOEj4DklQ4qhACcg8Se15cfmjpMvkhJQSwrm15h/2TNuK2UcNtTcv8Sp1l6sHk1iwzMFe8P/BbpiMHQRyc4PtWJSuNswG2wlHUG2SXf4w+5G+xs0ZM5+Molt9bdoCcnNoNTqrYzGNNLy7lsaFtpFPeVt0yX3D6fsOf3v9jOT0SVzGKkdZY4VVRZ+MnXUTvTrY8jqyzxfs8xRN8zS+RyYcMgnDnoCBe0pz2LLUMWZ6onnvZiSdrW+7U4K60mF/AbUNd6BeBNnxVKCBh8SvuxQdwo5P3r/4MRUgHXULLYIxB+tlXff6ezjbRfKhRykRI1xVviUYQ4Tdu9eBUpEoDt8kiXrLGOZ94PzwIo/gUbd+VCF84p9A27F11nJdgvXH5c/4bEnqCiJidOJiwj5/xq/tuB4Be99i48vfn559ozE7dObuDOXH0kuFzBJU4QswdUAduRwnMTJZhr0ZfcT+ZapO3f6+S+ukXDSTV+PfhkGvmmVjOxyDfiRR7zu/ianKmrqYJd7pxJ9KE2Q1+glg5EKLkrcBLJLKTS+BDDoawiSeL6tF4n22O86zYvZgHX082WtAJzNgNn8irrqot0n0SeUQFFfiC3QyHzH09Hybowgj3QGeFf03JsLdymp6Pjh3LSYIYAG0dljGoB+JHfAdGlAThloqViUfUgQn1mskU89egqi8bVbZisrAOt5sVO3m0ozyePX4OaKbGH9mFxTohbW0RENnIQCo7f3EpwImADORCAt0I1iIBfyMOrtwPVE8utk2FTm+gQsmeJJg7Vcpzs8u/BAHWzw5S18XuhFtOyBKFE5J8kGP8I3os2Q79uTK7/09jlvBcUEeBTAxvv2cigfUzNwxlTCPDXE0ZpPrJYjXwxO6v8j2LSyXkRp73CfbiBwPajStDRW8jnl/VTRwSaGA05a5DzXS5qzusx8G9QCkgKYl+xtN9EcOsiidYr1xxNhdcpGGxaPw0LzGfdR6sdIkN/3ErlvJm6OGiV7IqPtQrNdsP1mAnqsXlkS4eYnIH49RRc3pxsecYXyQPi8eY4qDwaJK+/GpIkArJp1guKMu69CKtNCKrPV5E+MoHUDwm8uZKg
summer/01
- Migrating From instant.page to the Speculation Rules APIMigrating from instant.page to the browser-native Speculation Rules API, with notes on prefetch, prerender, side effects, and Swup/PJAX conflicts.HexoPerformanceWebSwup8 min
winter/02
- UI/UX TerminologyWhy 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
- Exploring Progressive Image Loading TechniquesA deep dive into LQIP, BlurHash, ThumbHash, and other progressive image loading strategies for the web.ImageWebUIUXLQIP5 min
autumn/03
- Multi-Theme Blog Design in Hexo: Theme Switching With CSS Variables and the :Where SelectorHow to manage multiple blog themes with CSS variables and the :where selector, including Shiki syntax highlighting theme switching and a FOUC fix.BlogHexoCSSWebRicingCatppuccinJavaScriptShikiTheme7 min
- Fix Markdown Footnote Jump Overlap With CSS Scroll-Margin-TopFix the common problem where fixed top navbars hide jump targets using scroll-margin-top ruleBlogCSSWebUIUX2 min
- Blog & OSS CDN Traffic Splitting Between Mainland China and OverseasICP filing approved. A quick record of setting up split CDN routing for domestic and international visitors.BlogPerformanceCDNNetworkWebInternetHTTPS7 min
summer/03
- Understanding HTTPS: Encryption, Certificates, and TLSHow HTTPS secures web traffic, covering symmetric and asymmetric encryption, digital signatures, CA certificates and chain validation, and the TLS handshake.NetworkWebInternetHTTPSTCPSecurity9 min
- 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
- 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
winter/01
- Use Medium-Zoom in Hexo BlogIntegrate medium-zoom into a Hexo blog to replace image-link jumps with an in-page zoom interaction, including Icarus and PJAX notes.BlogHexoWebIcarusPjax3 min
autumn/02
- Web Authentication & AuthorizationFrom cookies to JWT: how the web works around HTTP's statelessness, and the trade-offs each step inherits.WebAuthorizationAuthentication14 min
- Blog Performance Optimization NotesOptimizations adopted while maintaining this site, from image compression to lazy loading and CDN.BlogHexoPerformanceWeb4 min
summer/02
- TomcatApache 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
- Http ProtocolHTTP is an application-layer protocol for transferring hypermedia documents such as HTML. This post covers request and response messages.NetworkWebInternetBrowserHTTPTCP3 min