How to fix a sticky caps lock

Something has been bothering me lately. Every now and then my caps lock sticks on. No matter how many times I hit it, it stays on. I then generally press buttons quite randomly until somehow, eventually, it switches off again. Last time it happened I tried desperately to remember the combination of buttons that fixed it but either missed it entirely or subsequently forgot.

Today, however, I am proud to announce that should you ever find yourself in a similarly sticky situation you should try the following combination to fix it:

Alt + Shift

Of course, having no idea how on earth the caps lock sticks in the first place, I have no way of testing this. Any ideas, anyone?

CSS: Negative vertical margins can be unpredictable

Here's the scenario:

We have a header image that goes across the page. It has our logo on it, plus some nice curvy lines at the top and the bottom.

When we print the page, however, we don't want the bottom line to appear so there's a second image that should print.

I placed the second image into the HTML with an alt tag of the organisation name. The first image is a background image. In the CSS for the page (screen) I could either use display: none or negative margins to hide the second image.

I figured that non-visual users would need to know it is there. (However, I will review the code to see whether it is actually adding anything. I think we have our name in a hidden h1 tag so we can probably just use display: none.) display: none hides elements from many screen readers as well as browsers.

The commonly used alternative is a negative margin. As the image I was hiding went across the top of the page I thought margin-top: -9999px; should do it. It worked in IE but in Firefox and Chrome the bottom of the image peeped down over the top of the background image. I tried ex instead of pixels but the result was pretty much the same.

In the end I used margin-left: -9999em (em measures width; ex measures height) which worked in all browsers.

Another alternative, as recommended by 456 Berea Street is to use

position: absolute; 
left: -9999px; 

I'm not sure whether this is better than my solution. I suppose it's probably safer as it uses absolute positioning. But as the measurements (9999ems) are so massive I can't see how there is any danger of the image somehow ending up on screen if other elements move around. As it works, and is one line of code smaller, I think I'll stick with margin-left: -9999em  for now.

CSS: Declaring font-size for print

I love the fact that I can still learn something new everyday. It's often the smallest piece of information that makes me think "wow, I never knew that".

As a web developer I shudder when I receive CSS from a designer and everything is specified in pixels and points. The only thing that makes my eyes cross more is using positioning instead of floats, especially when that positioning is absolute.

However, I have just read that apparently in a print stylesheet font size is better defined in points. It makes sense when you think about it. Ems are great on screen because they facilitate text resizing. But as soon as you print, you are moving out of the screen world and back into the print world. Therefore, all of the original rules of design come back into play.

Resources

You may find the following resources useful for creating print CSS.

BuilderAU: Tips for Creating CSS Styles for Print by Michael Meadhra
A List Apart: Going to Print by Eric Meyer
Max Design: Building Full CSS Layouts by Russ Weakly

CSS: Using font shorthand

Using CSS shorthand simplifies your code, produces smaller, more efficient documents and can save time. 

I often use shorthand for margin, background, border and padding elements. I tend not to use it for font because it can be a bit tricky and I'm generally only changing one or two attributes at a time.

Today I was reviewing someone else's HTML/CSS and I noticed that the main body of text didn't look quite right in Chrome and Firefox. Instead of Verdana, which displayed correctly in IE, it seemed to be rendering as a generic serif-based font.

After a bit of investigating and head-scratching it transpired that this line was the culprit:

font: { 0.8em lighter; }

The problem is the placement of the word "lighter", in this case used to set the font-weight.

The following attributes can be used to style fonts, using the font shorthand:

font-style; font variant; font-weight; font-size/line-height; font-family.

The first three of these are optional and can be placed in any order. Line-height is also optional and is appended to font-size with a separating '/'.

Font-size and font-family are not optional. Actually, I thought that font-size was optional but when I removed it the font declaration disappeared from my debugger.

So, in the example above, "lighter" is being taken as the font-family. As this is not a recognised family, the text default was being used.

The correct version of the above declaration is

font: { lighter 0.8em Verdana, Geneva sans-serif; }

or whichever font stack you'd prefer to use.

In the event, it transpired that this declaration was not required. A font-weight of normal achieved the same as lighter in this case. Removing font-weight from the declaration forces the default, which is normal, leaving:


font: { 0.8em Verdana, Geneva sans-serif; }


Additionally, font-family was already being set in the body style and wasn't being redefined anywhere. Then there was a global p declaration, which was only setting color. I added the font-size attribute to this element and it all worked in every browser. 

