Clarkio Live Stream Notes: Designing and testing a new feature in a Node.js app
Tags: javascript, webdev, node, twitch
Published: 2019-06-03 17:57:11

---
title: Clarkio Live Stream Notes: Designing and testing a new feature in a Node.js app
published: true
description: Live stream recap notes from Clarkio's Twitch channel on May 31, 2019
tags: javascript,webdev,node,twitch
cover_image: https://user-images.githubusercontent.com/6265396/58823187-1b27d880-8607-11e9-8141-806dd990942d.png
canonical_url: https://www.clarkio.com/stream/2019-05-31
series: clarkio-live
---

The following are notes and details recapping a past live stream where we live code together. The idea behind these streams is that they provide real-world examples of running into problems and solving them or working towards solving them live.

## Friday - May 31, 2019

## Stream Replay

- [Twitch](https://www.twitch.tv/videos/432550248)
- [YouTube](https://youtu.be/8--RNqksYzE?t=720)

## Goals

✅ Warm up/Catch up with chat
✅ Today's coffee mug
✅ Slopper stopper
✅ Chair appearance
✅ Bower appearance
✅ Change category from Just Chatting ➡ Science & Technology
✅ Stretch/Break between ~1-2 hour mark
❌ Add !mark/!note chat command to [stream-note-taker tool](https://github.com/clarkio/stream-note-taker) and test
✅ Closing and raid [@h3h394](https://twitch.tv/h3h394)

## Results

- Designed and thought out requirements for new !mark/!note feature
- Did a lot of figuring out how to do the calculation of stream uptime (date/time math)

## Things we learned

- How to calculate the difference in time between two UTC dates with moment.js
- [moment.js library](https://momentjs.com/docs/)
- [date-fns library](https://date-fns.org/)

## Next Steps

- Write tests for the new `stream.js` functions `getStreamStartTime` and `getStreamUptime`

## Segments

| Timestamp | Topic                                                                                                                                                                                          |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 00:09:00  | Kick it off                                                                                                                                                                                    |
| 00:12:00  | Recording is unmuted                                                                                                                                                                           |
| 00:38:20  | Bower appearance                                                                                                                                                                               |
| 00:40:05  | Chair appearance                                                                                                                                                                               |
| 00:46:00  | VS Code snippets                                                                                                                                                                               |
| 00:55:00  | Start coding new feature and tests                                                                                                                                                             |
| 00:58:27  | Defining "done" for programming tasks (7D's)                                                                                                                                                   |
| 01:02:19  | Designing the feature we want to add to stream-note-taker                                                                                                                                      |
| 01:15:00  | VS Code auto update imports on rename                                                                                                                                                          |
| 01:25:25  | Chair again                                                                                                                                                                                    |
| 01:33:30  | I fall for LIGMA stunt                                                                                                                                                                         |
| 01:42:00  | Recovered from trolling and back to researching Streamelements API                                                                                                                             |
| 01:45:00  | Using Postman and trying other tools as a REST client testing http requests                                                                                                                    |
| 01:48:30  | Trying out [REST Client VS Code extension](https://marketplace.visualstudio.com/items?itemName=humao.rest-client&WT.mc_id=twitch-social-brcl)                                                  |
| 02:01:20  | Talking about Basic Auth in HTTP requests and why it's bad                                                                                                                                     |
| 02:03:30  | Talking about Man in the Middle attacks                                                                                                                                                        |
| 02:16:00  | Stretch/Break                                                                                                                                                                                  |
| 02:20:05  | Back to designing/discussing the new feature to implement                                                                                                                                      |
| 02:38:48  | We start the journey on figuring out date/time math to determine stream uptime                                                                                                                 |
| 02:53:00  | Using the [Quokka.js VS Code extension](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode&WT.mc_id=twitch-social-brcl) to run and test our code doing date/time math |
| 02:55:15  | Checking out [date-fns library](https://date-fns.org/) to help with the date/time math                                                                                                         |
| 02:55:15  | Going with [moment.js library](https://momentjs.com) instead for the date/time math                                                                                                            |
| 04:12:30  | [@ElectricHavoc](https://twitch.tv/ElectricHavoc) comes in ftw with a solution to our date/time math problem                                                                                   |
| 04:17:30  | What does "epoch" mean?                                                                                                                                                                        |
| 04:28:54  | Closing and raid [@h3h394](https://twitch.tv/h3h394)                                                                                                                                           |

## Idea's Sparked by Today's Stream

- ([@LittleDan45](https://twitch.tv/LittleDan45)) scene chair but then it should use voice mod so you could just keep talking
- ([@mholloway24](https://twitch.tv/mholloway24)) Can you change the bulb to a party mode on raid?
- ([@PatPat1567](https://twitch.tv/PatPat1567)) Add visual effect (pic or video of Bower howling) for !howl

## VS Code Extensions Shown/Used

- [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client&WT.mc_id=twitch-social-brcl)
- [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode&WT.mc_id=twitch-social-brcl)

## Clips

Clips are a feature on Twitch that let you cut and capture segments of the live stream in the moment (up to 60 seconds). See [how to use clips on Twitch](https://help.twitch.tv/s/article/how-to-use-clips) for more details. The following are some fun moments captured from this stream:

- [I fall for LIGMA](https://clips.twitch.tv/SpikyHotPineappleJebaited) `by` [@roberttables](https://twitch.tv/roberttables)
- [Is programming for you? (joke)](https://clips.twitch.tv/EphemeralFurryGoblinRickroll) `by` [@roberttables](https://twitch.tv/roberttables)
- [Silly joke goes over my head](https://clips.twitch.tv/RoughFurtiveShallotBloodTrail) `by` [@PatPat1567](https://twitch.tv/PatPat1567)
- [Haha](https://clips.twitch.tv/HelplessVainTurtleAMPEnergyCherry)
- [Pink Fluffy Unicorns Dancing on Rainbows](https://clips.twitch.tv/StrongDeafTermiteAMPEnergyCherry)
- [That moment when you realize you need to stop streaming for the day...](https://clips.twitch.tv/AmorphousNaiveJackalTheTarFu)
- [Who told me to write this code? That's it you're banned!](https://clips.twitch.tv/NiceCrackySwanDoritosChip)

## Get Connected with Clarkio

- [Twitter](https://twitter.com/_clarkio)
- [Twitch](https://twitch.tv/clarkio)
- [Instagram](https://instagram.com/_clarkio)
- [YouTube](https://youtube.com/clarkio)
- [GitHub](https://github.com/clarkio)
- [Website](https://www.clarkio.com)