Chrysta Bell At Oslo Hackney

On Friday 11th April my Girlfriend and I drove down to London for the weekend. It was a great weekend, with the nucleus of this trip was to see Chrysta Bell on her tour.

Who is Chrysta Bell?

Chrysta Bell is an artist in the truest sense of the word. Her voice is one of those that can both charm and haunt you. She commands the performance with such force that it is difficult to explain in mere words. You really need to experience it first hand.

She was touring on the back of an album produced and co-written by David Lynch. David Lynch is definitely present in both the album and on the night itself, but this isn’t just a case of “David Lynch produced it, therefore it’s awesome”. The album is awesome, believe me, but it is due to the equal talents of both David and Chrysta combined. Each on their own are unique and hugely talented, but together they produce something even more special.

I first heard Chrysta Bell in a song from David Lynch’s film Inland Empire. The song Polish Poem was used in the film to such a haunting effect. As soon as I found out about the Album they did together This Train, which Polish Poemfeatures on, I was immediately hooked on the music they were making together.

The Gig Itself

The gig itself was out of this world. Anyone who has seen Twin Peaks would be hard-pressed not to imagine themselves stood in the Road House, watching Chrysta in front of that red curtain. At least that’s how it was for me.

Her vocals were both soothing and haunting, with the melodies weaving throughout the crowd. Her band were great also. Chrysta, of course, was centre stage, but the band weren’t just a faceless few who played the music. The four of them as a whole played the songs with a firm understanding of each other’s rhythms and timing.

The performances that stood out for me were Swing with Me and a new song they played, the name of which I can’t remember. The only song that wasn’t performed that I would have loved to have heard live was Polish Poem. I can only imagine what that would have felt like. The venue did have a 10pm curfew, so maybe Polish Poem would have been performed without the time restriction.

After The Show

When the show was finished I was both happy and sad. Sad because a great show had come to an end, but happy because my Girlfriend and I got to meet Chrysta face to face. I had previously spoken to Chrysta over twitter and I arranged to buy her earlier album, Bitter Pills and Delicacies, directly from her. after the show.

From my own conversations with Chrysta, it is obvious that she cares deeply for her fans. I wasn’t surprised to see her mingling with the fans both before and after the show.

Thanks Chrysta.

The Dvorak Keyboard

When I took a trip to Paris a few years back, I had to pop into an internet cafe to find the location of a place I was after. Because – it seemed – I was hopelessly ill-prepared.

So I paid my money to the nice man in the corner; sat down; quickly typed my search and hit enter, only to find I had been presented with an empty results page. It seems Google didn’t recognise ‘me wenith’ as a Parisian Live Music Venue. This is how I was introduced to the French keyboard layout.

In telling this story today to a friend, he introduced me to another layout that I had never heard of –  The Dvorak Keyboard (also know as the Simplified Keyboard).

The Dvorak Keyboard was originally patented by Dr. August Dvorak and his brother-in-law, Dr. William Dealey. It was developed to be an improvement over the well-adopted ‘qwerty’ layout that we still use today. The design of the Dvorak layout was based on much research into how people typed as well as percentages of the time spent typing in varying areas of the keyboard. It was stated that the Dvorak Layout would make it easier to type common words with the minimal of movement and finger strain.

Despite the research and slight adoption of this layout, it never really made it into popular use and so the ‘qwerty’ layout is still the primary keyboard used on western computers / devices to this day.

Owning your tweets

I love the idea of owning my own data.

When you post a status update or write a tweet, you are doing so behind a wall. Your content is saved in that service’s own servers and they can do what they please with that data. When you post to Facebook, Facebook owns that data. When you tweet, twitter owns it.

The idea of owning your data is to make sure that your content isn’t controlled by third party services. For example you could set up a website of your own and what you write on there is yours — as opposed to writing it on your Facebook wall. And you don’t have to worry about Facebook going bump. Of course astute readers will be asking “surely the people who host my website will own my data”. The answer to this I am unsure about. But the fact that you are essentially renting the web space — much like rented accommodation — all the contents you put inside it should be owned and controlled by you.

So I wanted to try and extend my content ownership to the third party services I use, namely Twitter. With this in mind I have began posting some of my tweets as mini posts on my own site, then sharing them out to Twitter. I don’t know if this makes any sort of difference to my ownership over the data, but it does mean that no matter what Twitter does with my tweets, I will always have control over the originals on my own website and could even share them else where if I wanted.

Jumping the Shark

The term jumping the shark, I discovered today, is an idiom that is a way of describing when a television show’s quality begins to decline. It originated from the television show Happy Days in its season five premiere, where The Fonz literally jumped over a contained shark on a beach front. This was quite a step away from its usual family and adolescent related story lines set against the nostalgia of the 1950s.
The usage of “jump the shark” has subsequently broadened beyond television, indicating the moment when a brand, design, or creative effort’s evolution declines.Wikipedia, Jumping the shark

