Using Jekyll For Rapid CSS Testing - Ire Aderinokun // JekyllConf 2016

JekyllConf - The free online conference for all things Jekyll.
http://jekyllconf.com

Speaker: Ire Aderinokun - https://twitter.com/ireaderinokun
Sponsor: CloudCannon - http://cloudcannon.com

---

Closed Caption:

we've got our first speaker on the line
who is re-entry can card conquered
speaking
Syria where she's a fronting developer
the big cable media re is going to be
talking about using jiggle your record
says is testing over to re ok so as they
said my name is the eerie i dunno home
is quite difficult to pronounce but i'm
going to be talking about how i use
Jekyll for rapid CSS testing so just a
quick introduction to myself so like I
said give me and I'm a youth intend
evolve and I'm based here in lagos
nigeria it's actually nighttime where I
am right now and my work as head of
design and product at the Cabal media so
it's just a media company based here in
Nigeria which is creating content for
African audiences so apart from that I
am also a blogger so i write blog which
is called which is called bits of code
and in it I write weekly articles about
front-end development and I try to
really delve into its all quote-on-quote
bits of code and try to help other
people understand how it is and also try
to get to grips with it myself so
they're working on this blog i find
myself doing obviously assets because in
front-end development that's part really
one of the most complicated things help
you when I myself trying to really
understand how different CSS properties
work and how they're different property
value combinations interact with each
other so one example is last year I was
writing this article which was about
controlling typography in CSS and I was
talking about how there are 18
typography related CSS properties and
how we can use them to achieve a lot of
nuance and when we're writing CSS and I
was trying to write about how I was
trying to explain how our all the
different properties and the different
values compared
each other the one thing I did was I
created these tables where I listed all
the property values and had an exam
home and I lot of good in the a great
way to just easily visualize how is and
their values interact with each other so
as you can see i also did your letter
spacing white space and all of that so
as you can see it's a really good way to
once you just look at the table you can
really see how they interact with each
other and the way i did this actually
was just completely models so as you can
imagine so quite a bit of time but
the later on a box and as you probably
know it and there's lots of new
properties lots of new values for them
and in fact there are 24 properties on
average have five values each of the
list 48 new combination judgment to
learn and how am I going to learn all of
this you permission so car then and i
found a way to use gentle kind of
ultimate so I could
first of all abstract all the areas into
in separate files so in JSON or file and
use chemicals tableting to be able to
create demonstrations for each property
by you pair so I great at this
I sure so it's called sheets and I just
have some very different cheese for
different things so this is the one for
flex balls as you can see so first of
all I have this table where I just have
all the properties and you can see a
scripture for them and then always and
below that I for each particular
property value pair i have an example so
you can see how each of them works so
for example you can see the difference
between clarity clarity and when you get
to the win
more complicated one simplex direction
you can vary is the lead and visual is
CD work and how their difference and how
you can use them
it's one thing to just be able to meet
the document station and that says the
block the ball flex container box but
it's also great to be able to do that
means still show you always fix em how
you jackal to achieve this and I'm gonna
start with something a bit more samples
so here we just this is basically
install i just made a few and
modifications so for one ever moved the
coast directory which you'll see in
every place that with this sheets custom
collection and I also remove things like
the about page and the feet even things
the home were really not going to write
what is in the Conqueror
we are 2l to be able to customize how he
is Jack oh because by default it comes
and it assumes that I you are using it
as a blog but you can actually change
the user as different things so I air
and blue the post-star create it in
connection which is the cheats 1 so this
is basically the volume 3 and I also
sheets folder i just said that all the
files by default will have the layout of
cheats so that it just saves me to go
here sheet so it's just my default so I
mean the impact i'm just going to look
through all the cheats subdue all the
posts you can move through custom
connections that's just what there's
nothing there right now so if I just
refreshed the page
it's just this text line which is this
there's nothing on the page right now
you can t so the first thing I do when a
great day in this new g is work with the
data files so in the data which is
designed property there's only one
property that we're working with the
moment as he sends texts the line so but
in future ones we're going to show how
you can use our multiple properties but
this is just as start with so we just
have the property description of it and
then we have an array of all the values
so here we have left right-center
justified and I've also added this which
shows that this values in people are you
such what I want to do is hook it up to
this data file so I'm just going to add
meter or
text-align so at the moment that's not
going to do anything because we
don't is because all the probable value
each day out why I wanted to keep air is
just put i'm going to have a stake here
so let's just write a comment to call
you have to write out all over again
ok so i'm just gonna expect so this is
just a section just so we can have have
everything section so we have this team
gold and in the table T description and
values so if we go back here you can see
what
creating so property description and
what we're going to do is loop through
each property in the line want to be but
in the future we'll have to prominence
so I just put it into through each of
the properties and then we're choosing
which file to through from this from
this place here so we do each property
in and then that's what it is and then
in the values column we're going to do
through each of their
so you can just you know this but for
now it's a back here so we're just going
to loop through each value of it there
so if i go back here and refresh the
page now we should get this property the
description and all the values so that's
just how we create this table so we can
easily see everything that's related to
this cheats but in addition to that we
also want to have to do so below here
instead of just having had a world you
want to have actual examples of each of
these values so what I'm gonna do is in
the text align file the world i'm going
to add another section I'm going to get
it from here
so again here we have we're just
creating a new suggestion and I've just
had to the detail to distribute the
recording into detail value through all
the properties and like i said before in
this case you only have one property
then after you i'm going to go through
each of the values for that property and
then we're going to have this no this is
where we really need to focus on so this
is dave is where we have the example and
what we've done is set at the party and
the value so by doing this what we've
just done is added the style austin
Meegan's te the magnets in the cheap so
they say that and I just go back here
so now we can see the difference here so
review which is texting my of the values
so each of these rocks practice them
each x so we have is text and then left
and then we have the demonstration so
what I've done is just i just added a
paragraph here and that's what I'm using
to be able to tell the Alliance we have
left right center and just by so this is
what we can just is least see how all
these dif property value pairs are
different from each other so that's a
pretty simple example now I want to show
you how it works for our night own i'm
going to create another file I'm going
to show how it's going to work with it
going to work when they are dynamic
news because here is a property
makes so it could be just like values or
pixel unit so we can't say everything to
be there so what we're gonna do is have
this here and position and I'll lap lot
of typos here so i'm just going to show
you what the data file looks more like
for this one so similar to the text line
we just have the object it to just have
some contain cover scale down and none
and i just added some descriptions for
each of the values as well because some
values during thats Sarah Lee
unnecessary just easily able to tell
what sort of like text line where you
can see the body know what it means
whereas for this object that when it
might not be as clear so you can also
add descriptions and so here we have
this problem
t the object from 20 and then we have a
second property which is the object
position and here the values are dynamic
so what I've done is I've added this new
key value dynamic values and was that
the value for this property isn't
something that's specified it could
range from a variety of different things
and then instead of putting so the value
is now and then the other eye and a raid
a billion settle the value is something
and 90 some examples so if we go back on
to cheat sheets here we have object that
position
so now we can see here the team and I'm
going to text the line this is just has
the property description values and this
one is the static static values and
therefore object position now you can
see why here we go
so when I added here was that the
dynamic you and I want to do is going to
show you something out so that's why
this is different so it shows the actual
value here and then shows some examples
here
so what we've done the overview now you
want to have the demos so if you go back
here now we want to add something
similar to what we've been here but
obviously because the different property
if you want to test it in a different
way so I'm just gonna get ya
so what I'm gonna hear me
this part is all the same as the 1000
think that's different for this one is
all do so here against we're still
looking through all the properties and
then going through each value for each
property so over here we have a
different example because obviously just
having some text is going to be a good
way to be so what I've done is just
another added three images because the
object an object position properties are
to do with how an image is contained
within its container so i just added
three images and each of the invention
is has a different its dimensions or
what is where one and support and that
hot and be able to show this example so
we go back here and refresh the page so
now you can see so first of all of check
property in question for each value so
for object that Phillips says they
replace content size to fill the
elements contact box and now we can see
with three different examples any given
also still see why is useful to have had
these three different example
okay see how it works so we have this
then we have an object that contain and
we can very very easily see visually see
what the difference is between each of
these values and then here for the one
with dynamic values you can also see
that we're still looking through the
values which are the examples even
though it's still a dynamic value so you
can see here so finally I'm just going
to show you how the black box one works
which is obviously the most companies
just create a new file looks the right
go back to the home page each yeah so
oh that already but then visit the data
file now this shows how we can do things
even more complicated because folks
there are different property
item so what we can do here is
temperature and i use added customer
value so it applies container or if you
scroll down here is applied to the Flex
items so that's just another way for me
to be able to tell um think he'll think
about specific to this to these list of
properties so all the properties here
the description and then all use again
available we can also see here that was
from here and then for the values of
using the examples am this applies to
flex container is useful is what i'm
going to do here is instead of just
having all
all live problem which is grouped in one
in one sex until I was 16 I still own in
this case here i'm going to have a
slightly different demonstration file
here what when I'm salute is but for
this section and I've decided that only
the first container properties are going
to be here so i just did a simple its
aim and a black pepper in there and then
we can have this and so we were hoping
through the values and students to the
rest and then we have exam
oh ok so what I was just that's how i
have two separate files to separate
sections you notice this one is good
only think through some properties
related in this one here and properties
related to the items and here i also
have a separate example so instead of
applying the data from the data file to
the Flex container applying into a
specific next item that we go back here
we can see how this works
so here we have the first container
properties and we can clearly see how
everything is working here so this damn
that's a daughter is the first container
obviously and we can see how all the
different and values effect when effects
the next items when they're being
applied to the effects container we can
see the difference between 2001 reverse
or column and clone we go down to the
that item properties now we're lying cut
applying that container today's the same
and we can ask your friend that happens
when the different styles online self
auto or nine
the stars are being able to pick this
particular do pretty much it and that's
what i like to do when I'm trying to
really wrap my head around wrap my head
around something really new and as you
probably know that lots of really really
complicated CSS properties and when
there's just a lot of different things
that can be a little bit overwhelming
it's just a good way to just put it all
any very structured file and find a way
to be able to change that's the lyrics
to jest very rapidly and tackle so let's
see also thank you very much our I'm we
got time for any yeah we've got time for
help learn questions I'm yes it was
really interesting seeing how you
connected the data files in the front
minute you started doing these lookups
have you found any sort of limitations
with this approach
but not really the first time I tried to
do it also
the site . date page . data file that
really working because um you have to
because it was obviously in stirring but
i think it's been fine
um they're just there might be certain
circumstances in which I wanted to use
something a slightly different layouts
so i would just create a different
layout for but i think its dreams just
ok and that kind of helps by just moving
for example that big table at the
beginning into the cheat layout
yeah yeah that makes sense I'm and give
any future plans to improve improve the
Switzer i wanna obviously add 11 more
students so whenever I want to come
across something different i'm going to
add to it but I was also thinking about
our add more information to it as well
so instead of just passion maybe just
also be able to have like any option or
have more information on it for example
that the first business the a property
so maybe I could end it wasn't my
formation things
it also just something to protect
without a bit more
yeah that makes sense also i'm really
excited to dive in and have a look and
play with the source code that looks
looks like a really interesting project
and thank you so much for speaking today
thank you it was great to be on here
everything is on get help so you can
just check me out and yea awesome thank
you very much