this male me and Brian Clark did a live
stream on Twitch where we worked on the
integration between visual studio code
and twitch Brian is a maintainer of the
this integration between twitch and a
Visual Studio code where viewers of a
twitch livestream can highlight code in
the chat marked lines of code in the
chat and that pops up in the live stream
in my visual studio code editor it’s
real cool our goal was to make a pull
request make a good change to this
extension in one hour we did not succeed
at that but that is okay that’s why the
show is called failing together we we
don’t always succeed but we always have
fun and most importantly boy always to
learn if you want to make sure that you
don’t miss the next live stream just go
to twitch.tv slash fun fun function and
hit that follow button and you’ll get a
notification the next time we go live
Before we jump to the recording of this
Monday’s live stream I would like to
talk a little bit about patreon I don’t
talk about patreon in every video
because I don’t want to like nag about
it too much but the fact of the matter
is that this production is mostly funded
by patrons this is a bit of a sponsor
here and there and some ad dollars from
YouTube but in the end it’s you the
patrons that makes it possible for me
and David to do this as our jobs and
produce this content on a regular basis
and I am so grateful for that you are
fantastic I really want to say that and
if you feel like you are a developer
that find this content useful and want
to see more of this content into the
world please consider going to
patreon.com slash fun fun function and
and chip in a few dollars a month
because that really really makes a
difference for us thank you so much
all right on to the recording of this
Monday’s live streets good Monday
morning everyone
or where wherever whatever time it is
for you it’s morning in the California
side and such here in Sweden it’s it
it’s uh yeah just after noon really and
over to you Brian where is it
it is about 10:13 a.m. here in Orlando
Florida mmm morning so I usually start
by telling the audience what we are
going to do today okay what what is our
plan do we have a plan yes we do of
course we have a plan we will not be
unprepared how dare we so the plan is we
have this Visual Studio code extension
that integrates with the twitch chat to
allow people well let me explain the
scenario I guess first right a lot of
times when it comes to live streaming
programming on here or in any platform
rarely you’ll have a situation where you
run into bugs in your code right it
happens to all of us the best of us and
while you’re doing the the benefit I
think one of the benefits of doing it
live on stream is that you have pair of
programmers or I think you actually
reminded me in the event description
it’s called mob programming where it’s
more than one one-to-one kind of thing
and I forgot about that so yeah it’s mob
programming and the the mob can help you
point out issues that they found in the
code or where the bug is that you’re
sitting there banging your head against
the wall trying to figure out and in my
experience the there would end up being
this back and forth that takes a lot of
time where because just chat like text
chat is not necessarily the best medium
to convey where they see the issue a lot
of time sure so the idea came where hey
let’s have a command in chat that people
could send to say hey go highlight this
line of code on in this file so that it
draws my attention as the streamer the
host of the stream to that area and then
then ability okay I forgot a semicolon
or something silly like that right so
that’s the idea behind this extension
however it’s still early on in the
stages of development and one of the
things that we need to be careful of is
people abusing that right or people that
are just
necessarily behaving properly in chat
and so in that case sometimes you might
need to ban somebody because and when
you do that right now the extension does
not listen for anything around that and
therefore their highlights and potential
and stuff on that impacts your stream
might still linger around so what we I’d
like to do today if you’re open to
joining me on that is maybe we listen to
that been event that happens in twitch
and then remove any highlights that that
user account might have created in your
vs code
perfect what is that blinky thing I can
turn that off I’m sorry
it’s though no it’s no it’s great I just
want to know what it is so I have a lot
of what I do on stream is about chat
integration there you know and
interacting with people the viewers of
the stream and so my first project which
is still a living project and kind of
going on it interacts with the the light
that I have here it’s an
internet-connected light bulb life XL i
FX o so the the chat can actually
changed the color of it if they go into
my chat channel and use a bulb command
or if certain events happen like
somebody follows me which is what that
blinking was or do other things like
subscribe or cheer bits then it will
flash different colors as well that’s
brilliant
I like the background here is something
that I will be like doing a lot of work
with during the coming months and doing
something like figuring out some cool
things to put there and there’s
definitely gonna be some Lampe thing and
perhaps like a mechanical thing that can
go and flip itself or something with
what chatting tracks that we really that
cool that sounds awesome
that reminds me I forget the name of the
other streamer but there’s somebody that
had like a talking banana mechanical
banana that would like read the text
from the chat and you know just a little
thing like that that’s lucky hey Larry
yeah yeah alright umm so tell me who you
are or tell like I know I know who you
are but they tell tell the audience who
you are
I’m just
an average individual that likes the
program and as we are as we all yes but
I do a lot of web-based development of
JavaScript and typescript recently have
been kind of getting into and nodejs but
my background was originally in c-sharp
and net and asp.net and then migrated
over into the web world with like jquery
vanilla JavaScript jQuery and then all
the fun frameworks run in frameworks
that are there that kind of thing yeah I
think that’s a normal journey I was
originally a c-sharp developer as well
and I spent a lot of years there and
then moved into JavaScript yeah I think
it might turn off because it’s good it’s
going a little nuts right now
like what it’s triggered what is that
what is triggering it exactly I’m seeing
that there’s it’s a bunch of some people
are following oh okay I channel so I’ll
okay
so cool let’s then check out the project
because this is another project that I
was working on sure you may send a link
or do you have it ready to roll let’s
actually go to the ref oh okay I’m gonna
post the link and chat a couple times
and what what is its github.com /
Clarkie oh you know / Tamar oh yeah and
it’s the name of it the repo name is vs
code – twitch – highlighter should be
that top left one there we go okay I’ll
blow on this one increase the font size
here a little bit there you go okay and
I’ll clone that here we go so while mpj
is doing that if you all want it to like
unhighlight a line of code you can just
put an exclamation point in front of the
line number and that will remove it this
is really cool so apparently everybody
thinks the entire file highlight they
need your attention
that’s awesome like that’s like like
it’s like priority and like I had this
I’m reading this book essentialism that
talks about how like basically reducing
your life or your organization to like
very strict priorities and how the word
priority like many many years ago it
used to be mean one thing but over the
years like it is just devolved into this
like priority one priority two priority
three priority for I like then nothing
as a priority right right okay so I’m
just gonna open this in code you’ll need
to npm install as well when you get a
chance and then while you’re doing that
I see some questions in chat the Ville
link ice fire says is there is the
highlight
stay active forever so there’s some
options around that basically if if the
user
decides to disconnect the extension from
the twitch chat it will prompt them to
say hey do you want to remove all the
highlights or do you want to leave them
still there’s also an option where
through the there’s a little tree view
that shows up in the Explorer so an MP
J’s screen there at the very bottom left
you can see there’s a highlights panel
that is expandable and collapsible and
that will show all the highlights a list
of the highlights as well it has a bunch
of recommendations here beautify J s and
D is Lin TS Lin to do both or I’m gonna
ignore this yeah that’s fine
that was vias code saying hey based on
this project these are your extensions
you might want to use but it’s okay
alright so yeah let’s do the create
integrated terminal and do an NPM
install does X is when when everything
is a priority nothing is a priority yeah
precisely
classic – ask can I change highlight
color yes you can so the default is that
bright green and white border but
there’s settings that are available
through the extension that will let you
change it to whatever you want like I
use blue for mine the lodge says can you
timeout users so that’s what we’re
planning on doing today is basically
well we’re gonna focus on users they
might get banned but maybe we should do
it that way actually um PJs listen for
when somebody gets timed out yeah sure
because there’s two events that are
available that come from the twitch chat
and in particular we’re using under
under wraps we’re using a module we were
using actually I forget now let me
double check here the package.json so
there’s there’s two big javascript NPM
packages that help with make simplifying
connecting to the twitch API and all the
things that go along with that one is
TMI jeaious which I highly recommend and
there’s another one called twitch – j/s
I had originally went with twitch – j/s
because as we were talking discussing
early I was experimenting more with
typescript and there were type
definition
already available twitch – jeaious and
that’s why I went with that one it’s
essentially another I don’t know the
whole backstory but I think something
happened with TM ijs where it was like
kind of stagnant for a while and it
wasn’t really being updated and so
somebody kind of worked off of that and
created a twitch json’ which was a
little bit more frequently act more
active right and so I believe that’s why
it happened they’re essentially the same
thing you can swap them in and out
pretty easily hmm
which is what I’ve experienced I think
it was my BOTS light bulb project that
we were talking about earlier that I
switched over to TM ijs in any case yeah
this one’s still using twitch j/s my
closest but there should be event
nonetheless when a user gets banned or
when a user is timed out it should raise
an event that we can listen to that will
allow us to kind of take action upon
that within the extension moving forward
right so walk us through their project a
little bit you know what sure sure why
will while we’re at it should we do a
little bit of a scary thing that I
haven’t tried before sure you start a
collaboration session and then share
that with the shots so you’re gonna hold
on a second you’re gonna let everybody
in the chat potentially join us yeah but
like making it read-only okay yeah
that’s fine like we can we can go like
disable it if this turns out harming but
that way they can like jump into the
sure
alright I’m pasting it in the chat this
is a it might be a disastrous experiment
where I get super hot but like if if you
don’t there is a Swedish saying how
comfortable get help them brunette half
dared
have one so like let’s say if people
people join if it works I’m gonna try
I’m gonna try oh yeah she’s like because
you need to you the
it really helps if you have it – yeah
just a little bit if we’re gonna pair
all right copying it over into my
instance of vias code and it’s loading
up and I’m downloading the project well
your instance of the project
joining collaboration session all right
so I see that crew me because it joined
the collaboration session oh yeah so I
have to okay
read-only requested to always accept
anonymous all right scary all right I
see your terminal too by the way
yep that’s fine I do not see the code
just yet all right I guess it downloads
the project then yeah so we’ll give that
a second and then it can join up what
see there oh yeah I really need to have
a better like my window positioning
needs to improve on this template I
thought I was being smart but a lot of
stuff is happening in the lower right
corner okay but three informants
learning’s me see if i refresh the
workspace oh there we go all right I see
it now so I guess you wanted me to step
through the project a little bit you
have to explain what’s going on so when
it comes to like extensions in general
what with vias code they they kind of
extend for lack of a better term
package.json to become the manifest of
the extension yeah they’re also let me
take a step back actually they’re
written in typescript or JavaScript you
have the option to start either way with
that and then the package JSON becomes
essentially like if you built a browser
extension before they have a manifest
JSON that describes how like the
different things that this extension is
intending to do and may
add features to the browser very similar
to that package.json is acting in that
way for vias code extension so if you
open that up and it’s going to be a lot
like this is a pretty involved more
complex extension but you can keep it
kind of simple too but if you open up
package JSON and you step through step
through that a little bit you’ll see
those those that are familiar with
making web-based projects using a
package JSON you’ll see the typical
conventional keys in there that describe
like the name of the project maybe the
repository
what version of the project it is and so
forth but they add to it things like
categories activation events like
categories is on line 12 on line 15 we
have activation events and then 24 is
where it gets interesting where it’s
talking about what it’s going to
contribute to vs code for the end user
so in this case we’re contributing a
bunch of commands and then if I collapse
that let’s see so I can’t see what you
are doing right so if you want to like
follow along with what I’m saying maybe
so down on oh okay oh now I follow you
okay oh you can follow me oh there yeah
that’s right that live sure lets you do
that don’t ya I know this like people
are pointing out that they’re getting in
there joining collaboration could not
join the collaborations as it’s already
reached the maximum of five participants
okay yeah yeah well that’s interesting I
thought it would be maybe that’s
something that you can limit on urine or
not but I thought the max participants
was 30 yeah exactly I find surprised me
I thought it would be more for some
reason I’m looking at live share
settings to see if there’s something in
shared or external files start on call
share oh guest limit yes oh yeah there’s
a checkbox that says increases the guest
limit from five to thirty so I have that
I think it’s unchecked by default all
right so where do I find that so if you
press ctrl or command comma to bring up
settings yeah yes and then I just
searched for live share and then you
put guests limit which settings there
that it works by saying now open open
settings opened do you have it do you
have the keyboard like shortcut control
but we won’t have the same shortcuts no
it’s usually commitment I don’t know how
to do from the command line I always use
that shortcut home so open user settings
live share guest limit I guess search
for guests limits we’re just guests
maybe I saw it now it’s gone Oh
increases it I find it I found it yeah
okay there we go
all right let’s see like try to connect
that link it’s in the chat it awake
so are you with me yeah I’m with hey so
you see me clicking okay so on line 24
here we have contributes and it’s saying
that’s contributing commands but I can
collapse that it also contributes menus
view containers views like there’s a
bunch of other thing in configuration so
that’s like the settings that we were
talking about just like how we change
the setting for vias live share yeah
that’s where we would do that kind of
stuff so it’s expanding upon this this
is the manifest that that tells vs code
like what this extension is intending to
do excuse me
so yeah that’s kind of describing what’s
going on with the extension and then
where the source code is the main entry
file is the extension TS file now this
is where things can kind of get like add
a hand a little bit especially when
you’re just first starting out building
an extension you want to kind of throw
everything in here because it’s the main
entry point for the extension to start
when it activates so if we go to line 26
here this function activate is the thing
that actually is what starts running it
so there’s different ways you can
activate a function it just because you
install it doesn’t necessarily mean it
will activate if we actually go back to
package.json top going back to this
right here line 15
activation events I don’t recommend
actually doing star because that means
it will just automatically activate in a
lot of cases we don’t want to do that
and the reason I say that is because I
get a lot of questions around vyas code
yeah being very in tune with what’s
going on with that tool and a lot of
people when they ask me questions around
performance like 99% of the time it has
to do with the extensions that they have
installed that will degrade the
performance of like load up time or
whatever it is that they’re experiencing
and I think part of it is because
extensions might be loading up when they
don’t actually need to be activating and
loading up right away so while I’m doing
this right now I don’t recommend doing
that you can actually change this to be
things like on certain commands that
somebody might trigger through the
command palette like when you were
bringing up the settings and in various
other ways you can trigger your your
extension actually load up and start
running and use resources yeah so just
adds up on that again I’m kind of
sharing all this for people that might
be interested in writing their own
extension too you know yeah sure like I
think that a lot of people for well like
this is this is not particularly
complicated things but it’s just hard to
get started and it’s like hopefully we
can give people an idea of how to write
these extensions one of the coolest
thing about visual studio is that it
like it’s written in JavaScript so it’s
very very extendable but it’s it’s hard
to get started in hard to like get a
sense of it so it’s really great to have
a project like this I think cool yeah so
getting back to this activate function
everything that’s in in here within this
scope is what’s going to run when the
extension gets activated to start
running it at first start so in here
we’re doing things like again this is
getting a little really involved in like
complex situation scenario I’m using us
what’s I basically created a language
server so generally what those are used
for is for instance let’s take Python as
an example out of the box if you install
vias code fresh
you can write Python code in it right
you can run your you know build your
projects out within it it’s gonna act as
like just a plain old text editor but if
you want things like being able to debug
Python getting intellisense the smart
auto-completion kind of options that
come up that kind of stuff you need to
install the python extension that goes
within that that acts as a language
server that is running kind of as a
separate process behind the scenes to
enable those rich features that you get
when writing and debugging Python code
within Vyas code okay but the benefit of
doing that for this case is I didn’t
want when I’m parsing out the chat I’m
doing a regular we’re doing a regular
expression I don’t want it to be
blocking and like degrading that
performance I’m trying to keep that in
mind right when the end user is running
this extension I don’t want it to be
degrading their performance while
they’re doing their work so I took it
this approach where I have a language
server that’s actually listening to the
twitch chat and parsing the messages to
see if it’s actually a command that is
going to be used for this purpose and so
that’s what’s going on here it’s it’s
think of it as running as a separate
node process behind the scenes that
doesn’t interfere with the the main
process that’s running vs code or this
other concept which is called an
extension host which are which is
loading up all your extensions behind
the scenes as well with envious code
does that make sense was that maybe a
little too deep into the weeds or what
do you what are you thoughts on that ah
I’m slightly confused but I think it’s
gonna be fine that’s the tricky part
about the pair programming it’s like you
kind of like okay I think I’m gonna get
this think I’m gonna get this I’m not
sure if I got it but we’ll we’ll just
repeat it again if it turns out to be
relevant okay gotcha sure yes I mean the
main thing is just know that there’s the
way this extension is working is there’s
gonna be a there’s a separate process
that’s running
that’s the twitch language server here
and that’s kind of what we’re starting
up we’re having a language server and
then we have a client so to speak that’s
running within the extension here that’s
going to be listening and handling
events that get triggered between those
two things yeah okay so by the way right
people are high
like writing line 42 but it’s not
showing up I don’t well so I’m not sure
why that might be
let’s try to hang on okay
let’s you could say remove yeah let’s
let’s try to do this because maybe it
was like the like the old session
somehow okay it’s that’s not about we’re
gonna fix today all right so we are not
connected chat try to highlight like 36
or 37 or something right now it works
also interesting okay maybe so this is
the other thing that’s been requested is
to get the highlights to work over live
share so that like if it highlights on
your side it highlights on my side yeah
and that I will be coming in the near
future
Oh working with the the vs live shirt
yeah I think what would happen here was
that I opened another visual studio
instance because I switched directories
and okay stayed connected but it was
probably like keep perhaps pointing to
the old project or something I don’t
know gotcha okay so we’re we’re so in
again at a high level I this main
extension file is like them think of it
as like void main kind of your startup
for your whatever it is that you’re
writing and the rest of the stuff
outside of there like the highlighter
and twitch chat client is just stuff
that’s kind of abstracting
responsibilities so that’s not all kind
of in one file and just ginormous thing
that I can’t manage right which it’s
kind of getting there anyway but that’s
another story so in terms of what we
want to do today we’re gonna want to
look at the twitch language server which
is the as I was mentioning before the
thing that’s listening to the twitch
chat and in particular things like on
TTV chat message Oh
what does the ECB’s down for twitch it’s
shorthand for twitch TV oh yeah yeah I
probably yeah it would make more sense
now you got me thinking like I’m
analyzing my code here
like for more readability and for other
people to be able to contribute to this
project make it right and things out a
little bit better but on the mental note
for that later so this is checking to
see who’s sending the message and then
we’re gonna start parsing the message so
I’ll control click into that which is
just this function right here and here’s
where we’re doing some fun regular
expression stuff which I’m not going to
mess with because our buddy parathe on
as I mentioned helped put this together
and I am terrible with regular
expressions so but we’re not going to
need to mess with that anyway but you
get the idea that it’s looking for a
certain message that starts with an
exclamation point saying what line and
then the number and then we’re planning
to support where you could say right now
it’s limited to whatever active file we
have open at the moment it will do the
highlight in there and not in any other
file but there’s cases where somebody
might have spotted an issue in another
file that’s not currently visible to the
hosts of the stream and you might want
to draw their attention there we want to
add that in as well again it’s very much
a early beta kind of status of this
extension I see here that there’s the
capability to write a text thanks to the
highlight so if you write line number
and then you can you can write a comment
as well yeah so if you hover over r108
there I don’t know if somebody actually
added a comment yeah really excited a
comment here oh that’s cool this is oh
bloody cool right
that way you they can kind of say hey I
think you’re missing a semicolon here or
something or hey knucklehead you know
you’re a knucklehead this is the problem
that kind of thing
it gets against fun but we don’t want
people abusing that either right so we
want to listen to things like when
people get bend and so that’s where
where was it the part where the events
right here is where we’re connecting
we’re using the it’s actually twitch J’s
but you can see I’ve been switching back
and play as I mentioned before I was
switching back and forth between other
libraries and one of them is called TMI
so that’s what that means it’s a twitch
messaging interface and I create a
client of that that’s gonna listen to
the twitch chat so it’s a client
listening to the twitch chat not to
confuse any other client we might talk
about moving forward in there I listen
to events on when people might join I
actually we probably can remove that
needed and when people send a chat
message that’s what this is but there’s
also an event that we can do law this is
where I’m gonna I think you’re gonna
start taking over and driving right you
want to code this and helping create a
PR so if you there’s another event and
I’m just gonna make a comment
I can’t head it that’s right yes haha I
forgot about the hi you got me there’s
another event that’s called ban yeah
that we can listen to or timeout which
timeout just to get everybody acquainted
with twitch that might not be familiar
their timeout is like maybe you don’t
want to bend somebody from being able to
chat ever timeout will say hey we’re
gonna put you in timeout literally and
not allow you to send any message for X
amount of time which is a moderator
capability or the broadcaster capability
to do on somebody in chat so we may need
volunteers by the way it’s a time out so
we can test this out because the idea is
if somebody gets banned or timed out we
want to remove their highlights that
they have yeah that’s actually good like
I was about to say that I will I like I
never timeout people if you if you’re an
asshole you’re banned but I I think that
for purposes of this thing we should
really use the timeout otherwise it’s I
might forget to unban someone right so
let me just double check on that with
the twitch j/s library to make sure
biased advised ago that please time me
out I’m just looking on NPM really quick
going to the library and making sure
I’ll them now their github repo it
aligns with the official Twitter IRC
documentation so that means yeah they’ll
they’ll be listening to bands and
timeouts so that should work as as
expected so let’s implement that
function all right that’s going to do so
as I was mentioning earlier this is the
language server side of it and then we
have a client that’s into the that’s in
the extension main thread that’s going
to be listening to events raised by the
language server so that’s kind of how
the communication goes between the these
two components the lodge says Clark UI
think there is also a delete event now
okay that’s good I didn’t I was not
aware of that so if if somebody’s
message gets deleted we can listen to
that if we wanted to
oh that’s cool thank you no knowledge a
we’re not hopping the lodge sorry if I’m
mispronouncing it so yeah
now let’s implement that function on TTV
chat chat band well maybe I rename the
all right so it seems like we are
extracting here like the payload okay so
that’s basically this is the same
signature every time uh hold on is there
a way I need to follow you now focus
participant oh no I don’t want people to
focus on me click on your name you
currently edit ok I’m with you now yeah
so is it it is it like Channel and
that’s a string username string and so
the signature is different from event to
event yes I have it already set up on so
that we can avoid having a really Cody
so it’s channel yeah
username and then reason is gonna be the
string reason like I guess you could
provide a reason why you time somebody
out a lot of times just clicking a
button the duration which is a number
all right and then user state which ends
up being a JSON object so you can define
you did you say state or user states
user state and so where did you find
this out like how did you know that this
was the same sure where’s the docs yes
so that we get like ah so bit from for a
lot of it I go based off of the twitch
IRC documentation which I’ll share I’ll
share a link to that in the twitch chat
so that people could see that
so dev dev dot twitch.tv is where they
expose a lot of their documentation for
their api’s oh and then the library
because the library I’ll share that one
I guess as well the one that I recommend
honestly right now is the TM ijs so I’ll
share that link to that one in the chat
as well so that TMI jeaious is a great
library that kind of it’s built for
JavaScript and typescript that makes it
a little bit easier when interacting
all right so in that one if you click on
the events for TM ijs
you can search for like timeout Oh
brilliant and you’ll see it there oh
that’s so good all right all right I get
it cool
all right so here’s the part where it’s
I got a jog my memory because it’s been
a little while since I’ve worked on this
extension we need to essentially say hey
we need to send an event to the
extension itself right remember this is
a language server that’s running as a
separate process no hey we received this
event here’s what happened and then
that’ll allow the extension to make a
decision upon that and listen to for
that type of event yeah so if we take a
look at if you scroll down and look at
parse message there yeah you’ll see
there’s a on line 144 there’s a
connection dot send notification so what
you can do is you essentially send
notification events back and forth
between this language server and the
extension as a client again right
another client but in that respect
between this server and the extension
itself so we’re gonna want to do
something like that
and then give it a like signature for
this type of event that we wanted to
find we’re essentially defining our own
events now between this language server
in our extension so now bring that back
uses a lowercase it’s this really two
words this is one word – Tobias sick
like wants it to be like this but I want
it to be like this I don’t think you can
define it whatever you want I think it’s
just how they kind of wrote it so if you
want it to be camel case that’s fine you
should be fine but if a documentation
shows it as lowercase but it shouldn’t
matter what we use yeah but I because it
feels to me like in English users state
is two words correct that’s how I would
take it – yeah holy we thought that what
are your thoughts on username then since
we’re on the subject username Oh God
yeah username ah that’s tricky like
because in Swede like Swedes tends to
make this mistake of like making too
many things into one word because in
Swedish you make everything into one
word like it’s a lot of combinations of
like for instance like cinnamon bun
would be the two words in English
because that’s honestly sensible but in
Swedish it is candy and bula as one word
like cinnamon bun yeah which is super
annoying from like a typing standpoint
this makes it really hard for to develop
machine learning algorithms for this
it’s a crappy language all right so
Fiona we want to send a notification
from this server to any client that’s
listening so I think you have that ready
to roll
then a message where should I be seen so
there’s a connection object that we can
use so if you start typing connection
right and this has the signature of
notification type 1 and then some
typescript garble yes so you don’t don’t
worry too much about that what we can do
what essentially what we’ve been doing
is we have a constants file that defines
all the different type of notifications
that we want to send so if you look at
down on line 145 yeah what you try
selecting it on your side does that mean
that yeah all right then this is a lot
more visible for me in the audience okay
all right I’ll do that moving forward
thank you you can control well I don’t
know what the keyboard shortcut might be
for you but if you control click on the
highlight part right here alright it’ll
bring you to that yeah file and in here
is where we’ll want to define so you can
see like the command type or the name of
the command is there and that matches it
defines the event signature that we want
to call it out as okay and the command
itself right so we’ll want to add a new
one towards the bottom down on line 30
if we do a new line there oh sorry
excuse me right and what if we wanted it
like called timeout timeout
equals and then the convention we’ve
been using like a name spacing kind of
thing so yeah at which highlighter dot
cool so now we can go back to the
language server excellent we’re awesome
oops I lost you
we have to go where I go oh maybe when
I’m going to definition doesn’t follow
me I’m online 91 and push language
server okay I’m with you so here the
first parameter we can say oh the
commands we can pull them commands dot
timeout I think it might be capital C
for that by the way for the commands
part oh it’s weird that live shares not
showing me your suggestions that pop up
when you do the dot and then so I have
to label maybe this has to do with like
the fact that you’re in read-only mode
might be yeah so now you’d want to use
the timeout option that we just created
it’s it possible to do like if if I want
to do this in the future to give high
access to one person and read-only
access to some people you know I’m not
sure that’s that’s really a really great
idea yeah let’s see if that I wonder if
that will work
I’m gonna write it down as a mental note
to share speed back and kick and like to
look up later yeah we should send this
to the live share team because it’s like
a great test but it’s working out it’s
like surprising finds so much fun to do
this
what is people commenting username is
inconsistent no no I fixed that how do I
do
like can I remove the highlight now when
it’s fixed
yeah so one way you could do that is you
can open up the file explorer the little
the first icon at the very top left this
one yep and then there’s a yeah I don’t
we don’t have a right-click menu
available yet for that all right so so
there’s there’s two ways you can do it
actually so what happens is in your file
explorer view it’ll have a panel at the
bottom that’s collapsible that says
highlights and it should show you all of
them in
another way you can do it is you can
bring up the command palette like you
were doing before to bring up settings
uh okay huh sure like this yes and then
if you do if you type in twitch and then
unhighlight without the setting words
are you Oh
twitch and on the highlights there’s a
unhighlight all option you can do or you
can say on highlight individual ones if
you wanted okay so I can’t on the
highlight this line that I’m on you
can’t hear so if you do unhighlight by
file and line it’s a second from the
bottom
oh I have to pick one it doesn’t yeah
it’s a little limited in that respect
all right cool
that’s fine good feedback though there
we go and then six all right cool this
is another one from mr. there’s a mister
Destructoid oh yes didn’t get that one
so I guess to maybe show off another way
to do that that might be a little bit
easier to do yeah instead of going
through the command palette the the icon
in the very top left corner the little
files did the search if you click on
that to bring up your that’s what I call
the file explorer yeah sure at the very
bottom of that panel you’ll see a
highlights uh if you expand that you’ll
it should show all the highlights I says
that there’s no date to provide register
that can provide you data okay then we
have a bug yeah good testing there we go
yeah Oh a parrot on I forgot parrot on
so again as I mentioned parrot on who’s
been a huge contributor to this project
mentions in the chat you can turn it the
Explorer window is hidden by default but
you can turn it on in this in the
settings okay so let’s double check on
that if we if you go to your you know
preferences
open user settings again – and search
for twitch join message leave message
nickname show high let’s an activity bar
there we go you check that box oh there
we go alright so it is a bug working is
expected Oh brilliant
alright so cool now we have like this
backlog that users create for us almost
here actually that’s pretty cool yeah so
you could right-click on individual ones
or if you right-click at the file level
that then you can remove all those ones
for that particular file alright cool
I’m gonna actually read that because I’m
gonna declare like highlight bankruptcy
now because there’s so many we haven’t
been keeping big keeping on top of this
and also people have you just been
trying it out so I’m gonna remove all
and then maybe try to keep attention
actually keep attention to them sounds
good alright
I like clients message and chat says we
should make it’s broken as expected a
thing yes good alright alright we’re
back online 91 in twitch language server
yep right in our 93 now so the other
parameter or yeah that you can pass into
this function send notification is like
any a JSON object that can share data as
part of the event so really all we need
here is to know who the user is that got
timed out so and we have that so we can
just pass in a key user name alright and
the shorthand yeah that should be fine
yeah so using it like that it should
automatically know that that’s the key
and to use the value that’s part of the
scope of this function yeah yeah I get
that but I was thinking like is it the
correct naming or is it it’s whatever we
want as long as we know what it is here
then on the client side that’s listening
for that event we just need to match
that so oh okay so we with this it’s not
the API we are in control of
the receiver as well correct this is
totally on us now we have up control all
right so now comes the point where we
need to listen to this notification on
the client side so in that case what we
want to do is we can actually if you
open up twitch chat client file all
right
twitch chat client let me double check
that there so what is it were looking
for all ttv I’m just again I’m still
refreshing my memory on this project and
if parathe ons in chat if you want to
catch me up just to be safe that’d be
helpful – all right where were we here
we’re not sending requests or just
listening yeah
if this broad like knowledge that this
project link that have format that this
phone is starting to upset me why is
this wrong the linter is complaining to
you is that what’s going on no he thinks
it should be like the lynches should
have complained on line 90 and twitch
chat client well sure I don’t see the
problem with this now let me see what
that’s about to catch error there yeah
what’s wrong what would be wrong with
this am i guess silly I don’t know yeah
a client for sense like the this line is
fine thank you highlighter the wrong
line all right I’m gonna remove that
sorry for distracting you there
no no it’s fine I where is this client
working again sorry bear with me just a
moment here no no problem like this is
there’s a nature programming like
figuring out dogs like one of the things
where I really would like as a way to
have like these cold browsing so that we
could like check like follow you around
while you’re doing like dog searching
and stuff because but there’s currently
like no tool that is good at that that I
found yeah like if you have that chat I
would accept recommendations on that
with open arms right okay so I think I
think I’ve gotten my bearings again with
this it’s one of those things where I’m
sure this happens everybody right Evan
but let me know if it doesn’t where you
you know you might work on a project
this usually happens like over the
weekend you leave off in a current state
on a Friday and then on Monday you come
back and you’re like oh yeah yeah for
sure like I have like a very small
working memory I’ve found so I I
actually do this little narratives when
I’m working that we’re like type out my
thoughts yes so like it’s partially to
keep myself focused because I’m very
easily distracted but it’s also to allow
me to jump back in after like having a
cup of coffee and talking with a
colleague or coming back like after the
weekend for sure so I see perotin helped
and I was just getting to this point
with it if we go down to line 196 of
twitch chat client so here’s where we’re
defining listening to these
notifications on the client side and so
you could see one like we have the main
ones right on I keep forgetting that I
can highlight and you’ll see it online
– OH – we have one for the highlight
command and one for the unhighlight
command that comes through from
listening to the twitch chat yeah so we
want to create another one probably
online
you know after line 2:14 saying this
underscore language client on
notification and then tie it to that
command that we created and the
whoa whoa what I’m following you yes so
you know oh sorry
while you’re doing that I was gonna go
alright hilarious but it’s gonna cut
like it’s it’s enormously fun it is I
think that people are really afraid to
highlight now we said we would be
looking at it so like feel free it’s
kind of fun when you do like weird
comments comments and we had like
timeout
yep and then we could just say any
params again because it’s a JSON object
this is our callback function
yeah
not not to stress you out or anything
but technically we have two minutes left
oh boy I don’t think we’re gonna get
this done no but it’s cool like it’s
so it was parents any so we’re doing the
arrow function shorthand there is what
we want for the callback so yeah the the
params any will go inside of that and
that’s how all this so the first
parameter is basically defining saying
hey we want to listen to that type of
notification and then what we do when we
get that notification is the params any
then I guess we should probably check so
in the same fashion that we have this
dot on on highlight and like if that
this dot on highlight we want to have
some guard logic there to make sure that
that’s available but in this case we’re
gonna create one that’s gonna say like
on time out
instead of highlight oh so we want to
create this yeah well so what’s
happening if you look at like line 211
here on this client it looks to see if
that’s been defined and so the way we
define that is actually from the
extension again I’m sorry that this is a
little this this extension itself is
quite involved in the way it works and
yeah could potentially be re architected
way we do it right that that’s it
maybe or maybe not like it’s it’s
architecture does happen for a reason
sometimes it becomes unnecessary to
convoluted and sometimes it does like
whenever somebody asked me to write a
short text like a ride a short
explanation of this a paragraph is okay
and I’m like wait a minute like like
don’t you understand that writing a full
page explanation of something takes a
shorter time than
a paragraph like it takes a long time to
drill down an architecture to simplicity
so like when you see something that is
small and very elegantly constructed
that is because people have spent like a
lot a lot a lot of time on it
so like first the project swells and
then you like figure out like the
essentials of it so it’s like don’t
apologize for that this is a new this is
a new code base and that that means that
it tends to be like involved okay cool
thank you for that I appreciate it
it’s kind of like writing an abstract
right yeah yeah all right so so what’s
happening is we’re defining basically
the the actual signature and
implementation of this function we write
because it’s something that’s going to
be happening within the extension we
have that written in in extension TS and
it’s what extension that TS gets to
define it for us right we’re basically
opening up the API of how the extension
wants to behave and handle this we’re
just giving it a name on this client
that’s listening to the language server
hopefully I explained that well enough
so we want to double check the same way
that we’re double checking that on
highlight function was defined by the
extension we want to double check that
here as well ah-so which we haven’t done
yet so if we were to like run this and
try to see if there was a non timeout
like actually execute and call that
function it wouldn’t work because we
have an implement yeah right so now we
could say we need to define a this Don
timeout right so if we go I’m gonna
scroll if you’re ready I don’t want to
yeah yeah yeah do the startled scroll
it’s called
scrolling scrolling scrolling scrolling
scrolling so here’s where what I was
talking about we have a signature for
what it would look like but the actual
implementation of it is happening in
extension dot TS so let me switch over
to that really quick I think you should
follow with me yeah and you’ll see right
here like here’s our chat client that’s
listening to the server which is
listening to the actual twitch API and
the chat messages and it’s saying hey
unhighlight should be defined as the
highlight function in this file yeah so
can control click there so we want to do
something very similar to that but let’s
first define what that you know the on
timeout function
in twitch chat client oops not there but
back here so we could just add another
one here that is probably right right
after this one yeah
160 all right let’s do that I so public
on timeouts don’t yeah and then this is
also avoid I guess correct and I think
the one thing that will pass in in terms
of parameters here will be the user name
as a string again
yeah alright I have to say like these
Commons man this is I think that these
are necessary well perhaps again perhaps
the parrot on for that yeah alright so
now if we go back with a scroll again
don’t get startled on me we’re gonna go
down 196 I think it was right yep right
here so now we can say this dot on time
out and pass in the username from the
params which the params are right here
think we’re almost there we might
actually get this done fairly soon all
right quite I mean we can just find a
good place to leave it off and then like
say what we would do if we were to
actually wrap it up sure yeah we could
do that but guests we can do like two
more minutes sure that’s fine
so I think one thing we want to look out
for is that I’m pretty sure you had it
as user name with a capital end right oh
yeah that’s pretty cool and it picks
that up even though it’s a nanny no
expected zero arguments but got one we
don’t have any arguments on the
one time out yet can you well I guess
I’ll go where did it go
you had perhaps you had user name in
here didn’t you I thought you know I
never had
oh sorry never yes we want to we want to
define it there okay so use your name
string I suppose yeah alright alright so
that should be it’s official there and
then no where am I on time out there we
go I’m back okay so that should be it
for between the language server and the
client so we are listening to it and the
next step we we would do but we probably
won’t we don’t have time to do yeah
would be to go into extension TS and
essentially you can write this part at
Lisa you can add a new line on line
after line 37 on extension TS forties 30
so twitch chat client dot on timeout and
then you could say equals timeout and
then it should show you squigglies like
hey that function hasn’t been defined
and then within there we would go and
listen we would look at the collection
of highlights that we have the highlight
is a class object which is over here and
in there every highlight that gets
created we captured the username from
chat that created it and what we would
do is just kind of filter on that and
remove there highlight as part of that
timeout right for whatever the time
period might be or something or well
more so when they get banned right you
would want to remove them completely on
time out maybe we want to have it behave
a little bit differently and maybe
remove them maybe not remove them but
now we have the option to do that
alright yeah it seems pretty
straightforward like we’ll see if I will
do this or if somebody else and chat
will do something or like there’s
there’s tons of issues on this on this
twitch extension that that can be fixed
and improved and I really see myself
using this on the channel and like
there’s so much more fun things
you can do and this is so great for
interaction with people especially sense
the visual studio a live share extension
is limited to only 30 people it’s really
cool to have something also a bit cool
to like as more people get into the
stream it were cool to integrate it with
subscriptions and bits and stuff to like
limit the the line things so they and
especially it could give use bits to
give highlighting access to other users
for sure yeah yeah yeah oh I remove
highlighting eyes of users that were
evil right correct yeah for sure yeah I
definitely yeah there’s it’s very
exciting it’s been a fun project to work
on
and it’s been it’s what it’s actually
for me the first one where I’ve ever had
again I can’t say it enough because
parathe on has been really helpful with
this thank you where what yeah where
I’ve ever had an open-source project
that had a lot of contributions from
outside like a lot of it is just my
little pet there are little pet projects
for me and it’s mostly me working on him
and I barely get people kind of
contributing to him yeah or
collaborating with people right and so
it’s been an awesome experience in that
that sense too yeah it’s a lie I think
that this is a marvelous little
invention and I’m so happy you brought
it to life and thank you so much for
parrot and as well for helping out I
really hope to contribute as well
because it’s I need this and it’s so
great that it exists and that’s where we
that’s where we wrap up today we failed
together success but we learned how to
work with the base coat which I try to
plug in and we had a lot of fun and
honestly that’s that’s the actual
objective of the stream thank you so
much Brian make sure to follow brian on
twitter and twitch on the twitter you
can find him on the clarke a oh boy no
let me
switch to the this see follow him on
underscore clock a on Twitter and follow
him on twitch on yes to RKO
this has been amazing thank you thank you bye everyone
stream on Twitch where we worked on the
integration between visual studio code
and twitch Brian is a maintainer of the
this integration between twitch and a
Visual Studio code where viewers of a
twitch livestream can highlight code in
the chat marked lines of code in the
chat and that pops up in the live stream
in my visual studio code editor it’s
real cool our goal was to make a pull
request make a good change to this
extension in one hour we did not succeed
at that but that is okay that’s why the
show is called failing together we we
don’t always succeed but we always have
fun and most importantly boy always to
learn if you want to make sure that you
don’t miss the next live stream just go
to twitch.tv slash fun fun function and
hit that follow button and you’ll get a
notification the next time we go live
Before we jump to the recording of this
Monday’s live stream I would like to
talk a little bit about patreon I don’t
talk about patreon in every video
because I don’t want to like nag about
it too much but the fact of the matter
is that this production is mostly funded
by patrons this is a bit of a sponsor
here and there and some ad dollars from
YouTube but in the end it’s you the
patrons that makes it possible for me
and David to do this as our jobs and
produce this content on a regular basis
and I am so grateful for that you are
fantastic I really want to say that and
if you feel like you are a developer
that find this content useful and want
to see more of this content into the
world please consider going to
patreon.com slash fun fun function and
and chip in a few dollars a month
because that really really makes a
difference for us thank you so much
all right on to the recording of this
Monday’s live streets good Monday
morning everyone
or where wherever whatever time it is
for you it’s morning in the California
side and such here in Sweden it’s it
it’s uh yeah just after noon really and
over to you Brian where is it
it is about 10:13 a.m. here in Orlando
Florida mmm morning so I usually start
by telling the audience what we are
going to do today okay what what is our
plan do we have a plan yes we do of
course we have a plan we will not be
unprepared how dare we so the plan is we
have this Visual Studio code extension
that integrates with the twitch chat to
allow people well let me explain the
scenario I guess first right a lot of
times when it comes to live streaming
programming on here or in any platform
rarely you’ll have a situation where you
run into bugs in your code right it
happens to all of us the best of us and
while you’re doing the the benefit I
think one of the benefits of doing it
live on stream is that you have pair of
programmers or I think you actually
reminded me in the event description
it’s called mob programming where it’s
more than one one-to-one kind of thing
and I forgot about that so yeah it’s mob
programming and the the mob can help you
point out issues that they found in the
code or where the bug is that you’re
sitting there banging your head against
the wall trying to figure out and in my
experience the there would end up being
this back and forth that takes a lot of
time where because just chat like text
chat is not necessarily the best medium
to convey where they see the issue a lot
of time sure so the idea came where hey
let’s have a command in chat that people
could send to say hey go highlight this
line of code on in this file so that it
draws my attention as the streamer the
host of the stream to that area and then
then ability okay I forgot a semicolon
or something silly like that right so
that’s the idea behind this extension
however it’s still early on in the
stages of development and one of the
things that we need to be careful of is
people abusing that right or people that
are just
necessarily behaving properly in chat
and so in that case sometimes you might
need to ban somebody because and when
you do that right now the extension does
not listen for anything around that and
therefore their highlights and potential
and stuff on that impacts your stream
might still linger around so what we I’d
like to do today if you’re open to
joining me on that is maybe we listen to
that been event that happens in twitch
and then remove any highlights that that
user account might have created in your
vs code
perfect what is that blinky thing I can
turn that off I’m sorry
it’s though no it’s no it’s great I just
want to know what it is so I have a lot
of what I do on stream is about chat
integration there you know and
interacting with people the viewers of
the stream and so my first project which
is still a living project and kind of
going on it interacts with the the light
that I have here it’s an
internet-connected light bulb life XL i
FX o so the the chat can actually
changed the color of it if they go into
my chat channel and use a bulb command
or if certain events happen like
somebody follows me which is what that
blinking was or do other things like
subscribe or cheer bits then it will
flash different colors as well that’s
brilliant
I like the background here is something
that I will be like doing a lot of work
with during the coming months and doing
something like figuring out some cool
things to put there and there’s
definitely gonna be some Lampe thing and
perhaps like a mechanical thing that can
go and flip itself or something with
what chatting tracks that we really that
cool that sounds awesome
that reminds me I forget the name of the
other streamer but there’s somebody that
had like a talking banana mechanical
banana that would like read the text
from the chat and you know just a little
thing like that that’s lucky hey Larry
yeah yeah alright umm so tell me who you
are or tell like I know I know who you
are but they tell tell the audience who
you are
I’m just
an average individual that likes the
program and as we are as we all yes but
I do a lot of web-based development of
JavaScript and typescript recently have
been kind of getting into and nodejs but
my background was originally in c-sharp
and net and asp.net and then migrated
over into the web world with like jquery
vanilla JavaScript jQuery and then all
the fun frameworks run in frameworks
that are there that kind of thing yeah I
think that’s a normal journey I was
originally a c-sharp developer as well
and I spent a lot of years there and
then moved into JavaScript yeah I think
it might turn off because it’s good it’s
going a little nuts right now
like what it’s triggered what is that
what is triggering it exactly I’m seeing
that there’s it’s a bunch of some people
are following oh okay I channel so I’ll
okay
so cool let’s then check out the project
because this is another project that I
was working on sure you may send a link
or do you have it ready to roll let’s
actually go to the ref oh okay I’m gonna
post the link and chat a couple times
and what what is its github.com /
Clarkie oh you know / Tamar oh yeah and
it’s the name of it the repo name is vs
code – twitch – highlighter should be
that top left one there we go okay I’ll
blow on this one increase the font size
here a little bit there you go okay and
I’ll clone that here we go so while mpj
is doing that if you all want it to like
unhighlight a line of code you can just
put an exclamation point in front of the
line number and that will remove it this
is really cool so apparently everybody
thinks the entire file highlight they
need your attention
that’s awesome like that’s like like
it’s like priority and like I had this
I’m reading this book essentialism that
talks about how like basically reducing
your life or your organization to like
very strict priorities and how the word
priority like many many years ago it
used to be mean one thing but over the
years like it is just devolved into this
like priority one priority two priority
three priority for I like then nothing
as a priority right right okay so I’m
just gonna open this in code you’ll need
to npm install as well when you get a
chance and then while you’re doing that
I see some questions in chat the Ville
link ice fire says is there is the
highlight
stay active forever so there’s some
options around that basically if if the
user
decides to disconnect the extension from
the twitch chat it will prompt them to
say hey do you want to remove all the
highlights or do you want to leave them
still there’s also an option where
through the there’s a little tree view
that shows up in the Explorer so an MP
J’s screen there at the very bottom left
you can see there’s a highlights panel
that is expandable and collapsible and
that will show all the highlights a list
of the highlights as well it has a bunch
of recommendations here beautify J s and
D is Lin TS Lin to do both or I’m gonna
ignore this yeah that’s fine
that was vias code saying hey based on
this project these are your extensions
you might want to use but it’s okay
alright so yeah let’s do the create
integrated terminal and do an NPM
install does X is when when everything
is a priority nothing is a priority yeah
precisely
classic – ask can I change highlight
color yes you can so the default is that
bright green and white border but
there’s settings that are available
through the extension that will let you
change it to whatever you want like I
use blue for mine the lodge says can you
timeout users so that’s what we’re
planning on doing today is basically
well we’re gonna focus on users they
might get banned but maybe we should do
it that way actually um PJs listen for
when somebody gets timed out yeah sure
because there’s two events that are
available that come from the twitch chat
and in particular we’re using under
under wraps we’re using a module we were
using actually I forget now let me
double check here the package.json so
there’s there’s two big javascript NPM
packages that help with make simplifying
connecting to the twitch API and all the
things that go along with that one is
TMI jeaious which I highly recommend and
there’s another one called twitch – j/s
I had originally went with twitch – j/s
because as we were talking discussing
early I was experimenting more with
typescript and there were type
definition
already available twitch – jeaious and
that’s why I went with that one it’s
essentially another I don’t know the
whole backstory but I think something
happened with TM ijs where it was like
kind of stagnant for a while and it
wasn’t really being updated and so
somebody kind of worked off of that and
created a twitch json’ which was a
little bit more frequently act more
active right and so I believe that’s why
it happened they’re essentially the same
thing you can swap them in and out
pretty easily hmm
which is what I’ve experienced I think
it was my BOTS light bulb project that
we were talking about earlier that I
switched over to TM ijs in any case yeah
this one’s still using twitch j/s my
closest but there should be event
nonetheless when a user gets banned or
when a user is timed out it should raise
an event that we can listen to that will
allow us to kind of take action upon
that within the extension moving forward
right so walk us through their project a
little bit you know what sure sure why
will while we’re at it should we do a
little bit of a scary thing that I
haven’t tried before sure you start a
collaboration session and then share
that with the shots so you’re gonna hold
on a second you’re gonna let everybody
in the chat potentially join us yeah but
like making it read-only okay yeah
that’s fine like we can we can go like
disable it if this turns out harming but
that way they can like jump into the
sure
alright I’m pasting it in the chat this
is a it might be a disastrous experiment
where I get super hot but like if if you
don’t there is a Swedish saying how
comfortable get help them brunette half
dared
have one so like let’s say if people
people join if it works I’m gonna try
I’m gonna try oh yeah she’s like because
you need to you the
it really helps if you have it – yeah
just a little bit if we’re gonna pair
all right copying it over into my
instance of vias code and it’s loading
up and I’m downloading the project well
your instance of the project
joining collaboration session all right
so I see that crew me because it joined
the collaboration session oh yeah so I
have to okay
read-only requested to always accept
anonymous all right scary all right I
see your terminal too by the way
yep that’s fine I do not see the code
just yet all right I guess it downloads
the project then yeah so we’ll give that
a second and then it can join up what
see there oh yeah I really need to have
a better like my window positioning
needs to improve on this template I
thought I was being smart but a lot of
stuff is happening in the lower right
corner okay but three informants
learning’s me see if i refresh the
workspace oh there we go all right I see
it now so I guess you wanted me to step
through the project a little bit you
have to explain what’s going on so when
it comes to like extensions in general
what with vias code they they kind of
extend for lack of a better term
package.json to become the manifest of
the extension yeah they’re also let me
take a step back actually they’re
written in typescript or JavaScript you
have the option to start either way with
that and then the package JSON becomes
essentially like if you built a browser
extension before they have a manifest
JSON that describes how like the
different things that this extension is
intending to do and may
add features to the browser very similar
to that package.json is acting in that
way for vias code extension so if you
open that up and it’s going to be a lot
like this is a pretty involved more
complex extension but you can keep it
kind of simple too but if you open up
package JSON and you step through step
through that a little bit you’ll see
those those that are familiar with
making web-based projects using a
package JSON you’ll see the typical
conventional keys in there that describe
like the name of the project maybe the
repository
what version of the project it is and so
forth but they add to it things like
categories activation events like
categories is on line 12 on line 15 we
have activation events and then 24 is
where it gets interesting where it’s
talking about what it’s going to
contribute to vs code for the end user
so in this case we’re contributing a
bunch of commands and then if I collapse
that let’s see so I can’t see what you
are doing right so if you want to like
follow along with what I’m saying maybe
so down on oh okay oh now I follow you
okay oh you can follow me oh there yeah
that’s right that live sure lets you do
that don’t ya I know this like people
are pointing out that they’re getting in
there joining collaboration could not
join the collaborations as it’s already
reached the maximum of five participants
okay yeah yeah well that’s interesting I
thought it would be maybe that’s
something that you can limit on urine or
not but I thought the max participants
was 30 yeah exactly I find surprised me
I thought it would be more for some
reason I’m looking at live share
settings to see if there’s something in
shared or external files start on call
share oh guest limit yes oh yeah there’s
a checkbox that says increases the guest
limit from five to thirty so I have that
I think it’s unchecked by default all
right so where do I find that so if you
press ctrl or command comma to bring up
settings yeah yes and then I just
searched for live share and then you
put guests limit which settings there
that it works by saying now open open
settings opened do you have it do you
have the keyboard like shortcut control
but we won’t have the same shortcuts no
it’s usually commitment I don’t know how
to do from the command line I always use
that shortcut home so open user settings
live share guest limit I guess search
for guests limits we’re just guests
maybe I saw it now it’s gone Oh
increases it I find it I found it yeah
okay there we go
all right let’s see like try to connect
that link it’s in the chat it awake
so are you with me yeah I’m with hey so
you see me clicking okay so on line 24
here we have contributes and it’s saying
that’s contributing commands but I can
collapse that it also contributes menus
view containers views like there’s a
bunch of other thing in configuration so
that’s like the settings that we were
talking about just like how we change
the setting for vias live share yeah
that’s where we would do that kind of
stuff so it’s expanding upon this this
is the manifest that that tells vs code
like what this extension is intending to
do excuse me
so yeah that’s kind of describing what’s
going on with the extension and then
where the source code is the main entry
file is the extension TS file now this
is where things can kind of get like add
a hand a little bit especially when
you’re just first starting out building
an extension you want to kind of throw
everything in here because it’s the main
entry point for the extension to start
when it activates so if we go to line 26
here this function activate is the thing
that actually is what starts running it
so there’s different ways you can
activate a function it just because you
install it doesn’t necessarily mean it
will activate if we actually go back to
package.json top going back to this
right here line 15
activation events I don’t recommend
actually doing star because that means
it will just automatically activate in a
lot of cases we don’t want to do that
and the reason I say that is because I
get a lot of questions around vyas code
yeah being very in tune with what’s
going on with that tool and a lot of
people when they ask me questions around
performance like 99% of the time it has
to do with the extensions that they have
installed that will degrade the
performance of like load up time or
whatever it is that they’re experiencing
and I think part of it is because
extensions might be loading up when they
don’t actually need to be activating and
loading up right away so while I’m doing
this right now I don’t recommend doing
that you can actually change this to be
things like on certain commands that
somebody might trigger through the
command palette like when you were
bringing up the settings and in various
other ways you can trigger your your
extension actually load up and start
running and use resources yeah so just
adds up on that again I’m kind of
sharing all this for people that might
be interested in writing their own
extension too you know yeah sure like I
think that a lot of people for well like
this is this is not particularly
complicated things but it’s just hard to
get started and it’s like hopefully we
can give people an idea of how to write
these extensions one of the coolest
thing about visual studio is that it
like it’s written in JavaScript so it’s
very very extendable but it’s it’s hard
to get started in hard to like get a
sense of it so it’s really great to have
a project like this I think cool yeah so
getting back to this activate function
everything that’s in in here within this
scope is what’s going to run when the
extension gets activated to start
running it at first start so in here
we’re doing things like again this is
getting a little really involved in like
complex situation scenario I’m using us
what’s I basically created a language
server so generally what those are used
for is for instance let’s take Python as
an example out of the box if you install
vias code fresh
you can write Python code in it right
you can run your you know build your
projects out within it it’s gonna act as
like just a plain old text editor but if
you want things like being able to debug
Python getting intellisense the smart
auto-completion kind of options that
come up that kind of stuff you need to
install the python extension that goes
within that that acts as a language
server that is running kind of as a
separate process behind the scenes to
enable those rich features that you get
when writing and debugging Python code
within Vyas code okay but the benefit of
doing that for this case is I didn’t
want when I’m parsing out the chat I’m
doing a regular we’re doing a regular
expression I don’t want it to be
blocking and like degrading that
performance I’m trying to keep that in
mind right when the end user is running
this extension I don’t want it to be
degrading their performance while
they’re doing their work so I took it
this approach where I have a language
server that’s actually listening to the
twitch chat and parsing the messages to
see if it’s actually a command that is
going to be used for this purpose and so
that’s what’s going on here it’s it’s
think of it as running as a separate
node process behind the scenes that
doesn’t interfere with the the main
process that’s running vs code or this
other concept which is called an
extension host which are which is
loading up all your extensions behind
the scenes as well with envious code
does that make sense was that maybe a
little too deep into the weeds or what
do you what are you thoughts on that ah
I’m slightly confused but I think it’s
gonna be fine that’s the tricky part
about the pair programming it’s like you
kind of like okay I think I’m gonna get
this think I’m gonna get this I’m not
sure if I got it but we’ll we’ll just
repeat it again if it turns out to be
relevant okay gotcha sure yes I mean the
main thing is just know that there’s the
way this extension is working is there’s
gonna be a there’s a separate process
that’s running
that’s the twitch language server here
and that’s kind of what we’re starting
up we’re having a language server and
then we have a client so to speak that’s
running within the extension here that’s
going to be listening and handling
events that get triggered between those
two things yeah okay so by the way right
people are high
like writing line 42 but it’s not
showing up I don’t well so I’m not sure
why that might be
let’s try to hang on okay
let’s you could say remove yeah let’s
let’s try to do this because maybe it
was like the like the old session
somehow okay it’s that’s not about we’re
gonna fix today all right so we are not
connected chat try to highlight like 36
or 37 or something right now it works
also interesting okay maybe so this is
the other thing that’s been requested is
to get the highlights to work over live
share so that like if it highlights on
your side it highlights on my side yeah
and that I will be coming in the near
future
Oh working with the the vs live shirt
yeah I think what would happen here was
that I opened another visual studio
instance because I switched directories
and okay stayed connected but it was
probably like keep perhaps pointing to
the old project or something I don’t
know gotcha okay so we’re we’re so in
again at a high level I this main
extension file is like them think of it
as like void main kind of your startup
for your whatever it is that you’re
writing and the rest of the stuff
outside of there like the highlighter
and twitch chat client is just stuff
that’s kind of abstracting
responsibilities so that’s not all kind
of in one file and just ginormous thing
that I can’t manage right which it’s
kind of getting there anyway but that’s
another story so in terms of what we
want to do today we’re gonna want to
look at the twitch language server which
is the as I was mentioning before the
thing that’s listening to the twitch
chat and in particular things like on
TTV chat message Oh
what does the ECB’s down for twitch it’s
shorthand for twitch TV oh yeah yeah I
probably yeah it would make more sense
now you got me thinking like I’m
analyzing my code here
like for more readability and for other
people to be able to contribute to this
project make it right and things out a
little bit better but on the mental note
for that later so this is checking to
see who’s sending the message and then
we’re gonna start parsing the message so
I’ll control click into that which is
just this function right here and here’s
where we’re doing some fun regular
expression stuff which I’m not going to
mess with because our buddy parathe on
as I mentioned helped put this together
and I am terrible with regular
expressions so but we’re not going to
need to mess with that anyway but you
get the idea that it’s looking for a
certain message that starts with an
exclamation point saying what line and
then the number and then we’re planning
to support where you could say right now
it’s limited to whatever active file we
have open at the moment it will do the
highlight in there and not in any other
file but there’s cases where somebody
might have spotted an issue in another
file that’s not currently visible to the
hosts of the stream and you might want
to draw their attention there we want to
add that in as well again it’s very much
a early beta kind of status of this
extension I see here that there’s the
capability to write a text thanks to the
highlight so if you write line number
and then you can you can write a comment
as well yeah so if you hover over r108
there I don’t know if somebody actually
added a comment yeah really excited a
comment here oh that’s cool this is oh
bloody cool right
that way you they can kind of say hey I
think you’re missing a semicolon here or
something or hey knucklehead you know
you’re a knucklehead this is the problem
that kind of thing
it gets against fun but we don’t want
people abusing that either right so we
want to listen to things like when
people get bend and so that’s where
where was it the part where the events
right here is where we’re connecting
we’re using the it’s actually twitch J’s
but you can see I’ve been switching back
and play as I mentioned before I was
switching back and forth between other
libraries and one of them is called TMI
so that’s what that means it’s a twitch
messaging interface and I create a
client of that that’s gonna listen to
the twitch chat so it’s a client
listening to the twitch chat not to
confuse any other client we might talk
about moving forward in there I listen
to events on when people might join I
actually we probably can remove that
needed and when people send a chat
message that’s what this is but there’s
also an event that we can do law this is
where I’m gonna I think you’re gonna
start taking over and driving right you
want to code this and helping create a
PR so if you there’s another event and
I’m just gonna make a comment
I can’t head it that’s right yes haha I
forgot about the hi you got me there’s
another event that’s called ban yeah
that we can listen to or timeout which
timeout just to get everybody acquainted
with twitch that might not be familiar
their timeout is like maybe you don’t
want to bend somebody from being able to
chat ever timeout will say hey we’re
gonna put you in timeout literally and
not allow you to send any message for X
amount of time which is a moderator
capability or the broadcaster capability
to do on somebody in chat so we may need
volunteers by the way it’s a time out so
we can test this out because the idea is
if somebody gets banned or timed out we
want to remove their highlights that
they have yeah that’s actually good like
I was about to say that I will I like I
never timeout people if you if you’re an
asshole you’re banned but I I think that
for purposes of this thing we should
really use the timeout otherwise it’s I
might forget to unban someone right so
let me just double check on that with
the twitch j/s library to make sure
biased advised ago that please time me
out I’m just looking on NPM really quick
going to the library and making sure
I’ll them now their github repo it
aligns with the official Twitter IRC
documentation so that means yeah they’ll
they’ll be listening to bands and
timeouts so that should work as as
expected so let’s implement that
function all right that’s going to do so
as I was mentioning earlier this is the
language server side of it and then we
have a client that’s into the that’s in
the extension main thread that’s going
to be listening to events raised by the
language server so that’s kind of how
the communication goes between the these
two components the lodge says Clark UI
think there is also a delete event now
okay that’s good I didn’t I was not
aware of that so if if somebody’s
message gets deleted we can listen to
that if we wanted to
oh that’s cool thank you no knowledge a
we’re not hopping the lodge sorry if I’m
mispronouncing it so yeah
now let’s implement that function on TTV
chat chat band well maybe I rename the
all right so it seems like we are
extracting here like the payload okay so
that’s basically this is the same
signature every time uh hold on is there
a way I need to follow you now focus
participant oh no I don’t want people to
focus on me click on your name you
currently edit ok I’m with you now yeah
so is it it is it like Channel and
that’s a string username string and so
the signature is different from event to
event yes I have it already set up on so
that we can avoid having a really Cody
so it’s channel yeah
username and then reason is gonna be the
string reason like I guess you could
provide a reason why you time somebody
out a lot of times just clicking a
button the duration which is a number
all right and then user state which ends
up being a JSON object so you can define
you did you say state or user states
user state and so where did you find
this out like how did you know that this
was the same sure where’s the docs yes
so that we get like ah so bit from for a
lot of it I go based off of the twitch
IRC documentation which I’ll share I’ll
share a link to that in the twitch chat
so that people could see that
so dev dev dot twitch.tv is where they
expose a lot of their documentation for
their api’s oh and then the library
because the library I’ll share that one
I guess as well the one that I recommend
honestly right now is the TM ijs so I’ll
share that link to that one in the chat
as well so that TMI jeaious is a great
library that kind of it’s built for
JavaScript and typescript that makes it
a little bit easier when interacting
all right so in that one if you click on
the events for TM ijs
you can search for like timeout Oh
brilliant and you’ll see it there oh
that’s so good all right all right I get
it cool
all right so here’s the part where it’s
I got a jog my memory because it’s been
a little while since I’ve worked on this
extension we need to essentially say hey
we need to send an event to the
extension itself right remember this is
a language server that’s running as a
separate process no hey we received this
event here’s what happened and then
that’ll allow the extension to make a
decision upon that and listen to for
that type of event yeah so if we take a
look at if you scroll down and look at
parse message there yeah you’ll see
there’s a on line 144 there’s a
connection dot send notification so what
you can do is you essentially send
notification events back and forth
between this language server and the
extension as a client again right
another client but in that respect
between this server and the extension
itself so we’re gonna want to do
something like that
and then give it a like signature for
this type of event that we wanted to
find we’re essentially defining our own
events now between this language server
in our extension so now bring that back
uses a lowercase it’s this really two
words this is one word – Tobias sick
like wants it to be like this but I want
it to be like this I don’t think you can
define it whatever you want I think it’s
just how they kind of wrote it so if you
want it to be camel case that’s fine you
should be fine but if a documentation
shows it as lowercase but it shouldn’t
matter what we use yeah but I because it
feels to me like in English users state
is two words correct that’s how I would
take it – yeah holy we thought that what
are your thoughts on username then since
we’re on the subject username Oh God
yeah username ah that’s tricky like
because in Swede like Swedes tends to
make this mistake of like making too
many things into one word because in
Swedish you make everything into one
word like it’s a lot of combinations of
like for instance like cinnamon bun
would be the two words in English
because that’s honestly sensible but in
Swedish it is candy and bula as one word
like cinnamon bun yeah which is super
annoying from like a typing standpoint
this makes it really hard for to develop
machine learning algorithms for this
it’s a crappy language all right so
Fiona we want to send a notification
from this server to any client that’s
listening so I think you have that ready
to roll
then a message where should I be seen so
there’s a connection object that we can
use so if you start typing connection
right and this has the signature of
notification type 1 and then some
typescript garble yes so you don’t don’t
worry too much about that what we can do
what essentially what we’ve been doing
is we have a constants file that defines
all the different type of notifications
that we want to send so if you look at
down on line 145 yeah what you try
selecting it on your side does that mean
that yeah all right then this is a lot
more visible for me in the audience okay
all right I’ll do that moving forward
thank you you can control well I don’t
know what the keyboard shortcut might be
for you but if you control click on the
highlight part right here alright it’ll
bring you to that yeah file and in here
is where we’ll want to define so you can
see like the command type or the name of
the command is there and that matches it
defines the event signature that we want
to call it out as okay and the command
itself right so we’ll want to add a new
one towards the bottom down on line 30
if we do a new line there oh sorry
excuse me right and what if we wanted it
like called timeout timeout
equals and then the convention we’ve
been using like a name spacing kind of
thing so yeah at which highlighter dot
cool so now we can go back to the
language server excellent we’re awesome
oops I lost you
we have to go where I go oh maybe when
I’m going to definition doesn’t follow
me I’m online 91 and push language
server okay I’m with you so here the
first parameter we can say oh the
commands we can pull them commands dot
timeout I think it might be capital C
for that by the way for the commands
part oh it’s weird that live shares not
showing me your suggestions that pop up
when you do the dot and then so I have
to label maybe this has to do with like
the fact that you’re in read-only mode
might be yeah so now you’d want to use
the timeout option that we just created
it’s it possible to do like if if I want
to do this in the future to give high
access to one person and read-only
access to some people you know I’m not
sure that’s that’s really a really great
idea yeah let’s see if that I wonder if
that will work
I’m gonna write it down as a mental note
to share speed back and kick and like to
look up later yeah we should send this
to the live share team because it’s like
a great test but it’s working out it’s
like surprising finds so much fun to do
this
what is people commenting username is
inconsistent no no I fixed that how do I
do
like can I remove the highlight now when
it’s fixed
yeah so one way you could do that is you
can open up the file explorer the little
the first icon at the very top left this
one yep and then there’s a yeah I don’t
we don’t have a right-click menu
available yet for that all right so so
there’s there’s two ways you can do it
actually so what happens is in your file
explorer view it’ll have a panel at the
bottom that’s collapsible that says
highlights and it should show you all of
them in
another way you can do it is you can
bring up the command palette like you
were doing before to bring up settings
uh okay huh sure like this yes and then
if you do if you type in twitch and then
unhighlight without the setting words
are you Oh
twitch and on the highlights there’s a
unhighlight all option you can do or you
can say on highlight individual ones if
you wanted okay so I can’t on the
highlight this line that I’m on you
can’t hear so if you do unhighlight by
file and line it’s a second from the
bottom
oh I have to pick one it doesn’t yeah
it’s a little limited in that respect
all right cool
that’s fine good feedback though there
we go and then six all right cool this
is another one from mr. there’s a mister
Destructoid oh yes didn’t get that one
so I guess to maybe show off another way
to do that that might be a little bit
easier to do yeah instead of going
through the command palette the the icon
in the very top left corner the little
files did the search if you click on
that to bring up your that’s what I call
the file explorer yeah sure at the very
bottom of that panel you’ll see a
highlights uh if you expand that you’ll
it should show all the highlights I says
that there’s no date to provide register
that can provide you data okay then we
have a bug yeah good testing there we go
yeah Oh a parrot on I forgot parrot on
so again as I mentioned parrot on who’s
been a huge contributor to this project
mentions in the chat you can turn it the
Explorer window is hidden by default but
you can turn it on in this in the
settings okay so let’s double check on
that if we if you go to your you know
preferences
open user settings again – and search
for twitch join message leave message
nickname show high let’s an activity bar
there we go you check that box oh there
we go alright so it is a bug working is
expected Oh brilliant
alright so cool now we have like this
backlog that users create for us almost
here actually that’s pretty cool yeah so
you could right-click on individual ones
or if you right-click at the file level
that then you can remove all those ones
for that particular file alright cool
I’m gonna actually read that because I’m
gonna declare like highlight bankruptcy
now because there’s so many we haven’t
been keeping big keeping on top of this
and also people have you just been
trying it out so I’m gonna remove all
and then maybe try to keep attention
actually keep attention to them sounds
good alright
I like clients message and chat says we
should make it’s broken as expected a
thing yes good alright alright we’re
back online 91 in twitch language server
yep right in our 93 now so the other
parameter or yeah that you can pass into
this function send notification is like
any a JSON object that can share data as
part of the event so really all we need
here is to know who the user is that got
timed out so and we have that so we can
just pass in a key user name alright and
the shorthand yeah that should be fine
yeah so using it like that it should
automatically know that that’s the key
and to use the value that’s part of the
scope of this function yeah yeah I get
that but I was thinking like is it the
correct naming or is it it’s whatever we
want as long as we know what it is here
then on the client side that’s listening
for that event we just need to match
that so oh okay so we with this it’s not
the API we are in control of
the receiver as well correct this is
totally on us now we have up control all
right so now comes the point where we
need to listen to this notification on
the client side so in that case what we
want to do is we can actually if you
open up twitch chat client file all
right
twitch chat client let me double check
that there so what is it were looking
for all ttv I’m just again I’m still
refreshing my memory on this project and
if parathe ons in chat if you want to
catch me up just to be safe that’d be
helpful – all right where were we here
we’re not sending requests or just
listening yeah
if this broad like knowledge that this
project link that have format that this
phone is starting to upset me why is
this wrong the linter is complaining to
you is that what’s going on no he thinks
it should be like the lynches should
have complained on line 90 and twitch
chat client well sure I don’t see the
problem with this now let me see what
that’s about to catch error there yeah
what’s wrong what would be wrong with
this am i guess silly I don’t know yeah
a client for sense like the this line is
fine thank you highlighter the wrong
line all right I’m gonna remove that
sorry for distracting you there
no no it’s fine I where is this client
working again sorry bear with me just a
moment here no no problem like this is
there’s a nature programming like
figuring out dogs like one of the things
where I really would like as a way to
have like these cold browsing so that we
could like check like follow you around
while you’re doing like dog searching
and stuff because but there’s currently
like no tool that is good at that that I
found yeah like if you have that chat I
would accept recommendations on that
with open arms right okay so I think I
think I’ve gotten my bearings again with
this it’s one of those things where I’m
sure this happens everybody right Evan
but let me know if it doesn’t where you
you know you might work on a project
this usually happens like over the
weekend you leave off in a current state
on a Friday and then on Monday you come
back and you’re like oh yeah yeah for
sure like I have like a very small
working memory I’ve found so I I
actually do this little narratives when
I’m working that we’re like type out my
thoughts yes so like it’s partially to
keep myself focused because I’m very
easily distracted but it’s also to allow
me to jump back in after like having a
cup of coffee and talking with a
colleague or coming back like after the
weekend for sure so I see perotin helped
and I was just getting to this point
with it if we go down to line 196 of
twitch chat client so here’s where we’re
defining listening to these
notifications on the client side and so
you could see one like we have the main
ones right on I keep forgetting that I
can highlight and you’ll see it online
– OH – we have one for the highlight
command and one for the unhighlight
command that comes through from
listening to the twitch chat yeah so we
want to create another one probably
online
you know after line 2:14 saying this
underscore language client on
notification and then tie it to that
command that we created and the
whoa whoa what I’m following you yes so
you know oh sorry
while you’re doing that I was gonna go
alright hilarious but it’s gonna cut
like it’s it’s enormously fun it is I
think that people are really afraid to
highlight now we said we would be
looking at it so like feel free it’s
kind of fun when you do like weird
comments comments and we had like
timeout
yep and then we could just say any
params again because it’s a JSON object
this is our callback function
yeah
not not to stress you out or anything
but technically we have two minutes left
oh boy I don’t think we’re gonna get
this done no but it’s cool like it’s
so it was parents any so we’re doing the
arrow function shorthand there is what
we want for the callback so yeah the the
params any will go inside of that and
that’s how all this so the first
parameter is basically defining saying
hey we want to listen to that type of
notification and then what we do when we
get that notification is the params any
then I guess we should probably check so
in the same fashion that we have this
dot on on highlight and like if that
this dot on highlight we want to have
some guard logic there to make sure that
that’s available but in this case we’re
gonna create one that’s gonna say like
on time out
instead of highlight oh so we want to
create this yeah well so what’s
happening if you look at like line 211
here on this client it looks to see if
that’s been defined and so the way we
define that is actually from the
extension again I’m sorry that this is a
little this this extension itself is
quite involved in the way it works and
yeah could potentially be re architected
way we do it right that that’s it
maybe or maybe not like it’s it’s
architecture does happen for a reason
sometimes it becomes unnecessary to
convoluted and sometimes it does like
whenever somebody asked me to write a
short text like a ride a short
explanation of this a paragraph is okay
and I’m like wait a minute like like
don’t you understand that writing a full
page explanation of something takes a
shorter time than
a paragraph like it takes a long time to
drill down an architecture to simplicity
so like when you see something that is
small and very elegantly constructed
that is because people have spent like a
lot a lot a lot of time on it
so like first the project swells and
then you like figure out like the
essentials of it so it’s like don’t
apologize for that this is a new this is
a new code base and that that means that
it tends to be like involved okay cool
thank you for that I appreciate it
it’s kind of like writing an abstract
right yeah yeah all right so so what’s
happening is we’re defining basically
the the actual signature and
implementation of this function we write
because it’s something that’s going to
be happening within the extension we
have that written in in extension TS and
it’s what extension that TS gets to
define it for us right we’re basically
opening up the API of how the extension
wants to behave and handle this we’re
just giving it a name on this client
that’s listening to the language server
hopefully I explained that well enough
so we want to double check the same way
that we’re double checking that on
highlight function was defined by the
extension we want to double check that
here as well ah-so which we haven’t done
yet so if we were to like run this and
try to see if there was a non timeout
like actually execute and call that
function it wouldn’t work because we
have an implement yeah right so now we
could say we need to define a this Don
timeout right so if we go I’m gonna
scroll if you’re ready I don’t want to
yeah yeah yeah do the startled scroll
it’s called
scrolling scrolling scrolling scrolling
scrolling so here’s where what I was
talking about we have a signature for
what it would look like but the actual
implementation of it is happening in
extension dot TS so let me switch over
to that really quick I think you should
follow with me yeah and you’ll see right
here like here’s our chat client that’s
listening to the server which is
listening to the actual twitch API and
the chat messages and it’s saying hey
unhighlight should be defined as the
highlight function in this file yeah so
can control click there so we want to do
something very similar to that but let’s
first define what that you know the on
timeout function
in twitch chat client oops not there but
back here so we could just add another
one here that is probably right right
after this one yeah
160 all right let’s do that I so public
on timeouts don’t yeah and then this is
also avoid I guess correct and I think
the one thing that will pass in in terms
of parameters here will be the user name
as a string again
yeah alright I have to say like these
Commons man this is I think that these
are necessary well perhaps again perhaps
the parrot on for that yeah alright so
now if we go back with a scroll again
don’t get startled on me we’re gonna go
down 196 I think it was right yep right
here so now we can say this dot on time
out and pass in the username from the
params which the params are right here
think we’re almost there we might
actually get this done fairly soon all
right quite I mean we can just find a
good place to leave it off and then like
say what we would do if we were to
actually wrap it up sure yeah we could
do that but guests we can do like two
more minutes sure that’s fine
so I think one thing we want to look out
for is that I’m pretty sure you had it
as user name with a capital end right oh
yeah that’s pretty cool and it picks
that up even though it’s a nanny no
expected zero arguments but got one we
don’t have any arguments on the
one time out yet can you well I guess
I’ll go where did it go
you had perhaps you had user name in
here didn’t you I thought you know I
never had
oh sorry never yes we want to we want to
define it there okay so use your name
string I suppose yeah alright alright so
that should be it’s official there and
then no where am I on time out there we
go I’m back okay so that should be it
for between the language server and the
client so we are listening to it and the
next step we we would do but we probably
won’t we don’t have time to do yeah
would be to go into extension TS and
essentially you can write this part at
Lisa you can add a new line on line
after line 37 on extension TS forties 30
so twitch chat client dot on timeout and
then you could say equals timeout and
then it should show you squigglies like
hey that function hasn’t been defined
and then within there we would go and
listen we would look at the collection
of highlights that we have the highlight
is a class object which is over here and
in there every highlight that gets
created we captured the username from
chat that created it and what we would
do is just kind of filter on that and
remove there highlight as part of that
timeout right for whatever the time
period might be or something or well
more so when they get banned right you
would want to remove them completely on
time out maybe we want to have it behave
a little bit differently and maybe
remove them maybe not remove them but
now we have the option to do that
alright yeah it seems pretty
straightforward like we’ll see if I will
do this or if somebody else and chat
will do something or like there’s
there’s tons of issues on this on this
twitch extension that that can be fixed
and improved and I really see myself
using this on the channel and like
there’s so much more fun things
you can do and this is so great for
interaction with people especially sense
the visual studio a live share extension
is limited to only 30 people it’s really
cool to have something also a bit cool
to like as more people get into the
stream it were cool to integrate it with
subscriptions and bits and stuff to like
limit the the line things so they and
especially it could give use bits to
give highlighting access to other users
for sure yeah yeah yeah oh I remove
highlighting eyes of users that were
evil right correct yeah for sure yeah I
definitely yeah there’s it’s very
exciting it’s been a fun project to work
on
and it’s been it’s what it’s actually
for me the first one where I’ve ever had
again I can’t say it enough because
parathe on has been really helpful with
this thank you where what yeah where
I’ve ever had an open-source project
that had a lot of contributions from
outside like a lot of it is just my
little pet there are little pet projects
for me and it’s mostly me working on him
and I barely get people kind of
contributing to him yeah or
collaborating with people right and so
it’s been an awesome experience in that
that sense too yeah it’s a lie I think
that this is a marvelous little
invention and I’m so happy you brought
it to life and thank you so much for
parrot and as well for helping out I
really hope to contribute as well
because it’s I need this and it’s so
great that it exists and that’s where we
that’s where we wrap up today we failed
together success but we learned how to
work with the base coat which I try to
plug in and we had a lot of fun and
honestly that’s that’s the actual
objective of the stream thank you so
much Brian make sure to follow brian on
twitter and twitch on the twitter you
can find him on the clarke a oh boy no
let me
switch to the this see follow him on
underscore clock a on Twitter and follow
him on twitch on yes to RKO
this has been amazing thank you thank you bye everyone
Please follow and like us: