The .gitignore file tells git which files should not be committed to the repository when you add a directory. It is useful for files that get generated by the build, your tools or the IDE. It’s also great for per-user configuration that shouldn’t get checked in.

# visual studio
obj/
[Bb]in
[Dd]ebug*/
[Rr]elease*/
*.sln.cache
*.suo
*.user
*.vspscc
*.vssscc
*.cache
*.bak
*.log
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML
UpgradeLog*.htm

# tools
_ReSharper.*
*.resharper.user
_TeamCity*

# operating system
thumbs.db
*.DS_Store
Desktop.ini

Github host a heap of .gitignore files for different types of projects including one for Visual Studio.

Unfortunately I have used it so sporadically that it’s been hard for me to make the basic git commands automatic! Here are the basic commands I need to be productive.

Basics

Adding all changed files in the current directory to the commit:

git add .

Adding any deleted files in the current directory to the commit:

git add -u .

Seeing which files are waiting to be committed:

git status

Committing the currently staged files to a repository:

git commit -m "a very well explained commit message"

Pushing my changes to another repository:

git push origin master

Get changes from another repository and apply on top of the existing changes:

git pull origin master

Get changes from another repository, but rewind history, apply the changes and then apply the new changes on top. This makes the history more straight forward:

git pull --rebase origin master

Setting up a new repository

Creating a new repository in the current directory:

git init .

Working with remote repositories

Adding a new remote repository:

git remote add origin git@github.com:helephant/SeriesLink.git

Seeing a list of all remote repositories:

git remote -v

Updating the URL for a remote repository:

git remote set-url origin git@github.com:helephant/SeriesLink.git

Cloning an existing repository:

git clone git@github.com:helephant/SeriesLink.git

Committing files

Discard current changes – rollback the file in the working directory to the latest committed version:

git checkout myfile.cs

Unstage changes – keep the changes in the working directory, but roll the version of the file in the staging index back to the last committed version:

git reset HEAD myfile.cs

Commit all changed files – does the add and commit in a single step. Will only commit files that are already in the repository. New, untracked files will not be commited:

git commit --all -m "a very well explained commit message"

Ammending the last commit (because you’ve forgotten files or messed up the commit message):

git commit --ammend

Seeing differences between your working directory and the staging index:

git diff -w

Seeing differences between your working directory and the last commit:

git diff -w HEAD

History

Viewing the history of a file:

git log src/series-link.php

View the complete history of a file that has been renamed:

git log --follow src/series-link.php

View the summary of the last 3 commits:

git log -n 3 --format=oneline HEAD

Search through the history of a file for a term:

git log -S command-line --format=oneline style.css

Search through versions of a file for changes that involve the search term:

git diff -S "latest-post" master~2 master~4 style.css

Viewing more details about the last commit:

git show

Viewing more details about a particular commit:

git show 9d35508c249f1e7060c54165fe0767c01f598359

Seeing differences between two commits for a file:

git diff afb13de89c3 eb72e0b5182  -- style.css

Rolling back a file

Rolling back a file to the last commited version (just replaces the file with the last commited version).

git checkout myfile.cs

Unstage changes – keep the changes in the working directory, but roll the version of the file in the staging index back to the last committed version:

git reset HEAD myfile.cs

Branching

Create a new branch from the latest commit:

git branch new-feature-prototype

Create a new branch and switch to it straight away:

git checkout -b new-feature-prototype

List all branches:

git branch

Switch between branches:

git checkout new-feature-prototype

Switch between branches and merge any pending changes in your working directory:

git checkout -m new-feature-prototype

View a file in another branch:

git show master:style.css

Delete a branch that you’re finished with:

git branch -d  new-feature-prototype

Merging

Merging changes from a branch into the current branch:

git merge -m new-feature-prototype

Generate a commit graph to graphically see branch history:

 git log --graph --format=oneline --abbrev-commit

For more information on how flexbox works, check out using the CSS3 flexbox layout.

CSS has always been pretty great for applying formatting styles like backgrounds, fonts, colours and borders to HTML elements. I think it’s been pretty weak at putting all of these items together in a page layout, forcing front end developers to create fragile code based mostly on clever floating tricks.

I think when flexbox is available cross browser, it is going to revolutionise the way we do CSS layout because it is simpler and more robust than similar layouts built on floats. It also makes it easy to do things that are pretty much impossible with current CSS like aligning boxes horizontally and vertically without knowing the exact proportions of the entire layout ahead of time.

The best thing is that it’s not the only new option for doing page layout in CSS. Other tools like the CSS grid layout module will work better for some types of layouts, giving front end developers lots of new options for creating pages.

Here are some simple examples of reasons to demonstrate why web developers should be excited by flexbox.

Creating a three column layout

Flexbox will make common layouts like the three column layout really simple to implement.

Here’s an example where the content div is 60% wide and the navigation divs use the flex property to be sized according the space left in the container:

See the complete example.

Laying out a form with multi-line flex containers

Flexbox supports wrapping flex items onto multiple lines. This can be switched on by adding “wrap” to the flex-flow property. Flex items that do not fit in the remaining space of the flex container will then be wrapped to the next line inside the container.

You could use a multi-line flexbox to lay out a really simple form:

See complete example.

Displaying a results grid with nested flex containers

It’s possible to nest flex containers to create fairly sophisticated grid layouts.

It’s quite difficult to create a grid of boxes using CSS2.1 if the size of the content isn’t known ahead of time because some boxes might end up taller than others. One way to do it is to set a max-height that’s big enough to accomodate all items, which ends up looking slightly strange if none of the items in the row have overly tall content.

Flexbox layouts solve this problem for you. The height of the lines can be automatically worked out based on the content in the boxes if you don’t set an explicit height on the flex container or flex items.

Here’s an example of a grid of search results. The outer container has a row flex-flow and the inner containers have a column flow. The height of the flex containers is worked out based on size of the content:

See complete example.

Centering an element on the page

Flexbox layout has alignment options that give a lot of control over how flex items are positioned in the flex container.

These can be used to do horizontal and vertical positioning that isn’t possible with CSS2.1. For example, you could use the justify-content and align-content properties to center a single item in the middle of the page:

See complete example.

