Squeeble


#### About  
Inspired from StreamLabs, StreamElements and DeepBot.
I wanted to create a new StreamBOT for the streamers with extra revenue streams.
Visual games on the stream and interactive events witch will viewers make more active in a stream.
Currently it is only a ChatBOT for Twitch. I am looking forward to integrate it with:  
• Snap Camera (camera software by Snapchat)  
• Fitbit Watch (for heart rate display)  
• OBS Studio (live streaming software)  
& YouTube Live  


The core goal is that the streamers who are using it,
can have an extra revenue stream via the minigames and interactive events.


Other then that we value there privacy with giving them full contole over the bot on there local machine.
At the end of the day it is the idea it has more customazation then the competitors with an higher ease of using is.
Such as your own games or having your art in our games or even custom widgets that show information.


The released version of the bot will have:  
• Chat commands with audio and gifs.  
• Role moderated commands.  
• Event organizer (donations, etc).  
• Chat minigames.  
• Minigame visualization.  
• Partygame creation.


#### Tech  
**Engine / Framework:**  
• NodeJS  
• NextJS  
• React  
• Electron  
• Styled Components  
• Styled System  
• ExpressJS  
& SocetIO


**Language:**  
• JavaScript ES6+  
& TypeScript

Squeeble BOT


#### About  
Created after hearing some frustrations about animated gradient borders for cameras from streamers.
I looked if their where tools that would satisfy the frustrations but found tools that don't provide the flexibility.  

Now more then 3000 streamers are actively using it in their streams.  

