Adding our first Plugin Lorem Ipsum to Adobe XD

Adding our first Plugin Lorem Ipsum to Adobe XD


Hi everyone, I hope you’re
ready for amazingness. It’s time to look at
Plugins in Adobe XD. Now there’s lots of plugins,
we’re going to, in this case… look at a Lorem Ipsum plug-in,
because it’s nice and easy… but throughout this course we’re going to
look at more and more plugins as we go. What is a plugin?
So Adobe, when they made XD… when they were making it, they’ve built
all the kind of core features for it… plus some really other cool stuff… like the Repeat Grid, Character Styles,
and the Assets Panels. They’ve done some really nice stuff. What they’ve allowed though
is they’ve said to the world… if you know how to make a plugin,
you can go into ‘Development’ and make one. So if you are a software engineer,
or a cody nerdy type person… you can make your own plugins. They’ve given really good documentation
for people to go off and make plugins. The cool thing about that is,
it’s just stuff that’s missing… and then somebody’s
gone off and like… “I’m going to make something
to fix that problem.” And the benefit for us is that
we don’t have to wait for Adobe to do it. Somebody else can do it, add it
to the library, and we can use it. Let’s look at making one.
So we’re going to use– first of all let’s look at the plugins. So go to ‘Plugins’ along the top here,
and go to ‘Discover Plugins’. Plugins are coming out all the time,
I’m going to cover a few in this course… but Latest Release is a great place to get
started I guess, in terms of which ones– So these ones have come out today,
so brand new today. I haven’t even gone through them yet. So I’ll have a look through these
as we go through the course… but you do the same, there’s going to be
stuff in here that’s going to be new. They do all sorts of different things;
Pattern Maker, Color Blend. What else is nice? User Images,
we’ll do that later on. The one we want for the moment is… in here in ‘Search’, we’re going to
go to Lorem, just type in Lorem. So we’ve done Lorem Ipsum,
remember it’s the placeholder text. This one here works, you can
click on ‘See Details’. It tells you a little bit about
it before you install it. Click ‘Install’ when you’re ready. It will tell you it’s installed
when it’s finished. There it is, I’m going to close it down. And they appear here in the Plugins Panel. You can see, you’ve got a few
already installed. This is the one we’re going to use. They all have their quirks… this particular one, you have
to grab the ‘Type Tool’. You have to draw out an Area Type Box,
because it needs to fill it, right? So it needs a width. You need to have some text in there,
some text. It’s a weird quirk with XD. If you don’t have any text
in a text box, watch this. You might have noticed this already.
If I do this and I forget to type in it… it’s no longer there,
it’s like completely gone, forever. So just jam in some text,
get it to be the right size… like in our case we’re going
to use the Roboto 16-point. I’ll use my Style there. You have to have it selected
with the black arrow… otherwise this doesn’t work. There’s a whole lot of rules
for this plugin. And you can’t be in your cursor like this. You can’t have your text kind
of highlighted, or your cursor flashing. You have to be on the black arrow. Cool. So we’ve got a text box,
I want to add some placeholder text. I’m going to go to
‘Plugins’, ‘Lorem Ipsum’… and I’m going to go to ‘Quick Lorem Ipsum’. It just throws it in there. How much better is it,
than going to this file here… that I gave you at the beginning… and opening it, copying and pasting it? Not much when this thing is opened… but going and finding that file
that Dan gave you… in that course a year ago can be tough. So a little plugin like this,
super quick, super easy. Let’s have a look at some
of the options for it. So we went to the Quick Lorem Ipsum… let’s look at this one here. This top option gives you
a few more extra things. So by default that’s what it’s given us. We can turn off line breaks if we want. This one here, doesn’t do a hop,
can you see this empty gap at the bottom? This is going to trim that box, look. You see, just tucked
that up nicely in here. Handy, I guess. Next thing I want to do is,
in here, same thing. You can use the shortcut. Is Lorem Ipsum might be useful,
you could use the Cicaro option. What is the Cicaro option?
I might butcher this, but… I think Lorem Ipsum is just
mixed up Latin words… but they mix that up based on something. And it was an essay by this old Roman dude. Now he wasn’t just an old Roman dude,
he was a famous old Roman dude. Anyway, they’ve derived that this original
kind of a lot of mixed-up Lorem Ipsum… came from an essay of his. And you can use it, the only
difference really for me… because I don’t speak Latin… well not today anyway… is that, that’s actually
proper structure… whereas Lorem Ipsum’s all mixed up. But for me doesn’t matter
because it’s all mixed up. What else can you do,
just quickly, same one. There’s this one here,
Panagram is the “quick brown fox.” It’s got all the letters available… which might be handy when you’re
kind of doing, like this stuff… you want all the fonts, or see
what all the characters look like. Now I can’t think of anything else it does. You can do different languages, which
is cool, for placeholder text. And what you’ll also find out,
if you’re using the exact same plugin… it might be updated and there might be
different things it can do. I’d love it if the shortcut worked. At the moment my shortcut actually
zooms in and out of my XD. They kind of battle with
other things in here. Also, just so you know,
XD doesn’t allow you at the moment… to go into Preferences,
which is real weird. I’d like to go in there, maybe play
around with keyboard shortcuts. That will change as well,
but if you’re like, Googling… “Why is it grayed out?”
you will find a foreign post that says… “Oh, we’ve done that on purpose,”
because it doesn’t work… and then you’ll think to yourself,
“Why did you put it in?” And then they say, “It has to be
because of something Mac does.” Anyway, at the moment you can’t
change any of the preferences… and you can’t update
the keyboard shortcuts… which I can’t wait to do, because I’d
love for some of these plugins… to be a keyboard shortcut that actually
worked, that would be awesome. We kind of looked at Lorem Ipsum… but really we’re looking
at plugins in general… and how they extend
the ability of Adobe XD. We’ll throw more in, in the course
as we go along. I just want to throw in nice
and early here to get used to them… and we’ll do more as we go along. All right, I will see you
in the next video. Hi there, I hope you enjoyed the video. My name is Daniel Scott. If you would like to do the full course… there will be a link in
the description for that. Please give this video, on YouTube here… a thumbs up, really helps me
in what I’m doing. Also, consider subscribing to the channel. I release a video like this every week,
for your viewing pleasure. All right, bye.

“CSS Grid Layout” by Rachel Andrew—An Event Apart Orlando 2016

“CSS Grid Layout” by Rachel Andrew—An Event Apart Orlando 2016