Flexbox makes it simple to create stretchy layouts that can be dropped into a space and be easily resized when the layout is displayed on a smaller screen. It is designed to make common layout patterns like the three column layout very simple to implement.

Take a look at some examples of the kind of things flexbox is good at.

Flex containers and flex items

A flexbox layout is made up of a flex container and flex items inside the container.

A flex container is a HTML element with its display property set to flex. Any item inside a flex container is automatically a flex item.

Here’s an example of a three column layout. The outer container div is the flex container and the left, main and right divs are flex items:

The code for setting up a really simple flex container with no items would look like this:

Flex-flow

Flex containers have a flex-flow CSS property which determines how the flex items will be laid out. A flex container with flex-flow set to row will be laid out from left to right:

One with flex-flow set to column will be laid out from top to bottom:

Here’s how you’d set the flex container to lay out its flex items in a row:

A flex container can either have all of its items on a single line or it can support multiple lines. This is determined by whether the flex-flow is told to wrap or not. If the container supports wrap, an item which does not fit on the current line will be wrapped to the next line:

Here’s how we’d make the flex container wrap:

Flex items

The elements inside the flex containers are automatically turned into flex items. No extra CSS configuration is needed. The only thing you will need to do is set their dimensions.

If the flex container has its flex-flow set to row, the flex items will need to have their width set. Their height will automatically be set to the height of the flex container:

If the flex container has its flex-flow set to column, the flex items will need to have their height set. Their width will be automatically set to the width of the flex container:

Use the width or height property to give your flex item a size that is independent of the other flex items. For example if we give the content div a width of 600px, it will be 600px wide no matter if there is one, two or a hundred other flex items in the container.

Use the flex property if you want your flex items to be sized according to the space left in the flex container. For example we can tell the browser that the left and right columns should take up any remaining space in the flex container after the content element has been sized.

The value of the flex property is proportional. If the left navigation is set to one and right navigation is set to two, the remaining space should be divided up so the right column is twice as wide as the left:

Here’s some sample CSS to set widths on some flex items that use a mixture of independent and proportional widths:

Complete example

Here’s a really simple flexbox example that creates a classic three column page layout. The content div is 60% wide and the navigation divs use the flex property to be sized according the space left in the container:

See the complete example.

Browser support

At time of writing, in 2012, browser support for the finalized (or maybe just latest) syntax is not very good. These examples work in Opera and webkit (because I included the prefixes).

I haven’t included browser specific prefixes in my in-article examples to make them easier to understand. For the widest browser support in March 2013, you’ll need prefixes targetting for webkit and IE. You might also want to consider adding support for earlier version of the syntaxes. I personally think it’s better to hold off using flexbox until the final syntax gets wide enough support.

If you’re more worried about the width of the columns, you can specify a minimum column-width instead and the browser will work out how many columns it should display:

See example.

Why’s this exciting?

Once the browser support is there, this will be much simpler and less fragile than using methods like floats. This is telling the browser what you want, rather than how to do it. There won’t be issues with items of different heights getting caught on the bottom of longer elements. There will be no overflow issues. It won’t affect the flow of the rest of the document.

Controlling this purely through style makes responsive design easy, just set up different column rules for different displays or use the column-width to let the browser make the decision itself.

You also end up with an element that will easily go into any space of the structure of the page. This is great even if you’re not interested in responsive design because it makes it easy to tweak the structure without having to change the elements that contain the contents inside.

Browser support

Browser support is good in the latest version of all browsers but still (in March 2012) prefixed. It’s only supported in IE10+. Backwards compatibility is good, if you don’t mind falling back to the content rendered without the columns. There is at least one polyfill.

Right now there are some issues with bullets. I noticed in Chrome, the <li> loses its bullet when you split the <ul> across multiple columns. IE10 shows bullets only in the first column.

You can work around this by moving the bullet inside the li using list-style-position: inside.

Who are we?

Totaljobs is based in central London and runs seven online job boards which between them carry over 200,000 jobs, and attract over 5 million jobseekers every month.

Who we are looking for?

We are looking for smart people who can learn quickly and have a drive to get things done. You should care about writing quality code and solving problems, and be always trying to get a little bit better at what you do. You don’t need to have experience in every technology we use, this is a great opportunity to learn new things and to grow your career. Totaljobs is a place where good people are recognised and promoted.

Technology we use

All new projects use the ASP.NET MVC framework and are test driven.

Our technology stack is constantly evolving but these are some of the technologies you would be working with:

• NHibernate and structure map
• NUnit, Web driver and Moq
• TFS, MSBuild and NuGet
• JQuery, Web fonts, responsive CSS and SASS
• MSMQ, windows services, 3rd party APIs
• RhinoETL
• SQL Server 2012, spatial searching, peer to peer replication, data cube analysis
• AWS, IIS7.5 in a load balanced environment

We are constantly trying to be better at what we do. This year’s goal has been to move from a large jobseeker site codebase to small, self contained projects that are easy to work on independently and quick to build, test and deploy.

We practice agile development

We have found scrum works really well for us and have six teams that use a mixture of scrum and kanban, depending on what works best for the team. Each team is encouraged to adapt their process, so they each have their own unique personality.

All developers are as cross functional as possible and work on everything from CSS down to the database. Teams constantly work on different parts of the codebase rather than own particular areas of functionality, so each project is an opportunity to learn new things.

We follow XP practices such as user stories, pair programming, continuous integration and TDD. Our releases, testing and test environments are automated so we can release often. There is a big focus on breaking projects up iteratively and getting value out to customers as soon as possible.

Perks

Work with people who are passionate about development. Our office is filled with books about technology and people who enjoy coding so much they will do it outside of office hours. There is no shortage of people to have interesting technical discussions with or to ask for help if you need it. We have regular brown bag sessions where team members do a presentation about something that they’re passionate about.

The office has a relaxed atmosphere and a nice, social feel. Teams regularly go for team lunches and we have Friday afternoon office drinks. We have a casual dress code and lots of great office toys.

Sound interesting?

If you’d like more information, feel free to email me and I can answer any questions you have. If this sounds like the kind of place you’d like to work, please send me your CV (and any github account, stackoverflow account or technical blog..) or go apply on our website for the developer or senior developer role.

Debugging inside IIS

Failed request tracing – a handy IIS7 feature for debugging what’s happening when there are problems with modules or handlers in the IIS pipeline.