To stay up to date I recommend checking out the projects board:  
• [Ticket for v1.1.N](https://github.com/users/TessavWalstijn/projects/1#card-81125180)  
• [Ticket for v1.2.N](https://github.com/users/TessavWalstijn/projects/1#card-64993365)  
& [Ticket for v2.N.N](https://github.com/users/TessavWalstijn/projects/1#card-64993057)  

#### Tech  
**Engine / Framework:**  
• NodeJS  
& ExpressJS  

**Language:**  
• JavaScript ES6+

Animated Border Tool


#### About  
Worked with multiple creators to have custom chat commands interacting with a counter overlay.
For example a sub-goal that resets monthly and having an other sub-goal for the stream session.  

Or a sub-a-ton count down that adds time on followers / subscriptions / bit donations.

An other example is a color war with emotes:


#### Tech  
**Engine / Framework:**  
• Stream Elements platform

**Language:**  
• JavaScript ES6+

Stream Elements Commissions


#### About
I have seen some youtubers use comment highlighting in there videos.
I really liked the idea to use it as well.
So I started using better comments extentsion in vscode.

Later on I had some time on my hands and wanted a better understanding of Regex.
My idea to learn Regex was to create my own comment highlighting tool.

Original Mint it was included within [Trepid Ink](/projects/vscode.trepid-ink)

<div style='width: initial; margin: 0 auto'>
<img style="margin: 0 5px" alt="mint-it issues" src="https://img.shields.io/github/issues/squeeble-ink/vscode.mint-it?color=253550&logo=github&style=flat-square">
<img style="margin: 0 5px" alt="mint-it version" src="https://vsmarketplacebadge.apphb.com/version-short/squeeble.mint-it.svg?label=%20&style=flat-square&color=253550">
<img style="margin: 0 5px" alt="mint-it instals" src="https://vsmarketplacebadge.apphb.com/installs-short/squeeble.mint-it.svg?style=flat-square&color=253550">
</div>



#### Tech
**Engine / Framework:**  
• VS Code

**Language:**  
• JavaScript ES6+  
& TypeScript

Mint it


#### About
The theme I was using Trepid started to break sometimes.
So, my solution was to clone it and patch it.
Before it was called Decorate it, it was known as [Trepid Ink](https://tessavwalstijn.com/projects/vscode.trepid-ink).


Because this is in continues development the colors and some highlighting has changed massively compared to the previous Trepid Ink.

<div style='width: initial; margin: 0 auto'>
<img style="margin: 0 5px" alt="deco-it issues" src="https://img.shields.io/github/issues/squeeble-ink/vscode.deco-it?color=253550&logo=github&style=flat-square"> 
<img style="margin: 0 5px" alt="deco-it version" src="https://vsmarketplacebadge.apphb.com/version-short/squeeble.deco-it.svg?label=%20&style=flat-square&color=253550"> 
<img style="margin: 0 5px" alt="deco-it installs" src="https://vsmarketplacebadge.apphb.com/installs-short/squeeble.deco-it.svg?style=flat-square&color=253550"> 
</div>


Decorate it


#### About
Inspired from Anurag Hazra his [GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats).
I was intreged with the idea of creating one for the Stack Exchange websites as well. Downbelow here you can see them working:

<a href="https://stackoverflow.com/users/7185314/tessavwalstijn">
<img style="margin-top: 0.5rem;" alt="Tessa's stackoverflow stats" src="https://api.sqbl.me/se/?userId=7185314&seSite=stackoverflow">
</a>
<a href="https://meta.stackexchange.com/users/388239/tessavwalstijn">
<img style="margin-top: 0.5rem;" alt="Tessa's meta stats" src="https://api.sqbl.me/se/?userId=388239&seSite=meta">
</a>
<a href="https://askubuntu.com/users/796646/tessavwalstijn">
<img style="margin-top: 0.5rem;" alt="Tessa's ask ubuntu stats" src="https://api.sqbl.me/se/?userId=796646&seSite=askubuntu">
</a>

#### The strugle
Building the page that returns the content as a svg was not the hardest.
My main goal was that they would work on GitHub in your personal readme.
Therefor I asked on Stack**overflow** the following question:  
[api generated svg's not rendering in github markdown files](https://stackoverflow.com/questions/64101334/api-generated-svgs-not-rendering-in-github-markdown-files/64678535#64678535)

> So I had the idea that the issue might be the image in the SVG.
> This idea came from the fact that the GitHub stats made by anuraghazra do not
> contain any images. So I worked on a feature that you can turn off the image and
> that it will show your user name:

<a href="https://stackoverflow.com/users/7185314/tessavwalstijn">
<img style="margin-top: 0.5rem;" alt="Tessa's stackoverflow stats" src="https://api.sqbl.me/se/?userId=7185314&seSite=stackoverflow&img=false&nameX=22">
</a>
<a href="https://meta.stackexchange.com/users/388239/tessavwalstijn">
<img style="margin-top: 0.5rem;" alt="Tessa's meta stats" src="https://api.sqbl.me/se/?userId=388239&seSite=meta&img=false&nameX=22">
</a>
<a href="https://askubuntu.com/users/796646/tessavwalstijn">
<img style="margin-top: 0.5rem;" alt="Tessa's ask ubuntu stats" src="https://api.sqbl.me/se/?userId=796646&seSite=AskUbuntu&img=false&nameX=22">
</a>

<br />

> Only finding out with testing on GitHub that I forgot the s in the https.
> Now my SVG worked with http. I noticed it because the other 2 SVGs I wanted
> to add had https in the link. Those with https only showed the alt text unregarded
> that I requested the SVGs without the image.

#### Conclusion

> SVGs won't always work with https in the request link on GitHub.
> As user [@bk2204](https://stackoverflow.com/users/8705432/bk2204) commented that it was a certificate issue.
> Is true since they do work with http.

#### Tech
**Engine / Framework:**  
• ExpressJS

**Language:**  
• JavaScript ES6+  


Stack Exchange Readme Stats


#### About
A color theme for [Visual Studio Code](https://code.visualstudio.com/) designed to be more then just a theme. Integrated with a comment higlight extension for todo's and fix me's. 
The theme Trepid Ink is inspired and cloned from the original [Trepid](https://github.com/EnKrypt/Trepid) build by [EnKrypt](https://github.com/EnKrypt/)

<div style='width: initial; margin: 0 auto'>
<img style="margin: 0 5px" alt="trepid-ink version" src="https://vsmarketplacebadge.apphb.com/version-short/squeeble.trepid-ink.svg?label=%20&style=flat-square&color=35495e">
<img style="margin: 0 5px" alt="trepid-ink installs" src="https://vsmarketplacebadge.apphb.com/installs-short/squeeble.trepid-ink.svg?style=flat-square&color=253550">
<img style="margin: 0 5px" alt="trepid-ink depreceted notice" src="https://img.shields.io/badge/trepid--ink-deprecated-FF3333?label=%20&style=flat-square">
</div>



#### Deprecated, Why?
Some people might want to use an other comment highlighter or an other theme.
By splitting this extention in to two different extentions now the user can pick what they want.
If they want to have them both they install them both, are the users not satisfied with one of them?
An easy switch to an other extention while you want to keep using the other.

This was feedback that I got from some developers IRL who I asked for feedback.
I have listend and splitted it appart.

Comment highlighting: [Mint it](/projects/vscode.mint-it)  
VS Code theme: [Decorate it](/projects/vscode.deco-it)  

#### Tech
**Engine / Framework:**  
• VS Code

**Language:**  
• JavaScript ES6+  
& TypeScript

Squeeble

For Creators

Animated Border Tool

Stream Elements Commissions

Mint it

Decorate it

Stack Exchange Readme Stats