Patchwork Quilt

quilt2

I recently finished a patchwork quilt. It was my first attempt and thanks to online tutorials and a bit of creative licence I am quite with how it turned out. Hopefully it wont fall apart on the first wash!

Below are some of the links for the tutorials I followed, along with links to shops where I purchased the pretty fabric:

http://www.cherrymenlove.com/crafts-how-tos/2010/03/how-to-make-a-patchwork-quilt.html
http://www.instructables.com/id/How-to-sew-a-quilt-Quilting-101/
http://www.misformake.co.uk/
http://fabricrehab.co.uk/

Cabbage Caterpillars

Cabbage CaterpillarsCabbage Caterpillars

Pests! For some reason this year caterpillars have decided to invade our crop. We hadn’t ever had a problem with them before, and we had even gone to the effort of covering the crop with white net to stop the white fly we usually get. Maybe it was the weather this year but we had hundreds of them. Unfortunately we had so many hiding in the heads of the broccoli and cauliflowers when they did grow that they were inedible :(

Snowy Sunday!

This morning I woke up to several inches of snow. Here are a few pics of from my walk in the park :)

Snow DaySnow Day

Snow Day

Facebook like button – Display the images and content you want.

When a user likes your site using the facebook like button. Facebook posts an image, a link and a description to their wall. But how do you get facebook to show the image and text you want it to display? Afterall this is a good way to advertise and an opportunity not to be missed.

By inserting a couple of metatags (open graph tags) into the head of your page you can select the content you wish to display really easily. You can find comprehensive information on how to do this on the facebook developer site.

However I am going to give you a quick summary of my interpretation of this information.

The header of your site should contain the following:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your Page Title</title>
            <meta property="og:title" content="Site Page Title Goes Here"/>
            <meta property="og:type" content="article"/>
            <meta property="og:url" content="http://yoursite.com"/>
            <meta property="og:image" content="http://yoursite.com/images/thumbnail.jpg">
            <meta property="og:site_name" content="Site Title"/>
            <meta property="og:description" content="A description of your site"/>
            <meta property="admins" content="12345"/>
</head>

Notes on the above code:

  • Ensure you have all the extra information required after
  • og:title should be your page title
  • og:type should be set to article. There is a wide range of types available however article seems to be the most relevant for a page that is transient. eg a blog post or marketing landing page. Article also seems the most reliable option and produced the least amout of errors for me in facebook lint.
  • og:url This should be your website url and the page you have this code on. This may sound stupid but the url must be url of the page with this code on! Modifying this to the live url (before the page is live) will mean facebook cannot find the correct image path.
  • og:image This should be the path to a thumbnail image of your choice.
  • og:description A short description of your page.
  • admins Despite facebook suggesting you use “fb:admins” I found this to be buggy. “admins” seems to be more reliable. You can find out your facebook admin by clicking on an image within your photo album and looking at the url for the numbers proceeding ?fbid= e.g http://www.facebook.com/photo.php?fbid=NUMBERHERE&set=t.11111&type=1&theater

Verifying your code
You can check your code by using Facebook Lint Tool. This will let you know any mistakes and also make facebook aware of your page.

Hopefully the above code helps! More information on Open Graph Tags or the like button can be found on the facebook developer website.

Christmas Markets in Vienna

To get in the festive spirit, we spent the weekend in Vienna sightseeing and exploring the numerous christmas markets.
There were plenty of markets to explore and being crafty I wanted to see all of them. There were some really nice stools with unique hand crafted items although I have to say I was slightly disappointed to see similar items across all the markets. It seemed a shame that there wasn’t more hand crafted items and less mass produced. Having said that I enjoyed every minute of it. Below are a few pictures of my favourite stools.

Vienna Christmas MarketsVienna Christmas Markets
Vienna Christmas MarketsVienna Christmas Markets
Vienna Christmas MarketsVienna Christmas Markets
Vienna Christmas MarketsVienna Christmas Markets

Vienna Christmas Markets

Grape Jam

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

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

knittingknitting

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

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

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.

renegade


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.