Debugging IIS7 with Windows events tracing – detailed information about what has happened to a broken request that fails before or after it gets to an IIS7 application pool.

When things go wrong on the client

Simulating network latency with fiddler – How to use the Fiddler proxy to simulate HTTP response latency to test how your website works over a slow connection.

IE tester – for cross browser testing across all versions of IE.

IE drip – finding javascript memory leaks. Tracks how much memory IE is using and shows DOM elements that can’t be disposed. An old tool which isn’t very pretty looking, but super handy if you need to debug memory leaks.

DIY javascript stack trace – creating yourself a stack trace if you can’t run javascript debugging tools for some reason.

For these types of problems, windows event tracing can show where the request has gone wrong. This is the built-in operating system event tracing that supplies messages to the windows event viewer, turning on logging that is usually off by default.

Using windows event tracing

You turn on the HTTP.sys logging using the logman start command. Then you need to do whatever is needed to generate some request for it to log.

c:\> logman start httptrace -p Microsoft-Windows-HttpService 0xFFFF -o trace-output.etl -ets
The command completed successfully.

After you have finished making requests, you need to turn off the logger. This will create a binary file with all the output, which you can translate into XML (or CSV).

c:\> logman stop httptrace -ets
The command completed successfully.

c:\> tracerpt.exe trace-output.etl -of XML -o trace-output.xml

Input
----------------
File(s):
     trace-output.etl

100.00%

Output
----------------
DumpFile:           trace-output.xml

The command completed successfully.

After you have finished there will be a trace-output.etl and trace-output.xml file in the current directory.

Understanding the output

The file that gets generated is not particularly pretty to look at, but contains lots of information about what happened to your request. I usually search for the path that I entered or the port that my request came in on (if it’s not 80) to skip straight to the right place in the file.

About the third thing that happens is the incoming request is assigned a connectionId. This makes it very convenient to find all the events that happen to your request afterwards because they all contain the connectionId.

If you are having problems getting your requests to arrive at an IIS7 application pool, here’s an example of a message logged when the request is passed off to an IIS application pool:

If your request is going wrong after the app pool has finished with it (and you can tell this by turning on failed request tracing), look for a message like this which says that the response was generated successfully and gives some information about what was sent back to the client:

Hopefully this is something that most developers will never need to know because you have to be doing something a bit strange to mess things up at this level, but I’ve found it’s a pretty useful tool to have in my IIS7 debugging toolkit. It’s also appeals to my nerdy nature to be able to take a peek under the covers and see what IIS is actually doing when it processes my request.

The one I found most useful was failed request tracing, a tool designed to show what has happened inside the integrated pipeline for a particular request. It logs every event that fires so you can trace the journey of a request and diagnose problems with HTTP modules or HTTP handlers.

The featured is called failed request tracing, but don’t worry, it can trace any request.

Using failed request tracing

Failed request tracing comes with IIS7 but is an optional module that is not installed by default. You can switch it on through the windows component dialog. If its installed you’ll see a failed request tracing rules item in the IIS manager under the website.

Failed request tracing is switched on at the site level in IIS manager. It needs to be turned on in two places. You need to enable it for the site and then set up one or more request filters.

The IIS manager stores the changes in the site’s web.config file in the system.webserver section, so you can also make them directly there. If you do use the IIS manager to configure failed request tracing, make sure you don’t accidentally check in the changes.

Once you have everything set up, you just run your pages and the logs are written to c:\inetpub\logs\FailedReqLogFiles. They are XML with an XSLT that makes them pretty. I found they only really worked in IE.

Once you are done, there’s no problem manually deleting the files you don’t want any more. Just be careful to either delete the whole directory or to leave the XSLT because failed request tracing won’t regenerate the XSLT unless the directory isn’t there any more. If you don’t delete the files, they will eventually be overwritten when IIS hits the limit on the number of files to generate.

Reading the logs

The problem with failed request tracing is that the amount of data it captures feels a bit overwhelming, but there are a few views I’ve found really helpful.

Sometimes the summary view has all the information you need to know. It will tell you who the request was authenticated by, how long it took, what the status code was and which app pool it ran under.

If one of your modules is acting strangely or isn’t kicking in, the module notifications gives a fairly succinct story of which events fired for which modules in which order. If you need more detail, check out the complete request trace.

If your request isn’t being served properly, you might want to know which handler picked it up. The complete request trace in the request details tab shows which handlers were rejected and which ones were tried in the MapRequestHandler phase of the pipline.

If your request is slow, the performance view lists the slowest steps at the top so you can quickly figure out which module is to blame.

Makes the IIS7 integrated pipeline less of a black box

Failed request tracing is an awesomely useful tool. It would have been much harder to figure out what was going wrong in our code designed to run in a classic app pool if we didn’t have this.

It helped us figure out that the Sitecore module was corrupting static files once they’d been gziped by looking at what order the modules inside the pipeline fired in. We found it helpful to confirm that performance problems were outside the application by seeing how long the pipeline took to run. It also helped us figure out we needed to turn on runAllManagedModulesForAllRequests to get postback working for extension free Sitecore urls because we could see the modules just weren’t firing.

This function is created using a function declaration:

This function is created using the function operator:

The biggest difference between using a function declaration or a function operator is when the function is created. Functions made with a function declaration are moved to the top of the code and created before the rest of the function is run. Functions made with the function operator are created at runtime where they are in the javascript code.

Function declarations

Function declarations are the javascript 101 way to create a new function:

When you use a function declaration, the function object will be created as the javascript is parsed, before the code is run. This is why you can call a function created with the function statement before it is declared:

This works because the javascript interpreter does something called hoisting when it is loading a new program or creating a new function object. It looks for any function declarations in the current scope and moves them to the beginning of the code. This is why you can call a function created by a function declaration before it is declared in the code.

So if you wrote some code that looks like this:

It would end up being executed like this:

The function declaration syntax also automatically adds the new function object to the current scope. It creates a variable with the same name as the function which points to the newly created function object.

Because of this, all functions created with the function declaration must be given a name. They can not be anonymous functions. If the function did not have a name, it would not be possible to add it to the current scope and you would not be able to call it.

The function operator

If you’ve done any work with jquery, you’ve probably seen a function declared with the function operator:

