Kasper

Page 3 of 7

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

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 GardnerMT 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
									

One of the most horrifying things that happened to me turned out to be a good lesson instead. Working on huge websites most of the time means that all kind of plugins, like jQuery, are provided by default. Also on my latest project, proactive chat, we were quite sure that the site uses jQuery.

quite sure jquery was loaded

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
									

This inspired me to not see it as a problem but as a challenge to get rid of jQuery for this problem.

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.

SamenLoop voor Hoop

Ik ga dit jaar meedoen met de samenloop voor hoop, hopelijk halen we veel geld op.

15 & 16 juni vindt de Samenloop voor Hoop in Badhoevedorp plaats: Het wandelevenement van KWF Kankerbestrijding waarbij (ex)kankerpatiënten in het zonnetje worden gezet en overledenen worden herdacht. 24 uur lang maken verschillende teams op het parcours van atletiekbaan Kombijsport gezamenlijk een lange wandeling. Het staat symbool voor de voortdurende strijd tegen kanker.

Tijdens de samenloop vindt er een kaarsenceremonie plaats. Langs het parcours worden zakken neergezet met een brandende kaars er in. Op de zakken zijn persoonlijke boodschappen geschreven, geplakt of getekend. Als ’s avonds de kaarsen worden aangestoken, branden er honderden lichtjes voor al die dierbaren die met de ziekte kanker geconfronteerd zijn.

Tijdens dit evenement zamelen we geld in voor wetenschappelijk kankeronderzoek. Jij kan een persoonlijke boodschap op de kaarsenzakken achterlaten, door voor 5 euro een zak te kopen. Deze 5 euro doneer je aan KWF Kankerbestrijding, en zo komen we steeds een stap dichterbij dit wetenschappelijk onderzoek. Koop een kaarsenzak en gedenk jouw dierbare.

www.samenloopvoorhoop.nl

My youngest son

One of the most inspiring and loveable songs I know is “My youngest son came home today” by Eric Bogle. But I actually do not know his version, the version I grew up with is from the Dutch folkband Kilshannig. Unfortunately they have called it a day. So I decided to give it a try on soundcloud.

Listen for yourself:

 

 

Frontend development and mobile security

Security is and always will be one of the biggest topics in web development. Now that the mobile web becomes bigger and bigger it has become even more important because most users do not have any protection installed on there mobile devices.

Of course there is a very clear reason why people do not install anti virus apps on a mobile device, the threat is simply not yet big enough and there has not been any news report on mobile viruses or malware. This is something we, frontend developers, need to have in mind when developing web applications.

Working with backend systems

One of the methods to prevent people from submitting unwanted data is to validate the entered data. Most often there is little frontend validation and the backend will perform the rest of the validations. But is that enough? Most frontend validations are just checking whether or not a field is required. But when the user gets asked to enter some kind of pre-formatted code, such as a Dutch postal code (1234 AB), it is not only safer but also more userfriendly when a user can only enter four digits and two alphabetic characters.

This also works the other way around. When retrieving data from a backend system you should not want to have to care about a customer that sees strange things on a website Especially not when you are a trusted organisation. Therefore it might be a good idea to validate the data provided by the backend. This can be achieved by using the same validators that are used to validate the input data from the frontend.

Conclusion

Mobile and security are getting more important these days for frontend development. The examples given are of course just simple examples to illustrate how frontend can help in improving a site security.

Movement

The past few months flew away like a hurricane and I cannot even recall what happened since I entered this rollercoaster. Actually the only stable factors have been Scouting and my work. And stable with work is a bit a relative saying here. Because in a stable project all members stay onboarded but here they come and go. Luckily for me I stay.

But next to work the most changes are in my personal situation. Half a year ago, after we broke up, I decided to buy my first house. Easy said but that did have a lot of consequences. I searched for homes in the place I live and neighbouring cities. After I visited at least 10 different homes there was only one that came close to what I requested. So I bid for the house and after some back and forth calls we agreed to a nice price. Then I had to arrange several facilities such as a mortgage. This took quite some time but in the end it was not that difficult at all because of my consultant.

At the same time we were preparing the yearly scoutscamp, we went to Nijmegen. This was a week filled with fun, water, sun and great activities. I really felt energetic again. Also during camp I received a text message that everything for my house was done so I could become the owner.

On the 3th of August I received the keys and up till today I am still busy with some DIY-jobs. I hope to move over soon…

Weather Systems tour

Last Saturday a long awaited dream came through. For at least 10 years I am a huge fan of the British Anathema. I was one of those who were very excited about their “we’re here because we’re here” album and when I heard they were playing in Paradiso I immediately bought tickets. Shortly after that moment they announced “weather systems”.

The evening started at 7pm with the band Amplifier. After forty-five minutes they left the stage and the wait began. In between we could enjoy the atmosphere from the great Paradiso when suddenly the sound became louder and A New Machine #1 scattered through the speakers. It has begun.

From the very first tones it was clear that this was going to be a very special evening. Anathema had prepared a very nice set which contained as well songs from Alternative 4 to their latest work. Highlights of the evening for me were Deep, and everything from Judgement. This is the album that got me into Anathema. They played one after another highlight, and when Internal Landscapes was played we knew that this was it. But they continued with the epic songs Closer and A Natural Disaster.

At last they started Shroud of False and I got shivers down my spine, it was immediately followed by Fragile Dreams. And that was it, my first live Anathema experience, and it was awesome. Next time I’ll be there again. For now, turn on the cd’s.

  • A New Machine (Part 1)
  • Untouchable, Part 1
  • Untouchable, Part 2
  • Lightning Song
  • Thin Air
  • Dreaming Light
  • Deep
  • Emotional Winter
  • Wings of God
  • A Simple Mistake
  • The Storm Before the Calm
  • The Beginning and the End
  • Universal
  • Panic
  • The Lost Child
  • Internal Landscapes
  • Closer
  • A Natural Disaster
  • Flying
  • Shroud of False
  • Fragile Dreams

Hugo

Last weekend I saw Hugo, beautiful movie. And one of the main characters, Hugo, said something very intriguing that I needed to share with the world.

I’d imagine the whole world was one big machine. Machines never come with any extra parts, you know. They always come with the exact amount they need. So I figured if the entire world was one big machine… I couldn’t be an extra part. I had to be here for some reason. – Hugo

Datepicker headache

The jQueryui datepicker has been a pain in the ass for us the last few days. But with some research I managed to enter a date before 1970 as timestamp. These values are normally represented as negative timestamps. For yet an unknown reason the datepickers setDate function does not allow these values.

To solve this issue we simply create a new Date() from the timestamp to fill the setDate function. Now the datepicker does accept these values.

$date.datepicker('setDate', new Date(-4496400000));
									

« Older posts Newer posts »

Copyright © 2018 Kasper

Theme by Anders NorenUp ↑