Introduction to a VS Code Client for Bluesky Created by a High School Student

Hello,

Recently, there's been a controversial change on 𝕏 (formerly Twitter) where the "likes" on posts can no longer be viewed. In response to this, I've developed a VS Code extension that allows you to post to Bluesky. I’d like to introduce it to you.

Some people might misunderstand that the likes section on Bluesky is also hidden, but it's accessible through clients other than the official one. There is an API available as well.

This is a VS Code client for Bluesky. It has features such as posting, timeline viewing, notifications, likes, and account information. It supports multi-columns and a status bar as well. Since it’s open-source, I welcome suggestions for new features and improvements. Please give it a star on GitHub🙏

https://marketplace.visualstudio.com/items?itemName=zuk246.blueriver

https://github.com/zuk246/BlueRiver

🧭 Background

The idea came when I saw that Bluesky's API was publicly available, making it possible to create a client for it. Although there were already mobile and web clients, I thought developing a VS Code client would allow developers to easily post to and view their Bluesky timeline while coding. Additionally, there are quite a few Japanese articles on VS Code extension development.

🛠️ Technology Used

Language

I used TypeScript. Moving from JavaScript to TypeScript increased suggestions from VS Code and reduced errors, making it hard to go back to JS. Only the script for the WebView supports JS, as I initially tried TS but it led to several hours of errors.

Libraries

I used libraries for VS Code extensions and for handling Bluesky operations. I wanted to use React for developing the WebView, but it made things too complex, so I didn't.

🖥️ Screenshots

🦋 What is Bluesky?

Bluesky originated as a project within Twitter in 2019 and became independent and incorporated in August 2021. Jay Graber is the CEO, and Jack Dorsey is on the board.

Bluesky is a decentralized social network, unlike the centralized model of 𝕏. Users can post, collect, and share information. Each user can have their own server, and these servers collaborate to form a single social network.

When thinking of decentralized social networks, you might think of Mastodon or NoStr, but Bluesky uses a protocol called AT Protocol (Authenticated Transport Protocol), where personal data like "likes" and "shares" are stored in repositories.

Third-Party Apps

Unlike Twitter, Bluesky allows you to modify the timeline algorithm freely and create custom apps. This means you can use or develop various third-party apps.

You can view a list of third-party apps, libraries, and extensions on Bluesky's official Community Showcase. This extension is also registered there via GitHub.

Generated with Bluesky Posts Heatmap Generator

There are 142 third-party apps registered, and you can generate images like GitHub's contribution graph. There are unofficial clients for Android and iOS as well. I use a client called Graysky on my smartphone.

There's also an extension to find Bluesky accounts from your 𝕏 followers and following.

https://zenn.dev/ryo_kawamata/articles/2f0b96f8eb5179

Bluesky adopts principles such as "exceeding existing social networks in usability, extensibility, and developer experience," "integrating app and protocol development," and "quickly discarding ideas or designs that don't work."

Recent Bluesky Developments

Quoted from The Pragmatic Engineer

Since the end of the invitation system in February 2024, many people have registered on Bluesky. The graph of likes shows a spike in February as well.

Currently, there are 5.9 million users registered on Bluesky.

Graph of daily likes from bsky.jazco.dev/stats

Last month (May), Jack Dorsey stepped down from Bluesky's board, citing "repeating all the mistakes that Twitter made." Despite this, I find Bluesky's API and documentation more comprehensive and user-friendly compared to other decentralized social networks, which is why I plan to continue using Bluesky.

🚀 Features

Timeline and Zenn(Japanese tech blog) Writing

Post: Easily create and share posts directly from VS Code.
Timeline: View your Bluesky timeline within VS Code.
Notifications: Stay updated with notifications without leaving your coding environment.
Likes: Manage your likes effortlessly.
Account Information: Access and manage your Bluesky account details.
Status Bar: Check the number of notifications and access a list of available commands by clicking on the status bar.
Multi-Column + Responsive Design: View your timeline and notifications side-by-side while working.
Multi-Language Support: The extension currently supports English, Japanese, Spanish, Simplified Chinese, and French.

⏩ Future Plans

Currently, the extension includes basic features, but I plan to add more functionalities like displaying feed lists and enabling likes directly from the timeline. The goal is to develop a robust and comprehensive client for Bluesky.

Thank you for reading!

Follow me on Bluesky:
https://bsky.app/profile/zuk246.net

Check out the extension on the Visual Studio Marketplace:
https://marketplace.visualstudio.com/items?itemName=zuk246.blueriver

Conclusion

In summary, the new VS Code extension for Bluesky aims to integrate social media interactions seamlessly into the developer's workflow. With its comprehensive features and open-source nature, it provides a flexible and user-friendly tool for engaging with Bluesky.

If you are a developer using VS Code, I encourage you to try out this extension and contribute to its development. Your feedback and suggestions are invaluable for improving and expanding its capabilities.

Thank you for taking the time to read about this project. I hope it enhances your experience with Bluesky and makes your development process more enjoyable.

Happy coding and happy posting!