mybigadventures.com

Every few years, the website hosting account comes up for renewal and so sparks a sudden flurry of work to keep the site online, and to fix a few bugs that have been giving me a headache. Occasionally if I have some spare time I even try adding a new feature or two. This year the renewal came up and everything was needed at the same time, hosting domain renewal and even the SSL certificate, the cost was a bit eye watering. As is always the case with these things, the renewal price was signifcantly higher than the one offered to new customers. Last time this happened I bought a new hosting package from GoDaddy, downloaded everything, then reuploaded and created all the databases again from scratch. I figured I was going to have to do something similar again so started the download in preparation.

I decided to shop around before going straight back to GoDaddy and came across a great deal with IONIS, in essence you get a free domain and SSL certificate with the hosting, and the hosting account only costs £0.08 p/m for the first year. Bargain! What followed was a little bit of downtime and stress as I migrated the whole site across, but now everything is back in place and working. We're now hosted in the UK so it may even load a little more quickly.

I added a new 404 page to handle any broken links. Let me know if you come across any bugs!

Keep safe and well and we'll get through this lockdown together soon. 

The summer holiday has arrived after another long year, and what better time for a few website upgrades! When I first put the website together back in 2007, I created a map with markers making the path of our intended journey around Europe and had it linkefrom the homepage. I think I made it using one of the early versions of the Google Maps API, and it didn't take long for things to move on and the old map to become redundant. It's been over 10 years, but I started haviing a look at putting some geo-tagging functionality in for mapping out the places we've visited.

After a bit of tinkering I've now added geo-tagging for the albums and may look at adding it to photos and blogs in the near future. I've tagged quite a few albums to try it out and everything seems to be working. You should now see a map on the homepage with markers for the places we've visited, and small maps in the sidebar for albums that have been tagged. If I get a chance, I'll tidy up the user-interface a bit and make it a little fancier with links to albums when you click the markers. Let me know if you find any bugs!   

I've had a bit more of a tinker with the website this weekend and am hoping I've spotted all the bugs. I've added a few more icons about the place including on the home page - which I'm not too sure about. I've also tweaked the blog page to make a bit more of the tagging feature I added at Christmas. The blog is starting to come together quite nicely now I think, with blog suggestions in the top right from the archives (right now I have Happy Easter from March 2008), and the new 'more like this' section I've just finished; this displays the tags used on the current page and a few images from albums or photo's that have the same tags. I've also added album tagging now to make linking whole albums in rather than having to go through each picture.

I've also revamped the albums homepage a little, it now has a 'featured album' section which picks one of the albums from the archive and displays a preview of images along with the cover. I think it perhaps needs a bit more work but it's almost there. Finally I've got around to implementing date stamps on albums. It's one of those things that I really should have added at the beginning, but I didn't quite realise how useful it might be until just recently. When I upload old alabums, they currently display at the top as most recently added. I think I'd like this to be configurable so I can choose date order or the order in which they were added. It also means that I can link images to months and seasons etc, the possibilities are endless! OK that's probably enough of a ramble, I hope you enjoy the new features, let me know if you spot any bugs!

************ UPDATE **************

Albums are now displayed in date order including the album categories on the albums home page. I've also had a tidy and removed a few albums that I wasn't too keen on anymore. They're not totally deleted yet and may get a second chance in the members section but I guess you'll just have to wait and see.

I've been working a little more on restyling the image gallery. I decided the square thumbnails were looking a little dated so wanted to move towards something that looked a bit more like the tiled effect you may have seen on sites like flickr and pintrest. I had a look first of all to see if there were any pure CSS solutions but as yet there doesn't seem to be support for floating the images together so that they fit without gaps.

Old Layout

 New Layout

After a little research it seemed that JavaScript was the way forward as it can be used to calulate a suitable arrangment when all the images have loaded (if you're interested, this is the library I'm using though it looks a bit better on their site at the moment - miromannino.github.io/Justified-Gallery/). Right now that means a bit of a delay waiting for all the thumbnails to finish loading before they can be displayed. This can feel a bit slower than images displaying as soon as they have loaded, which is what currently happens when moving between albums. I'm hoping to optimise this further over the course of the next two weeks, but for now I've added a little loading animation to keep you interested whilst you wait for the pictures to load.

