Ik heb 2 tracks gemaakt. Emptyness heb ik een jaar geleden in de Brexbachtal verzonnen tijdens mijn Gilwell training. Kandersteg is in Kandersteg ontstaan tijdens de zomervakantie van 2014.
Page 3 of 10
Nieuw optreden
Volgende week (19 juni) ga ik Iris begeleiden met het nummer “Dat ik je mis” van Maaike Ouboter. Het wordt mijn eerste optreden als gitarist, heb er heel erg veel zin in.
Op en neer
op en neer
op
en neer
nog een keer
telkens weer
op en neer
soms wel op
maar niet weer neer
De laatste bladzijde
Langzaam lees ik de laatste punt.
De zin klinkt na in mijn hoofd.
De laatste pagina sla ik om en met een zucht volgt de kaft.
Dit is het einde van een fantastisch avontuur.
Mijn hoofd is vol.
Vol van vreugde, verdriet en meer emoties.
Te vol om los te laten of te denken.
Ik moet gaan slapen.
Maar ik weet dat ik morgen nog weet wat ik nu denk en heb beleeft.
Het pad achter me is ingekleurd en vol details.
Het pad tot drie meter voor me is strak van de plavuizen.
De meters erna zijn vol modder.
Daarachter is het vaag.
Een dikke mist verhult de vele avonturen.
Ik ben klaar om te gaan.
De reizigers zal ik weer weder zien.
Het boek sluit, maar het verhaal begint nu pas.
Klaar met vandaag
Ik ben klaar met vandaag
Ik sluit alle ramen,
De deur op slot
Loop door de gang en bedenk me een vraag
Ben ik echt klaar met vandaag?
Ik stap dan mijn bed
Mijn ogen gaan dicht
Probeer dan te slapen maar dat gaat te traag
Ik ben klaar met vandaag
Kan nog niet slapen
En ben ook niet moe
Mijn lichaam is wakker, m’n hoofd wil te graag
Ik ben nog niet klaar met vandaag
Ik doe de tv aan
En staar naar het beeld
Het is nogal helder maar ik zie het vaag
Ik ben klaar met vandaag…
Drag and drop
Modern browsers come shipped with a lot of nice features in order to support drag and dropping. With only little help of javascript a lot of great tools can be built. But there is one downside, if for example you wished to have a lot of metadata then you’ll have to do that all by yourself. Also not all browsers transfer the same things on a drop event. For example Opera adds a meta tag to the beginning. Also some browsers keep the style from the source by adding it inline. (the horror for most fronteers) In order to do simple drag and drop, also being able to keep source data but defenitely not the styling, I had to get rid of these things.
Let’s start at the beginning. There are a few events that are used in drag and dropping. The drop event is used for, stating the obvious, dropping of the dragged content. The event handler contains the original dragged data in event.dataTransfer. This only works when you allow this property to be set. (assume jQuery, see code below) This dataTransfer contains the dragged data in several mimetypes. Almost always there are the ‘text/plain’ and ‘text/html’.
$.event.props.push('dataTransfer');
I know regex
One of the most simple solutions is by just using the ‘text/plain’ type in order to print the dragged content. This would be awesome when there is only plain text, since one of the requirements is to show images and keep the datastructure available, this is not a good solution.
After a few other solutions I came up with replacing the content by nothing. This requires writing a regex that matches the entire <meta…> tag and also one that matches with all style=”…”.
// remove meta tag (everything that matches <meta >) (webkit)
draggedHtmlData = draggedHtmlData.replace(/<meta(.*?)>/g, '');
// strip styles (everything that matches style="*")
draggedHtmlData = draggedHtmlData.replace(/style="(.*?)"/g, '');
The outcome is quite clean html that respects the original structure and attributes but does not include meta-tags or strange style attributes.
Bonus: creating tag list
Assume the following html:
<div contenteditable="true">
<span contenteditable="false">one</span>
<span contenteditable="false">two</span>
<span contenteditable="false">three</span>
</div>
It basically states that you can type anywhere except in the current existing tags. The goal here is to create tags once one finishes typing. A tag consists of a word and in order to add some functionality and style there must be added a around it. An event will be triggered when a user leaves the area. Now there is one problem with the $.html() and $.text() because they either provide too much information or too less.
<div contenteditable="true">
zero
<span contenteditable="false">one</span>
<span contenteditable="false">two</span>
<span contenteditable="false">three</span>
four
</div>
$('div').text() returns "zeroonetwothreefour"
$('div').html() returns "zero<span contenteditable="false">one</span><span contenteditable="false">two</span><span contenteditable="false">three</span>four"
This is an issue, the solution that I am currently using is get the $.html() and strip the from it by replacing them with a space. Next step is split the input on space and re-add the span tags.
var tags, length;
tags = $('div').html().replace(/<(.*?)>/g, ' ');
tags = tags.split(' ');
length = tags.length;
for (var i = 0; i < length; i = i+i) {
$('div').append('<span contenteditable="false">' + tags[i] + '</span>');
}
Lowlands 2013
Lowlands, alweer de vijfde keer dat ik mijzelf eigenaar van een ticket mocht noemen. De eerste keer was legendarisch Sigur Rós, Nightwish en Haydamaky waren heel gaaf en staan nog steeds vers in mijn geheugen. Stiekem hoop ik elke keer weer op zoiets een andere keer bracht Massive Attack net zo’n toffe show. Wat zou deze editie brengen?
Donderdag verliep de reis voorspoedig, na de trein komt de rij, wacht welke rij? Daarna de bus en dan het wachten voor de kaartjes controle. Daarna doorstampen naar camping 1. Helaas waren er dit jaar meer karretjes dan ooit en tjsa die kunnen nou eenmaal niet gemakkelijk over de brug. (lees: stop alles in een backpack!!!) Er was dus een rij voor de brug. Na een paar uur wachten en reizen was het moment dan toch echt daar: de tent staat.
In de vroege ochtend als de camping aan het overstromen is qua aantal tentjes spreken we met elkaar door wie wat wil zien. We beginnen de dag met Tom Odell een goede artiest maar van een afstandje iets wat veel van hetzelfde. Daarna staat Seasick Steve op het programma, deze oude rot weet zeer te boeien en geeft een heerlijke show weg. Dan valt er een gat in onze planning en na wat rond dolen langs verschillende tenten komen we uiteindelijk bij Villagers terecht. Deze Ierse band weet een fantastische show neer te zetten, strak en erg interessant. Daarna is het tijd voor Hurts, een duo waarvan ik het nummer Wonderful Life al meerdere weken niet uit mijn hoofd krijg. Gelukkig spelen ze die vrij aan het begin want ik wil ook heel graag naar Biffy Clyro. Deze Canadezen geven een dampende rockshow. Later op de avond pak ik nog een stukje van de metalgoden Slayer mee. De afsluiter van de dag, terwijl het buiten keihard regent, is Nine Inch Nails deze industrial rockers vormen het absolute hoogtepunt van Lowlands 2013. De show was zowel visueel als muzikaal een enorm spektakel. (kijk hier de show)
Na de regen op vrijdagavond was het zaterdag weer prima weer. De dag begon met iets waar ik al een tijdje naar uitkeek: Daughter. Intens genieten van zeer mooie muziek. Daarna volgde een pot heiligschennis in de Alpha met Nevermind project waar een aantal Nederlandse artiesten zich waagden aan covers van dit Nirvana album. Het was tof, op 1 band na, the Opposites hadden beter thuis kunnen blijven. Later op de middag was er Imagine Dragons, deze jonge band heeft al meerdere hits op hun naam staan en wisten live zeker een toffe show neer te zetten. Het was wel allemaal wat overdreven qua uitingen endergelijke. Zoals elk jaar is er ook een band in de Alpha op een iet wat ongunstig tijdstip met iets te rustige muziek voor dat moment, dit jaar was dat The Lumineers waar we in slaap vielen. Afsluiters van de dag waren Chvrches, leuk maar te veel bas, en Editors, goede show.
Zondag, laten we eens naar Llowgenda gaan, echter was dit vrij saai dus ben ik door gegaan naar S O H N. Deze band gaf een zeer fraai optreden. Daarna volgde Jacco Gardner, MT Wolf en Jake Bugg. ‘s Middags kwam nog Fall Out Boy en het optreden waar ik al naar uitkeek sinds dat ze bekend waren gemaakt Bat For Lashes. Dit optreden was fantastisch, helaas was de tent niet heel vol. Alabama Shakes viel wat tegen, Foals was wel aardig, Franz Ferdinand was erg tof! Als afsluiter van de dag kozen we voor Fiddler’s Green, deze Duitse band maakt Ierse muziek en zorgde voor een top feestje en bracht nog even het Folkwoods gevoel terug.
Hoogtepunten deze editie waren Nine Inch Nails, Villagers, Fiddler’s Green, Daughter en Bat For Lashes.
The jQuery problem
$ is undefined
Nevertheless we stumbled upon the error “$ is undefined”. The root cause of it was that the script we had was being executed before jQuery was loaded. Normally I would say, just include the script after jQuery has been initiated but in this case this was not possible.
Then I started thinking of a presentation I have been to by Remy Sharp, “I know jQuery. Now what?” He spoke about not using jQuery, and ever since the Mobilism event I have kept in mind that, at least for input fields:
$(this).val() === this.value
It turned out not to be very difficult since all we did was just getting a selector and kick off some functions. So this:
var selector = $('.ourSelector');
selector.on('change', function () {
// do stuff
});
became this:
var selector = document.querySelector('.ourSelector');
selector.onchange = function () {
// do stuff
};
One thing Remy did is creating a substitute for the $ and on method. We decided not to, because that might have just leaded to other unforeseen problems with the rest of the site.