femgeek

Why I moved to a static site

2020-12-31T00:00:00Z

There are various reasons I spent a solid 24 hours forcing myself to port over my blog.

The main one being, I'm lazy af. Have you ever tried to upgrade a wordpress installation thats on wordpress v3.8! (its on v5.6 at the time of writing) The PHP version is woefully outdated and I'm pretty sure there was a spider crawling about in my SQL database.

I've been quite fortunate in that when I setup my linode I locked it down so much. I used cloudflare and some intense caching but all that made it really hard to keep up to date with security updates. I followed (and still follow) this excellent guide how to setup your linode every time I setup a new machine but I just dont have the time any more to spend maintaining servers.

I've ported my site over to 11ty I uhmned and ahhed between this and gatsby but for the sake of simplicity I chose eleventy. I'm glad I did. The code is all public.

What I've lost in the move is the download counter for my freebies it wasn't a requirement but it was nice to see if people were using them!

I also haven't setup comments yet. I'm considering a little node app on heroku that will comb github issues and rebuild the blog with them included. I didn't want to use something hosted elsewhere though.

How to show posts on the homepage of eleventy-base-blog

2020-01-30T00:00:00Z

I've just finished switching over my wordpress blog to a static site. I've had to make a few compromises and theres a few reasons for the switchover but thats for another day!

One of the requirements I had was that I wanted it show the full post on the homepage but I had an issue then where the images were coming back with relative urls and not displaying.

{% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %}
{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | safe }}

Another long winded solution that may be of help to someone googling is this method. It lets you modify the image url with a custom renderer.

My blog is based on the eleventy-base-blog so it uses markdownIt to parse the markdown. I added a renderer that looks to see if an image url starts with http or https and if it doesn't it adds the rest of the url to it.

This is how I displayed the collection content within my template.

{% for post in postslist | reverse %}
  {{ post.templateContent | safe }}
{% endfor %}

This is what I ended up with for adding in the metadata siteUrl for anything that does not already start with http/https. Messy but it works.

  /* Markdown Overrides */
  let markdownLibrary = markdownIt({
    html: true,
    breaks: true,
    linkify: true
  }).use(markdownItAnchor, {
    permalink: true,
    permalinkClass: "direct-link",
    permalinkSymbol: "#"
  });


  var defaultRender = markdownLibrary.renderer.rules.image;
  markdownLibrary.renderer.rules.image = function (tokens, idx, options, env, self) {

    const token = tokens[idx];
    const aIndex = token.attrIndex('src');
    const link = token.attrs[aIndex][1];
    

    if(/(http(s?)):\/\//i.test(link)) {
    
    } else {
      var abspath = '';
      abspath += env.metadata.url;
      if(env.page.url.charAt(0) === '/') {
        abspath += env.page.url.substring(1);
      }
      
      abspath += "/" + link;

      tokens[idx].attrs[aIndex][1] = abspath;

    }

    // pass token to default renderer.
    return defaultRender(tokens, idx, options, env, self);
  }


  eleventyConfig.setLibrary("md", markdownLibrary);

Black & White Photoshop Actions

2013-05-30T00:00:00Z

I’ve been using these actions for a while but I never released them as part of the femgeek 12 days of christmas! (too many freebies!) Two black and white actions for your photos. One gives a high contrast black and white image, the other works best on low key photographs and produces a black and white image with a soft violet hue.

Click the 'download' button on the top right hand corner above where it says 'View raw'

Note: You may get an error on the Violet one, dont worry it still works, just click ok.

Also these have been created in Photoshop CS5.

12 Days of Femgeek Christmas - Festive Greens Curve

2012-12-24T00:00:00Z

Day 12 of the 12 days of Femgeek Christmas! When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages. It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded a festive greens curve from femgeek.co.uk download it here: http://bit.ly/W0FBG1 #12daysoffemgeekchristmas from @apricot_13

Adds Christmassy dark green hue to your photos – not just for christmas photos though!

Click the 'download' button on the top right hand corner above where it says 'View raw'

12 Days of Femgeek Christmas – Brightness Lightroom Preset

2012-12-23T00:00:00Z

Day 11 of the 12 days of Femgeek Christmas!

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded a free Lightroom Preset from femgeek.co.uk download it here: http://bit.ly/121azE5 #12daysoffemgeekchristmas from @apricot_13

An Adobe Lightroom preset to brighten up your photography.

Click the 'download' button on the top right hand corner above where it says 'View raw'

Don’t know how to install or use this download? Don’t worry, I created a little guide to help you. But if you run into any trouble tweet or email me and I’ll try to help.

12 Days of Femgeek Christmas - Delicate Textures

2012-12-22T00:00:00Z

Day 10 of the 12 days of Femgeek Christmas!

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded some delicate textures from femgeek.co.uk download them here: http://bit.ly/VyURt7 #12daysoffemgeekchristmas from @apricot_13

8 delicate textures to apply to your photos.

Click the 'download' button on the top right hand corner above where it says 'View raw'

12 Days of Femgeek Christmas – Vintage Christmas Lightroom Preset

2012-12-21T00:00:00Z

