►
From YouTube: Immersive readers and Azure DevOps - Jozi.js May
Description
Adding an Immersive Reader to your website/app
Rory Preddy (@rorypreddy)
Just a few years ago, the Immersive Reader was a bold idea in a Microsoft Hackathon focused on using the latest science and research around reading while using inclusive design principles to empower people of all abilities. Today, with Microsoft Office, more than 1 billion people every month are using it for free, improving their reading and writing comprehension. But there is more - You can integrate with the Immersive Reader as an Azure Cognitive Service! This means that any app can easily integrate Immersive Reader to make it easier to read text. Join me as we show how easy it is to add Immersive reader to your JavaScript based web app making it exponentially more accessible.
Your JavaScript app in the Cloud
Gergana Young (@gerybbg)
So, you've written this amazing web app. It is really something to be proud of, and you want to show it off to the world. Where do you start, how do you get it off your computer and into the hands of millions of people. Don't worry, I will show you the way.
All you'll need is a little bit of YAML, your favorite browser, and the application you are deploying and you are ready to go. Using Microsoft Azure, GitHub and Azure pipelines we will take an application built entirely in JavaScript and put it in the cloud. We will make sure that this process is fully automated and that every time there is a push to the master branch our application runs through all of the necessary checks and updates automagically.
❓Q&A: https://www.sli.do with event code: 27768
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/270213599/
A
Aj
is
May,
it's,
it
feels
surreal.
It
feels
like
it's
been
the
longest
year
ever
and
I
distinctly
recall,
opening
ice
up
in
January,
with
oopsie
PowerPoint.
Being
weird,
with
this
slide
write
about
how
exciting
and
amazing
and
futuristic
2020
was
going
to
be
little
did
we
know
what
it
would
become.
So,
yes,
it's
been
a
it's
been
a
hell
of
a
ride,
but
we're
all
in
this
together.
So
carrying
on
from
there.
We
we
have
a
code
of
conduct
which.
A
Basically
boils
down
to:
we
want
you
to
nice,
respectful,
constructive
work
together
and
don't
be
spammy
and
I
thought
the
slides
last
minute,
so
this
one
was
supposed
to
be
before
the
code
of
conduct,
but
we
can't
wait
to
have
everybody
in
the
same
room
again
and
having
a
few
drinks
and
talking
about
JavaScript,
really
sharing
experiences
and
learning
the
people
that
are
helping
us
keep.
The
show
together
is
the
amazing
council
of
wizards
which
are
around
here
and
might
chime
in
a
little
bit
later
on.
A
A
A
You
can
always
also
go
to
a
meet
a
page
to
check
it
out
and
if
you
want
to
see
any
of
our
past
recorded
talks,
there's
the
link
or
QR
code
on
the
right
and
we'll
put
these
in
the
comments
as
we
go
and
then
finally,
I'm
going
to
be
manning
the
the
questions
and
answers
and
presenting
those
questions
to
our
speakers.
So
if
you
do
have
any
questions,
please
go
to
that.
Slider
link
register
now
ask
your
questions
and
then
I'll
read
it
to
the
presenters
at
the
end
of
their
their
sections
cool.
B
B
Pretty
and
I've
got
a
nice
little
pin,
which
helps
with
my
ADHD
I
work
for
Microsoft
we're
a
small
start-up
out
of
Seattle,
and
even
if
you've
heard
about
us
and
we
make
productivity
tools,
one
of
them
being
the
immersive
reader
cognitive
services
and
what
I'm
going
to
speak
on
today
is
hardly
incorporated
with
a
JavaScript
application,
and
today
actually
is
the
global
accessibility,
Awareness
Day
or
GAA
D,
which
is
a
fundamental
part
of
the
accessibility,
calendar
and
yeah.
Look
at
that
there's
a
lot
of
people
speaking
and
there's
a
lot
of
information
around
it.
B
So
please
follow
me
on
Twitter
and
let's,
let's
start,
you
can
also
access
all
the
slides,
the
samples
everything
by
this
QR
code
and
what
we're
going
to
talk
about
today.
First
I'm
gonna
go
through
very
briefly:
accessibility
101.
What
is
accessibility,
then
I'm
gonna
go
and
show
you
the
immersive
reader
and
then
I'm
going
to
attempt
to
live
code,
cognitive
services
API
via
and
Active
Directory,
and
also
an
node
Express
application.
And
so
your
wish
me
luck.
B
I
do
have
a
backup,
so
let's
just
see,
if
I
managed
to
get
that
and
then
we
let
deploy
this
also
via
register
your
code
to
our
as
your
app
service.
So,
first,
let's
start
with
accessibility
and
I.
Think
a
big
misconception
about
accessibility
is
that
accessibility
means
disability,
but
disability
doesn't
actually
exist.
So,
let's
cross
that
art,
because
disability
only
exists
when
you
have
a
mismatch:
human
interaction
and
basic.
B
That
means
that
you
will
not
design
land
and
the
designer
didn't
actually
keep
for
you.
When
you
go
to
a
doctor-
and
you
say
to
him,
how
am
I
feeling
well,
he
doesn't
say
to
you:
I
think:
you've
got
disability.
Now
you
can
that
you
feel
disabled
this
when
you
have
a
mismatch:
human
interaction,
so
with
accessibility.
What
you
code
is
that
you
actually
focus
on
how
to
design
your
systems
for
everyone,
not
only
the
small
percentage
of
people
who
are
an
average
abilities,
so
we
cared,
which
is
the
web
center
of
accessibility.
B
Guidelines,
has
four
main
accessibility
principles
which
we'll
go
through.
To
give
you
a
better
understanding
of
accessibility.
The
first
one
is
perceivable.
Can
you
see
it
in
this
case
is
for
people
who
are
visually
impaired
to
color,
blind
or
who
are
normally
not
able
to
access
it
through
size?
Second,
we
have
operable.
Can
you
use
it?
This
cater
for
people
who
have
mobility,
issues,
people
who
have
paraplegia
or
who
have
neurological
or
an
inability
to
actually
use
your
your
application
or
your
website?
B
The
third
one
is
understandable:
can
you
understand
it,
and
this
is
a
very
new
and
addition
to
accessibility?
Can
you
understand
it
because
this
also
includes,
and
from
last
year,
eighty
HD
and
autism
spectrum
and
a
lot
of
the
other
ones
that
don't
necessarily
were
that
weren't
catered
or
previously,
and
the
final
one
is
robust:
it
won't
break
future
technologies.
The
principle
behind
accessibility
is,
if
it's
accessible
now
and
there's
a
new
technology
that
comes
out,
you
must
make
sure
that
it's
still
accessible.
B
So
that's
really
the
simple
idea
behind
accessibility
and
why
it's
such
a
really
hot
topic
right
now
is
because
the
American
federal
government
in
the
EU
made
it
mandatory
for
publicly
civil
fine
to
be
accessible.
Do
you
being
a
lot
more
corporation,
saying
that
we
will
not
be
able
to
publish
science
or
applications
without
making
us
sites
accessible
in
Microsoft,
Microsoft
Azure?
We
have
certain
services
that
cater
for
accessibility
now,
first
need
to
give
a
background
with
as
your
AR.
Now
we
have
your
your
normal
bot
service,
which
is
accelerated
development
for
conversational
AR.
B
Then
we
also
have
the
Azure
machine
learning
caters
for
tensorflow
you're,
passing
notebooks,
and
then
we
have
something
called
cognitive
services.
The
cognitive
services
are
pre
baked
AI
models
that
cater
for
the
majority
of
what
you're
trying
to
achieve
with
your
api-based
driven
and
AI
tooling.
You
can
see
here
we
have
a
Spada
and
that
model
there
that
detects.
This
father
has
already
been
pre
learned
on
Spanish
and
without
cognitive
services.
We
actually
have
a
few
of
them
and
we
break
them
up
into
into
vision,
speech,
language
decision
and
search.
B
Yes,
we
we
still
have
Bing,
you
can
just
bring
it
and
that's
that's
build
things
and
the
one
that
I
want
to
show
you
and
talk
to
you
today
is
one
under
language
called
immersive
reader
in
2015
we
have
a
ability
hack
every
year
and
in
2015
the
wheels
of
the
ability,
hack
actually
created,
something
called
immersive
reader
and
they
said
there.
This
is
great,
but
what
happens?
B
We
could
take
all
of
these
language
and
speech
and
possibly
the
decision
and
some
of
the
vision,
and
it
will
just
service
that
made
and
reading
and
watching
and
listening
accessible
in
a
web
application
or
a
application
that
is
driven
on
your
desktop
and
what
was
born
was
the
immersive
reader.
So
what
does
it
look
like?
Most
of
you
have
actually
used
it
or
have
access
to
it,
because
the
immersive
reader
is
baked
into
all
of
your
office
tools,
how
many
people
use
office
in
the
world
over
a
billion.
B
So
this
with
Microsoft
teens,
you
can
see
there,
you
can
just
click
on
the
clips
and
go
into
immersive
reader
and
suddenly
another
window
opens
up
with
all
these
different
options.
So
you
can
go
into
Word
Excel,
OneNote,
PowerPoint
teams,
all
of
them
have
been
Marissa
and
what
then
immersive
reader
does
it
connects
in
the
back
end
to
your
Azure
cognitive
services
API
and
does
exactly
what
we're
going
to
do.
So
all
we
really
do
is
we're
mimicking
the
office
environment
to
give
you
that
that
same
kind
of
accessible,
look
and
feel
as
office.
B
So
what
can
it
do?
So
one
is
that
you've
got
the
ability
to
show
language.
So
you
can
see
here
we
let
nouns
and
adjectives.
I
went
to
private
school,
so
I
think
that
there's
another
kind
of
noun
is
like
a
pronoun,
also
somewhere
there
and
yeah,
and
you
can
break
it
up
into
different
language
constructs.
You
can
also
translate
it
into
sixty
plus
different
languages,
so
you
can
see
yeah.
B
This
is
in
Spanish,
you
have
pronunciation,
so
you
can
mouse
over
it
and
it'll
connect
to
the
the
actual
text
of
speech
services
and
give
you
and
read
to
you
the
actual
word
you
can
break
that
into
syllables
and
then
finally,
you
also
have
pictures,
which
is
pretty
important.
So
you
can
mouse
over
that.
You
get
a
little
pictogram
there
of
exactly
what
you're
trying
to
to
see
the
pricing
right
now
on
Azure,
because
you
know
it
linked
into
office.
We
don't
actually
charge
for
it.
B
It's
it's
zero
dollars
per
thousand
transactions,
because
I
said
it
isn't
preview.
So
in
preview
and
there's
no,
it's
all
a
link
to
that.
So
if
it
does
have
an
issue,
you
don't
really
have
the
option
to
say
please
fix,
though,
but
right
now
you
can
actually
use
it,
it
isn't
preview
and
it
doesn't
really
cost.
So
how
do
you
create
it?
I've
been
a
small
screen
structure.
You
can
go
into
your
as
your
portal
and
home
cognitive
services
marketplace
and
there's
a
reader.
You
can
see
there
preview
and
then
you
just
create
it.
B
You
can
link
to
your
video
studio,
subscription
I
get
hundred
fifty
dollars
a
month
with
the
visual
Enterprise
$50
for
professional.
You
got
your
location,
use,
yeah
East,
you
virtual
person,
Terri,
remember
its
its
Queen
and
then
you've
got
your
resource
group
and
then
you
can
just
create
it
and
create
something
like
that
which
will
give
you
your
application.
B
And
how
do
you
also
has
it
so
you
go
into
your
Active
Directory
application
and
I'm
simplifying
a
little
bit
yeah
and
you
create
a
an
Active
Directory
application
and
what
we
call
this
ed
on
Azure
is
be
to
sneak
so
business-to-consumer,
because
what
we're
trying
to
do
is
we
trying
to
create
a
token
ours
mechanism
to
connect
your
cognitive
services
that
we
created
in
step
one?
So
you
create
a
draw
Angele
you
to
your
application.
B
You
create,
then
your
IM
with
your
groups
over
here.
You
can
see
how
I've,
given
the
cognitive
services
role
I
mean
your
client
application
in
will
call
for
the
azure
active
directory
in
your
application.
It'll
get
a
token
and
then
you'll
send
it
through
the
token
to
your
and
most
read
application
and
you'll
get
your
and
most
of
reader
application.
All
of
the
results
back
now
most
agree
that
only
works
with
Active
Directory
authentication.
B
So
this
actually
there's
a
scanner
application
inside
is
your
telemetry
on
your
application
and
I
want
to
be
see
exactly
how
long
it
took
and
I
had
the
US
East
here
and
I
connected
to
the
token,
which
is
actually
connect
student
login,
that
windows.net
over
HTTP
takes
about
200
milliseconds,
but
that's
also
because
I'm
doing
a
round
trip
through
to
South
Africa,
and
then
you
get
your
token
and
you
can
actually
call
it
and
you
call
it
also
with
your
keys.
So
this
here
is
my
cognitive
services
that
we
created
in
step.
B
One
and
I
get
my
key,
which
I'm
not
gonna,
really
show
you,
and
then
you
can
point
there
that
you
call
it
with,
and
you
can
actually
get
your
immersive
reader
application,
but
Keep
Calm.
It's
demo
time,
I'm
going
to
show
you
how
to
do
this
from
from
start.
What
we're
gonna
do
here
is
we're
going
to
create
a
node.js
application
and
we're
going
to
connect
it
to
a
pre-existing
comment
to
service
application.
That
I
showed
you
how
to
create
via
the
portal,
because
that
takes
a
little
bit
longer.
B
I,
don't
really
want
to
waste
your
ginger
and
pineapple
beer
time.
So,
when
we've
created
the
cousin
for
services,
we're
going
to
create
a
node.js
web
app
with
expressed
I
am
on
the
belief
that
expresses
the
love
thing
and
we're
gonna
set
up
authentication
and
we
set
it
up
and
we're
going
to
create
our
token
ours
cause
we're
gonna,
add
some
sample
content,
we're
going
to
build
and
run
the
app
we're
going
to
launch
their
massive
reader
in
JavaScript
and
then
finally,
we're
going
to
attempt
to
hosted
on
an
azure
app
service.
B
B
Npm
install
Express
and
I
am
typing
here,
not
actually
running
in
macros
generator.
Slash
jeans,
I've
done
this
before
in
chemical
express,
generate
and
this
way
install
globally
the
expression
generator
that
will
allow
you
to
actually
create
your
based
skeleton
application,
but
I've
done
that
before
so
I'm
gonna
just
use
Express.
B
B
Node
J
s,
so
I've
got
my
Express
and
that's
gonna,
create
in
the
chimp
and
another
folder
they're
called
quick
starts.
That
was
pretty
quick.
That's
that's
a
note
for
you,
and
maybe
even
as
fast
as
Dino
I'm,
not
too
sure.
So,
if
we're
going
to
quick
start,
there,
we've
done
our
application
there
and
what
we
want
to
do
is
we
want
to
really
bold
it
and
we
will
have
modified
a
little
bit
with
our
immersive
reader.
B
B
So
before
we
start
I
want
to
copy
without
anyone
looking
I
want
to
copy
the
keys
that
I
created
in
my
first
cognitive
services
into
my
root
folder,
so
I
put
my
envy
file.
They're,
not
gonna,
show
you
what
it
looks
like,
but
I'm
gonna
go
into
my
Tim
to
folder
that
we
just
created
and
now
I've
got.
My
in
Vienna
can
pull
it
in
there.
B
And
this
will
start
up
and
I
put
all
my
necessary
plugins,
and
you
can
see
that
there's
my
env
file,
my
app
that
Jason
and
the
roots
and
views,
so
we
need
to
actually
tell
it
to
read
into
the
EMP
file.
So
we
want
to
actually
go
into
our
sample
here
and
we
want
to
just
copy
here,
and
you
can
see
the
bit
that
I
want
there
required
in
V
dot,
config
and
that
will
load
in
your
environment
variables
yeah,
so
that
doesn't
have
it.
There.
B
And
now
we
can
loading
the
environment,
variables
and
the
environment
variable
contains
all
your
secret
keys
and
a
reason
to
connect
your
cognitive
services
and
your
Active
Directory
after
that,
I
want
to
actually
go
in
and
create
my
API
remember
we
did
the
request
and
in
my
API
I've
got
the
index
touch
j/s,
which
will
actually
go
and
create
my
API
side,
but
my
index
page
is
and
I
want
to
just
kind
of
use
under
the
routes
there
for
the
the
base
factor.
You
can
see
it's
pretty
simple
there.
B
First
of
all,
I
go
in
and
I
say:
okay
get
the
home
page
and
I
have
a
little
API
called
get
token
and
subdomain,
and
in
the
get
token
and
subdomain
actually
going
to
remember
with
that
application
side,
login
but
windows,
the
net
and
say
I
need
to
get
my
client
credentials
ascendant.
My
keys
and
I
returns
back
a
token
for
me
to
call
my
mouse
reader.
That's
all
we
really
want
to
do,
and
it's
linked
through
to
the
API
get
token
and
subdomain.
We
still
have
now
and
need
to
go
into
our
pages.
B
B
So
in
my
index
that
pug,
it's
pretty
simple
here
and
the
first
thing
you'll
see
here-
is
that
our
import
just
make
a
little
bit
bigger
I
import
here.
The
most
of
Reader
SDK
draw
JavaScript
raga,
so
I
can
actually
call
my
mouse
reader
jQuery
and
then
I
have
some
sample
content
yeah,
but
they
mostly
just
going
to
read
and
I
get
my
token.
B
So
I
get
my
token
in
async
and
it
will
return
my
token
and
then
finally,
I
launch
the
immersive
reader
so
get
to
open
a
get
open
and
and
subdomain
async,
and
this
year
will
actually
call
the
immersive
reader
javascript
file
and
launched
it
in
a
sink.
That's
a
simple
as
you
need
to
actually
do.
Jacks
you
get
a
workings,
make
sure
everything
saved,
save
all
and
I
should
be
able
to
yeah.
Now,
if
I
followed,
all
the
steps
so
I
did
the
FDA
is
index.
J
is
an
excerpt.
B
Pug
I
should
be
able
to
just
run
it
locally.
Now,
NPM
scores.
If
I
hit
localhost,
it
should
actually
create
my
index
and
if
I
hit
localhost
3000
I
should
have
an
immersive
reader.
So
local
host
3000
should
open
up
a
button
and
most
of
reader-
and
you
see
here-
I've
got
my
own
and
most
of
reader
has
all
the
ticks
that
we
have
here
and
all
the
other
languages
and
I
can
get
immersive
reader
and
it'll
connect
to
my
authentication
and
you've
got
your
nice
reader.
It's
as
simple
as
that.
B
You
can
change
the
voice,
actually
there,
a
female
male
voice,
speed,
you
can
go
in
and
you
can
change
the
text
size,
the
font,
the
themes
you
can
show
the
syllables,
the
nouns
the
verbs,
the
adjectives
and
you
can
actually
make
the
the
reading
a
little
bit
better.
You
can
do
the
line,
focus
the
picture
dictionary,
so
you
can
actually
say
reading
and
then
you
can
read
each
individual
words.
The
line
focus
is
very
nice
for
ADHD
and
you
can
also
translate
to
another
language.
Should
we
turn
off
the
points?
Yeah?
B
Yeah,
well,
you
get
the
point.
It
actually
will
translate
it
there
into
as
finish.
So,
that's
really
what
you
need
to
do
now,
the
fun
part.
Now
we've
got
it
in
in
visual
studio.
Let's
employ
this
from
scratch
into
an
application
service
still
have
some
turn
at
ten
minutes.
That
should
be
enough
now
let
the
visual
studio
application
service,
the
as
your
plug-in
there
and
I'm
going
to
log
in
so
this
is
all
from
scratch.
B
C
B
Don't
mean
is
written
in
electron
and
it's
probably
you
know,
consuming
more
electricity
than
escrow
might
not
as
good
as
your
we're
gonna
connect
to
an
app
service.
Nine.
You
can
also
connect
to
functions
and
storage
accounts
and
with
Microsoft
built
today
it
was
announced
that
you
do
get
another
service
here,
which
has
the
plug-in
called
static
websites
which
you
can
connect
to
web
websites
that
when
summer
page
applications
this
is
taking.
C
B
B
We're
going
to
create
a
new
resource
group
here
we
will
call
this
immersive
Reader
rpz,
a
you're
gonna
choose
code
and
a
runtime
stack.
You're
gonna
go
a
node,
we're
gonna,
go
three
point:
one
LTS
I'm
gonna
use
Linux
containers
we're
going
to
keep
it
in
two
central
us.
We're
gonna
keep
the
actual
SKU
as
it's
done.
B
B
Can't
you
let
another
time
come
back
that
come
back
so
now
we
can
actually
do
it
through
yeah
and
I'm
gonna,
just
sir
convinced.
So
once
you
create
that
I've
really
got
one
pre
created
on
your
visual
studio
account
so
I've
really
created
it
there.
You
can
just
right-click,
you
can
go
deploy
to
we're
back
and
I
will
say:
Wow,
okay,
cool
what
folder
you
want
and
we
want
to
just
use
the
root
folder.
So
in
our
Quick
Start
team
there
we
go
I'm
click
start.
B
Would
you
like
to
update
your
workspace
with
your
deployment
preference?
Yes,
we
should
want
to
run
yes
and
it
will
deploy
it
and
then
open
it
up.
If
everything
works
well,
it
will
actually
deploy
it
and
then
it
will
actually
give
you
the
option
to
actually
open
it
up
straight
out
of
the
browser.
So
one
is
that
you
create
your
app
service
and
then
you
can
actually
deploy
it.
So,
let's,
let's
just
in
summary,
a
better
two
minutes.
One
is
you're
going
to
create
your
cognitive
services
in
your
as
your
portal.
B
You're
gonna
create
your
Active
Directory
user.
It's
pretty
simple
to
create
that
Active,
Directory
user,
then
you're
going
to
create
your
quick
start
in
Express
you're
gonna
run
and
build
your
quick
start
to
talk
to
your
total
service
and
your
most
agree,
the
application
and
then
finally
you're
gonna
use.
If
you
want
to
run
it
in
Azure,
you
may
use
for
your
studio.
B
This
is
when
I
created
previously
and
you
can
hit
it
on
the
URL
they're
running
on
node
and
you're,
going
to
get
joint
immersive
reader.
Now
this
is
action
connecting
via
our
tokenize
URL
there,
so
it
should
work
exactly
as
it
did
before.
So
I
must
have
read
an
exact
same
application
that
we
had
there
immersive.
C
C
C
C
Microsoft
learning
cool
says,
did
a
miracle
in
our
lives.
He
could
get
everything
in
the
same
font.
He
was
able
to
lengthen
his
spaces
between
words,
and
that
was
amazing
and
so
simple
she's
been
happier
more
confident.
He
was
living
his
life
where
the
written
word
was
an
enemy,
and
now
it's
thing
to
be
conquered.
B
So
in
conclusion,
we
went
through
a
very
basic
introduction
to
accessibility
and
four
principles.
We
showed
you
how
to
incorporate
and
what
immersive
reader
can
bring
to
your
web
application
and
then,
finally,
also
we
connected
to
a
cognitive
services
API
and
showed
you
that
not
only
can
use
the
immersive
reader,
but
the
same
process
can
actually
use
for
all
of
those
other
thirty
different
cognitive
services,
api's
incorporating
into
your
application
for
more
information
for
the
slides.
B
A
B
A
B
A
B
So
each
cognitive
services
is
charged
differently.
So
if
we
go
into
the
passing
for
Ezzor,
so
remember
this
isn't
preview,
so
they're
not
actually
charging
you.
So
we
can
go
cog.
You
have
to
share
my
screen.
Sorry,
let
me
share
my
screen
quickly,
for
you
share
screen
screen,
oh
cool,
and
if
you
go
into
the
cognitive
services
pricing,
let's
go
you've
been
head
of
care.
B
B
That's
a
good
question:
I'm,
assuming
that
a
pig
fault
stands
for
the
Express
template,
so
this
is
the
an
expression
generator.
So
we
used
npm
generators
and
we
use
the
quick
start
for
express.
So
if
I
use
google
map
found
out,
but
is
it's
basically
your
templates,
so
it
excludes
any
of
the
standard
markup
that
you
would
have
on
your
and
HTML
mark.
Could
you
tell
me
the
real
name?
B
A
B
Friends
use,
I
think,
the
industry,
if
you're
an
expert,
great
use
communities,
but
our
preference
at
in
at
Microsoft
is
open
shipped.
So
if
you
know
what
you're
doing-
and
you
really
want
to
go
down
that
rabbit,
hole,
use
communities,
but
we've
just
relaunched
a
general
availability
of
open
shipped
on
Azure,
and
it
has
built
in
path
lines
that
has
poking
around
ourselves.
A
B
A
B
So
no
so
if
you
remember
that
the
most
a
breeder
here
and
it's
basically
a
pre-baked
model,
and
so
if
you
wanted
to
do
that
thing,
you
use
the
speech
text
services
in
the
other
cognitive
services.
So
this
is
kind
of
an
opinionated
view
of
what
there
unmeasured
you
about.
Custom
would
want
to
use
the
font,
their
choices
there.
Colibri
has
2k
and
comics,
and
so
maybe
out
of
preview.
There
will
be
additional
funds.
B
A
A
B
And
carrot
so
one
of
the
talks
that
I
did
accessibility
work
for
all
the
same
person
came
up
and
what
I
show
is
that
there's
two
ways
to
approach
this
one
is
like
what
happened
with
gdpr,
where
everyone
was
supposed
to
actually
take
care
of
people's
data
and
then
judy
puri.
You
came
in
and
suddenly
now
the
whole
web
is
just
pop-ups
everywhere.
B
You
saw
how
long
it
took
for
gdpr,
but
it'll
come
down
to
a
snob,
so
the
carrot,
the
carrot
part,
is
that
you
get
access
to
more
people
who
can
use
your
tools.
Well,
we
showed
you
with
the
most
agree.
Then
it's
and
that
video
was
actually
showing
for
children
learning,
but
what
we're
not
showing
you
is
the
solar
generation,
the
generation
that
is
there
Asaf
is
actually
fading
and
you
can
actually
cater
for
the
elderly.
A
C
Hello,
let
me
just
share
my
screen.
You
sure
she
ate
the
right
thing.
Okay,
move
this
thing:
the
zoom
talking
thing
is
hard:
okay,
I
can
still
see
everybody
and
I'm
sharing
my
screen
great.
Let's
start,
then:
oh
hey
everybody!
Thank
you
for
joining
us
today.
I
hope
you
enjoyed
Rory
stock
and
he
talked
about
a
few
of
the
things
I'm
going
to
talk
about,
but
I
hope
that
you
don't
get
too
bored
anyway.
I'm
gonna
be
talking
about
Azure
as
well,
and
getting
your
JavaScript
app
onto
Asia.
C
That
did
not
work
all
right.
But
before
that,
let
me
introduce
myself.
My
name
is
Gary
Ghana,
but
I
usually
go
by
Jerry,
because
that's
a
little
bit
easier
to
pronounce
and
my
Twitter
handle
and
website
on
the
screen
over
there.
If
you
want
to
get
a
hold
of
me,
I
work
for
a
company
called
Korah
I'm,
a
Cove
and
I
serve
Jersey,
Jays
and
I'm.
C
Sorry,
my
friends
ringing
I
took
a
lot
about
robots.
That's
because
that's
where
everything
started
with
me:
programming,
a
robot
with
JavaScript
a
store
was
joined
and
there
has
been
other
things,
such
as
wine
buttons
and
lightsabers
garage
door
motors
and
other
many
robots
and
things
that
I
have
built.
Unfortunately,
this
talk
does
not
involve
any
things.
There
are
no
robots.
This
may,
in
fact
be
the
most
serious
talk.
I
have
ever
done,
but
don't
worry,
they're
still
going
to
be
JavaScript
Mike
is
busy
laughing
at
me
as
you
as
JavaScript
developers.
C
All
right
there
we
go
as
JavaScript
developers.
We
always
stop
and
get
to
a
point
where
everyone
aboard
our
own
website,
because
we
want
to
try
out
things
that
we
don't
normally
get
to
do
in
our
day-to-day
and
that's
really
cool
and
it's
fun.
But
then
we
get
to
a
point
where
we
need
to
get
our
website
somewhere
public,
so
other
people
can
see
it
and
that's
usually:
okay,
if
we're
doing
something
like
a
static
website
or
a
single
page
app.
C
All
of
the
different
cloud
providers
have
many
tutorials
on
these
things
and
let's
not
simplify
it.
It's
not
simple,
but
it
is
possible.
There's
a
way
to
do
it.
But
what?
If
we
get
to
a
website
where
we
have
some
logic
or
data
that
we
need
to
use
or
something
that
we
need
to
do
with
some
sort
of
server,
then
it
becomes
more
difficult.
Then
we
start
hearing
that
famous
buzzword,
DevOps
and.
C
Devops
in
another
word,
which
I
just
learned
recently
from
Ori
dev
say
cops,
is
one
of
the
biggest
buzz
words
of
our
time,
and
what
does
it
even
mean
right,
and
this
is
the
definition
from
Wikipedia
I
will
give
you
a
second
read
now
reading
that
that's
the
formal
definition
from
Wikipedia
I
feel
like
this
wait.
What
what's
going
on
like
I,
still
don't
understand
what
you
mean
by
their
verbs
right
and
that's
a
little
bit
of
a
problem,
but
what
I've
found
is
that
the
verbs
means
different
things
to
different
people.
C
So
for
people
like
you
who
wants
to
just
deploy
your
simple
website,
it
might
not
actually
be
necessary
to
understand
what
the
verbs
really
means.
So
today
we're
going
to
simplify
their
lives.
We're
gonna
make
it
easy
by
using
Azure
as
our
client
provider
to
host
our
app
and
your
pipelines
to
build
everything
and
get
up
to
hold
that
code.
C
Okay,
create,
let's
hope
this
is
more
successful.
Temper
is
attempted
okay,
we're
going
to
call
this
joy
zjs,
because
this
is
gonna,
be
the
joy
zjs
website.
No
wait!
That's
the
resource
group
resource
group
chose
ejs
we're
going
to
be
deploying
code.
Our
runtime
stack
is
going
to
be
no
212
latest
version.
The
heads
this
is
available
on
Azure
and
we're
going
to
be
deploying
to
South
Africa
because
we
went
outside
to
be
a
little
bit
faster.
C
I'm
gonna
create
a
new
app
service,
called
Georgie,
J's,
Demma
and,
of
course,
because
we're
cheap,
we're
gonna
choose
the
cheapest
available.
Why
is
the
free
one
not
well
at
Bo
here
Rory?
You
can
answer
that
later
reviewing
create
okay,
we
can
skip
all
the
other
steps
that
the
steps
aren't
important.
We
can
just
review
that
everything
here
looks
okay
and
hit
the
create
button.
C
Now
this
is
going
to
take
a
little
while
so
we're
gonna
go
back
to
the
slides,
in
the
mean
time
now,
while
that
web
app
is
busy
creating
that's
where
we're
going
to
deploy
our
website
to
we're
going
to
move
on
to
how
we're
actually
going
to
build
and
deploy
a
website.
Now,
this
part
is
where
a
lot
of
different
opinions
come
in
and
clash,
because
building
continuous
integration
and
continuous
development
pipelines
has
been
a
highly
contested
point
over
the
years.
C
Many
people
have
many
different
opinions
and
usually
again
with
this
kind
of
thing,
you
have
to
find
what
works
for
your
team,
so
one
thing
I
found
that
worked
for
my
team's
pretty
previously
is
that
we
have
a
way
that
gives
the
developers
ownership
of
what
is
being
deployed.
In
other
words,
when
you
deploy
code,
you
know
that
that
code
has
the
potential
to
get
into
production
and
therefore
break
things.
C
Then
having
a
pull
request
model
usually
works
quite
well.
If
you
have
a
second
pair
of
eyes
to
look
at
your
code
to
make
sure
that
you
haven't
made
any
silly
mistakes
or
anything
like
that,
that
usually
helps
and
because
none
of
us
are
perfect,
there's
always
a
point
in
time
when
something
goes
terribly
wrong.
C
It's
good
to
have
a
rollback
strategy
just
in
case,
so
we're
going
to
use
as
your
pipelines
to
build
our
code
and
release
it
to
production,
as
your
pipelines
is
a
cloud
service
provided
by
agile,
and
it
allows
us
to
do
these
things.
It's
free
to
a
point.
Again,
you
have
to
ask
Rory
up
to
what
point
it's
free
and
we
start
by
creating
an
azure
wmo
file.
So,
let's
go
do
that
if
you
go
to
dev
comm
and
sign
in
with
a
Microsoft
account,
you'll
be
able
to
create
a
new
project.
C
Let's
call
our
project
chose
EJ's
demo
and
make
it
public
link.
Now
in
this
project,
this
is
Azure
DevOps.
You
can
do
a
lot
of
other
things.
Besides
the
things
we're
going
to
be
doing,
you
can
have
things
like
boards
so
like
where
you
can
control
what
your
team
is
doing
and
things
like
that
you
can
host
your
own
repos
inside
here
as
well.
C
There
is
a
bunch
of
different
templates
configured
here.
So
if
you're,
using
something
specific
like
northern
view,
react,
then
you
can
use
one
of
these
templates
now.
I
just
have
a
plain
node
app,
but
I
want
to
show
you
how
to
do
it
from
scratch.
So
I'm
going
to
click
on
this
start
pipeline
over
here
and
I'm,
going
to
delete
all
over
the
comments.
C
Now
the
first
thing
is
our
trigger:
this
trigger
is
when
this
pipeline
is
going
to
run.
So
when
we
commit
into
our
master
branch
on
the
skin,
it
gets
AB
repo
that
we're
connected
to
we're
going
to
run
this
pipeline.
Here
you
can
also
make
it
run
on
specific
pull
requests
or
for
specific
releases
or
whatever
it
may
be.
The
next
thing
is
the
pool.
So
where
is
this
code
going
to
run
so
where's
this
this
pipeline
will
interact
in
our
case,
if
you
remember
correctly,
we
chose
Ubuntu
when
we
created
our
web
app.
C
C
The
act
at
the
back
specifies
which
version
of
the
starsk
we
want
to
use.
Usually
you
can
you
know
you
should
try
using
the
latest
version.
Our
task
needs
to
have
some
inputs
and
the
input
for
our
node
to
are
what
version
of
node
we
want
to
install,
and
we
want
to
install
version.
12
and
it's
also
good,
to
give
all
of
your
steps
a
display
name
that
way
when
your
plant
line
is
running,
you
would
know
exactly
what
is
actually
having
happening.
C
C
C
C
C
C
C
C
So
if
we
go
while
this
is
creating
over
here
and
say
get
pool,
we
should
get
that
far
and
our
job
has
been
queued,
so
our
job
should
start
running
soon,
starting
there
we
go
and
it
will
start
by
checking
out.
So
you
see,
this
is
a
task
that
we
didn't
actually
define,
but
because
we've
linked
it
to
our
github
repo.
It
knows
that
it
needs
to
check
out
the
master
branch
of
that
github
repo.
C
It
will
install
the
dependencies
which
may
take
forever
because
we
know
npm
downloads,
the
entire
internet
and
our
job
has
failed
our
unit
tests.
Oh
no,
if
we
click
on
here,
we
can
see
exactly
what
has
happened.
Oh
we
expect
false
to
be
true,
see.
That
must
be
why
it's
failing.
So,
let's
go
check
our
notice.
C
If
we
take
a
look
at
our
packaged
or
JSON,
we
have
a
test
come
on,
that's
busy
running
and
it's
just
using
just
to
run
all
of
the
files
inside
the
test.
Folder
there's
only
one
file
and
only
one
test.
I
know
this
isn't
a
very
good
test.
I
just
put
it
in
here
for
the
purposes
of
showing
you
how
to
run
your
tests.
So,
let's
fix
our
test,
fix
our
test.
It's
going
to
here
and
push
it.
C
C
Once
this
is
pushed
into
our
github
repo
in
our
pipelines,
we'll
get
a
new
job
that
will
start
and
it
will
start
building
and
it
should
go
through
all
of
the
steps
successfully.
This
time,
it's
just
refresh
to
make
sure
that
it
has
started.
Okay,
it's
busy
starting
so
I'm,
going
to
leave
this
to
run
because
it
takes
a
little
bit
of
time
and
go
back
to
the
slides.
Now
the
tasks
I
showed
you
were
quite
simple.
C
C
Current
installations,
you
would
use
something
called
a
strategy.
You
would
name
all
of
the
different
things
that
you
want
to
run
on
and
then,
by
using
variables
you
can
run
on
all
three
of
those,
so
you
can
run
on
Mac.
You
can
run
on
Windows,
whatever
you
may
want
to
run
on.
Another
really
cool
thing
is
something
called
stages.
C
So
we
saw
some
of
the
utility
tasks
like
copying
files
and
publishing,
but
there's
also
bull
tasks
so
for
the
many
different
languages
and
platforms,
there's
a
whole
range
of
different
boat
tasks.
You
can
use
there's
also
some
tools
and
testing
tasks,
this
packaging
and
deploy
tasks
for
again
different
platforms
and
deployments
and
all
kinds
of
different
things.
You
can
also
create
your
own
tasks.
C
I
haven't
attempted
this
yet
so
I
can't
really
tell
you
how
easy
or
the
difficult
it
is,
but
it's
an
option
if
you
can't
find
the
things
that
you
need,
then,
let's
first
before
we
get
to
our
last
demo,
check
with
our
pipeline
is
running
okay,
so
it
is
on
the
publish
step.
This
step
takes
a
little
bit
of
time
because
it
has
to
publish
all
of
the
node
modules
we've
downloaded
and,
as
we
all
know,
an
NPM
downloads,
the
entire
Internet,
so
for
our
third
and
final
demo
step.
C
What
we're
going
to
do
is
release
this
pipeline
to
our
app
that
we
created
from
at
first.
There
are
two
ways
to
do
this.
The
first
way
is
by
using
those
stages
that
I
just
showed
you
inside
the
same
pipeline
car,
and
it
will
as
same
in
the
same
process,
but
because
I've
already
shown
you
that
I'm
going
to
show
you
a
different
way.
Whoops,
look
at
that
slide,
alright,
so
the
other
way
of
doing
this
is
by
using
the
release
pipeline.
It's
a
little
bit
different
this
one.
C
You
configure
everything
inside
here,
not
inside
yeah.
No,
you
can
still
download
the
mo
fo
as
well,
but
this
here
mo
found
does
not
get
saved
in
your
repo.
It
gets
saved
in
this
project
inside
azure,
dev
ops,
so
we're
gonna
hit
new
pipeline
over
here,
and
it
has
a
really
nice
UI
kind
of
easier
to
follow.
C
There's
a
whole
range
again
of
different
templates
and
things
you
can
use
to
down
to
deploy
this
we're
going
to
do
an
is
your
app
service
deployment,
we're
going
to
call
this
LOI
jjs
and
we're
going
to
link
it
to
an
artifact?
So
what
are
we
actually
deployed?
Well,
we're
deploying
the
result
of
this.
C
It
currently
has
no
artifacts
because
the
board
hasn't
finished
yet,
but
that's
okay,
but
I'm,
hoping
that
by
the
time
we
finish
this,
that
their
artifacts
will
be
there
all
right.
So
we've
added
the
artifact
everyone's
laughing
at
me.
You
can't
see
them
and
what
we're
doing
right
now
is
enabling
continued
a
continuous
deployment
trigger
this
way.
Every
time
there
is
a
new
artifact
that
has
been
bought
by
the
boat
pipeline,
this
trigger
and
release
a
new
version.
C
C
C
Once
it's
signed
in
successfully
it's
going
to
both
rise
now
important
thing
we
need
to
change
in
here
is
that
this
is
a
way
back
online
exit.
Remember
we
did
the
whole
change
to
line
X
input
to
end
who
this
is
authorized,
so
observers
names
should
actually
be
there.
It's
the
one
we
created
earlier.
It
was
called
Joe
zjs
and
the
startup
come
on
we're
going
to
leave
blank
I'm
going
to
explain
to
you
why
we're
leaving
this
blank
in
a
moment.
C
Let's
go
to
our
actual
thing
that
we're
running
so
what
we're
doing
is
deploying
to
an
azure
app
service.
You
can
change
this
name
to
make
more
sense
to
you,
but,
as
we
all
know,
naming
things
is
hard,
so
everything
else
we
leave
as
is,
except
for
these
lost
stupids,
the
runtime
stack
needs
to
be
known,
twelve
and
what
folder
were
actually
deploying.
C
C
And
release
one
has
been
created,
so
this
also
takes
a
couple
of
minutes,
so
wow
it's
busy
deploy.
I
would
like
to
show
you
some
more
of
the
code.
So
I've
shown
you
the
tests,
but
the
other
thing
that
I
want
to
show
you
is
these
two
commands?
So
if
you
remember,
we
left
the
start
command
black,
because
by
default
the
command
that
runs
is
NPM
start.
So
whatever
goes
into
this
command
is
the
command
that
will
run
in
production,
so
I.
That's
why
I
have
a
debug
command
over
here.
C
C
If
you
want
to
run
on
another
port,
then
you
have
to
change
it
inside
your
app
service,
so
our
app
service
is
being
created
here
and
what
you
have
to
do,
if
you
want
to
add
another
port,
is
go
to
the
configuration
and
in
here
had
an
app's
up
setting
for
a
whatever.
Are
the
port
you
want
to
run
this
on
so,
if
you're
an
imported
Katy,
you
don't
need
to
do
that,
which
is
pretty
cool.
That's
why
I,
usually
just
set
it
to
8080.
C
Just
makes
my
life
easier,
cool
and
then
our
actual
app
I
haven't
shown
you.
But
that
looks
like
it's
a
very
simple
app.
It's
got
expressed
it's
serving
the
public
folders
that
static,
and
it
has
one
endpoint
which
gets
the
Wizards
and
inside
our
public
folder.
We
have
HTML
file
an
index
file
which
cause
that
was
its
endpoint,
some
CSS
and
a
few
images.
If
I
show
you
what
this
looks
like
locally.
C
Good
look
over
3,000.
This
is
what
our
website
looks
locally
cool,
all
right,
let's
see
if
this
deployment
is
that
it
is
not
done.
Oh
well,
that
sucks.
What
we'll
do
in
the
meantime
is
I
want
to
show
you
how
easy
it
is
to
now
make
changes
now
that
we
have
these
pipelines
in
in
there.
All
we
have
to
do
is
make
a
small
change
and
a
follow
us.
C
C
C
You
can
you
can
do
that
so
if
I
wanted
to
make
changes,
it's
it's
in
here
now,
if
I
just
wanted
to
make
changes
in
here.
That's
also,
that's
also
fine
as
well.
If
I
push
it,
it
will
apply
those
changes,
so
so
usually
yeah
a
lot
of
the
time.
The
first
time
you
create
your
am
of
power
that
the
port,
but
the
boat,
doesn't
actually
work
or
something
got
mixed
up
along
the
way.
So
you
end
up
editing
it,
and
it's
also
easier
to
edit
it
in
Visual
Studio
code
that.
A
C
B
So
the
actual
worker,
the
that
runs
locally-
you
can
run
it
as
an
agent
on
your
local
theater
deeper.
You
could
run
the
entire
DevOps
tool
chain
offline
locally
on
your
PC
and
have
an
agent
running
there.
You'd
have
to
mimic
the
operating
system
and
some
of
the
environmental
concerns.
But,
yes,
you
could
actually
run
it
all
locally.
A
lot
of
a
lot
of
people,
a
lot
of
people
actually
provisioning
old
servers
to
run
their
agent
locally
and
rather
than
actually
run
it
in
the
cloud,
do
two
combines
issues
or
guarantee
it's.
C
A
C
What
what's
interesting
is
when
you
edit
your
release,
path
pipeline.
It
does
ask
you
for
commit
messages
as
well.
So
there
are,
it
does
keep
versions,
but
it's
all
inside
inside
as
your
DevOps.
So
it's
just
not
inside
your
repo,
so
you
can
see
like
history
and
stuff
you
can
see
when
you've
edited
your
pipelines.