Hello. So yes, as mentioned
I’ve been doing this for quite a long time. I’ve been working on the
web since about 1996 which makes me old enough to
remember when the arguments we were having were whether
we should use CSS at all or whether we should stick to
font tags for styling or text. And I was using CSS
for layout back when Netscape 4 was a thing. I like to ask this
question, who else has developed for Netscape 4? Oh, there’s quite a few
here, you are my people, this is great,
it’s a good start. I was a web standards
project member, and part of the Dreamweaver task
force, and essentially we were brought into
web standards project to try to encourage standards
in that authoring tool, which is really where a lot of my
interest in things like layout comes from, and
how can we visually represent layout, how can
we do layout, in a good way. Since I started
working with CSS, CSS has become
absolutely amazing. These examples of
CSS only demos. We can do all this
animation, you’ve just heard about
animation that we can do. We can do things that we
used to use JavaScript for, we used to use flash for,
we can do right there in CSS We’ve come a long
way, but there’s one part of CSS that seemed
to get kind of stuck in 2006, and that was layout. The techniques that
we’re using for layout seem really hard,
and really fragile, and the reason is they were
never designed for laying out complex web applications. They were certainly
never designed for doing responsive design. But there’s hope, and hope
comes in this group of modules, and hopefully we’re
inspired a bit by the work that Jen’s been doing yesterday. We’ve got Flexbox, you’ve
got CSS Grid layout, and we’ve got box
alignment, and they’re kind of coming together to
create a new system for doing layout on the web. A tailor made system
for the kind of things that we need to do. I’ve got a whole bunch of
code examples in my slides, I’m going to fly through this
very quickly so please later in the week, about your
offices when you get home, have a look at
that code, and I’ll talk a bit about the browser
support towards the end. So I want to start by explaining
a few things about Grid layout, and how it works, and then move
on to some worked examples. First, we define a Grid. And we do that with a new
value of the display property. We’ve got display grid, and
you can also use inline grid. So that’s a bit
like Flexbox, we say display flex all the child
items, they become flex items, you say display grid,
all the child elements become grid items. We create tracks
on that Grid and we use grid template columns,
and grid template rows. So, here I’m creating a three
column and three row grid. We’re defining an
explicit grid here, and our items are
child elements, they all just fall into
a cell of the grid. If I want to space those
out I use grid gap, and that’s a short term for grid
column gap and grid row gaps that gives us gutters
between our grid items. Now, I’m creating a fixed width
grid here, I’m using pixels, but Grid layout has been
created for a responsive web. It allows for the creation of
flexible grids really easily. To do that we’ve got this
new unit, the FI unit, that’s a fraction unit. It represents a fraction of
the available space in the grid container. So if we’ve got three,
one faction unit tracks, then we’ve got three equal
width flexible tracks. If we want to change
those proportions, then we can assign different
factions to different tracks. So, here I’ve got one
faction unit, one fracture unit, two faction units. So the available space
in the grid container is split into
four, one part each is given to my first two tracks,
and two parts to the second. The browser window
grows and shrinks, those tracks scale
in proportion. The nice thing
about faction units is that they assign a portion of
the available space, so you can mix them with absolute
tracks, or tracks that are set with pixels for instance. My first track
here is 500 pixels, and then I’ve got a one
fraction unit track, and a two fraction unit track. So we take away
the amount that we need for our 500 pixels, and
also any gutters, and then the rest of the space
we share between our two flexible tracks. If you’ve got a repeating
pattern of tracks, perhaps you’ve got
a very complex grid, you got lots of
different tracks, you can use this repeats
keywords, this repeat notation. So here I’m saying repeat
three times one fraction unit, and we get a three
column track grid. We don’t have to write
out 1FR, 1FR, 1FR. And as it happens, we don’t need
to declare those road tracks at all. Grid will create
tracks for things that are placed outside
of the grid you declare. So you create an explicit grid
with good template columns or grid template rows, and then
if you place things outside of that, so if you just add
more content to your rows, Grid will just
create rows for you, and they’ll be auto
sized by default, cell expand to fit whatever
content goes into them. If you happen to want
to fix the size of them, so here I’m saying grid
auto rows 200 pixels, every new row track
that’s created will be 200 pixels tall. Now, I showed you that repeat
syntax specifying a fixed number of repeating
tracks, but you can also ask Grid to create
as many columns as will fit into the container. So, here I’m saying create
as many 200 pixel columns as will fit into the container
using this auto fill keyword rather than a value for repeat. And they were kind
of fixed width tracks which meant we got
this gap at the end where it didn’t exactly fit,
but if we use [? minmax ?] along with repeat, we can
say create tracks that have a minimum
of 200 pixels, and a maximum of
one fraction unit. The results of that is when
we get that gap left over where we can’t fit in all the
200 pixel tracks, that amount is just shared out equally
because one fraction unit shared out between those,
we get this lovely behavior of a fluid number
of tracks depending on the amount of
space we’ve got, but we’re able to specify that
they should be a minimum size, and then share the
rest of the space. Everything I’ve shown you so far
has been about creating grids. We’ve got a grid, and
then the child element that just kind of
sit on that grid, but when we think about grids
we’re often thinking about, well I’d like to be
able to create a grid, I’d and then I would
like to be able to place my items on that
grid, I want to be able to use this
is a grid framework And so, we have that in grid. And it’s worth learning a bit
more terminology once we start to target areas on the Grid. I mentioned grid tracks already,
that’s the space between two grid lines so you can have
horizontal or vertical tracks. You define grid tracks,
when you set up your grid, and once you’ve got tracks,
you obviously got lines, you’ve got aligned before
and after each track. So you’ve got a
three track grade, you’ve actually got
four lines when you account for the one on the end. And, those lines are indexed
according to writing mode. So, in a right to letter
line which is Arabic, the first column line
would be on the right rather than on the left. And then we have grid cells
we’ve already seen grid laying items out
into cells and that’s the smallest unit on the grid. It’s conceptually a
bit like a table cell. If we join cells together
we get a grid area. So that’s any area
of the grid that’s bound by four grid lines. It needs to be a square
or rectangular area, but found by four grid lines,
that’s a grid area in which you might place some content. So here I’m using
that repeat syntax, I’m creating this three
column track grid. I can then position
my cards on the grid. So, I’m dealing with
that first item, and I’m starting at line two,
and ending at column line four, starting at row line one,
and ending it row line three. And that places that
item, and stretches it over a larger grid area. That’s fairly
verbose as a syntax. So we’ve got a shorthand here. Here is exactly the same, except
that we’re saying Grid column, and the start is the value
before the forward slash, and the end value comes
after the forward slash. You can actually go to an
even shorter shorthand, and express the whole
thing as one line of CSS. On the order of those values
is grid row start, grid column cart start, grid
row and, grid column end, which is the
other way around to how we specify margins and padding. We’ve seen line
numbers, but it’s possible to name those lines
which obviously could be quite useful if you’re working
with other people having to keep track of where
things are in the grid, especially in to
response to a design that might get quite confusing. You can name lines
and you name them in square brackets before
the track that you define, so if defining a chunk
of one faction unit, and we’re naming the
line before that. So I’ve changed my
lines, and then we can just switch out the
line numbers for the names that we’ve defined. You can name those
lines anything you like, but if you name them
dash start, and dash end, you get some magic. You get a grid area created with
the main name that you specify, so if you’ve got main
start and main end, you’re going to get a grid
area called main which you can actually position things into. We’ll have a look at that,
preferably in a minute. Because you can create those
named areas explicitly, we can say I’m going
to call the first card main, and the second
card side one, and the third card
side two for example. And then we just lay
them out like this as the value of the grid
template areas property, laying them out in
this ASCII art manner. There’s a lot of magic,
there’s a lot of new stuff. I’m going to show you
now some worked examples of using these
things so you can see how you’d actually apply them
to kind of real life layouts. I’m going to start
with this line based placement, positioning
things using lines. So, here’s a layout,
a very simple layout, and we could put that together
using really any method that we normally use today. We’re going to use grid layout. So there’s my HTML, I’ve got
a div with a class of wrapper, and we’ve got three
child elements, we’ve got this header,
and we’ve got two divs. Now without any layout applied,
it just lays out like this, it lays out in source
order as you’d expect. Now I create two columns,
one of two function units., and one of four, and I’m setting
up a gap for both columns and rows. So I have declared a grid, but
I haven’t position my items, and so we end up with this,
and what’s happening here is the Grid is taking each
of those child elements, and it’s popping it into one of
the cells that’s being created by our two column track grid. So nothing’s been overlapping
but just not the layout that we want, so now we
need to position the items. So, the header with the
class of main header expands across the grid from
column line one to three, and it sits in grid row one. The panel comes after column
line one in grid row two, and the content sits alongside
it, column line two, grid row two, which gives us this. So, that’s it,
that’s all you need to do to create your layout. If we overlay the grid
you can see the lines and you see how the gaps kind of
act as a fat line in the Grid, So the content comes
after that line. This is where you’ll
find out layout, we’ll play around with it later. If I want to put a
photo in my layout I add that to the markup,
and I position it, and from grid column line one
to three, and in grid row three, and there it is, and
it sits underneath. It doesn’t matter which of
those columns above are longer. That’s always going to sit
underneath because it’s in it’s own track on the
Grid, it can’t pop up, it doesn’t need clearing. And other things to note is
that the background on the panel extends all the way
down to the bottom, it stretches just like
flex items will by default, so you don’t need to worry
about how short your content is, it’s not going to hop
up and sit behind there. We weren’t adding any
rows to this grid. As I mentioned earlier,
grid has this idea with the implicit grid. It creates road
tracks to hold content even if we haven’t
created those tracks. We didn’t need to create any
road tracks for our content. Those rows auto size,
what ever content we put in they’ll
just grow, so we don’t really have to worry
about specifying rows in this kind of layout. I think an awful
lot of regular page layouts you’ll not worry
about specifying those. If you’re as old as me, if
you can do– unless you’re one of those people that put
their hands up about Netscape 4, you probably built sites
using tables for layout, and I imagine some
of you are thinking, this is a bit like
using tables for layout. And actually conceptually,
and certainly when I first came to grid
layout, that’s very much how I thought about it. In fact I already had
that model in my head because I built
sites with tables. But there are some
differences, good doesn’t rely on your content
being in a particular order in the source. If you did develop for
tables you remember how we had to fragment
our designs across lots of different table cells often
in strange order in order to get the layout
that we wanted, you don’t have to
do that with grid. And, because things are
entirely described in CSS, our layout is in the CSS. We can easily move
things around the grid at different breakpoints. We can introduce a
grid, or redefine a grid at any break point. So as a quick example of that,
if I keep the same layout I got before, but this time I’m
going to start mobile first, creating a simple grid
as a sort of one column grid for mobile devices. I’m actually using
grids here just to reorder some of
the content visually. So I end up with something
like this for narrow widths. Within my media queries
I just redefine the grid, and I go back to my two column
track grid that I had before. So Grid makes it very easy
just to move things around based on media queries
if you want to do that. We have these named lines we’ve
been working with line numbers so far, and especially
once you get into more complex
responsive layouts, you probably want to start
to give some of your lines at least names to make
it easier to remember where to position things. So staying with
that same layout. When I defined my single
column for the mobile layout, I’m just naming
some of those lines. And the value there, in
this case you’ve got auto, so you want our trucks to be
auto, that comes after the line that I’m naming. We’re actually naming the
line, and not the truck that’s important to remember. Instead of having these line
numbers we can use the names, and you could take that out
then to your wider layout, and names of the lines
as you define the track. If you’re careful you can keep
the names exactly the same between different breakpoints. You know that
content always comes after the line named content. So, that’s lines,
and you’ve always got lines when you grid it. It doesn’t matter which
positioning method you use, and you’ll always have
lines to use if you want to, but we also have
these names areas. So once again, staying
with the same markup. The first thing I do
outside of any major queries is I give the areas
on the grid and name, and that’s a name
that I choose, it can be anything really it’s
just an identifier for the area. We’re using the
grid area property for this, which is the same
property for the very short one line shorthand that we used
for the line based positioning. When I set up my grid, this
is for the mobile layout, I just describe how the layout
should look actually in my CSS. So, say I want the header,
then I want the content, then I want the sidebar,
then I want the footer. I get out my narrow
layout like this, and there it is with
the areas overlaid. And then within
the media queries. Now that you can see this sort
of ASCII art taking shape here, we’ve got the header,
and the sidebar, and the content, and the footer. And so we end up with this. For straightforward layouts this
is a really, really nice way to work. I’ve been working with Grid
for about four years now, and I’ve been prototyping
things, just prototyping stuff that I need to build
using this method because it’s so easy just to
move things around on the grid. So, actually using new
stuff for prototyping is quite a nice tip because it
never can never get out there on the web until grid
it actually ships, but you can use as a
prototyping technique, and you get this
kind of side benefit that you learn this
new specification. This technique is fantastic
for just playing around with layout. A couple of things you
might want to note. If we repeat the
name of an area, it causes that to span
over the grid cells. So, here we’re saying that
what the header and footer to span across both cells. You can have multiple white
space characters between those, so you can line up your ASCII
art, we’ve thought of that. If you want to
leave a cell empty, use a full stop
period, character, or multiple full stops again, in
order to line up the ASCII art. If we’ve put a dot there
underneath sidebar, then what happens is
the footer now just sits underneath the
content, it doesn’t span all the way across,
it leaves that cell empty. There’s kind of
some magic in here. We get these implicit named
grid lines when we do this. This is our layout as before,
and we’ve got this named grid area called content. grid creates for us content
start, and content end for rows and columns. Which means if I create
an area called test, or a I’ve of tests
here, and I’ve given you a background
color so we can see it, and I’m using those named lines,
which are not defined anywhere, but gets created for us,
to position that item. And so, we get this. And what this also
demonstrates is that you can layer items on the Grid. So, you can stack things
up any way you like , and for that you use the index
just like absolute positioning. So, you can layer
things on your grid, and there’s all sorts of
interesting possibilities just in that fact. That’s a very simple
kind of layout that we’ve created there,
a very simple Grid layout. I think when we’re
thinking about grids today, we’re probably mostly thinking
about these kind of 12 column grid frameworks, 16 calling
good frameworks, or perhaps an unusual number of
columns, but some kind of multiple column
grid that we create, and then we use that to
layout our pages with. We see that in frameworks
such as bootstrap, which I of the speak
because I’ve already bar shot so I’ll just join in. I’m not a framework hater. I think that they have served a
very, very good purpose for us. Layout is hard, it is fragile. I have a business to run. You all work for businesses,
you have to do these things, and you have to
do things quickly, and these frameworks
have helped us do that. I use them sometimes
in my own work because I have to get
things out of the door. It’s not that these
things are to be terrible, you should never ever use
them, not at all, however, as you can see in
this markup we’ve got an awful lot
of stuff in here which is essentially
describing our layout. We’re describing
layout in markup, and conceptually that’s
a very heavy thing to do. Even if you abstract
that out using SAS you’ve still got this kind
of vulnerable relationship between your markup, and your
content, and the display of it. As you get more and
more break points, as you’re adding enormous
televisions, and tiny watches and things, how
much of this stuff do you want to sort of
jam in to your markup, or even if it is abstracted
one level with SAS. It’s a kind of
difficult way to work, and it starts to fall down
if that content is always tied together with a display. The thing with CSS
Grid Layout, we’re describing the
layer in CSS, which means that we can just add
those break points if we need to if we see that
something isn’t displaying so well on some new
device that has shipped. We can think, well we could
make a little optimization just there in the
CSS, we don’t need to touch any of our
documents to do that. The other thing about replacing
layout frameworks with Grid, is that you really need
to shift your mindset to be able to do that, because
we’re talking about something which is conceptually quite
different when we’re starting to actually describe
layout in CSS rather than have it tied
directly to our markup. So, let’s have a
little look at that, I’ve been playing around
with some examples. The typographic in
the earlier example came from a framework
called Skeleton, which is a kind of
lightweight CSS framework, very similar though to
something like Bootstrap. It’s a little bit cleaner
though, it is a bit simpler to use as a demo. This is the markup
for the Skeleton grid, and there’s an example
of their website. You can see again,
we’ve got this same idea that you get with Bootstrap. You’ve got divs
that make up rows, and then inside those
rows we create some divs for the different columns. And this is a little
example layout, and you end up with something
that looks a bit like this. So, that’s just the
default Skeleton grid. I thought, well maybe I can try
and make this using Grid Layout and see if that works. First, I removed all
of those row divs, because I don’t think we
need those when we we’re using a Grid Layout. And I’ve also removed
any description of how the Grid works from the markup. So, I’ve added classes, I
haven’t got anything semantic to call these areas, so I’m
just calling them box 1 to 11. What I’ve done, is I’ve removed
any description of the layout from the markup. I then create my
grid, and you can see I’m using that
repeats keyword here, and I’m repeating
the pattern 12 times, and I’m naming the one
function unit track. I’m naming it, call. That means I’m going to have
repeated lines named call, which is something we
can use to our ends in a bit, most in the same
with rows calling them row. I’ve got multiple
column, and row lines. I now place the
items on the grid, and I’m using the
named line syntax here. Here I’m saying,
box one I’d like to start on the first line
named calls, should I say call, and I say span four
on grid row, row, which would be the
first line named row. But, if we go down
to box 8, I’d like that to start on grid column
called seven and span three on grid row, row three. So if you notice,
this span keyword’s quite useful
because it means you can sort of place components,
and say that I just want this component to always
span three tracks of my grid, even if you don’t know which
line it’s going to start on. That’s quite a handy
thing to be able to do. If we work through,
we end up with this, which is pretty much the
same as the Skeleton example, so that’s quite neat. I can replace a grid framework
like that with Grid Layout. We can actually go a step
further with good layout because it allows
us to do something that these frameworks
really can’t do, and that that’s to span rows. We can span rows in
exactly the same way that we can span columns. So, we can set some of
those up to span rows, and we end up with
the third example here where I’m not just
just putting things into single rows, I’m actually
spanning over road tracks. And the heights go to
the gutter no matter how much content is in there. Behavior very similar
to that of Flexbox. You can have a play around
with that, at this URL. Once you’ve created
a grid framework, or we’re using CSS Grid
as a grid framework, we then can lay out a
design using that framework. This is a more
realistic example, I’m going back to that earlier
design, that simple page layout, but this
time I’m laying it out on the grid that
I’ve just created. So, to ascend the main header,
we want to start on call, and span 12, and
it goes into row, and you see the content there
is spanning eight columns, and the panel is spanning full. There’s the layout,
we go back to this, and you can have a look at that. URL. And, It’s really easy to
play around with this layout. If we decide things want to span
different numbers of tracks, if we want to add a little bit
of less symmetry to our design, or so on, we can just change
those lines very easily. Perhaps I don’t want the
photo to stretch right across the bottom. I’d like the panel to go
all the way to the bottom, and the first to sit
underneath the content. Well that’s quite
simple to do I can just change where those tracks end. And then, we get this. Again, it’s all defined
there in the CSS. We don’t needs to
change anything about our markup to change how
elements lay out on the page. So that’s it, that’s the entire
series CSS defining our layout. There’s no linked stylesheet,
there’s no framework linked in, there’s nothing that I’ve had
to pull in to create my grid. The grid is created by
CSS itself, natively And ya, as Jen said
yesterday, just slight Flexbox we’re going to see
everyone posting their Grid Layout based grid
framework on GitHub and everyone tweeting about
it, far more than they tweet about the actual specification. If you are thinking
about creating one of these abstractions,
or in a year’s time you’re thinking about using
one, what value does it add? What value does it add
to the actual spec, or are you just adding some
sort of weird convenience? Which doesn’t really
help anything at all, rather learning how
to use the spec. We really don’t need a Grid
Layout based grid framework because it is a grid framework. Please take that away from
here, and tell your friends. Back at the start
of this talk, I showed examples of creating
a grid with a set of boxes that kind of position
themselves on the grid without doing anything. The rules around this auto
placement of grid items are defined by the grid
item placement algorithm. If you like to
read specifications you can read exactly
what that means. There’s a lot of stuff in
the spec as in all specs. Their really for
browser engines, how should a browser a deal with
getting a bunch of stuff thrown at the grid and laying it out. So, that’s what’s in the spec. If you like reading those things
it can be quite interesting. You can learn an awful lot by
picking apart that process. So I’m gonna show you a little
bit about how this works. So now, a simple
example, you can see that Grid laid out
the items before we started positioning anything. We got things one
in each grid cell, and that’s not
really what we want. With some kinds of
layouts it’s quite handy to be able to play with
this item placement. I’ve got a list here and it’s
basically an image gallery, so an ordered list, and inside
there’s some list items, and we’ve got some
images in there. So I’m creating a grid, I’ve
got four equal column tracks on the URL element. And that, without me
doing anything else, would give me this. So, the items are
laid out, and you can see how taller items,
the portrait images, are quite tall, and
then the landscape ones look a bit squashed because
they’re unfortunately different. It’d be quite nice if those
landscape ones spanned two tracks of the grid, which
would kind of bring them more into proportion with the
others, and we can do this. If I give the landscape
images a class of landscape, I can just say grid
column end, span two. So, if Grid comes
across anything with a class of landscape, it
should make the end line span two. And, that gives us this. So the order placement
algorithm lays out the items and it moves along, it lays
out item one, item two, well that’s got a
class of landscape that needs to go over
two tracks, and then item three that needs two tracks
to, it can’t fit in that gap can it. OK, next line, and
so we carry along. So, we’re keeping the
elements here in source order. If we add that
property of grid order flow with a value of dense,
Grid now back fills the gaps. As it moves through the
items and it leaves that gap, and then it places item three,
and it comes across item four, and it’s like, oh great
I’ve got a space for that, and it picks it up, and it
takes it out of source order, and it puts it into
the space which is great for your image gallery,
not so much for your phone. I’ll come back to that later. But first. I get this question asked to
me an awful lot, like almost every talk I do
someone will say, is Grid a competitor to Flexbox? As if the CSS working
group are going around creating some sort of
CSS specification death match. Which one will win? Let’s see, but no. These two things
are very different. They’ve got some similarities,
and intentional similarities, because it’s much easier for
us all to learn these things if they share common features. But, they’re for too
kind of different tasks. I’d like to talk about
the similarities first. We’ve got this module called the
Box Alignment Module Level 3. Where we’ve seen things
stretching in Grid, and going to the heights
of the content, and so on, I’ve said that’s a
bit like Flexbox, and that’s because both of these
things are using box alignment. In fact what box
alignment is, it’s all those neat features of
Flexbox, all the alignment, and space distribution,
and so on, taken out and put
into a new module. By being in a new module
it means that other modules can then use them. So at the moment
that’s Grid Layout, what it could be other
things in the future. So this is basically the
vertical centering module. If you’ve used Flexbox,
this is a flex layout, so I’m saying display flex,
and I’ve got some items. If I was to create that
same layout with Grid, I’d say display grid. And I’ve got those items that
are just laying themselves out on the grid. Now in both cases the
default alignment is stretch, so items stretch the
height of the tallest. So the first item there
is a portrait image, and it is defining either
the height of the grid area there, of the grid
row track, or it’s defining the height
of the flex container. So with Flexbox, I
would center an item in that space with line
self-censored, that’s the second item there. And, we’ve got a line cell
flex start for the third one, and a line cell flex
end for the fourth one. Now if we look at Grid,
it’s pretty much the same, except we don’t mention
flex start and flex end, we just got start, and end. But they’re going to behave
in pretty much the same way. When you’re working
with Grid you’re aligning inside the grid area
that you’re dealing with. So that’s an example of
where those things are, they’re pretty much the same. You could use either Grid or
Flexbox to create that layout. When should you use
Grid instead of Flexbox? Now here’s the key
thing to remember, If you’re laying things out
as a column, or as a row, then Flexbox is
going to be fine. The row might wrap, but each new
row is essentially a new flex container. So that’s what we mean
by one dimensional. You’re either a
row, or a column, you’re not both at once. If you want to control
both columns, and rows, that’s where you need Grid. And, here’s an example of that. Here I’ve got a set of items
that are using Flexbox. My flex bases here is
200 pixels and the items can grow, and shrink. And, that gives us this. So, I’ve got too
many items to fit into my row there, 200 pixels. So, what happens is, as
Flexbox lays out the items, it’s like, oh I’ve
got too many items we’re allowed to wrap,
goes on to the next row, and then we’ve
only got two items, so they’re sharing the
space because that’s how Flexbox works. Each of those rows is its own
flex container essentially. So, the space distribution
happens row by row. It would be the same. if
you’re working by columns, and if it wrapped onto
a new column which would set the height. The space distribution
would work column by column. So, when I teach
Flexbox to people, and I show them
something like this, the very next question
is, what happens if I want to have
Card 4 and Card 5 lining up under
Card 1 and card 2? And that, is where
you need Grid. That’s where you need
to control both rows and columns at the same time. Here we have Grid, and
I’m using that auto fill. So I’m saying as many columns
with a minimum of 200 pixels with a max of one fraction
unit which gives us something like the flex layout. I’m saying that so I won’t
have the same kind of Grid. I don’t need to
position the items, or add anything to the items,
they’ll just flow into it. Auto placement fills the
content into cells of the grid, and arranges them in
rows, and columns. So, unless we specify a
span of more than one track, things are just going
to go into one track. They’re going to line up in
their rows, and their columns as well. In practice, there
are going to be lots of times where you
could use one or the other, and it probably wouldn’t matter. It’s just going to be up to you. You think, oh well. I like this better. I’m gonna to use this here, or
I’m using it for more things, so I’ll carry on using it. This is the big difference. Do you want to
control the layout in one dimension, or two? Another way of
thinking about it, is that Flexbox kind of
works from the content out. So, you’ve got some stuff, maybe
a list of navigation points, and you just want them
spaced out evenly. That’s a Flexbox thing
because the browser is looking at the content,
you’ve got, and it’s spacing it out along that row. Grid works the other way around. So, with Grid, you say this is
my grid, content fit into it. You’re kind of working
from the outside, and you’re defining a grid. This is why Grid
is gonna perform much better than Flexbox does. I don’t know if people might
have spotted some of the things around Flexbox,
people are saying don’t use it for
full page layout, and that’s because you get
this content shifting effect. As a complicated
layout loads in, Flexbox is just
looking at the content to work out what the
spacing should be. So you get this kind of jiggling
as all the content shifts as it moves in. You don’t get that with
Grid because Grid’s saying, what have I got here? I need to create a Grid
that’s going to fit this, and then you create the Grid,
and then the stuff goes in. So, you’ve already
kind of got the grid before the items
start to flow into it. You avoid a lot of
this content shifting that you’d get with
Flexbox So, that’s another way of looking
at it, is that, do you want to actually
define an overall grid and place your items
into it, or do you want to let the content decide. I think there are different
kinds of things in your UI that you’re gonna make
those decisions around. When I was thinking about
this, I came across an example out there on the web that
I thought we could probably do better with Grid. This is the envatotuts+ website,
and they’ve got one of these sort of panels there on
the homepage which is used as navigation. There’s a whole bunch
of blocks in the panel. The only way to do this
with floated layout, really, at the moment, is
to fix the height of things. You might use JavaScript
to kind of fudge that a bit if you need to. But, you essentially have to
fix the height of the blocks to get this kind
of layout to work, and as you can see if you add
some more content as I did using the browser console,
that added too much content into the boxes,
and it just overflowed. It’s got nowhere to go because
that box is fixed height, so you either gonna have to cut
it off, or just let it overflow if that happens. Absolute heights don’t really
work that well on the web. You can kind of fudge
it for something like this, which just got
a little bit of content in, but the minute someone
goes into your CMS and adds a whole bunch of
content you didn’t expect, the whole thing falls apart. So, I wanted to see if I can
make this better, really, with Grid. And, I can. So, here’s the last
I created, and I went for the different
responsive break point. We’ve got a narrow
layout, and then we’ve got this sort of two column wide
one, and then the wider one. So, the mirrors what
they’ve got on their side. This is a thing to note, I’ve
added a lot of extra content to the box they’re about angry
people at balloon fiestas, I’ve gone crazy
with my news story, and added far too much stuff. So that box is expanded, and
it’s made room for the content. It’s made room by making the
boxes to the side of it also taller because they’re all
in the same row on the grid. So, they’ve also expanded
and stretched down to allow space for that content. That’s something that’s
really very difficult to do at the moment,
you’d probably have to invoke some
JavaScript to get that to, work and recalculate based on
how much content had ended up there. This works by using that minmax
function again that you briefly saw before, so
minmax let’s us say, I’d like this to be a minimum
size, and a maximum size. They could be two absolute
values if you wanted, but what I’m doing
here is I’m saying make it a minimum
of 150 pixels tall. So, I what my rows to
always be 150 pixels, which mirrors what they were
doing with their fixed heights. But, if it all goes wrong, and
there is more than 150 pixels worth of content in here, then
I want the maximum to be auto, and auto means essentially
content sized in this basis, so it will just
stretch, and it will grow to take whatever
content got put into the box. We can have our
fixed height look, and hopefully if all
the content editors know not to put too
much stuff in there, that’s what you’ll get. But, if it goes wrong,
it’s going to stretch, and it’s not going
to fall apart. Then I chose to use
Flexbox inside the areas, because some of the
captions and things needed pushing down to
the bottom of the box. So, I’m just using
Flexbox, and set the margin type of
auto just to get that effect inside my boxes. And again, I could
have used Grid, I could created a grid
in there, but Flexbox seemed to be ideal
because it just deals with pushing
the content around. Again, in the real
world it’s contents going to be added
using a CMS, and not all CMS’s are great
at stopping people adding more content
where they should not. So, if you had the sort of thing
where people could add boxes to this, and you had no way of
restricting the number of boxes that got added, you
know that one day you’re gonna look at the
web site, and there’s going to be some content
that just kind of appeared. And, who knows where
it’s gonna end up because it’s not being
positioned anywhere. Grid copes with that
really nicely for us. This box on the
bottom, that’s just been added as another
child element, so there’s another
box on the Grid, and no we’ve not got a
background image for it because we haven’t
sorted all that out. But, things aren’t broken. That looks OK. The content’s not overlapping
because Grid has just created an implicit track,
and it’s taken that content and put it in there for us. We can then sort it out. I think this is
how Grid is really reacting to the real world
of content on the web. That’s really interesting
to me because my day job, I’m a CMS vendor, I’ve got
a content management system product. So, I see the real sort
of problems of people using content, and working
with content editors, I see that every day. It’s that, that makes me so
excited about this stuff. I think Grid is really
reacting to the sort of stuff that we actually do these
days as opposed to coming from a past where people were
laying out academic documents. I’m really excited about
Grid, as I’m sure you can see. I think it raises some
interesting questions around accessibility,
as does specs Flexbox. Because we’ve got this ability
to completely separate source and the design which
should be great, it should be a very good
thing, but this ability for the kind of
display in the source to end very much out of sync
could cause real problems. Particularly for people
who can see the display, but are perhaps tabbing
around the document, using the keyboard to
navigate for example. Ideally, they should allow us
to create the most accessible source documents. So, we should be able
to create fantastic, really well organized
source documents, really good content that we
can reuse all over the place. And then use Grid and Flexbox to
create the best visual display for different devices,
for different breakpoints. Considering how people are
using assistive technology, and so on, are going to be able
to actually access this stuff. So, it should be great,
should be fantastic. It could be pretty
bad though if people use Grid and
Flexbox as an excuse to forget about the source. Well, it doesn’t matter does it,
doesn’t matter because, well we can just move things around. It doesn’t matter where it
is in the document anymore. That would be pretty bad. What would be even
worse would be if people started to strip
out semantic elements to make everything a
Grid or flex action. And what I mean by that, is
things only become grid items if they are a direct child
of the grid container. So, I say display grid, I
create my 12 column grid, I can only position direct
children on that grid. I can’t sort of go right
down into some form element that is deep down
nested right down there. I think there’s a real and
present danger that, possibly not individuals because
you’d know you are doing it, and you should feel very bad if
you are, but perhaps authoring tools. I mentioned Dreamweaver
back at the start, I’ve worked with
authoring tools before. Perhaps they might just decide
to flatten out the source a bit to make it easier, or
JavaScript frameworks. That could just remove some
elements, make everything flat. Really easy then to position
everything, isn’t it? That would not be a good thing. So, we don’t want to be
flattening out the source, and this sort of
stuff worries me. The spec does warn against all
sorts of accessibility issues. It warns against things
like moving things out of source order. Source order’s important
for sequential navigation, and non-CSS user user agents . It’s warning is that
grid placement effects the visual presentation. It doesn’t change anything
about your source. If logically you’re
reordering things, if you’ll be ordering
things to make a different sense
of that document, you should be doing
that in the source as well as in the display. There’s a few examples
out there from people who know far more about
accessibility than I do. [INAUDIBLE], Miceli, some
good examples without Grid and other layout methods
work with tab order. There’s currently a difference
between how Chrome and Firefox work with tab order. It’s actually a bug
in Firefox that it is following the visual display,
but some people say actually that’s a better use case. So, these things aren’t
solved problems yet. If you’re interested, I
hope everybody is interested because I think
this is something we need to care about. This is a really fantastic
video from Leonie Watson. She talks about CSS
accessibility particularly around layout, and she
explains how this all works with screen readers, and so on. Really, really worth having
a look, and also the article there, the keyboard
navigation disconnect. That’s a really useful article
to understand a bit more about these issues. I think as a community, we
need to be having discussions now about how we
deal with this stuff, and make sure that the
accessibility is carried through as we all get excited
about these new methods, and that we don’t just
create a big mess. As for that flattening
of markup issue, I’m very concerned about
that because I can see that that is likely to happen. There is in the specs
something to mitigate this. It’s perfectly valid
for an item on the grid to have a grid declared upon. Just like with Flexbox,
you can have a flex item, and you can say display
flex on that flex item, and then create sub
items as flex items. The same works exactly
the same with Grid. Here I’ve got an
example of that. So, here I’ve got a div
with a class of wrapper, and inside I’ve got some
boxes, I’ve got some divs. As you can see box D actually
has three other divs nest inside it. So E, F, and G are
children of box D. So, I say display grid on my
wrapper, and I create my grid. And I’m laying out A, B,
C, and D on that grid. So, what I get is this. To those light boxes
there inside D, and their not laid
out in the grade, and there’s no auto placement
taking effect on them, because they’re not direct
children of that grid element. So they’re just inside. If I wanted to make
those items a grid layout I’d need
to declare display grid on their parent
which is box D. So, we declare a grid on D, and
give me a gap, and so on. I’m just going to create
a two column grid here, and then I can position
the F and G on that grid. So, I’ve now got nested grids. So, that’s useful. We can nest grids
one inside the other. You could also nest flex items
inside a great, or whatever. You can go as far
down as you want. If you had this kind of multiple
column grid system, what would be really neat
would be if actually you could declare that
on the parent, and then things down
the tree could also use the same grid
that was set up, not having to sort of create
grids all the way down and manage those. That would be really neat. It would make creating sort of
lined of layouts an awful lot more simple. The level one spec actually
includes a subgrid value for the display property. However, it’s not been
implemented in any browsers yet. How this would work is,
in this layout’s box D which we had before where
we’ve created this grid, we’ve said display grid, and
we’ve set up some columns. Instead of setting up
the columns, and rows if you wanted, you could
say display subgrid. And that would be it, because
the subgrid would then use the parent grid sort
of grid columns, and rows. The problem with this not
being implemented anywhere, even in an experimental
way, is that it’s marked as at risk in
the specification. Now, what at risk means is
that, as the specifications kind of getting close to being
made into a recommendation, to make something
a recommendation we need to have at least
two implementations of each feature. So, we need to have two
browsers in this case to have implemented subgrid. So, we can say, yes,
this feature works, and it works in
interoperably It works across more than one browser,
and this is a good thing because what we don’t
want is one browser to do a whole lot of stuff, and that
not end up in other browsers. We want things that
are recommendations to be implemented crossed
browser, that’s a good thing. I think we’d all
agree with that. In order to make that
happen, and for the spec not to forever be
stuck in limbo, things that as seen as possibly
very difficult to implement are marked as at risk. What that means is that could
be dropped from the spec without needing to
kind of take the spec through a whole big process
again to make a recommendation. The status of subgrid
is somewhat uncertain. I think it’s really
important, we can see how it would be
helpful in terms of our layouts because we would like to be
able to create grids, and just use them even further
down the tree. But, I think the biggest
issue is that then that leads to this accessibility issue. At least this issue of people
flattening out their grids, flattening out their markup
in order to use Grid. I’m not the only person to
be thinking in this way, and Eric’s written his own
thoughts about the matter. As I also said, that he hopes
that they’ll be implemented. I very much imagine
at this point that Grid will be pushed
into public news channels without subgrid. I would very much like
other web developers to make a noise about this
particular feature in order that it does get in, and into
implementation sooner rather than later, and isn’t
forgotten about. And so on that note, what is
the status of Grid Layout? So Jen showed you a browser
support slides, and I’d like to just unpack where we
are with Grid a little bit more for you. Last Thursday, the spec moved
to candidate recommendation status, and that means
that the working group feel that the spec is
pretty much complete, and people should
implement against it. So browsers should
be able to implement, and they already
are implementing, but they should be
pretty safe to do that. So, what happens now
is we need to make sure that those features are
work, that they are’ interoperable implementations
of the features, and there will be a lot
of testing going on. If you go to Can I use, you’ll
see something like this. They have no data
to show that it’s counted as a recommendation
yet, and you’ll notice this really weird,
and this IE Only thing. Jen mentioned this yesterday,
and how strange is that? Because we like to bash IA,
they don’t do anything good, they held the web
back, don’t they? But this specification, it
came from Internet Explorer. It was first
implemented in IE 10. I wrote about it back
then at the end of 2012. There’s an article in 24 ways
that I wrote when I saw this, and I was really
excited about it. So, you can say thank you
to Microsoft and the IE team that we have Grid at all. I very much doubt we’d
be in the position we are in if they
hadn’t implemented, if they hadn’t built
something and said, look this is pretty cool. And then there was a
draft to work from, something that
could be built upon. So yeah, that IE
implementation is different. You dig out the article
of mine and read about it, and see the differences,
it’s a lot more limited because it was that
was the first attempt, it was the first draft. So, Edge have
updated and bridged the new spec mark as high
priority in the backlog, but I’d encourage you
to go and vote and say that you definitely want
that very, very soon. I assume that they
will ship at some point an updated version into Edge. You can see all the little
flags on the other browsers, so most things have got this
flagged behind a browser flag. A lot of that work,
the work in Blink, and also in WebKit, that’s
been done by an open source consultants he called
igalia, but not actually sort of people of Google
themselves, or whatever, it’s actually been done by this
open source and consultancy, and interestingly the work
was funded by Bloomberg. Which is an interesting
story in itself I think. An organization
coming in funding a huge part of the CSS spec
Into a browser implementation. So, they’ve been doing,
for about the last three years, the Blink
implementations, so that’s Chrome and Oprah. It’s also been
going into WebKit, and so it’s in Safari
and [? 10 ?] preview. So that’s interesting. We’ve got this specification
being built that Mozilla have got a really
great implementation. They caught up very
quickly with Blink, and at this point
what tends to happen is if you’re using say Chrome
Canary, and Firefox nighties, you’ll find that things sort
of leapfrog from each other. Sometimes one of them works,
and then the next one will work, and then someone will
implement a bit more. So, I’m kind of testing
things as we go, and seeing them work
in one of the other. But, all the time this is a– there’s a massive bug there
on Bugzilla for Mozilla. You’re seeing things
being fixed all the time, work is really happening
quite at a pace on these. To keep all this up to date,
because it’s a changing scene, this is a page of my
site Grid by Example. Browsers I link to
the browser meta bugs, and let you know how you change
the flags on your browsers to support Grid. And just any general
browser related information that comes my
way I stick onto that page. So, that’s a
reasonable place to go, I’ll try and keep that as
up to date as possible. So this is really interesting. I know as Jen mentioned
yesterday this is all happening behind browser flags. Browsers are kind
of working together, and you see on the mailing
lists, and on issues on GitHub, you see them talking
on working together to get this specification
out there into our hands. This is inter-op. This is what we asked for when
I was part of the web standards project. Get these new specs, and
they’re worked on together by all the browser
manufacturers and other people in order to get something that
really solves the problems that we have today. It’s very, very cool. And I’m sure some of you
thinking why are we spending all this time looking at
something I cannot use yet. And, here’s why. Once specifications now are
sort of out there and live, making changes to them are
almost impossible because it will break production websites. Jen spoke a bit
about the mess that was left by Flexbox coming
out behind vendor prefixes, which we were never supposed
to use on production web sites. But, we were all like yay,
new CSS and it kind of works. And, so we used it, and
then it changed, and then we’re like bad
browser vendors, you have a broken implementation. And, it wasn’t their
fault. The spec changed they implemented
thinking yeah, this is the spec, you know,
we put it behind of a vendor prefix so people know
they shouldn’t be using it in production websites,
and of course people use it in production
websites, and then we end it with three lots
of Flexbox out there. This is not a good
thing, and so yet, that’s why new features are happening
behind these experimental web platform features flags,
or specific feature flags in Mozilla. So, we have to take the
initiative ourselves to toggle those flags , and go and look at
these things because it’s only while they’re behind flags
that we, as web developers, get a chance to
make a difference to the specification. Once they get out
there in to the world, once they’re out there
in browsers, once they’re used in production
websites, that’s it it’s very hard to make changes. You can add things, you
can’t change things. Behold the list of things
that the CSS working group are going to change once
we’ve invented a time machine. A lot of this stuff
is really old, it goes back a long, long way. A lot of those things that
when you’re developing, your like, why did those
people who make CSS, why have they done this, why
do they called this this? Why is this so weird? It’s because of this, because
things came from a time where we’d had no idea what
we’d be using the web for. So you get this chance
by toppling flags by going back, and
looking at things that are new that
you cant use yet, you get this chance to take part. And, you get this chance
to make things better. And, you get this chance to
make things better for you in the future. So, please do look
at this stuff. Look at the new things
that people talk about. Have a play around
with examples. There’s a fair
few of us who love poking around at stuff
that’s hidden behind flags and create examples. You can just go and look
at those things and think, does it solve the
problems that I have? Or, do I see some
big issue with this? Because actually at
the working group people would love to
hear that feedback. Because otherwise
you kind of get CSS that’s developed
by browser vendors, as opposed to CSS that
developed by people who use CSS. And, as someone who
uses CSS and as one of the few representatives
on the CSS working group who is just a web developer,
who isn’t tied to a browser, vendor I’m very keen to have
the voice of far more officers, as we call them, involved in
the process to make sure the CSS that we get is the
CSS that we want. So please do have a
look at these things while they’re coming out,
because once browsers ship you lose that chance. CSS spec issues, they’re
all now on GitHub. We’re all on GitHub. You can go, and you can
have a look at the drafts. Have a look at the things
people are saying, a lot of it isn’t just in perfectly
normal language. It’s people saying, oh what
should we call this feature, or should we allow percentages
in gaps, or is simple stuff, and you can come up with things,
yes I’ve got use case for that, I need this. So do have a look, it’s
really worthwhile doing. Your essentially doing a
good deed for your future web developing self to take
a look at this stuff, because if you don’t you’re
really leaving your future in the hands of the very, very
few of us who are doing this. So, there’s more code, lots
and lots of code over at Grid by Example. This is actually
the last time I’m going to be doing this
talk in this form, and so what I’m doing is I’m
taking a lot of these examples and ideas, and making a load of
free video tutorials out of it. So, you’ll be able to go to
Grid by Example I’ve, already put seven of those up. There’s lots of little
short videos just explaining different things about the
spec, as well as example code. Please go have a look,
[INAUDIBLE] my code [? pen ?] examples, have a play around. Drop me a line on Twitter if
you want to ask any questions. I love, love, love
talking about this stuff. I’ll be around for the rest
of the day, and tomorrow. And thank you very,
very much for listening.