Let me know in the comments if you experience any particularly long delays on any of the albums. Thanks. 

I've managed to find a bit of time over Christmas to add a few new features to the website. The changes aren't huge so you can be fogiven if you haven't quite noticed. There are a few improvements to make posting content a little easier on my side and a couple of new features for my site visitors to enjoy.

Blog Photos

I've tweaked the photo setting for blog images so that those of you with larger monitors can enjoy higher resolution pictures.

Mobile Website

I've also spent a bit of time updating the CSS for mobile users, so if you're visiting the site on a small screen you hopefully will get the mobile layout which is a little easier to navigate and read.

Blog Insights

I've added some previous blog insights to the main blog page - they show up in the right hand side of the page and show blog summaries from the same month in other years. Right now I'm getting a couple of blogs from 10 years ago all the way back in 2006 when this blog was first getting off the ground. 

Tags

This is probably my favourite new feature but it still requires some work. The feature has been around on other CMS platforms for years and bascially provides another way to link data together. Right now it only exists on blogs - have a look at the bottom of a few and you might see tags like #Christmas and #DaysOut. Clicking the links takes you to all the content with the same tag. A few of my favourites are from our big adventures:

#Japan2016
#Italy2015
#Europe2007

Let me know how you get on!

I've just been making a few tweaks before we take our trip and decided to add in a new feature - album comments. It seemed like a big job until a few recent changes that made it all possible so there you go. You can now add comments to blogs, albums and individual photos. The new comment link appears only on albums containing photo's and can be found under the album cover and summary which appears on the right of the screen. 

I've also added a few icons to give the site a bit of a facelift. If anyone's interested I'm using the fontawesome font set to generate the icons. Its really straightforward to use and there's lots of icons to choose from. I've got quite addicted and added them all over the place, many of which only Dani and I will ever see! That's all for now, let me know if you have any issues.

This is only a short one just to tell you about a bit of new functionality. After a couple of people had trouble logging back in, I thought it was about time I added the forgotten details page and associated functionality. Along the way I also reinstated site based emails. So if you're already a member and are having any trouble getting logged in for that exclusive website content, head over to the forgotten details page, tap in your email address and minutes later you should get a new email with some temporary login credentials - happy days! Whilst you're back, why not add a profile picture and add some comments. 

Enjoy!

Just a short one, for all those visitors that have been trying desperately to add comments to photos. I didn't realise it was broken, but nevertheless it is now fixed. So comment away!

A couple of weeks ago I gave the existing hand coded lightbox an overhaul and replaced it with the much better looking JQuery FancyBox 2 plugin fancyapps.com/fancybox/. It was very quick and easy to set up and was soon working. It wasn't long however before I started tinkering. Previously I had a comments section in place, and it wasn't clear how to make this work with the new fancybox set up. I had a look around on the Internet and found a few implementations that customised the title section for each photo, but this wasn't quite what I wanted. In the end I decided on a custom comments box to the right of the screen (You can see this in action by browsing any of the photo albums).

The first job was actually getting a box on the right side of the screen. This turned out to be a little more challenging than first anticipated. In the end, it was achieved by specifiying a margin in the fancybox options, and then using the aftershow callback to populate the comments. I've included the code below for those that are interested:

$('.fancybox').attr('rel', 'gallery').fancybox({
    margin: [20, 300, 20, 20],

    afterShow: function(){
        var commentsContainer = "<div class='lightboxcomments'></div>";
        if ($(document).find('.lightboxcomments').length == 0) {
            $('.fancybox-overlay').append(commentsContainer);
        }

        //CODE GOES HERE TO POPULATE COMMENTS
     }
});

