Well, the point of Unhosted modules and being explicit about your data schema in modules is so that other developers can reuse them, to make it possible for users to switch between frontend apps that consume the same kinds of data.

Well, duh*.

But there seem to be loads of people making the same kinds of apps over remoteStorage (mostly todo apps or notetaking kind of things) and making their own modules every time!

If one module doesn't offer everything a dev needs for their new app, they should hook in anyway and extend it with their own module on top. That should be pretty straightforward.

So I love LiteWrite, but for notetaking maybe I need a few more organisational facilities. McNotes looked awesome and I was poised to start using it. Then I saw Laverna offers remoteStorage support and that is pretty much a straight up port of Evernote (but ten times as sexy), with tags and notebooks and everything!

When I switched from Evernote to something to something to Springpad (the ones in between didn't do the job, and I've since forgotten what they were) I had all kinds of mess importing my Evernote data, and a lot of it was done manually due to limitations of the various importers. If I'd actually started storing anything useful in LiteWrite, and wanted to move to McNotes and then to Laverna I would have gone through the exact same process... which is a horrible thought, because that's one of the problems remoteStorage is supposed to solve.

So, please, if you're making an app over remoteStorage, look at the other modules that exist first, and use them. And if you're making a new module, please publish it! Otherwise we're missing a butt-ton of opportunities for giving users choices about their UIs, and for mashing things up in amazing ways.

