E5: Tyler
Tyler began by only having CSS to repair part of a site to building Cutestrap and mastering the Front End styling needed for good looking hackery
The Power Hackers series continues with Tyler Childs, the CSS Guru that made Cutestrap when he realized he was spending too much time taming Bootstrap and how he shares what he knows and reminds us that the web is still an open playground in which to inspect code and learn from the greats. Learn about practical techniques on styling and working in the front end, how he hacked together subtle interstitial screens to give products the finished feel, and hear about his journey to Silicon Valley and Netflix. His articles are available on https://www.tylerchilds.com/ as well as around the web.
With his help on https://14quick.org , we decided to drop the trailer from the Final Fantasy XIV 2019 speedrun attempt, and a little chat about how we’re going to beat the world record this year!
Transcript:
all right what is
up everybody we are live tonight in
episode five
of the power hackers with power hacker
extraordinaire mr
tyler childs are you here with us
tonight tyler
check check am i here can you hear me he
is totally here i
i hear him i hope you hear him i hope
everybody who's hanging out is hearing
them so
we are just this is an exciting show so
for those of you who haven't
caught a wednesday night before
wednesdays i've been basically talking
to
the most hackerists hack
people that i know that just they they
possess the vibe
of so they they are the infusion of
silicon valley if you put them in a t
like you can actually just like just
taste like the hack and we have
one of those people here tonight and he
actually
knows the guy that we talked to last
week so last week when we were speaking
with mr
joey cato here he is this is mr tyler
childs
and you you actually work with joey
right
hey yeah um it's going to be a lot to
follow up after joey's stuff
joey's not a role model he's like the
hacker of hackers joey's joey's just
everybody's role model
i should
have asked him that damn it
yes who writes these interview questions
come on
you know what i need this stuff okay so
tyler you do get to work with him you do
are you are
currently with him on the web and
sort of sign up flow team over at
netflix
is that fair yeah working on um sign up
on the part
on the payments side of things um i'm
actually gonna be switching to a new
team
next monday wow and you are totally
gonna be telling us about that
as we get in that point of the journey
but just just for frame of reference
everybody this guy
does work with uh joey so we have nice
little continuity story arc going here
so we
that's it feels like it's like a little
bit a little bit of like episode
planning it's that's beyond my normal
skill so
all right let me just pat myself all
right we're good all right so
anyway let's you didn't just start off
netflix was not your first gig
when you came to silicon valley you you
were from the east coast
originally is that yeah okay yeah good
absolutely people writers things totally
have this right okay that's
that's good because i think i wrote them
all right so the cape the cape refers to
cape cod which is something that people
in the valley which would be silicon
valley
don't may or may not know i don't know d
do you
run into that problem when you're
talking to people like you're like i'm
from the cape and they're like
what yeah all the time whenever
anybody's describing where they're from
it's like some small region that only
the people in that region know about
yeah lord of zozel is going on this is
like you know more east coast people
this is west coast you are live right
now on the west coast aren't you it's
still sunlight there i'm
look at this darkness i mean it's just
well it's all right it's green yeah you
get a lot of music on your head
yeah it's totally dark okay so
the most hackers and hackers is
somewhere in their basement doing it for
fun
all right lord azaezel okay you're from
new york cool hey what's up
um so i took a wrong turn into new york
today incidentally
i'm gonna just tell you that i was
trying to drive upstate
i was it's like the last chance to buy
corn you know there's so there's this
thing that like grows in the ground when
you have water
i know this is foreign to people in
silicon valley but like you know like
it's
you eat it it's like super good so
i uh just really you know the farmer's
like this is it this is the last go and
i was like yep i'm doing that and i went
upstate and i
missed the turn on seven and the next
thing you know i'm like wow some
freaking new yorkers like broke into
connecticut spain
spray painted i love new york into our
middle divider and then i was like
no okay no no guy he screwed it up so
that you you got over that years ago
you just like hitchhiked across the
country i mean how how did you
like go to silicon valley yeah the
actual like moving out here part was a
road trip road trip
epic road trip okay wow you just drove
it straight through like the middle
route the high route yeah straight
through kansas whatever that route is
the street don't fall asleep part okay
yeah
i heard the rumor that they actually
like put curves in the highway because
people were falling asleep
on the highway because it's just it's so
straight that
they would just fall asleep and in the
first turn they would like just crash so
they actually like
added the curves is what i heard no i
don't it felt really straight to me
but i was battling the wind that was the
real challenge cross winds on my honda
element are just rough
yeah because it's it's a field right you
know it's like
no hills there until you're like massive
hills okay so then you went over the
mountains
and san francisco or down in the valley
wait where
where did you land there uh came through
sacramento and then landed uh
in the valley and i didn't see the
entire trip didn't see any like police
officers until we got to hacker mendo
and then there was like
20. so if you didn't get pulled over or
anything but it's crazy how there's
nothing in the middle of the country
yeah i also never got pulled over
on that journey so very real
yeah moving on so um you joined uh
inflection at that point right you
they were they were just talking to you
you were looking around for work you
found
this company and what were they doing
yeah
um so i hit up my friend that was
working there um because i was kind of
happy unhappy at the job that i was like
working on i was like what else is going
on so i kind of hit him up
um and the work there wasn't super
exciting but i just wanted to get out
into
silicon valley and see what all their
opportunities could be there
um but i landed working on like an
identity verification like as a service
uh okay like added okay so you know a
lot about identity then
yeah that's that's right ripe with humor
but i'm not i'm not going there because
startups right i mean it's like probably
gotten a million times like i mean but
i saw the id t-shirts i thought
is the is it is it in soft is it is it
doom is it
like
i didn't know the right way to say it so
you yeah you chilled there for a while
what what kind of stuff were you doing
there when you got when you arrived
yeah um when i first started it was just
doing you know front end like web dev
stuff
uh working on backbone with backbone js
backbone js
yeah that was that was that era yeah
yeah marionette
to like flesh out the rough edges around
backbone
that wow there's there's a lot of rough
edges that we actually
we can see that we can see the the
boyish
looks as you were kind of getting ready
for that journey
and and you know just just proud
standing tall ready to go
for work you know like let's let's let's
do this
to you know the next day and it was like
this
that was way back though that that that
one was 2000 the other one was 2008 is
also 2008 this is
when i was working in massachusetts oh
okay so it hadn't actually gone over yet
but that worked
this is like the first entry into the
work world like this yeah this was this
is data entry this is what i was doing
there oh man
you were like i'm getting out of this
okay so with that
no more data entry so you then web
design
infinity that's so that's actually when
you were still there
roommates and chilling and then
just you got into this is a proper
startup
i mean this is like a room with some
computers and
the ergonomics that that's our apartment
okay okay that was where i was working
on web design infiniti though
i was gonna say this this is full legit
startup i mean i nothing has said
startup to me more than this photo but
that is that is amazing okay so you
graduated
um you came across and
that was that was yeah they you see this
guy's laughing because he's like i know
what's coming
let me know on stage i took a selfie
walking across the stage as i'm getting
the diploma from the
chancellor from from the community
college there nice he's
he's he's amused cause he's like yeah
data entry
you're not gonna be happy but you okay
we're gonna we're gonna cut ahead to
the valley and if i got this right this
i'm just gonna kind of jump here wow you
were
you were that's just the lan party oh
this is packs
yeah this is this is pax east in 2010 oh
that
and you won right because wow first
place halo 3.
i got carried by my friends like i'm
like the worst one out of the three of
us and then we've got a fourth guy has a
random
team and that is some nice video game
have you ever played uh the primogen
paulson
in uh in in halo i understand he used to
be like pretty serious halo player
i have not played him in halo i think uh
i know i haven't played any games with
with paul since okay
i'm down like the gauntlet is thrown
right on his throne
that's no no no call it throwing okay
so he um you can you can ask him some
time about the the last time him and i
played tetris he doesn't want to talk to
me anymore about video games that we're
just
we're done like he's like nope nope not
doing it
yeah i know this was you could actually
lord of zazzle you could
do this in a room and no one had to wear
a mask like this this is
a lan party like this was a thing you
could do back then
that's okay so we moved on we got across
the country
we oh we were in puerto rico first we
i'm sorry i did skip a few important
things here that we were
chilling in puerto rico and working on
our spanish right what
yeah i was doing a missions trip down
there for
um one one summer and just hanging out
um in the projects with like the
the kids there um and the purple shorts
there that's perla
the reason why her hair is so short the
she had
they needed to cut it she gave that to a
lot of people last summer
oh wow that's awesome yeah great though
i loved her
okay we got some family we're bowling
we're getting okay now we're now we're
getting into a real cube we're
we're moving along now
here's a proper launch like everyone's a
little bit stressed it might have worked
we don't really know
that is am i reading this scene right
okay
exactly there's a couple guy like i like
this guy
he's like no no no no this is not good
this this i'm with you man this is not
good these guys like yeah
it's fine right there just a couple a
couple bumps in the road wait wait a
minute what's what
really and then they're just okay that
that but there's a lot of monitors
there's a lot of coffee all right so
people are
like digging in on this so this
all right that but that was fun right
identity
i mean you know being in the valley like
starting first phase of the dream right
yeah exactly you gotta start somewhere
okay all right makes sense
you were taming so you obtained
some of your frameworks and then you
said you know what i'm going to double
down on css frameworks i i am
you know this bootstrap thing is just
it's not working for me
like it's too heavy it's just way too
heavy it's it's a big
massive project there's way too much the
docks alone
are larger than cutestrap i mean like
you you could actually take the
documentation
and and that would vastly outweigh this
thing i mean so
cutestrap sort of play on bootstrap you
were like
i'm going to sort this out is that how
did you like
get to wanting to own your own framework
because there's there's a lot of trouble
when you own your own framework
yeah and i'm never going to do that
again but
it actually came down to this uh one one
person gave me this like earworm of an
idea
um called vertical rhythm um okay and
i'll describe that a little bit for
your viewers but um basically the gist
is like
when you're viewing um content to have
like this like
vertical grid like you have like you
know horizontal grids like 12 line
12 column grid against 960 pixels right
um so what do you do for like that
vertical stuff and i was like
i bet you can do something that's
perfectly aligned to like each of those
so
at that point it was this challenge of
solving out like all of the pixels
okay you're not allowed to use a table
right yeah no tables okay because that's
totally what i do i just i i know it's
not cool
right i i'm not cool like that okay so
no no tables are totally fine honestly
okay when you think about like when you
put an image in
how the default um display um of an
image is still going to have like four
pixels below because of the line height
of the image so just trying to solve all
of those
weird pixels to exploit that out from
whoever's using the framework
all right but isn't that different from
browser to browser i mean they all have
the same line height
calculations or do you have to like i
mean that sounds hard right there
you could you could set it in css so by
default they all had and that's where
kind of like the reset css
like uh style sheet eric meyer came from
um originally was trying to
normalize across browsers and this just
kind of takes that up to the next level
without
actually being like practical it's fun
it's cool it's a parlor trick
but do you really need to have like
every single pixel accounted for i don't
know
right right okay that's good point all
right i i don't know i
like i'm so bad with css like people
just tell me that like you know i mean
this needs to be pixel perfect this
doesn't
i mean pixel perfect sounds to me like
there's really only one option
you you either nailed it
or you did not nail it you nailed it in
the other sense
yeah okay so so cutestrap like all
right so it was born in that
super minimalistic and to somebody who's
like not great with css i mean
i want to use this instead of bootstrap
because i mean i've tried bootstrap and
i've
kind of gotten nowhere and i've sort of
given up i end up like just
like trying to hand style stuff like
like do i
i mean so is this about that onboarding
experience is it about like the
cognitive load that a developer has to
go through to like really i mean
because i've seen people do amazing
stuff with bootstrap but it seems like
you have to
spin up a ton of stuff in your brain to
get your head around it
yeah there's absolutely that cognitive
load um
with with bootstrap so this does like
try to address that somewhat by
you know really limiting the api
footprint and what i like the most about
compute strap
is um the forms like each form element
has followed like a similar syntax or
pattern to try and normalize how
like check boxes for example and like
input elements
they're just different for how you need
to like get them presentational
like to look good so that's what i was
kind of going for with with cutestrap
was to
here's how you do your dom like how you
you do your mark up a little bit
um and it's always the same way no
matter what form control you're trying
to build and then you can just trust
that the styles are going to hook into
that to
look good i like that that
that that sounds like what i want
actually
that is okay that i am i i'm trying it
that's that
that that did it so this is how you
ended up getting just attacked
on i mean like graphs
happened right because everybody said
you know what that makes a ton of sense
i
it has an opinion it's sassy it look
look at the red
pink like logo thing it's it's cute
i mean what it what happened like how
did this spike happen like what
you just one day was like what is going
on here
yeah there was definitely that what is
happening actually
i posted it to reddit originally because
i like to get feedback on things that i
work on for like dumb ideas and reddit
is just like a really good place to get
like
any idea you throw out there like dumped
on
okay i i posted on reddit nothing
happened okay like nothing
i didn't post on reddit somebody posted
the like nintendo
on like netflix on the original nintendo
on reddit
and i got dumped on and i didn't post it
i had nothing to do with it i just one
day it was like oh somebody's
calling me a bag of sticks and um
that's that's nice of them i i don't
know why they're doing that
but so you just you you went into this
knowing that like read it maybe i don't
understand reddit maybe it like just
this is what you're supposed to do with
it was ask feedback and i just
followed the wrong protocol so like what
what happened like i mean you posted it
you're like
couple people say this is cool and
they said no or what yeah it was it was
kind of like a
there was only like i think probably two
responses on reddit itself
um of you know people being like it's a
good idea about it i didn't actually get
the feedback i wanted to
from there but what ended up happening
was this is how i learned about hacker
news was somebody telling me dude you're
on the front of hacker news
and i'm like what is hacker news and
then i pull up my google analytics and
this is what i this spike
is the front of hacker news so that this
wow that's
and you got the tool tip here we're at
13 000
users i mean that what a spike just and
that echo effect
that's only hacker news like nothing
else is affecting that and then the
trail off of hacker news and then the
trail off
i mean did general usage go up how do
you even track that i don't even know
what
yeah i guess we could pull up the the
github um repo that
the stars the stars are the only stars
that i have yeah okay
they're like yeah you have some stars i
mean now i mean but at netflix we
ditched the stars right you know we were
like stars don't work but
stars yeah thumbs down right yeah we
were like okay stars
are ineffective but you know that that's
it that's our only metric on github so
you saw a lot of stars and you said wow
crap i have a job
like i have this thing that i was just
trying to get some feedback on is like
my world now yeah exactly and
i could not handle that like it was i
was like where's this feature i'm using
your thing and it doesn't say this
you're like
i didn't write the korean version of the
language like documentation what's going
on here
yeah exactly um but luckily i i think i
i got lucky with cutestrap in that that
was the first one to go viral and it's
like an opinionated these are my
opinions and
we're not gonna add a whole lot more to
it so it's very easy to shut down new
ideas and being like that okay that's
outside it's going to go up bootstrap
okay so is that why you write
opinionated in the description because
then you're allowed to do that
yeah that's that's the disclaimer you
need and then people will be like i
really like that this is opinionated
it's like why have we not all been doing
that the whole
time i wow i
i feel educated that is like that's like
a whole chapter of life i'm getting
wrong right there but
okay just like my opinions man no i that
as long as you're allowed to all right i
didn't know you could do that i didn't i
didn't
know that was something you could do
okay so now i understand why they all
say they're opinionated
in the framework i totally i was like
what does that word mean i mean is it
just like the framework has an opinion
it's this non-corporeal entity that
tells us
the direction of development and
architecture in the future what does
that mean i don't
understand that i took the mantle of the
non-corporeal entity
okay i'm i'm going with you on that i so
sims
you left that why why are we looking at
sim you just played too much sims
why is this why is this picture here um
last week's episode with joey um because
we were kind of like two ships passing
in redwood shores
okay nice stuff because jelly was over
at
ea doing sims and you were just like you
know what we're we're like we're going
to meet but we're not going to meet yet
but you're like yeah your day is coming
i'm going to meet you
okay so you basically all right so
you're at universal with the lady
there's yeah
that that's a so that picture is me
being totally free
i had just got let go from uh inflection
and you went to universal and we already
had plans to go to universal i'm so glad
i got let go before vacation instead of
after can you imagine if i was thinking
about work for that vacation man i
i knew i liked you is this this photo
knowing that context like
that's it right there you go to
universal do you go to universe you
here's the photo i went to universe you
just
there was no harry potter world at this
point was there
that was 2018 so there was yeah yeah
welcome to harry potter world we had a
good time in harry potter world okay
yeah all right
all right yeah oh okay all right
representing so you enjoyed it anyway
you're like
we're id you know what id don't have any
i'm done with the id i'm not wearing the
shirt
and yep you're having frozen bananas
that's you're just this is like the
greatest vacation ever because
you're just like yeah i don't have to
worry about anything like there's
nothing on my mind this is not
clearing my mind to have to go back to
work you were
no that was inside of netflix that's
inside of the line oh oh oh this is
after queer eye right right okay so
you so somebody noticed you at universe
all right i'm going to fill the story
just somebody said this guy at the
banana booth
with the cutestrap you're coming here
right how what
okay what how did how did the next frame
happen like how did we get from
universal carefree
cutestrap blew up not sure what to do
with it to
i'm pumping code on web
and that the machine is you know the
netflix netflix has
heard of in 2018 i mean is that 2019 i
don't know what
yeah that's 2018 and uh you know
right after getting back from universal
kind of hit the ground running of like
what am i gonna do for my next gig
i don't know but the first thing is to
hit up all my friends and get free lunch
from all their startups
that's the right thing to do that's the
right thing to do
netflix being sort of a startup and sort
of not a startup at that point i mean
just netflix wasn't even on my radar at
that point i didn't
have any aspirations to work at netflix
it wasn't until after getting lunch that
i was like that's where i wanted
lunch which which lunch how many lunches
that's
that's what i want to know i mean
because because i actually hit on this
theory at one point in silicon valley
that
you could just keep interviewing because
they kept putting me up at like
hotels and like bringing me out to like
you know and i was like
i don't live here you know like you know
it was one of those like you know you're
trying to like
fill out a credit card statement you're
like you know address and you're like
you know like i mean you're asking the
reception
what's the address here i i'm not i need
to get something
like i mean so you're in that state but
you ended by meeting
so the right friend told you to come to
netflix or what
was the you saw a talk or what was the
connection there
yeah it was the the right friend so my
friend miriam i worked with um adam
fletcher
um she's an amazing designer okay um so
i was getting lunch with her at netflix
and you're like the lunch is good the
lunch is good
i mean she set me up with my um
my who was my manager she just recently
transitioned to a different team at
netflix but uh tara
um i ended up having uh right after
having lunch with miriam
just talked to tara for a little bit
just like you know just like feeling it
out like
would you like to work in netflix like
what are you like doing like what are
you looking for and
like from there it's like i really like
tara i really like
the the um the culture that i'm hearing
about at netflix so i was like okay i
see myself here
okay that was kind of the connection all
right and then you had to get through
the interview and you're like they're
like here's some css and you're like
dude i wrote that book like you know you
i did bring up cutestrap in the
interview yeah i like css i want to
write more css and i'm opinionated it
says on the webpage
that i'm opinionated on the way this
framework works so if you're wondering
where i stand it's right there thank you
interview done
easiest interview ever i mean but that's
a unique skill
i mean i feel like especially having
been in software for a while like i
think of css and i i shudder and cringe
i mean but
you think of css and you immediately
have the metrics the dimensions you're
starting to think like
i could do this like 10 different ways i
could fiddle it different ways i've seen
you fiddle things to me
just like in casual conversation like
you know i would do the barn door this
way you know
just a fiddle comes back you know it
i mean how do you get your head around
that because
that's a long way from data entry
yeah and i guess it kind of does go back
to getting out of that data entry is
when i was working at that company
marketing advocate um
i was you know taking classes at the
community college and one of the back
end devs was like hey
so we've got this menu that like is like
wrapping to the next line there's a
border here
so and it shouldn't and it shouldn't so
they were like can you fiddle with this
and from there they're like you can play
with the css that's the only code you're
allowed to touch
this entire thing so if the only code
you have access to is css everything is
a nail
get it then you get it okay so that that
was
the lens right so it's like it just
brought focus you're like
this is what i'm gonna change and i have
to make this effect happen
yeah exactly that's and building up that
mental model of
the box model if you're trying to get it
into css like
no i have the book i've tried i i don't
have the box whatever the box model
voodoo is is not in my world i i it's
not my purview but
i like that your framework has an
opinion on that because i can just
borrow your opinions
so i'm totally trying that out we're
gonna we're gonna live code that later
but
so we're at we should absolutely do that
that that's a good idea right so we're
gonna we're gonna hold that we're gonna
pin that
so there you are at netflix and queer
eye
has just been announced we're
relaunching it
you're taking photos you're like this is
awesome yeah i like taking selfies
okay no that's about it it's pretty yeah
just hanging in the bathroom and then
you're back at a startup again what what
do we mix up the order
no you're that's another land party
that's a land party i just i don't know
i just threw some land party photos
now it's now it's west coast you're
rocking it by coastal
suddenly there's a lot more lights on
the computers some people have like
mobile computers with decent gpus like
i've never seen that before like i mean
those things are hot
like physically hot
what's the game here by the way what uh
i think that night we were playing um a
little bit of overwatch
we were playing something else there was
at that exact night there was like some
like rushing cracked version of halo 3
that got like leaked
so i but of course we have licenses for
everything because you don't have
license to do that right
so yeah all right so we we did that and
the dog is like i'm in like i'm just
watson watson
i like the netflix bandana i know that
bandana i've seen that bandit i feel
like that bandana is from
neil's summer
picnic who's neil okay
all right so that was before your time
all right so bad all right no no i might
have the wrong bandana i i'm not sure
which bandana it is but
that i feel like that was neal's summer
picnic so i'm gonna i'm gonna
forget that but the dog is wearing it
well i i think i think mine is still
sitting in a closet
so lord of zazzle licenses okay we're
good with our vendors right so we
believe in licenses all right
so dog clearly believes in licenses this
is licensed
swag from netflix okay so that's a great
photo but
by the way i just love it and he's he
really is into the swag he's got the
gray hat
it's the the graphic yeah
that's that's a good that's the new logo
on the end but that
okay so this is what are we this is a
new apartment
um that was one of my places when i was
doing the the lunch tour
for a gig so that's that's inside of
credit karma um
that's like study that they just like
have it used to be some
i don't know a politician or something
like corner office um and now it's just
a little work space that's great look at
the people i see legs people are just
sleeping there midday or what why
wouldn't you sleep there i would
totally sleep there all right that's
that's pretty cool have more cool
offices what
where is this um that one's uh facebook
so there's like an arcade
that room there right okay it's a really
good barbecue that day with my friend
scott
all right that man these are i had lunch
at all the wrong places
that's linked okay i know that one i've
been there that they i like their coffee
bar they got the really nice coffee bar
they have a dessert
chef that just like has one job making
dessert
you had one job made the dessert
okay so that wow you really did
rock this robin hood robin hood chilling
inside this picture but they had this
like wall of moths
my friend alejandra was telling me that
like a bunch of employees like went to
the woods
on some hike and they were grabbing moss
i think that's probably bad for the
ecosystem
but they wanted it for their wall and
they wanted it free okay
so they borrowed the moss and they
borrowed them off they'll give it back
eventually right
okay so we have stuff on the stairs
we're climbing the stairs
yeah that one's uh it's square square
okay
you have to pay for your lunch there
talk about dog fooding by the way we
need to
we'll probably give you a credit but you
have to pay you have to go through the
swipe terminal and make sure that
everything works okay
that's actually what happens that's
exactly what happened at netflix they
actually they
people at netflix a long time ago this
predated me this is like
i don't i don't even know like around
2010 to it's
somewhere somewhere a while ago they
basically had free netflix and then that
disappeared because there was issues
with the sign up flow
and so they said okay you know what all
of you don't have free
free nap what we're going to do is we're
going to add eight bucks a month to
everybody's salary
and you're all gonna sign up for the app
and we're gonna we're gonna get this
sorted out like i mean
there's the dog fooding all right so the
dog was already there had the swag
all right so that is still that's not
netflix
uh this one's thumbtack up in san
francisco they had they had a really
good lunch this is
there that's all you really got all
right i got i got to stay oh man because
that
i know where we're going next so this
last one i i don't know this one
that one that one's uber that's like
their space hallway but the
funny story about uber they have this
like spiral staircase that's like
four inches off of the ground like it's
attached to the floor above it
and it's four inches off the ground and
it cost like four million dollars and
travis really wanted it
and it sounds like the dumbest thing
i've ever heard okay that's yeah
that sounds terrible okay but now you're
down in la
and you're hacking because you're doing
the thing that needs to be done you're
and you won this is like
now i remember seeing you during this
hack day and
they had some great swag they had some
great trophies um
and you were having your hack was
actually working
i think i think the problem was we uh
started a little bit before hack day so
more of a
pivot so because because mine was not
working and i heard the sounds of
merriment
at like two or three in the morning when
you both were like
you and archana like a couple other
people were like walking by and having a
beer
and i'm like i want to play
i know i wanted to help you with your
css i was like let me come i'd
be working on your dance at 2am i could
help i didn't i did not understand your
your guruness at that point with the css
all right that
trust me that conversation would have
gone differently but
like okay all this merry mint and fun
that's over here
all right so without you hanging out
with us too yeah i really
yeah that but you you were with joey you
were on this this team this is the
prodigal hack
and that's what's up so i think you did
the different we did different things
he's wearing the prodigal hacker that's
right yeah because
you both wow that so i don't even know i
had time to do
more than one hack that that blows my
mind because i guess my hacks never let
me do that but
you terra vision was a pretty sweet hack
i
are we allowed to talk about that is
that yeah we can absolutely talk about
terror vision because
it's inside of a blog post so because
it's in a blog post
that makes your game that's unlimited
okay okay so we are allowed to say that
hello fafi by the way um
hear about one of the coolest hacks so
tell us teravision this is
this is a sweet so you met noessa you
heard about
this why don't you describe it i i i'm
going to ruin it
yeah how much detail should we go into
because i mean i also met ted sarandos
during this whole
deal and did you so there's only one
thing i do every time i see ted sarandos
and that's i asked i'm like yeah you
already know you
already know like that's
i'm like ted i haven't seen firefly
season two yet
i i'm like i'm just i'm just saying
you're doing a lot of great work you
know there's this
whole la thing that that's wonderful
you're doing a wonderful job but
but firefly okay look i just need to
bring firefly back
i and and you talked to him probably not
about fire
it wasn't about firefly yeah just hung
very cool guy now the co-ceo of netflix
too
yeah absolutely and i didn't know that
then because it wasn't no he wasn't that
bad
no yeah that hadn't happened yet like
you were you were respecting the fourth
dimension okay so
like basically like that always respect
fourth event you have to bring a lot of
you know the rules okay
whatever else you talk about please okay
you know we don't we don't want mayhem
here on the channel all right so um
basically you're we're down in la this
is their first ever
hack day in the studio and we were
actually in a real sound stage
hacking and there was like fire marshals
signing off on like you know the layout
of the place and so everybody's like
just what what an awesome hack
environment to be in a real
and as i understood it this was the same
sound stage that was
hollywood squares oh whoa i didn't
realize that
yeah this is apparently where it was
like back in the day like this is
literally the same space and we're just
sort of chilling there
building television or whatever we're
building i i
don't know what we're how much we're
supposed to say i mean
i was i had my buried joke and my hack
is why i was there till three in the
morning trying to get like
a firefly season two thing when i talked
to my voice ai
but that of course didn't work when i
was on stage
it never does the demo never goes around
never that's that's advice to all of you
viewers
do not do not try a voice ui
hack on stage at a hack day that's just
just don't do it just that that's that
was my learning
but also never sweat the demo because
it's going to go wrong
it's going to go wrong yes totally
okay noted so they they noted it we're
good um
but that was a super fun experience i
mean they you know flew down there
chilled out for a little bit and headed
back up
and that was i mean and you had the
right shoes you had the right footwear
for that oh yeah yeah but before we go
do you only actually talk about terrible
oh yeah yeah sorry i didn't know how
much you were allowed yeah yeah
um so the the gist of terravision
somebody else is you know
doing that all hard work of all the
heavy lifting but the gist
i view the css the hard work to be
honest that's just me
like like computer vision and like
artificial intelligence like recurrent
neural networks no problem like
all right now get this like thing not to
overflow on a box like
forget it it's beyond me
dumpster fire you see do you see my
email network yeah i know do you see
that do you see my emotes these are
pixel emotes you get from subscribing to
my channel that this is
this is the dumpster fire that is
usually my css okay
i usually refer to my own code with the
dumpster fire that's generally what that
emote is for but
you switch forward isn't css as a dump
survivor
okay okay so so anyway the hard work
you're gonna describe the act okay tell
us
yeah um so the the gist is when you're
trying to like
work on finding locations for films and
movies
you need to go and take pictures of
those locations then you need to have
like a record of like those locations
and
who actually keeps track of that and
where do you actually know and like
there's just so many pictures and so
many like
gps coordinates like how can you figure
out where is a good place to film
something
um so the idea is basically what if you
could go to google images and you could
be like
i want to film in a bar and then you
could just take that picture of a bar
and you can drag and drop upload it and
it's going to find
all of the locations that we have
scouted already scouting
scouting at bars are we are we allowed
to scout at bars can i why did i miss
out on that
are you guys all drinking like no i'm
i'm scouting do you see the camera
i'm sorry i'm scouting here i need to
scout every bar
in the area that i miss my calling in
life do you
all right anyway that is the pro tip is
to keep all of yours
that's okay okay so i'm gonna do a
little virtual scouting right here
carry on also cheers for scouting oh yep
cheers cheers cheers for scouting
um actually those are two jobs that i
think everybody in the world would
probably want like one would be like
a location scout for bars for netflix
where the
expenses are all paid two would be
watching netflix to determine the
categories of content
and so they're professional watchers
that sit on a couch and
watch netflix as a job like you know so
like all those facetious
calls from parents to children like
you're watching netflix like it's your
job like that is someone's job
like that job exists so it's pretty dope
i'm super jealous like i mean give me
css and that
get rid of all of the other programming
okay all right we'll put the css on the
couch all right so
anyway so you're doing virtual location
scouting with this
this uh bar and i'm just thinking the
dumpster fire my css and so
not not that and you're looking around
and you can drag and drop and it finds
like
related stuff based on the image that
you're sending
yeah exactly and i think what made the
the hack really stand out um was the
fact that it
you'd i blurred the lines on how long it
actually took
to get the results up because it took
about like 10 seconds because it's a
pretty big like
operation yeah um so i always think
about this story and i'm gonna totally
butcher it but
um i heard this story about this like
airport right and when you don't get off
the plane and you gotta go get your bags
from baggage claim and then you're just
waiting at baggage claim for a super
long time you're like
man i got places to be yeah uh the
airport ended up making it
take longer to get from your plane to
where the baggage was
that way you waited less well that was
that was the disney style right because
like if you make the line wrap around
and they can't see the line
then it's okay that everybody's waiting
forever at the theme park right you know
that that
it's mind hacking okay so like all right
so so you're about to do this with css
i love where this is going tell tell me
tell me
yeah it's really nothing like supe super
special super flashy but after you did
like the drag and drop upload we just
kind of like
did some like ease in and ease out
animations of um
netflix has this like thing called like
the stack um and that's basically just
like that branding term for
you know the red and then like a picture
of something coming through and then
like pausing so
yeah so you drag and drop the image on
there it does a couple of those and then
freezes on the image that you just
uploaded
uploaded and it's like processing and
then it like does like the next one and
like that's all just like obscuring the
network
latency of
i'd be having so much fun like i don't
want to see the results like go back to
the
that was so flashy it felt like it was
doing something okay
let's just just tell i actually told the
viewers about the 25
bar on the spinner i'm like i'm like
that that's fiction that
that's what that's not real no
no 25 and 99 hardcoded i swear
they're different errors uh 25 is no
response 99
is licensed so that anyway there's
there's codes when you look at the
spinner
of like what's happening you know so a
programmer can look at it go
oh no you know like you're sitting in a
room and somebody's like
no it's fine it's at 25. just just just
be patient guy and i'm like
no no
that reminds me of um this thing i read
a while ago about xbox 360 and this is
totally worth googling and looking up
but this guy was working on um xbox 360
on like some of the development units
you got to like send out the development
units to developers to like work on it
oh the splash
there was like a little like xbox logo
and the little like circles like
rippling out and the rate
with the which the ripples happen is
like uniquely identified so if anybody
leaked anything they knew exactly which
console
came from yep i actually have the image
i
i don't know where i put it but you know
like i actually have the image of that
when
somebody told told me about that i was
like
just a cool one yeah that is oh and by
the way
thank you for the follow i appreciate it
um and also joe cantu
okay so anyway we're we're back here and
you're doing that and that was a winner
right i mean that was
that was what was needed to win yeah
it's totally a team thing though because
like
um had like teams
did the hack day um the the hack day
before for like the first iteration of
like tara which was just like the
map of the location um but she's like
networking the entire
event too so i think that's another
secret to hack day is to like have
somebody that's like advocating like
it's like it all comes down to voting at
the end that's
that's the question i was going to ask
later how do you like how do you win
hacks but anyway that
that there it is that as flashy as my
animations were
hands down one won that hack day for the
game she's she's
she is good at that okay so um well
that was what she's about so that was
that nice solid win
very good and then the shoes now now we
can talk about the shoes i i'm sorry i
didn't need to i didn't mean to i didn't
mean that
i've always had more to unpack no no no
you're right you're absolutely right
that television is a great hack
i love that one okay so but you're
wearing these right
size 66 vans so that's on my
desk at work and then somebody saw it
and it was like wait i have a size like
a giant shoe as well so they brought it
over and we took a little little photo
shoot it
is awesome okay so that yep super cool
the giant banshee though um i got that
for free
from the manager at the van store um in
like the hillsdale mall i was in there
like twice in like one week you know
i just like vans a lot um so it's just
like talking with the guy and then
about stuff like both times like as i'm
checking out the second time we
had a good time like talking he's like
hang on a second he like brings us out
he's like
do you want this and i was like do you
not want that
i'll take it and he's like just go like
all i had to do was like sign up for
like the van's family thing which people
do for free anyways so
okay i'll do it for you hands down i did
i i've been chopping all wrong i
think that's that is yep
yep there's that okay so we're
all right that's that's pretty cool this
is actually at netflix hq
in los gatos so we're we're chilling
there and then we're drawing
on a board because this is i don't i
can't even
take this out right so this is i i threw
pictures that weren't necessarily like
work related too oh okay so we're done
here
yeah exactly what this is a photo of our
wall so um matt who we looked at like
way way early on
the first time like um i moved out um
that was my roommate this is when i
first moved out to california
i was living in his living room uh in
redwood city nice um because he had a
one bedroom
but we eventually moved into a two
bedroom this was the wall from the
apartment in the two bedroom
everybody that came to our apartment got
measured and this is the heights
of
all that randomness that goes along with
it that's entropy
that one of my favorite that's one of my
favorite pictures that's
just the style and the way people write
their yeah
totally a lot of i love it okay so we
have a car
scattered throughout no that's good you
should but you have a car
yeah that's just my honda element i've
had that for like 10 years now i just
love things that work and work well yes
yes i do too especially as an engineer
okay but
how did your dog balance that
that's awesome watson's a very good boy
watson is a very good boy
is a good boy all right so we have some
some of the random we have the vans
set up we are good on the vans that
um and that is wow that is
really that's that's quite an adventure
have you
have you hacked since the terror vision
i i'm not
sure what we got there um i mean so you
went into the web dev
i mean so all right we're allowed to
talk about non-hack
non-vans as well
now so you're in the web team and so
joey's more on the sign up side
are you working on the sign up side of
netflix or is it more on the like
member you know logged in world yeah
i'm on the the sign up side um so joey
works like on the tv ui so all the new
um like sign up stuff on tv is stuff
that joey and the rest of the team are
working on
um the main thing that i worked on um
for my time that you know i think
actually like helps like inside like the
small payments ecosystem is like this
3ds
like technology and we don't have to
talk about that too much but that's just
the
um second factor like authentication for
payments like that's
primarily done in india right now but
there's uh it was supposed to
start in the rest of europe in like 2019
but and you're constantly running out
tests netflix there's like millions yeah
we're testing payment methods we're
testing friction
on is it even worth it to take all this
information like what's the
fraud risk and all i mean like so you're
i mean
you get your head around a lot of tests
in a given like quarter right
uh it varies like quarter of a quarter
but yeah there's there's a lot of tests
that are running all the time you always
have to be like aware of like which
other tests are running in the same
space and like what's our allocation
window what are the prioritizations for
one test over over the next guys
everything at netflix is a b
tested clinically tested randomized
controlled trials
and got to win on view so i guess in in
sign ups it's really win on conversions
right i guess would be one of the main
metrics
yeah exactly that's what you target for
okay very cool oh hey what's up alphin
golf
chilling out welcome back we're with i
actually set the today command today so
we actually have this is
this is tyler childs and there you go
bots gonna bot nose
so all right bot knows bot knows all
this is the this is the sign up page so
this flow
is different depending on where you are
in the world what payment methods there
are there's actually like just
like millions of variations of this yeah
there's actually something really dumb
that i can show you if you go to
netflix.com
gift hyphen cards there's there's going
to be a button that's going to change in
the next
two weeks i didn't get a gift really
it's really just the button
okay give typing cards if you scroll
down to the button that says i'm ready
i'm ready i'm ready
okay that yep that that button is going
to change in the next two weeks and i've
been
it's been a lot of uh work from a lot of
people from is this
unblinding to the test are we allowed to
say this
if it's not a test okay this is not a
test this is not a test um i've been
working on um
uh a design system like you're working
with like amazon style dictionary to get
like design tokens so this is like an
implementation detail
just talking through what about the
netflix design there's a there's a
netflix design lexicon right
for studio that there's one so now we're
working on one on the the sign up side
so i've been working on that so this is
like the first time i got to do like
some solid like
css stuff so the button that's going to
be there
um is going to look very similar to that
button but it
will be a different button and there's a
lot more going on
that's the level of precision you need
to like that's why i said it's dumb
and these no but these things have real
effects on
sign ups like literally like in these a
b tests that's
mind-blowing that way yeah well this
one's mostly for a developer experience
thing this is going to make it so we're
going to be able to roll out tests
um and be able to build features and
stuff like that a lot faster so that
button is going to be different that
button that button alright so you heard
it here first folks that
that button is going to be different
okay very cool though
um buttons aside i like that
interstitial screen
with the tariff i mean because it's
really all about like providing a smooth
user experience and you know kind of
knowing where the rough points are and
not
calling a ton of attention to them
versus like when i can't get texts to
show up in a box and you know that
that's that's my life but all right so
you left from there and in this css you
were willing to share this with
everybody because they needed to know
more
and you started writing some articles
this was sort of interspersed through
this whole
journey and yeah what yeah i mean what
what are some of your like fun ones i
mean so we had the
the article there was that big css
article actually you know what let me
let me go find the links
because yeah the one on css tricks was
the big one but i'm a huge
fan of kind of like sharing knowledge as
you go like
honestly like i've learned so much um
online just from reading other people's
like random blogs and
posts and and whatnot so i'm a huge fan
of like kind of sharing free information
like freely and openly
okay and i've posted on my own website
and like you know you get like a few
clicks here and there but you don't
really
get like information out that's actually
like valuable to people that they need
to know
because on your website where is that
where is your website
i didn't link my website but you can go
to tylertiles.com and you can play with
the
the buttons at the top i like the
buttons they're flashy and it's just
like
that that's a fun um css thing to look
at too if you want to pull that up we
can talk through
okay yeah they roll over and i hit one
click
pick those and they flash oh that that's
a nice flash see that's a nice subtle
detail there
that yeah and if you inspect the page um
you can pull that up too and it's
i don't usually show people's css on
stream so this is really like you know
as long as you authorize it i i approve
you
you can okay all right i don't believe i
don't usually do this
okay so we're gonna look at all of this
all of the source the raw source no no
let's just pull open the head and we'll
just like open the style sheet itself
okay oh oh oh wow oh i mean you can do
it from there too
from sources yeah no i i try not to i
i this is the part of the the page that
scares me
i think it's called focus party focus
party i see a focus party
all right it doesn't all right i have to
do it that way
oh wait you have such clean css what's
going on
this is all of the code that makes that
just making me look bad
is like the proper this is what it's
supposed to look like
okay yeah so that's the flashing that's
that's what handles the flash
uh because it's the focus state from
when you you click it and then i'm just
doing an animation to kind of like
mess around with the background um
transitioning the background from this
like
white opacity-ish thing on top of like
whatever color is underneath it doesn't
matter what color is underneath i'm
definitely dropping this this
seems like a pretty solid like thing for
people to check i'm going to check this
out when i
need to know how to do that okay very
cool
okay that's that that's super cool so
and then but then you also link the
stuff on the blog i'm guessing to
various posts
and yeah the color palette's a fun one
too okay i like the color palette
yeah there's not a whole lot there so so
there's just not a whole lot on my my
own blog i write it it doesn't really
matter that's why i reached out to um
the to css tricks to write for them and
i only did like one article but the
custom properties
are and that's what the entire article
is about and that's actually what the
colors here are about too is using css
custom properties
okay to be able to create all those so
that's a palette of 100 colors
it's that's another style sheet that's
just called colors.css
and whenever i start a new project i
just include that color
style sheet and then all the colors that
i need to work from i was just thinking
like crayola
like when you're looking at a crayon box
you're never like man i wish i had more
colors i'm pretty satisfied with this
this like limited selection um so that's
what that's what the color css is about
all right i'm i'm looking okay it's it's
more clean
it's not even minified i can actually
read this like
yeah this is the way the web is supposed
to be this is
how i learned how to become who i am
today i want to be able to inspect
people's websites this is
so crazy i pay it forward every
if i included bootstrap that would be
more than all of my unboxings
just your config files for booster
wow all right so it is possible we can
we can
we can make css gradients we can do this
okay
it's awesome i don't know why we're
minifying everything like caching is
real
no it's the thing all right no it's good
to know
all right so we leave from there now i
don't know if you have the link there
for the but you you left social media
you left amazon you're like i'm moving
to ice you got you got your website
but you went to this fastadon
org which i wasn't the fetiverse right
yeah so over in the fetid verse but we
can think we can fill this question from
alpha and golf a few okay want first two
honest thoughts on front-end frameworks
like
react view have we gone too far from the
origins of the web
it it depends on like what we're
building and who we're trying to cater
this is the guy to ask by the way
this is totally the guy to ask okay
sorry go ahead god
yeah it's it's a it's a good question
like are you if you're trying to build a
product
that you know yes the short answer is
yes we've gone too far
um uh there's there's a lot more to
unpack there but
i i think that the platform itself isn't
broken
and in silicon valley there's a very
like fundamental
mindset of the platform's broken we need
to patch it and
that's patch right now for the front end
is like react
and i love i write personally vanilla
javascript i write vanilla css
the browser itself can load um modules
but don't you worry about like
different like browser versions that
don't support that or we just
forget about them like don't worry about
polyfills i mean you can always polyfill
and like i think that browser
compatibility
at this point is just like stupid good
if you're writing es6 any browser that
was created after like
2015 2016 is going to support it so
you're
already getting all right in like the
financial industry
and the healthcare industry sorry this
does not apply to you at all
where it's like fixed on ie6 but anyway
everybody else like
you actually get to use nice things now
well even to that point though like i
mean i've been dropping stuff on
github for the past like however many
years so these
stupid little css frameworks like i have
one on there called like mosaic css
and that's a pretty good grid system
that's a precursor to what i did on
cutestrap
but that works all the way down to ie7
okay
so there's there's it's possible all
right
um fafi wants to know what lead
cross-functional engineering efforts for
projects with global stakeholders means
i mean um so the the
non-tech jargony version of that is one
of the ways to you can pay for netflix
is
on a phone um
so in certain countries you can
basically link your
netflix account to your mobile phone
bill so for that project it was working
with carriers
in a few different countries and i won't
get into specifics on countries or
carriers
um but um basically those for the
prepaid option and that was something
that was a very
big difficult challenge to tackle before
okay and i don't know if i can get too
deep into that but basically like
a lot of people pay for netflix on their
prepaid phone okay
makes sense um so we have the
yeah and i agree alpha golf if we can
keep it vanilla html css
js that's that'd be nice observables are
the devil
yeah observables are a a thing at
netflix i'm not gonna i'm not gonna
open that can of worms unless you feel
the need to tyler i i
don't want to mention falcore yeah okay
we're not gonna use the f word yeah no
go ahead
good there's a the fan of like being
of the vanilla side of things parcel um
is one of the bundlers that i prefer
using if i need to end up bundling
something
um it's because i'm able to write my
vanilla stuff but then also
leverage like the benefits of bundling
without having to touch webpack which is
a nightmare cool like that
webpack has always been my go to i or i
just don't bundle i'm like i'm like you
know what i'm gonna worry until this
site gets like enough traffic and then
i'll
you know figure it out yeah but
um and yeah i'm sorry they're onan
that's uh
sometimes the ie11 you gotta just you
gotta support it okay so
it it does depend a little bit on your
customer segment but the web
in general that we seem to be
experiencing has gotten a lot better
than
in terms of support yeah the the
platform itself is doing pretty pretty
okay in my mind
okay very cool well yeah um
so going all right so should we talk
about fetaverse or
that we're i'm talking about okay okay
yeah yeah so
i'm just hanging out with you man
whatever no no i mean how did you leave
like everything you just told everyone
okay thanks bye
drop the mic i'm out i mean that's like
a transition thing right
it's a total transition and it's been
like a bit of a process
like i mean i grew up on the web like i
got into css from myspace
and live journal and you know going
through the transition of facebook and
instagram and all of these things and
like
the rise and fall of amazon i feel
guilty sometimes for like i recommended
these things to people
and like now they're fundamentally
changing how the world works
um so it's it's a it's a process to be
able to just
you know stop something like one day so
by that amazon you mean you don't order
from amazon anymore you're
just yeah i had six orders from amazon
in 2019 i've had zero orders from amazon
in 2020.
um i'm weaning my way off of google
still i need to change like some email
stuff but i finally
have my email on my own domain which is
like the first start if you wanted to
start
getting free own your own domain name
get your email going to your domain name
that's the beginning
yeah but you never want to deal with
spam filtering i mean that's like no you
don't i'm using fast mail right now
there's
there's options out there all right so
you're totally crazy you're not like
standing up your own smtp
server that's a lot of work okay this is
very
insecure so don't recommend that yeah
okay that's that that's fine
to do it if you're okay you're you're
the product you're the product yep
makes sense okay no that so it was just
steps starting with the domain
and then just gradually moving out
to the other parts of it yeah and that's
all right and then so in that world you
can have a social network and it's not
that social network i mean what yeah
so yeah now um i'm over in like the
fetty verse if you
if you want to pull up a website for it
like we can talk through effect betty
i have yours is a good one oh obviously
i have the fostadon page uh yeah
yeah i'm on faucethon if you're really
into free and open source software
fostodon.org
is a great place to hang out and um
so it's it's kind of weird to be like oh
i quit social media and it's like here's
the social network i'm using right
okay that social network okay yep yep
yep
yep um but what makes um the fetivers a
little bit different
is that it's actually a federation of
servers so there's a whole bunch of
different
administrators so instead of there being
one mark zuckerberg that we're all
like under the uh jurisdiction of
um anybody can spin up a server this
happens to be
a mastodon instance they got pretty
popular in like 2017
when something happened on twitter um
yeah
that is now twitter exactly it keeps
happening it's more than that because
this is just a ui that happens to look
like twitter but underneath the hood
there's this protocol called activity
pub and
activity pub is basically like email but
for social media so the same way that
email is decentralized and you can you
know
sign up on aol or yahoo or hotmail
or google whatever you can do that with
people you actually trust
for social networks um so
kev is one of the admins here i don't
actually personally know kev
but you can absolutely know or you can
spin up your own instance
um and then you can federate with
everybody else across the entire
network and that's that's the
fundamentals of the steady version
basically
yeah that that that definitely sounds
interesting i mean i've been
having enough trouble getting my discord
to work with my twitch now i need to go
entirely the other way i just i just owe
off them i hate o
off but i mean it's it's tough when it's
now
in this they've they've gone much
further with their protocol for how
they're passing i guess
social packets i don't i don't know what
the
the unit of measuring is but it's a
message around
yeah i don't know but the the guy that
wrote actually the activity public spec
for
you know the w3c his name is christopher
lemmerweber
and he's actually on here you can
interact with him like i ping him
you know like his stuff or whatever and
he's just super active but he's working
on some incredibly
cool technology right now that dislike
activity
i think it's called like object
capability and it's way beyond
my knowledge i only know css but he's
working on building out these like
virtual worlds or
working on specs to basically build out
virtual worlds where you can like
operate like a zero
zero trust environment um and play video
games together basically um but it's
very good same types of technology it's
fascinating stuff
i don't fully understand it but i think
it's going to be the future to be honest
sounds pretty good and then all right
and there's basically and this
the pandemic's a great time to explore
all this stuff because
you know we're at home and suddenly
there's time but
i don't know i feel like twitch i don't
have any time
not according to my viewers they're
they're right you know they're all like
oh come on get the servo thing to work i
i've turned servo off tonight so nobody
tried to break servo you know
it's a full-time job dude this is a lot
of work that goes into this
yeah well this is a lot of work like
clap and chat really quick
it's a bit of a stream delay too so you
know maybe they did and we don't know
okay all right
so marion's giving us a clap so that's a
big deal marion
is one of the like marion can
see bugs like like sort of like you know
like in the sixth sense like i see dead
people like
except they don't know they're dead like
like marion sees bugs in my code
except like i don't know that they're
there like she
like i'm live coding and she's like you
don't want to do that
that thing that no don't do that
sometimes that
that that's that's that
anyway you've got two semicolons there
guy yeah
you gotta knock that off okay but then
after all that then we had a little chat
and we get to the thing that is so
mind-numbingly big you you i i was
struggling with some css i would i had
just finished a design
working with a designer who's instantly
gonna be on next on the show next week
and she says she's like okay well i
finished the design
here's the design of the website just
need to like you know do your your html
and your css thing and you know i was
kind of like yeah you know she did she'd
done it in photoshop
um it's you know she's more on the
graphic arts side and
so i was like struggling with that we we
got to talking and then you were like
i was like wait a minute this is like
the guy right you know he could he could
do css and like he just like sneeze in
their css like
it just yeah i mean it's just it'd just
be there so i was kind of like
do you you know and you provided an
insane amount of help
building this website which i think
we're going to have to reveal on stream
for the first time now i i
i don't i don't know if we should just
reveal maybe we need to ask chat maybe
you know what we
because chat wasn't telling us enough
about the clap here so there's the
there's the clapping that was you know
sleeping okay if you're watching the
debate
they're watching the sidebar so we're
we're actually gonna go
like like should we drop the amazing
ridiculous thing
the thing the amazing i need the bourbon
don't do that to me
the amazing thing we haven't seen
tonight
and i'm gonna say let's say no
definitely not
and um get on
it okay so we're gonna we're gonna just
drop that as a poll so we'll let
we'll let them decide um in the meantime
that is so it should be in
yes and you're right fafi she she
actually so i'm
terrible in that side of the world i
mean like i can't i can't get any of my
css right so
anything she's just like all right you
know she's by the way also the same
designer that rebuilt
coding with some guy so i'll show you
that while that poll is going on like
when i
originally cranked out the site like
right before i first started
you know doing my twitch i was just like
all right here is my original version
was like oh
and she looked and she went please let
me
let me do the thing you know and so she
just
like quickly threw this together and you
know just
and i was like oh man that is like just
so much better
like i mean you know there's like
there's like colors that make sense and
there's like you know stuff that
flows and you know it doesn't look like
she's like she's like i've just noticed
a pattern in all your websites they look
like this
like you know this same bar and this
like you know whatever
oh wow there they voted it just showed
up on the webpage okay the embed
actually works so
get on it got some votes all right so
we're
we got 100 of the votes except for my
definitely not definitely not
yeah i should have voted it definitely
not damn okay
all right so we are gonna do it we're
gonna we're gonna look at
at some of tyler and her brilliant work
so this is by the way 14
quick.org okay so this this is
and this css is handcrafted no no okay
this is actually built
with this is not the same hand hand
rolled stuff we saw in the previous site
this was actually this went through like
some different
site translators you know you know that
that terrible
client not gonna name names but it was
like i might
want it to be up to evil and not touch
css please
so this is it this is 14 quick.org
and i did tell people on stream
a long time ago and i'm going to bet
that most that audience isn't here
tonight
that i am going to play video games
later in the year
and so that is actually this site is
us speed running final fantasy 14
and i would tell you about the whole
thing this is actually
not a free company site at all faffi
this is we are going to be doing
and thank you tyler for making this a
possibility because my website would not
have come out
but why i could help i love touching css
man call me whatever
no that is totally awesome um this i'm
actually going to drop this link here
this is
um not a free company i actually haven't
played 14 in a while
little known fact um based on a bunch of
negotiations and it totally depends on
who you talk to but
i like my interpretation is that
currently we have from two years ago
this the world speed running record for
final fantasy 14 and that's
final fantasy 14 single segment mmo this
was designed to be
a six-month game originally in
19 hours 45 minutes and 22 seconds so we
actually brought an entire stack team
and we did it as a charity event
we tried to do it again the next year
and we didn't get there we got
like all the way to the end of ar like
right near the sort of final bounce and
we just
weren't in high enough level it was too
late at night and
you know i just want to show you that
because we actually built a video of it
and that
is got posted on the website this is
just freshly posted but we are going to
actually see it so
we're going to we're going to show that
they voted i did not know you had the
record that's
that's dope yeah and then we unrecorded
like the next year
we are going to do it again
okay we're gonna we're gonna go all the
way to youtube for it wait this is an
mmo
has anyone ever speed run one of these
before
it was healing don't do that
if it wasn't you this is the team
talking this is from the actual run
first america 28 minutes 28 minutes
we're not allowed to swear swearing this
is by the way an extra life event
i just repeat it totally
that's not a game i declare shenanigans
you have to speak to some devotee of the
completely unpronounceable name
yes you don't get to play kickballala
today
don't kick me all right
i'm going to kick the lala i trust my
healer which one of you is my heat
yeah well done folks
you have to strap the law out to my leg
listen healer you can pull the boss
yeah she didn't really yep seriously
there's no excuse your legs are the
perfect length i don't want to hear
wow oh my lord we got hello everybody
there's tech rated us for this event
all right let's give him a show which
four are ready to go into toto
that dragoon is the random person we
just got is gonna have stories
holy
and that's it
if you got high potion when he cures any
swift cast cures that's cured too
welcome to hour 12 folks
right after hours
that's real time in the top corner this
one o'clock in the morning
specifically we got this we can run
is
oh it was fun thank you guys for having
me
yeah our pleasure see you later
we're not gonna do this again are we
we're doing it
we are absolutely doing it that that is
the
premiere this is the event this is
basically coming
up in a couple so we're actually gonna
have the speed run team
on the stream next week so you are the
last power hacker before the speed run
i'm honored so and you're the guy who
actually got this site to work i did a
last minute
change here that's why i dropped in the
trailer so i know nobody's seen it
basically
so um that is basically yes
and by the way you're right marion
communication does drop
after that time we do keep like pretty
we try to keep up there
you can hear the primogen in the
background he's like just high energy
all night he's just going this was
netflix gamers we did this on site this
year we're going to be doing it virtual
we're going to be doing it entirely on
twitch
um and we saw a pretty nice raid there
from
that was that was ms tech she's like one
of the best final
fantasy like raid guides like out there
she just totally rocks and she was
supportive of
us doing extra life and trying to you
know help out the children's miracle
network you know children with terminal
diseases so we're going to be doing a
little bit
round table around that and we're going
to try to do a little fundraising so
we'll see if you know people
want to watch us play so that is kicking
off next
actually it kicks off right now
basically so for those of you
who were wondering what happened to the
saturday stream
practice that's what happened we were
actually starting practice so that's
saturdays my saturdays are going to be
practice you're going to start seeing
the game
i don't know how much we're going to
actually show from practice because
practice is a little little rough you
know we have a little time till game day
so maybe we don't you know show that
just yet but
um that that is it you can all check the
site out
and uh that yeah
let's look at the beauty of the css
that's there
i mean and and how it actually works at
different sizes
did we minify that css or can they learn
from it too i don't don't remember i
don't i don't know if i want to look i
it's i mean it
maybe my question is who's shepherd book
uh that it's funny that you mentioned
that
because he's a character from firefly
you know maybe in season two
would be like one of the main foci of
the show
but i'm gonna just give you a little
hint who that is
but um i did try that's actually
shepherd right there you could see him
just sort of chilling uh oh
no he disappeared but um that [ __ ] i
tried to dress him up in his empire you
know when he was still
well i don't want to spoil i mean for
those who didn't read the graphic novel
but
um i really graphic novel yeah all right
so but
for everyone else i i tried to go more
in his like army sort of days so
that is um that's going to be coming
yeah you didn't no
primogen was not in that run faffi he
was actually streaming twitch
from the like next table over but he's
you know he's a loud guy so you can hear
him like
over all the audio the entire time so
and he just keeps the energy up it was
super great for everyone to be in the
same room it's going to be harder this
year without you know his
his just splurge for life keeping us
going at like three or four in the
morning
so um but anyway yeah that
that is final fantasy 14 we we've i have
not been playing it i i had actually
just reactivated my sub recently so i
was like all right team we gotta
we gotta figure this out again you know
we we gotta we gotta get practice we
gotta we gotta get through
we gotta find stuff in red circles we
gotta be ready for the entire
main scenario quest like so the
definition i actually had that's
sort of the limit of my css you can see
a little bar in the corner where it's
like
it's a progress bar that i i quickly
hacked together
and it shows you how far you are through
the story and it just
i use that as sort of like a visual
guide but it's a rough bar i mean it's
not
it's not pretty at all so
but anyway that that gives you a sense
there's 188 quests
from the start to uh when you finish
arr they actually simplified some of it
we're discovering in practice so it's a
little bit shorter
but excuse me i think we're actually
gonna make it this year that
that's that's the bet what do you mean
by they simplified it so
like there's people solved more of like
the speed running side of things or like
how does it
yeah no they they they cut they cut down
some of it like you know like you used
to have to like there's
like one quest early on you're supposed
to like if you're starting gridania
you're supposed to find like
four eggs from this particular creature
and it's now it's just one
one egg you know so it's like it's like
little like
tweaks like that you know so it's like
you know there's this one scene where
you're supposed to dump water on this
guy and it's like
it's it's not a good scene
like it's really janky with the ui too
you're supposed to like take like a
bucket and bring it to a river except
there's only like one point where
there's an action point so it's like
not really and then it's like and two
people can't hit it at the same time and
a whole bunch of other bugs so basically
like you had to like get in and fill it
up and then
put water and then you had to like bring
it over and then you'd dump it now it's
just like
talk to the guy and it's like okay you
woke me up like so just like they
they simplified it in that sense like
there's just less kind of stuff to get
through um
they didn't remove anything substantial
marian like you know like they actually
touched up one of the worst quests in
the game which is
that nouveau riche which i love to pick
on during game day but it's it's
basically this question where you're
like i i feel like the translator even
got bored
writing this quest like because they it
was originally in like japanese and so
they're just like
so talk to this guy talk to this guy
again talk to this guy
again italics talk to this guy dot dot
dot
again talk to this guy dot dot dot again
italics
like talk to this like it's it's like
seven steps
and it is the absolute worst quest in
the game so they
they cut that down like it's not it's
not as bad it's just like
all right find him he runs away and do
the instance you know like
so it's manageable you know
anyway um that we're gonna have the
round table next week so we're gonna
we're gonna do that that's that's gonna
this is kind of the start that's super
exciting man
yep so we're gonna go part-time gaming
part-time live coding and part-time
gaming
just until the event and the actual
event we're doing a little bit early due
to
scheduling issues um trying to work with
the team because
you know for the mmo you need like a
whole team
like you need the whole group that you
would be going through all the levels so
we're trying for the full eight we have
a full eight at the moment
um and it so we're going to be doing
that october 24th
is the actual run so like you know we'll
do the wednesday here and then
we have some practice stuff maybe we'll
do a little peek a little behind the
scenes but then
that's then we're we're running later in
the month so
thank you tyler for building that site
because that that that really
has come together far glad i could help
honestly
i this is a good cause i don't want to
donate they they go to this website and
they go to donations
donations are open i still we're we're
busy working with the team
um to just fine tune like because
right now it's set up to my extra life
account which you know because we didn't
have our team
set up on the extra life website so
we're we're gonna fix that so you don't
you don't need to donate today
but um that we'll we'll we'll have that
fixed by the round table next wednesday
so hopefully hopefully in advance of
that so but anyway you can check the
site out 14
so we are just tearing through 14 quick
and by the way you should see the
original domain name that i registered
for this
which is the worst domain name in the
world f x i
v dq dot o r g
why is it that bad there is nothing good
about that when you i was like trying to
describe it to someone and they were
like
what and i was like i was like yeah it's
like final fantasy but like 14 like the
roman numeral
and then it's followed by you know done
quick because it
it's it it was bad
i had like two conversations i was like
this is the worst domain name ever right
it's gonna work
yeah i know and so i ran out and like
dropped my programmer for a minute i was
like this is not an identifier i can
actually have a number
in the beginning of a of a domain name
it said 14 quick and it turned out to be
free so i
i stomped on it at that point i was like
that is a great domain name the other
domain name
that's mouthful yes that was
yes marion please don't even write it i
i shouldn't have even shown it
it's just a it's like a case study and
what you shouldn't do with domain names
but if you can't tell somebody that or
if you have to explain what a hyphen is
like it's
probably it's a rough domain now all
right
tyler i want to thank you for coming on
the show it was
really a pleasure to hear about that oh
there is one question i have to ask
before you disappear though
if you could name one hack tool
that would that was instrumental
what would it be for somebody that's
getting stuff done this is where i was
kind of hinting so you can't use the
noesa like talk to the you know do a
little networking on hack day like you
know but what
what would be like a tool that you think
would help a hacker who is
aspiring to win out
for like a hack day like what do you use
to like get a leg up on your competition
yeah something you know may or may not
be using but something you see like a
ton of value in so like like that
coming up with that idea for the
interstitial screen or like you know
like what would you what would you say
is like i mean so obviously the
the inspector right i mean that's
something i could level up but
that hundred colors is pretty solid i
mean so cutestrap
i like because it seems like a much
simpler way to go but
yeah no that's a that's a really good
question like
honestly like at this point like i'm
always trying to like thin down
on on dependencies of things so like
which tools would be like worth using or
worth
getting into um
yeah i think it's just like knowing your
toolkit like really thoroughly is like
what i'd recommend and
like i've only been doing it for about a
year but i'm all about vim right now
and that's that's the right company for
that
that if you've never typed vim tutor
into your terminal before
type in vim tutor and you can do that
right now and
it's it's just except yeah
um but being able to go just like
straight from like whatever you're
thinking to like whatever you want to be
coding
is going to help you move as fast as
possible
and it's going to take some time you got
to like walk before you run type thing
yeah a lot of value so you like that
editor i mean is it just
like what would you say is like worth
the reason worth going through the sharp
learning curve on vim like why why would
they want to do that
what what speaks to you about it yeah um
personally um what what draws me into
them and just like being more in my
terminal because i'm actually i have my
workflow
fully into the terminal now and it it
was not that way
um even a year and a half ago like i
started july of 2019
like getting into them and like getting
out of vs code and
that that's probably more of the story
is like why did you leave the s code
everybody in silicon valley is using vs
code right now
and the fact of the matter is like if
you have to jump around in different
applications your mind is always
constantly switching like every time you
see an advertisement your mind goes to
something else so like
and that applies to like every little
thing so anytime your mind gets derailed
you're not focusing on what you're
trying to accomplish what tasks you're
trying to accomplish
okay so fight for that attention yeah
fighting for attention like i'm just
trying to narrow down my attention
makes sense okay well it's a great
reason to be in the terminal and vim is
fantastic there i mean for me it's it's
movement i mean
like vim movement is to me almost more
important than vim
like i can even use another id as long
as it allows vim movement because i feel
like it's such a fast
way to go without clicking and and that
i love that
as somebody that's like you know
relatively new into them like what do
you recommend for me to like up
my game to to get better at that that
movement
that is probably a better question for
the primogen
because he's got a whole like series of
like
vim with me he's got this vim vim battle
royale where you actually get to like
fight against somebody else by having
minimal keystrokes and like knowing like
shortcuts and it like kind of forces you
to learn i think it's kind of where he's
going with it he's he's been developing
that on stream so
for those of you who don't know um i
would recommend checking that out i
don't have the link for that but i do
have the link for
the primogen so uh the prime
agent so this is the uh this is his
stream
uh and he uh does occasionally work on
those
those vim tools although right now he's
on a rust here so you know maybe you
don't want to watch that but
to answer uh fawfi's question like
what's your css pre-processor of choice
that is uh actually a really personal
question to me
like in a good way like i'm glad you
asked um i went to uh the conference in
event apart back
in um i think 2014 or 2015
and i get to meet eric meyer and eric
meyer has always been like a hero to me
in like the css world because of the
reset style sheet
i learned from like inspecting people's
source code and like
um so you just see you saw that
everywhere every single web page had
a web page had that now you don't see it
as much because it just gets compiled
away or somebody else is using something
else
but i asked that question to eric i said
what is your css preprocessor of choice
and he said he doesn't actually use one
and the reason is he needs to be as low
to the browser as possible to be able to
like identify bugs
in in css itself and going into that
question i was using sas i was like sas
is so much better than less
and like you know one of those like bike
shutting arguments
like what css preprocessor is really
better and ever since then i've actually
that that shifted my mindset of like
this silicon valley you've got to run
everything through webpack too
the browser does kind of like understand
things and like
it pushes defeat the cache yeah
exactly don't defeat the cache um so
right now i'm actually not using any css
preprocessor if i were to recommend
anything to anybody that's like
working with css at this point it'd be
to mess around with post
css there's just so much you can do with
post css anything you want to be solving
with a preprocess preprocessor you can
do you can even do pre-processing with
um with post css but what i like about
it is it's relatively straightforward to
write plugins
it ultimately got forked from what auto
prefixer
was or like the internals of auto prefix
are now like power
post css and all of those different
transforms so that that's what i'd
recommend if you're going to mess around
with something very cool
well i thank you for that and thank you
for the great questions everybody um
you could also catch tyler on the
discord he does
occasionally hang out on the discord so
let me uh
let me just drop that in there um so
feel free to come by
uh and um tyler thanks so much for
coming on the show i mean i hope we
we see you again here i mean it's really
a pleasure this is a blast
thank you so much for having me and
congratulations again for launching 14
quick.org
yeah there it is we dropped it tonight
so that's that's our just one more thing
so anybody
thank you everybody i will maybe see you
saturday if we
stream a little bit of prac uh actually
you know i don't have practice this
saturday because it's
it's sunday this week okay so i actually
will next stream will be on saturday and
then
after that learn session will be back on
on tuesday so
thanks everybody stay safe wash your
hands social
distance register to vote do all those
things
and be careful about packing your css
very important okay so we'll see you
later see you later
peace