YouTube Interactive Transcript and Captions Plugin

YouTube Interactive Transcript and Captions Plugin


This video will show you how to
embed an interactive transcript with your YouTube video player. To do this, you’ll
have to copy and paste embed codes from YouTube
and from 3Play Media into your HTML. First, log in to
your YouTube account and select the video
you want to add an interactive transcript to. Paste the YouTube embed
code into the body of your HTML document. Next, log into your
3Play Media account, and create a template for
the interactive transcript. Use the ID myytplayer. You can set the size and style
and turn features on or off. You can reuse this template
for all future YouTube videos. Select the file associated
with your YouTube video, click Publish Plugin, and select
the template you just created. Copy the 3Play Media embed
code, and paste it in the HTML below the YouTube code. Publish your HTML page,
and view your YouTube video with your interactive
transcript or captions plugin. You can see examples of how to
implement, use, and customize interactive transcripts by
visiting our Plugins Gallery. Thanks for watching this video. For complete details, please
read our YouTube support articles. As always, feel free to
contact us with any questions.

What is a focus keyphrase? – Yoast SEO for WordPress training

What is a focus keyphrase? – Yoast SEO for WordPress training


This video is all about the focus keyphrase. I’ll explain what it is
and why it’s important. In addition, I will tell you more about the factors you should take into
account when choosing a focus keyphrase. And finally I’ll explain the difference between
head keyphrases and long tail keyphrases. So, what is a focus keyphrase? The focus keyphrase is the phrase
you’d like your post to rank for. If people search for this phrase in Google,
you want your post or page to pop up. In the past, we used to call this the focus
keyword. But, since the internet grew bigger,
and more and more content is out there, it’s getting harder to rank on just one word. This doesn’t mean a focus keyphrase
can’t consist of just one word, it means it usually consists
of multiple words. Let’s consider an example. Imagine you have a dog training school
in Bakersfield, California. You might think: I’d like to rank
for the focus keyword [dogs]. But ranking for this focus keyword
will be very hard, or even impossible, as it’s a highly competitive term. Lots of websites will be trying
to rank for this term. In this case, it’s more realistic to try to rank for, for instance,
[dog-friendly puppy training in Bakersfield]. As you can see, this is a focus keyphrase,
consisting of multiple words. It will give you
a much higher chance of ranking, because there will be fewer websites
trying to rank for this phrase. Also, people searching for this phrase, are more likely to be searching
for the service you offer. So, why is the focus keyphrase important? When you’re optimizing for a specific term, you want people to actually search
for that keyphrase. Choosing the right focus keyphrase
is important because otherwise,
you will do all that hard work for nothing. However, it can be really hard
to choose the right focus keyphrase. While choosing a focus keyphrase,
you should consider two things: your audience and your competition. So, first of all,
you should consider your audience: what are they looking for,
what are they searching for? Which words are they using? You should get inside the heads
of your audience and try to figure this out. You can use tools like Google Trends
to analyze which words people are using. With Google Trends,
you can compare keyphrases to see which one people search
for most often. For example, if we compare
[puppy training] with [dog training], it’s clear that people search
for [dog training] more often. So, for the dog training school
in Bakersfield, it could be a good idea to optimize
for [dog training] instead of [puppy training]. But you should also consider
the competition. If you’re focusing on keyphrases
that are rather competitive, then you will have a hard time ranking. You can imagine that it could be difficult
to rank for a keyphrase like [dog] or even [dog training] because you are definitely not
the only one trying to rank for that term. If you want to analyze your competition, the best thing you can do
is google your keyphrase. Check the first two pages
of the search results and see whether the post you want to write
would stand out between those results. How big are the companies
that show up here? Does your site have enough authority
to stand out between them? Is your post able to rank
between those search results? Finally, it’s very important
to use a focus keyphrase only once. If you have optimized a post
for a specific focus keyphrase, you want that post to be found
when people are searching for that phrase. If you have optimized two posts
for the exact same focus keyphrase, Google won’t know which one to show
in the search results, and they will both rank lower. If you optimize two posts
for the same keyphrase, you’re basically competing with yourself –
rather than other websites. That’s why you should use
a focus keyphrase only once. Of course, you can have multiple articles
about similar topics, but try to optimize them
for different aspects of one term. So, if you’re writing about puppy training, you can have one article optimized
for [the benefits of puppy training], one for [what to expect
from a puppy training class], and another one for [when do you take
your puppy to training classes]. Now, let’s go
into the different kinds of keyphrases. Some keyphrases are rather generic,
others are more specific. We distinguish three kinds of keyphrases: head keyphrases, mid tail keyphrases,
and long tail keyphrases. Head keyphrases are
the most competitive keyphrases. They are very generic,
and a lot of people search for them. They’re also the hardest to rank for. A head keyphrase could be
[puppy training]. Mid tail keyphrases are more specific, derived from the head keyphrase
they tie into. For this particular head keyphrase, mid tail keyphrases could be something
like [dog-friendly puppy training] or [the benefits of puppy training]. Long tail keyphrases are very specific
and they have very little search traffic. An example of a long tail keyphrase could be [what to expect from a dog-friendly
puppy training in Bakersfield]. But although long tail keyphrases
get less search traffic, they usually have a higher
conversion value, as they focus more
on a specific product or topic. Whether you should go
after long tail keyphrases or after head terms largely depends
on your competition. If the competition in your niche is high, you’ll have a hard time
ranking on competitive head terms and you should probably focus
on longer tail keyphrases. If you have little competition,
you might be able to rank for head terms. So, what are the key takeaways
for this lesson? We’ve seen that the focus keyphrase is
the word that you are optimizing your text for. Choosing your focus keyphrase
depends on the search volume, the words your audience is using,
and your competition. It’s also important to think about
whether you want to focus on head, mid tail or long tail keyphrases. In the next video, we’ll explain
how the Yoast SEO plugin can help you with optimizing your text
for the focus keyphrase you’ve chosen.

