Tarmo Turunen Kontiotie 5 A 7 90530 Oulu Finland

About Art...

Clip art from About.com, Barry's Clip Art, and www.amgmedia.com, and OpenClipArt (like the one in the top left or right corner of this page...an Inkscape composition made of three svg images, filtered and then exported as a bitmap after further modifications in GIMP). Some art © by Tarmo Turunen, the rest © their respective owners.

About CSS...

CSS includes browser specific versions of CSS code. To be specific, -moz-, -o-, and -webkit- variations of CSS3 stuff. It is for this reason that CSS does not validate. CSS is used more as an enhancer. The pages should work without CSS. A more recent addition is Normalize.css, an alternative to CSS resets.

About HTML...

There are several HTML5 tags used. In addition, some meta tags are there for the benefit of my current mobile phone of choice. HTML does not validate using W3C's validator. hCard, a microformat based on vCard, is used on my CV pages and here (above). The old pages are still available under the old directory.

About Javascript...

The basic goal is to avoid using inline Javascript. Javascript as it is used is more of an enhancer than necessity. Pages should work without Javascript. Links in the below commentary valid as of October 2nd, 2014.

The pages rely on window.js that includes some code from other parties than me. Most often used to be the addEvent function from QuirksMode. Not without flaws. For more in-depth stuff see the comments and links in the article. It is now replaced with jQuery's equivalent functionality. jQuery version is 3, so browser support changes accordingly...but otherwise pages should work.
Then there is the document last modified script that is based on this example from irt.org. Because some browsers do not support it at the time of doing this stuff these browsers return an empty string. These two take this information from the Last-Modified header and basically return the current date, perhaps (like Chrome and Safari, or in a format not compatible with the current script)? Will be looked at a later date.
wmastinit is my own creation. It modifies the navigational page link list according to the title of the current page. If the title of the page matches the title of link in the list, that link is stripped of link tags and made into a text string. In addition it includes the last modified status mentioned above.

pageStats and svgLine generate the four colour SVG image at the bottom of the pages. The colours represent, in order, the following segments: HTML, images, CSS, Javascript. Their sizes indicate how much of each is used to display the current page. Needs more work to work out the kinks. This used to be in windows.js file, but now moved to a separate pagestats.js file.

While windows.js has until now served as a collection of all javascript stuff, the file currently contains stuff that is used by all pages. Page specific stuff is contained in a page specific javascript file. This naturally increases load times, but maintaining the code is easier.

about.js utilises Chart.js to generate the bar chart below based on the data gathered by a JSON query. Work in progress.

betty.js has been partially refactored — it still needs some work for some ideas I have. Only rndImgTransform is left of the previous effort as such. The other two functions are rewritten for figure and figcaption, simplifying the underlying HTML. randomImage looks at the images and randomly selects one to display in the figure element, with the image's alt attribute content in the figcaption element. clickedImage selects the clicked image to display in the figure element. If the image displayed is wrapped in a link, the link is copied with its accompanying image element. Only the figure image's link will work as expected (other than images links work, too).

harn.js contains only one function: makePullQuotes. It examines the page for span elements, copies their content, and makes an aside element of the content after the parent element of the span in question with appropriate class attribute name. Colourful in Gecko and Webkit based browsers, monochromatic in others. Or totally monochromatic...the result depends on the selected stylesheet.

Comparison of the old version and the new version

Space taken by each version. The old version actually includes the new version, as well - the same pages are present in both. The difference is that the new version has the (old) files that are actively maintained, whereas the old version stays as it is. HTML includes HTML pages, Images includes various image formats (GIF, JPEG, PNG, SVG), CSS is CSS only, and the same for Javascript. Other includes the rest: compressed files, text files, php, and other files. Values are in bytes. If there is no chart below it means that the values returned are empty or an error has occurred.

HTML Images CSS Javascript