Each time it loads a new photo, it checks to see if the comment div exists and if not, it adds it to the DOM. It then uses a JQuery getJSON() call with a callback to populate the comments when loaded from the database.   I'm sure there are probably better / more efficient ways to achieve the same thing, but it does the job well for now. 

So I thought it was about time mybigadventures became a bit more mobile. When I recently re-designed the site I didn't think much about making everything work on smaller devices and having checked the website on my mobile this was pretty clear. The site looks great on my laptop where it has mostly been viewed but on smaller devices the text is too small and thtere's just too much going on. I didn't really want to start from scratch and make a mobile site so I went for a much faster and simpler solution using CSS media queries.

If you haven't used CSS queries before they're essentially a set of rules that you can add to the CSS to control when certain CSS styles should be applied. What this means in practice is that you can add media queries to test the width of the browser used to view your site and change the size of your content accordingly. In my case, to make the site more mobile friendly, at certain page widths I hide some of the content and increase the font size. The code looks a bit like this:

@media (max-width: 1199px) {
     p {
         font-size:140%;
     }
}

All this will do is if the browser width is less than 1200 pixels, it will increase the font size by an additional 40%. Simple! You can see this in practice if you're viewing the site using a destop or laptop computer. Just resize the browser window to make it smaller and watch the layout change. The downside of course is that because some of the content is simply hidden, it doesn't stop the device you're using from downloading it (so you're downloading content you'll never see). It also currently means that some of the content that enables you to interact with the website is currently unavailable (viewing anything other than the most current blog, logging in, adding comments). 

It's certainly far from perfect but it'll do the job for now.    

As you may have noticed I've been pretty busy updating the site over the last couple of months. Over the past few years it has been linked to when the renewal comes around for the hosting account and I feel like I should make better use if it. This year was no exception - although thus far in terms of updates has been more productive.

A couple of weeks ago I wrote about the fact that I was moving over to a new hosting account as the yorkshireman in me couldn't bare to pay the ridiculous extra money for renewal. All went well, I was switched over to a new account and was told the exisiting plan was cancelled and would not renew. Imagine my suprise then, when I recieved the confirmation email through today from GoDaddy to confirm the renewal of the account and to find that the money had been taken from my paypal account. At first although annoyed I thought, it will be fine, I'll call GoDaddy explain how their representative had told me the account would not renew and get a refund. And that's what happened . . until it dawned on me that the amount I was being told would be refunded was about $60 less than the amount I had paid. When I queried this, I was told that the extra $60 had been paid in tax and "it's not our policy to refund tax". Despite the fact that I have been charged for something that I do not want, GoDaddy are unable/unwilling to offer me a full refund. I asked about their complaints procedure and was told they do not have one. I am shocked by the poor service offered by such a large company and it seems I'm not alone. As soon as I googled the issue I found lots of other people complaining about the same issue. At present I am attempting to recover the money through the paypal resolution centre, so I guess I'll have to let you know how that turns out, but for anyone else out there buyer beware!

In other news, our ongoing issue with first utility has finally been resolved thanks to the energy ombudsman. We had an issue back in September and it has taken until now to bring it to a close. Now to put it in context after months of phone calls back and forth to First Utility we resorted to the energy ombusman. In 6 short weeks they have made a final judgement in our favour and bring the whole mess to a close - happy days! So a lesson for the future when the energy companies are dragging their feet go to the ombudsman (www.ombudsman-services.org/energy.html) - it's a great free service and will see the issue is resolved much more quickly and with much less hassle.

I think that's all for now. If anyone has experienced similar issues with GoDaddy and managed to claim the tax back, let me know in the comments below.

*** UPDATE ***

I can't believe it - PayPal sorted this out on the same day that I raised the issue in their resolution centre. They reversed the transaction and I got a full refund - fantastic! So the lesson - if you're buying from GoDaddy use Paypal or a credit card and then, if for whatever reason you need a refund, go through either PayPal or the credit card company. Great job PayPal! 

