[DRAFT]How to build a Twitch chat overlay

Intro

1. In this tutorial we're going to build a chat overlay for your Twitch streams. When you're done you'll have a chat overlay to use in your streams
2. If you are a beginner at web dev, this is for you. In order to complete this tutorial, you'll need to know some HTML, CSS, JS. We'll need ComfyJS to complete the project
3. You'll be able to use the skills and lessons in this tutorial in the real world when you want to build more complex and interactive overlays

Body

1. Brainstorm examples:

   1. A single big chatbox
   2. An animated chat
   3. A responsive chat

2. The example I'm going with is an animated chat because it's simple to achieve with clear instructions, doable within an hour, easy to modify to one's own tastes and at the end, you have a pretty impressive looking chat.

3. Steps involved

   1. Setup the HTML file
   2. Setup ComfyJS
   3. Test your connection with your account's Stream Manager
   4. Add the messages to the DOM
   5. Using blockquote to separate the sender and the message
   6. Styling
      1. Fixed width on the body
      2. Adding style to the message
      3. Use flex-direction:row-reverse to make messages appear at the bottom of the container
      4. Remove scrollbars
      5. Adding additional styles to make it look cute
   7. Adding the animation
      1. Adding keyframe animation to the li:last-of-child
      2. Make the older messages transparent

4. Add gif of chat here

5. The reader can test at each step of the tutorial by sending chat messages in their Twitch Stream Manager

Conclusion

1. I'll challenge my readers to modify messages sent by their subscribers and mods
2. Resources: ComfyCorner, AlexTrost, whitep4nth3r for inspiration for overlays