Skip to content

🐦 Super smooth web-based Twitter client I made in 2009 and maintained until 2013. Open sourced in 2018 for posterity.

Notifications You must be signed in to change notification settings

dtinth/thaiWitter3

Repository files navigation

thaiWitter

thaiWitter is a web-based Twitter client that I have written back in 2009, when I was 16 years old. It is one of my first project of considerable size (codebase is more than 7000 lines).

I have got several happy users who gave me a lot of great feedback for me to improve it. I felt really good about improving this project. They are mentioned in the Changelog page.

But back at that time I lacked software engineering skills. I just threw a bunch of things I learned into this project. So, the project becomes less maintainable, and eventually, I stopped maintaining it in 2013 due to its immense technical debt.

Nevertheless, it’s still up running on Heroku to this day! In fact, I still use it occasionally. If you want to try it: https://tw3.herokuapp.com/

Now, in 2018, I am open-sourcing this project for posterity. I don’t have a plan to update it further yet, but feel free to fork this project!

Features

Here is a list of feature with some (edited/paraphrased) testimonials (text in brackets are my interpretations).

  • Image Preview — View images in tweets without leaving thaiWitter.

  • View Conversation — Press Shift+Enter on a tweet to view a conversation.

  • User/List Timeline — Press Ctrl+U and type in the username or username/list-slug to view it.

  • List Updates Timeline — Press Ctrl+U and type in the username/list-slug! to view only the latest tweet of each member in the list, sorted chronologically. Very useful if you have a list of your friends and want to see what they up to after you haven’t used Twitter for a while.

  • Retweeting — thaiWitter supports retweeting, years before Twitter finally implemented it. You can even retweet private tweet or even direct messages (but it will give you a warning.)

    • Mutated tweet (MT) — In Thai Twitter culture around that time, it’s common to retweet someone, but modify the text a bit for humorous effect. thaiWitter has a feature to track down the original tweet.
  • Undo Tweet — Press Ctrl+Z after tweeting to delete it tweet and put the tweet text back into the input box.

    Sending tweet failed? No problem — I use thaiWitter.

    Just made a mistake in last tweet. Thanks to thaiWitter’s Undo Tweet feature, I can fix it instantly.

  • Keyword Highlight — You can put in a list of keywords (including usernames), and they will be highlighted in blue.

    “I like thaiWitter — it highlights the tweets from people I care about”

  • Mention Highlight — Tweets that mention your name will be highlighted in red.

  • Filter Keywords — Filter out some keywords from your timeline.

  • Hardcode Mode — Removes the top bar and tweet input area at the bottom (you have to remember the keyboard shortcut). Start typing to activate the tweet input box.

  • Smart Username Autocomplete — Completes the user name as you type. It uses an algorithm to determine who you might want to tweet to the most, and rank the suggestions accordingly.

  • Custom CSS — Allows you to put your own CSS to customize the UI. Examples: [1] [2]

  • Lots of easter eggs. Can you find them all?

Tech stuff

You are looking at a code that’s more than 5 years old...

Client

  • No 3rd party frontend framework. I manage all DOM elements manually, but this gave me complete control of DOM animations, which allowed me to optimize the performance as I wish. (Back at that time, it’s very hard to create smooth animations. CSS transitions and animations didn’t exist back then.) It can handle up to around 10,000 tweets while performing reasonably well, while many other Twitter clients would stutter severely when there are thousands of tweets.

    My thaiWitter window contains 6,666 tweets in the timeline but it’s still running smoothly.

  • 3rd party front-end libraries:

  • Self-written front-end libraries:

    • DtJS 2, a rewrite of DtJS, my web animation framework and utility functions for front-end programming in 2009 era. Provides change observer, DOM node generator, animation system, DOM utilities (element/scrolling/viewport size/position queries, events), AJAX, JSONP, and color manipulation.

    • twcs, thaiWitter Class System.

    • T.js, my utility library, provides function generators, JSON parser, change observer, digit padder, date formatter/parser, and tweet parser.

  • Frontend code is written in a custom compile-to-JS language, thaiJS, which adds classes (transpiles to twcs), method binding, protected and private fields to JavaScript. The compiler is written in CoffeeScript and is 260 lines long.

    At first I thought this was a good idea. Back then there is not many JS tooling. JSHint was not released back then. So I only need to create a transpiler and Vim syntax file and that would be it.

    Nowadays, there are many tools like ESLint, Babel, and free modern IDEs that offers JavaScript IntelliSense. They won’t work with thaiJS.

  • 6000 lines of code in one file.

  • I even implemented support for touch scrolling in iOS 3.x, which required me to implement touch handling and momentum scrolling myself, as -webkit-overflow-scrolling didn’t exist yet.

  • No automated tests. This is one of the big reason I cannot keep maintaining this. As I add more feature and code gets more complex, I become less confident in changing code.

  • Lots of monkeypatching. To avoid changing old code, I try to adopt an approach where I don’t have to modify old code, but writing new code to patch old code at runtime. I thought it would be great. As it turned out, it leads to even harder maintenance.

  • No module system. Most stuffs are declared as global variables.

Server

  • Node.js based.

  • Development server with server module reloading on each refresh (no need to restart the server. Just save and refresh like PHP).

  • Self-written asset pipeline. On development, compile on the fly. On production, compile and save in memory, so that the whole app can be served without disk I/O.

Setup

Install dependencies

npm install

Create an application on Twitter

  1. Go here → https://apps.twitter.com/app/new

  2. Go to Settings tab and uncheck Callback Locking.

  3. Go to Keys and Access Token tab.

  4. Copy the Consumer Key and Consumer Secret.

Configure server environment

Create file .env with content:

THAIWITTER_CONSUMER_KEY=
THAIWITTER_CONSUMER_SECRET=

Put in the value from previous step.

Run server

node server.js

Enter app

http://localhost:3003/

License

MIT, unless stated otherwise

About

🐦 Super smooth web-based Twitter client I made in 2009 and maintained until 2013. Open sourced in 2018 for posterity.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published