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