Of course, the actual solution will depend upon the individual CSS and inheritance but the basic principle is this: 

if using font shorthand, always include font-size and font-family respectively.

If you don't wish to define either of these elements then style your attributes individually rather than using shorthand.

I don't Twitter

I have a confession to make.

I don't Twitter. There I said it.

I'm not even sure if Twitter in this context (i.e. as a verb) should have a capital T but my iPhone spell check keeps changing it and I can't be bothered to argue.

I know you're probably aghast at that. I mean I practically live in the blogosphere. Have for years. (Apart from last year when I took a year off everything that wasn't baby-related. Apart from one of my own blogs. Which was baby-related.)

I'm a self-confessed Web 2.0 fan. Have been since it started. I just love the concept of social networking and the way the Internet brings people together who would otherwise never meet.

I use LinkedIn for work contacts and Facebook for social contacts. My family and many of my friends live overseas and I keep in touch with lots of them through Facebook. I think I've had more contact with my cousins in the past 18 months than I did for the previous 10 years thanks to Facebook.

But I don't Twitter.

Oh I've thought about it. When it first came out I thought "that's stupid and pointless. Why do I need that?" And it probably was stupid and pointless back then. Then I kept seeing references to it scattered about the Internet and I thought "two social networks is enough". I'd avoided mySpace. (I'm GenX. Tail end. The Y tail.) So surely I could avoid Twitter too.

Then I started seeing it mentioned on Facebook and wondered if maybe the two could complement one another. I asked my Facebook friends what they thought. Answers were mixed and I concluded I didn't need to Twitter. Or tweet.

So I left it again for a while. But then I started thinking about promoting this blog and whether to get it up there on Facebook and LinkedIn. And again Twitter entered my consciousness. And today I read a post from Penelope Trunk titled "Twitter can save your life".

Usually I would provide a link but I can't seem to find the original post. It's appearing in my Google Reader but the link back to her site doesn't work and I can't find it from her homepage. You'll just have to take my word for it. She talks about how Twitter isn't really all that stupid. She says that it helps you find like-minded people, gets you answers and information fast, and a few other things that sound a bit like she's scraping the barrel. (Perhaps she realised she was scraping the barrel and deleted the post from her site.)

Like-minded people and fast answers sound pretty good though. So I thought I might just check it out. Follow my favourite bloggers and give it a go for a while. Then I'll let you know whether it was worth it.

So I will. I'll Twitter. Soon.

Written with BlogPress Lite for iPhone.

How the blog community can help you become an expert

One of my current favourite blogs is Penelope Trump's Brazen Careerist. I discovered this site just a few days ago and I'm having great fun trawling through her archives for useful information. In fact it was Penelope's Guide to Blogging that inspired me to start this blog.

One of her recent posts talks about the importance of investing time in becoming an expert. The popular belief is that it takes 10,000 hours of doing something before you are an expert. I'm no mathematician but that sounds like a lot. I'm not sure I've done 10,000 hours of anything other than breathe. Is there any hope for me?

Apparently so.

This AssociatedContent article debunks what it calls the 10,000 hour lie, stating that there is no magic number, you just have to work hard. What is most important, according to Penelope's post, is that you have a good teacher. And that you work hard at your chosen skill every single day. Gulp.

Well, here I am writing, again. I wrote 3 posts yesterday, and now this one today. It's still not quite up to the minimum of 4 that Angela Booth suggests are necessary for making money from your blog but, given that I have a teething 1 year-old pulling the keyboard tray in and out as I type, so far, so good.

One thing I have felt lacking over the last few years, however, is a mentor in the world of writing. I have even considered some post-graduate study, partly to fill that gap. (This is still a possibility for me for many reasons, which I will outline in a subsequent post.)

Thankfully, Penelope points out that the community and following surrounding your blog can become your teachers by providing immediate and helpful feedback. My hope for this blog is that some day I will have that community and get the help that I need.

Please feel free to comment on anything you have seen so far.

Test your site's readability using Juicy Studio's Readability Test

Wow! If I'm going to get a job as a copywriter I need to work on simplifying my writing style, especially considering my ethos is pure and simple (which applies to code, copy and visual layout).

After my first post I performed the Juicy Studio Readability Test and discovered that the readability of my site is akin to UK's The Times and The Guardian newspapers. Perhaps I should pursue a career in journalism after all. Ultimately this means that it would take approximately 14 years of schooling to understand the content of this site. A further test indicates that 9 years of schooling would be required.

