Bootstrap to the rescue

Well, my simple PHP Database project did what I wanted it to, behind the scenes at least. The  mad styling and poor usability   certainly left much to be desired though so it was time for an upgrade. Step forwards Twitter Bootstrap. Bootstrap  is a CSS framework for styling web pages.

It’s the first time I’ve played with a CSS grid system as well really,   infact I also used a load of other ‘boiler plate’ code from ‘initializer’ too. This supposedly sets up all sorts for IE workarounds and stuff .

Anyhow here is the finished result … It certainly looks a lot better than before ! It’s also a responsive design since it’s based on Bootstrap, although on my iPad, the form doesn’t line up properly at the moment. I think that’s a job for the next version though 🙂

hillsDB 

 

There are a whole load of ways this could be improved performance- wise . For starters the HTML for the table is generated on the Server, so even though most of the table columns are hidden by default , all this HTML is sent along the wire. A better solution ( Perhaps 😉 )will be to use Javascript templating and Ajax calls with the server sending out JSON data. Having said that, the main reason it’s slow is probably because I haven’t moved the database onto my new UK2 hosting yet… it’s still on Freehostia ! I was that surprised that it still worked I just left it like that LOL .

The other obvious area for optimisation seems to be with sorting the table. The Hills Database has 9049 entries and although I’ve used an algorithm from a book that’s supposed to be an efficient approach  it’s  till  pretty slow with over 5K items.

The algorithm sorts the table rows by creating  an array, so that it doesn’t need to re-flow the DOM until the table is sorted, but it’s still very slow even on my iMac ? Hmm 😉 I can’ think why you’d want a GPX file with 9049 hills in it.. but hey you can  have that, if you are prepared to wait  🙂

facebooktwitterlinkedinrssfacebooktwitterlinkedinrss

Leave a Reply

Your email address will not be published. Required fields are marked *