Sunday 14 April 2013

GDB - Google Drive Blog

I've been blogging forever it seems, I'm not overly proficient at writing and such but I do so enjoy doing it every now and then. I guess I started when I started to get into doing stuff online that wasn't just consuming but was creating, either words or client/server scripts.

I've had a Gmail account since not long before they became available - though by invitation only to start with, and you only had 5 invites to give away! I got one and my kids got one each and they've got really rather cool addresses as such!

So the point is that I've been pondering leveraging my Gmail account (and subsequent access to Google Docs) and my scripting and writing into one thing. Once Google added the ability to serve content from your Google Docs account (something I've written about a couple of times before (Easy menus on vanilla hosting (GDrive or site44) and Multi-level Bootstrap Menu on GDrive or site44)) I was set as I didn't need to involve any server side scripting (Not that I don't want to do more PHP, but why not use JavaScript as much as you can). I knew that a Google Docs spreadsheet could act as a data source and the pages could be hosted on Google Drive so I've spent the last weekend getting my head around what I needed to do and the result is https://googledrive.com/host/0ByRgQIhodQXfaVdHOElsZTV5c3c/driveblog/. I'm also putting the code (which is after all just JavaScript so available when you view the source) on GitHub (https://github.com/annoyingmouse/GDB)so that other people can hopefully take advantage of my work and, even more hopefully, improve it!

It uses Twitter Bootstrap for the basic layout as it's just so bloody easy to get started using it and I've borrowed ideas from a html5 Doctor. I also love JS-Render so I'll be using that as much as possible.

The content of the posts is Base64 encoded (using Opinionated Geek's base64encode online tool) when it's entered into the spreadsheet and I guess I should open that up too so that you can copy the structure: https://docs.google.com/spreadsheet/ccc?key=0AiRgQIhodQXfdGZ5OV9INlNRME9YUnc2VUhmRGtPaVE&usp=sharing. It's simply a question then of adding the key to the script and you should be away!

I've a couple of other things posted on GitHub. The Canal Lock one is lovely so please have a look at that as well if you fancy! I've updated the Pretty Time one but haven't uploaded it as yet - I'll have to fix that!

The next step is to use something to make adding new content, perhaps using the Base64 code I've included from webtoolkit and Bootstrap-wysiwyg...? Of course, that might require some server-side scripting to put the post on a new line of the Spreadsheet. Comments should be easy enough to do as well I reckon as I can just put them on a new sheet of the Spreadsheet and refer back to the id of the post...

Wednesday 10 April 2013

Making a web page 04: What? No multi-coloured tree!

Last time I challenged you to make your own web page with a single paragraph and I tried to get you to colour it red:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My Title</title>
    </head>
    <body>
        <p colour="red">My first paragraph.</p>
    </body>
</html>

I did a nasty thing there, even though I said that you should make sure to spell colour wrong browsers don't understand the colour, or even color, attribute. Browsers have had all sorts of quirks over the years in that some supported some attributes whereas others didn't. As far as I'm aware none of them have supported the colour attribute. And most especially don't support it within the HTML5 specification (a specification is something that browser manufactureres are supposed to respect). In order to actually colour our paragraph we have to use soemthing called CSS.

CSS is cool and something that you'll come to love and hate in equal measure if you carry on along making websites.

CSS is as old as SGML (remember that old thing?) but owes an awful lot to a Norwegian by the name of HÃ¥kon Wium Lie. It's an interesting thing as it's basically a way of telling browsers how to display the content of your page! You tell it to jump and then tell it how high you want it to jump in much the same way as a Sergeant major might to troops. In the example above we could tell the browser to paint the paragraph red by saying style="color:red;".

The order is to colour it and the specific order is to colour it red (there are a load of different names for colours in HTML, here is a list). Another way of looking at CSS is to think of it a list of key:value pairs. We can look at color being the key and red being the value. This is a cool concept to get your head around while you're here as a lot of things can be split into this type of pairs when we look at websites.

CSS is also fascinating in that it can be in all sorts of different places at once!

We can place our CSS in a different file and call it within the page itself:

style.css:

p {
    color: red;
}

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My Title</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <p>My first paragraph.</p>
    </body>
</html>

We can place out CSS in the page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My Title</title>
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>My first paragraph.</p>
    </body>
</html>

We can add it to the elements that we want to style directly:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My Title</title>
    </head>
    <body>
        <p style="color:red;">My first paragraph.</p>
    </body>
</html>

There's a hierarchy in this though as styles applied directly take precedent over styles defined in the head of the page which in turn take precedence over styles within external style sheets. I guess it's like the closer the order comes from the louder it is so it's going to be acted on over quieter orders.

This might mean that you'll want your styles on the elements but that can get really quite boring and make the HTML which makes up your page ugly. It also goes against the seperation of content and style! This might seem irrelevant but imagine that you're a search engine robot and you want to be able to "read" the content of a web page. Would it be easier to read <p style="color:#ff0000">My first paragraph</p> or <p>My first paragraph</p>? That's not overly hard to read is it, but imagine that you want the paragraph to be larger, have a non-standard typeface and be italic? That could get quite boring to read through couldn't it?

So if having it on the element isn't right perhaps you should sling the directives in the head? That works but it's a little like giving the search engine a really long introduction to your webpage, perhaps it will just get bored and leave before it gets to the good stuff?

Far better, I think, to put all the styling in a different file that the search engine can skim over and not have to worry about, that way the HTML that makes up my webpage just has the important stuff in it rather than ideas about the wallpaper and what colour the skirting boards need to be.

Anyway, that's probably enough for today. We'll have a look at styling a little bit more next time.

Wednesday 3 April 2013

Pidgin, Creole and Fluency and the New Wave

With 100's of people waiting for Dr Who (7x06) at Eastercon 2013

Went to EasterCon last weekend (Easter 2013) with Alex and Mark. They're both more widely read than I and blessed with fearsome intelligences but they let me tag along anyway.

I sort of want to say that going to EasterCon made me feel normal but then I'm stuck with what that means... does that mean that in comparison to the other people attending I'd be seen as normal? Or does it simple mean that I'm in a place where I'm seen as normal?

Deep ehh? Or bollocks, not sure.

Anyway, before leaving at lunchtime on Sunday I attended a fascinating talk:

Where Is The New Wave Now? 11am-12pm. Hawthorn. In the 1960s, the New Wave of SF introduced sex, drugs and experimental formalism to SF. SF has never been the same since: but nor is it a continuation of the New Wave style. Our panel ask what SF has kept from the New Wave, what it has dropped, and what it should be bringing back. Kev McVeigh moderates Jo Fletcher, Farah Mendlesohn and Chris Priest.

I'm pretty sure I'd heard Farah Mendlesohn talk last year and enjoyed her perspective. This year was the same as she blew me away when she talked about the evolution of languages... it got me thinking to such a degree that I forgot to listen to much of the rest of the panel.

What it got me thinking about wasn't so much the New Wave of Science Fiction in the 1960s (hey, I cut my Science Fiction teeth reading Micheal Moorcock) but rather that the example they showed has permeated any number of disciplines since. I guess that that sort of "evolution" within a field of discourse isn't necessarily new so perhaps I'm putting too much importance on the New Wave's influence, but it did get me thinking. I guess that it is putting too much credit at the feet of the New Wave thinking about it: Dr. Alan Chalmers, in his book What Is This Thing Called Science? talked extensively about the "r/evolutions" within Scientific discourse and changes in popular music show equal "d/evolution" (It's in the nature of the old to criticise the music of the young (but isn't all just noise?)).

Anyway, before I lose my thread totally, I started thinking about the nature of JavaScript. I'd talked with Alex on the way up to Bradford about JavaScript and I've heard him say that the question must now be asked, "Why wouldn't you do it with JavaScript?". Seems as though he's not alone in this approach. I know I'm a huge fan of the language, but more and more people are being swayed by its attractions.

What Farah Mendlesohn said was that languages started out as Pidgin in the first generation, became a Creole in members of the second generation, and that by the third generation people were fluent speakers of the language.

JavaScript used to be seen as the poor relative of computer languages, something that those designers used to make things pretty or interesting, but not of any use to the serious programmer. With the widespread adoption of AJAX techniques JavaScript became something a little more refined. More recently we've got gorgeous libraries like jQuery which serve to abstract the various 'orrible browser dialects and make something elegant while retaining the power of the underlying language.

I've recently joined the lovely jQuery Google+ Community and I'm always amazed by the answers there to questions posed by other members of the community. People are just so helpful and whenever I throw my hand in and attempt to answer a question I'm blown away by the answers of others who've perhaps been doing this professionally for more than 3 years. I only hope that when I've got a few more hours under my belt I'll be as eloquent in my favourite language.

But I guess that's partially it. I was studying as AJAX became the great new thing (along with rounded corners), my dissertation was all about it because I was so excited by it, but I've come quite late to the language and it's constantly surprising me and I'm always learning new facets of it. I've not get hit Malcolm Gladwell's 10,000 hours but I'm getting there and enjoying every minute!