benmacgowan.co.uk

Back to school

Having been a Front-End Web Developer for the last 2 years, I have come to the decision that I want to go back to education — of sorts. I won’t be leaving my job, or actually going into education, but rather pushing my knowledge to the next level.

Being in the web industry, we can never really say we know it all. New technologies are developed and released, new design trends are created, followed and therefore requested from clients. That is why it is important for us as developers and designers to constantly look how to improve our knowledge and skill sets.

Moving forward I will be scheduling time every week to each of the following subjects – much like a revision time table, except there are no exams at the end.

JavaScript/jQuery

As my header clearly states, I have a large passion for jQuery — the effects that can be created and the fact that it is so easy to pick up and use. However, my knowledge doesn’t go much further than the simple to implement effects. I need to do more reading up and applying more complex jQuery functions to my websites.

On top of this, I want to get a step further and learn more core JavaScript. As Stuart Langridge rightly stated at a FOWD workshop I attended, “If you are serious about  car racing, you need to know what is under the hood of the car to gain a full understanding of driving the car” (or something along those lines). So even though you might know the in’s and out’s of jQuery, extending your knowledge into core JavaScript can really benefit the effects you want to create with jQuery.

Usability/User Experience

Since starting my job, I have been conscious on how to progress my coding skills in order to give users a more user friendly experience, and also increase the accessibility of the websites. Having recently written an article for Smashing Magazine, ‘Usability Review of Charity Websites Taking the Lead’, has sparked a further interest in this subject.

There is talk within my work that I will be doing more Information Architecture work and helping make the websites we build more usable. I will also have the chance to over look some user testing soon, which as odd as it sounds, I am really looking forward to.

.NET

Working for a company which uses .NET technologies for all of their websites means I am surrounded by ASP.NET code day in and day out. Over these 2 years I have become confident in working around this code and manipulating it to render HTML will can easily be styled and suit the designs.

However I have a yearning to take this a step further and be able to create my own web applications. With phrases such as ‘Data Access Layer’ flying around the room, it is hard not to be intrigued and confused at the same time!

Luckily though, having a room full of .NET developers around me, and a tonne of books, I should have the resources available to me to become much more confident with .NET and not have to ask for help every time I hit a brick wall.

PHP

PHP was one of the first internet technologies I was exposed to, along with HTML and CSS. This, with my constant use and exposure to WordPress, has made me want to develop my PHP knowledge. Though this is lower down on my priorities, it definitely would benefit me as a developer in the long run – becoming more well rounded and having more exposure to different technologies cannot be that harmful, can it?

The benefits of having friends such as Jem and Amelie also means I have 2 very talented PHP developers at hand to rack their brains if needed.

Design

When I was first introduced to the web industry, I always had an interest in design, this is still the case and is also why I always put a lot of effort into the presentation of my front end development. Making my templates pixel perfect using semantic and valid code is something I aspire to all the time.

The reason I did not pursue a web design role rather than development was down to, like Stuart, the ability to churn out new and fresh designs day in and day out.

Even though I am no longer looking for a web design role, my interest in design has continued and thus led me to run a fairly successful CSS gallery, CSSbake. Having recently redesigned CSSbake along with Melissa, I have found the joy in designing for myself again and blown the dust and cobwebs off Photoshop.

The plan for the near future is to work on designing and developing free WordPress templates and Mint themes (one of which is nearly finished) to make available for download. So watch this space!

Achieving user friendly Labels with .NET

Making your forms as user friendly as possible is something we all strive for and one common technique is to make our form labels clickable – focusing on the relevant input field upon click.

This can easily be achieved by using the for attribute:

<label for="inputSample">Label</label>
<input type="text" id="inputSample" />

Simple enough when coding with HTML, but with .NET Controls, it requires a bit more knowledge in achieving the same effect. From my own experience, you will come across the following problems:

• When using the for attribute, you need to know the ID of the relevant input. With .NET, the ID renders differently depending on the namspace of the page, whether is in a master page or user control. For example, if I were to give an input field the ID “inputSample”, this would render something a long the lines of “ct100_inputSample”, or within a user control “ct100_usercontrolName_inputSample”. So as you can see, ID’s in .NET aren’t as straight forward.
• Straight out of the box, the asp:label tag renders as a span on the page rather than the label we were hoping for. Which doesn’t really help when it comes to styling the form with CSS.

Therefore, in order to match the ID of the input and to render the tag as a label, we would use the AssociatedControlID attribute. By giving this attribute the same value as the input ID, the label’s for value and input ID value would match up. The asp:label tag also now renders as a label.

<asp:Label id="lblSample" runat="server" 
    text="Label Text" AssociatedControlID="txtSample" />
<asp:Textbox id="txtSample" runat="server" />

For added effect, apply a CSS style of cursor: pointer to the label so the user realises these fields are clickable.