DEV Community: Shikhar

I finally released the app I was working on for over a month! It's called Twester.

Shikhar — Wed, 22 Sep 2021 17:34:40 +0000

TLDR - Twester is a free and open source desktop app built with React, Electron and Node.js that will watch Twitch livestreams for the list of streamers you provide and harvest channel points.

Download for Windows, Linux or macOS from twester.co.

GitHub Repository, a star 🌟 is really appreciated 😀

twesterapp / twester

Twitch channel points without watching Twitch.

Twester

Twitch channel points without watching Twitch!

Download | Features | Screenshots | How it works? | Support | Credits

Download

You can download from GitHub Releases.

What is this app all about?

Twester is a free and open source desktop app that will watch Twitch livestreams for the list of streamers you provide and harvest channel points.

We all love to use channel points in our favorite Twitch streamer's chat, especially doing some gamba in the hope of more channel points. Sometimes, the gamba screws you and you go broke and start from 0. Well, no more! Now you can earn channel points without having to watch Twitch's livestream.

Features

Minimal and Intuitive UI. Start and pause Twester will a click of a button.
Add unlimited streamers to streamer's list and Twester will watch them* and harvest channel points for you.
Streamers tab to manage streamer's list…

View on GitHub

Motivation

You do some prediction in chat and go all in with your channel points and lose all of them. Now you have to start from 0 and earn channel points from watching the streamer.
The streamers you watch are from different time zones and it's really hard to catch them online. So you can barely earn channel points.

Features

Minimal and Intuitive UI. Start and pause Twester will a click of a button.
Add unlimited streamers to streamer's list and Twester will watch them* and harvest channel points for you.
Streamers tab to manage streamer's list and check their stats (time watched, points harvested, is online/offline, twester watching).
Event logs about all the things you need to know. Example, when a streamer goes offline or online, when channel points are earned, when Twester starts or stops watching a livestream and more.

* Twitch allows max 2 livestreams to be watched at a time. Twester will pick the highest priority streamers to be watched.

Features to come in future

Predictions - Twester will make predictions based on your preferences.
Analytics - Visual representation of channel points earned for a streamer.

How does it look?

Home tab - Twester is watching

Streamers tab - Twester is watching xQcOW and jamiepinelive

How it works?

Twitch rewards channel points for a lot of reasons. Twester earns channel points by mainly “watching” a streamer.
Twester earns channel points for the following
- Watching
- Active watching (bonus redeemed by click)
- Watch streaks
- Participating in a Raid
Twitch allows users to watch and get channel points for maximum of 2 streamers at a time. That’s why Twester asks you to keep the streamers on Streamers tab sorted(top to bottom) based on priority. Twester picks the 2 streamers from the list with highest priority that are online and “watches” their livestream.
To “watch” a livestream, Twester sends a “minute watched event” request to Twitch’s API for that livestream. Twitch uses that request to know which user has watched a livestream for a minute. After several of these requests, Twitch rewards the user with channel points.

Thank you for reading ♥

Published my first browser extension!

Shikhar — Thu, 01 Apr 2021 12:43:57 +0000

TL;DR - I created Better GitHub for Chrome initially and made a post about it here few days ago. It got a really good response from the other developers out here and many of them wanted this extension to support Firefox as well. One even mentioned that publishing on Firefox is free unlike Chrome web store. So I made changes to support Firefox and even published it!

Download it for Firefox, leave a rating if you download it. I would really appreciate it.
GitHub Repository, a star is really appreciated 😀

Demo

Intro

As mentioned in the earlier post, this extension was purely just to solve my niche problem. The response on that post was very unexpected. Everyone was so motivating and supportive. The fact that some of them even asked for it to be available for Firefox was unbelievable. This meant that someone out there, wanted to get their hands on Better GitHub, something that I created. That feeling is just something else. I am sure a lot of open source developers can relate to this.

First thing first

So I decided that I had to get this extension to support Firefox. That was my initial goal, just support Firefox. So I went to my friend and asked for his help on how I can port my Chrome extension to Firefox.

The answer was not something I was expecting. I was expecting that I will have to refactor most of the logic to core and then have specific implementation for Chrome API and Firefox API. But instead, I learned that Firefox Addons(extension) support almost most of the API provided by chrome API. That meant, I didn't have to change almost anything to the logic implementation of the extension(better-github.js). Except a very minor issue which was just a one line change.

The major thing needed to be done to "port" the extension from Chrome to Firefox was the change to be done to manifest.json. For Firefox, an addition property was needed: "applications" to provide little extra details for the addon like the addon ID.

The manifest.json dilemma

As mentioned above, Firefox manifest requires an extra property. That means, I have to keep two separate manifest.json but with the same name. Hmmm, weird. Also, to publish the addon to Firefox or even test it locally, I had to package the extension as a .zip and then load it, with off course the right manifest.json. Doing it manually was very painful. Edit the manifest.json, select all the required files( including assets ) and package it to zip every time I made a small change to the code.

So as a developer, I wanted to automate this shit, and I did. I wrote script.js to automate the process to generate the correct manifest.json for Chrome / Firefox and package the extension files to better-github.zip with the correct manifest.

Now all I have to do is run yarn firefox:package and it generate the manifest for it, package everything to zip, delete the manifest as it's not required anymore. The stuff that took me 30s to do now takes less than 0.5s. Although it took me just over 3 hours to write the script. But hey, it's always worth it to automate shit, right? wink wink

Enhance your code reading experience on GitHub

Shikhar — Mon, 29 Mar 2021 08:29:38 +0000

TL;DR - I created a chrome extension to modify font styles of code text on GitHub to make my life a bit easier.

GitHub Repository, a star is really appreciated 😀

Demo

Motivation

As almost everyone out there, I love to spend a good amount of time on GitHub to manage my personal and professional projects but I also love to just explore other people's projects as well. It's fun to learn how other great developers do their magic.

So I end up spending a lot of my time reading code on GitHub, SPOILER ALERT! But I had one very specific problem which was kind of annoying me. The font styles of code text on GitHub. I had two problems:

The font size was very small. I had to pay real close attention to read the code. I know I can just increase the zoom but it makes rest of the app out of proportion. I just wanted to increase the font-size of the code text.
Kind of very specific to me but as a lover of aesthetic, I wanted my GitHub font of code text to match my code editor font.

How I did it

As everyone, first I started to look on the internet to find something that would solve my above problems. After a few hit and trials with the existing solutions, nothing really actually solved it.

So I decided, fuck it, let me do it myself. I had no idea how chrome extensions are built, the chrome API, etc. All I knew was, I had a problem, I knew what the solution I wanted and luckily I have been programming in JS/TS for the past few months and this is the language needed to make the extension.

Initially the extension was very specific to my need. It had no UI interface. Although, it did solve my problem. It would change the font-family and font-size of the code text elements on the DOM to whatever font name and font size I provided. It was hard coded, so If I needed to alter it, I had to change the source code, reload the extension, refresh the GitHub page for it to update.

It was uhh..., okay for me, but then I decided to take it to a next level. A UI interface( browser action popup ) which opens when you click on the extension icon. It let's you enter font name and font size and apply them instantly to all the GitHub tabs open. Again, I did this to save my time when I wanted to make changes to my custom font styles.

So finally, today, I am releasing this extension to public as I think its decent enough. Check out the GitHub Repository on how you can install the extension, currently it's not published on the chrome store.