The biggest difference between a function operator and a function declaration is when the function is created. Function operators aren’t affected by hoisting so they are evaluated where they occur in the source code as the code is run.

This is very useful because function creation can be affected by the surrounding logic. For example, if you put a function declaration into an if statement, it would get hoisted out of the if statement into the beginning of the scope. If you use a function operator no hoisting will happen so the function creation will stay inside the if statement:

According to the javascript spec it’s not actually legal javascript to put a function declaration inside an if block. All the browsers let you do it, but they deal with it in different ways. Annoyingly, it will work the way you expect it to in Firefox because they have yet another type of function creation called the function statement but it will hoist the function out of the if statement in all other browsers.

The other result of not being affected by hoisting is that functions created by the function operator aren’t automatically added into the current scope as a variable. Instead the function operator returns the new function object and it is up to the code to do something with it.

The usual thing is to assign the return value from the function operator to a variable that you can use to invoke it:

If you don’t do anything with the return value from the function operator, there is no way to invoke the function. It is perfectly valid javascript to do that, but doesn’t really have much point:

Since functions created with the function operator aren’t automatically added to the scope, they don’t have to have a name. They can be anonymous. Functions created with the function operator are usually created as anonymous functions since there isn’t much benefit giving the function a name since it’s not automatically added to scope:

The function operator is useful because it’s an expression

The function operator is a lot more flexible than a function declaration because it can be used wherever it is valid to use an expression.

You can use the function operator to declare a function when you are creating an object:

When you are creating a list:

To declare a function as a parameter when calling another function:

This can be very convenient if you are creating single use functions like object methods or event handlers. The anonymous function syntax is more concise than declaring a function and then doing something with it as two separate steps. In JQuery code (and other similar libraries) this is used all the time:

You can also use the function operator it inside an if condition to actually control whether a function is created or not using programming logic:

Or inside any type of loop:

That’s nice, but which should I use?

If you need to create a function inside an if statement or a loop, always use a function operator. The function declaration will not have the effect that you intended because it will be hoisted to the top of the code (unless you and all the people who will ever use your script are using Firefox because then it will become a function statement). Function declarations that are in if statements or loops will never consistently do what you expect cross browser.

If you are going to declare a function and use it only once and straight away, the function operator syntax is more concise than the function declaration. It is ideal for things like single line JQuery event handlers that toggle some CSS class.

Building up objects with methods is pretty much the same. Using the function operator to directly assign the method to the object means not having to go looking for the implementation. If you’re worried about performance, use the object prototype to declare the method only once for all the objects you create.

If you’re working in the global scope (writing javascript that is not inside a function), particularly if you are working on code that will be used by other people, you will want to avoid creating lots of variables that might conflict with other code. The function operator can be used with patterns such as namespacing to keep your code’s footprint as light as possible.

For any other functions that will be used a number of times, function declaration or function operator is a matter of personal preference. The function declaration is more concise and looks more like how you’d create a function in most other languages. If you’re using the function operator everywhere else and you want to make sure no one makes the mistake of putting a function declaration inside a conditional statement or a loop, then it might be worth considering mandating the function operator in your coding standards.

One of the really tricky things you can do with it is simulate network latency. This is possible because Fiddler has an autoresponder feature that can create a canned response to a request to a url.

To set one up, Fiddler has an autoresponder tab. You need to tick the “Enable automatic responses”, “Unmatched requests pass through” and “Enable latency” checkboxes to turn it on and to start meddling with requests.

The easiest way to create a new autoresponder is to load your webpage up in a browser and get fiddler to capture the traffic. Then you can drag the request that you want to simulate network latency on into the autoresponder window. Make sure that you’re capturing responses with a 200 HTTP code and not ones that return a 304 “load from cache” response.

Then right click on the autoresponder, choose “set latency” and enter in how long you’d like the request to take in milliseconds. To verify that it has worked, use the network tab in Firebug to watch your page download.

@friend is at St Pancras. Are they catching a train or trying the champagne bar?

@friend is watching Doctor Who with everyone else in the UK. What did they think of the story? Do they think I should watch it? Did they like Matt Smith’s latest headwear?

@friend just watched a video on youtube. Was it a thought provoking demo of some technology or a cat on a Roomba?

I like social media (twitter in particular) because I get to hear the little stories that I share with the people in my every day life, but don’t get to hear from the people I don’t see every day. I love knowing that my friend from America is besotted with some super hero from a cartoon, that my friend from Australia is on her way to the beach or that my front-end coder friend is enjoying his new contract. With so many friends in so many different places it’s a little way to be part of their lives. Little stories that only matter because I care about them.

Stories spark the imagination and start conversations. Stories can tease or make me laugh. Stories make me want to click on links or see the picture. Facts without stories are empty and unsatisfying.

This is just a starting point, hopefully I’ll keep updating it as I actually try out the videos and find more places to get good content.

Programming

Clean coders has videos about writing maintainable code that are all less than an hour, fast moving, well edited and full of funny. You do have to pay for the videos, but they’re pretty cheap and have clear information about showing them to groups (around $1US/person). I find it impossible not to like Uncle Bob. It’s like being taught how to code well by your slightly embarrassing dad.

infoq has presentations about pretty much everything going on in mainstream development.

.NET

Tekpub have videos about a heap of different technologies, including quite a good selection on .NET. The videos tend to be under an hour and they get some pretty impressive experts (like Jon Skeet) to help present them. They’re kind of pricey ($18-$25) because you have to buy the videos as a series and they don’t have cheaper streaming prices for large groups, though they were willing to give us quite a generous discount.

I am a huge fan of the .NET rocks podcast but had never tried out their DNR TV videos. They have videos on just about everything, though they tend to be an introduction rather than going into a lot of depth like the tekpub ones do. They’re free (hurrah!).

There’s a series of nhibernate videos called summer of nhibernate. They’re free but over an hour each. I’ve watched the first one and it’s a pretty good introduction to nhibernate.

Dimecasts has 10 minute videos about almost anything you can think about in .NET. It seems like a nice way to start a discussion about something.

Channel 9 on the MSDN have a vast library of videos which are mostly about Microsoft technology. There are hundreds of videos about .NET.

