Building Tweeten (Premium)

I have been a long-time TweetDeck user. It’s one beast of a product that really takes Twitter to the next level for almost anyone, even if you aren’t a professional. Over the years, though, TweetDeck has been neglected by Twitter. It’s only recently TweetDeck started receiving some meaningful updates, though the product continues to lag behind Twitter’s other apps.

And that’s exactly why I built Tweeten.

Tweeten first started off as a simple Chrome extension, back in 2015. I was simply just playing around with Chrome extensions and built a “theme” for TweetDeck. It was called Flat TweetDeck, and it was a really simple CSS theme for TweetDeck that made the app look slightly better. Flat TweetDeck didn’t get much traction — it was way too simple, didn’t add any additional functionality, and looked pretty much like TweetDeck itself.

Fast forward a few months, it’s Christmas and I was bored at home. I didn’t use to play a lot of games back then, and had a ton of free time, like most other 15-year-olds. One night, I was browsing around the web and bumped into Electron — a framework that lets you build cross-platform desktop apps with JavaScript. It seemed pretty cool, so I started playing around with it. And then it hit me: let’s combine Flat TweetDeck with an Electron app, and turn it into a desktop app.

Flat TweetDeck BETA, coming soon! pic.twitter.com/3wjtez6s06

— mehedi (@mehedih_) July 3, 2015

While everyone was out celebrating New Year’s Eve, I messaged my good friend Gustave, sharing the idea with him. He was also a TweetDeck user, and I wasn’t a good developer at all, so I asked for his help and we started building a TweetDeck wrapper with Electron; Tweeten was born.

Tweeten was a brand-new beginning for me. I didn’t simply just re-use Flat TweetDeck’s file — instead, I gave it a completely new look. Windows 10 was also released around the same time, so I decided to take some inspiration from Windows 10’s new design for the new app. The name “Tweeten” even comes from Windows 10 — Tweet, and 10.

And after a couple of weeks in development, we released the first alpha version to 100 users. The response was overwhelming, and we iterated the app and the design rapidly. The entire app was so fun to build and grew so quickly in terms of functionality, it’s almost unbelievable how we even managed to pull it off. Both of us were full-time students, and I was mostly busy writing about Microsoft at WMPoweruser. It was quite difficult to find time to work on Tweeten, but we managed to get some time over weekends and make this app one of the best Twitter apps available for Windows.

Months passed by after the initial release of Tweeten, we added lots of customization options, features, a light theme, and so much more. But no one was really using Tweeten. It was just an alternative to TweetDeck’s app.

Fast forward to March 2016, Twitter announces it’s shutting down TweetDeck on Windows. And that was that for Tweeten. It took off. Like really took off — getting around 5 thousand downloads on the same day. Tweeten back then was broken — like, really broken — after all, I was only 16 and barely getting my head around basic JavaScript and it was exams season. Bug reports started flowing in, and it was almost too much to handle. I released multiple updates to fix a lot of the annoying bugs — but it was way too much work for me.

Here’s the thing, though: Tweeten’s original version was fundamentally broken. I did the majority of the CSS and layout work, but I didn’t understand a lot of the important stuff, like the update functionality (original Tweeten didn’t even let you auto update). It was a confusing mess to me, and Gustave was getting busy with his life.

The original Tweeten never came out of beta. After weeks of patching and hair pulling, the inevitable happened: I hit the reset button.

Say hello to Tweeten 2. The new Tweeten. The better Tweeten. The faster Tweeten. The non-broken Tweeten. The doesn’t-crash-every-time Tweeten. The doesn’t-have-broken-design-elements Tweeten. The Tweeten you actually wanna use.

With Tweeten 2, everything was rebuilt. From the design to the update system, to all the customizations, literally every single component you can think of was rebuilt. This time, I made sure everything we use and write follows industry guidelines. It had to be future-proof and reliable. Around September 2016, I started re-writing Tweeten. I was also busy with exams around the same time, so it took around 5 months before the rebuild was complete: Tweeten 2 had future parity with the original Tweeten, and it also included a lot of new features, like seamless updates, hotfixes, hardware acceleration support, and more. But that was only the core of the application — the design remained untouched and I started re-designing the app around late February 2017.