Hotjar Official WordPress plugin

Hotjar Official WordPress plugin


hi my name is Rory I’m a developer here
at Hotjar and I’m gonna show you how to use our WordPress plug-in with your
website so you see that I’m starting here in dashboard behind the WordPress
site. I’m gonna go to plugins Go to install plugins then you see this
add new button, so I click there I can search for Hotjar over here in the
search bar and we show our official plugin as the first result. You click
that button installing… installed. so we activate the plug-in and they will see
this activated here so we can go to settings now and go to Hotjar and now you can see that you’re prompted to visit your Hotjar site list to find unique site ID. So I’ve
got a site here that I’m ready to plug in You want to go to settings, sites and organisations and here you’ll see your site ID in the left column. So we can just copy,
paste into this box then Save Changes then you’ll see the Hotjar script is installed, site ID 1181185 which is actually a really nice
number and then click here to verify your installation BOOM!
The Hotjar installation has been verified That’s all there is to it. Thanks

4 Key Components of Service Blueprints

4 Key Components of Service Blueprints


Service design is defined as the activity
of planning and organizing a business’ resources: people, tools, processes– in order to improve
not just the customer experience, but even more: the employees’ experience. Service blueprinting is the primary tool we
use in this service design process. So what is a service blueprint? It’s a diagram that visualizes the relationships
between different service components; in other words: just a visual narrative that depicts
how an organization is delivering the service. If you currently use customer journey maps,
just think of service blueprints as that part II. There’s four essential pieces of a service
blueprint that all service blueprints must have. The first being customer actions; this is
what drives your blueprint. If you already have a customer journey map,
use that content. This is what your user is doing throughout
your service. Next are frontstage actions. This is how your company interacts with your
user. They can be human-to-human, like someone helping
a customer in a store, or human-to-computer, someone helping a customer through maybe a
chatbot on their website. Next we have backstage actions. This is what’s occurring backstage behind
the curtain of your organization in order to support those frontstage happenings. And then, last, the foundation of your blueprints
are the support processes: anything that must occur in order for all of the above to take
place. After those four, you can add in other things:
arrows that start to show dependencies, evidence: like pamphlets or email transcripts;
metrics: what is success for your company? Time: how fast is everything happening? As you begin to blueprint, my best advice
is to just start small. Scope and work within your realm of responsibility. You can read more on my service blueprinting
articles on nngroup.com.