Skills Matter is a London based company that runs a lot of interesting sessions about all sorts of different technologies (including lots of open source stuff). They have recorded quite a lot of them and put them on their site to watch for free.

Web dev

YUI theatre has lots of videos about using YUI and some generally interesting web development ones as well.

Nicole Sullivan has some recordings of her conference talks. She talks about how to write maintainable CSS and we have found that using her ideas have made our CSS way better.

Videos from the MIX conference on some pretty neat new web technology. The 2011 lot have a lot of stuff about HTML5. They tend to be pretty good quality presentations since they’re for a conference.

Technology and inspiration

I like the TED videos as an excuse to dream. ASP.NET developers probably don’t need to know about bio-fuels, but it’s nice to feel inspired. :)

Browser support for the tag itself is pretty decent, but you’ll need to create a mp3 and ogg version of your audio if you want it to play in all browsers. You can also provide a fallback for older browsers.

The built-in browser UI is pretty consistent and looks decent enough, but if you need something special it’s very easy to use javascript to control the <audio> element.

The audio tag

A simple <audio> tag (that doesn’t worry about cross browser compatibility) looks like this:

src – the url of the audio to play. In reality, if you want your audio to work in as many browsers as possible, you will need to set the media files in the <source> tags to provide both .mpg and .ogg versions of the content.

controls – if this attribute is present (even if it is set to false), the browser will render an element to control your audio. If you set this to false, no element will be rendered and you will need to use javascript to control your video.

Here are the default controls in Chrome:

preload (none, metadata, auto) – whether the browser should start downloading the audio as soon as the page loads. If the audio is the whole point of the page it’s on, it might make sense to do it. If not, you can tell the browser to save the bandwidth. Of course having preload turned on will affect your bandwidth costs as much as it will affect your users.

Setting preload to none tells the browser not to preload at all. Metadata suggest that the browser just download enough of the file to find out things like dimensions, running length and size. Auto lets the browser know that it can do whatever it thinks will be best for the user, which might include preloading the whole file.

Sadly if you use this right now, setting preload=”none” causes issues in IE9. It will add the audio element to the page, but won’t display any controls for it.

For more information checked out the Mozilla or MSDN references. There are a heap of extra properties that are useful for interacting with audio element through javascript.

Different browsers need different formats

While support for the tag itself is pretty solid across browsers, there (predictably) isn’t one audio format that all browsers support:

So to make an <audio> element that will work in all browsers, you’ll need to provide your file in at least two formats. I’ve found .ogg and .mp3 work pretty well. You can use the <sources> tag to provide a link to the audio file in both formats. The browsers will just look through all the sources provided and choose the one it thinks is best:

This might be a good reason to keep using flash for developers who are less concerned about supporting open standards and don’t need to support mobile browsers. Encoding the audio in two formats definitely adds a little overhead to my podcast workflow.

Providing a fall back for older browsers

Older browsers don’t understand the <audio> tag so you can provide a fallback just by adding extra HTML inside the <audio> tag. Browsers that support <audio> will just ignore the fallback content, while browsers that don’t support <audio> will ignore the audio tag.

One option is to use a Flash player as a fallback. Since Flash will play on pretty much any browsers except the iPhone, the only advantage of using the <audio> tag as with a Flash player fallback (apart from the warm glow of supporting open standards) is your audio will also play in iPhone Safari.

Audio controls in the different browsers

If you decide to use the built in browser controls, the UI between browsers is pretty similar and fine for just including a simple audio file in your site.

Firefox:

Chrome:

Safari:

Internet explorer:

iPhone Safari:

To use the built in browser controls, just add the controls attribute to the <audio> tag:

Building custom controls using javascript

If you don’t fancy the built in browser controls, it’s easy enough to control the audio tag using javascript:

Complete example

For more advanced audio manipulation, check out the experimental Audio data API.

Browser support

Once you get the audio formats right, desktop browsers have pretty good support for the audio tag. Even IE 9+ supports it!

Mobile browser have pretty good support too:

It’s the same sort of setup as desert island discs: I find someone interesting to interview and they tell me about three books that have influenced them as a developer.

I’ve just posted my first podcast where I interview a very nice developer called Dan Wagner-Hall who agreed to be my first victim.

(book picture taken by Ananta Bhadra Lamichhane)

TJG runs seven job boards. Total Jobs is the most popular one and the other five are all industry boards like CW Jobs for IT. Pretty much all development is for either the websites or the web based tools that support them.

For more detailed information about the job and the exact skills we’re after, check out the job spec.

Why would you want to work with us?

Our department is serious about continuous improvement so we’re constantly looking for new ways to do development better. In the past six months the development team have been going on TDD training and teams are starting to do it as part of their every day work. Some of the teams have been trying MVP patterns on areas of the code that already use web forms. New areas of the code have been using the MVC framework. We keep improving the way we use clientside technologies, particularly CSS and javascript. Lots of teams choose to pair program. Last year there was a big project to automate more of our release process.

Each team gets flexibility to try new things. Our team has tried experimenting with different sprint lengths, kanban style work in progress limits, tracking stories through TFS, lego people on our scrum board and tracking technical debt on the ceiling. Other teams are automating their acceptance testing with Selenium and trying TDD. Each team is encouraged to figure out what works for them.

We’re encouraged to share ideas around the department. We have our own internal user group where a couple of times a month someone talks about something they’re passionate about. Today’s session was about how one guy hooked up RFID readers to the scrum board to track story status and to automatically kick off builds. The really cool thing is the department supports it by giving us a lunch budget. We also do community of practice sessions where we all bring some code and talk about something neat we’ve been doing. Some of the groups have been reading books like Working Effectively with Legacy Code and Clean Code.

The office has a really nice atmosphere. The people are friendly. We have a casual dress code. People put effort into making work a fun place to be. Last week we had a build it in a day Friday where the whole team (not just developers) had a day to work on anything company related that interested them. We have team outings a couple of times a year. The development team are going bowling on Friday. People go out for team lunches and Friday drinks. People bring cakes and donuts in to celebrate things a couple of times a week. Our scrum master is a great cook and brought in homemade lemon drizzle cake today.

People notice when you do a good job and its recognised. Every other week there’s a presentation where the management tell everyone about something great that someone has done. Last year there were toys and lego for teams that did something special. You can see Star Wars lego all over the office now. Before that we competed for a silver cup full of sweets. They also awarded a scrum team of the year award where one of the teams got a prize to spend on a meal out together.