(On that note, I'm keeping a list of Unhosted mashup ideas).

* Although this is kind of obvious, I explicitly came to this realisation after it occurred to me, when trying to work out how to make schema definitions conform to proper JSON-LD, that you go to all the trouble of defining your data schema in your module, but then there's nothing to stop you just storing any old object. You can validate an object against a schema, but there's nothing to do this by default. So I thought why then do I need to bother with this JSON-LD schema faff if I can just store prefixes at object creation time? Then I remembered other people, and reuse and stuff. It took a surprisingly long time (like an hour of frowning) to get to that though. Especially surprising given that all I've been thinking about this evening is Linked Data. Clearly all this JavaScript is obscuring coherent thought.

If people release their models and data schema for remoteStorage apps, we can mash them up with much ease! I'm maintaining a list here of ideas that I may or may not get around to implementing:

• Notetaking app + bookmarking app = WebClipper functionality and/or annotation of webpages
• Todo app + calendar app = duh.

Since most of the early Unhosted apps are life-organise-y ones, can we just have a dashboard that combines everything? Can we call it SORT YOUR LIFE OUT?

An update; sort an explanation of why I haven't posted anything recently.

I really want more control over my blog data.

I think Linked Data is great and the only way to make it more useful is to use it more.

I'm sick of Blogger's JavaScript heavy wysiwyg editor that doesn't work properly on low-bandwidth connections, or on my Kindle in emergencies.

I want to author blog posts in markdown, add whatever metadata (like tags) I need, and publish them via whatever means I have to hand. From a browser, from a text editor and command line, from an email, from a tweet?

So I'm working on Slog'd: Semantic Blog from Markdown.

I already wrote a wee Python script to convert my existing Blogger posts to linked data: Blogger2LD. I'm making a web interface for this so you can do yours... and I'll do it for Twitter, too. Then who knows what else will follow.

I'm still twiddling with Slog'd itself - which I'm writing in PHP and storing triples in a MySQL database using the ARC2 library, because I want anyone with any bog-standard shared hosting and no understanding of linked data to be able to use this. You can watch progress on Bitbucket.

I've been blogging every detail as I go along. These are in the posts directory in the Slog'd repo, rather than on here.

For easy navigation of my gibbering.

First impressions of Madrid (6th and 7th, #travel)

Mon 8th: Research in theory and practice, and where on earth am I?

• Notes for keynote by Frank van Harmelen (questions we couldn't have asked 10 years ago)
• Notes for Introduction to Linked Data by Mathieu D'Aquin
• Notes from invited talk by Manfred Hauswirth (linked data streams)
• Notes from poster session

Tue 9th: Collaborative ontology engineering and team formation

• Notes from Lynda Hardman (telling stories with media)
• Notes from Natasha Noy (ontologies and Protégé)

Wed 10th: Practical semantics, and human nature.

• Notes from Harith Alani (Social Media Analytics with a pinch of semantics)
• Notes from Tommaso Di Noia (recommender systems; tools and techniques)

Thu 11th: Social semantics and serendipity

• Notes from Fabio Ciravegna (situation awareness via social and physical sensing)

Everything from Friday 12th July

• Notes from Peter Mika (Yahoo!; semantic search)
• Notes from Raphael Troncy (semantics at the multimedia fragment level)
• Notes about our mini-project (Evaluating Serendipity)
• Summer School for Semantic Wizards (video)
• A cruel joke, a great party and a late night.

Final impressions of Madrid (14th, #travel)

The 10th Summer School for Ontology Engineering and the Semantic Web

Sunday

Arriving by train into Cercedilla, north of Madrid, we immediately encountered other confused looking folk with poster tubes.  So we shared taxis (EUR 10) from Cercedilla station to the summer school residence further north, in the forest.

After getting keys for our pleasant, single, en-suite rooms, arrivals congregated in the shade by the building  to introduce ourselves.. Again, and again, and again, as new people continuously arrived over the space of a few hours.

A really broad mix of people are here in terms of nationalities and places and levels of study, but I still haven't quite got used to the fact that answering 'Semantic Web stuff' is not specific enough in this crowd, when someone asks you what your research is about.  Nobody needs convincing that these technologies are useful!

Later we received schedules, maps, ill-fitting t-shirts* and very helpful name badges, and headed for dinner at the bar down the road.

As is traditional when I write about my experiences in new places, I will describe the food every day.  It has become apparent, at this residence at least, that variety of ingredients is not ordinary, so in this respect meals are simple.  Dinner that first night started with a salad (lettuce, olives, tomato, onion, shredded beetroot and a single slice of hard boiled egg; no dressing), followed by - for the majority - slices of meat (beef? Pork? I dunno..) and fries.  Mine was a plate of mushy green vegetables with a little seasoning, that was pretty tasty.  Dessert was a single pear, delivered with ceremony, but otherwise unadorned.  Healthy, at least.

Yet we were all (those I sat with at least) were left feeling a little unsatisfied.

I shared a table with a French, Spanish, Italian and Irish guy.  Conforming appropriately to stereotypes, and setting up reputations for the rest of the week, the French and the Italian shared the bottle of wine on the table; the rest of us went without.

I returned to bed after a couple of hours of socialising and enjoying the cool air in and around the bar.

* For next year, they could ask for t-shirt sizes when they ask for dietary preferences?

Monday

The day started early, and with no hot water or wifi for anyone.  Breakfast was combinations of sweet pastries, coffee, tea, juice and bread.

Punctuated variously by coffee breaks, the learning began in earnest.

During the introduction by Mathieu D'Aquin, I found out that I am one of 53 students selected out of 96 applicants to attend this year's Summer School of the Semantic Web!  I had no idea it was that selective, or that there had been that much competition.

The first keynote was by Frank van Harmelen, about all the Semantic Web questions we couldn't ask ten years ago.

Slides:

Semantic Web questions we couldn't ask 10 years ago from Frank Van Harmelen

Frank started by saying that the early Semantic Web vision has morphed into the more manageable vision of a Web of Data, or a Giant Global Graph, and outlined the principles of the Semantic Web as they appear to stand at present:

1. Give everything a name (entities).
2. Relations form graph between things.
3. Names are addresses on the Web (so we inherit properties of Web like AAA).
4. Add semantics.

Frank pointed out the advantages of the fact the Linked Data crowd, grown naturally and not designed, is now so big we don't know how many triples it contains, nor how fast it is growing.  Companies and organisations (like Google, NXP, BBC, DataGov) are using Semantic Web technologies to achieve their own ends, for a variety of different use cases, without caring much about the Semantic Web, and this is contributing to the growth.

This growth has given rise to a number of research areas that were impossible to realisitically ask questions about ten years ago, including self-organisation, distribution of data, provenance, dynamics and change, errors and noise (how to deal with disagreements).

Frank asserted that rules and structures, algorithms and patterns in data, exist whether we are looking at them or not.  He used the analogy that OWL is our microscope, and it may be the tool that distorts our vision of the information universe rather than properties of what we are looking at (for example, structures in data presenting themselves well in some domains but not others).

He went on to promote the roll of the Informatician to be to test theories, hypothesis and falsify, as scientists rather than engineers.  To discover, rather than build.

I struggle with this view of the world, and feel instinctively that theory and practice are intrinsically linked; one can't exist without the other, not just in the grand scheme of things, but in day to day work and research.  This is one of the main points of contention with my own PhD, and I've no doubt there will be many more blog posts about this issue in the near future as I reconcile my need to create something immediately useful with the necessity of producing a contribution to knowledge at large.

See my raw notes here.

We had an Introduction to Linked Data by Mathieu D'Aquin (raw notes here), followed by a workshop.  We wrote SPARQL queries to populate a pre-written web page with information about Open University courses, sub-courses and locations thereof.

Lunch, similar to the previous night's dinner, was a starter salad, an entire half chicken (or something) plus fries for the carnivores and the most unappealing risotto of my life for (not that I'm ungrateful, but I have never been unable to finish a meal due to boredom before).  I went for a walk with some others to grab some fresh air before the afternoon's work, and missed out on watermelon.

Manfred Hauswirth presented some really exciting stuff about annotating and using streams of data.  Particularly challenging is how to integrate this with static data and make inferences over the lot.  Streams include sensor data, as well as ever-flowing social media streams for example; anything that changes over time.

They've built some systems to process this kind of data, and one of them is available as middleware.

My raw notes are here.

In the afternoon we had a poster session, where all participants pinned up posters about their work, and discussed at length with anyone who was interested.  Here's evidence that I participated.

And here's Paolo's:

I wrote a few notes about things from other peoples' posters that I need to look up.

The main feedback I received was about making sure I focus, narrow down my topic, and concentrate on some evaluatable deliverables that are PhD-worthy.

Questions like (paraphrasing) "why should we care about digital creatives?" threw me, because I thought the obvious answer - that they are people too, Web users, technology users, contributors to culture and an ecosystem of digital content and data - was apparently not enough from an academic standpoint.

I was simultaneously told to focus more, and to explain why the problem I'm trying to solve is applicable to all domains, not just digital creatives.  But some of the problems I'm looking at have been (or are being) solved in other domains (like e-health, biological research, education) and the reason what I'm doing is interesting is because none of these solutions quite work for digital creatives, and I want to find solutions that do, and try to figure out why.

I'm still stuck in some sort of struggle between theory and practice; thinking and doing.  And the long-standing problem of how to decide which doing actually worked.

I've started scribbling notes about the narrowing down problem.  I'll need to have this figured out before my first year review in August anyway, so stay tuned for another post all about it.

Then I sneaked off for a nap.

Dinner at the bar again; the usual salad, plus some eggy fish thing for most.  I got a plate of artichoke.  Artichoke is great, I love it, and I'm all for simple meals.  But I remain unconvinced that a plate of only artichoke constitutes an acceptable level of effort on the part of caterers.  And the sheer quantity made it start to taste a bit funny after a while.  But not to worry; we rounded off with a solitary peach apiece.

Further socialising, and appreciation of the night sky, before returning to bed write blog posts.

I'm super excited and inspired by the talks, work I've heard about so far, and the atomsphere of the place.  I'm excited to learn a helluva lot, and remind myself that I'm not facing impossible problems, and am not facing many problems alone.  I remember that I am instinctively passionate about the Web and the possibilities it holds (and indeed has already realised) for the empowerment of individuals.  I remember how lucky I am to be able to sustain myself through studying something I love so much, and to have the potential to make a change, and through my work maybe even facilitate others to be able to make a living doing what they love, as well.

Change of plan.  Trying to run the whole thing with Blogger templates did not result in a happy time.  So the main site pulls and manipulates the Blogger RSS feed, with Simple Pie making that easy.

I then simplified the actual Blogger template and made it match and stuff.  The general intention now is that individual posts and comments will be viewed, if necessary, via Blogger, in a kind of archive-y way, but the content organised as I see fit exists on the main site as the primary port of call.

But my goodness does Blogger automatically add some crap into its templates.  I delete stuff and it comes right back.  Pointless classes, and divs, and general unnecessary bulky markup.  I give up with trying to strip all that out.

By the way, the source code for the site is here.  Share and share alike, yada.

Experimenting with running this entire website from the age-old Blogger backend.

Beating it gradually into submission with help from Temple of Doom stripped down Blogger template, and some pro tips from Blogger Sentral.

Because, why not?  I have a lot of stuff on this blog.  Time to organise it how I want.

Tell Me Scotland publish public notices for things like traffic, planning permissions... And they have a SPARQL endpoint!

I'm hacking around with the ultimate goal of creating an interface that allows people to generate a GeoRSS feed for a particular area.  Ally of GreenerLeith suggested this, so that they can use this to feed into their own apps.  A stage beyond that is to smoosh the whole lot into a Wordpress plugin, to make it accessible to anyone (who uses WP).

So far I've got the notices on an OpenStreetMap.  I haven't had a whole lot of time, but will make more soon.

I'm using the PHP library ARC2 to deal with the linked data.

NB. the TMS endpoint is, at the moment, flaky at best.  I think they're working on this.

About a year and a half ago I realised I needed to get a grip on how to organise my CSS.  I established a template, which I proceeded to change drastically with every new project.  I noticed recently that I've been reusing a version for the past few projects, with at the most only minor amendments to the general structure.  I also noticed how quickly I'm rolling out initial designs using this template.

I have finally reached the point where I figured out what I consistently reuse across projects, and finally have a stylesheet structure that makes such intuitive sense to me I can dart around and make changes with my eyes closed.  I find my stylesheets are much smaller, but even as they grow, I still know exactly where everything is.  I wish I had some statistics to quote about the amount of time spent scrolling through CSS looking for things.  I'm confident it is much reduced.

Some aspects of my workflow I developed through intuition; I made changes that felt right to me at the time, without really consulting anyone else's best practices.  Other things I picked up from here and there.  Every now and again I'd search for 'the right way' of doing this and find processes and systems that didn't gel with me (a primary example of this being the number of pre-built grid systems I tried and hated).  Eventually I would give up under the sheer number of contradicting points of view, but I probably picked up some subconscious inspiration on the way.

I hadn't thought much of this until Chris Eppstein talked about this at FOWD today.  A lot of the suggestions he demo'd are very similar to parts of my system (conceptually at least; he was discussing SASS and mine is raw CSS).  So I figured it's reached the point it is worth sharing.

First things first, I start with a basic Initializr stylesheet; a couple of minor tweaks, but then I largely accept the helper classes and IE fixes and hacks (no need to read this; it's just here for completeness):

/* ======================================================================
HTML5 Boilerplate CSS: h5bp.com/css
========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { height: 100%, font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { height: 100%; margin: 0; padding: 0; font-size: 1em; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 #title{ padding-top:20px; }

/*******************************************/
/*                                         */
/* My styles go here!                      */
/*                                         */
/*******************************************/

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

My template is inserted into the appropriate point of the Initializr stylesheet.  I divide into five sections:

/* 0 Accessibility */

/* 1 Typography */

/* 2 Colours & borders */

/* 3 Spacing & layout */

/* 4 Images & video */

I start each section with empty media query clauses for 480px and up, 768px and up, 1024px and up, and 1200px and up.  By the time a project is done each section will typically have from one to six media query breakpoints in it, according to requirements.

0. Accessibility

A staple of this so far is:

/** 
 0 Accessibility
**/
.no-css {
 /* This class hides stuff that needs to be around for screenreaders or users with no CSS, but not in normal circumstances */
 position: absolute; left: -1000px;
}

Which I chuck in when I use visuals to enhance some content, to hide an appropriately positioned textual equivalent.

There's probably more useful stuff that should be here. I'm working on it. (Suggestions welcome!).

1. Typography

Not a lot going on here. Some obvious placeholders, plus a couple of classes I found myself needing over and over, which should be self explanatory (.win and .fail are applied to success or error messages; usually a form submission is involved).

/**
 1 Typography
**/

h1 {}
h2 {}
h3 {}
h4 {}

p {}
a { text-decoration: inherit; }
a:hover { text-decoration: underline; }

.note {
  font-size: 1em;
  font-weight: bold;
  text-align: right;
}

.wee {
  font-size: 0.8em;
}

.win, .fail {}

In typography, I strictly only include font stuff like faces, sizes, alignment, decoration and enhancements like text-decoration, font-weight.

2. Colours and borders

Border styles go here because they need to be defined before the border colours are. Otherwise, just colours go here:

/* Borders */
  .win, .fail { border: 2px solid; }

/* Dark */
  .dark { color: #2d2d2d;}
  .dark-bg { background-color: #2d2d2d; }
  .darker{ color: #000; }
  .darker-bg { background-color: #000; }

/* Primary Color */
  .color1 { color: green; }
  .color1-bg { background-color: green; }
  .color1-border { border-color: green; }
  .color1-texture { }

/* Secondary Color */
  .color2 { color: yellow; }
  .color2-bg { background-color: yellow; }
  .color2-border { border-color: yellow; }
  .color2-texture { }
  
/* Tertiary Color */
  .color3 { color: red; }
  .color3-bg { background-color: red; }
  .color3-border { border-color: red; }
  .color3-texture { }

/* Light */
  .light { color: #ccc; }
  .light-bg { background-color: #ccc; }
  .lighter { color: #fff; }
  .lighter-bg { background-color: #fff; }

.note { color: silver; }

.win {
  background-color: #E6EFC2;
  color:#264409;
  border-color:#C6D880;
}

.fail {
  background:#FBE3E4;
  color:#8a1f11;
  border-color:#FBC2C4;
}

After border styles, I start with the colour scheme, creating classes for text colours, background colours and border colours. It's unusual to need to go beyond a tertiary colour, and typically I only have primary and secondary. This leaves me with classes I can apply to any elements in my html templates, making it really quick and easy to experiment with different colour combinations. The color*-texture classes come in handy when I have textured backgrounds that match the colour scheme, and would include the background image (a repeating square of noise texture for example) and a background-colour as a backup.

Most of the time I don't want to be applying classes to everything to add colour though. I list elements that I'm confident aren't going to change in the mark-up which need colours applying to them, for example:

/**
    2 Colours and borders
**/

/* Primary colour */
  .color1, body { color: green; }
  .color1-bg, nav, footer { background-color: green; }

/* Secondary Color */
  .color2, nav { color: yellow; }
  .color2-bg, body { background-color: yellow; }

/* ...etc... */

I'm a fan of using off-white and off-black, so these are what I originally picked for my .light and .dark classes, which are always handy to have. Sometimes pure black and white are necessary too though, so the .lighter and .darker classes were born.

You can see .note, .win and .fail show up here too.

This pretty much means this is as long as the colours section will ever get. I don't apply colours anywhere else in the stylesheet, and it helps to ensure I stick to a colour scheme and don't get carried away with exceptions. Obviously, this also makes it super easy to change the colour scheme uniformly in a couple of seconds.

3. Spacing and grid

As I already mentioned, I have poked around with some of the existing flexible grid frameworks but none of them grabbed me. They all seemed to have too much. The minimalist system I came up with has answered all of my needs so far, although I wouldn't claim it's suitable for _every_ project in the world. It's also subject to tweaks, depending on the project of the moment.

I stick with Initializr's .wrapper class, which is 100% width until the viewport reaches 1024px, when it snaps to 900px wide. This is my default because it's been the most frequently appropriate so far. I have an ongoing project at the moment where the target audience are largely gamers, so capitalising on the excessive screen real estate they'll probably have means I stripped out this restriction in favour of a full width multi-column layout when the device allows.

I haven't yet had a need to go above five columns for my grid. I express my class names like fractions, and start off with only the 1/2, 1/3 and 2/3 ones taking up the correct proportion of the screen, with the others defaulting to 100%. This then changes for wider-than-small viewports, as you can see.

There are a few navigation list related things in there that I often find myself duplicating across projects (like a default centre-aligned stacked menu which progresses to a floating horizontal version). I pad my a elements (as opposed to their containing li elements) to enlarge the touch area for links. Plus some nth-child stuff for three column layouts, for keeping consistent row heights when the column heights are different.

/** 
 3 Spacing & Grid
**/

.wrapper {
 width: 100%;
}

/* Grid */
.w1of2 { width: 50%; float: left; }
.w1of3 { width: 33%; float: left; }
.w2of3 { width: 66%; float; left; }
.w1of1, .w1of4, .w1of5,
.w3of4, .w2of5, .w3of5, .w4of5 {
 width: 100%;
}

.inner {
 padding: 1em;
}

nav {
 max-width: 100%;
}

nav a {
 display: block;
 padding: 0.8em;
}

.inline { display: inline; }

.win, .fail {
  padding: 0.2em;
  display: block;
}


/* 3.1  */
 @media screen and (min-width: 479px){
  
  nav li { float: left; }
 }

/* 3.2  */
 @media screen and (min-width: 768px){
  .w1of2 { width: 50%; float: left; }
  .w1of3 { width: 33%; float: left; }
  .w1of4 { width: 25%; float: left; }
  .w1of5 { width: 20%; float: left; }
  .w2of3 { width: 66%; float: left; }
  .w3of4 { width: 75%; float: left; }
  .w2of5 { width: 40%; float: left; }
  .w3of5 { width: 60%; float: left; }
  .w4of5 { width: 80%; float: left; }

  .w1of3:nth-child(odd) { clear: none; }
  .w1of3:nth-child(3n-2) { clear: both; }
 }

/* 3.3  */
 @media screen and (min-width: 1024px){
  .wrapper {
   width: 900px;
   margin-left: auto; margin-right: auto;
  }
 }

Everything that goes in this section is to do with spacing: padding, margins, positioning, floating, wrapping... et cetera.

4. Images and video

Most projects call for tweaks to images that may or may not fit into the other sections of the stylesheet. Nonetheless, my brain copes better with I group them all together. Flexible YouTube video embed lives here too.

/** 
 4.0 Images and video
**/

.vid-holder {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.vid-holder iframe,  
.vid-holder object,  
.vid-holder embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

/* Full width images on bigger than small screens are dumb. Reset this. */
@media screen and (max-width: 478px){
  .w1of1 img, .w1of2 img, .w1of3 img, .w1of4 img, .w1of5 img,
  .w2of3 img, .w3of4 img, .w2of5 img, .w3of5 img, .w4of5 img {
    width: 100%;
  }
}

And that's what I start all projects with. Here is it all assembled, with a few of the classes throw into the mark-up so you can see what's going on. If (when) I end up doing another major update, I shall probably write about it again.

At the Future of Web Design conference earlier this month, I was inspired.  As a developer primarily and a designer when I have to be, the talks and people at FOWD were perhaps more valuable to me than if my main focus was on design.  I don't need inspiration to develop, but I do to design.

But an incredibly busy week and a bit later, I find I haven't had an opportunity to really make use of the ideas that were triggered at the conference; not only that, but the inspiration is beginning to fade.  And I will struggle to find time to watch the talk videos over the next few weeks.

I had intended to shove together a new portfolio site, to match my shiny new business cards, before the first day of FOWD.  Naturally I didn't manage to stick to this deadline, continued to work on the site during the conference, and to this day the redesign remains unfinished at localhost/.  It is so far responsive up to iPad dimensions, but the design that I was initially satisfied with has fallen out of my favour, so I'm struggling to finish.  I've been browsing collections of great web design, like this one, as well as staring agonisingly at localhost/, hoping for re-inspiration.

Turns out I dislike quite a few of the designs on that list.  Some just have too much blank space.  Many go way overboard with the 'Web 2.0' look; glossy buttons, excessive rounded corners, and the like.  Pretty on first glance, perhaps, but after seeing so many sites in the same style, you suddenly realise the genericness of them all; they give an impression of designers who forgot that the purposes of, or the companies behind the sites have their own personalities and branding that can't be represented simply with shiny buttons and background gradients.

I am currently a fan of textured backgrounds, and I'll confess I am currently of the opinion that a text shadow automatically makes almost any header text look better.  I'm sure this will wear off, just like glossy buttons did.  But I'm still struggling to find a style that suits me personally (and matches my business cards).

So far, just writing about it has helped a little, and I think I have enough beginnings of new ideas to push on.  Watch this space.

Their previous version of this particular site was the image from the event poster, with links mapped onto it.  It was mere moments before my progressive enhancement / responsive design OCD kicked in.  The site in question is to advertise this year's University of Lincoln Grad Ball, and is little more than an online poster.  So here goes.

1530
Marked up the page, with HTML5 tags and the content from the poster, using currently non-existent classes where needed, and also including a few non-existant images. Added my own mini CSS reset for the elements I was using.

1545
Cut the couple of images I needed out of the poster png and uploaded them.  Spent a while trying to find something to match the obscure Mac font that had been used on the poster.  Impact was close, but didn't quite cut it at small sizes.  Played with weighting and letter spacing for ages, but eventually picked a font from Google Web Fonts that did the trick and styled all the typography related stuff.

1605
Aligned, padded, margined and weighted everything as I wanted.  Remembered to use a HTML5 enabling script so versions of IE lte8 would actually bother to style things properly.

1625
Took a step back to look at content.  The organisation of it was great for a poster, where you can pretty much see everything at once, but in any scenario where scrolling is a possibility, the most important stuff needs to go at the top.  So I rearranged some things.

1630
Used CSS to hide a couple of elements that would do more harm than good on a device with a small display. Used media queries to show them for displays with a greater width than 480px.  With help for IE, of course.

Nasty, dirty cheating
One of the images I used consisted mostly of text, with a few images plonked around it.  I didn't have the energy to recreate this in a two-column list, especially not with the apparently randomly floating images.  The image is only used for 480px+ of course.  Mobile get a list.  Unfortunately, I just used display:none.  So mobile browsers are still loading the image.  I hate me, too.  But hey, I had an hour.  It's better than the whole site being an image.

READ MORE ABOUT RESPONSIVE DESIGN.

I wrote that in capitals, because it is not a suggestion.

And, if you're University of Lincoln final year student, get your tickets for the Grad Ball, and resize your browser window while you're there.  It's going to be the best one yet, as they say every year.

It doesn't really seem like much when summarised like this, but I do wish I was paid more than £6 an hour.

So I was all excited about block level links.

But then Firefox had to go and vomit the DOM all over the place.

Which, incidentally, screwed with my layout somewhat.

Everything else could handle it.  Including IE6.  Grr.  For the record, this was Firefox 3.6.10, Windows and 3.6.13 on Mac.

So I'll be keeping an eye on that one before trying it again.

YAY FOR LEARNING!

[A summary of things I feel about HTML5, from a sleep-deprived mind]

It feels like it should be much later... earlier... than that.  I’ve spent hours and hours reading debates about HTML5.  Mostly debates in the comments of blog posts and articles.  I feel fairly well versed in two sides of the argument, the nature of which boils down to “HTML5: What is the point?”.  

My personal view is that progression is good.  Development for the sake of development is good.  Even if you don’t get it right the first time, at least you’re doing something, and not just whining about it.  Someone (yeah, someone important, I don’t do citations at this time in the morning) said that HTML5 was being developed for the present, and that it will be rewritten in the future, to meet the needs in the future.  Lots of people had a problem with that concept, as we should be developing for the future.  Lots of people supported that concept, as predicting the future is quite a challenge.  I haven’t decided where I stand yet.  Maybe I don’t need to.  

I like the fact things are changing, because it makes me feel excited and challenged and all that.  It upsets me a little that I’d just got the hang of all this web development malarky, and now there’s more?!  Lots of people seem to feel the same about the latter.  Which is understandable.  Understandable in a world where the web is expected to be a fixed thing, and you make a website, and it works, and customers are happy, and clients are happy, and it stays like that forever.  But the world and the web (and customers and clients) are fluid and flowing and flexible and fickle.  Peoples’ needs change, hardware changes, software changes, businesses change.  They always have, and always will, so where this idea that the web should whoa slow down a second and wait for the slower ones to catch up has come from, I’m not quite sure.

This makes it sound like HTML5 appeared overnight.  Which for me, in a way, it did.  Appeared to my conscious, concentrating, information-absorbing mind, anyway.

But the part where the HTML5 spec has been under development for like six years or something now?  Come on guys.  I know it’s not easy, but really.  Give the lazy people something to complain about.  Or at least make a big deal out of it from the start.  So ‘they’ can start thinking about it from the get-go.  Maybe a big deal was made, and I just missed it.  But I was making websites six years ago, just.  So if I missed it, ‘they’ did too.

That last paragraph went a bit to the dogs.  What I’m trying to say is: the little man on the ground, the guy making the websites day-to-day, the guy dabbling, the guy fouling up the standard mark-up you hold so dear... Tell him what you’re doing, as you’re doing it, so he’s prepared.

I know you can’t force change.  Hell, outside of term time I still live under a regime where IE6 is deemed a perfectly adequate browser, installing Chrome ‘breaks’ IE, so isn’t allowed, and [insert new web thing since 1997] might be a great feature, but since my father doesn’t explicitly use it, any development on that front is pointless.  Hey, he even (almost daily) states angrily that film making companies are at fault because their productions are shown letterboxed on his 4:3 TV.  (I just searched so I could state that widescreen TVs have been commonplace since [year], and discovered that films have been being made in widescreen since around 1929.  HAH.  I’ll quote that juicy fact next time).  But this is whole other blog post.

I was going somewhere with this.  Oh yes.

I still don’t know whether I can put a <nav> in a <header>.

That’s all I was trying to find out when I stumbled across the various debates.

I’m officially declaring the HTML5 spec subject to interpretation.

And I’m putting the <nav> in the <header>.  It’s part of the header of the page.  In this particular context, if I had a div with id header, I’d put the navigation inside it.  To hell with you all.

PS. Thanks for the great work on developing HTML5, guys.  My life would be dull and repetitive without the likes of you; I’d be reading and writing a lot more fiction, and spending far more time with my family.  Much obliged.

I write this as a commitment to producing a number of useful things over the next two weeks.  And I will read all of Jeremy Keith’s books.  And I will make sure all of my sites validate, even the ones I did in a hurry.  And I will rebuild my portfolio with HTML5, and for mobile.

I’m going to start tomorrow.  Promise*.

I’m now reading this.

Things are being learnt.

* Not a promise.  In all likelihood, tomorrow, I will spend several hours at Weirfield Wildlife Hospital cleaning up excretions of sick animals and loving every minute of it; followed by an afternoon and evening spent playing Mum to a certain parrot and consequently failing to do anything else.

[This post is written as an informal part of a university module]


Speaker: Paul Charman
Area: CV Writing 

I've had so many patronising talks about CV writing in my life that I'll admit I was dreading yet another. The fact that Paul almost at once acknowledged that his slides and advice may be patronising was a good start though, I suppose. I have no doubt that for people who have not been subjected to so much identical advice in their lifetime would have found the talk useful and informative, but for me it served only to reinforce everything I already knew. 

(Not to mention contradict some of the things the first speaker of this module said, and consequently support some of my comments in my first blog post). 

With every website, book, tutor and professional giving out matching advice about CV writing, it baffles me how people still manage to get it wrong. But I guess advice is rarely given out for people to take. I do feel I learnt a great deal about the subject over summer, working closely with the staffing team at Google (although there are many company-specific quirks, that may not apply to the wider industry). But if I want fresh, new advice about applying for jobs, I feel I would seek it from a recruiter, someone in the industry... someone who actually reads and judges the CVs for a living. But even then, until recruitment processes in general get a massive overhaul, there is only so much anyone can say about the subject.

[This post is written as an informal part of a university module]


Speaker: Roy Isbell
Area: Digital security

Depending on your point of view, you can probably claim the company you started was successful if it is eventually bought out by a global giant, such as Symantec. Roy certainly had this air of success about him as he told us about the route he'd taken to get where he is today. But he didn't dwell on his life story for the entire hour as we half expected. Instead he gave a thought provoking presentation about digital security issues, from their origins in the days when losing your data was the biggest concern, to modern day crackers, malware and botnets. 

He emphasised how much of a profitable growth industry digital security is, from both the point of view of those trying to breach the security, and those trying to prevent the breaches. Roy mentioned that the UK government has recently allocated £8 million to cyber security but a quick search* yielded nothing to back this particular claim up... Instead I found articles from as recently as this afternoon about the £1 billion that will be spent on this issue, as well as quite a few statistics that reinforce everything else Roy had to say about the activity and effectiveness of botnets. 

So although I'd heard of most, if not all, of the buzzwords that came out of Roy's presentation, I'd never really thought about them. That's not entirely true. I use free anti-virus software and common sense when I'm browsing. Goodness knows data security was hammered into all the new Google interns on the day they handed over our shiny new MacBooks. But when you log into your Internet banking from your own laptop, what could possibly go wrong? How can this textbook company you've never used before, that you're putting your card details into right now, possibly not be legitimate? Why would a stranger in Russia be interested in logging my keystrokes? It's one of those... It'll never happen to me situations. 

I paid attention though, because although I've never really built a web application big (powerful, used, important) enough to warrant anything more than sanitising database entries before, I will be doing this year. So I should probably get wise to this network security stuff. 


*A search of thirty seconds or less being all the multi-tasking, attention-deficit 'Internet generation' of today are capable of.

[This post is written as an informal part of a university module]


Speaker: Ken Blair of BMP Recording
Area: Sound recording/engineer

Although Ken’s area of expertise is not directly relevant to my degree, I have frequently worked alongside media students both informally and more recently as part of a start-up company in Sparkhouse. Thus I am able to relate to many of the things he discussed about sound engineering, as I have had second-hand experience of creating soundscapes for animations, or musical tracks for short films, for example. I wrote lots of notes about the details of the things he does on a regular basis, and the differences between on-location and studio recording; between recording pop music and recording classical. But it seems fruitless to transcribe them all here, when his day-to-day experience, while interesting, is of little consequence to me personally. 

However what did catch my interest was that Ken started his own company straight out of university, similar to what I am involved with in Sparkhouse. He discussed the ‘catch twenty-two’ of needing industry experience to find work for your company, but people being unwilling to hire because of a perceived lack of experience. He also affirmed that the decreasing cost of technology has made it easier for people to create their own recording studio setups, enabling freelancers to charge the absolute minimum for the work they do, causing a very competitive price market. 

I (and the others I am working with in Sparkhouse) have fortunately been able to take advantage of the latter issue to solve the former. Several years as informal student freelancers meant we could afford to charge the minimum, or work for free, with the focus being on gaining experience and reputation rather than worrying about earning money. Now we have started our own company, we can start charging ‘real world’ prices to bigger companies, and are able to do so supported by a significant portfolio of existing work. 

Knowing that this method has so far worked for myself and others, I feel Ken could have offered his hindsight to those in the audience who may not have had the same experience. That is, he could have advised to take advantage of the years of having a student loan and lots of free time to build up a portfolio of work and experience relevant to an individuals particular career aims, without needing to worry about taxes and bankruptcy. This would help to avoid the problems that his own company had right at the beginning. 

Having said that, level three is probably too late for students to be hearing that kind of advice; it might be more useful, and inspirational, during level one. 

Ken did offer advice about writing CVs, for those who do have little industry experience - to focus on one’s skills, rather than one’s past jobs - but commented that employers of new graduates are sympathetic to the lack-of-experience problem, understanding that their job applicants have just come out of university. I’m not convinced that this is a good message to be sending... Perhaps employees of sound engineers and audio technicians think differently, but my experience so far in the computing industry (mainly software and web development areas) has taught me that the new grad job market is so saturated with graduates with high calibre degrees that having something on your CV that you have done, rather than can do is vital. 

Anyone can list the modules they’ve done, and the programming languages they have dabbled in over the course of three years. You stand out if you write about the open source project you contributed to in a specific language, or the academic poster you presented at a technology conference about your chosen field. Listing skills has a lot more impact if you can prove that they really are your skills.