DEV Community

Cover image for Clarkio Live Stream Notes: Designing and testing a new feature in a Node.js app
Brian Clark πŸ’‘
Brian Clark πŸ’‘

Posted on • Originally published at clarkio.com

Clarkio Live Stream Notes: Designing and testing a new feature in a Node.js app

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

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 and test
βœ… Closing and raid @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

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
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 to run and test our code doing date/time math
02:55:15 Checking out date-fns library to help with the date/time math
02:55:15 Going with moment.js library instead for the date/time math
04:12:30 @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

Idea's Sparked by Today's Stream

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

VS Code Extensions Shown/Used

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 for more details. The following are some fun moments captured from this stream:

Get Connected with Clarkio

Top comments (0)