The technique I am referring to is when a user saves a particular piece of information and the area turns yellow and fades out to its regular colour, indicating that that particular portion of content has been saved/updated. You might have seen this on sites such as; Facebook, Google, Basecamp and WordPress blogs. To be honest, it’s just about everywhere.

37 signals first brought it to peoples attention back in 2003 with this following blog post. Wow, 2003! I’m writing about a technique that has been easily achievable for ten years… However, this was done with JavaScript and I wanted to see if I could recreate it with only HTML and CSS.

To make it something which is easily recognisable I decided to base my example on one of Facebooks comment modules. Have a look at the demo and see what you think. Unfortunately because the form is hooked up to the div, when you click the button the hash gets appended to the URL. This means that you can only see the background colour of the div change once, until the page gets refreshed again.

Currently I can’t see a way round this problem without the use of some prevent default magic by JavaScript. If you know of a solution to this problem, please feel free to email me and I’ll add your solution into this post and update the example.

Update 03/03/2013: Joao Paulo got in touch with me to offering up two solutions:

• Example One: A hack with two buttons.
• Example Two: One button, a label, a checkbox and a few span elements inside the label.

Both examples should hopefully be self explanatory but Joao points out that his second example might throw up a few issues

It works good, except for a few seconds – the time you gave the animation – after the page loads. Before that time period ends, you aren’t able to see the animation when you click the “save” button.

This is because I’m putting a cover in front of the animated background during the unwanted animation that happens on each page refresh. Only after it finishes do I remove the cover. Since the cover is there for the first few seconds after a page refresh, you won’t be able to see the animation if you click the save button during that time.

This usually won’t be a problem since an user won’t probably click the save button during the first seconds on a page, but it might happen. Even though, and even if there were another way to stop the animation from happening that first time (with pure css), I would go with the “two buttons” solution. This one is just a little too tricky. It might end up interfering with other parts of your css.

If you have any other solutions, I’d love to hear them.

If it turns out a horrible mess, I’ll publish it anyway and edit when I have the time.

A round up of 2012

In last years resolution post I decided that I wasn’t setting any goals for myself, I just wanted to be happy and enjoy myself. If I’m being honest that was a bit of a cop out because I was scared of making a list and not achieving everything on it. However, as it turned out 2012 was an absolutely amazing year for me, probably my best, both professionally and personally.

Two thousand and twelve kicked off in amazing style as I attended the wedding of David and Andria Parsons in Dublin, where I was surrounded by a group of people I’m proud to call my friends. Spending New Years away from my family and friends from home was admittedly a little weird but I wouldn’t change any of it. And it tee’d the year up nicely because it set the tone of “do the unexpected”.

After the wedding, January saw me returning to Nottingham for the second New Adventures. February brought in my birthday where I turned twenty five and March saw me fly out to San Francisco for something which can only be described as a whirlwind trip. It helped open my eyes to what I wanted to do with my life, what I needed to do to get there and how much I still have to learn.

Apart from Roberts stag, April was a bit of a nonevent but sometimes you just have to get your head down and work. And May saw me jet out to Munich with my Dad to witness Chelsea winning the Champions League. I’ll never forget those three days.

After May, everything moved up a gear and I can’t believe it’s nearly January once more. June saw me fly out to New York for an interview at Foursquare, then visit my Aunt in Jacksonville, Florida who I hadn’t seen in nearly eight years.

<lovesickpuppy>The week after my arrival home saw me somehow snag a date with a girl I’ve always liked, but was always too scared to talk to, even at the age of twenty; who says these things get easier with age.</lovesickpuppy>. The fact we’ve done so much since then and the fact she came half way around the world to visit me makes me wonder why I didn’t just go up and say something to her years ago. But it is what it is, and we’ve got a lot of lost time to make up for. You are easily the highlight of my year.

The next week saw me accept a position within Foursquare and plan the next stage of my life. If I’m being honest, I never expected myself to be in this position at this stage of my career. It’s a job where I’m continually having to think about what I’m doing, as I’m working with an exceptionally talented bunch of people and one where I’m left counting my blessing every day. I’ll never take this phase of my life for granted, it’s something so very few people will get to experience and one which I’m going to cherish forever.