TotalJobs is part of a bigger company called Reed Elsevier so the benefits are pretty good. My absolute favourite is that we get 29 days holiday a year with the option to buy or sell three during the year. We also get two charity days. Last year our team spent the day doing gardening for some lovely elderly people in Sutton. The year before we did gardening and painting for a kids playground.

Joel test

Do you use source control? – TFS
Can you make a build in one step? – Yes
Do you make daily builds? – Yes, we build when we check in. Working towards continuous integration.
Do you have a bug database? – Our scrum team track bugs on the board on red cards.
Do you fix bugs before writing new code? – yes
Do you have an up-to-date schedule? – yes
Do you have a spec? – We write user stories with acceptance criteria.
Do programmers have quiet working conditions? – No we work open plan and everyone sits with the people they’re working on
Do you use the best tools money can buy? – We use VS2010 (mostly), Resharper, nUnit, computers with dual monitors, MSDN licenses
Do you have testers? – yup. Vinny is a bug finding machine.
Do new candidates write code during their interview? – depends who interviews you
Do you do hallway usability testing? – we do weekly demos to get feedback from the people we build the software for. We have designers and usability people who come up with the best way to implement user interfaces.

Your job isn’t as great as this?

Interested? Then email me your CV and I’ll pass it on or apply through the website.

The video of the presentation is up on Vimeo:

Feel free to use these slides if you’d like to give a similar presentation. Feel free to give it as is, as a starting point or ideas for your own presentation. I’d love it if you could link back to me, but this is all about getting people talking about writing maintainable CSS rather than anything else.

Once we’d come up with the idea, I had to do it. So I shopped around on the internet for all the bits I needed, came into work with a creepy bag of Lego heads and we swapped our Simpsons avatars with new ones made out of lego.

Here are the avatars we came up with:

What you need to make your own scrum board Lego peeps

• You can get a big bag of Lego magnets from Amazon.com or Amazon.co.uk for a couple of pounds.
• You can buy lego heads, bodies, hair and accessories on bricklink. You don’t have to buy whole people, you can just buy the bits that you think your team might like. I got enough for my team for about £30. You can find female lego people if you hunt around.
• A team of developers who aren’t too grown up to play Lego.

If you’re familiar with languages like C# or Java, chances are you’ve never really thought too much about this because its value always references the object that the method belongs to (the rufus object in the previous example). This is usually the case in javascript too but there are some situations where it won’t refer back to the object that you’re expecting.

Functions are first class objects

The difference between way the this operator works in C# and javascript is a side effect of functions being first class objects in javascript. Functions are just another type of variable that can be passed around the application.

The methods in a javascript object are only methods because you chose to store a function inside one of the object’s properties. There is nothing in the language that always binds the method to the object. If you wanted to, you could use the same function in a number of different objects:

Complete example

Notice that the context of the sayHello() function (the thing that this references) is different depending on which object invoked it. In this example the two different objects were pretty much the same but the sayHello() function could be used by completely different objects as long as they provide the right information.

This design decouples the function from the context that uses it. You can plug any context into the function and it will still work. This is one of the reasons that having functions as first class objects is such a powerful feature.

Default context

Every time you call a function it has a context even if it is not explicitly provided. If no context is explicitly provided when the function is called, the default context will be used instead. In the browser the default context is the window object. This means that if you call a function without invoking it through an object, this will be set to the window.

To see this in action lets try calling sayHello() without invoking it from an object:

Complete example

Javascript is happy to run the function without calling it through an object. It just sets the context to the default context, the window object. The window object doesn’t have a name property so instead of alerting “someone says hello”, instead it alerts the error message about the object not having a name property.

The way I imagine it is calling sayHello() is really calling window.sayHello(). You just don’t need to explicitly use the window object to invoke it because the window object is the default context. The same thing happens if you set a variable without declaring it first using the var statement. Instead of creating a new variable that’s only available in the current scope, it actually creates a new property on the window object:

Complete example

Check out this article if you want to find out more about what happens when a Javascript function is called. It’s a really interesting write up that goes into lots of detail.

Objects, context and event handlers

In the previous examples, we have explicitly called the sayHello() method ourselves. This doesn’t happen for functions that are used for event handlers. We wire them up and then they are invoked automatically when the event occurs.

This can be a problem for functions that actually are methods of objects. The logic that invokes the event handler doesn’t know anything about the object the method belongs to so it can’t be invoked in the right context.

Instead the context of the method is set to the element that caused the event. If it was a button click event, it will be set to the HTML button element that was clicked. It it is an onload event, it will be set to the element that was loaded. The exception to this rule is IE where the context will always be set to the default window context.

Here’s an example where the hello function of a rufus object is used for the onclick event of our button:

Complete example

If you’d never tried this before, you’d probably expect the this operator to still be set to the rufus object when the button is clicked so the output would be “Rufus says miaow”. Instead the this operator is set to the button that triggered the event. The button’s name property is set to “button” so the output is “button says miaow” (which is just silly, buttons don’t miaow).

Changing the context using Function.apply() and Function.call()

In cases like the event handler problem, you might want to invoke a method in an explicit context. Javascript functions support two methods that you can use to do this called Function.apply and Function.call.

Both methods are pretty much the same. You can use them both to invoke a method, supply the context and a list of parameters. The only difference between the two are the way the parameters are passed in. Function.apply() accepts the parameters for the function as an array while Function.call() accepts them as individual parameters:

Complete example

Using Function.call() to solve the event handler problem

Remember the problem with using a method from an object as an event handler? When the event is fired, the context of the event handler is set to the HTML element that triggered the event. Then when you access the this operator you get a reference to the HTML element rather than the object that you might have expected.

It’s possible to use Function.call() (or Function.apply() if you want) to invoke the event handler in the right context. The plan: create a custom function that wires up the event handler and knows what the context of the function should be when the event is run:

Complete example

This works because javascript has a feature called anonymous functions that you can use to create a new function at runtime. The addEvent function uses this to create a new wrapper function that calls the event handler using Function.call(). The wrapper function is passed to addEventListener() instead of the event handler that was passed in as a parameter.