Day 9 of the 12 days of Femgeek Christmas!

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded a free Lightroom Preset from femgeek.co.uk download it here: http://bit.ly/QRoaKO #12daysoffemgeekchristmas from @apricot_13

An Adobe Lightroom preset to give your christmas tree photos that vintage feel. Works best on dark greens.

Click the 'download' button on the top right hand corner above where it says 'View raw'

Don’t know how to install or use this download? Don’t worry, I created a little guide to help you. But if you run into any trouble tweet or email me and I’ll try to help.

12 Days of Femgeek Christmas - Mulled Oranges Curve

2012-12-20T00:00:00Z

Day 8 of the 12 days of Femgeek Christmas!

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded a free Photoshop Curve from femgeek.co.uk download it here: http://bit.ly/SNuS4f #12daysoffemgeekchristmas from @apricot_13

A photoshop curve that gives your images a warm orange effect. The blacks are warmed up and the highlights get an orange vintage tint.

Click the 'download' button on the top right hand corner above where it says 'View raw'

Don’t know how to install or use this download? Don’t worry, I created a little guide to help you. But if you run into any trouble tweet or email me and I’ll try to help.

12 Days of Femgeek Christmas - Bokeh Textures

2012-12-19T00:00:00Z

Day 7 of the 12 days of Femgeek Christmas!

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded some bokeh textures from femgeek.co.uk download them here: http://bit.ly/VXONg3 #12daysoffemgeekchristmas from @apricot_13

5 bokeh textures to apply to your photos.

Click the 'download' button on the top right hand corner above where it says 'View raw'

12 Days of Femgeek Christmas – Chocolate Blue Curve

2012-12-18T00:00:00Z

Day 6 of the 12 days of Femgeek Christmas!

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded a free Photoshop Curve from femgeek.co.uk download it here: http://bit.ly/YXtgbA #12daysoffemgeekchristmas from @apricot_13

A photoshop curve that gives your images a chocolatey blue effect. The blacks are warmed up and the highlights get a blue tint. Works best on images that have a high contrast with lots of black.

Click the 'download' button on the top right hand corner above where it says 'View raw'

Don’t know how to install or use this download? Don’t worry, I created a little guide to help you. But if you run into any trouble tweet or email me and I’ll try to help.

12 Days of Femgeek Christmas – Christmas Wallpapers

2012-12-17T00:00:00Z

Day 5 of the 12 days of Femgeek Christmas!

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded my christmas wallpaper from femgeek.co.uk download it here: http://bit.ly/VInBWq #12daysoffemgeekchristmas from @apricot_13

Christmas Bokeh wallpaper with Red lettering.

Included in the zip file are sizes:
2560 x 1440, 1680 x 1050, 1440 x 900, 1280 x 800, 1024 x 768, 800 x 600, iPad, iPhone

Click the 'download' button on the top right hand corner above where it says 'View raw'

Christmas Bokeh wallpaper with Green lettering.

Included in the zip file are sizes:
2560 x 1440, 1680 x 1050, 1440 x 900, 1280 x 800, 1024 x 768, 800 x 600, iPad, iPhone

Click the 'download' button on the top right hand corner above where it says 'View raw'

Christmas Bokeh wallpaper with no lettering.

Included in the zip file are sizes:
2560 x 1440, 1680 x 1050, 1440 x 900, 1280 x 800, 1024 x 768, 800 x 600, iPad, iPhone

Click the 'download' button on the top right hand corner above where it says 'View raw'

12 Days of Femgeek Christmas – Handwritten Font

2012-12-16T00:00:00Z

Day 4 of the 12 days of Femgeek Christmas!

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded a free handwritten font from femgeek.co.uk download it here: http://bit.ly/TLsxUI #12daysoffemgeekchristmas from @apricot_13

A handwritten font for you to use. Maybe write your christmas cards in it!

Click the 'download' button on the top right hand corner above where it says 'View raw'

12 Days of Femgeek Christmas – Bunting Photoshop Tutorial

2012-12-15T00:00:00Z

Updated 28/12/2013: I’ve added a gif to help explain the pen tool steps a bit better!

Day 3 of the 12 days of Femgeek Christmas!

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just created some digital bunting from femgeek.co.uk download it here: http://bit.ly/WZ3jTK #12daysoffemgeekchristmas from @apricot_13

Today we’re going to learn how to make some digital bunting.
You can download the brushes used in this tutorial here.
All the stock images used are from sxc.hu.

First create a new document. 851 x 315 px.

Then hit cmd + R (ctrl + R) to enable rules. Drag two rulers to divide the canvas into thirds

Select the pen tool. At the top of the screen select the ‘paths’ option and create a new layer.

Using the pen tool create a straight line from where you want your bunting to start and end. Click once on the left, then click once on the right. Then move your cursor to the middle of your line and a little + icon will popup next to your cursor. Click. Then with your mouse still near that point hold down cmd (ctrl) and drag down.

Dragging the middle point down will create the curve you will base your bunting on.

Select a 1px black brush. Open the Paths panel and click the hollow circle to stroke the path you just created.

Select the pen tool again and at the top again select shape layers.

