The focus keyphrase in Yoast SEO – Yoast SEO for WordPress training

The focus keyphrase in Yoast SEO – Yoast SEO for WordPress training


In the previous video,
we’ve described what a focus keyphrase is and why it is important to choose the right
focus keyphrase for your posts and pages. Now, we’ll explain
how the Yoast SEO plugin can help you with optimizing your text
for the focus keyphrase you’ve chosen. The Yoast SEO plugin has a specific input
field for your focus keyphrase. When you fill out your focus keyphrase,
the plugin evaluates the page’s content and provides feedback on how to improve
the text for that focus keyphrase. For example, it checks if you use the focus
keyphrase often enough throughout your text, and whether you use it
in enough subheadings. So, the plugin basically shows
to what extent your text is SEO-friendly for that specific focus keyphrase. Search engines are becoming smarter. They increasingly use the context
surrounding terms to build a complete picture
of what that term means. That’s why we help you optimize your text
with synonyms as well – if you have Yoast SEO Premium. Synonyms of a word are words or phrases
that have the same meaning. A synonym for [dog], for example, is
[canine], [hound] or [man’s best friend]. Using synonyms in your copy can help
people understand it better, and it improves the readability of your text. If you repeat the same word
very often in your copy, it looks like you’ve written it
for search engines, not humans. In Yoast SEO Premium you can indicate
which synonyms you have used in addition to your main keyphrase. Then, the plugin will take these synonyms
into account in the keyphrase checks. Search engines also recognize word forms
such as plurals, singulars, comparatives, or past-tense variants of the same words. That’s why we also added this functionality
to the Yoast SEO Premium plugin. The plugin will now recognize all word forms
of your focus keyphrase. Sounds abstract? Let’s go back to the example
of the dog training school we’ve introduced in the previous video. Let’s say one of their focus keyphrases
is [teach dog to sit]. With this new functionality, the plugin
will not only recognize the exact keyphrase but also alternative matches
with different word forms, like [teaching dog to sit]
or [teaching dogs to sit]. In addition, word order doesn’t influence
keyphrase recognition anymore, both for search engines and in Yoast SEO. So, it doesn’t matter if you write
[a trained dog] or [a dog that is trained]. In both sentences,
the Yoast SEO analysis will find the keyphrase
you’re optimizing your post for. This will enable you to write
in a more natural and free way and still get green bullets from Yoast. Finally, search engines
also recognize related terms. This means that in a text
about puppy training, search engines will also recognize words
like [rewards], [commands] or [behavior]. In Yoast SEO Premium, you can also set
related keyphrases for your post or page, apart from your focus keyphrase. Your focus keyphrase
is the most important, of course. That’s why we’re less strict in our analysis
of your related keyphrases. So, in conclusion, you can fill out your focus
keyphrase in the Yoast SEO plugin, and then it evaluates your page’s content and provides feedback on how to improve
the text for that focus keyphrase. If you have Yoast SEO Premium,
the plugin will also check for synonyms, related keyphrases,
and different word forms.

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