You appear to be using Internet Explorer 6 or lower, which this site does not support. I recommend you upgrade to a more recent browser, such as Firefox or IE7.

Web development

Archived Posts from this Category

New Extension

Posted by Sam on 19 Jan 2010 | Tagged as: Internets, Mozilla, Music, Web development

So I got annoyed with looking up albums in RYM and decided to write something to extract the ratings into Songbird.  The result is here, it’s actually at 0.2 already because I’ve done quite a lot of work on it recently (whilst being something of a slack blogger).  Now all I need are the POTI guys to make Songbird do multiple genre tagging, improve the search/filter functions accordingly and then make Songbird much snappier with large libraries.  Then I will have the (almost) perfect media player.

Future plans include integrating the RYM enhancer script into this, once I’ve got the hang of pref management.

Assorted site woes

Posted by Sam on 24 Feb 2009 | Tagged as: Internets, Web development

In the mini-flurry of work I’ve been doing on this site recently, I’ve noticed that the loading speed is very slack.  I used the same tools as I use at work (Firebug, YSlow) to analyse the performance issue and have made a number of structural fixes that have made things a bit faster, but it seems to be the initial GET request that is taking the most time.  I’ll talk to DreamHost about it, although given that they’re in the US, it could just be that I need to look at acquiring a CDN.  Obviously I can’t afford it, but I did find an interesting article detailing how to set up Google App Engine, for free, as a personal CDN.  It’s apparently limited to files smaller than 1MB, 650,000 requests per day and 10GB of downloads – but that’s perfectly fine for 99.9% of the things that this site serves.

On a side-note, I’ve switched to a better browser detection script as the old one had serious issues with IE8.  I know that browser-sniffing is not a good thing, but it seems to work fine for now (and it’s only really for IE6/7 – everything else gets pretty much the same standards-based HTML/CSS/JS), at least until I sort out some kind of feature detection routine.

And on a completely different side-note, using this page I finally fixed the annoying console error messages that plague Firefox with Firebug and HTML Validator extensions installed.  Hurrah!

RYM Greasemonkey script

Posted by Sam on 19 Feb 2009 | Tagged as: Internets, Mozilla, Web development

Yes, that’s right.

The short story is I got annoyed at the glacial pace of feature development over on Rate Your Music, Richey showed me a couple of Greasemonkey scripts he found to enhance the experience and this one popped up as being the most useful.  Except that I didn’t like a few things about it, so proceeded to simplify the options and add a small pile of new features.

So I present my enhanced version of the RYM enhancer script.  Features:

  • Changes ratings from 0.5-5 to 1-10*
  • Sets hover (title) text of star rating to a 1-10 scale*
  • Calculates average ratings for each artist and release category (album, single, video, etc.)*
  • Enhances ratings with colour (1-4 red; 4-7 yellow; 7-10 green)*
  • Highlights rated, owned or wishlist items in both custom charts and lists
    • Rated items are highlighted in blue, owned items in yellow, wishlist items are red.
    • Each type of highlight can be switched on or off depending on user preference.
    • If both owned and rated highlights are selected, owned items which have also been rated are highlighted in green.
    • If both wishlist and rated highlights are selected, wishlist items which have also been rated are highlighted in purple.
    • Calculates the total number of each different highlighted item type at the bottom of the page.  This is performed dynamically based on the highlighting preferences.

Starred items are features carried over from the original version of the script.  Highlight colours have been carefully chosen to allow readability, and also to provide a colour combination metaphor when rated & owned, or rated & wishlist, highlights are selected.  You can’t own an item and have it on your wishlist, so there is no combination highlight for that.

There are certain circumstances where releases that you have rated will not be highlighted.  This is because RYM allows you to rate multiple versions of any given release, but doesn’t provide a user friendly way to manage these ratings with respect to the release as a whole.  So if you have rated a release version which is different to that displayed in a list or chart, that album’s entry will not show up as having been rated.  Most annoyingly, this also happens when looking at artist pages; the way I currently get around it is to rate multiple versions of the same album, which achieves the desired results but can be annoying as you are rating the same release multiple times.  I might see if I can provide a better fix to this issue with an extension to the script.

Needless to say, this requires Firefox and the Greasemonkey extension.  Go get it :)

New Wordpress Widget/Plugin

Posted by Sam on 14 Jan 2009 | Tagged as: Internets, Web development

I wanted to find an easily customisable search box plugin for my blog, as the default one is a bit boring to say the least.  I couldn’t find one that did everything I wanted, so I set about writing my own.

Features:

  • Customisable title
  • Customisable button text
  • Choose between text button or image button
  • Customisable margin between button and text box
  • Choose between small or large image buttons – small image button is designed to be used with a negative margin to place the search button inside the text box
  • Info boxes in the admin area explaining everything
  • Change the default images for your own, with optimum margin for ‘inner button’ case dynamically calculated and displayed in the admin area

This is based on the rather obviously named Search Widget with Title, and has been fully tested on Wordpress 2.7.

So, here it is…Advanced Search Widget

Instructions: Unzip the download, upload the directory within to your plugins directory.  Then, activate the plugin and add the widget to one of your sidebars.

JS++

Posted by Sam on 21 Sep 2008 | Tagged as: Internets, Web development

The recent massive improvements in JavaScript performance are absolutely awesome for a number of reasons:

  1. When I use a Web app, it will be much faster, and more responsive :)
  2. Microsoft and Adobe should be scared, as JS may just prove to be the true open-source competitor to Silverlight and AIR.
  3. It will pave the way for more advanced, cross-platform Web apps.
  4. Hopefully, as the speed difference between old and new browsers becomes more apparent, it will speed up the switchover from the horrors of IE6.  New apps will start to support IE6 less and less, as the performance hit will be unacceptable.
  5. It could help attempts to piggyback certain technologies that Microsoft will probably never support (such as Canvas), onto IE.  Of course, this assumes that MS keeps up with the curve regarding JS performance.

And on a completely unrelated note, I found a cool page that beautifully sums up the options for IE when it comes to exploiting CSS hacks.  Whilst I knew most of the hacks on the page, this inline rule was quite interesting:

style=”*background:red!important;background:white!important;background:blue;”

The first background rule applies to IE7 only, the second to all other (more advanced) browsers, and the last one to IE6 only.  While inline CSS is not good for obvious reasons, I have found this hack to be quick and useful when restricted by bad design in some of our older sites.

Edit: This can also be used in external CSS files, as shown by this neat tutorial.  Furthermore, it shows that we can combine the star hack (applies to IE6 and 7) with the underscore hack (applies only to IE6), to produce a more streamlined version of this style attribute:

style=”*background:red;background:white;_background:blue;”

New Job :)

Posted by Sam on 18 Dec 2007 | Tagged as: Life, Web development, Work

Right, I haven’t blogged for ages so here’s the f’shizzle:

I recently moved from Edinburgh back down to Sheffield, staying at Richey’s while I started my job and found somewhere for me and the girly thing to live… I’m working for School Trends doing 2nd Line Web Technical Support, basically fixing stuff that the customers (mainly schools) have problems with, in managing their websites. What’s cool about it is I can try my hand at pretty much anything that helps to make the software or customer experience better, which is quite liberating, although the requirements of the position will relegate my coding explorations to only a few hours a week. I’m still ultimately aiming to be able to do Web App development, so any R&D or general developmental experience at School Trends will be great and I’ll jump on any chance to make their software better and help with redesigning the UI.

The new abode will be in Ranmoor, which is particularly poncey – as is the flat :) It’s about 45-55min walk out of town, from what I can tell – which isn’t quite as close as I originally wanted but it’s an awesome area and the flat is seriously phat. It’s really hard to get decent flats in nice areas much closer to town. Hopefully I should have all my junk moved up from dearest mama’s by early January too.

This site hasn’t had much done on it at all recently besides finally fix the menu to a point where I’m actually rather pleased with it; I am however getting a lot more confident with PHP & MySQL so it should take less time to roll out things that I want put on the site. The quote generator test I did worked fine, which means that the random image generator will take only about 5min to do, given that the code is quite basic and pretty much the same thing. The main thing I will be working on before both of those are live is the login system, I need it to be as close to the LoginView .NET control as I can get it in terms of functionality. SEO is also a priority; I really need to get my Google listing sorted. Hopefully by the time I’ve got somewhere with those I’ll have some more content (I know, it’s crazy talk…actual content on my site!), and then I’ll probably do that AJAXy Photo viewer along with some Semantic Web stuff.

