I have been sharing some interesting tools on X and also synchronizing them to my Telegram Channel. I saw that Austin mentioned he is preparing to create a website to compile all the shared content. This reminded me of a template I recently came across called Sepia, and I thought about converting the Telegram Channel into a microblog.
The difficulty wasnât high; I completed the main functionality over a weekend. During the process, I achieved a browser-side implementation with zero JavaScript and would like to share some interesting technical points:
-
The anti-spoiler mode and the hidden display of the mobile search box were implemented using the CSS â:checked pseudo-classâ and the â+ adjacent sibling combinator.â Reference
-
The transition animations utilized CSS View Transitions. Reference
-
The image lightbox used the HTML popover attribute. Reference
-
The display and hiding of the âback to topâ feature were implemented using CSS animation-timeline, exclusive to Chrome version 115 and above. Reference
-
The multi-image masonry layout was achieved using grid layout. Reference
-
The visit statistics were tracked using a 1px transparent image as the logo background, an ancient technique that is now rarely supported by visit statistics software.
-
JavaScript execution on the browser side was prohibited using the Content-Security-Policyâs script-src ânoneâ. Reference
After completing the project, I open-sourced it, and I was pleasantly surprised by the number of people who liked it; I received over 800 stars in just a week.
If youâre interested, you can check it out on GitHub.
https://github.com/ccbikai/BroadcastChannel
