Create Dynamic WebXR experiences with Angular and A-Frame @ Angular San Diego Meetup

awesome all right well again thank you all so much for coming tonight we’re excited to have you here and we’re really excited for our
speaker jeff fry uh jeff is a senior partner developer at on the jfrog partner
engineering team where he works with the jfrog ecosystem and partners to deliver innovative technology solutions
previously he was part of the partner and alliance’s engineering team at cloudbees where he delivered partner integrations for amazon
microsoft google vmware and servicenow outside of work jeff enjoys traveling around the world with his family
racing carts with his son and watching his daughter do front handsprings and tonight he’ll be talking about creating dynamic web xr experiences with
angular and a-frame so without further ado i will hand it over to jeff thank you so much yeah thank michigan jules and thanks for
having me on uh the san diego javascript uh let me go ahead and share my desktop
there we go so hopefully this will be a fun session here what we’ll be talking about is how you can use angular
in this virtual alley augmented reality library called a-frame to build these uh virtual reality and
augment rally experiences with your browser so let’s get started so
uh first thing our a community events organizer ari here wants me to show you this so this is
a uh a show notes page let me go ahead and put this
into the chat so on the show notes page um the slides that i’ll go over will be here as well as a chance to win the star
wars lego helmet set which is pretty cool um and then you also have an opportunity to get a t-shirt so let me
go ahead and put this in there
there you go and then i’ll be going over some code during this session so this code is in github
and i’ll go also put this in the chat there you go
all right so uh looks like you already covered uh a
bit of intro about me there um i did recently switch over to senior technical alliance manager jfrog so
obviously i’ve been a developer for a really long time that made that cross over to the dark side and and join the business development team
so uh very interested do a lot of work in typescript go have a pretty extensive java
background a big fan of motorsports formula one obviously like
like michi mentioned there i do some racing with carts with my sons which that’s also pretty fun uh my daughter just flip
back flips she’s a she’s into gymnastics competitive gymnastics so that’s always fun watching them both um and then also a
big time virtual reality augment rally mixed reality enthusiast obnoxious headset uh
got all sorts of apps on the phone and playing around with that
so first i’m going to talk about is web xr but let’s talk about uh you know the history of virtual
reality and augmented rail and how that’s coming about because there’s been some starts on it stops a lot of hype
um but it slowly progressed over time um the first thing we probably want to
talk about is if you remember oculus if we can go all the way back to 2012 and the the oculus quick
kickstarter program that came around came about there was a lot of hype around that
shortly after that they released some development kits some and if you remember these development kits they were big they sat
on your head you had like 20 wires coming off your head so it looked pretty ridiculous um shortly after that you had unity
unreal development environments so they were being already used to build 3d games had a
natural fit to do virtual reality augmented reality and then the first oculus consumer version
released but still was pretty big people would get sick people would get
hot with those things on so it was still pretty cumbersome
and then if you remember pokemon augment rally so you know people walking around trying to
capture these monsters uh so that was that was pretty crazy and then right around uh 2014 the 2016 time frame
you had the first uh virtual reality device api that came out and this was webvr
so this at the time was focused just on virtual reality and this was extended to have a job
javascript api it used a web gl to do the graphics rendering
and it was pushed by mozilla and google then shortly after that microsoft put
off hololens you had magic meet in the mixed reality and then phone started having support
for it so you had ar core for android air kit for iphone
and then right around the 2018 time frame the webvr api was migrated to webxr
and this was to include the additional support for mixed reality and augmented reality so web xr supports both now
so now mixed reality augmented rally and virtual reality as well
and so just a clarification on the mixed reality of augmented reality apart
so augmented reality is an overlay on your environment
this could be as simple as a you know a info bubble that you see over an environment um it
could be objects but the distinction to mixed reality is mixed reality are objects and things in your in your
world that you can interact with so an example of that is if you replace a ball a virtual ball in your
environment and you’d be able to touch it and bounce it that would be a mixed reality and then obviously virtual reality is
just a completely immersive experience 3d experience
so let’s move on here so a little bit more detail and web xr in the devices so web xr
is a device api um it handles the inputs and outputs to support virtual reality
augmented reality and mixed reality scenes um it allows you to
write javascript and i’ll talk a little bit about those those libraries and so you can render
these within these devices so this just slide here kind of shows
the browser and device support right now chrome supports it so you can write your own javascript and i’ll talk about
a-frame as well to create these these uh these scenes microsoft edge
unfortunately apple’s a little bit behind they don’t have safari support for it yet
there is a standalone web xr viewer app that you can download to see some of these uh see some of
these mixed reality augmented virtual reality scenes and then device support all the android
air core compatible devices uh google daydream htc by magically micro hololens
oculus rift the samsung devices and then the windows mixed reality headsets as well
so let’s talk a little bit about the javascript support for a webxr uh the first one i’ll talk
about here is 3js so 3js has been around for a really long time i think all the way back to like
2010 uh it was built is used to build 3d graphics and so it was natural to have it support
um webxr so with with uh 3js you can create
a scenes you can create cameras animation put lights in your scene
create materials shaders objects and all sorts of geometry so what you’re looking at here is a code
snippet that creates a scene first thing you’ll see here is you know cameras created
some orbit controls for navigation we can create a scene and then we start adding our geometry
like a floor and a cube to that scene so what i’ll do is i will go ahead and
jump over to my ide and show you this exact one
can you see my id just to make sure that okay great all right so
so this is that same code i just sold you there what i’m doing is i’m bringing the 3djs library um you see here where i have my
javascript in here again this is where i’m creating a camera creating my orbit
controls i’m creating my scene and adding in this
cube and having adding in some lights as well and again this is all using the 3.js library so
now if i want to go ahead and view this in my browser
click on that there you go there’s there’s the rendering using that javascript
so again so that that shows you 3js um web xr support for 3.js came in in
2018. so you’ll be able to do this uh using 3js
now we take that a higher level um we have a new library called a-frame which is an html-based library
behind the scene just using 3js so the advantage of using this library is you can use html tags
with certain component properties and be able to create these 3d scenes
it’s an entity component system in that you create these html tags called entities and by
adding certain components to control behavior appearance you can create 3d
objects and so what i’m going to show you as an
example is a frame jump back to my ide
so you can notice the difference here versus using the 3.js and all the javascript you have now using a-frame library a lot
of that’s been abstracted away into these a-frame tags so i’ve created an a-frame scene so this
is the tag for scene a camera and a box
and so if i go ahead and view that in the browser
and you get the similar object in a scene um but what you’ll notice is that a
frame automatically has the web xr support so you’ll also see a virtual reality button here
so if you had a virtual alley headset you’d be able to view it that way
on a device that supports augmented reality you’ll also have a similar button as well
what i’m going to do right now is take you to the a frame website
and it has a library of some of these experiences here so this is a frame.io i’ll put this in me
oh i see a question on chat no firefox at the i think about four or five months
ago when i created this there wasn’t firefox support there may be now i know they were working on it um
i just posted in the chat there the link to this a-frame website and in this gallery over here on the
left you have some several examples of scenes that you can create i’ll click on this model viewer
one
so here’s an example where uh we’re creating a triceratops using a 3d model so a frame supports the 3d bunch of
different 3d modeling types gtlf is a common one that’s used we can take
a look at the source here
which there we go so again we’re just pulling
in the a-frame library here there’s some supplement libraries and then really it’s just creating a scene like
you saw before they have a tag for assets that you use include
different objects and then we’re including that triceratops in here so i’ll jump back here
again you can view this in augment ran over trail if you have that device now one other cool thing in the
development of these these scenes is you have a visual inspector that’s automatically included
in that library so i can click on this visual inspector
and get a development-oriented view of that scene i can see all the a-frame tags that were
used i can move around scroll scroll around
um also what i can do is i can i can take an entity make changes to the attributes and see
those happen real time or i can click on one it highlights it here
and i can start moving it around and it updates in real time and so this is a great way if you’re
working on a scene and you’re having difficulty trying to place objects and you can’t figure it out
you can automatically go into this inspector view and be able to make updates
okay oops so that’s a quick overview a
frame and how it works let’s go to a little bit more details of um the a-frame entities primitives
and components so a-frame itself includes some default tags the most fundamental one is the entity
tag and so to create an object in your 3d scene you’ll use this entity tag
and then you add these components again add behavior and appearance to it so
one default component that you include is this geometry component and there’s several types of primitives
is what they call it for like boxes circles and then you can add a material
component to add color they have other default components like position rotation and scale
so that you can move the object around and then what i’ll do is i’ll go ahead
and click over and this will drop this in the chat
so we can take a look at the list of components that you can use if i scroll down here on the on the left here this left pane
you can see the list of components that you can add to your entity tags
let’s see here gtl gta gtlf model uh this is the cool one where you can
actually add your own 3d objects into the scene you can add lights look controls allow
you to control how you’re looking at objects we talked about rotation
scale what else is interesting
text you can add text to an object and they’ll place it on there for you
next thing we’ll talk about
are how you can create your own components so those are the default components that are included in the library
but you can create your own uh you can use like 3js javascript to
create your own component and so the way you do that is in the a-frame library we have a
method a global method called register component and basically what you do is you give a name for the component
you create a a property called schema and this will be the inputs for your
components and then you implement some life cycle methods to draw potentially draw using
javascript so lifecycle in it is used when you first make a call the components added
to your scene this is where the initialization can occur update occurs if there’s any sort of
update to a property like i say if you make a length or size change they’ll go ahead and maybe do some
drawing that you need to occur remove is if you remove the com component from the scene that’s may
that may be where you want to do some cleanup uh tick tock are executed on frame updates
so you want to be careful about these two you don’t want to put too much and have too much going on in these
and then play and pause are for animation so you can actually add animation there’s an animation
component and have it stop or do any sort of re-rendering based on uh if
if the animation is played or paused
let’s try oh okay so let me let me show you example of that
so [Music] all right so here’s the javascript
example here uh using that register component so in this example what we’re going to do is we’re going to
create a rectangle for rounded corners and so this is where i’m using the a frame register component
method here i’m calling this component rect corners this is where i’m setting up my input
with the schema property uh giving giving these names
the type and some default values and this is where i start implementing those lifecycle methods and i’m using
3js behind the scenes so um in the init here i’m creating a mesh here
uh the 3js mesh for the rectangle in the update function i’m doing some
updates the rendering i have some standalone methods here for
controlling opacity and i’m not doing anything with tech but
you can see um i’m using the remove here to remove it from the scene [Music]
and a standalone method actually draws the rectangle and puts some radiuses in there
now that i have this javascript i’ll jump over the component example
so this is my html i pulled the a-frame library in [Music] here’s my component.js that was the file
that we just looked at and then we have the a-frame scene
and then here’s the a-frame entity tag so now i’ve created my custom component
i can use it right here so i’ve called it out i’ll specify
values for those inputs i’ve also used uh one of the default components for
position to position it within the scene so now that i’ve done that we can check
that out there you go again this is using the
a-frame to create a custom component and create a rectangle with radiuses
all right so that’s component so now we can take this even a step further so we’ve created a custom component now
what we can do is we can create our own primitives so this is now creating our own custom a-frame html tag
and so what we’re going to do here is we’re going to use a method called register primitive and we’re going to create our own custom
primitive called a wreck corners so once we do that then we can
use it in a scene not have to use the entity tag so this is a little bit more succinct in putting this into the scene so the
way you do this is um you have the call out to register primitive you
give it the name and then you call your component that we created earlier
let’s see what that looks like
all right so here’s our javascript this primitive.js uh this part’s all the same we’re using
that same red corners component let’s go down here
i have this register primitive i’m gonna give it this name a rep dash
corners here’s the component name from above we remember
that’s the same component name i’ve given here
and then what i’ve done is i’ve mapped those component input values
to the primitive values so once we’ve done that i can jump to my html file
again using a frame library i’m calling them that primitive.js
so now this is where i can use my custom tag or my custom primitive
and then there you go so you can get the same thing here
uh so since this is the angular group i won’t go in too much detail about this but
obviously uh open source web application framework typescript based which i love that’s typescript based
um came out of google uh it’s a full-fledged framework for ui and much more state management
uh multi-device support with component based and sort of like
model view controller base as well which i appreciate has data binding methods um i like the
the class or uh the uh object inheritance in classes i’m
come from a java java background so that part i really appreciate so uh it works really well um
this is probably also a uh a review as well so component based so the way this works is we have our
selectors which specify our html tags um we specify our html
file uh that has some of the rendering as well as with the cascading style sheets as well
one other thing that we’ll use in this is angular has a bunch of data binding methods uh one that we’re interested in
is the host binding because what we’re going to do is we’re going to create a model and be able to update based on that model
so let me show you just host finding example we have set up
all right so to kind of give you a preview here so we’ve i’ve created this component here called thingamajig and this is a component that
we’re going to use in our augmented rally virtual reality scene we’ll end up creating a primitive called
eighth in it thingamajig and it’s gonna have these properties on here and then we’re gonna have this
model that has all the properties set so the idea here is once we make updates to
this model this will get rented rendered in angular within the
the browser scene and we’ll be able to do this updates automatically
so putting that all together so we showed you how to create your own custom component we’re going to do that we’re creating
the stigma jig component we’re going to then create our a custom primitive
and this is a thingamajig primitive i’m going to use angular to create a component to help render it
and then we’ll be able to update properties on that component using the angular host binding
just some notes quick notes on angular and a-frame setup so obviously you guys know you can install
angular the npm install you can create a new app with this command
and then to install a-frame you can use npm install to install a-frame uh one thing to note is to if you want
to deploy this to public um you need to use https
um that’s for some security reasons for being able to view the virtual reality or augmented reality on your device
and then after you do that it’s just a matter of creating a scene and dropping in these primitives or these
entities or these components uh one other thing we’ll be using in
this example is the angular statement state management so we’re using angular store
and just kind of quick overview of that i have the state machine set up right
here so i just have some just four actions created here um each
of these actions will get triggered to the state machine so i have undo redo have an action here to add a
thingamajig and an action action here to update a thingamajig
this gets routed to what’s called a reducer which is basically just a state
machine and in the state machine we have several options here
here’s where we do an ad thingamajig notice here we’re also keeping track of past present future as we make changes
so we can bounce back and forth we will create this thing in the jig
model and then that will get added to our scene and angular we’ll go ahead and render it
that’s kind of what you see here in this in this diagram again we trigger an action it gets to
the reducer the state machine uh runs through a store which will i’ll
show you how that gets called and then i’ll do an update on the ui
uh so for a little bit more detail here um from our web browser we’re gonna
be able to execute an action called create thingamajig this gets sent to that state machine
that i um i created or sorry i just showed you um it’ll create that default thing imaging model
using angular we’re going to have a property panel to show you how we can update to the state machine and then be able to
update the properties in the ui and then that would be reflected in the
thingamajig primitive that’s being created and then you’ll be able to see this right over here
i think imaging happens to be spiderman all right so let me show you what it
looks like in the ide
and so if i scroll up here i’m sorry not that one
so i have this air view angular component in it i have a menu created and i have
this menu item here for add to convention
what that ends up doing is it will call this method
this calls this method on the store which dispatches this action here at digimajig with some
properties that gets run to the state machine then the state machine will update
the primitive that you’re just about to see here
so let me show you this part this is the
this is the angular component for a property panel and this property panel will have the
properties for that primitive so you can make changes to the position the scale rotation
and then
and this is a component for our ar view and in this component this is where we’re registering all the
a-frame components and printers primitives that we’re using so you can see right here
this is where we’re creating this a-frame thingamajig using a gltf model component and it’s
just pulling up spider-man
so let’s take a look at what this looks like
so i have it running within my id i just launched it so over here on our left will be our
inspector view and this will be where we’ll see the object so here’s that menu item and thingamajig so
i’m going to execute that and that gets triggered through the state machine and we’ll add the object
in here so here we go we have spiderman over here my component panel
i have all the properties for this primitive so we have and these are all reflect the
a-frame primitives the default ones again we have a position component a pitch a scale
there’s some font in here you can see here at the bottom font is a primitive as well with these components so what we can do is then we
can start playing with these components and see the object move around
change font color so the colors change there if we want we can add in another
thingamajig a different spider-man
uh we can even change it to morale spidey
so these are again all properties property components that we can update and get reflected right away using
angular and state machine and see everything here
so the next extension of this is you’d want to be able to make these updates and be able to view
these like on your phone year or your device and so
unfortunately this part is hard to show in a in a in this session so what i’m going
to do is i’m just going to paste the link here
i’ll put this in the chat so unfortunately this is only going to work for android phones
but if you go that material url on an android phone what you’ll see is your in your chrome
browser that it’ll come up it’ll show the spider-man uh all you need to do is click on augmented reality but there and then
uh accept this permission check and then what you’ll be able to do is see here is drop spider-man right in
your room and with spider-man in your room you can get up and walk around it’s part of your environment you can’t
interact with it so technically it’s augmented reality um but it kind of shows you the power of
a-frame and angular being able to render this object in in your office room
and i have some links here uh again these are in the slides in the
show notes but um you’ll have links to um the web xr api 3js a-frame and
angular and the code as well which i already put in the chat
and i think that’s the end so open up to any
questions um this is an old show notes um
you could win the uh the star wars lego helmet
um i want to ask questions i’m i’m also trying to i’m playing with my phone to to see it in action um also i put a
bitly in case anyone wanted to get on their phone was having trouble typing that out that is case sensitive but then that will go to the
the link that jeff posted um what a cool talk
oh thank you yeah it’s always kind of a fun one yeah um it’s i i know for me personally um
i feel like ar and vr stuff has always felt very intimidating and inaccessible and like
where do i even start it’s like this is great because i i now know where i could start and i kind of had that
almost like back in in college like sense of excitement of like a new thing to to play with so this was really cool
yeah absolutely it’s very cool because like you know trying to do in 3js can be a pretty difficult because it’s a lot of
code to write but then when a frame came along it just kind of simplified development and so yeah it’s definitely easy to do
awesome um so yeah if anyone has any questions for jeff please either feel free to put them in the chat or if
you want to you can just go ahead and unmute and ask directly there’s a lot of great information there so i’m sure we have a couple questions
and then i i also want to mention like while we’re waiting and see if any questions come in um that i think that some people tend to
use things like foo or bar um in their demos i am some people and i think thingamajig
should be the new standard so um that was really cool
that’s why we’re waiting one other one other cool thing i’ll point out i think with apple had the announcement a couple
weeks back and they had this new feature called object capture which i thought was really cool what it allows you to do is
take several pictures of an object and create a 3d model with that
so the next extension of that is hopefully they’ll have support for some models that web xr can
use and so that’ll make it that much easier because that’s probably one of the difficult things too is okay i want to create this
vr scene or this augmented reality scene where do i get these models from and
there’s libraries online that have these models that you can use but it’d be great that you can create your own
so with that theoretically i could take some pictures of my dog and then yeah drop her if you’re if your
dog will stand still yeah that’s a good that’s a big f
so with regards to a frame i was wondering especially with the model of like spider-man and such if um
kind of like if you wanted to animate them or move them in a semi-realistic way i was wondering if there was some um i’m i’m unfortunately not very
familiar with um animating things so i was wondering if there was some uh fairly straightforward way of adding
like a skeleton framework or something to try and you know um to try and
simulate joints or simulate movement in certain places of the model or i don’t know if my question is
no yeah it does it does make sense yeah so um that’s so a-frame doesn’t handle that
part the building of the models it’s there just to render the models and so that’s where you would have to use
um some 3d modeling software to create the model okay um and that’s what like what i just
mentioned the object capture from apple where that would just simplify that you can just take a picture of something
okay we’ll get your get your model okay awesome thank you
oh i guess one other thing on the on the animation uh so there is a component for animation
and this is the component so this is just really simple animation so releases this is just kind of moving something
uh in in x or y or z or thinking we’ll do some rotation um i think the animation you were
looking for is like maybe something walking or something so that’s a bit beyond what this can do but you know maybe if you had a car
that you want animated this would be an easy way to do that okay cool thank you
other um the spider-man thing was very cool are there any other cool projects that
you’ve done with with ar um or vr that you can tell us about with a-frame
yeah i’m actually this is really just an extension of this view here
sorry this one this is kind of just an extension of something else i’m working on where i want to make it even easier for folks to create
their own scenes so um in effect what i’m kind of building right now is this web-based ide
for being able to create um these scenes using a frame
so right now you just you just see a piece of it that i pulled out of my other project can present to you folks
nice for a second i thought you were going to use the different spider-mans to create
like a an ar version of that spider-man meme with all the spider-man pointing at it that’s a great that’s a
great idea i need to do that because you’re like here’s one and then you popped another one and i was like
um nissan’s asking if a-frame works with react as well or maybe if there’s a react version
there isn’t a react version the a-frame really is just about the tags in the javascript and then you can definitely use that in
react there isn’t anything special about the you know reactor angular the framework that’s used in uh
ultimately it’s just the a-frame tags and then the um the javascript if you want to create
your own custom components
i i think maybe i have a silly question most of the questions thank you so i’m a
ux designer so um i know a little bit of html and css but i know nothing about
this what you’re talking about um so i’m curious when you are developing are you
developing from a design or are you designing on the fly like how does it how does it work
um specifically for the augmented reality and a frame um you can just do it on the fly
uh the way a-frame is set up and i kind of showed you this inspector view
here like you can create an initial scene here and just start experimenting and
dropping stuff in and adding adding these components like for animation or different models or
different shadings um so there’s no like particular design per se but you can definitely create it
on the fly and kind of just see what it looks like move things around
does that answer your question yeah yeah one of my teams is working on a
vr website and um they’re a little bit stuck i think in terms of
like how to do it and like how to work with the developer um so i was just kind of curious
what a ux person’s job would be in a vr project yeah yeah you know and i
think a lot of this area is still very new and the folks are figuring out like what does the ui experience
look like in virtual reality um i thought there was
this example um so you can see here where they’re
just starting to put in some bubbles and i’ve seen ones with menus
yeah i’ve seen one where they have floating menus within the scene itself and so yeah i think right now a lot of
folks are still kind of experimenting kind of trying to figure out what works
jeff do you think that because the the ar has that grid pattern on the
bottom and then there’s like the xyz access that designers could
kind of use that to show like hey let’s place these things here and it should look like this and we’ll place the axis for you in some
sort of like mocked using some i i’m not very familiar with ux stuff like
using some sort of mocking software we’re like all right cool this is how i want the scene to look and then the designers could could take that out yeah yeah definitely
absolutely then you can do already you can already do some of that um again using this inspector view because we did a little bit of that
before where again here’s that triceratops i can click on it and then this is where i can start
moving it around i can come over here and control
rotation where i can rotate it so yeah this is where you can
and you can also add other objects in here as well and start kind of creating your scene and then
once you’re done with that you can actually get the get the code that you’ve created it’s this
this one oh i think it’s this one
one of these buttons here allows you to uh output the final html rendering
html tags
uh these questions always all been great so far uh any does anyone else have any questions
again you can either put it in the chat or feel free to unmute and ask directly
all right awesome um well then thank you so much jeff uh if everyone if anyone
want to get in touch with you after is there any way for them to to to do that
uh yeah slides here at the beginning
[Music] there we go yeah so you can hit me up on
twitter github or uh send me an email at jeff jeffreyfry.com easy to remember
great um i’ll just pause one more time just to see if we have any other questions or comments anything at all
hey meechy this is ari waller how are you oh hey good how are you am i late no i’m just kidding i listened
to it i was on the way back for something i listened to most of the presentation in the car when i what i saw was though i think i
made a mistake on um the slide and there were two different prizes mentioned
and uh the way we do it at the way we do it at jfrog if anyone joined the raffle is i can’t do live drawings for
compliance purposes i actually have to email somebody after some after someone’s randomly selected and make sure they accept the gift
um and then we will of course share with the whole community but we will actually give both prizes
away that were mentioned uh if any star wars fans are out there uh one person has a chance to win
the boba fett uh lego set which i happen to have if you haven’t noticed behind me i have quite a few star wars lego sets
um and uh we will also give away an amazon echo show and just as an added bonus because uh i
really enjoyed listening to the meetup in the car it was really cool just just the especially in the beginning i love the format you have
um i want to anyone that enters will also be contacted via email so we can send you a jfrog t-shirt which we’re really
well known for i wear them every day except when the atlanta hawks are in the playoffs uh which is what they just came back
from uh tonight so but uh anyway with that being said um
anyone can go to that um bitly and so forth but i would love to give everybody a t-shirt um and um would also uh love to get those
prizes out and make that announcement soon thank you so much that’s so cool um i
mean both the prizes alone are awesome but and then the t-shirt thank you so much definitely definitely a pleasure i mean
you know what a job right i mean i get to be again i get to give out t-shirts and and legos
and stuff like that but uh just really uh you know one of the great opportunities i’ve had this year by working with a lot
of different meetups is just seeing the amazing you and organizers across the globe are
really putting in to the especially during the pandemics but thank you for that it really i know it means a lot to everybody
i’m in the community there’s a lot of work and organization involved but uh i know that you and julie just a bunch
of the others that support especially the whole san diego javascript user group just do such an awesome job
thank you we really appreciate that and it’s it’s really nice for the attendees to get something because we also appreciate everyone that’s
it’s still coming out to to the zoo meetups uh you know the zoom fatigue is real and so it’s great to also get a little
something for them thanks sorry and you can see that stash of toys behind him too
that’s why that’s my collection they’re not for sale but uh but many but many have made it to a to a
meet-up raffle for sure that’s great i love it um all right well
then thank you so much i’m going to stop the recording