Wiki-read-easier

Have been using Wikipedia a lot recently, the text ran too wide. Fixed it up a little bit with some CSS:

You'll need to create a Wikipedia account, then go to Preferences > Appearance > Shared CSS for all themes (common.css) and paste this in.

You might want to adjust the height for the #toc (table of contents). 500px suits my screen.

div#content { font-family: Helvetica; font-size: 18px; background-color: white; border: 1px solid #A7D7F9; color: black; direction: ltr; margin-left: 30% !important; margin-top: -1px; padding: 1em; width: 40%; } #mw-panel { padding-left: 0.5em; visibility: hidden; } #toc, .toc, .mw-warning { left: 10px; position: fixed; top: 80px; } #left-navigation { left: 10px; } #right-navigation { left: 30%; margin-top: 2.5em; position: absolute; } #p-personal ul { list-style-image: none; list-style-type: none; margin: 0; padding-left: 29%; } table#toc.toc tbody tr td > ul { height:500px; overflow-y:auto; }

This guy spent a bit more time than me on his skin, much nicer:

/*
 * Style by Lupurus
 */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("wikipedia.org") {

}

@-moz-document regexp("(.*wikipedia.org/wiki/(?!.*:)(?!Main_Page).*)|(.*secure.wikimedia.org/wikipedia/../wiki/(?!.*:)(?!Main_Page).*)") {

#firstHeading {
    width: 800px !important;
    text-align: center !important;
    font-size: 4em !important;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-weight: bold !important;
    text-shadow: 4px 4px 0 #DDD;
}
#firstHeading i:first-child {
    font-style: normal !important;
}
#firstHeading, h1, h2, h3, h4 {
    font-family: Palatino !important;
}

#bodyContent {
    width: 800px !important;
    text-align: justify;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-family: Palatino !important;
    font-size: 12pt !important;
}

/*
 * border around the article
 */
#content {
    -moz-box-shadow: 0px -10px 30px #BBB;
    -webkit-box-shadow: 0px -10px 30px #BBB;
    box-shadow: 0px -10px 30px #BBB;
    margin: auto !important; 
    width: 800px !important;
    padding: 80px !important; 
    padding-top: 20px !important;
}

body {
    background: #FFFFFF !important;
}

#content {
    background: #FFF !important;    /* removes the border of the menu */
}

/* margins */
.infobox, .tright, .vertical-navbox {
    margin: 0 0 0.5em 2em !important;
}
.tleft {
    margin: 0 2em 0.5em 0 !important;
}

/*
 * hide things
 */
#mw-head, #mw-head-base, #mw-page-base, #footer, .editsection {
    display: none !important;
}

#mw-panel {
    opacity: 0;
}

#mw-panel:hover {
    opacity: 1;
}

/*
 * numbering of the headings
 */
 body {
    counter-reset: headingOne;
 }
#toctitle h2:before {
    content: "" !important;
    counter-reset: headingOne;
}
h2 {
 counter-reset: headingTwo;
}
h2:before {
 counter-increment: headingOne;
 content: counter(headingOne) ".";
}
h3 {
    counter-reset: headingThree;
}
h3:before {
    counter-increment: headingTwo;  
 content: counter(headingOne) "." counter(headingTwo) ".";
}
h4 {
    counter-reset: headingFour;
}
h4:before {
    counter-increment: headingThree;
    content: counter(headingOne) "." counter(headingTwo) "." counter(headingThree) ".";
}
h5:before {
    counter-increment: headingFour;
    content: counter(headingOne) "." counter(headingTwo) "." counter(headingThree) "." counter(headingFour) ".";
}

} 

Ten years of road deaths (visualisation)

BBC have plotted the road incidents resulting in death for the last ten years in the UK.

I'm sure I've come across this before, but it's a good visualisation.

Simple, meaningful and accurate.

Link: http://www.bbc.co.uk/news/uk-15975720.

Interface evolution - Football Manager

This is what will hopefully be the first in many posts on a particular evolving interface - an interface that people use, offline or online. I'm not quite sure what I aim to be talking about, but they'll basically be to express my thoughts and share my observations on what I think are interesting interfaces.

SVG-based, linked-data-driven chart widgets

In Feburary I was asked to have a pop at visualising some spending data for some local UK councils. The data was in linked data format (RDF/Turtle) - so stored in a RDF store somewhere and had the Linked Data API layered on top (the Puelia implementation).

The brief was to build an open-source, interactive, cross-browser dashboard of widgets; that would allow the comparison of council's spending data, say, per month.

After a little time spent researching, I came to the conclusion that RaphaelJS (an open-source JavaScript vector library) would fit the bill for this project nicely. The documentation wasn't great (I'm used to that though as I've been using theJIT library for previous visualisation work), but understandable enough to pick some of the demos apart and get the hang of how things worked within a few days.

The great thing about RaphaelJS is that it's simply a drawing library, so you can create a static SVG image of a banana or you can create a animated, multi-coloured, shape-shifting, real-time rotting banana, thanks to being able to manipulate and listen to events on the SVG DOM elements that form the vector image.

YouTube reloading on fullscreen

In the last month I've noticed that when I switch to fullscreen during a YouTube video - it has to rebuffer the whole thing again.

Anyway, I've found some more options that can be tweaked - Go to YouTube.com > "username" > Account > Playback settings - then switch to "I have a slow connection". You can manually switch to a high quality version of the video when watching it, but this option stops this from happening automatically.

[caption id="attachment_159" align="aligncenter" width="300" caption="YouTube settings"][/caption]