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
- 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/
- 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
- 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
- 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 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