That took another 3-4 month (which is really a long process of writing a bunch of boring CSS to undo Twitter’s poor design work), and I finally started beta testing the new Tweeten with a couple hundred users around April. The app was ready around June, and it publicly released later in the month, living up to the hype. From the early feedback, Tweeten 2 was a huge success. People loved the new design, the new logo, the new customization options, and the new update system. But more importantly, they loved the reliability. Seriously, Tweeten 2 was so much more reliable than the original Tweeten, despite being 50% smaller in file size. It was a dream come true.

All of that required a lot of development work and hair-pulling. I was still getting the hang of Electron and modern JavaScript development and things weren’t as easy as I’d hoped for. The development, especially re-writing all the CSS files, was a long process that often had me questioning if it was even worth it.

Building Tweeten isn’t an easy task. Tweeten may look like just a web wrapper over TweetDeck, but there’s so much happening behind the scenes. To give you an idea of all the things happening, here’s a quick rundown.

Tweeten is obviously built on Electron, which uses Chromium, and a lot of the modern Windows and macOS APIs are easily accessible through Electron. All the CSS for Tweeten is written in SASS, with a base file that isn’t theme-specific, and three theme files (dark, light, and the new Tweeten Black themes). There’s a lot of other CSS files involved here — including files for the actual Tweeten UI, like the new splash screen, the custom notifications, settings, etc. There’s a dedicated file for making TweetDeck responsive on Tweeten, so you can use it as a tiny window on the side without having it take up your whole screen space. It’s all about providing users with a superior TweetDeck experience, and minor things like this make that possible.

There aren’t any native OS-specific code on Tweeten, so most of the features and integrated using native Electron APIs. Things like the “Minimize to tray” feature, Touch Bar integration on macOS, hardware acceleration, emojis, etc. are all OS-specific and enabled using native Electron APIs. The difficult part of enabling the emoji picker on Tweeten was the fact that some older OSes, like Windows 7, doesn’t have the modern emojis — so they appear kind of broken. Tweeten doesn’t officially support older versions of Windows, but things like the emoji picker and other parts still work, even though they might look slightly broken.

There’s a lot of other things happening in Tweeten that will take way too long to explain. The app uses a bunch of third-party modules to enable a lot of the much-loved features — for example, the GIF search is powered by Giphy, we use Gifshot to turn Twitter GIFs (which are stored as .mp4s) into actual GIFs that you can save locally and re-use, we use Electron Store for persistent data storage and letting users backup settings, etc.

But the difficult part about building a desktop app in 2018 continues to be distribution. Right now, Tweeten is available for Windows (7, 8, 10), Windows 10 from Microsoft Store, macOS, Chrome, and Firefox. That’s a lot of different platforms — and every time we release a new update or fix, all the different versions of Tweeten has to be prepared and ready for deployment. To make things easy, Tweeten uses a lot of the industry standards for a consistent and reliable experience. For example, on Windows, we use Squirrel for the app’s installer and update system — this not only allows us to deliver a one-click installer for Tweeten, but it also enables seamless updates. On macOS, we simply deliver the app has a .zip, but it still comes with auto updates because of Electron’s built-in APIs. All of the updates are distributed through GitHub releases.

And on Windows 10? Well, that’s where things get a little trickier. There is the version that you can get from the Windows/Microsoft Store. In this case, we use Electron Windows Store to package Tweeten into a .appx, which is then submitted on the Windows Developer Dashboard. Like every other store, waiting for a new update to be certified and published can be quite a long process on the Windows Developer Dashboard. As a result, Tweeten updates and emergency patches are often delayed for Windows 10 users who downloaded the app from the store. Tweeten, on its part, disables the app’s built-in auto-update functionality when it detects the app is downloaded from the store, but you still get a dialog notifying you of the new update.