And here’s the clip: https://www.youtube.com/watch?v=t4ZGKI8vpcg

Breaking out of nested PHP loops

I came across a snippet of handy information today regarding nested PHP control structures and breaking out of them from within the structure at any level.

Although the example is not important, I thought I’d use my exact use case as opposed to using the same old ‘Foo, Bar’ examples.
My Example
I am currently working on my own PHP Framework, more as a learning curve than anything else, and came to the point at which the code would look at the URL and load the class and method being requested?—?or a default if the requested is not found.

// Previous code grabs the URL and breaks the ‘/page/request/’ into an array
if ( !empty($_array_request_uri) && !empty($_array_request_uri[0]) ) {

foreach ($_array_request_uri as $key => $value) {
// Here we have entered the 1st Control Structure (foreach)

switch ($key) {
// And here we enter the 2nd Control Structure. (switch)
case ‘0’:
if (class_exists($value)) {
$load_class_name = $value;
}else{
break 2;
}
break;

case ‘1’:
if (method_exists($load_class_name, $value)) {
$load_method_name = $value;
}else{
break 2;
}
break;

default:
break;
}

}

}

So in the example above, if the requested class does not exist on the first for each loop?—?the switch statement’s ‘0’ case?—?then I don’t want it to continue the for each looking for the requested method?—?the switch statement’s ‘1’ case. In that instance I want to break out of both the switch and the for each loop.

And so just as when breaking out of a control structure by using break;, we can exit both the switch and for each loop simply by adding the number of levels deep we are after the break. e.g. break 2;.

WYSIWYGs will kill us all

So okay, maybe they wont literally kill us all, but you’ve got to admit?—?they can be pretty damn annoying. At least with ones I have used.
I’m not dissing wysiwygs?—?just what they get used for.
Firstly let me just say that I use a wysiwyg editor on my own blog and it does exactly what I need it to. I type text and it saves that text. I click to add a link and it adds a link. Brill!

For a blog, where writing long posts with the odd link and / or bolding of text, a wysiwyg really is great. But what I don’t believe in is using a wysiwyg for anything more than that. Let me explain.

With a standard WordPress install, when you write a post or page, the content from the wysiwyg is spat out by the function the_content(). This displays all that content in one block within the page. Of course WordPress is?—?at its roots, a blogging platform (and a damn good one) so the ease of writing and publishing has always been at the forefront.

But what if our content is more than just a blog post? What if it’s an album or film review? Or specifications for a car? If we bundle all of the content into one block then we are a stepping away from what we need most nowadays, which is structured content.
The need for Structured Data
The need for structured data these days is more important then ever. With the whole multi device landscape, a site’s content needs to be able to display beautifully where ever it is viewed. We need to be able to control as much of the content in as much of a modular way as possible.

Also, as a result of making content more modular, it means it can be a lot easier to group and sort that content. For example, if we have a database of 500 albums with all of the content for each album in its own single block of content, it makes it extremely difficult to categorize those into various artists or genres. Whereas if it was set up in a way that it has separate fields for each content chunk?—?an artist field; a genre field; etc?—?then those albums could be easily sorted and categorized.

Karen McGrane gave a fantastic talk at An Event Apart, Boston in 2012, where she talked about the TV Guide who made a wise decision about their content structure back in the 1980s.

She talked about how the TV Guide wrote out three different descriptions of the same programs. One small, one medium and one long. This was before TV on demand or Tivo,  where now that sort of structured content is invaluable for use across different devices and contexts.

I recommend you watch the video, but I wanted to include a great quote from that talk here:
…a clean base of presentation–independent, well–structured content that you have designed, from the start, with the intent that you may want it to go out and live on a wide variety of different platforms. In fact you know from the beginning this content is going to have to live in a variety of different places…

Karen McGrane An Event Apart, Boston, 2012
Example – content for a music album
All the content for an album in one chunk:

<– Output Html of the_content() in a wordpress site –>

This Train features 12 songs from the angelic, sometimes haunting, voice of Chrysta Bell. It was produced by David Lynch and features songs written by them both, including the track ‘Polish Poem’ from the film ‘Inland Empire’.


Artist: Chrysta Bell


Produced by : David Lynch


Release Date: September 29, 2011


Tracklisting:



  1. This Train

  2. Right Down To You

  3. I Die

  4. Swing With Me

  5. Angel Star

  6. Friday Night Fly

  7. Down By Babylon

  8. Real Love

  9. Bird of Flames

  10. Polish Poem

  11. The Truth Is

  12. All the Things

 

So while the above html code is okay, it doesn’t allow for much flexibility. What happens if?—?in a few years?—?the website gets a complete redesign?