The wrapper function can access the context object when the event fires because of another javascript language feature called closures. When you create a function inside another function, closures mean that the inner function automatically has access to the local variables of the outer function (addEvent) when the inner function (wrapper) is called. This works even if the inner function is called after the outer function has finished running.

This is how the wrapper function can get hold of addEvent’s context and handler parameters when the anonymous function is run.

Mostly if you’re using a javascript framework, you don’t need to worry too much about this. The framework will look after it for you, usually in a way similar to this. For example, if you’re an ASP.NET ajax programmer, this is exactly what happens when you use Function.createDelegate() to register an event handler inside an component.

What’s next?

Sometimes you need to find out things about an object’s capabilities. The next article talks about finding out what type of object you have and what it can do.

This article is part of a set of related posts about How javascript objects work.

Multiple background images can make CSS and HTML simpler:

• It removes the need for elements just for styling. For example CSS sliding doors can be done with a single HTML element.
• It makes it easy to create stretchy page elements that can be easily resized or dropped into different sized places in a website.
• It empowers designers to be more daring because it’s easier to create CSS for complex designs

This has good browser support. All the recent versions of Webkit, Firefox and Opera support it. It also works in IE9 or newer.

Using multiple background images

CSS3 supports more than one background image listed in the background CSS property. The syntax is otherwise is exactly the same as declaring a single background:

Complete example

The browser applies the images top to bottom, so the first one you declare will overlap any of the others. All the CSS background attributes are supported.

You could also list out each of the background attributes separately:

Backwards compatibility

Multiple background images degrade quite nicely in older browsers. You can supply a single background image before you declare the multiple background images and the browsers with support will show the multiple background images while the other browsers will just show the single one:

In IE6

In IE7

Simple test case

Here’s a simple example of the HTML:

Here’s a simple example of the CSS:

Complete example

Workaround

If you can’t use an even number of pixels for the width of the parent box, just to use the underscore IE6 hack to provide an adjusted right value just for IE6 that all the other browsers will ignore:

Which algorithm to use?

The minification tool supports JSMin and Packer.

JSMin just strips out the parts of the file that the browser won’t need like extra whitespace and comments. You can run JSMin over CSS and javascript.

Packer does the same sort of minification as JSMin but also has options to reduce variable names to single characters and to base-62 encode everything. Packer tends to give very small file sizes when you use the base-62 option but there’s a performance hit in the browser when it gets unpacked. Packer will only run on javascript.

One thing is keep in mind is whether or not you’re using gzip compression. JSMin with gzip compression tends to give files that are almost the same as Packer but without the clientside performance hit of unpacking them. Gzip tends not to make as much of a difference to files minified with the base-62 encoding option.

A good way to find out which will be best is to run your particular script through the compressor comparison tool.

Using the tool

Packer.NET comes as a single dll so you don’t need to install any command line programs to use it. I put the assembly into source control on our system so anyone who wanted to run the build script wouldn’t need to install it manually.

Here’s an example target that uses JSMin to minify all CSS files and all javascript files (except library files that are already minified). This example simply replaces the existing files:

There’s documentation with more examples and details on the different options that the task supports.

What about YUI compressor?

YUI compressor is another good option for minifying javascript and CSS. There’s also an example MSBuild task for that.

The idea of a reset stylesheet is to strip the default style out of a webpage before you start to apply your design. This gives a predictable base for you to start with and removes browser inconsistencies with the default styles. There are a number of different reset stylesheet options. The most popular ones are from Eric Myer and YUI.

Sounds like a great idea in theory. Slight browser inconsistencies (particularly with margins and padding) are a pain to remember and can really mess up a design if you don’t test in multiple browsers.

Why set the styles and then set them again?

The big problem I have with it is how redundant it can be. The way I’ve seen reset stylesheets implemented is you include a reset stylesheet to reset everything to empty (including things like removing bold text from the <strong> tag) and then you create another stylesheet where you set all the styles that you want in the page.

It feels pretty redundant to have to set styles like bold text on the <strong> tag or numbered bullets on the ordered list. Most of the defaults make a lot of sense and most of them are pretty consistent between browsers.

It also feels kind of redundant to have the browser have to download and apply the reset styles and then download and apply the real styles. I haven’t actually ever seen a reset hurt the rendering time of a webpage but I have worked on a few sites where the number of requests that the browser was making became a problem and having the reset stylesheet as a separate request didn’t help.

Why make me learn what the base styles are again?

The other thing I don’t like about it is that the browser no longer acts the way I’d expect. I’ve got years of experience with how browsers render things and usually can picture in my head what a style should do to a page. Adding a reset stylesheet means that it’s not as intuitive any more.

A better solution?

I think a better solution would be using a stylesheet like YUI base that makes browser defaults the same across different browsers as a starting point for your own stylesheet and then adding your own styles for the particular site. I don’t think I’d even bother setting a default style and then overriding, I think I’d prefer to just set the style once.

I think using something like the YUI base as a starting point is a great idea, but I think if I was going down this path I’d want to customize it as a I worked to make my own version to use on other sites.

A tool I don’t like, but something worth thinking about

Eric Myer’s response to people questioning whether reset stylesheets were a good idea or not was pretty much, use them if you find them useful and or don’t otherwise. I just wanted to put my hand up as not personally liking them (since they seem to be every at the moment) in the hope of making other people question them too.

Constructor functions have a property called prototype. Adding properties and methods to the prototype property will automatically add the method or property to all objects created by the constructor function.

Prototype chaining is an extension of this idea. The prototype property is just a regular javascript object so it’s possible to create a function’s prototype using another constructor function. When you do this, all of the properties and methods from the constructor function’s prototype are automatically added to new the prototype object. This makes it easy to create a constructor function that builds objects that are an extended version of an existing one.

For a simple example, imagine that you have a Pet constructor to make pet objects. Now you want to make Cat that is pretty much like a Pet but has a few differences.

Here’s the Pet constructor function from the prototype example:

We can give the cat all the properties of the Pet by setting it’s prototype to be a new pet object:

This is not really any different to creating the prototype using object literal syntax. The only big difference is that instead of manually adding the methods to the object literal, the Pet’s prototype does most that work for us.

