Newcastle Coders Group Talk - September 2011

Some of the notes from the talk I gave on speeding up websites.
The coders group meets on the first Wednesday of the month at Newcastle University. I attend them regularly and recommend them.

YSlow

• Addon for Google Chrome or Firefox
• Rates your website from 0-100 for performance
• Uses rules defined in Yahoo Developer Network
•  Details what you should do to improve performance and reasons why
• Great for learning and pushing you to get a competitive score
• http://developer.yahoo.com/performance/rules.html

Spritesheets

• Websites can use a lot of graphics and images
• Best results achieved when you have merge multiple images into a single file. Saves on network traffic.
• You can then split the single image back into separate images using css
• This is the best tool I found, open source, it allows you to use the code your own projects
• http://spritesheetpacker.codeplex.com/
• Example buttons and country flags – 283 images in single file
• http://www.physiotherapyexercises.com/Sprite-btn.png
• Warning for IPad and Iphone – images do not work in > 1024x1024 square
• Put in special logic in my extension to split it into separate images

Javascript and CSS Analysis

• Can run your javascript and CSS through analysers, these point out potential problems, and helps make your code run faster
• Javascript
• JSLINT - http://jslint.com/
• JSHINT - http://jshint.com/
• CSS
• http://csslint.net/

Minification

• Javascript, Css and Html has a lot of text that isn’t required in production
• Removes comments, extra spaces, swaps out variables with shorter names
• You should always keep your original code, as the new code can be quite unreadable
• Many online tools that you can use
• JSMIN http://www.crockford.com/javascript/jsmin.html
• JSCOMPRESS http://jscompress.com/
• I use the tool provided as part of the Microsoft Ajax toolkit, just because it is done via a dll and can be automated
• http://aspnet.codeplex.com/releases/view/40584
• 25% saving on CSS, 40% saving on javascript
• Catenate multiple javascript/css files into single file

Caching

• Many of the latest browsers allow caching using a manifest file, this allows you to run your website offline and also minimise repeated downloads and minimize traffic
• Text file, details files that should be cache
•  http://diveintohtml5.org/offline.html
• http://www.physiotherapyexercises.com/ExerciseData.appcache

Google Analytics

• Easy way of determining what your users are doing on your website
• Can be customised with your own events so you can track exactly what your users are doing
• http://www.google.com/analytics/
• Also works for iphone, windows phone etc

HTML5 and other Library Files

• jQuery - http://jquery.com/
• jQueryTemplates - http://api.jquery.com/category/plugins/templates/
• jQueryMobile - http://jquerymobile.com
• HTML Boilerplate - http://html5boilerplate.com
• KnockoutJS - http://knockoutjs.com/
• Modernizr - http://www.modernizr.com/
• YepNope - http://yepnopejs.com/

Google Chrome Developer Tools

• Google Chrome has a lot of features that are useful for developers
• Page speed (similar to yslow)
• http://code.google.com/speed/page-speed/
• Console – great for logging
• Elements -  Great to see elements, Css applied
• Network -  See files loaded, timing
• Resources - Storage, Cookies, Application Cache
• Scripts - Great for debugging - Add breakpoints etc

Presentation for Newcastle Coders Group

Notes of my presentation for the Newcastle Coders Group Tonight.

Topics :

• March 2011 - Lizamoon SQL Injection Attack
• Developing Apps for Windows Phone 7
• jQuery Mobile, UI and Templates

Physiotherapy Exercises for Windows Phone published

Well I finally managed to get my first windows phone application published.  This allows you to search almost 1000 exercises suitable for people with various forms of spinal cord injury and other neurological conditions.

It is completely free to download.

Features include

• search by condition, exercise type, body part, equipment available and age
• images are customised by condition, age and orientation
• ability to save exercises into booklets
• simple videos demonstrating key concepts
• listen to exercises on the go
• emailing booklets to others
• find other physiotherapists, hospitals and more via integration with bing maps

The challenge was to write the majority of it so I could share code with the desktop silverlight version as well as the old web version.

The desktop version uses the silverlight pivot viewer control.

Key bits that I found useful

• Long List Selector from the silverlight windows phone toolkit. The gallery and list views of the exercises displays up to 1000 images in a list, and this handles it very well. Using a normal listcontrol was not practical when running on a real phone.
• The Autocompletebox from the toolkit had issues with positioning when it was inside a listcontrol. So I had to put in hacks to get this to work. Jeff Wilcox commented on this recently.
• The program allows the playback of exercises, so you can listen to them as well. This uses the microsoft translate api, much of the ideas coming from the loud tweets demo.
• The mapping and geolocational options were handled by using bing maps api.
• The twitter links were handled by using the twitter api.
• I found the best way to take screenshots for the marketplace is using the snipping tool.
• I wanted the users to be able to report errors to me automatically, I found this post helpful. I also wanted to use a custom message box.
• To give better information on usage, I can recommend the silverlight analytics api.

Hopefully over the coming weeks, I can blog about some of the other things I learnt from this. Feel free to post and suggest topics.