July and August saw me wrapping up my old job and trying to figure out the plans and things I’d need for my first three month stint in New York. In all honesty, I probably underestimated a lot of things I needed to do before leaving which didn’t really help me when it came to moving out there. But I’ve never really been one for planning and more the type of person who will just jump in at the deep end.

There’s no way I can fit New York into one article, it’s just incredible. Althought it can be an exceptionally lonely place when you’re out there on your own everything about it was more than I ever expected and I’m lucky I got to meet and share it with so many people. Experiencing and living right in the middle of Hurricane Sandy is something I’ll never forget, nor will my co-workers (sorry everyone, I’m still super embarrassed about that!)

November saw me return home from New York and immediately fly out to what I refer to as my second home, for the third time that year, Belfast. Every year I seem to count down to November for Build and I’ll be bitterly disappointed when it comes to it’s conclusion in 2013.

December has seen me continue working remotely, seeing my friends and realise just how lucky I am.

Resolutions for 2013

If you hadn’t already guessed from reading this post, I won’t be making any plans for this coming year. Last year was so incredible, a large part of me truely believes that even if I complete everything I set out for myself I wouldn’t be able to come close to bettering this one. So, all I will say is that I’ll continue to keep doing what I’m doing and see where it takes me.

I hope everyone gets what they are looking for in 2013.

A few months ago—yes this has been sitting as a draft for quite some time—whilst scanning through Twitter, I noticed that someone had posted a link to the Path website, as they had been rolling out a few subtle improvements and upon clicking the link I immediately noticed the “Apple reflection” being used on certain elements. Intrigued to see how they created this I fired up my console and discovered, to my amazement, that it was actually CSS which was being used.

Below is the exact code which, at the time of writing, they are using to achieve this technique.

.moments_book .book-artwork {
  -webkit-box-reflect: below 1px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.5)));
  text-align: center;
  margin-top: 53px;
  margin-bottom: 64px;
}

The above code is all fairly self explanatory with the exception of perhaps the top attribute -webkit-box-reflect. If we break it down it, here is what is happening;

-webkit-box-reflect: <direction> <offset> <mask-box-image>.

<direction>

The direction in which you would like the reflection to appear. As you might expect, it can be stipulated as above, below, left or right.

<offset>

Is a length or percentage which specifies the distance of the reflection from the edge of the element, in the direction which you would like the reflection to appear.

<mask-box-image>

A mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.

It’s probably worth noting that CSS reflections are nothing new, in fact here is an article on the Surfin’ Safari blog, from 2008, which I stumbled across when researching this topic.

It is interesting that reflections haven’t seen as large an uptake as other attributes like border-radius have. One thing is for sure though, box-reflect looks like an amazing feature which will undoubtedly make our jobs a lot easier in the future. Unofrtunately one can only guess as to how long it will take before it is rolled out into the the working draft.

spin•di•ca•tor
noun

A loading animation which allows the user to see how much longer they have to wait before progressing to the next stage.

Last week I was tasked with creating a loading animation created entirely in HTML and CSS but unfortunately my first attempt didn’t quite go to plan and I ended up leaving it incomplete. However, not to be beaten I decided to go back and rework my code.

These CSS loading animations are nothing new, I remember seeing my first one back in 2010, but it doesn’t hurt to test yourself by creating these sorts of things.

Here’s a quick rundown:

• Set up your containing div and spans within as child elements.
• Target each span using nth-of-type to rotate, translate and animate.
• Define and apply keyframes to animate the spans

If you’re interested in seeing the final result then feel free to check out my demo but please make sure you are using a modern browser.

spindicator demo.

However, I’m not here to write about that, because we all know that is nonsense. What I’m going to write about is the process that I used to undertake in order to compare my coded design to that of the visual and the steps that I used to take before I started to code.

Before I typed in that opening line of <div id="wrapper"> into my framework, I would insert something akin to

<div id="mock">
<img src="mock-up.png" />
</div>

This div would then be positioned absolutely, with a z-index and a set with a level of opacity. The reason I set the div/image to be slightly transparent was to allow me to see if my code was going off course or if it was remaining similar to that of the .jpg/.png.

