Kasper

Page 3 of 7

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));
									

iScout – Opening Ceremony 2.0

i, i, i all you hear is i. iPhone, iLife and now also iScout. iScout is a game for scouts where they have to solve puzzles and perform crazy exercises. Like last year we participated and I wanted to share one of the exercises we had to do.

The description was “Built a opening ceremony 2.0” and nerds as we are we immediately thought of a jQuery solution. So we started thinking and worked out a simple idea.

The HTML consists of just 2 div elements and 2 buttons, we could get the same result with one but for simplicity this was chosen.

<div id="mast"></div>
<div id="vlag"></div>
<button id="hijs">Hijs vlag!</button>
<button id="strijk">Strijk Vlag!</button>
​
									

The CSS, we used a gradient for the creation of a Dutch flag.

#mast {
    width: 10px;
    height: 200px;
    border:1px solid #000;
    border-radius: 5px;
}
#vlag {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 10px;
    top: 150px;
    background: #ff0000; /* Old browsers */
    background: -moz-linear-gradient(top, #ff0000 0%, #ffffff 50%, #0000ff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(50%,#ffffff), color-stop(100%,#0000ff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff0000 0%,#ffffff 50%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff0000 0%,#ffffff 50%,#0000ff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff0000 0%,#ffffff 50%,#0000ff 100%); /* IE10+ */
    background: linear-gradient(top, #ff0000 0%,#ffffff 50%,#0000ff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=0 ); /* IE6-9 */
}
​
									

And the jQuery for handling the required events.

$('#vlag').hide();
$('#strijk').hide();
$('#hijs').click(function() {
    $('#vlag').fadeIn().animate({
        "top": "5px"
    }, 3000);
    $('#hijs').fadeOut(function() {
        $('#strijk').fadeIn()
    });
});
$('#strijk').click(function() {
    $('#vlag').fadeIn().animate({
        "top": "150px"
    }, 3000).fadeOut();
    $('#strijk').fadeOut(function() {
        $('#hijs').fadeIn()
    });
});​
									

Check jsfiddle for the result.

Fronteers

Today on my 24th birthday I joined the Fronteers association, this organisation is focussed on improving the level of knowledge of Dutch frontend developers. I am looking forward to follow some courses and I hope to be able to visit the conference.

 

« Older posts Newer posts »

Copyright © 2018 Kasper

Theme by Anders NorenUp ↑