Azure Developer Challenge – YouConf – Day 7 – 10 (May 5 – 8)

Spent most of my time doing CSS and UI enhancements, and making the homepage look pretty. I tend to struggle with CSS and making things look beautiful at the best of times, particularly when I start to run into cross-browser issues. However, I think that I’ve come up with something that looks quite nice now – check it out at http://youconf.azurewebsites.net/

A few things I found helpful along the way…

jQuery buttons – make your buttons and links look pretty

jQuery UI comes with a button widget, which “Enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles.” It makes them look quite nice, and since I already had jQuery UI included in the project (it comes bundled with the MVC4 Internet web application template) I thought I’d use it. One line of javascript was all that was needed:

<br />$("#main-content input[type=submit], #main-content a:not(.no-button), #main-content button")<br />.button();<br />

Note that I’ve scoped it to only include items within the main-content element to improve selector performance. The before > after is below:

jQueryButton

Nice Icons

On the subject of buttons, it’s often nice to have icons for various buttons, not to mention in either your header or logo. I found a couple of sites that provide free icons released under the Creative Commons attribute licence, and so I used a few of them (and included the relevant link-back in my site footer). The sites were:

Find Icons – http://findicons.com/
Icon Archive – http://www.iconarchive.com/

I also found a very cool logo generator at http://cooltext.com/, which I used to generate the text in the YouConf logo.

Social links – Twitter, Google Plus, Facebook

It’s fairly easy to include links for the three big boys above since they provide code that you can embed either via iFrame or javascript. Unfortunately they seem to take quite long time to load though, so this can result in flickering of the icons as one populates after the other. To hide this I hacked away and ended up hiding the section with the buttons in it till 5 seconds after the DOM had loaded. E.g.

<br />setTimeout(function () {<br /><%%KEEPWHITESPACE%%>                $("#social").show();<br /><%%KEEPWHITESPACE%%>            }, 5000);<br />

I’m sure there’s a better way to do this, but I’m not sure I have time to find out just yet! Thanks to http://www.noamdesign.com/3-ways-to-integrate-social-media/ for the idea anyhow…

Azure + Source Control = a match made in heaven

Isn’t it nice when things just work? All this time that I’ve been stressing away fixing bugs and getting my site looking nice, I haven’t had a single issue with Git publishing to TFS. I simply check in my changes to my local repository as I complete features, and try to sync to GitHub a few times a day. Each time I sync to GitHub my changes are automatically pushed to my Azure website, usually within a few minutes. I’ve been able to focus on building my website and not fret over versioning or deployment issues. Phew!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s