One site down, a few more to go! I still have the word press sites to tackle but I've got this one moved across. It went relatively smoothly with just a couple of small bumps in the road. As it's a new hosting account it also comes with the GoDaddy CPanel to set everything up. Having backed the database up, it was a fairly simple to upload the script which then happily recreated everything again. The only step I missed was assigning my new database user to the database itself so I was hitting loads of database errors for a while. GoDaddy support were pretty awesome though and had it fixed within a couple of minutes.

My final error is an odd one. I've been happily writing blogs for the last couple of months with apostrophe's in titles and blogs but when it came to trying to save this very blog, the first time around, I found that anything with an apostrophe in wouldn't save. At first I thought the JavaScript was to blame but it turned out to be a problem in the PHP. I've no idea how it worked before, but all that was required was to escape my sql string paramters e.g:

$text = "it's going to be a wonderful day";
$text = $mysqli->real_escape_string($text);

As I say, I'm not sure how or why this worked before, and not now, as the only thing that changed in the code was the MySQL connection string. I assume it must be down to a version change in PHP or MySQL on the hosting account. Either way - happy days - we're back!

So I had a few images lined up for the header and couldn't quite decide which one should make the cut. I've given each of them a run over the past few weeks and as you can see above, I've decided to give them all a go at once. I've seen a lot of these fading image galleries around on the Internet - theyre often used to display current offers on sites like ebuyer. After a quick browse around the Internet I found what I was after at css-tricks.com/examples/SimpleSlideshow/. It was nice and easy to customise for this site and thought I'd share it a bit wider for anyone looking to do the same thing. 

You basically store the images in a div and then Jquery cycles around fading the current image out and the next one in whilst keeping unused images hidden. To set up start by adding the HTML for your images. I've included a sample below, but you can add as many image divs as you want.

<div id="slideshow">
   <div>
       <img src="image1.jpg"/>
   </div>
   <div>
       <img src="image2.jpg"/>
   </div>
</div>

Then you just need a bit of CSS to style it

<style>
   #slideshow > div {
       position: absolute;
   }
</style>

Finally you just add the jquery code to add the animation. You'll need to include the JQuery library - you can include locally or from ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js. Then add the following code to the page:

$(document).ready(function() {
    $("#slideshow &gt; div:gt(0)").hide();
    setInterval(function() {
        $('#slideshow &gt; div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
     }, 10000);
});

I haven't decided if I love it yet. I think I might tweak the timing a bit more to reduce the frequency of changes. In other news it's nearly half term!

Sadly development has come to a bit of a stand still as coursework deadlines and exam time has arrived. After a few long evenings the first GCSE coursework marks and sample have been sent and by the end of this week so will the rest. Having not logged in for quite a while I just logged on to my google analytics account to have a look if anyone else out there had stumbled across mybigadventures. I was some what suprised to find that quite a lot more visitors have joined us from all over the world - so welcome one and all. 

For all those of you that have not come across it before, I highly recommend google analytics for getting a picture of how your visitors are interacting with your site, it makes some interesting reading and can give some ideas of where you could improve. You can also sign up for a google webmaster account which gives you some tips with getting your site indexed on google. Both great tools and pretty straight forward to set up. I've added the links so please click through to find out more - but when you're done remember to come back and have a look at some of the archives.

For all visitors new and old, I recommend looking at the achives from 2007 April-July when Dani and I took our trip around Europe (It was the reason this site was first created and still remains the bulk of the content, although hopefully that will change).

That's all for now folks. Enjoy!

Just thought I'd add a quick note to wish everybody a happy bank holiday weekend. It's a shame the weather is cooler again after the past few weekes of warm sunshine but I'm sure we'll still make the most of it. Headed out last night to see the latest Avengers film - Age of Ultron. We both enjoyed it and were back quite late last night so had a slightly later morning. Not sure what to do with the rest of the day at the moment - it looks like the sun is having a go at coming out so might just go for a bit of a wander.

Added a couple more updates to the site although sadly nothing visible. I updated security and error handling (yawn) which hopefully should just make the site a bit more robust. Also added some inheritance to the code controlling much of the processing on the website which again just makes things a bit more secure and easier to maintain. Finally just updated the blog front page so that it will always load the most recent blogs even if I havent added anything in the last month.

I still need to finish off the album code so that I can finally add pictures again, although I haven't decided how I want this to work. I currently store images in a database rather than as files on the server and can't decide if I want to change this. I also haven't enabled any user accounts, so sadly unless you were a member way back when and can remember your login details, you won't be able to access anything apart from the public blogs and images. I suggest looking back at the 2007 blogs, which is where most of the content is. 

Maybe in the summer I'll get some of my raspberry pi content together and start putting that up here . . there's quite a few projects to write about from scalextric lap timers and control, to robot arms, IR tranceivers and autonomous video streaming tanks and cars.

Until then enjoy . . 

I had looked at a few other blog type sites and decided I wanted to simplify the URLs for the website. After a quick read around on the Internet I came across Apache mod rewrite for the .htaccess file. Now that's more than likely meaningless to anyone that might look at the site and up until very recently didn't mean a lot to me either. After having a looking on a couple of different websites, it seemed to achieve what I was looking for with very little effort.

To begin with I had to create a .htaccess file in notepad as there wasn't one in the root directory of my hosting account.

I started by adding:

Options +FollowSymLinks -Multiviews

This enabled mod rewrite on my hosting account with godaddy

I then started by removing the requirement for .php at the end of my php pages. I copied and pasted the code for this from a site I came across:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^ %{REQUEST_URI}.php [L] 

I then added a few custom rewrites to simplify access of the blog and album elements of the website. Having very little experience of mod rewrite I was really pleased to find an automated tool in the shape of www.generateit.net/mod-rewrite/index.php.

That's pretty much it, now I have super simple URLs instead of those long php parameterised ones that I had before!

Well I thought it was about time I made a few improvements to the website aesthetic as its looked a bit stuck in the past for quite sometime - some might argue, since its inception. The black is gone, as has most other colour replaced by a lot of white open spaces. Hopefully it looks a little cleaner and still remains easy to navigate. There have also been a few updates in the background to help things run more smoothly and a few more features from the old site have been converted to now work in PHP. There's still a lot to do but it is certainly the most significant update the website has had in a good few years.

In other news we went to Kew garden yesterday. The weather was nice and sunny if a little cool in the breeze at times. Fiona came to meet us so we had a good catch-up. Everywhere is starting to look a lot more green and colourful now that the flowers are starting to come out and it's beginning to feel quite summery. Here's hoping the weather continues - I'm pretty sure I saw an article last week promising a three month heat wave, so here's hoping!

It's been a busy time at school on the lead up to Easter getting all the work finished including over the break itself. Both Dani and I were in with year 11, 12 and 13 students for revision and coursework completion sessions. Now that we're back after the break, we're entering the exam season at school. A lot of deadlines are looming for entry of coursework marks and it's not long before year 11 are sitting their first exams.

With the summer getting closer we've started to think about the break and what we might get up to. We're not sure yet but have started to go back through the journal we kept on our Europe trip to give us some ideas, so I guess we shall see.

Hopefully I should get a few more updates on before the summer. There's still a lot of the album functionality that doesn't work from an admin perspective. I can't upload new photos to the site yet. Keep checking back though and feel free to look though the archives where most of the content currently resides. 

Who would have thought it, just 3 short years (to the day) after the last update and we're back online. All that was required was a total re-write from Java to PHP. Simple! I've added a few updates that make things work a little better along the way. Now you can see what albums the random images on the front page belong to, and even more interesting for us - see what the random comments link to. I think that's all for now folks! Rock and Roll!

Well perhaps it is a little more than a week, but on Thursday afternoon next week it will finally be the Easter holidays! It has certainly felt like a long term not helped I think that I started back after Christmas a week before Dani and now she is finishing for Easter a week earlier than me! I'm sure it all works out to be the same number of days in the end though.

Hello again, just a quick one today to let you know I've been busy uploading some more pictures. You can now find a few of our London photos online. Enjoy!