Tag Archives: web

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>
Web

Linking to external files in web development

This one seems to trip people up quite a lot, especially when linking to js files or extrernal stylesheets, but it’s actually quite simple once you get your head around it.

Let’s say you have a page, ‘index.html’ that is linking to an external stylesheet (‘style.css’) which is contained in the same folder.

references-simple

Linking your file in this case is so simple you probably already do it:-

<link href="style.css" />

Because the css file is at the same level as the one requesting it, nothing more complicated is needed.  Simple so far?

Ok, now let’s say you have a separate directory in your folder structure where you want to keep your external files, such as ‘styles’, seen below:-

references-1

In this case you need to change the link so that it points to the correct file and in the correct folder.  Your link would look like this:-

<link href="styles/style.css" />

As you can see we’ve specified the folder name and the file, making sure that we use a forward slash (/) to separate the folder name from the file name.  With me so far?

Ok, now here’s a more complicated  scenario.  In this scenario, the page we are looking at ‘index.html’ is inside another folder, but the stylesheet we want to use is in a parent, or containing folder instead:-

references-1a

Neither of the solutions we’ve used so far will get us anywhere.  Instead, we have to tell the html to move up a folder and then link to the file.  We do that by using two dots, like this ‘..’

So, in this case, we would link to our stylesheet like this:-

<link href="../style.css" />

What this is telling the browser is that the stylesheet is a folder up from where we are.

Now, finally, let’s look at a more complicated example, where the stylesheet is in a completely different folder from the html.

references-2

So, how you you think we get to our stylesheet?  The best way of figuring this out is to work out how we would tell the html where the css is located, and translate that into the correct notation:-

So, we need to move up a folder (../), and then select the styles folder (styles/) followed by the stylesheet file we want to link to (style.css).

Putting this all together will look like this:-

<link href="../styles/style.css" />

And the link should work perfectly.

This method of using ‘relative’ references to files in html is not only useful for linking to css files, you can use it for any resource that is linked to in your html, from js files, to images and more.  You can even use the same relative referencing for links to other pages in your website.  If you can get it around your head how this stuff works, it will make your life much easier.

One thing worth mentioning should be commonsense to you.  If you move any of the files you are linking to, then the hard-coded relative references will break, so make sure you always update the location in your html as well when you start moving files around.  Some IDEs do this for you automatically, but don’t take this for granted.

Excel

Excel standards

Just recently I’ve been getting into web development stuff a lot.  Part of my job has changed and as a result I’m now not only developing for Office, but making tools that can be used via the web.  It’s a lot of fun learning this stuff, and kind of reminds me of my early days of picking up the basics of Office and VBA.

The one thing I’m noticing a lot with the web development stuff however is the emphasis placed on building web-based applications to web standards, incorporating accessibility and a separation of concerns.  That is, that semantic content, style and logic (ie the code that drives the application) shouldn’t overlap, but should be stored as separate files to make them not only easier to manage but to ensure they meet web development standards.

In fact, if you are developing for the web there is a validation tool at validator.w3.org which reads your html markup and tests it against current web development guidelines to ensure that your code is ‘valid’.  Things like checking that html tags are closed properly and that images have an ‘alt’ attribute are two such ‘rules’ you need to follow to ensure your markup is ‘valid’.  Valid markup and CSS have many advantages – your SEO is improved and you can guarantee that your pages are accessible to screen-readers, for example.

Whilst learning all this new stuff and trying my best to stick to the rules I got to thinking about development for Office products, mainly Excel.  Is there a ‘standard’ to stick to when developing Excel workbooks/applications?  I can’t find any kind of software which can check your work against any kind of predefined and acceptable ‘standard’.  I did a tongue in cheek post about the things I hate about your spreadsheet a couple of weeks back which kind of hints at some of the no-no’s, but what about general best practises?

Some things I would suggest are basic common sense:-

Variables should always be declared in code
Option Explicit should be mandatory 


Where possible, names should be used for ranges rather than absolute or relative references.
This makes your work easier to read, manage and maintain, both for you and others who might inherit your work.  As an example, this:-

=VLOOKUP(A1, Salaries, 2, FALSE)

Is much easier to read than this:-

=VLOOKUP(A1, Sheet2!$B$12:$F$13, 2 FALSE)

Isn’t it?

Worksheets should be named based on their contents.
No default worksheet names should appear in your work.

Unnecessary calculations or ‘helper’ cells should be hidden from reports if they don’t help in displaying your data.

Color should be used sparingly and to useful effect.
People with version of Excel prior to 2007 take note – the standard color pallette provided by Excel is pretty horrible and limited to a selection of about 56 colors.  One of the first things you should do is go into the options and change those bright, garish colors to something more pleasing on the eye.  Personally I like pastel shades rather than heavily saturated choices.  It’s a personal thing, but I think it makes a real difference.

Your code should make sense and be commented.
Comments are king in programming, no questions asked.  If others are to inherit your code, it’s so much easier to grasp the role of a sub or function if you define what it does.  You should especially comment particularly complex or tricky sections in your code so that they know what was going on in your mind when you gave birth to it.  It helps you, too.  I often come across code I’ve created in the past and been thankful that I left instructions for my future self on what I was doing all those years ago.

Charts
Charts would require a whole section just to themselves, and are a controversial matter for some.  The key with the visual display of information as far as I am concerned is similar in some ways to the semantic web – the display should be clear, uncluttered and get the message across in as plain and simple a way as possible.  Due to the objective nature of this subject it would be nigh on impossible to write a full specification of standards, but leaders in the field such as Stephen Few and Edward Tufte have made great inroads to doing this.   Reading any of their work or any of these blogs:-

Bella Consults
Excel Charts
Junk Charts
Peltier Tech Blog
Storytelling with Data
Visual Business Intelligence
Visualising Data

..will see you on the right kind of path.  There’s loads more to read out there, but adding these to your regular reading list will help you understand what is perceived as right and wrong in terms of building visual displays for data.

There are a heapload of further suggestions I could throw into the mix, but I could be here forever.  I find it interesting that there aren’t really and solid, defined and followed guidelines into correct spreadsheet creation, or at least none that I know of.  I did come across this, and it seems like a reasonably good start, but it would seem that there are no working groups to speak of to ensure that Good Practise is followed.

I know comparing spreadsheets to the web is like comparing chocolate to lettuce, but I do feel that there should be a set of common standards/guidelines that professionals should stick to and beginners should be made aware of from, well, the beginning.

What are your thoughts?  Have you come across any kind of global development guideline that I’m not aware of?  What other ‘rules’ would you have in place for spreadsheet application development?  Answer in the comments..

Data Internet Web Links

Cool data visualisation

Wordle lets you type in either free text or the address of a website that has an RSS feed and returns a Tag-Cloud style graphic based on the number of times particular words appear in that text.  The image below is from 2toria for the past few days:-

I find it quite interesting the way this works and love the visualisation of the data found.  Think I might mess with this to see what the results are and how they change on a weekly basis.  There’s a lot of options on the site, including font, colour and layout of the words.  This kind of visualisation of data, I think, tells quite a tale about the information fed into it.  I’m wondering how useful something like this might be in Excel, or if it could be easily implemented and put to good use?