Then create a triangle shape. This will be the shape of your bunting.

Once you have your shape duplicate your layer along the guide path you created.

Open your first stock image and paste it on top of your first triangle shape. Right click the layer and select ‘Create Clipping Mask’.

Repeat the process for all your triangles.

and Tada, theres your bunting

If you want you can use the fairy dust brushes from yesterday to create your background.

You can download the PSD for this tutorial below.

Click the 'download' button on the top right hand corner above where it says 'View raw'

Take a look at what people are doing with the tutorial below:

12 Days of Femgeek Christmas – Fairy Dust Brushes

2012-12-14T00:00:00Z

Day 2 of the 12 days of Femgeek Christmas!

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded some fairy dust brushes from femgeek.co.uk download it here: http://bit.ly/TYrEZj #12daysoffemgeekchristmas from @apricot_13

Some fairy dust brushes to add some sparkle to your christmas.

Click the 'download' button on the top right hand corner above where it says 'View raw'

Don’t know how to install or use this download? Don’t worry, I created a little guide to help you. But if you run into any trouble tweet or email me and I’ll try to help.

12 Days of Femgeek Christmas - Duck Egg Blue Curve

2012-12-13T00:00:00Z

or is that day 12?

Are you all set for day 1 or 12.. of the 12 days of femgeek christmas!?

I thought it was about time I shared some freebies on this blog. I wasn’t really sure what to give away to you guys because my blog is a little all over the place but I hope i’ve covered all my bases.

When you use any of the freebies I’d really appreciate a link back to femgeek.co.uk. If you would like to, you can also follow me on twitter. You can also add femgeek on facebook and google+ pages.

It would be great if you could tweet/facebook/google plus about the 12 days too!

Just downloaded a free Photoshop Curve from femgeek.co.uk download it here: http://bit.ly/U0Js5s #12daysoffemgeekchristmas from @apricot_13

A photoshop curve that gives your images a duck egg blue hue. Works best on images that contain green and blue hues.

Click the 'download' button on the top right hand corner above where it says 'View raw'

Don’t know how to install or use this download? Don’t worry, I created a little guide to help you. But if you run into any trouble tweet or email me and I’ll try to help.

Eggless american pancakes

2011-02-07T00:00:00Z

I had a little accident with the fridge door the other day and accidentally dropped all our eggs on the floor! “Bugger!” I said, I wanted pancakes!

I didn’t find a proper eggless recipe, by which I mean the thin tasty english/french (Crepe) style pancakes but I did find this recipe, which turned out very well indeed!

The recipe is adapted from here.

The ingredients.
This makes a LOT of pancakes, it says 6 but its nearer 8 if you ask me!, I’d suggest halving it if you can!

1 1/2 cups flour
4 tsp baking powder
1 tsp salt
1 tbsp sugar
1 tsp white vinegar (I used malt!)
4 tbsp melted butter
1 1/3 cups milk (I used soya – because it doesn’t contain pus)

Add the flour, baking powder, salt and sugar to a large glass bowl.

Add the melted butter

And the vinegar and watch it sizzle!

Grab a ladle full of mixture (mix it a bit better than I have though!)

and pour it onto a hot oiled pan.

When they’re golden on one side, flip them over

and enjoy with a whole load of chocolate spread and maple syrup!

How to reload fonts without restarting photoshop

2010-04-27T00:00:00Z

This is one of the most invaluable things I’ve learnt about photoshop!

When your working on a design and you want to try out a particular font the last thing you want to do is close Photoshop and reopen it this little trick will let you reset your fonts and add any new ones you’ve installed to the font list.

I always start a new text layer – otherwise your current paragraph/character settings are lost. (press T and click anywhere on the document) then go to Window > Character

Click the little icon with the three lines and the down arrow in the top right hand corner of the Character Pallet, then select Reset Character and all your new fonts will be added to the list!

How to make a no sew skirt

2010-04-27T00:00:00Z

Making a skirt, no sewing required!

\1. Buy a length of material from a fabric shop – it can be whatever you want. I bought a metre and a half just to be sure I had the right amount.

Lay out the material and fold it lengthways so you have a long thin rectangle

\2. Measure using a piece of string from above your hips (the widest bit) to wherever you want the skirt to end.

Tie the piece of string to a pen/pencil/fabric marker and starting where you know the pen wont go over the edges of the material draw a semi circle.

Cut along this line – you now have a circle – but don’t unfold it yet!

\3. Fold the circle in half vertically and then diagonally.

\4. Cut a rounded quarter circle about 2inches from the point of the folded fabric – you should have two concentric circles.

Then all you need to do is force yourself into it – head first! You may need to make a slight rip in the waist to get in but once you’ve done that it’s easy enough to get in and out of it!

How to make skittles vodka

2010-04-27T00:00:00Z

Its my friends birthday on Saturday night so I decided to make my own ‘cocktail’. Which is essentially skittles in a bottle of vodka!

Take one cheap bottle of vodka:

and lots of skittles:

Separate all the purple and green ones – because they make it bitter, And add the remaining ones to the bottle.

They all dissolve into this:

I have a feeling tomorrow night could be messy!