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
Top comments (0)