Setting up this div with an image didn’t take very long but it became somewhat tedious having to do it for every page within that project, not to mention for every single project. And it became ever more irksome when you had to go back through the code and remove them all when you had signed off the project with the client.

This weekend, before I started work on a new project, I downloaded my framework and I was about to stick in my usual code snippet. However, having recently returned from New Adventures with the mantra of “try new things and if it doesn’t work, who cares” stuck in my head, I decided to opt for a different route.

I think it’s safe to say that 2011 was the year of the media query, you couldn’t escape from it. Everyone seemed to be writing about it but everyone seemed to be writing about the same thing. Of late, I had been wondering what else was achievable and decided to see if it was possible to take this technology and somehow integrate it into my old process.

In essence what I’m about to show you isn’t a million miles away from what I outlined right at the start, it’s just a method which tidies everything up, keeps everything together and is much more manageable.

@media screen and (max-width: 1200px) {	
	#wrapper {opacity: 0.4;}
	body {background: url('mock-up.png') no-repeat center top;}	
}

For this media query I’ve set the max-width of the viewport to be somewhat of a standard size for many laptops/desktop machines, however you can tweak this value if you are on a machine with a smaller viewport.

The above code above will basically render the image to an opacity of 0.4 within the #wrapper tag when you pull the viewport to a size smaller than 1200px but if you resize the browser to a width greater than 1200px it will simply disappear.

The nice thing about this code, is that you can turn the background image on and off as you please by simply resizing the viewport. Hurrah! No need to comment out specific bits of html. And to delete it completely, you just have to remove that one line from your CSS file, you no longer have to delve into every template and remove the code I mentioned at the start.

Another nice touch regarding this method is that because it’s being controlled by CSS you can also switch different visual mock-ups, for different pages

@media screen and (max-width: 1200px) {	
	#wrapper {opacity: 0.4;}
	body#about {background: url('about-mock-up.png') no-repeat center top;}	
}

And different designs for different viewports

@media screen and (max-width: 320px) {	
	#wrapper {opacity: 0.4;}
	body#about {background: url('about-mock-up-iphone.png') no-repeat center top;}	
}

If you’re interested in seeing a very basic demo of what this would looks like, click on the link below. Remember, resize the browser to witness the image appear/disappear.

Demo | Using Media Queries to check your designs in the browser

However, I wondered if it would be possible to create this without the use of JavaScript. Obviously there are plenty of packages out there such as fancybox and thickbox, so this has been created purely as an experiment and not something which should be released into the wild, due to it not working well in older browsers. It’s also worth noting that this isn’t going to be the cleanest or best implementation as it was thrown together in the space of a few hours but for a first attempt, I’m pretty happy with it.

The code is fairly simplistic and the all CSS needed for this, barring the reset, is located within the <head>. So open a modern browser and have a look at my take on a modal window created with HTML and CSS.

In my resolutions post for 2011 I came to realise that setting myself a certain amount of goals was a waste of time, as no matter how many I achieved I would always beat myself up regarding the ones I hadn’t managed. Therefore I decided to set myself three fairly generic but important goals; speak at an event, stay in a job and create a personal project. Thankfully I can say that I managed all three, as well as packing in a heap of other stuff.

A round-up of 2011

The first two weeks of the year started with me finishing up at Hobo, which was the first job I secured after leaving University. I’d spent two and half years there and made some life long friends and mentors. Saying it was a difficult to leave would be an understatement but to progress sometimes you need to make decisions you don’t really want to. Thankfully, we still get to have beers regularly.

Since leaving I joined and left one company and have joined a second. I often find myself wondering if the reason I’ve never been able to settle is down to the fact that my first job might have been my best one. Who knows, the hunt continues.

2011 also seen me beat my conference record by taking in five; New Adventures, Design It Build It, Web Directions @media (where the HTML5 Doctors had a booth), The Highland Fling (which I spoke at) and Build. I was also lucky enough to take in a few great local meet-ups like Glasgow Refresh and standards.Next.

Throughout the year I have met many incredible people, people that I’m glad I’m able to call my friends. Thankfully this tradition continued right up to The Bells when I attended Andria and David Parsons wedding in the ever beautiful city of Dublin. It had been nearly four years since my last visit there and I was glad to see that it still held that certain magic that captivated me the first time. I can’t imagine a better way for my year to have ended. Surrounded by good friends, good conversation, good food and good Guinness.