The delay for publishing on the Windows Developer Dashboard is honestly one of the most infuriating parts about delivering Tweeten updates. It doesn’t really matter for feature updates, but when emergency patches are delayed by 10-15 hours or even days, that’s where things get annoying. Users often get locked out if there is a breaking bug because of changes Twitter makes to TweetDeck, and I get flooded with complaints on Twitter, forcing me to ask users to move to the desktop version downloadable from the Tweeten site.

To partly tackle this issue, Tweeten 2 introduced a new hotfix system that allows me to deploy CSS-related patches to the app without needing the user to perform a complete update of the app. It’s a clever workaround for dealing with random TweetDeck design changes, though it still doesn’t protect against things like breaking TweetDeck changes that conflict Tweeten’s JavaScript files. I also reached out to Microsoft’s Steve Teixeira to help speed up Tweeten’s publishing process, and he later connected me with a Microsoft engineer who notifies the certification people to speed up the process every time I submit a new update. It helps, but there’s still a long delay. These guys have been tremendously helpful, although I feel like Microsoft needs to make changes on its side to make the publishing process much faster, especially for smaller updates.

There are some other complications on the Microsoft Store version. For example, when Tweeten 2 originally launched, the app worked on Windows 10 S (Windows 10 in S Mode). Around the same time, we switched to a different system for implementing the built-in spell checking feature that makes use of a native module. And that made Tweeten unusable on Windows 10 S. This continues to be a problem to-date, and unless I find a workaround, Tweeten won’t be available from Windows 10 in S Mode anytime soon. That is partly fine since you can always upgrade from Windows 10 in S Mode to a full version of Windows 10 for free, but this is something I will get to fixing one day or the other. Promise.

At this stage, Tweeten does feel like a complete application in many ways. Yes, there are a lot of limitations, and minor bugs, but Tweeten is at a much better stage than it was 2 years ago. Looking back, the amount of time I have put into making this app is insane, especially considering it’s completely free. People have suggested making the app a paid app in the past, but that’s going to make things a lot more complex than it already is. For one, I don’t want to get into any legal trouble with Twitter, and I also don’t want to take long-term responsibility for the app — I mean, a single change on Twitter’s side could make Tweeten unusable forever, and I have no interest in wasting people’s money. If you do use Tweeten and want to support the app’s development, you can always donate a few bucks here, by the way.

Honestly, Tweeten really helped me become a better developer. I learned so many new things just by coding Tweeten, it’s pretty mind-blowing. Just because of everything I learnt with Tweeten, I was able to build a full-blown social network in 4 months for a college assignment. Going forward, Tweeten isn’t the only thing I want to build, though. And that’s what led to me starting my own creative design and development studio earlier in the year. It’s called Inspect Element (inspectelement.io), and it’s essentially going to be the brand that I am going to use for my future projects. It’s also where you can hire me for freelance work for your business, your personal site, or anything else — we do everything from web design to cross-platform app development, so hit me up at [email protected] if you are interested.

Anyways, that’s really the story about how Tweeten came about. It started with a 15-year-old playing around with injecting CSS into Chrome sites, but 3 years later, it’s one of the most loved Twitter apps with more than with nearly 700,000 downloads. Every week I get messages from people thanking me for the app, and the love from the community is honestly amazing. Of course, there’s always that one guy who complains about little things and is unappreciative of all the effort that goes into Tweeten, but that’s life in a nutshell. I have grand things planned for Tweeten going forward. And that’s not just about making TweetDeck better and usable, the strategy is much bigger than that.

Right now, that includes bringing Tweeten to Linux (yes, finally). And maybe a big redesign. After all, it’s 2018 and Tweeten could really do with a modern facelift.

And for Inspect Element, I am building a brand new communication platform for teens. It’s not anything like Snapchat, but it’s going to be better. That’s the plan for now, anyway.