Press "Enter" to skip to content

Polyfilling CSS with Houdini – Sam “Snugug” Richards – Developer Discussions


good Monday morning today we’re having a
developer discussion with snug UGG I’m
going to describe snug as a developer
with design tendencies he’s currently
working at IBM but will soon be working
for Google the interview that you’re
about to see is filmed at Nordic jeaious
a conference that I hosted which is also
why I’m wearing silver clothes
if you’re wondering but I actually met
Sam in many many years ago at Jay s
convey you in Berlin where he presented
a really cool project called chef Watson
that IBM done like like it was basically
an AI that made recipes like figured out
weird combinations of of ingredients
that work together
Sam is also the co-founder of SAS called
the talk that snog held at Nordic jazz
was about this thing called Houdini
which is a really cool technology that
allows us to create custom CSS
properties which allows us to have these
hardware-accelerated custom layout
things which is really cool and it also
allows us to do polyfills for new CSS
properties that have not rolled out as
standards yet we also talked about
practical productivity matters like how
to wall off your day so that you can
work in undisturbed blocks and we also
talked about window management snogging
also talks about how mistakes are born
in organizations and and how human error
works and it’s not quite what you think
before we get on with the interview I
would like to thank today’s sponsor
launch Darkly if you don’t don’t launch
darkly it’s as software is a service
product that helps you manage your
feature flags is really nice launched
largely has been around for a while I’ve
talked about them on the show before but
what is new is that they have teamed up
with Atlassian and created an
integration with JIRA if you work with
feature flags you know that it’s very
easy to fall into this the situation
where you’re releasing a feature and the
information is in lock
five different places in like an email
and this issue tracker and this your
future management is like it’s just yeah
so integrating an issue tracker and a
feature management product like launch
luckily it’s really nice because it
gives you a lot more visibility and a
lot more control it’s really nice to be
able to see in your issue tracker if the
thing has rolled out and to whom it’s
just very nice you can read up on how to
combine JIRA and launch Darkly by going
to launch darkly dot fun for function
comm that link is also in the episode
description where so Dini and what is
the what is the problem that it solves
yeah so the way that I like to think
about Houdini now is in much the same
way that service workers are a low-level
JavaScript API for our cache Houdini
provides a set of low-level javascript
api is for render engine yes
specifically the ones that we’re talking
about now are and our furthest along are
this idea of worklets which are the
actual render engine extension points
custom properties which allow you to
define give actual structure to the
custom properties that you’re currently
using the paint API which lets you have
kind of like a canvas like drawing
context wherever you would use paint or
an image in CSS animation API for doing
changing animations based on scroll
events and the layered API which will
let you actually build custom layouts
custom display properties so this
essentially allows you to completely
extend CSS to do whatever you want like
completely custom CSS properties yes so
the goal of Houdini houdini task force
is to explain the magic of styling and
layout on the web and provide the
primitives to us to be able to do things
like actually polyfill CSS because today
we can’t do that we can only write
JavaScript that uses current CSS to kind
of mimic stuff but actually polyfill in
Java or CSS is kind of one of the core
driving principles of Houdini seems to
me like this could be amazing for
designer/developer collaboration at 45
we had a lot of people who were very apt
at CSS but there wasn’t really like the
whole text like was so complicated I
couldn’t really extend it but it would
be pretty cool to be able to create like
cost it custom things like for instance
if you implemented custom animations in
in your project like transitions between
your components and stuff like that and
allow designers to prototype and fiddle
around with that while yes just in
chrome dev tools and in their
applications yeah so the the two biggest
things that I think are gonna be real
boons to designer and developer
collaboration are the paint API in the
layout API one of the demos that I gave
is a tab component so the standard tab
component where you buy like a tabbed
accordion and you’ve got that nice
little innards swoop at the end of those
tabs that are really hard to do you can
make a paint worklet for that which I
did and read in the background color of
that tab and then wherever you want to
use that you just say border image outer
outside I think paint that image and
then set the background color you want
and it paints it and then you can resize
them based on properties that you
haven’t CSS you can recolor them based
on background interval just go with
everything that you have so for people
listening like might be thinking like
hey can’t you already extend CSS sort of
with JavaScript today by us you know
writing JavaScript and just making
animations with the Java scripting like
what is what is the difference there so
the key difference here is you the
Houdini specs are designed to work at
render engine speed so you could create
a SVG and have JavaScript parse the
properties and then change all that SVG
for you but that’s a lot of work all
happening on the main thread to get a
very small visual
effect whereas with Houdini you have
this painting context that automatically
scales automatically resizes and can
pull in those properties for you and
doing so at the rendering speed I think
a great example of where this becomes
really powerful is the layout API so one
of the examples I show is masonry layout
with the layout API a masonry layout if
you want to use it today is a ton of
JavaScript and it’s terrible for
performance because everything gets
absolutely positioned but what is that
so the masonry API is an AR sorry the
masonry layout is when you have elements
of different heights usually that stack
go across one two three four five six
but they bump up against each other so
that the actual height is staggered it
was it was really popular a couple years
ago especially I’m like infinite scroll
feeds but to actually get that yeah the
Pinterest exactly but to get that to
work it’s a lot of JavaScript and a lot
of CSS that’s bad for painting and bad
for layout for the actual like painting
layout as of the browser render engine
with Houdini it is less than 50 lines of
JavaScript with no dependencies you can
change how many columns and what the gap
between everything is using standard CSS
properties or custom CSS properties and
it works at render engine speed but is
gorgeous
yeah can you talk a little bit about how
you got into development in the first
place like a very start
yeah so it’s actually kind of something
I fell into so I worked as part of a US
congressional campaign for a couple of
months and my job on that congressional
campaign effectively was the techs are
for three months which means I was the
technical person so I helped build their
website and I helped kind of do all the
tech I
stuff around the office and then as I
was looking for a summer job one year I
found this job with the New York State
Senate and the New York State Senate
kind of combined two passions I had at
the time technology and politics and
they actually wound up initially hiring
me in as a project manager not as a
developer but after a couple months I
got promoted into a developer role and
that developer role they gave me a
little bit of training with and then I
had a mentor and I just kind of went
from there
and as I was doing that I was a back
that’s I was a back-end Drupal developer
there and I found that I really liked
front-end work so I kind of fell into
responsive web design about a year after
Ethan markets article the original
responsive web design article okay so I
I found that and I got really interested
that and I started doing that about a
year after that article came out so I’ve
kind of been on this this edge of
responsive web design since you’ve done
a lot of things like it feels like
you’re fronting and machine learning and
what else so most of my background my
background started doing Drupal
development yeah
moving on to front-end and responsive
web design yeah I’ve done some UX work
as part of responsive web design right
now I mostly do front-end development
node development and DevOps because I
find that that type of tooling stuff
first of all interests me the second is
really critical to having to producing
high-quality worker so I gotten to a
point in my career where I kind of do a
lot of things every day but it’s not
because that’s like I started doing all
those things I focused initially on
front-end development and then once I
had like a really really strong grasp of
that I added in these other things as
I’ve needed them yeah I find that it’s
DevOps especially is extremely valuable
as a front-end developer even if like
you remember I’m at last fourth place I
didn’t spend a lot of time like doing
actual back and work like setting up
servers and
keeping them in production however being
able to set up build systems for for
your tools like getting docker images
running and getting them running in the
in the build system cloud that kind of
stuff not have being dependent on back
in developers to do that but to create
those build system yourself made you
such a better front-end developer so I
really like the idea of like diving in
to multiple things and not getting like
too married to your to your specialty
yeah I like to think of it as being a
t-shaped individual where you have a
deep expertise in one thing and then
shallow knowledge across other areas and
you can start to become like 8 shaped
and W shapes and whatever I would
probably I’m probably closer to H now
because I’ve got it like a deep
front-end development and a pretty beep
node expertise and I’m I’m growing a
DevOps expertise but having that focus
than having a broad set of other skills
is important as well
start with what it’s a what does a
typical work day look like for you yeah
so at our work we have we work in a
process that’s kind of a modified agile
process so first thing in the morning we
get in and we have stand-up where myself
and the members of my team talk about
what we did the previous day what we’re
planning on working on today and if we
have anything that’s gonna block us from
making forward progress
do you have an action like is your stand
up an actual stand up like do you stand
up no we do not stand up because we are
lazy that and we’re all in person so we
all kind of just spin around in our
chairs and look at each other and chat
stand up also oftentimes we get it done
pretty quick usually only about five
minutes but then we spend probably the
next 10 or 15 minutes catching up just
personally and other stuff that we want
to talk about yeah we’ve got a pretty
friendly team yeah stand-ups are kind of
like some people can do respond like
responsibly sit down and stand-ups and
some people just can’t do it it’s just
like if they sit down it just sprawls to
like 25 minutes and even more I
in those places I’ve like pushed for
like know what we’re gonna do an actual
stand up because you people are like
really like talking that is why we stand
up all right do continue yeah so we do
that and then we try and schedule most
of or I try and schedule most of my
meetings in the morning because I find
that I’m most productive when I’ve got a
big chunk of time to work and because to
end ups in the morning and I already
have some kind of disruption in my work
in the morning I like putting all my
meetings in the morning so sometimes
we’ll have meeting meetings in the
morning and then I mostly work in the
afternoon after lunch how do you what
are like working in big chunks is like a
lot of developers like that and this
makes a little sense to do it but it’s
also in practice it might be tricky to
you to do in many workplaces because
there are many like external forces that
try to prevent you from this like what
are things that you do what that you
have started doing in order to like get
more firm long blocks to work with you
have any any tips for people that have a
hard time doing that so my best tip is
to schedule meetings with yourself for
the large blocks of time you want to
work and then block off your calendar
that’s available so you just look like
busy yes and no one can schedule
meetings I can’t I’ve got a conflict
I’ve got a meeting on my calendar you
should so that’s what I like to do I did
that a lot in my previous role where I
really needed to make the space my
manager now is a lot better than a lot
better about having structured space for
us to work so yeah that’s what I like to
do there are some days where we have
kind of like big meeting days yeah so
our schedule our sprint schedule is a
two-week schedule from Wednesday to
Tuesday and every Thursday in the
afternoon we have backlog grooming where
we work with our kind of whiter team to
maintain a backlog maintain our projects
health and so those are big afternoon
meetings and we kind of can’t get rid of
those and every other Tuesday we have
like
and if Sprint stuff so we do a demo to
our wider team we have a retrospective
within our own current team about how
that last sprint went and then we plan
for our next sprint yeah is there any
other habit that you have picked or or
technique or something that you have
picked up during the last few years that
you feel like I’ve really made a
difference to you as a developer that
you you would be able to share you have
anything like that yeah so there are two
one is I got really comfortable in the
terminal I don’t like them or VI I still
actually am a sublime text user Oh
old-school so I used to blind text three
because the way that I use the terminal
is I effectively use sublime text 3 as a
GUI version of VI it’s everything’s its
own window everything is kind of
separated because it’s a native app it
opens so much faster than everything
else and then I just live in the
terminal otherwise that’s one thing
that’s gotten me woodles of productivity
getting really good at the terminal what
do you mean like like them like
everything in its own window can be Ella
bar we’re like so Adam and Visual Studio
and even some blind packs by default is
set up like an IDE where you’ve got all
of your files on one side and then what
you’re working on and then tabs for
everything yep
so instead of doing that every file gets
opened in its new window I don’t have
any tabs I don’t have the mini-map I
don’t have the file browser on the side
it’s just the window I’m working on the
text I’m working on I see and then my
terminal all right so you switch between
the windows or do you keep them in small
little spaces so that’s the other thing
is window management I can’t really good
at window management I have a program on
my computer that lets me set spaces or
places on my monitor where I want to put
windows and attach global keyboard
shortcuts to all of them
so whenever I open up text I’ve got
keyboard shortcuts to throw it to the
left the right the four quadrants if I’m
on my big computer big monitor and I
have my full keyboard I’ve
Thirds setup yeah so that window
management has been key to my
productivity as well for me mooom has
been a boon I really really like it like
being a especially when you switch
between monitor setups between your
laptop laptop and plugging in a screen
and having it like snap into the
structure that you want it does make a
lot of difference is there any book that
you’ve read in the last yet last year or
years or so that you feel like have
impacted your you as a developer or
possibly an article or something like
some piece of writing or material that
you would recommend like people really
should read yeah so a lot of the things
that I’ve been reading recently are
around cultural transformation and
organizational transformation because a
lot of the work that I’ve been doing
outside of my day job is to help build a
better front-end development community
at IBM so there’s one book that I read
some of I didn’t read all of it cuz it’s
really big called diffusion of
innovations which describes how things
get adopted based on a whole bunch of
research oh I love that I want to read
that so it’s a really giant book and
probably start with a Wikipedia article
and then if you’re interested go into
the book but it’s a whole bunch of
research and then all the the discussion
around that research about how things
get adopted early adopters innovators
early majority late majority laggards
and kind of the bell curve of adoption
and where you need to get to actually
have an option start to stick I have
this bucket list thing that I want to
design a language and everybody wants to
design a language but I want to design a
language with like popularity in mind
like as an experiment can we design a
language that is like basically the
language equivalent of a populist party
so like something that is there just to
like gain a lot of traction
isn’t that JavaScript
I suppose yeah I think it should have
like some kind of they’re heavy object
orientation and like static typing it
should kind of feel like it should feel
like Java to the Java developer yeah
catering to the audience kind of thing
you know and that is why I really like
the idea of why ideas spread yeah so
that’s a great one the other two would
be the structure of scientific
revolutions which is a book about how
scientific revolutions happen how our
changes in thinking about science
happened and specifically the what is
the term paradigm shift if you’ve heard
the term paradigm shift yeah your
understanding of that term was coined in
this book yeah so it it describes how
the canonic the how science is normally
taught that’s it’s one continuous stream
of building on top of each other isn’t
true and what actually wound up
happening was the series of paradigm
shifts and what led up to them and what
caused things to stick in things not to
stick and that kind of worked really
well with diffusion of innovations and
then the last one which i think is
probably good for everyone to read is
the field guide to understanding human
error Oh tell me oh of this yeah so the
field guide to understanding human error
is a book written about understanding
human error but specifically it’s about
different ways of thinking about how
human error comes about the big takeaway
is the old way of thinking about human
error according to this book is that
someone did something wrong and they’re
the reason something failed whereas the
way that they’re describing it is there
is a system in place and a human was
trying to work within the system’s
constraints and the system wound up
breaking under those constraints and how
they worked so it’s not necessarily the
it might be the person’s fault but there
they make a distinction between like
legal culpability where someone was
trying to do something wrong
and the system failing under the
constraints that were in place could we
do a segue back to what we were talking
about during the warm-up yeah sure yeah
because we’re in where we’re here in
Stockholm and there is a boss there is a
museum for like the it’s better than you
tell it
sure so the the museum is for this I
think it was a 16th century warship a
Swedish warship that was like the
biggest best thing that was ever
supposed to roam the ocean and if it had
ever actually gotten out it would have
been like the most heavily armored
warship of the time and 20 minutes out
of port well it was still in Stockholm
literally a hundred meters or so from
where the museum is it sank a small gust
of wind came and it killed the ship over
just just like that and then just its
sank to the bottom of the ocean and then
they were able to raise it in the 60s I
believe and the story that I was told
while I was there from the tour guide is
the way that shipbuilding worked back
then everything was kind of in the
shipbuilders master shipbuilders head
and there was a contract with the king
and the the King wanted it to be a
really really big ship but they else he
also wanted it to be a very narrow ship
so it went fast and the problem that we
had is because everything was in
shipbuilders heads if they didn’t have
something to work off of they just kind
of made it up so they were following the
Kings instructions but what roundup
being produced was a ship that was
really long and really really tall and
really really narrow and those three
things combined made for a ship that was
entirely unstable right basically the
equivalent of having many features no
bugs and fast and cheap exactly and at
the end of this story
no one wound up getting blamed for this
colossal disaster because the ship
builder was following the contract they
had ship masters in contract they had
and the contract was following what the
King said he wanted which was a tall
long narrow
that’s so brilliant and again like
coming back to that
ECS people working within the
constraints that they had and what
probably should have been done there is
that somebody should have seen like we
cannot do this within the constraints
that we have yeah something should have
happened but like the constraints wound
up breaking the project and that’s that
was like the systemic failure was the
constraints that the system had in place
so a lot of again a lot of people
watching the show are like people that
are not so long into their careers and
when they’re watching speakers and
people that have been around the block
like you like it’s it seems people talks
tend to be about successes you only see
people successes mostly it’s very rare
that people go about on stage talking
about their failures and which means I
like the inputs impostor syndrome just
roams free so a question I would like to
ask you is tell me a story about failure
like something that a mistake that you
did the impact that you knew negatively
and that was only your fault then was
wasn’t imposed on you in a way yeah be
comfortable with sharing that yeah sure
so two years ago I was working on a
project to rebuild Watson’s
documentation maybe a little bit more
than two years ago and I had joined IBM
a little bit earlier about a year and a
half earlier than that specifically
because I didn’t want to work or triple
it specifically didn’t want to work with
Drupal but I knew that in order for a
new documentation site to be successful
we needed a content management system
now myself and the other senior
developer who was on the team we all
kind of looked for alternatives but we
basically decided that the things that
we wanted were best suited if we just
built our own content manager
system he open sourced it there was a
lot of good work in there but we had a
hard time convincing our documentation
team to use a content management system
they were kind of convinced that all
their content was individual and it was
hard to structure so I made the decision
at the time that it was more important
for us to stand up a good content
management system even if it took more
time rather than standing up a quick
content management system and getting
people actually using it quickly because
my view was that if we stood something
up quickly and they liked it then that’s
what we would be stuck with so I didn’t
want to do that and what wound up
happening was we had been given six
months to get this up and running and we
got it mostly upper running in six
months but the fact that no one could
play with it no one could work with it
for that six months meant that it kept
getting harder and harder to get by and
once it was actually available so the
project wind up getting scuttled before
we were able to launch it or finish the
CMS because there was just a lot of
tension built up because it was just us
promising that something would be
delivered even though we had agreement
on the delivery date because they
couldn’t do anything in that time it was
just time for us to argue about
everybody had everyone had a yeah so
because we didn’t have something
tangible for them to work with quickly
it kind of became moot that we had a
good thing at the end because they the
project didn’t exist anymore because we
took too long to deliver a thing is
there anything else that you would like
to like to add something that you would
like to tell my audience like something
that something you want to communicate
to like one hundred thousand eight
hundred eighty thousand you know
developer or not everybody it’s you near
but so one thing that’s a little bit
unique about my story is I didn’t go to
school for computer science not only did
I not go to school from computer science
I don’t have a degree
everything that I know I kind of learned
on the job and was that initial in New
York State Senate kind of taking a
chance on me and mentoring me so it’s
entirely possible to have a successful
development career without having that
formal computer science training or even
without having a formal degree even at
large companies like IBM where I work
now that is an excellent point I want to
push that as well actually because I
don’t have a my background is in theater
and video production okay I actually
feel like that should be that should be
pushed a lot more like people with
various interesting backgrounds have
interviewed a bunch of journalists
lately because journalism is a shrinking
area and it becomes natural for
journalists to move over to programming
because there’s a lot of about creating
structure that pieces of text and think
of a lot about stakeholders and how
things fit together so it’s like they
bring something very interesting in plus
that they are superb at writing
documentation and also like the I heard
this talk I think it was as Jay s conk
where we met a guy who talked about
moving from forklift driver to
JavaScript eval oh yeah yeah I remember
I really liked that talk I think that’s
really important because we have a lot
of like oh you have to study computer
science in order to become a fantastic
and you know you might need to know some
of the computer science stuff for
specifically coding interviews but you
don’t need that in your everyday work I
have never needed to reverse a linked
list or write my own depth-first search
never ever know I I made use of a binary
tree once like that binary search I did
that for like be able to search an array
very fast but it’s kind of like npm
install’
I know all right so where did people
find you online to follow you and keep
up with the stuff that you’re doing
what’s the best way of doing that so the
best way is Twitter
on Twitter SN ug o G so the best way to
follow me online is Twitter SN ug UG
snug UGG that’s also my website I don’t
update that so much if you’re interested
in the Houdini stuff there’s a website
Houdini glitch not me which is an
interactive introduction to Houdini that
you should go play with sweet thank you
so much for coming this has been like it
was a blast talking to you that is it
you should follow snug on Twitter
there’s a handy link to his profile in
the episode description and in the
episode description there is also our
sponsor launch darkly now has a very
handy integration with JIRA and you can
check out how that works at the launch
darkly dot fun hunt function dot-com in
case you are new you have just watched
an episode of fun fun function I release
these every Monday morning o 800 GMT but
you will forget that so you can
subscribe by clicking here or watch
another episode right now by clicking
here
I am mpj until next Monday morning stay curious
Please follow and like us: