HS.Hannah Stothard | Web Designer & Front End Web Developer

i love arty crafty things, making websites, interiors, travelling & growing my own veg.

recent posts

Grape Jam

Posted in allotment, food | 2 Comments

What do you do with 4+ kilos of home grown and slightly undersized grapes? Make jam of course!

Grapes

Well that was the plan. It possibly wasnt the best idea we had ever had. A grape cake or dessert may have been a bit quicker. However the final product was well worth it. It turns out Grape jam is really delicious if you are prepared to put in the time. (1 weekend and 3 evenings  it took us)

For every kilo of grapes you will need 500g of jam sugar (with pectin). We made our jam in 1 kilo batches because I read somewhere it makes setting easier.

The first step of making the jam is to remove the seeds. The best way of doing this is to peel the grapes and boil the skins and flesh in separate saucepans, adding 500ml of water to the skins. After a little while the flesh will seperate from the seeds and then you will be able to sieve them to remove them.  Our type of grapes popped out of their skins with a little pinch. This was by far the most time consuming part.

Next mix the flesh and the skins (you may wish to blend the skins a little to make them smaller) back together and bring to the boil. Remove from the heat and add the sugar. Once it has all disolved bring the mixture back to the boil.

The hardest part is getting the right thickness. Keep boiling the jam until it reaches the right consistency. This can be checked by placing a little of the mixture on a cold plate and placing it in the freezer for a minute. If its done it will gather up when you push your finger into it. Out of the 4 batches I only managed to get this right once. The other batches had to be reboiled the next day or became a little too thick!

Making Jam

And here is the final product. 24 jars of jam in total (15 jars below).  I still to need to make some pretty labels but other wise we are really pleased with how they turned out.

Grape Jam

Knitting Window Installation

Posted in play | Leave a comment

I was shopping in Oxford Street one evening last week when I spotted this…

knitting

knitting

Claire Nixon is the lovely lady knitting away in this live installation at Oasis. As it says in the first picture. “By the end of this week, Claire will have been lovingly hand knitting for 7 days and will have made a giant scarf over 5 metres in length!”

I think the window was a really nice idea. It looked great and certainly drew my attention to Oasis. Claire’s work is also fascinating, you can read more about her on her website and admire her chunky knitting. :)

HTML 5 – Page Structure

Posted in web | Leave a comment

Having built this site using HTML5. I thought it would be good to share a few of my learnings, resources and tips that I have picked up along the way.

As far as I can gather there is absolutely no reason why not to start using the HTML5 doctype. Its short and simple to write and completely backwards compatible. Well the doctype at least. Most of the new features are not, but some do degrade nicely, especially some of the new form elements. As long as you are aware what features have cross browser compatibility issues then you are good to go.

<!DOCTYPE html>

Page Structure
As you can see by viewing the source code of this site I have started implementing some of the new HTML5 tags. In particular:

<header> – For containing header content. A good replacement for <div id=”header”></div> or whatever <div> you might have used to hold your logo or main page heading content. This tag can also be used for content headers or other heading sections on your page. Feel free to use this tag multiple times if needed.

<hgroup> – Used to wrap several heading tags (h1,h2,h3,h4 etc) if they should be read together. Such as a main title and its sub title.

<section> – Exactly what it says. Used to wrap sections of your page. This will probably end up replacing alot of <div> tags.

<article> – Most likely to be used in blogs or news sections. Wraps each piece of news or each publication.

<footer> – Very similar to the header tag. This would most likely replace your <div id=”footer”></div> or the last section of your page. It can also be used multiple times if required.

To see these tags in action I have put together a really simple site structure as an example:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<title>This is a test</title>
</head>
<body>
<header>This is the main header of the page</header>
<section>
    <header>
        <hgroup>
            <h1>Header of this section</h1>
            <h2>Sub heading of this section</h2>
        </hgroup>
    </header>
    <p>Content for the section</p>
    <footer>Footer of this section</footer>
</section>
<footer>This is the footer for the page</header>
</body>
</html>

You can also see an example of the tags in use by viewing the source of this page.

Semantics
The biggest benefit of the new HTML5 tags is achieving really semantic code. If written correctly your page should have a really logical structure. A good way to check if your code is well written is to use one of the following links:

http://code.google.com/p/h5o/
http://gsnedders.html5.org/outliner/

Cross browser compatibility
To ensure that our new tags are rendered correctly by all browsers, we need to add a small piece of css to set these elements to display as block level elements. This way we can style them in the same way we would the <div> tag.

article, aside, canvas, details, figcaption, figure, footer, header. hgroup, menu, nav, section, summary{display:block}

For IE we need to add some javascript. Setting the elements to display block is not enough. IE doesnt recognise the tags and therefore will completely ignore any styling on them. Using the below JS will fix this problem.

http://code.google.com/p/html5shiv

Resources
Some of my favourite HTML5 resources at the moment are:

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#1
http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/
http://spyrestudios.com/21-incredible-html5-experiments/

Renegade Craft Fair, London 2011

Posted in creative, play | Tagged , | 1 Comment

This weekend I went to the Renegade Craft Fair on Brick Lane. It was their first ever London event and it was brilliant. Its one of the best craft fairs I have been to in a long time. Every single stool was full of really nice handmade things. All the crafts were modern and really reasonably priced. I had to hold back the temptation to spend lots of money.


Chalk signpost for the fair



Stools

There was a free felt making class courtsey of The Make Lounge. The Make Lounge do a variety of evening classes that I have always fancied doing. Hopefully one day I will get round to doing a real one :) It was my first attempt at felting and I quite enjoyed it although the little fox I made must have taken an hour in total. Felting involves jabbing a needle repeatedly into hair like material until it starts to matt together. You shape your creation by turning the matted felt and making some areas denser than others.