Edit:

Little did I know that being entirely responsible for the development of a CMS, as well as most technical support issues for over 200 customers, would completely demolish my appetite for spending time developing this site.  A few months ago, one of the Mozilla developers blogged about losing his interest in developing Firefox extensions due to spending most of his working day hacking on the ‘fox.  I totally empathise with this, although I don’t plan on giving up on this site just yet.  So:

  • Photos will happen eventually, although I’ll probably grab someone else’s viewer code and customise it a little.
  • Login system has been dropped as it was rather ambitious and probably would not have been used much anyway.
  • Changes to the design are now mainly restricted to CSS bug fixing.  If/when I get bored of the design, I will either make gradual changes or, if I want a fairly substantial change, will just pick a nice WP template.
  • I can’t be bothered to make this site work in IE6, I spend enough time doing that at work.  Anything to hasten it’s demise…
  • The GridView tutorial won’t be happening – I’m not in possession of it, I’ve tried numerous times to get my hands on it in some form but to no avail.  It is a pity as I spent ages on it and it would have been a great addition to the site, along with a good way to reacquaint myself with .NET, but ’s been quite a while so I’ll just let it go now.  I have some other things in the pipeline to help flesh out the Downloads page.

—————-
Listening to: Kayo Dot – The Antique

Update #64,587

Posted by Sam on 09 Nov 2007 | Tagged as: Web development

Just a few things changed:

  • New menu – not finished but looking a lot better. Found a good workaround for the IE7 ‘current page’ CSS issue Edit: More menu improvements but the IE7 current page tab appearance (z-index) bug is back. Annoying. Edit #2: Finally fixed it for good with an overlay image and some CSS tweaking – this seems to be the way that most sites utilising similar menus make them work in all browsers.
  • JS animations courtesy of JQuery . House now fades, menu tabs are ‘pulled up’ on hover, content togglers slide nicely
  • Minor improvements to house image
  • Content ’sanitised’ to take account of potential humour deficiency
  • Sidebar pics added – some of these will change, and some will be randomised once I finalise how best to go about hooking a PHP image randomisation routine up with the existing Smarty templates.
  • Some minor validation errors fixed
  • More CV tweaking

Whilst I’m thinking about IE7 CSS bugs, I found this great page with loads of bug reports and testcases. Not too many workarounds, but it’s nice to know that the bizarre behaviour you’ve seen in IE7 has actually been reported by someone else as a bug. The site also has sections on IE6, Opera and Mozilla.

Next thing to do is fix the CSS and JS generation script so that it generates the files less frequently – At the moment lots of hits will probably result in a dead Dreamhost server.

Browsers are weird…especially Internet Exploder.

Posted by Sam on 13 Oct 2007 | Tagged as: Web development

Some more updates to the site:

  • About page finally has something decent on it – blurb about me (strangely enough) and a personalDNA swatch script, slightly modified to fix an annoying gap in my swatch and to ensure the output validates.
  • Minor menu tweaks
  • Minor CV tweaks
  • Minor SST page tweaks, example tables now look and play nicer.
  • Fixed a couple of obvious silly errors
  • Fixed Copyright element adjustment script for small pages in IE7 and Opera

The last item on the list was interesting. For some odd reason, my JS that worked perfectly well in Fx and Safari was failing miserably (without an error) in IE7 and Opera. The script basically just retrieves the following element with getElementById:

<p id=”copyright>Copyright ©2005-2007 Sam Maister, All Rights Reserved.</p>