We can still extend the Cat objects by adding extra methods to the prototype. Any methods added to the cat prototype will only be available to objects created by the Cat constructor. Objects created by the Pet constructor will still only have the methods added directly to Pet:

We can override any methods that came from the Pet constructor just by creating a new version of the function and assigning it to the Cat prototype. This will give cats different behaviour to the other pets:

Complete example

Function resolution

The most important thing to understand when using prototype chaining is how the method resolution works. Method resolution is what happens when you call a method or property on an object. It’s how javascript figures out what method or property should really be called.

First javascript checks the object itself for the method. This is important because it means you can override any method from the prototype on any object. If we call rufus.avoidPhoto() in the following example, javascript will call the avoidPhoto() function that has been assigned directly to rufus:

If the object doesn’t have the method set directly on it, javascript then looks for a Constructor function that created the object. Javascript checks the constructor’s prototype property for the method. If we call rufus.catNap(), javascript will find the method on Cat.prototype and use it:

If the constructor function’s prototype doesn’t have the method defined, javascript looks at what constructor function was used to create the prototype property and does the same thing again. It will keep walking the prototype chain until it finds a function that matches. If rufus.eat() is called in the following example, javascript will walk up the prototype chain until it gets to the Pet constructor’s prototype object and then use Pet’s eat() method:

All objects ultimately have the Object constructor at the end of their prototype chain. This means any methods or properties added to the Object property are automatically available to all objects. Javascript libraries often use this to extend the javascript API.

In the previous example, if we called rufus.toString(), javascript would check the rufus object, then the Cat object, then the Pet object. The Pet object’s prototype was created with the Object constructor (using the object literal shortcut) so javascript would then find the toString() method on the Object’s prototype.

Walking the prototype chain

In theory it’s possible to walk the prototype chain using an object’s constructor property. Each object has a property called constructor that holds a reference to the constructor method that created it. The constructor’s prototype property is just a regular object, so it also has a constructor property that points to the next constructor function in the chain:

Complete example

In theory the first alert statement will show the Cat constructor and the second will show the Pet constructor. In practise they both show the Pet constructor. This makes sense when you think about the prototype chaining behaviour. When you create the Cat’s prototype object, it’s constructor property will get set to Pet because it was created by the Pet constructor. When you look at the constructor property of the rufus object, rufus doesn’t have a value set explicitly on it so it looks for it on the Cat’s prototype object where it is set to Pet.

To fix the problem, you just need to set the constructor property explicitly on the object itself when you create it:

Complete example

In mozilla based browsers each object exposes another property called __proto__ that gives you access to the way that the browser tracks the prototype chaining. The __proto__ property is a reference to the prototype property of an object’s constructor from the object itself:

Complete example

This property is not supported across all browsers, so it’s not very useful when writing code but it can be very useful when debugging because it lets you take a peak at what the browser is actually doing.

If you come from a class based language you might be tempted to use the prototype chain to figure out what type an object is. The properties and methods of a javascript object can be modified after the object is created, so knowing about the constructor is no guarantee that the object will conform to a particular interface. You may choose to make your code work this way by convention but it’s important to remember that it is not enforced by the language itself.

I think it’s also worth considering that this is not really the javascript way of doing things. In javascript you don’t get static types, instead you use duck typing to ask an object what it can do. It’s important to use javascript’s strengths as a dynamic language with features like first class functions, closures and anonymous functions to write concise and modular code rather than trying to make it act like a different type of language.

What’s next?

In languages like C# and Java you never really need to give a thought to the this operator. In javascript things are a little more complicated due to functions being first class objects. The next article talks about javascript method context.

This article is part of a set of related posts about How javascript objects work.

They now have pretty good browser support. Using SVG as background images is supported by all the recent version of the desktop browsers and IE9+.

SVG are great option to:

• Use the same image in containers with varying width and height. They are a much better solution than downloading multiple sliding door images or using sprites.
• Support multiple resolutions for responsive design, zoom or printing.
• Change the styling of the images using CSS – the styling can even live in your main stylesheet.
• Dynamically generate images with a server side language since it is a text format that is fast and easy to generate.
• Need a large image with a small file size because unlike a raster image, a vector image’s file size only gets larger as the image becomes more complicated, not as the width and height increase.
• Create a complicated background that uses advanced SVG features not supported by CSS3.

Using SVG images in CSS

Using a SVG is exactly the same as using a regular image:

See complete example

Background-sizing

There is a new CSS3 property called background-size that adjusts how the background image is displayed on the HTML element. The background-size property can take width and height values, or the contains or cover keywords.

Contains means that the background will be sized so the whole image will be displayed. If the aspect ratio of the image isn’t the same as the aspect ratio of the element, the image will either tile or empty space will be displayed.

Cover means that the background will be sized so the whole HTML element is covered. If the aspect ratio of the image isn’t the same as the element, some of the image will be cropped.

Creating SVG images that will fit any container

If the SVG image has width and height or viewbox (aspect ratio) information in it, the browser will respect the image’s aspect ratio:

To make an image that will be scaled fit into any space without worrying about aspect ratio, set the width and the height to 100%:

This is particularly useful for making reusable, stretchy, resizable backgrounds for things like tabs, buttons and content boxes.

Mozilla have some detailed information about how Firefox figures out how to display your image.

Issues with scaling

Right now in 2013 Firefox has some issues scaling up SVG images.

This is because they create a bitmap of the image from the SVG and don’t redrawing it in certain situations where you want it bigger than its original size like when you set the image size using the CSS background-size property or when you use the browser to zoom into the image.

The way to work around this is to set the width and height of the image inside the SVG larger than you actually need it so it won’t lose detail when zoomed. The disadvantage is it will take up more memory, which could be a particular issue on mobile devices.

There are also similar issues with IE10.

Creating the SVG image

SVG images are just text so you can create them in any text editor. There are also heaps of tools to that create SVG images. Inkscape is quite a nice open source tool to use or if you have Adobe software, you could use Illustrator.

The SVG file that your tool creates might not be particularly optimised, so you can run it through an optimiser if file size is important to you.

If you have EPS files that you want to convert to SVG, it’s possible to get Inkspace to import EPS directly, but you need to get a library called Ghostscript working. Another way is to convert the EPS file to PDF and then import that. On a Mac this can be done by opening the EPS file up in Preview and then saving as a PDF.