►
Description
Join members from the ASP.NET teams for our community standup covering great community contributions for ASP.NET, ASP.NET Core, and more.
Community links for this week: https://www.theurlist.com/aspnet-standup-2020-07-07
A
A
B
A
To
hear
about
that,
let
me
run
through
the
community
links.
First,
there's
been
some
cool
community
stuff
going
on
and
I
will
share
it
on
over
okeydoke.
As
always,
these
are
in
the
show
notes,
and
I
will
paste
them
in
the
chat
as
soon
as
I
finish
going
through
them,
and
and
so
this
is
asp.net
standup
2020.0707.
A
So
the
first
thing
I
want
to
point
out
is:
we've
been
doing.
These
we've
set
up
a
meetup
group
or
virtual
user
groups,
so
these
are
for
existing
meetups
that
are
already
have
have
pivoted
over
and
are
doing
virtual
meetups
online
and
james
montemagno,
and
I
work
to
set
this
up
so
we're
doing
two
things
with
this.
One
is
we're
helping
get
the
word
out,
because
now
you
can
go
to
a
meet
up
in
sao
paulo
or
seoul
korea
or
wherever
right,
because
it's
it's
all
virtual
in
the
cloud,
so
we're
helping
list
them.
A
A
You
can
also
let
us
know
about
them
by
creating
an
issue
and
then
one
other
neat
thing
we
offer
is
for
meetups
that
are
not
set
up
for
live
streaming
and
have
not
invested
the
bajillion
hours
of
playing
around
with
getting
obs
set
up
and
everything
we
actually
have
a
cloud
hosted.
We
have
a
vm
running
obs
and
it's
all
gpu
accelerated
and
everything
and
fancy
setup,
and
so
you
can
also
let
us
know
when
you
create
an
issue
in
here.
A
We
have
an
issue
template
oops,
while
I'm
logged
out,
but
when
you
create
the
issue
template,
it
has
a
checkbox
in
there
where
you
can
say
whether
or
not
you
want
streaming
help,
and
we
will
help
with
that.
So
by
clicking
this,
then
that
lets
us
also
host
it.
For
you,
oh
and
part
of
the
reason,
of
course,
for
asp.net
we
there's
some
cool,
there's
blazer
shows
there's
all
kinds
of
neat
stuff
going
on
with
this.
There
was
one
last
week.
Blazer
is
the
next
big
thing.
A
A
Okay,
there's
this
dot
net
doc
show
so
they've
had
a
lot
of
a
lot
of
great
interviews
talking
to
a
lot
of
interesting
people.
So
I
just
wanted
to
share
this
out.
This
page
looks
a
bit
familiar.
I'm
happy
to
see
this,
this
format
working
in
a
lot
of
places,
and-
and
so
this
this
is
really
cool,
so
good,
good
stuff
coming
up
and
some
great
great
shows.
Recently
there
we
go
okay,
laser,
so
here's
a
fun
one
matthew
jones
has
created
minesweeper
with
blazer.
A
A
Oh
there's
all
kinds
of
stuff,
but
really
when
you
break
it
down
it's
a
grid
and
each
you
know
each
panel
is
either
has
a
mine
or
doesn't
has
been
clicked
or
not,
and
so
it's
it
really
kind
of
simplifies.
So,
for
instance,
he's
got
some
neat
diagrams
here,
showing
clicked
or
not,
and
this
reminds
me
a
bit
of
I
played
a
bit
with
creating
mazes,
automated,
creating
mazes
before
and
there's
an
algorithm
where
you
go
around
and
knock
down
walls
until
you've
like
traversed
the
through
the
grid,
and
so
this
is.
A
B
A
Yep,
so
so
so
this
is
the
back
end
code
and
then
here
he
goes
through
and
he's
writing
up
the
front,
end
components.
So
again
I
like
seeing
the
whole
kind
of
it's.
It's
a
pretty
interesting
approach
to
going
through,
and
it's
kind
of
a
non-trivial
problem
to
do
that,
but
you
know
just
going
through
and
it's
a
it's
a
array
of
divs.
So
it's
stuff
and
then
of
course
the
the
fun
grand
finale
here
is
these.
A
These
are
all
hosted
online,
so
you
can
watch
me,
try
and
play
minesweeper
and
you
know
see
how
that
go
boy,
I'm
not
very
good.
So
anyhow,
that
he's
got
that
and
he's
got
several
others
on
there
too,
so
fun
stuff,
anthony
so
anthony's
continuing
to
write
a
lot
of
great
posts
on
services
microservices.
A
A
So
he
wanted
to
set
up
endpoint,
visualization
and
showing
a
graph,
and
so
this
first
post
he
goes
through
and
talks
about
the
building
blocks
he's
going
to
be
using
so
the
dot
language
and
explaining
how
that
language
can
be
used
to
to
model
a
graph.
And
then
he,
you
know,
talks
about
here's.
You
know,
here's
how
we
would
show
the
dfa
for
our
application
and
then
he
he,
you
know
just
kind
of
goes
through
and
shows
some
translations
in
the
next
post.
He
talks
about
his
real
world
implementation
of
it.
A
A
So
he
talks
about
how
he
implemented
that.
So
you
know,
one
one
possibility
is
creating
is
an
end
point.
He
shows
wiring
it
up
in
as
a
middleware
branch
and
then
he
talks
about
how
he
generates
it
from
an
integration
test
and-
and
you
know
allowing
doing
that
directly
as
part
of
the
integration
testing.
So
that's.
B
Cool
yeah,
it
kind
of
reminds
me
a
little
bit
of
of
the
project
tie
because
doesn't
tai
also
have
like
a
dashboard
that
shows
you
like
at
least
the
services.
I
don't
know
if
it
shows
you
all
the
endpoints
though,
but
it
has
like
a
dashboard
experience.
So
I'm
wondering
if
there's
any
like
overlap
in
the
implementation
that
could
be
reused,
but
maybe
not.
A
B
C
It's
that
presentation,
it's
quite
fantastic
if
you're
working
with
a
modern
browser
layout
is,
is
basically
been
revolutionized.
You
know
in
in
recent
years,
and
that
is
probably
that
presentation
you're
talking
about
is
probably
out
of
all
the
content
from
those
three
days.
I
think
probably
one
of
the
absolute
best
for
the
modern
web
dev
to
to
take
a
look
at
it'll.
Save
you
so
much
time.
A
A
B
C
C
Good
all
right,
so
I
thought
I'd
give
a
little
intro
slash
background
on
myself,
also
as
part
of
this,
so
for
people
that
don't
know
me
or
also
just
aren't
familiar
what
I'm
up
to
these
days.
So
I
I
I'm
a
principal
engineer
at
microsoft
and
I
work,
but
I
don't
work
on
the
on
the.net
team
actually
and
I
don't
work
in
dev,
div
or
or
anything
like
that.
I
actually
work
over
on
the
web
platform
side
of
things.
C
C
And
so
what
happens
is
that
we
wanna
when
we
wanna
build
an
app
everybody
needs
some
buttons.
Everybody
needs
some
drop
downs,
menus
tree
views
all
these
components,
and
so
each
group
ends
up
building
these
components
over
and
over
again
and
they
have
to
build
them
in
a
framework
specific
way.
So,
if
they're
building
in
react,
they
have
to
go
build
a
set
of
react
components
for
that,
if
they're
building
with
blazer,
they
have
to
build
a
set
of
blazer
components
for
those
things
etc,
and
so
this
is
extremely
time
consuming.
C
You
know
it's
quite
it's
quite
wasteful
and
then
you
get
a
lot
of
inconsistency
in
the
in
the
customer
experience
and
it's
not
just
microsoft.
That
has
this
problem,
but
I
know
that
a
lot
of
you
that
are
watching
this
have
this
problem
as
well.
Every
time
you
start
a
new
project,
you
need
a
decent
set
of
components.
C
If
you
change
frameworks
across
projects,
you've
got
to
find
a
different
library
of
components
to
use
or
rebuild
them
from
scratch.
If
you're
a
large
company,
you
may
have
inconsistency
issues
across
different
apps
that
you're
building
at
the
same
company.
Maybe
different
teams
use
different
frameworks
as
well,
and
so
then
you
don't
have
the
same
components
that
you're,
using
and
so
fast
is
basically
designed
to
solve
all
these
problems.
C
So
what
we're
doing
at
microsoft
is
we're
building
a
standard
set
of
web
components
that
can
be
used
with
any
framework
to
get
a
consistent
experience,
a
consistent
component
api
so
that
we
don't
have
to
keep
rebuilding
everything
for
every
new
framework.
That
comes
out
that
you
don't
have
to
keep
rebuilding
things.
C
So
I
want
to
share
a
little
bit
about
that
work.
We're
at
the
beginning
of
that
work.
Now
we
started
the.
I
started
prototyping
some
of
this
back
in
february
and
we
had
our
first
actual
release
just
a
couple
of
weeks
ago,
but
we're
really
excited
about
the
work
we're
doing,
and
I'm
excited
to
be
able
to
be
here
and
share
it
with
blazer
and
asp.net
developers,
because
you're
going
to
be
able
to
take
direct
advantage
of
these
components
and
all
the
apps
that
you
build.
C
If
you
so
desire
so
going
on
from
there.
I
will
just
give
a
quick
intro
about
web
components
and
I'll
do
a
little
bit
of
a
technical
dive
into
the
architecture
of
fast.
So
you
can
kind
of
see
the
different
things
that
compose
it
and
how
those
relate
to
what's
happening
in
the
web
platform
and
then
I'll
jump
into
a
blazer
demo
and
show
you
how
you
can
use
these
today
in
blazer.
C
All
right
so,
first,
I
want
to
talk
about
web
components,
because
a
lot
of
people
don't
realize
that
the
web
platform
now
actually
has
a
standard
model
for
creating
reusable
html
elements.
So
you
may
hear
this
term
web
components
it's
kind
of
an
umbrella
term.
If
you
remember
back
some
years
ago,
we
used
to
talk
about
html5
and
what
was
html5
well.
It
was
just
an
umbrella
term
for
a
bunch
of
different
new
things
that
came
to
html
kind
of
all.
C
Around
the
same
time,
you
may
also
hear
about
progressive
web
apps
and
pwas
right
and
that's
another
umbrella
term.
That
is
really
calling
out
a
specific
set
of
multiple
features
that
are
designed
around
offline,
apps
and
native
installing
type
apps,
and
all
these
kinds
of
things.
So
that's
another
umbrella
term
and
web
components
is
also
an
umbrella
term.
C
C
C
C
This
also
involves
things
like
css
properties,
which
are
variables
that
you
can
put
in
css
that
you
can
define
and
calculate
and
base
styles
off
of,
and
these
are
all
features
that
are
available
in
every
modern
browser
today
and
they
form
the
basis
of
what
we
would
call
kind
of
this
web
component
feature
set
that
allows
us
to
build
components
and
just
like
any
component
library
or
component
system.
You
know
components
are
great
for
encapsulating,
reusable
things,
they're
great
for
composing,
because
html,
of
course,
is
composable.
C
C
So
that's
really
good
news
for
the
blazer
community
and
really
great
news
for
the
asp.net
community,
because
it
means
that
you
can
go
take
web
components
that
people
have
built
and
drop
them
into
your
blazer
app
and
from
the
perspective
of
blazer.
It's
just
another
html
element
that
it's
talking
to
in
the
same
way
that
it
talks
to
all
the
built-in
elements.
C
But
it's
a
custom
web
component,
if
you're
an
asp.net
customer
and
you
are
just
using
ciasp.net
to
build
microservices
or
something
like
that,
but
you're
using
like
a
reactor
and
angular
on
the
front
end.
Well,
these
web
components
also
work
with
all
those
frameworks
as
well.
So
you
can
take
these
components
right
off
the
shelf
so
to
speak,
drop
them
into
your
app
and
begin
using
them
with
whatever
framework
that
you
are
using
to
build
your
front
end
today
and
maybe
you're
not
using
any
of
that.
C
Maybe
you've
got
a
more
traditional
asp.net
website,
maybe
you're
using
jquery,
for
example,
to
just
do
some
basic
interactivity,
or
maybe
maybe
you're,
not
writing
any
javascript
at
all
or
or
using
blaze
or
anything
it's
just
all
server-side
rendered.
But
you
want
some
nice-looking
components,
because
these
are
just
plain
old
html
elements
from
the
perspective
of
any
server-side
framework
or
client-side
framework.
You
can
just
drop
these
in
and
you
get
a
completely
new
set
of
just
html
tags.
C
You
can
go
and
start
using
throughout
your
app
without
having
to
write
any
client
side
code
at
all,
whether
it's
blazer
or
javascript
or
anything.
So
really,
regardless
of
your
background,
you
know
whether
you're
new
to
web
development
and
maybe
or
whether
you're
an
advanced
blazer
user
or
anything
you
can
drop
these
components
in
and
start
using
them
right
away
because
they're
built
on
this
foundation
of
web
standards.
C
C
So
the
first
thing
I
already
talked
about
is
the
web
platform
right
so
and
this
this
box
is
just
showing
some
of
the
apis
that
are
available
natively
in
the
browser
today.
So
you
can
come
in
here
and
let
me
get
a
little
pin
here
and
you
can
actually,
you
can
actually
define
an
element.
A
new
html
element.
There's
an
api
to
do
that.
Custom
elements,
dot,
define
it's
a
global
in
the
browser
you
can.
You
can
create
a
shadow
root
to
to
put
dom
into
to
describe
how
that
element
will
render
itself.
C
You
can
use
document
fragments
to
set
up
that
html
ahead
of
time
and
reuse
it
across
elements.
You
can
instantiate
css
style
sheets
and
you
can
attach
them
into
the
shadow
root
in
order
to
provide
encapsulated
styles.
So
there's
a
whole
bunch
of
platform
apis
in
there
for
creating
these
reusable
web
components.
C
Now
they
are
very,
very
low
level
and,
as
it
turns
out,
if
you
want
to
build
a
web
component,
you're
probably
going
to
end
up
writing
at
least
100
lines
of
code
to
implement
a
very
bad
web
component
in
the
end
and
so
to
even
implement
the
most
trivial
web
component
is
quite
a
bit
of
code
to
do
it
right
to
do
it
in
a
performant
way,
so
the
web
platform-
it
just
gives
you
these
very
low
level
apis.
It
doesn't
really
put
any
opinions
on
top
of
them.
C
It
doesn't
really
help
you
along
just
give
you
the
lowest
level
hooks
you
can
to
define
these
elements.
So
what
we've
done
with
fast
is
we've
basically
built
some
technology
that
enables
us
to
create
web
components
that
are
small,
lightweight
super
efficient
and
that
get
rid
of
a
lot
of
the
boilerplate
that's
needed
to
write
web
components.
C
But
there
is
a
layer
to
what
we've
built
called
fast
element
that
basically
handles
working
with
all
the
low-level
platform
apis
to
do
the
rendering
and
and
the
definition
of
the
elements
and
so
on
and
so
forth.
So
we've
written
that
and
then,
but
where
it
really
gets
interesting,
is
on
the
next
layer
which
was
which
we
call
fast
foundation.
C
Let
me
just
highlight
that
real,
quick,
because
fast
foundation
like
we
started
by
wanting
to
build
web
components,
and
we
have
a
toolkit
for
building
web
components,
but
some
of
the
big
problems
really
start
to
happen
around
design,
and
so
not
only
do
we
provide
a
toolkit
for
building
web
components,
so
we
provide
a
toolkit
for
building
design
systems.
So
what
is
a
design
system?
C
Well,
you
may
have
heard
of
fluent
design,
that's
microsoft's
design
system
and
so
all
of
microsoft's,
apps
and
windows,
and
things
like
this
express
that
design
language
you
may
have
heard
of
material
design.
This
is
google's
design
language
and
if
you
go
use
a
bunch
of
google
products,
if
you
use
android
os
you'll
see
that
design
language
be
expressed,
another
one
is
lightning
design.
C
C
So
the
interesting
thing
that
we've
done
with
fast
foundation
is
we've
actually
provided
a
set
of
building
blocks
for
implementing
design
systems
themselves,
so
we
can
actually
implement
fluent
design.
We
can
implement
material
design,
we
can
implement
bootstrap,
we
can
implement
lightning
design
and
the
same
way
that
you
can
implement
web
components
with
building
blocks
of
web
components.
We've
built
a
number
of
sort
of
building
blocks
for
implementing
design
systems
and
all
these
things
work
together
with
the
component
model,
so
that
you
can
swap
the
design
systems
in
and
out
over
the
same
component
model.
C
So
you
can
use
the
same
set
of
components
and
say
I
think
I
want
to
use
fluent
design
or
I
want
to
use
material
design
or
I
want
to
use
lightning
design.
So
somebody
has
implemented
a
design
system
using
our
design
system
building
blocks
that
works
with
the
component
system.
That's
underneath
it
and
we're
doing
a
lot
of
work
in
the
web
standards
today,
so
we're
working
with
ycg,
which
is
the
web
incubator
computing
community
group.
C
So
I
sit
in
a
bunch
of
these
meetings
and
two
things
where
this
is
really
gonna
bear
fruit.
I
think,
for
everybody
is
the
open
ui
project,
which
is
an
attempt
to
actually
standardize
the
behavior
of
the
built-in
html
elements,
because
in
case
you
haven't
noticed
things
like
select
and
input
and
these
kinds
of
html
input
or
form
controls
are
quite
problematic
in
html
and
they're,
actually
not
well
defined
in
the
spec.
C
The
web
standards.
Now
that
that
is
all
to
set
up
this
final
a
little
bit
here,
which
is
that
we
have
actually
implemented
two
design
systems
on
top
of
a
standard
component
library
that
you
can
use.
So
if
you
are
looking
to
use
fluent
ui
microsoft's
fluent
design
system
today-
and
you
may
have
noticed
that
there's
only
a
set
of
react
components
out
there
for
fluent
ui.
C
So
we've
done
a
lot
of
work
to
model
components
in
a
style
list
kind
of
way
or
a
lookless
kind
of
way,
and
then
to
be
able
to
bring
the
visual
appearance
of
these
components
in
through
providing
different
design
systems.
And
we
are
shipping
two
design
systems
today,
one
is
a
fluent
ui
design
system
and
the
other
one
is
what
we
just
call
fast
frame,
which
is
a
a
unique
design
system
that
our
that
our
team
is
working
on.
C
C
It
may
look
complicated,
but
the
good
news
about
this
is
actually
quite
small
when
it
comes
to
the
code,
so
our
entire
component
library,
if
you
were
to
go
use
fluent
ui
today,
the
web,
our
web
components
fluent
ui
implementation,
the
entire
library
without
any
tree
shaking,
is
smaller
than
react.
That's
the
entire
component
library,
the
entire
design
system,
implementation,
all
the
adaptive
capabilities
of
the
design
system.
Everything
actually
fits
in
in
a
much
smaller
space
than
even
just
like
the
base
react
framework
without
any
components.
C
B
Just
so
I
can
understand
rob
so
like
because
I
know
you
covered
a
lot
like
so
with
these
web
components.
Then,
if
I
have
like
an
asp.net
app-
and
let's
say
I
like-
I
have
like
I'm
like,
I'm,
I've
started
using
blazer,
but
I
have
also
like
in
a
bunch
of
existing
angular
or
react
code
in
my
application
and
I'm
this
is
this.
Does
this
mean
I
could
use
web
components
as
like
a
a
common
component
model
between
both
my
angular
assets
and
my
blazer
assets?
C
Because,
because
this
is
built
on
that
platform,
those
platform
primitives
yeah,
you
can,
if
you've
got
multiple
apps
written
with
different
frameworks,
but
you
want
a
set
of
the
same
components
used
across
both
of
them.
This
is
it.
This
will
work
for
you
and
because
it's
again
each
component
is
encapsulated
and
based
on
the
platform,
it's
also
can
be
incrementally
adopted.
So
if
all
you
need,
for
example,
is
a
tree
view,
you
can
just
go.
C
C
C
C
This
will
give
you
a
way
to
to
do
that
to
build
components
that
are
reusable,
and
it's
also
very
forward
compatible
too,
because
we're
built
on
these
web
primitives
like
who
knows
what
what
the
the
hip
thing
will
be
like
in
a
couple
of
years
from
now
in
terms
of
front-end
frameworks,
I'm
sure
blazer
is
going
to
continue
to
be
better
and
better,
and
I'm
super
excited
about
blazer.
There's
other
frameworks
that
are
people
are
using
too
and
those
tend
to
change
like
every
year.
C
You
know,
like
all
those
frameworks
change,
so
this
also
sort
of
shields
you
a
little
bit
from
the
industry,
churn
and
front-end
frameworks
and
lets.
You
have
a
set
of
components
because
they're,
based
on
the
web
platform
that
you
can
continue
to
use
even
with
some
new
framework,
you
know
coming
out
that
you
haven't,
you
know,
haven't
seen
yet
because
it's
again
it's
it's
platform
primitives,
so
you
can
use
them
shared
across
multiple
frameworks.
C
You
kind
of
can
future
proof
yourself
a
little
bit
with
that,
and
you
don't
have
to
worry
about
how
these
are
implemented.
You
can
just
drop
them
in.
If
you
ever
want
to
build
custom,
reusable
stuff
across
frameworks,
then
you
can
dig
lower
and
actually
use
our
fast
element
to
define
elements
or
you
can
use
our
fast
foundation
to
go,
define
actually
your
your
own
company's
design
system,
for
example,
you
could
implement
on
top
of
fast
foundation
without
having
to
rewrite
any
of
our
components.
You
know,
so
you
can
do
those
kinds
of
things.
B
C
But
if
you
do
have
a
javascript
build
system
integrated
already,
everything
has
been
designed
to
be
completely
tree
shakeable.
So
if
you
use
only
the
tree
view,
it'll
cree
shake
out
every
single
other
component
and
furthermore,
it
will
tree
shake
stuff
out
of
the
foundation
and
out
of
fast
element
that
aren't
used
by
that
tree
view.
For
example,
so
you'll
get
a
pretty
small
optimized
javascript
in
the
end,
for
that
contains
just
what
you
are
using.
D
D
And
I
wonder
if
we
could
clarify
that
a
little
bit
because
correct
tell
me
if
I'm
right,
my
guess
is
that
the
the
natural
and
kind
of
simple
way
to
be
reusing,
stuff
across
say
a
blazer
app
and
an
angular
app
would
be
to
be
using
the
the
fast
components
themselves,
which
are
things
like,
let's
say
like
a
button
or
a
card
or
a
dialogue,
or
something
like
that.
I
don't
know
exactly
what
set
of
components
there
are,
but
the
actual
application
logic
would
still
be
written
within
the
component
system
for
your
ui
framework.
D
So
you
would
still
be
writing
blazer
event,
handlers
or
angular
event
handlers
and
when
it
comes
to
what's
the
syntax
for
data
binding.
What's
the
templating
syntax?
Well,
you
would
be
using
an
angular
template
or
a
blazer
template
or
a
view
template
or
react
component
or
whatever
you.
The
idea
is
not
so
much
that
you
would
be.
Writing
your
actual
application
logic
as
a
fast
component
right,
like
I
suppose,
theoretically,
you
could
do
with
that,
but
it's
not
really
what
it's
targeted
for.
Is
that
fair
to
say.
C
Yeah,
the
our
main
target
is
these:
these
kind
of
more
atomic
lower
level,
reusable
components
right
now,
and
so
what
this
gives
you?
The
freedom
to
do,
is
pick
the
best
spa
framework.
If
you
will
for
your
app.
So
if
you
want
to
build
your
app
with
blazer,
you
go
build
your
app
with
blazer
and
then
you
can
use
these
fast
components.
Inside
of
that,
so
here's,
for
example,
you
can
see.
C
We
have
something
called
fast
button,
and
here
I'm
just
I'm
using
it
inside
of
a
blazer
view,
like
any
other
html
element,
I'm
setting
an
appearance
which
is
part
of
the
fast
button
properties,
but
I'm,
but
here
you
can
see,
I'm
I'm
just
wiring
up
a
click
event,
just
like
any
other
blazer
click
event
would
be
wired
for
any
normal
html
element
because
in
the
end,
at
runtime
this
actually
is
an
html
element.
It
literally
inherits
from
html
element
in
the
browser,
and
so
these
are
html
elements.
C
Think
of
it
as
extending
what
elements
are
defined
by
the
browser
to
include
an
additional
set
of
html
elements,
and
then
you
can
just
use
those
inside
of
your
app
with
whatever
app
view
engine
you're
using
it'll.
Just
it
just
works
basically,
so
hopefully
this
makes
maybe
makes
a
little
bit
more
concrete
and
I've
taken
the
from
the
this.
The
standard
like
blazer
startup.
I
took
the
counter
page
and
I
just
tweaked
it
a
little
bit
so
that
the
button
was
a
fast
button
that
increments
and
then
every
time
I
increment
it.
C
I
also
change
the
appearance,
so
you
can
see
I've
got
a
badge
in
here,
that's
rendering
the
current
count
and
then
I'm
changing
the
appearance
dynamically
of
that
badge
as
well.
So
all
the
same
things
that
you
would
do
with
normal
html.
It
works
with
these
fast
elements
because
they're
just
html
elements,
but
why
don't?
I
do
a
little
bit
more
demoing
here
and
show
a
little
bit
more
code
and
that'll
maybe
help
also
some
people
to
get
a
further
understanding
of
kind
of
how
these
things
go
together.
C
Awesome,
let's
see
the
first
thing
I'll
show
is
just
the
index.html
file,
because
one
of
the
things
about
fast
is
that
we've
decoupled
the
components
from
the
design
system.
So
the
first
thing
you
have
to
do
is
just
put
a
root.
Html
element
in
here
that
provides
the
design
system
to
all
the
components
that
are
inside
of
it.
C
Maybe
you
want
to
give
them
some
flexibility
to
tweak
and
override
some
of
the
design
system
properties
for
their
own
module.
So
you
can
do
all
those
kinds
of
things.
So
the
first
thing
to
use
fast
is
you
need
to
put
a
fast
design
system
provider
around
the
part
of
the
app
that
is
going
to
be
using
these
components,
because
that
provides
the
design
system,
the
design
language
for
all
the
components
that
are
going
to
render.
C
So
I've
just
dropped
this
literally
right
in
the
index
html
around
the
entire
blazer
app,
because
that's
just
super
easy
to
do
and
then
you
just
start
using
the
component.
Oh
actually,
I
skipped
one
important
step:
you'll
need
to
add
a
script
tag
to
actually
add
the
components,
so
I've
downloaded
it
locally
and
I'm
referencing
it
here.
It's
up
on
cdn
I'll,
show
everyone
where
you
can
find
all
this
information
in
our
docs,
but
there's
also
a
cdn
version,
and
so
I've
just
added
a
simple
script
tag
of
type
module
here.
C
C
I
didn't
set
this
entire
form
up
with
data
binding
because
I
just
want
to
you
know
kind
of
show
people
how
it's
done,
but
I
actually
didn't
know
how
to
do
this
with
blazer
until
this
morning.
Right.
So
I
I
just
read
the
blazer
docs
on
how
to
do
data
binding,
and
I
and
I
implemented
that
just
a
few
hours
ago
for
this
demo,
this
part
of
it.
So
it
works
exactly
like
the
blazer
docks
say
it
should
work
using
the
exact
syntax
with
blazer.
It's
just
that
just
it's
a
fantastic.
D
C
B
I
just
did
at
bind
to
last
name
without
the
dash
value
stuff
like
if
you
remove
the
second
attribute
and
only
have
the
first
attribute
with
just
at
bind
and
no
dash
value,
I
think,
is
the
that's
the
like
the
simplest
intact.
Did
that
not
work
was
that
was
that
problematic?
We
will
have
to
well.
Let.
C
C
There's
a
text
area
check
box
button,
divider,
I'm
not
showing
every
control
here,
but
we've
got
tree
view.
We've
got
progress
both
circular
and
linear
progress,
we've
got
menu,
I'll
show
you
some
more
of
the
stuff
and,
of
course,
we're
ever
expanding
our
library
of
controls.
The
blazer
code
is
pretty
simple.
I
was,
I
was
playing
around
with
a
two-way
data
binding,
so
I
just
set
up
a
time
timer
to
see
if
actually
it
was
just
right
out
to
the
console
if
it
actually
was
updating
the
properties
correctly.
C
C
D
C
C
C
So
you
can
provide
the
system
with
a
color
palette
and
it
will
ensure
that
no
matter
how
you
set
these
things
up,
that
you
always
get
accessible
colors,
and
so
it
knows
that
the
background
color
what
it
is,
and
it
knows
that
the
ratio,
what
the
ratio
is
to
the
foreground
and
it
will
automatically
adapt
these
things.
I
can
come
in
here
and
I
can
pick
a
different
accent
color.
C
So
under
the
hood,
not
all
these
variables
are
hard-coded.
A
lot
of
them
are
based
on
algorithms
that
we
built
into
our
design
system
primitives
so
that
you
can
kind
of
just
give
it
a
base.
Color
it'll
figure
out
the
color
theme,
it'll
figure
out.
You
know
what
shades
of
those
colors
need
to
be
used
in
order
to
layer
things
correctly,
so
that
accessibility
works
out
of
the
box.
C
C
C
I
can
change
the
outline,
be
a
little
bit
stronger
with
the
outline
and
there's
all
sorts
of
built-in
variables.
Now.
I've
got
basically
a
completely
different
design
language
here
right
now
it
started
out
as
fluent,
but
I
went
and
I
tweaked
some
of
the
parameters
that
fluent
is
based
off
of
that
our
implementation
of
fluent
is
based
off
of
to
customize
it
for
my
site,
for
example,
and
you'll
see
that
these
things
hold
across
the
entire
site.
C
So
if
I
come
over
to
that
counter
screen,
I
was
just
showing
you
and
I
start
there's
my
button.
It's
picking
up
the
colors
and
the
rounding
and
there's
this
is
the
badge
which,
as
I'm
incrementing
the
badge,
it's
flipping
it
back
and
forth
between
two
different
badge:
styles
and
the
accent
badge
styles
again,
picking
up
the
colors
based
on
the
design
system,
so
you
can
come
in
and
you
can
control
all
kinds
of
things.
C
C
It
can
do
all
the
same
kinds
of
things
that
the
other
ones
can
right,
and
I
can
also
I
could
start
from
a
different
base
design
system
and
then
again
I
could
customize
from
there.
If
I
want
a
little
bit
more
rounding,
you
know,
for
example,
and
I
want
something
that's
maybe
a
little
bit-
maybe
I'm
targeting
mobile
devices
and
I
want
things
to
be
a
little
bit
bigger.
Maybe
I
want
a
little
bit
more.
C
A
So
you
mentioned
mobile:
is
there
any
kind
of
like
one
of
the
things?
That's
that
I
know
bootstrap
focuses
on
is
the
responsive
and
handling
things
for
different?
You
know
form
factors.
Is
there
anything
for
that,
or
is
that
the
idea
that
I
would
like
how
would
I
handle
that
so
that
I
could
display
you
know
a
bigger
button
on
mobile
and
you
know
change.
C
C
And
so
one
of
the
things
you
can
do
is
based
off
of
where
your
app
is
running.
You
can
dynamically
control
the
characteristics
of
the
design
system
so
that,
if
you
want
on
a
mobile
device
to
have
less
dense-
and
I
can
even
like
one
of
the
things
where
we
use
this-
is
if
you're
building
like
a
developer
tools
out
of
this,
you
typically
want
something:
that's
purposefully,
less
dense
right,
see
how
I
just
drop
that
way
down.
C
So
this
allows
us
to
control
that
density
dynamically
and
make
it
different
in
different
contexts.
It
can
be
done
statically
by
just
setting
a
property
or
setting
an
attribute
in
html
on
the
design
system
provider,
or
it
can
be
done
dynamically
through
code,
where
you
say
based
on
this
condition
or
that
condition
you
know,
go
change
these
aspects
of
the
design
system
at
runtime,
so
you
can
do
all
those
kind
of
things
to
change
core
aspects
of
the
components
and
again
because
things
are
adaptive.
B
C
C
So
we're
able
to
do
a
lot
of
things
in
our
component
model
under
the
hood
in
order
to
dynamically
alter
the
css
based
off
of
various
conditions.
So
you
could
either
set
up
things
like
your
own
media
queries
and
css
to
alter
these
variables
or,
if
you've
got
more
advanced
things
you
can
do.
You
can
actually
say
I
want
to
set
this
up
so
that
this
whole
set
of
custom
css
just
applies
for
this
component.
C
Only
when
this
media
query
matches
and
it'll
inject
it
into
the
shadow
dom
with
these
components
automatically
and
override
the
internal
styles
of
these
components.
So
you
can
cust,
there's
so
many
levels
of
kind
of
customization.
The
basic
one
is
to
just
get
the
design
system
provider
and
set
a
couple
of
properties
on
it.
C
So
there's
a
whole
lot
of
capability
because,
like
I
said
we're
we're
building
a
set
of
reasonable
components
for
all
of
microsoft
and
all
of
microsoft's
customers
to
work
with
any
framework
and
any
design
system.
So
we've
thought
a
lot
about
the
primitives,
not
just
for
the
components
but
for
the
design
system
as
well,
and
that's
why
you'll
see
like,
if
you
think
about
if
we
were
to
go,
implement
material
design.
If
you
look
at
material
design,
it's
got
this
ripple
effect.
When
you
click
a
button,
it's
got
that
visual
ripple.
That
happens.
Well.
C
How
do
you
go
do
that?
Well,
we
actually
have
this
way
of
of
associating
dynamic
behaviors
with
styles
that
get
attached
into
a
particular
component,
so
we
don't
have
to
change
any
of
the
code
in
our
button
implementation
at
all
to
go,
implement
that
ripple
ripple
effect.
We
simply
associate
that
visual
behavior
with
the
material
styles
and
then
the
design
system
provider.
You
pick
a
material
design
system
provider
and
it
says
the
button
says
hey.
How
am
I
supposed
to
render
myself
and
the
provider
says?
C
B
B
C
Everybody
just
keeps
rebuilding
these
things
over
and
over
again
and
every
time
there's
a
new
framework.
Everybody
has
to
go,
rebuild
all
the
components
and
then
what,
if
the
design
language
changes
for
your
company?
Well,
now
you've
got
to
go
rebuild
that
and
so
there's
so
much
effort,
that's
being
repeated
year
after
year,
we're
trying
to
build
up
some
models
around
how
to
do
this
and
implement
it
in
a
way
that
other
people
don't
have
to.
And,
of
course
our
team
does
a
lot
of
work
with
accessibility.
C
Everybody
on
our
team
has
been
building
components
like
this
for
multiple
years,
so
you
know,
like
all
the
aria
roles
are
already
in
place
for
all
this
stuff.
You
don't
have
to
worry
about.
You
know
like
I
said.
The
design
system
is
designed
with
accessibility
in
mind.
That's
why
some
things
are
based
on
algorithms,
and
so
it
ensures
that
the
color
ratios
are
correct.
Everything's
built
with
we
spec
every
component
before
we
implement
it
and
there's
a
whole
section
on
accessibility.
So
everything
is
implemented.
C
You
know,
there's
all
the
keyboard
stuff,
I
can
tab
through
this.
You
see
the
focus
is
working.
Just
exactly
like
you
would
expect
it
to.
If
you
see
I'm
tabbing
onto
that
check
box,
it
gets
a
focus
rectangle.
That's
in
line
with
the
design
system
same
thing
with
the
button,
I
can
hit
space
bar
to
check
it
space
to
uncheck
it
all
the
all
the
stuff
that
you
expect
from
the
platform
in
terms
of
keyboard,
navigation,
accessibility,
color
ratios.
C
C
Oh,
we
want
a
little
bit
different
shadow.
We
want
a
little
bit
different
rounding
instead
of
four
pixel
rounding.
We
want
six
pixel,
rounding
and,
and
weeks
and
months
of
engineering
effort
to
do
the
to
do
those
kind
of
changes.
Well,
basically,
we
cut
this
down
to
minutes.
In
fact,
our
components
are
used
inside
of
the
new
edge
browser.
C
C
You
know
the
cost
that
you
that
you
know
what's
involved
in
building
any
new
app
or
changing
an
app.
Those
are
the
re,
some
of
the
reasons
why
we're
trying
to
build
this
because
it
should
not
take
a
month
of
engineering
work
to
like
implement
dark
mode.
It
really
should
just
be
like
a
toggle,
a
switch
kind
of
a
thing.
C
It
should
be
that
easy
and
so
we're
thinking
through
and
trying
to
solve
these
problems
and
we're
trying
to
do
it
in
a
way
that
is
cross-framework
cross-design
system
so
that
every
blazer
customer
that
wants
fluent
or
just
one
or
even
wants
to
start
with
a
base
set
of
components
and
then
customize.
The
design
system
can
do
it
very
quickly
very
easily.
Every
asp.net
customer,
whether
they're
using
angular
or
jquery,
or
nothing
at
all,
can
just
go
drop
these
in
and
start
and
start
using
them.
C
Yeah
anyway,
let
me
show
you
a
couple
other
things,
because
I
don't
think
we're
going
to
get
too
much
time
to
dig
into
that.
Okay,
but
you
can
go
to
fast.design.
This
is
our
website,
so
we
actually
just
launched
this
recently.
You
can
come
and
even
play
with
some
of
the
stuff
here.
So
even
on
our
homepage,
you
can
play
with
our
fast
design
system.
You
can
pick
out
some
different
colors
and
mess
around
with
some
of
the
controls
here.
If
you
click
on
components
or
explore
components.
C
One
of
my
jobs
is,
I
lead
our
our
ux
architecture
team,
but
also
our
ux,
tooling
team,
so
we're
working
on
not
just
the
components
and
everything
that
I've
shown
you,
but
a
set
of
tools
around
them
and
we've
got
some
very
baseline
initial
tooling
for
exploring
components
and
playing
with
them.
So
you
can
go
to
our
component
explorer
and
say
you
can
take
a
look
at
button
and
you
can
see
it
in
some
different
configurations
like
with
an
icon
and
you
can
put
dark
mode
on
and
off
go
to
rtl
mode.
C
C
C
If
you
want
to
see
like
how
did
we
actually
implement
any
of
this
stuff,
you
can
go
into
fast
foundation
and
you
can
take
a
look
at
let's
just
pick,
I'm
not
sure
which
one
would
be
interesting,
maybe
the
switch,
and
you
can
see
what
our
our
template
looks
like.
This
is
what
we
call
the
anatomy
of
the
internals
of
the
component.
C
You
can
see
the
behavior
model,
how
the
attributes
are
defined
that
appear
in
html
and
these
kinds
of
things
like
this.
So
that's
how
you
actually
build
them.
You'll
notice,
I
didn't
show
you
any
css,
because
remember
the
foundation
does
not
specify
how
the
real
appearance
is
in
the
end
that
you
have
to
get
from
the
design
system.
So
if
you
go
to
fast
components,
msft,
that's
fluent
inside
of
here.
This
is
where
you
will
see
if
I
go
to
switch.
C
C
C
C
C
We've
got
a
lot
of
documentation
up
here,
so
you
can
kind
of
see
the
different
layers
of
the
stack
and
you
can
come
in
here
and
you
can
look
at
the
component
list
as
well.
So
you
can
say
we
were
looking
at
switch.
You
can
come
in
here
and
look
at
switch
and
you
can
see
you
know
what
is
the
html
that
you
need
to
write?
C
C
If
I
go
to
tabs
you'll
see
you
know,
there's
fast
tabs
and
fast
tab
and
fast
tab
panel
and
different
things
like
this
and
you'll
see
the
demo
running
below
it.
That
shows
you,
but
in
the
end
this
is
just
straight
up
html
here
alright,
so
this
works
with
any
framework
and
if
you
want
to
get
started
with
blazer
or
asp.net,
look
under
integrations.
C
C
I'll
tell
you
where
to
get
it
on
the
cdn.
If
you
want
to
get
it
straight
from
the
cdn,
if
you're
just
working
with
straight
up
asp.net
without
blazer
again,
we've
got
a
guide
for
that.
We
also
got
guides
for
angular
aurelia
view
and
a
straight
up.
Webpack
guide
and
a
react
guide
is
coming
soon
as
well.
So
and
if
there's
anything
that
you
know
everyone,
that's
watching
anything.
That's
missing
like
hey,
I'm
using
this.
How
do
I
do
with
that?
Just
you
know,
like
I
said,
we're
open
source.
C
It's
on
github,
come
create
an
issue
and
we'll
work
with
you
to
put
together
an
integration
guide
and,
if
you're
digging
in
deeply
to
you,
want
to
build
some
of
these
web
components
to
use
across
frameworks
then
under
fast
element.
That's
where
you'll
find
the
guides
on
how
to
define
elements
templates
working
with
shadow,
dom
css
and
all
that
kind
of
stuff.
C
I
think
most
my
guess
is
most
blazer
folks
will
just
want
to
use
the
components
that
we've
built,
and
so
in
that
case
you
just
add
the
script
tag.
You
add
the
design
system
provider
and
you
just
start
using
the
elements
and
you'll
have
a
reference
here
for
the
proper
markup
for
for
any
particular
element
that
you
want
to
use
so,
hopefully,
again,
fast.design
is
the
website
from
there
you
can
get
to
the
docs
you
can
play
with
the
demos.
C
C
I
have
to
say
I'm
super
proud
of
my
team,
because
we
went
from
zero
to
launch
on
all
this
in
probably
about
four
months
and
so
amazing
work
that
a
lot
of
the
folks
have
done
and
we're
we've
got
very,
very
big
plans
and
a
lot
of
really
cool
stuff
planned
for
the
future,
so
give
us
feedback.
We
hope
you'll
start
us
on
github
that
that
lets
us
tell
the
upper
level
people
good
things
so
that
they
continue
to.
C
B
B
C
B
C
D
Was
also
a
question
about
do
you
have
a
road
map
for
something
like
table,
but
I
would
expand
that
question
to
say
how
far
do
you
intend
to
go
with
components
in
general
like
do
you
see
yourself
having
everything
that
say
would
show
up
in
material
design?
Do
you
imagine
even
more
than
that
or
like
how
do
you
know
how
far
to
go?
What's
your
plans.
C
Yeah,
so
we're
actually
in
the
process
of
putting
together
a
public
roadmap
right
now,
so
I
can't
share
that
yet
because
it's
not
finalized,
but
we
are
planning
a
number
of
additional
components.
Like
you
know,
things
like
a
customizable
select
things
like
we
hope.
Data
grid
is
kind
of
one
of
the
things
we
get
asked
for
our
list
views
those
types
of
things,
there's
a
lot
more
work.
We
hope
to
do
around
cards
different
card
layouts
and
things
like
this.
C
So
there's
a
there's
a
list
of
I
think
internally,
we
had
a
list
of
like
100
different
components
that
that
we
were
either
planning
or
had
actually
implemented
on
previous
versions
of
the
stack
in
the
past,
and
now
it's
a
matter
of
juggling
the
priorities
around,
which
one
are
we
going
to
do
next,
so
feedback
from
the
community
is
helpful.
I
mean
if,
if
the
you
know,
I
I
think
one
of
the
ones
that
sets
up
next
is
like
our
custom.
Select,
that's
a
really
big
ask
anytime.
C
I
build
an
app
I'm
always
like
I
hate
the
html
select.
I
got
to
go,
find
a
custom
select
and
by
the
way
you
know
that
sentiment
is
one
that
the
web
platform
devs
understand,
which
is
why
we
have
that
open,
ui
effort
that
I
talked
about,
because
we
are
attempting
to
redefine
the
browser's
version
of
select
so
that
you
don't
have
to
go.
Get
a
library
to
customize,
select
and
part
of
what
fast
is
doing
is
doing
a
web
component
implementation
as
a
proof
of
concept
for
the
platform
itself.
C
So
a
lot
of
our
components
are
serving
as
pocs
for
what
could
end
up
in
the
platform
one
day.
But
I
can
tell
you
like
there's
things
like
that.
The
list
controls
grids,
selects
cards,
more
workaround
cards
that
we're
planning,
but
we'll
have
an
official
public
roadmap.
What
our
team
tries
to
do
is
keep
it
more
to
I
know.
C
We
already
have
other
web
components
that
are
out
there.
Basically,
that
are
higher
level
components
like
authentication
components.
For
example,
there's
one
that's
out
there,
that's
a
pure
web
component
and
we're
working
with
those
teams
to
re-platform
them
on
top
of
fast,
so
that
those
components
can
take
advantage
of
all
our
foundation.
Features
such
as
multi-design
language
support
and
the
performance
work
that
we've
done
as
well,
and
we're
talking
to
a
lot
of
other
groups
that
are
looking
to
build
different
components
that
are
more
like
in
some
ways.
C
If
you
need
to
integrate
with
something
like
ms
graph
or
you
need
an
off
thing,
you
don't
have
to
go,
write
all
the
glue
code
to
like
call
microsoft's
services
under
the
hood
and
automate
the
ui
and
do
all
that
stuff.
Instead,
you
can
drop
a
web
component
and
set
some
properties
on
it
and
if
it's
built
on
fast,
it's
composing
all
of
our
components
that
pick
up
the
design
system
right.
C
So
then,
all
of
a
sudden
you,
you
pop
in
the
ms
graph
component
and
you
set
your
design
system
parameters
and
it
looks
like
it's
part
of
your
site
right
and
that,
because
this
is
the
other
problem
that
happens
when
you
get
advanced
controls
off
the
shelf
and
then
you
try
and
integrate
them
into
your
site.
It
starts
to
look
at
like
this
haphazard
mess
of
that's
not
expected.
B
B
A
B
C
It's
fast,
I
I
I
have
internal
benchmarks
based
off
of
krausest,
which
is
a
industry
standard
benchmarking
for
front-end
frameworks,
and
so
I
don't
want
to
make.
I
I
want
to.
I
need
to
get
our
benchmarks
officially
integrated
into
that,
because
I
don't
want
to
make
claims
that
you
can't
go
validate,
but
I'll
just
say
that
it's
very
very
fast.