How to Build a Design Community in 20 steps – Cofounder of Dribbble, Dan Cederholm

How to Build a Design Community in 20 steps – Cofounder of Dribbble, Dan Cederholm


hello hello everybody I am Dan and it’s
so awesome to be here I want to thank the awwwards team for inviting me and
before we get started actually this is the whoa oh my god whose desktop was
that that was awful I’m gonna pretend that was planned
what’s kind of funny oh this is the hashtag by the way for my talk today
it’s for those in the back dan cedar home awwwards with three double use buh
buh buh no all right so you know I thought I would talk I used to do a lot
of talks about CSS and front-end development and design and and then
something happened where I accidentally started a company and and that happened
in over the last ten years I thought I would share you know what I’ve learned
from the beginning to the to the end and I’ve got like 20 basically 20 little
lessons that I’ve learned and I hope I can get them all in this there’s only 23
minutes 20:44 okay this is really scary and
let’s see if this clock is a clock counting down for those of you so yeah
what I’ve learned and the company is dribbble right so dribble i cofounded
dribbble with my friend rich thornet back in Salem Massachusetts you know
back in 2008 and about two years ago we sold a majority of the company to
someone called tying a company called tiny they’re a holding company in Canada
and it’s under great leadership now and a new ownership
just last month I’ve actually stepped down day to day a Dribbble
officially to check to try some new things and so I thought it would be it’s
interesting time in here because I can really reflect on the last 10 years and
like what I learned and what just happened there it was kind of a
whirlwind you know coming up so for those that aren’t familiar with dribbble
it’s a community for designers to share their
work this is graphic design web design icon lettering that kind of stuff but
it’s also a place for them to get hired to create a portfolio we do meetups and
events and it’s become you know went from like this side project with a
couple employees to now a remote team of 50 people and millions of users and and
that’s all great and positive but it hasn’t necessarily been completely
smooth the whole way around and that’s one of the reasons I wanted to share
this story with you guys for instance I this is me before I started dribble and
I looked a little different ten years will do that for you I tell you thank
you for laughing – this is great it helps helps a lot so okay so I’m gonna
go through there’s 20 of them I hope I get through them all number one is
choose your partner wisely I mean this could be advice for your personal life
as well obviously but especially especially important when you’re when
you’re starting a company or maybe you don’t know you’re starting a company
like like like I was or like we were this is rich and I back in in the early
days and you know I mean we were friends and thankfully think we’re still friends
today and that’s that was that was not easy to maintain I think and that’s one
of the points another point I’m gonna get to you as well is like how important
that is but but honestly like co-founding is like a marriage it really
is like it sounds funny but it is and you’re gonna be you know here’s the
thing even if this is a small you know have no idea what its gonna become maybe
it’s a side project you’re starting with somebody or it can be innocent enough
and but the thing is if it becomes successful and and hopefully it does
you’re gonna be stuck with this person for a long time you have ten years maybe
in my case but so it’s real critical to to to be to be compatible I think for
rich and I we were compatible very compatible
skillset wisely overlapped perfectly and personality wise very different and that
has its challenges over that that length of time I mean it’ll become your biggest
most important relationship you’ll have should your thing take off and have legs
so number two start with a t-shirt right now you’re like geez don’t gonna walk
out at the back this is real okay this is real advice start with the t-shirt
and you know four dribble we started with this this shirt I had the logo on
the shirt printed before anything was really out there done which is kind of
ridiculous that’s not good advice but but I think having that t-shirt was
amazing when we were finally ready to invite people to use the site and then
sort of an alpha state we sent a t-shirt we mail the t-shirt and a card and this
is the actual card right here you’ve been drafted help us you know test this
thing so it’s like fifty of our friends and colleagues people that we selfishly
wanted to see what they were working on so this is posted but the shirt guilted
them into actually checking out the product which is really the key there so
and that’s you know it’s funny but honestly like number three is your first
hundred members you could choose a number there whatever the first group of
members that you have when you’re building a community or product that’s
it’s gonna involve people using it is it’s critical that first group is
absolutely crucial and for us it was it was especially crucial these are the
these are the people that are gonna give you feedback you know right away you’re
gonna be able to get feedback easier from those people they’re gonna be vocal
and opinionated and well they’re designers of course they’re gonna be
like that but so early early creation our curation of that is is really
important so it helped for us to say okay we have 50 t-shirts let’s send them
to these 50 people to sort of lay the groundwork and then you know we had an
invitation process built for dribble which allowed you know one
person to buy this person that person invites and so on so we have this tree
but what it means is that first person that first group became super important
so we did choose that wisely and that leads into number four which is paved
the cow path who’s familiar with this term buy the cow paths not a ton a few
actually I can’t really I can’t see anything I don’t even know I don’t know
if there’s anybody here like there’s piping in crowd noises and so but
painted they’ve the cow paths these you know crucial first group of people what
we did with dribbles we watched them use the service right we were we were loath
to like set rules right off the bat we watched them use it here they are we
watched them mark you know create these paths that we didn’t really anticipate
and and and a lot of functionality came out of watching them and then building
you know setting up rails on the for those those paths that they’re that
they’ve already gone down so you know for instance like somebody’s like what
state do you live in on dribble and they would upload a shot it’s Utah and then
you know 400 people replied basically with that and here’s where we live and
it turned into this thing that we ain’t we turn into rebounds we call them so
it’s like replying with a shot or playoffs and that’s just one example of
just kind of watching observing the user base use your product and react to that
right and and and try not to set too many rules around that there was some
other let me go back there was some other sites that were similar to dribble
early on in the early days and I think that they’d set rule I’m not gonna name
names they set rules specifically on what you could upload and how you use
the site and I think that ultimately was was a downfall for them so and I should
have said this earlier this is all like I don’t know what I’m doing
in all and actually that’s one of the other slides but I should have said like
take this with a grain of salt right now I’m not these aren’t prescriptions
really for you this is just sort of like my experience and doing this and and
then sharing that with you so number five don’t be afraid to throw things
away I mean this is this is one that was tough to learn because as a small team
building something and when you put a lot of time into a feature or a big
launch or whatever and and then to realize it’s not right and it’s not the
right thing for the company or for the for the members or whatever it’s tough
but you’ve got to be able to just chuck it away quick example this is the worst
thing we’ve ever came up with early on for you this is really bad because we
have this idea of like having a bank of pixels and you could donate pixels to
other members so that they could use those to upload it’s just terrible I
mean it’s awful because it looks like these giant amounts I think that’s – I
don’t even know what that is – billion trillion
there’s no commas I mean it was awful and my avatar is even worse so don’t be
afraid to like we put a lot of time and he doesn’t look like it because it’s old
– we put a lot of time into this back in in front end and this is just one of
many things we did wrong and then eventually got chucked away before they
were out to the public and that’s really the the crucial part there ok numbers
that goes into number six which is like persistent iteration over flashy flashy
launches and this always this always amused me when websites but we’ll have a
giant flashy launch like a big in and it’s it’s great and then there’s like
champagne and and maybe not champagne and whatever people are drinking now
it’s startups but like you know this is a big deal and then it’s it’s over and
then and then you don’t really remember it a couple months later you know what
that was so what we did because we couldn’t afford champagne is you know
persistent iteration slow changes to get to the
next place you know and that even went down to the logo that the tweaks the
mean to the logo for instance we didn’t want to alienate this community and this
is especially important for communities right where you’ve got people that are
comfortable it’s like this place they go and they want to be comfortable and if
you make changes rapid changes weird changes they’re gonna they’re gonna be
upset about that and so we tried to do very very calculated but slow iterations
over time you know so when we would we would do this internally too and we
would we would just try to come up with different ways of showcasing the the UI
that we currently had we we settle on it oftentimes it was something that wasn’t
that different from what we had and and that was that was okay and then we would
get feedback from the team and so I feel like that was especially helpful for a
community that gets comfortable in your in your space and and it doesn’t want to
see jarring changes so I earlier not knowing what you’re doing is okay and
that’s that’s like I mean I don’t know what I’m doing I never do about anything why am I here you’re asking why is this
guy up there I don’t know to be honest I mean I didn’t giving this talk but I
don’t really so I think it runs in the family I have a short story very short I
love the skateboard when I was a kid any other skateboarders fit for former
skateboarders yeah see more people okay awesome
I love skateboarding and when I was 12 I wanted to build this quarter pipe that
looked like this it was the dream I was in Vermont so there’s like nobody else
built ramps you had to build them ourselves my dad who’s equally as
unhandy as I am it’s like yeah I’ll help you we got a he got like circular
circular saw out that probably was used once before and he’s cutting the first
board and he like cuts right through the power
cord and you know like he was okay got electrocute or anything thank God
but that moment was really interesting to me because they could could have gone
a couple different ways it could have been like anger and super on both of us
I guess because where’s my ramp now but um but uh you know my dad I feel like it
was amazing cuz he just started laughing yeah you just started laughing and he’s
holding the thing and he’s just like and he just like he put it down and it was
like kind of tied in the other bag and just walked you know walked away it’s
like alright thanks thanks thanks for the help dad appreciate it but it taught
me a lot about not you know it’s okay to not know what the hell you’re doing
as long as if you make mistakes to be able to laugh about it right and I think
I feel like that’s been my whole career not knowing I’m doing but not being
afraid to just try it and if I cut the cord by accident well it’s just a saw
and and move on and do something else so you know I think the important thing is
be confident in your incompetence and be confident your misspellings
alright number eight is like is a good one right gross thick-skinned quickly
this was really important for dribble and it’s important for anybody that
makes anything actually out there that they could seen or whatever so because
designing for designers is like wow here’s an illustration of what it’s like
to design for designers okay I want to point out what’s going on here so the
green the Green Monster well the Hulk is the designer and the person in the bear
costume is a is something they don’t like that’s usually like a feature that
we just launched that we spent months on or it could be just that they don’t like
the sight that morning and a very vocal group right it’s really hard to design
for designers and we had some we’ve had some tough tough times in the in the
early days with press about this this this particular article is a gem we talk
about it often in the office the dribble ization of design so like just a little
snippet you know we have a growing number of people posting and discussing
their work on dribble yes good they’re mentioning dribble the aggregate results
of which are moving our craft backwards okay we’re honest I’m here guys we’re
doing right we’re doing good you know like this is AIGA
maybe you’ve heard of it they wrote an article has you know this is it isn’t
too difficult to come up with a lengthy list of how this kind of sharing harms
the design profession and paints us hypocrites thank you UAG a appreciate
that we’re just you know a couple couple people up in Salem Massachusetts trying
to build something and I share those in Jessica’s they’re kind of funny but like
you know then you’ve got social media geez stuff that just it’s just constant
you know that’s like actually that’s pretty awesome because I mean if we’re
that you know that’s crazy and then you know there’s this
all right that one’s great or you know oftentimes it’s like fu Dan specifically
me people are passionate about design right they’re passionate they love it I
love it I’m passionate to but but it’s hard it’s really hard right to see that
and it’s everywhere it’s not just in the design world right
key for us I think early on I was like learn to learn who to ignore I mean if
you do this long enough and you you gather feedback long enough you start to
see a lot of the same people complaining it and you kind of learn like okay this
person’s nuts you know so let’s not even worry about that one you know this
person’s very angry you know and then because oh this person oh they have a
point they’re just they’re just using you know expletives and and that might
be useful but you got it you got to be able to wade through that stuff right
the other trick is to celebrate the positive right there’s a lot of positive
thankfully because otherwise how would you do anything but celebrate the
positive I remember of a friend Jeff Jeff Veen
who started Typekit among other great things but here in San Francisco and I
remember him telling me that when they first started Typekit they would print
out like really positive tweets that they had and they would literally hang
them up in the conference room around the conference room so when they had a
meeting they could see the positivity because it’s hard it’s not it’s it it
gets drowned out at dribble we created a highlights slack channel right we’d put
all the positive stuff in there so the whole team could see that you’ve got a
it’s good to get critical feedback it’s not good to get non-critical feedback
but it’s really important to just focus on the positive stuff all right we’ve
got a lot more to go through here I’m gonna I have to fly I have to keep going
quick here o trends come and go and come back and this was great it’s like we
dribble would always get dinged on like yeah you know Oh everything on dribble
is like these skeuomorphic icons yeah it sucks
everything everything like this is the craziest trend to me if
you look at it right it’s just it’s like very well like visually interesting
stuff and they just add a shadow you know it’s there was a time when this
everything everything did look like that then it was like everything’s mono lines
that’s actually great I think it still holds up I never when everything was
cats you know or everything was pea soup greening that in like back in 2016 it
was like that one week right you guys remember that I don’t know but the point
the point of trying to make is is that things look trendy just wait and be
patient cuz it’s gonna come back around all this stuff it’s funny like
skeuomorphic stuff’s coming back like it’s just you know III would tell people
don’t get hung up on what’s trendy you know go with what go with what feels
right for the particular project because that’s the context right the context
isn’t this thing in a wider lens of what’s popular today it’s it’s what you
know stick to the project persistence alright which goes along with everything
is temporary and that’s okay this was crazy because I was going through my my
my portfolio that goes back a long time because I’m old and this was kind of
disappointing right so I just made really dumb stuff like to PayPal yeah
there’s like community for to pay owners funny enough I had a –air back then so
you know Icahn shop I made a thing for Twitter that let you OB r zh’ to people
and even made coaster teach there’s a t-shirt again see start with a t-shirt I
didn’t really work out for that one as well but you know corked was a wine
social network for wine people that I really enjoyed working I worked on audio
which is like one of the podcasts really so anyway I’m going through all this
stuff that I had made in the past and you know I was like wow it’s it’s all
God none of its around it it’s gone it’s completely gone I mean
maybe it’s in like the wayback machine or whatever and you know you can either
get depressed about that or you could think about you know the bigger picture
right that all these things that we get hung up on these challenges that we have
with these projects they seem like life or death and then they and then really
not because they’re weak they’re probably going to just disappear at some
point that’s pretty depressing sorry ah but that brings me to this one number
eleven people in our relationships our most important that’s what’s important
I’ve learned this this is what I’ve learned that that’s the most important
part of all this you know pixels disappear and people
don’t unless Thanos is involved but but honestly like the trick here things to
be kind your path you never know when your paths gonna cross with people when
you work with them you work with on one project or you know a company or
whatever you never know when they’re gonna come back you never know when a
door can open up with someone else so that’s all I’ve always had that in my
back of my mind if B be kind quick story about that like I was working on Oh Dios
it’s way back and that they were based here in San Francisco and I got an email
I’ll just call him Evan and he said hey Dan you know I got this other project
it’s called Twitter its TW Tiki he’s like do you want to do you want to work
on that team you want to do some design for it for that and I’m like nah I got I
got stuff to do I’m busy I’m too busy and plus the logos perfect
as is but uh but you know so yeah you never know what doors are gonna open
with who you’re working with right I found a jerk on the audio project
you know I anyway hindsight is 20/20 but the people that we work with I think the
four dribble especially I feel like the thing I’m
most proud about is the team that we built you know this is like the early
core team here before our acquisition but but you know those relationships are
super super important I am gonna fail this fitting all these in a time so I’m
gonna I’m gonna have to choose the most important ones here you know stay sharp
with side projects this is this was key because for me like as a as a former
freelance designer and then focusing on a product for so many years I felt like
I was behind on everything you know every any kind of technology or that and
I found side projects to be crucial for it for for keeping me up to date and
I’ll get into that a little bit more this is my latest side project I have
two G’s I got 40 seconds I’m glad I got this one in this is my next trick which
is adventure supply Co it’s an outlet to create stuff and make things and it’s
also you know place to learn how merchandise is made and it’s about a
place to make puppets and myself and learn how to video the puppet and that’s
me showing off the product but all these things I learned an immense amount from
and I have no grand plans for this but hopefully it turns into something now if
you don’t have to start a business for this to be valuable I think even
internally in your company you know do a newsletter if you like to write
newsletters do a blog offer to host a podcast or there’s a lot you can do
internally with a side project to keep your skills sharp and your and your
everything going so I’ve run out of time so this is number 13 it
there’s no 13 because that’s a that’s a lot of unlucky number 14 is no piece of
superstitious because that’s crazy no one believes that stuff 15 find a
good lawyer an accountant yeah I’m just gonna fly through identify when you’re
being stubborn I have this whole thing on SAS how I hated it
any SAS users and then I ended up writing a book about it yeah so you’ve
got you know don’t be stubborn I wish I could just know how to use source just
go through all these things quickly so I get to the end and then give you guys a
chance to have coffee and everything all they think I have a five-hour slot here
Oh 25 minutes okay is that so right teach yeah write and
teach I start a blog write teach you don’t have to be an expert to teach just
get out there and start sharing your your-your-your processes right I don’t
know what I’m doing I entered writing books
eighteens don’t take funding nothing more on that 19 take care of yourself
first all right this is big I’m done yeah I haven’t like I have anxiety
disorder right I didn’t know that until God like 10 years ago and I started
getting panic attacks and all this crap I went through a divorce this is right
in the middle of dribble this is why I’m talking about this but I feel like it’s
an important topic mental health and that’s it I just wanted to say it
because I want more people to talk about it right and I feel like a mental health
day it’s kind of a weird term it should just be a sick day right you got to take
care of yourself though before you take care of your team it’s like when you’re
on a plane they say you know put your oxygen mask on first before you know you
do anybody else it’s the same thing number 28 we made it guys number 20 no
one to let go and move on that means this presentation because I went to I
went too far that’s what that’s where I’ve gotten
after 10 years I finally know to let go and hopefully share what I’ve learned
and move on I’ll leave you with this too is that when things start to feel weird
scary I always say everything is Stardust and
Stardust is everything and that’s what’s important so thank you
very much sorry I went over a little bit enjoy coffee