Imagine there are 500 albums in the site’s database. Well then we’ve got a problem. We can have a lovely new shiny design but the bulk of the content is already set in stone somewhat.

In the example above we have the track listing below the review. What if we wanted to flip that? Or better yet, what if the new design wanted the track listing removed? What do we do then? Use regular expressions on the html to remove the track listing from the content? No.

Also, as mentioned in Karen McGrane’s talk, the content should be able to live in a variety of different places. What happens if the content is viewed through a smart watch, or internet fridge? Will we want all of that content handed to us in one chunk? Probably not. Maybe we want to display just the Album title and artist with the option of loading in the track listing if needed.

In the music album example above, we can see sensible chunks of content that could be easily separated into sensible content chunks:

Track Listing
Review / Description (perhaps differing versions for use in different contexts?)
Producer
Artist
Title
Release Date

Using separate input fields for each of these chunks, means that each part of the content is individually available and much more flexible in how and where this content can be displayed.

WordPress has custom fields that can be entered on a per page/post basis, as well as the ability to add custom post types. No doubt other CMSs have similar options available?—?I’m just not very clued up on them.

The use of these custom fields is definitely a step in the right direction, but what we need is for CMSs to be more content-modular at their core. Like I said before, I’m not clued up on CMSs?—?other than WordPress and OpenCart?—?so please don’t hunt me down and shoot me in the face if there are indeed CMSs out there already like this. And if there are please let me know of some good ones. Tar!
Inspiring this post
This post was originally going to be me snivel–bitching about wysiwygs. But I heard this podcast on the web ahead, which talks about content structure in great depth and it got me thinking about it in more detail than my initial post. The podcast also mentioned this talk by Karen McGrane.

On the evening of me writing this post, before publishing the following day, I travelled down to Milton Keynes Geek Night and saw five fantastic talks. One of which was a talk by Relly Annett-Baker called ‘Future Perfect Tense: creating good content for an imperfect web’. A lot of what Relly was talking about was stuff I had been thinking about that day — so that was nice. I will link the recording of the talk when it goes online as it is well worth a listen.

Ingress – Augmented Reality Game

What is Ingress?

Ingress is a game created by a company called Niantic Labs.

It’s a real-time augmented reality game that uses the real world as its playing field.

Players download the app for their android device (ios coming in 2014) and use it to find in-game items that are hiding in the real world – out of plain sight.

The Game Setting

Ingress’s back story is based around the concept of an ‘enlightened power’ that is trying to come through into our world.

The game’s players are then divided into two factions:

The enlightened are believers that this ‘enlightened power’ is for our own good and that it should be welcomed. The Resistance, however, are firm believers that this power is to be feared and should be fought off at all costs.

Across the globe there is a substance called XM – that can be used by agents (players) as a power source – as well as many portals that can be captured in order to create areas of control.

Why I love Ingress

Firstly, it’s a global game. The two factions are spread across the world and play in their local area, which in turn directly contributes to the greater good of your chosen faction. People from all walks of life – all races and religions – play together to help their team win.

Ingress encourages you to explore not only your local area, but also to go out to places you may not have thought to before. This is one of its most powerful features. The fact that it is based in the real world means that you are directly interacting with – and learning more about – the environment around you.

And not only that but you can pretend to be a secret agent as you walk about from place to place.

An Evolving Mythology

The Niantic Lab, who are the creators of Ingress, have not only made the game, but have also created – and are constantly updating – the game’s mythology and back story.

Videos, Images, classified documents and puzzles are posted regularly on the Niantic Project bulletin board for players to read through and investigate. The niantic project site – and materials linked to it – really help create a rich setting for Ingress and allows you to play secret agent whenever you feel like it.

My First Taste Of Manga

I have recently been introduced to the wonderful world of Japanese Manga by some friends at work. I hear mentioned things such as a school with Freddie Mercury as a pupil, humans who turn into cars and people becoming obsessed and consumed by spirals. But the story that set me on the path of reading manga was The Enigma of Amigara Fault – a haunting Lovecraft-esque story written by Junji Ito.

Self Invoking Anonymous Functions

Sometimes, if a project is using a couple of different javascript libraries, you can find yourself in a situation where the $ sign, synonomous with jquery, is used as a reference to more than one of your required libraries.

Conflict!

This conflict can, of course, occur in more places other than just the $ sign, but I’m using the dollar sign as my example, as it’s one of the most widely recognized of web language symbols.

An easy way to avoid conflict between libraries, however, is with what is known as a self invoking anonymous function.

What is a SIAF?

A self invoking anonymous function is a function with no name (anonymous) that calls itself when it loads (self invoking) and encapsulates it from any other external code. It looks like this:


(function(){
  var myVariable = "Inside the function"
}());
console.log(myVariable); // Undefined

