►
Description
If you can build a website, you can build a desktop app. Electron is a framework for creating native Desktop applications with web technologies like JavaScript, HTML, and CSS. In this session, hosted by Zeke Sikelianos, an Electron Developer at GitHub, we'll look at some of the amazing things you can create using features and tools Electron inherits from the Chromium browser, Node.js, and the vast ecosystem of npm modules.
About GitHub Universe:
GitHub Universe is a two-day conference dedicated to the creativity and curiosity of the largest software community in the world. Sessions cover topics from team culture to open source software across industries and technologies.
For more information on GitHub Universe, check the website:
https://githubuniverse.com
A
A
A
A
A
Wait
for
it,
okay,
so
in
1994
the
netscape
browser
was
created
and
it
was
the
first
browser
to
ever
the
first
environment
in
which
the
javascript
language
could
run
and
create.
The
the
first
version
in
netscape
didn't
actually
have
a
support
for
javascript
at
all.
So
it's
just
kind
of
a
hypertext
environment
with
version
2.0
which
came
out
in
1995.
A
It
was
the
the
very
first
javascript
environment,
so
javascript
was
created
to
enable
web
pages
to
behave
dynamically
to
actually
respond
to
user
input
and
change.
The
contents
of
the
page
or
prevent
users
from
taking
certain
actions
prior
to
this
web
browsers
were
really
just
sort
of
dumb
windows
that
represented
content,
and
that
was
the
responsibility
of
a
server
to
produce
that
content
and
render
it
in
a
browser.
So
this
was
the
very
beginning
of
sort
of
interactivity
and
dynamic,
behaviors
and
browsers,
so
Netscape
grew
really
quickly
and
eventually
had
80%
share
of
the
market.
A
A
So
this
was
the
the
beginning
of
the
so-called
browser
Wars.
This
was
the
very
first
browser
war
between
Netscape
and
Internet
Explorer
and
even
though
Netscape
had
a
lot
more
public
goodwill
than
Internet
Explorer
at
the
time,
Windows
and
Microsoft
were
this.
You
know
there
was
this
model,
I,
think
enterprise,
and
so
they
threw
a
lot
of
money
at
the
effort
and
so
Windows
at
the
time
had.
Ninety
percent
chair
of
the
desktop
operating
system
market,
which
is
huge
and
eventually
ie,
overtook,
Netscape
and
in
1998
Netscape,
was
acquired
by
AOL.
A
A
Remember
my
dad
reading
a
story
in
the
newspaper
about
Bill
Gates
and
how
his
net
worth
was
eleven
billion
dollars.
I,
don't
remember
when
this
was
but
probably
sometime
around
ninety
eight
or
something
like
that,
and
we
calculated
that
if
he
had
assuming
that
was
all
cash
and
he
had
a
savings
account
at
1%
interest.
It
would
generate
300
million
dollars
a
day
in
an
interest.
So
you
can
imagine
why.
A
Even
though
Netscape
had
the
best
intentions
and
was
by
many
accounts
superior
browser,
they
couldn't
compete
with
it
with
Internet,
Explorer
and
Microsoft,
but
they
did
this
really
awesome
thing
just
before
they
were
acquired
by
AOL.
They
open
sourced
all
the
technology
used
to
create
that
scape
navigator
and
they
started
the
Mozilla
organization
in
1998.
So
I
came
only
speculating
here,
but
I
I
assume
that
they
knew
that
by
being
acquired
by
AOL
had
essentially
spelled
the
death
of
Netscape
and
that
the
product
would
probably
not
continue
to
flourish
in
that
space.
A
So
in
the
year,
2000
also
known
as
y2k,
the
Firefox
browser
came
out
1.0,
and
this
was
like
a
really
refreshing
experience
right,
like
most
people
using
the
Internet
at
this
time
were
on
Windows
and
they
were
using
Internet
Explorer,
6
and
Microsoft
had
created
its
own
alternative
to
JavaScript
called
jscript.
So
it
was
sort
of
this
divide
where,
if
you
were
a
webpage
designer,
you
were
either
making
your
web
pages
compatible
with
Internet
Explorer.
A
You
were
making
them
compatible
with
Netscape,
and
so
when
Firefox
came
into
the
space,
it
was
finally
a
open,
flexible,
extensible
browser
built
by
people
that
could
compete
with
within
and
explore
in
terms
of
like
performance
and
the
graphical
user
interface
and
the
flexibility.
And,
of
course
it
supported
it's.
Basically,
the
next
generation
of
the
Netscape
Navigator
browser,
so
in
2009.
A
The
SpiderMonkey
javascript
compiler
was
added
to
firefox,
and
this
was
a
version
3.5
of
firefox.
So,
prior
to
to
this,
all
javascript
and
web
browsers
was
interpreted
at
runtime
and
it
was
a
pretty
slow.
So
if
you
imagine
a
lot
of
things
that
you
do
on
web
browsers
today,
where
you
can
dynamically
with
JavaScript
like
with
react,
for
example,
you
can
manipulate
the
contents
of
the
entire
page
and
create
a
bunch
of
elements
and
remove
a
bunch
developments
and
move
them
around
at
this
time.
A
If
you
had
ten
elements
on
the
page
and
you
wanted
to
to
rerender
them
or
change
their
content,
you
would
bring
your
computer
to
a
crawl.
The
JavaScript
performance
in
browsers
was
devastatingly.
Slow
could
only
do
really
basic
things
like
for
invalidation,
but
when
SpiderMonkey
came
along
all
of
a
sudden,
the
JavaScript
performance
was
depending
on
how
you
count
like
20
to
40
times
faster.
So
this
was
the
first
just-in-time
compiler
that
ever
for
JavaScript
that
ever
existed,
and
shortly
after
that
chrome
came
into
being
from
Google.
A
If
you
all
remember
how
this
logo
looked
so
when
this,
when
they
change,
when
chrome,
changed
the
logo
from
this
to
the
flat
thing
that
it
is
now,
I
was
really
mad
and
I
was
like
I'm
never
going
to
like
this
is
so
ugly,
but
now
I
see
this,
and
this
looks
really
ugly
to
me.
So
I
think
we
all
just
need
a
little
bit
of
time
to
adjust.
I
guess
so.
A
Chrome
saw
the
value
of
the
browser
and
got
in
the
game.
This
was
in
2008.
Chrome,
obviously
is
really
popular.
Now
has
60
62%
world
wide
usage
on
desktop
and
50%
market
share
on
across
all
platforms,
including
mobile?
So
it's
definitely
the
dominant
browser
of
today
chrome
has
a
open
source
basis
called
chromium.
A
A
At
this
time
talking
around
2009,
if
you
were
a
JavaScript
developer
or
if
you
were
a
web
developer,
you're
kind
of
like
in
this
isolated
space,
where
you
could
really
only
make
webpages
and
you
couldn't
really
do
a
lot
to
to
make
them
interactive
or
you
couldn't
really
create
an
entire
web
application.
So
on
the
left
here
you
see
JavaScript
on
the
right.
You
see
all
these
other
languages
and
the
languages
on
the
right
are
the
ones
that
were
used
to
create
to
create
servers
to
create
web
applications.
A
So
typically,
this
would
be
two
different
teams
or
two
different
people
working
on
these
working
on
these
web
applications.
So
you'd
have
the
person
who
knows
JavaScript,
who
is
building
the
web,
the
the
actual
web
page
and
putting
together
Dom
elements
and
things
like
that
doing
some
of
the
design
work.
And
then
you
have
these
other
people
who
are
making
the
servers,
and
so
there's
this
kind
of
like
there
was
this
human
bottleneck
right
where
an
individual
was
not
necessarily
empowered
to
create
a
cohesive,
applicate
web
application
or
just
any
kind
of
app
experience.
A
So
it's
kind
of
kind
of
a
sad
time,
I
mean.
Obviously
people
are
adaptive
and
you
could
of
course,
learn
JavaScript
and
one
of
these
other
languages
as
well,
but
it
meant
learning
an
entirely
new
language
and
use
a
new
ecosystem,
a
new
set
of
tools
and
everything
that
goes
along
with
that.
So
it
was
no
small
feat
to
become
a
full
stack
developer
at
this
time.
You
have
to
learn
a
lot
of
different
technologies,
so
this
is
where
everything
gets
crazy.
A
So
when
nodejs
was
created,
it
was
just
a
way
to
run
javascript
and
do
lots
of
different
things
with
a
computer
like
using
the
filesystem
module
for
accessing
all
the
files
on
a
user's
computer
or
using
the
the
net
module
to
create
a
web
server
or
the
HTTP
module
to
just
make
hypertext
requests
or
the
process
module
to
access
the
environment
variables
on
a
computer.
So
all
these
new
sort
of
tools
and
frameworks
and
ideas
started
popping
up.
One
nodejs
came
out,
so
javascript
was
no
longer
shackled
to
this
sort
of
underpowered
browser
environment.
A
A
A
A
A
They
are
all
something
that
you
necessarily
will
need
to
use,
but
it
gives
you
a
sense
of
how
rapidly
the
ecosystem
is
growing
and
I.
Think
one
of
the
big
reasons
for
this
was
the
simplicity
around
the
design
of
NPM.
So
you
have
this
file
called
package
JSON
and
a
package
dot
JSON
file.
Unlike
a
lot
of
other
programming
languages,
is
this
convention?
It's
this!
A
It's
this
file,
where
you
basically
describe
all
the
sort
of
fundamental
aspects
of
your
module:
your
application,
your
library,
whatever
your
project,
whatever
you're
calling
it,
you
name
the
description,
the
repository
the
list
of
dependencies
development
dependencies
things
like
that.
So
when
you're
working
on
a
when
you're
working
on
a
JavaScript
project,
nowadays
you
just
have
this
canonical
place.
You
can
go
in
a
project
to
see
like
how
does
this
thing
work?
What's
the
gist
of
it?
What
does
it
depend
on?
A
What
version
of
know
does
it
need
so
creating
packages
in
NPM
is
really
is
really
easy.
You
create
a
package
of
JSON
and
you
use
this
NPM
thing
to
just
type
NPM,
publish
and
all
of
a
sudden.
Your
packages
is
in
the
registry,
so
the
barrier
to
entry
is
really
low
and
there's
there's
a
lot
of
different
things
about
NPM
that
we
could
talk
about,
but
the
gist.
Is
it
lowered
the
barrier
to
entry
for
JavaScript
and
made
it
really
easy
for
people
to
share
and
distribute
code?
A
A
Note
school
dot
IO
is
a
great
place
to
to
go
to
learn
about
node
in
general
and
how
to
get
started
with
it
there.
All
these
note
school
chapters
around
the
world
that
teach
people
how
to
use
node
I
know
I
still
haven't
mentioned
electron,
so
you
guys
are
probably
like
what
what's
the
deal,
but
this
is
really
I
mean
this
is
really
sort
of
fundamental
to
what
electron
is
like
knowing
how
to
use
electron.
A
You
need
to
know
how
to
use
node
and
you
need
to
know
about
NPM,
because
they
are
essential
to
what
electron
is
so
just
kind
of
a
high-level
view
of
what
we
just
talked
about.
This
is
sort
of
a
30
year
span
of
the
the
development
of
the
web
in
the
development
of
JavaScript.
So
this
space
between
node
and
electron,
in
my
mind,
is
really
the
most
exciting
time,
because
it's
when
JavaScript
moved
out
of
the
browser
and
had
a
chance
to
flourish
and
be
used
for
all
these
other
things
like
command-line
interfaces
and
servers.
A
A
So
what
is
an
electron?
This
is
the
blurb
that
you
see
on
the
website
and
I'm
sure
everybody
has
already
heard
this
before,
but
it's
exciting
right,
like
you've,
never
been
able
to
do
this
before
you
never
been
able
to
make
native
apps
on
a
desktop
with
open
web
technologies.
If
you
wanted
to
be
become
a
Mac
developer,
you
had
to
learn
objective-c
or
Swift,
and
you
have
to
use
Xcode
and
you
have
to
there's
a
lot
of.
A
A
So
at
its
essence,
this
is
what
electron
is
it's
a
mixture
of
chromium
and
node.
So
it's
a
web
browser.
It's
like
node
had
all
this
time
to
to
fork
off
the
browser
and
flourish
and
the
the
community
developed
and
350,000
packages
were
published
and
billions
of
downloads
every.
However,
so
up
and
now
note
comes
back
into
the
browser,
that's
that's
what
electron
is
so
this
isn't
a
really
happy
time
like
we're
living
in
the
Golden
Age
of
JavaScript
right
yeah.
A
A
A
It's
a
it's
an
app
that
was
made
by
the
electron
team,
my
partner-in-crime
Jay
Lord
in
particular,
Jessica
Lord
created
it
and
it
walks
through
some
of
the
sort
of
core
fundamental
api's
of
electron,
how
to
use
them.
This
is
the
Windows
Store,
which
can
also
release
too
so
Windows.
Has
this
thing
with
Windows
10
I
think
we
started
actually
with
Windows
8,
but
Windows
10
has
this
thing
called
the
universal
Windows
platform,
and
this
is
sort
of
still
coming
together
in
the
electron
space.
A
So
it's
not
totally
like
a
turnkey
thing
right
now,
but
the
gist
of
it
is
that
you
can
develop
apps
for
the
universal
Windows
platform
and
you're.
Just
writing
one
code
base
and
it
can
it's
a
single
app
package
that
can
run
on
PCs
tablets,
phones,
Xboxes
or
so
they're
going
and
they're
moving
into
this
space,
where
you
don't
have
to
know
a
different
set
of
technologies
for
each
type
of
hardware
windows:
hardware
that
you're
dealing
with
so
that's
pretty
exciting,
there's
a
ton
of
electron
apps.
A
A
This
is
mochi
bar.
It's
one
of
my
favorite
electron
apps.
It's
it's
a
menu
bar
app,
so
there
are
a
lot
of
different
manifestations
of
what
an
electron
app
can
be,
so
it
doesn't
necessarily
have
to
be
an
app
with
an
icon
in
the
in
the
dock
or
in
the
status
bar.
It
can
also
be
something
more
discreet,
like
a
little
icon
on
the
top
of
your
screen.
So
mochi
bar
is
really
just
this
to
play
it
again,
this
really
basic
interface
and
can
be
driven
entirely
by
the
keyboard.
A
This
is
an
app
with
a
name
that
I
don't
know
how
to
pronounce
I
want
to
call
it's
Pegasus,
but
it's
svgs
us
so
coming
up
here,
there's
a
little
animation
where
you
actually
drop
a
file.
You
carry
a
file
through
this
application
window.
It
is
sanitized
as
you
drop
it
as
you
carry
it
through
the
window
and
then
you
drop
it
on
another
target
window.
So
that's
an
interaction
that
I've
never
actually
seen
before
in
a
desktop
application.
A
Like
so
there's
some
really
interesting
things
you
can
do
with
electron,
where
you
have
multiple
windows
and
you
have
like
pretty
much
complete
control
over
the
behavior
of
dragging
things
in
and
out
of
windows
files
and
text
content.
Stuff,
like
that
another
thing
that
was
in
that
video
there
again
is
a
svgs
us
has
this
feature
where
it's
just
watching
your
file
system
in
a
particular
directory
for
changes
in
the
file.
So
it's
kind
of
an
illustration
of
how,
because
you
have
node
you
can
you
can
watch
the
file
system?
A
A
Another
thing
that's
worth
noting
is
you
can
make
your
electron
ups?
Don't
necessarily
have
to
have
a
visual
interface
like
when
you
think
of
a
desktop
app,
you're,
probably
picturing
a
window
that
fills
the
screen,
has
a
little
close
button
and
things
like
that,
but
you
can
actually
make
an
electron
app
that
is
invisible
to
the
user
once
you
run
it,
it's
just
a
something
that's
running
in
the
background,
so.
A
Also
electron
gives
you
these
really
nice
hooks
for
making
an
app
start
at
system
startup
or
when
the
user
logs
in
or
when
they
log
out.
So
if
you
want
to
have
some
team
and
it's
consistently
running
as
long
as
the
computer's
user
is
running,
you
can
do
that.
It's
really
easy
with
just
regular
node.
You
can
do
that
too,
but
it's
actually
pretty
hard.
An
electron
provides
some
nice
cushy
api's
for
doing
this
kind
of
stuff.
A
So
let's
talk
about
how
to
make
a
very
basic
electronic
ation.
The
first
thing
you
need
to
do,
if
you
haven't
done
it
already,
is
go
to
node.js,
org
and
install
node.
So,
like
I
said
earlier,
when
you
install
node,
you
get
NPM
with
that
included
in
the
installation.
If
you're
at
that
website
now-
and
you
see,
there's
a
version
4.5
and
a
version
6.5
or
somewhere
around
there,
which
which
one
should
you
use,
it
doesn't
actually
really
matter.
A
If
you
use
six
you'll
get
all
the
new
shiny
features,
but
they're
both
perfectly
compatible
with
electron.
So
take
your
pick
also.
If
you're
on
an
older
version
of
node
like
node
0.10,
you
can
still
use
electron
and
once
you
install
electron,
you
get
all
the
goodies
that
come
with
electron
and
they're
kind
of
separate
from
node,
so
shout
out
to
DuckDuckGo
the
search
engine
that
doesn't
track.
You
slight
tangent
DuckDuckGo
is
awesome
like
it
used
to
not
be
very
good,
but
it's
actually
pretty
good.
A
A
Here's
the
series
of
commands
that
will
set
you
up
for
creating
an
electron
app,
so
you
create
a
directory
called
demo.
You
change
into
that
directory.
You
run
npm
in
it
and
npm
in
it
is
it's
a
little
command-line
wizard
that
walks
you
through
the
process
of
creating
a
packaged
up
json
file
for
your
project.
A
So
the
next
thing
is
you
install
electron
and
you
add
the
save
dev
flag
which
will
save
it
as
a
dev
dependency
in
your
package
JSON
as
opposed
to
a
regular
dependency.
So
if
you've
been
doing
electron
development
for
a
while
electron
is
just
the
new
name
of
electron
pre-built,
it's
the
same
package.
A
You
can
still
use
pre-built,
but
only
through
the
end
of
2016
we're
phasing
it
out
and
electron
is
now
the
canonical
package
you
install
then
we're
just
you
just
create
two
files,
there's
a
main
je
s
as
the
convention
for
what
most
people
call
this
main
javascript
file
and
index.html,
so
we're
creating
just
a
like
a
web
browser
window.
So
this
is
what
a
main
jas
file
looks
like
some
of
that
syntax
might
be
a
little
bit
intimidating,
but
it's
actually
pretty
cool
once
you
start
to
familiarize
yourself
with
it.
A
So
const
is
a
way
to
create
a
variable.
It's
a
new
thing
in
es6
or
ES
2015.
That
allows
you
to
create
a
variable
that
cannot
change.
It's
a
constant
so
once
you've
set
that
you
can't
inadvertently
change
the
value
of
it
and
on
this
first
line
it
says
Const,
app
and
browser
window.
That's
actually
plucking
objects
off
of
the
electron
module.
It's
like
we're
just
saying
we
want
app
and
browser
window.
Those
are
the
things.
A
So
the
main
file
is
really
the
thing
that
is
controlling
the
application
lifecycle
like
what
the
what
the
application
does
when
it
boots
up
or
when
it
starts
what
it
does
when
it
quits
things
like
that,
whether
or
not
it
should
appear
in
the
dock
or
the
the
taskbar,
whether
or
not
it
should
have
a
menu
bar
icon.
Things
like
that
so
operating
system
level
stuff
is
usually
managed
in
this
main
Dutch
AAAS
file,
then
in
our
index.html
this
is
kind
of
a
crude.
A
This
slide
really
captures
what's
so
crazy
about
electron.
Is
that
you're
in
an
HTML
file,
you're
just
writing,
regular
old
HTML
code
and
JavaScript,
and
then
all
of
a
sudden
you
put
in
this
require
statement
and
you
can
bring
in
any
node
module
Under
the
Sun
into
this
entire
and
execute
it
in
your
webpage,
which
is
just
like
it's
so
insane,
it's
so
cool.
So.
A
Especially
if
you've
been
doing
this
stuff
for
a
while,
like
it's
just
it's
finally
good,
so
what
this
script
is
doing
is
it's
bringing
in
some
node
core
modules.
These
doesn't
have
to
be
known
core
modules.
You
could
have
modules
that
you
installed
from
NPM
too,
but
a
file
system
and
operating
system
or
two
things
that
just
come
with
node
for
free.
So
what
we're
doing
here
is
we're
grabbing
a
list
of
files
in
the
users
home
directory
and
rendering
them
to
the
page.
So
it's
not
super
useful,
but
it's
a
it's.
A
So
this
is
kind
of
the
MVP,
the
the
very
most
basic
demonstration
of
the
power
of
the
electron
web
browser
window,
so
convention
says
in
NPM
and
node
world
that
you
should
define
a
start
script.
So
there's
this
object
called
script
and
the
way
you
start
an
app
is
an
electron
and
the
path
to
the
directory.
Where
your
electron
app
lives,
there's
actually
something
missing
here,
which
is
the
an
entry
called
main
which
describes
where
the
the
sort
of
entry
point
for
your
app.
A
A
That
talents
tells
me
how
much
free
memory
is
is
available
or
tells
me
what
the
home
directory
is
on
this,
and
this
is
really
useful
for
like
cross
doing
cross-platform
work
because
on
Windows,
obviously
it's
not
going
to
be
slash
users,
that's
like
the
default
directory
path
for
the
user
directory.
So
Note
has
a
lot
of
these
baked
in
things
for
like
normalizing
paths
across
operating
systems,
so
you
can
make
things
that
behave
in
a
cross-platform
way.
A
So
assuming
you
had
installed
any
npm
modules,
you
just
have
access
to
them
right
here
in
this
browser
window
and
you
can
require
them
and
do
whatever
you
want
with
them.
And
then
you
still
have
like
the
element
inspector,
so
you
can
still
go
into
your
code
and
make
all
kinds
of
changes,
and
so,
if
you're
accustomed
to
doing
web
development,
it's
like
the
same.
It's
the
same
flow.
It
just
has
no
data
to
it.
A
So,
yes,
2015
I,
think
chromium
includes
chromium
and
node
6,
which
are
chromium.
What
are
we
at
52
I?
Think
right
now
in
electron
and
node
6.5
ish,
or
something
like
that.
They
both
have
nearly
full
support
for
es2015,
so
you
don't
actually
have
to
use
like
a
transpiler
like
by
babel
or
anything
like
that
to
to
write
a
new
javascript
in
your
in
your
app.
So
you
just
you
just
write
it
and
it
works.
A
You
can,
of
course,
bring
in
those
transpilers.
You
can
bring
in
these
tools,
for
if
you
want
to
write
something
in
typescript,
you
can
just
bring
in
typescript
and
write
your
code
that
way,
but
you
don't
have
to
so
you
get
a
really
pretty
a
pretty
powerful
environment
out
of
the
gate
without
having
to
install
any
extra
dependencies
geolocation
a
special
thing
about
this
is
just
that
you
can.
You
can
get
the
users
location
without
having
to
ask
for
it,
which
is
maybe
a
little
bit
scary,
but
not
for
you
as
the
developer.
A
So
if
it
doesn't
work
on
Internet,
Explorer
you're
out
of
luck
or
if
it
doesn't
work
on
an
older
version
of
Firefox
or
I,
guess
they
say
Safari
is
the
new
Internet
Explorer.
So
if
it
doesn't
work
on
Safari
you're
out
of
luck
with
the
electron,
you
don't
have
to
worry
about
those
kinds
of
things
like
the
webcam.
Just
it
just
works
like
you.
Have
all
the
getusermedia
features
you
also
just
like
with
geolocation.
You
don't
have
to
ask
for
it.
You
can
just
turn
on
the
webcam
same
thing
with
microphone.
A
We
have
all
these
new
web
RTC
features
coming
in,
so
this
allows
people
to
do
to
make
peer-to-peer
applications
that
are
not
dependent
on
the
server
so
really
exciting
things.
There
CSS
custom
properties
if
you're
familiar
with
SAS
or
or
less
or
some
of
those
other
CSS
preprocessors
there's
this
concept
of
variables.
A
So
if
you
want
to
define
a
color
or
a
width
or
a
font
family
or
something
like
that-
and
you
want
to
keep
your
style
sheets
dry
typically,
you
would
use
the
pre-process
language
to
do
that,
but
CSS
custom
properties
actually
allow
you
to
do
that
with
just
vanilla
CSS.
So
this
is
a
part
of
the
CSS
spec,
that's
now
in
chromium.
A
So
it
gives
you
a
lot
of
flexibility
and
you
can
actually
an
interesting
thing
that
is
different.
That
makes
it
different
from
CS
from
SAS
and
les
is
that
you
can
actually
manipulate
these
properties
with
JavaScript.
So
before
there
used
to
be
this
sort
of
divide
between
JavaScript
and
CSS,
like
you,
couldn't
really
reach
across
from
one
to
the
other
and
make
changes,
but
now
because
CSS
custom
properties
are
just
an
attribute,
like
any
other
attribute
in
the
HTML
file,
you
can
manipulate
them,
which
Auto
script
at
runtime.
A
So
all
of
a
sudden,
your
JavaScript
has
way
more
control
over
the
way
the
CSS
behaves.
So
it's
really
exciting.
Css
containment
is
just
a
way
to
if
you're
working
on
games
or
things
that
really
need
a
high-performance
video.
Then
you
CSS
containment
is
this
new
feature
that
allows
you
to
very
specifically
control
which
pieces
of
your
application
or
which
pieces
of
your
Dom
are
rendered
and
how
window
DUP
fetch
you
just
get.
It's
an
HTTP
client
that
you
get.
A
That's
that
has
promises
that
you
get
for
free,
that's
just
on
the
window,
object,
no
more
cores
which
is
like
you
guys
have
ever
done
any
web
development,
where
you're
trying
to
like
make
an
AJAX
request.
Some
other
site,
like
you,
hit
this
Coors
thing,
and
it's
just
like
so
sad.
But
that's
that's
over
now,
a
sync!
Oh
wait:
so
one
of
the
biggest
hurdles
for
working
with
JavaScript,
especially
for
new
developers,
is
just
getting
accustomed
to
the
asynchronous
style
of
the
language
where
you
have
to
pass
around
these
callbacks
and
things
understanding.
A
A
A
They
just
allow
you
to
write
HTML
files
that
you
can
bring
into
another
HTML
file
like
a
partial.
This
has
kind
of
been
around
for
a
while.
But
again
this
is
the
thing
where
you
can't
use
it
in
all
browsers,
so
you
just
don't
use
it,
but
now
you
can
desktop
notifications.
These
are
native
push
notifications,
so
this
allows
a
web
service
to
push
a
notification
to
a
user's
device,
and
so
this
is
baked
into
Chrome
now
too.
So
these
are
all
things
that
we
get
for.
A
Free
totally
running
out
of
time,
I
didn't
think
I
was
going
to
happen.
Web
Audio,
that's
like
really
cool
you
can
do.
You
can
control
the
mouse
and
the
keyboard.
Using
this,
this
module
called
robot
j/s.
So
you
can
programmatically
move
the
mouse
around
type
things
on
the
keyboard,
completely
control,
a
computer
that
way
there's
lots
of
stuff,
so
navigating
user
space,
there's
10,000
repos
on
github
right
now
that
depend
on
electron.
A
A
Dev
dependencies
you
can
see.
There's
a
lot
of
babble
going
on.
People
really
want
their
super
futuristic.
Java
Script
I
can't
blame
them.
Top
forked
apps
only
have
45
seconds.
Ok,
this
is
a
good
one.
This
is
one
good
one
for
you
to
know
about
so
try
module
is
my
favorite
node
module?
You
install
it
globally
and
then,
when
you
type
try
module
and
the
name
of
a
module,
it
opens
up
a
ripple,
an
interactive
console
with
that
module
loaded
for
you.
A
A
A
Electron
dot
atom
Daioh
is
the
the
place
to
go
to
get
started
to
find
out
about
everything.
Electron
awesome
electron
is
this
repository
if
you're
not
familiar
with
the
awesome
phenomenon,
it's
this
thing
on
github,
where
people
create
basically
just
a
readme
file.
That
is
a
list
of
awesome
things
about
a
particular
topic
and
it's
usually
web
development
related.
So
awesome
electron.
Is
this
constantly
updated
list
of
interesting
electron
projects?
Apps
boiler
plates
videos,
things
like
that
and
PMS
is
an
alternative
search
interface
for
NPM.
A
A
So
github
is
often
a
better
place
to
evaluate
a
package
than
NPM,
because
you
can
find
out
how
actively
the
the
project
is
maintained,
how
many
contributors
it
has
how
many
pull
requests
it
has
things
like
that
electron-electron
is
the
place
to
go
for
the
repository
that
is
github.
Calm
electron-electron
just
for
filing
issues.
We
have
a
slack
channel.