Resolutions for 2012

If the truth be told, I’m not too sure what to do for my resolutions this year. I like the fact that I left myself fairly vague yet important goals for 2011. And I think that will be the route I take again this year. Therefore I’ll set myself the continuing task of making something useful, staying in employment, continuing to write and doing something amazing.

The reason I’ve done this is because I realised as you get older it’s not what you do that makes you happy, it’s the friends you make and the friends you keep. These are the things which make life enjoyable. And in 2012 I want just that.

Within each circle is a phrase but he tells the client that they can only ever choose two of the three circles/phrases as the remaining one is always unachievable, due to their selections. The three choices are; good, fast and cheap.

So if the client wants their project to be good and fast it certainly won’t be cheap or if they want their project to be fast and cheap it won’t be good. I think by now, you will have got the general idea of how this works.

I had certainly never heard of this before but after some research it would appear that it’s been around for quite some time and is actually part of something called the project triangle. Regardless of this, I thought I would share it just in case some of you hadn’t heard of it either.

Preparing for a talk, especially your first, is hard. Pulling together the content took me somewhere in the region of two months, whittling down my notes took somewhere in the region of two weeks and then coming up with a slide design pushed me close to the three month mark.

During the slide design process I realised that it would be pointless for me create this slide deck using keynote or powerpoint because I’d never really used them before and I certainly wasn’t going to try and figure it out for something as important as this. So I decided to stick to what I knew best; HTML, CSS and a little bit of JS (thanks to Maykel Loomans.) Thankfully, just weeks before I’d seen Lea Verou give an amazing session at @media London, where she presented her slides using just this technique. When I arrived home I had a quick Google and realised that she had thrown the framework up on GitHub.

The advantage of using an HTML framework meant that I would be able to live demo these new HTML5 elements and utilise things like @font-face and some CSS3. Although it is worth noting that many of these demos currently only work in Opera.

One major problem I came across when pulling together the content for my session was when I realised that even though I’ve attended several conferences I couldn’t recall more than one or two talks where a speaker spoke entirely about code. It became clear that when I’ve attended these conferences, the speakers I’ve been going to see were people talking about design related subjects. This is something which I will need to address.

In layman’s terms, and I hope I don’t offend anyone, when people speak about design related subjects the slides normally follow the same pattern; sticking up a slide with a beautiful picture and a heading which then enables the speaker to talk freely about the slide, often adding things in on an ad-hoc basis.

So how do you present a talk on code without ladening the slides full of code examples? Well, you can’t. Admittedly this is far from ideal but what else can you do? If anyone has a solution to my problem or has seen a talk which tackles this problem then I’d love to hear about it. Even better if there is a video online somewhere.

During my talk I think it was clear for all to see that I was incredibly nervous. I was in a line-up packed with leading industry professionals, professionals that everyone in the audience knew. These were people who I’ve been following for years; whether through Twitter, their blog or having seen them speak at events I’ve attended. Being third on the bill and having witnessed two stellar sessions by Steve Marshall and Rachel Andrew did little to calm my nerves. I can only hope that my nerves didn’t impact on my session too much and that the people in attendance were able to enjoy it. I have also heard that videos of the talks are due to be published, so you will all be able to have a laugh at my expense.

I’d also like to take this opportunity to thank everyone that came along to the event for two reasons:

First off, Scotland has got a great web community but we don’t have the events to back this up. If we take Northern Ireland as our base, they’ve got lots of tech meet-ups like we do but they’ve also got a conference in Belfast which people from all over the globe flock to. Why don’t we have something like this? We’re definitely capable of it. Hopefully with the return of the Fling, we’ve finally set the wheels back in motion and we can have something which the community can be proud of.

Secondly, I’d like to extend a massive thank you to everyone who came and listened to me. Without you, I wouldn’t have been presented with the opportunity to do something that I’ve always wanted to try. There are a lot of people out there, like me, who would like to give public speaking a try but have never been presented with the opportunity. The Highland Fling provided me with just this and if we continue to back events like this, it will enable others to do the same.

Onwards and upwards!