2toria

No Years Resolutions

Resolutions, resolutions, resolutions.  They’re a pain in the arse, aren’t they?

Last year I promised myself (and you) that I would not procrastinate, that I would post at least twice a week, and lots of other false promises…  I did manage to get a few things done, but nowhere near as much as I’d planned at the beginning of the year (only 30 posts in 2014…poor effort).

So, I’m not doing that this year, at least not publicly.  I do have plans for the site and some other exciting projects during this year, but for now I’m keeping them in my head!!  In the meantime please keep on coming back, and I’ll try to keep you entertained more during 2014.

Happy New Year, by the way.

Tutorials Web

Getting to grips with Emmet – part two

Emmet is a useful bit of kit that allows you to quickly create HTML markup by using CSS-style abbreviations.  A couple of days ago I posted an introduction to the syntax of Emmet and asked you what the basic Emmet code would be for the following:-

<div>
  <h1></h1>
  <p></p>
  <h2></h2>
  <p></p>
</div>

Did you get it in the end? The answer I came up with is this:-

div>h1+p+h2+p

Try it now in codepen, jsbin or jsfiddle and after typing press the tab key and the HTML markup should appear as shown earlier.

In today’s post I want to cover a couple more handy hints on using Emmet to speed up your HTML coding.  The first thing I want to cover is producing code like this:-

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Fairly straightforward using what we know already, isn’t it?

ul>li+li+li+li+li+li

BUT, it’s still a bit of a pain to type in, and counting those li elements is a bugger, too.  What if we had twenty list items, or thirty, or even more?  Turns out Emmet lets you do things in a much simpler way.  You just tell it how many elements you want using the multiplication symbol (*):-

ul>li*6

How simple is that?  Amazing, I say.  Using this technique you can easily create as many elements as you like!  Brilliant..

So, to make something like this:-

<div>
  <p></p>
  <p></p>
  <p></p>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

You can now write this:-

div>p*3+ul>li*3

Not too complicated at all, is it?

One more hint for today before I sign off.  How do you think you would do this?

<div>
  <p></p>
  <p></p>
</div>
<div>
  <p></p>
  <p></p>
</div>
<div>
  <p></p>
  <p></p>
</div>

It’s quite a tricky one and (as far as I’m aware) isn’t possible with the basics I’ve taught you so far, because all we really know at the moment is to nest items or make them siblings of each other.  What we can see from the example is that we are looking at three adjacent divs, each with two paragraphs in it.  To pull of something like this we need to group things together, and we do that using parentheses (brackets to you and I).

Grouping items means you can apply the same kind of syntax, but have things together as one.  Consider this:-

<div>
  <p></p>
</div>
<div>
  <p></p>
</div>

Using parentheses, you could do this:-

(div>p)+(div>p)

Try it now.  Magic eh?  This has said that we want the div>p to be grouped together and then made into a sibling of div>p.  The brackets bring the elements together so that Emmet treats them as individual.  Now, given that we know how to specify how many times an element is created, we can combine what we know into this to get the result we need:-

(div>p)*3

Again, magic!  Parentheses can be used to group items together, and can even be nested to make much more complex structures than we could at the start of this article.  Try the example below for size (after you’ve tried to figure out what the outcome will be):-

(div>p)+(div>ul>li*5)+((div>h2>p)*2)*3

(Ok, it’s overcomplicated, but you get the idea).  In part three of this series of articles I’ll be looking at some more hints, including adding id and class attributes to your elements.  Come back soon!

CSS Web Links

Tridiv – In-browser CSS 3D Editing

I’m a sucker for clever web things, and today’s link is no exception.  Tridiv is an interface where you can create 3D shapes in CSS, and all without knowing how to make 3D shapes using CSS at all.

tridiv main

The interface is extremely cleverly put together, and literally allows the user to create 3D objects as they might be used to in some other 3D editing interfaces.  There’s a top, front and side elevation, and a handy window for you to move and rotate your newly created object.

tridiv interface

Basic primitive shapes are included in the mix (cuboid, cylinder, prism and pyramid), which you can add to the scene, after which you can rotate, enlarge, and move to your hearts content.  Colors and opacity can be manipulated too, giving you the means to make some pretty spectacular 3D shapes if you wish.  Lighting, shadows and images can also be added to your creations, giving you the ability to make some pretty impressive things.

Once done, you can save for use elsewhere, or even export to Codepen to share with others.

Some have criticised the project based on its practicality, but I personally think it’s a fun little tool that really demonstrates how far the web has come along.  And it was made by just one person!

Only downside is that it currently only works in Chrome, but Julian Garner has claimed he is working on versions for other browsers soon.

To really see what could be done with it, check out this demo on Codepen, created by the developer himself!

Tutorials Web

Getting to grips with Emmet – part one

Quicker (and clever) ways of doing things always impress me.

HTML can be a bit of a pain to write out, especially if you’re building the skeleton for a webpage or website.  Emmet is a very handy tool that makes building the basic framework of HTML an easier, quicker task.  This is the first of a number of tutorials the basics of what it is and how to use it.  There’s actually quite a lot to Emmet and how it works, so I’m going to start with the basics.

emmetlogo

Emmet is ‘a web-developer’s toolkit that can greatly improve your HTML & CSS workflow’, to quote the developers website.  It exists as a plugin to text editors, and can also be found on some of the online web editors (such as jsfiddle, codepen and jsbin).  In the examples that follow I’m going to use codepen, but it’s up to you which you want to use.  You could use your own IDE, but installing, configuring and using can differ, so for now if you’re new I’d suggest following along in one of the web-based editors so that the series makes sense.  I’ll cover using it as a plugin at some point in the future.

So, how does it work?

Take the following HTML structure as a simple example:-

  <body>
    <div>
      <p></p>
    </div>
  </body>

Emmet lets you specify HTML structure in an quick, abbreviated and simplified way,  and automatically expands to the full HTML structure. It’s kind of like using code snippets if you’ve used them before, only very quick and very cool.

Using Emmet abbreviations, the code above would look like this:-

body>div>p

Let’s try it now.  Open up codepen and in the HTML section type the code directly above and press the tab key.  As if by magic your HTML structure will appear, indented and everything.  Isn’t it cool?

Now, try this:-

body>div>ul>li+li+li+li

Once again, press the tab key directly after.  You should now get this:-

<body>
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
</body>

Great, isn’t it?  But what exactly is going on?  Let me explain.  If you know advanced CSS selectors, you might already have figured it out, but here goes.

The examples so far use two symbols, > and +.  The greater than symbol denotes nesting (and the parent/child relationship), so in this example:-

div>p

We are saying we want a paragraph element within a div.  This:-

div>ul>li

says we would like a div, which contains a unordered list, which in turn contains a list item.

Simple so far?  Now for the plus symbol, which asks that the elements surrounding it are adjacent to (or siblings of) each other, so:-

li+li+li+li

would give you

<li></li>
<li></li>
<li></li>
<li></li>

And the following:-

div>h1+p+div>ul>li

Would give you:

<div>
  <h1></h1>
  <p></p>
  <div>
    <ul>
      <li></li>
    </ul>
  </div>
</div>

Does that make sense?  This is the most basic of Emmet syntax, and that’s where I’m going to leave you for today.  Try it out in codepen and see what you can come up with.

Next time around I’ll go into more detail on more advanced markup you can create with this handy little tool.  Until then, as a challenge try and come up with the Emmet syntax for the structure below:

<div>
  <h1></h1>
  <p></p>
  <h2></h2>
  <p></p>
</div>