Additionally, on a 100 point scale of readability, where a high score indicates a highly readable document and authors are encouraged to aim for 60-70 points, my content scored 33.

Obviously these tests need to be taken in context and with a pinch of salt. They are mathematical formulas based upon such things as number of syllables per word and number of words per sentence. They favour short sentences with short words. They include non-content aspects of a site, such as headings and navigation. They don't take into consideration visual layout and formatting, semantic content or whether the written style is conversational, interesting or informative.

However, assuming that you have done all that you can to write an interesting and relevant document, which makes sense, this could be an extremely useful tool. I have learnt that I need to write shorter sentences and use shorter words.

Further advice given along with the test results are to keep the writing style clear and simple. Use language which is logical, unambiguous and direct. Avoid redundant words.

I hope I have managed to follow at least some of those guidelines.

Use JuicyStudio Colour Contrast Analyser to design visually accessible sites

I loved the old JuicyStudio colour contrast and brightness tools and now they've been replaced by the Luminosity Colour Contrast Ratio Analyser.

If you can look beyond the tongue-twisting name, you'll find the new tool is based upon Web Content Accessibility Guidelines (WCAG) 2.0's algorithm and will tell you what level of WCAG compliance the tested section of your site has reached.

I have just discovered that the contrast ratio for visited links on the background of this site passes Level AA for large text only (at least 18 point or 14 point bold). This is not good news as the text is small. The good news is that this is a really simple online tool to use, and now that I know the contrast isn't sufficient (as I suspected), I can do something about it.

Welcome to the Journey

I am about to take you on a journey.

I don't know how long it will take us to get there, or what we will see along the way, or even whether the final destination will turn out to be where I think it is going to be. But I can tell you one thing: it will be fun, informative and life-changing.

Although I have been blogging since 2005, this is the first time I am really putting it out there, casting my net beyond the calm waters of friends and family. The aim of this blog is to document my journey from a full-time employee, via a slight detour on maternity leave, to a part-time freelancer and mother.

There are many reasons for my decision to go on this journey, most notably that my current occupation no longer fits into the lifestyle that accompanies my new role as mother of a one year old. I am lucky to have discovered what my passions and interests are and be in a position whereby I can finally pursue them.

So what exactly will this blog be about?

According to Penelope Trump,

A blog is a great way to figure out what you want to do with yourself because writing regularly is a path to self-discovery.

That is exactly the point of this blog. It's a journey of self-discovery for me, and hopefully for my readers. As such, I can't say exactly what this blog will be about but I can tell you what my passions and interests are.

From a professional perspective I have over a decade's experience as a web developer and business systems analyst. I am passionate about producing simple, usable websites, with structure, presentation and content separated from one another, written in mark-up and code as pure as the driven snow. I am one of those geeky people who became incredibly excited a few years ago by the Web 2.0 evolution (although I still think it's a stupid name). I spend a lot of time reading blogs and I love writing, which I do both for work and, in my spare time for enjoyment. I have had a lot of experience working closely with marketing teams to improve usability, acessibility and search engine rankings of websites. I put all of these things together and realised I had a set of skills and passions perfect for web marketing: development, copy writing and search engine optimisation. I have never worked for myself before and I will probably make mistakes and learn some valuable lessons along the way.

That is the essence of what I think this blog will be about.

On a more personal level, I have enjoyed every moment of being a parent and love finding the humour in every day situations and then writing about it. I hope to get something published one day soon but until then I will keep up my blog about my little Miss Chief and no doubt blog about my efforts to get published on this site. (Please note, I haven't provided a link here for the sake of my daughter's privacy.) Away from the family my interests lie in the environment, climate change, evolution and atheism. I'm not sure to what extent these topics will be blogged about here. I suppose that depends upon whether I use this blog to showcase my talents as a writer.

I have added a blog roll to this blog, consisting of both technical/professional blogs and my more personal interests and no doubt there's a future post in highlighting some of my favourites. I intend to be much more active within the blogging community than I have been before, commenting on, and providing links to other blogs, and hopefully receiving my own trackbacks courtesy of other bloggers.

I have also added Google AdSense to this blog, which is something I've never done before so we'll see where that takes me. I intend to provide useful tagging on a limited number of relevant topics and I invite comments and feedback on all of my posts.

So now all I have to do is get the blog out there and noticed and commence my journey.