…before adding extra padding (via inline CSS) to ensure that it is at the bottom of the page, if the content is too small to push the element to the bottom. So I tried a few things out such as changing the element to a div, removing the existing applicable CSS rules, using ye olde document.all.getElementById, etc. None of these worked, and I quickly realised that the existing method did actually work, just not on that particular element. So I tried a couple more things before changing the id of the element from ‘copyright’ to something arbitrary; I didn’t expect this to work at all, but work it did. To test my theory, I changed the id of a different element to ‘copyright’ and that element was now immune to the script…bizarre; for some reason IE and Opera (maybe through some misguided attempt to be more IE-like?) seem to ignore any attempt to retrieve an element with an id of ‘copyright’ through getElementById. Googling it came up with nothing, but whatever. Now I have ‘copyright_notice’ and everything is peachy.

Here’s a simple testcase:

inline JS – var copy=document.getElementById(’copyright’);
var notcopy=document.getElementById(’this_copyright_bug_is_stupid’);
copy.style.color=’red’;
notcopy.style.color=’red’;

Clicking here should change both of the following text lines red. Click here to reset the colours:

I have an id of ‘copyright’.
I have an id of ‘this_copyright_bug_is_stupid’.

Edit: Another reason I should really be using jQuery for all of my JS stuff; this bug doesn’t occur when you use $(”#copyright”).css(”color”,”red”); instead of the clunky code above.

Blogtastic…once more

Posted by Sam on 11 Oct 2007 | Tagged as: Life, Web development, Work

Ok…so I’ve been rather silent here. I’m still alive, currently living in Edinburgh with my new lady (who is the best thing to happen to me in a very long time). The MSc and DoD (Dissertation of D0000000m) have ended and I am sans job. I’m involved in a concerted effort to get a position in web development as I’d like to work in an area that

  • I’ve always been fascinated by
  • I actually enjoy
  • Isn’t science (I’m fed up with research after the DoD and want to see what else there is)

The site has come along a great deal since I last wrote something here, with eleventy billion bug fixes and extra features, and some actual design work has happened to ensure that it doesn’t look like a pile of junk. It’s far from finished – I have several little bits yet to do, along with the mildly irritating task of getting it to look nice in the abomination that is IE6. In fact I would have done the IE6 testing already if M$ hadn’t made it impossible to run it in Vista; as it is, I have to install 1.5+Gb of virtual OS (XP SP2) to get anywhere near IE6. So I’ve decided not to bother and to gopher the prettiest Linux ever (Kubuntu) and WINE instead. After these job applications. Job > IE6 compatibility.

Anyway, here are the main recent improvements to the site:

  • Cool PHP breadcrumbs script added to generate crumbs from directory structure
  • Even cooler browser-specific, dynamic PHP generated CSS and JS files – this was a lot easier than I thought it would be to implement. I’m sure this puts a hefty load on the server, but I can’t see it causing any problems, unless I start getting lots more hits.
  • Tutorial for my scrollable, sortable table – hopefully *fingers crossed* I can get my GridView tutorial up here too. I also have some Perl scripts to put up, just data juggling stuff but some budding computational chemist out there might find them of use
  • Clicky-sprouty hidden JS divs for code and suchlike – sadly not yet working in Opera, but that’s not so bad (sorry, Opera users)
  • Vastly improved menu
  • Much better Smarty code, making it far easier to change (and add) pages to the site
  • Smarty templates seamlessly hooked into blog files through some carefully placed PHP includes – again a lot easier to do than I anticipated
  • Nicely formatted CV page that kicks the bottom of my existing CV – I will back-port the changes to the document version shortly and put it up here for download
  • Contact page that works and works well, I’m sure the JS validation script can be improved but it’ll do for the moment.

The Wordpress update to 2.3 didn’t work (both 1-click & manual) so I’ll stick with 2.2.1 until I figure a workaround (probably best backing up, deleting and re-installing). More to come.

July…

Posted by Sam on 14 Jul 2007 | Tagged as: Life, Web development, Work

Is a bit of a mad month so far.  My MSc dissertation at Eli Lilly is starting to come together, which means it’s starting to get hectic as I’m trying to make sure I write things up as the results appear.  I’ve started applying for jobs too, anywhere and everywhere so who knows where I will end up.  I’m just getting to know this area so it would be nice to stay here, or go back to Sheffield which I really enjoyed.

Just done some more work on the site, the development version now has a fully functioning AJAX throbber which I will be utilising in my AJAX picture viewer.  I hope to get the first (quite limited) version of the site up and running this week.

Next Page »