How JavaScript Functions take arguments

When calling a function in JavaScript, and many – if not most – other languages, we pass our arguments into it, which are then referenced inside the function itself by a placeholder variable:


function myName(a){
  var p = document.getElementById('mydiv');
  p.innerHTML = "Hello, my name is " + a + ".";
}
myName('David');

In that example, I passed in the string ‘David’, which was referenced from within the function as the variable ‘a’. The variable ‘a’ is unaccessible from outside of the function, as it is only part of the function’s local scope.

With the knowledge of how a function works, coupled with the self invoking anonymous function, we can apply the same principles to how we use our chosen library.

Again, i’ll use jquery for the example but could apply to anything.

So, after you have included the library into your project, pass its reference handle into a siaf and write all your functionality inside of it. Now if another library gets included at any point in the future, we can rest easy that our own code will not break or interfere with another library.




Final note about the example

In this last example, you’ll see i’ve also passed the function a reference to the global document and window objects. This is merely an optimization technique to have a local reference to them should they be needed.

Also those astute readers will notice that i have passed through three arguments : jquery, document and window, however the function is expecting a forth also – undefined. But since we haven’t passed in an argument for ‘undefined’ to attach to, undefined is left… well… undefined.

Why would we do that? Well consider this:


// Some Joker does this somewhere:
undefined = true;
(function($, document, window, undefined){
  if( undefined ){
    // If you don't include undefined in your accepted parameters, it will look to the next outer scope, which has declared undefined = true, which can give you very undesirable results.
    $('.some-selector').addClass('someClass');
  }
}(jQuery, document, window));

Element Queries

I loves me some media queries. In fact if I arrive on a website that I like the look of I’ll often first resize my browser to see how the site looks at different sizes. And if its a fixed width site… I cry and pray for their soul.

Okay so that’s not strictly true… I don’t always cry, but I do test a site’s responsiveness on first arrival. But this is only for my own learning – I like to see how other people have approached the challenge of responsive design.

First Thoughts on @element queries

A couple of weeks ago I found I had an idea in my head, an idea to bring something like @media queries down to the selector level. And that’s all I had – an idea. I didn’t have a workable syntax example or anything.

We already have @media queries!

It’s true that we already have @media queries. And it’s true – they’re awesome, but one thing that @media queries don’t really do justice for is modular CSS. Consider, if you will, a contact form.

Here’s an example of how we might have that in our css:


.contact-form{
  /* mobile first styles */
}
@media (min-width: 640px){
  .contact-form{
    /* Styles applied at your first breakpoint */
  }
}
@media (min-width: 1000px){
  .contact-form{
    /* Styles applied at your next breakpoint */
  }
}

With the above code, you could style your contact form and make different decisions at different breakpoints in the screens width. But what is stopping you from taking that exact same contact form and using it as the main content on your contact page? Well for one you’d need to add an extra class in to overwrite the styles of the contact form:


/* ... */
@media (min-width: 1000px){
  /* the contact form styled for use in the sidebar */
  .contact-form{
    font-size:1.2em;
    padding:10px;
  }
  /* overwriting styles for use in the main contact area */
  .main-content .contact-form{
    font-size:2em;
    padding:20px;
  }
}
/* ... */

With @media queries we have power to make stylistic designs based on many things including screen width, but the overall screen size available has no correlation with modules / widgets that you could be using in your design.

People are already talking about it

The same week I had my own initial thoughts on this, I saw a tweet in my feed by Ian Storm Taylor. The tweet was referencing a blog post by him that talked about this exact thing – the idea of @element queries. His post also goes on to describe a possible syntax for the idea and he also references other people’s thoughts on the subject.

I was happy that other people had had similar thoughts to my own – made me feel along side people I follow instead of behind. So instead of copying the examples from the other posts on this subject, which I will reference at the end of this post, I thought I would offer my own idea for a syntax.

@element query syntax idea


@element .contact-form (min-width:600px){
  .input{
    width:80%;
  }
  .label{
    width:20%;
    font-size:1.2em;
  }
}
@element .contact-form (min-width:1000px){
  input:required{
    border:3px solid darkgreen;
    padding:10px;
  }
  .label{
    font-size:2.2em;
    font-weight:bold;
  }
}

The code above is all self contained. It doesn’t rely on an overall screen size. The only dimensions that it is concerned with are its own, allowing us to style the element’s children in a truly modular fashion.

Of course there are lots of things that could get messy with this syntax. Like if you started trying to use them inside of @media queries, or overusing them on every element in your design. But this is just my thoughts on the subject.

Use with Sass Partials

What I think would be a great way of using these element queries in a maintainable way would be to have a sass partial for each collection of styles for an element. Then who knows – we could even share these out with other people like we do now with full blog themes.

Other resources worth your time: