Tag: jQuery

The jQuery problem

05/07/2013 / kasper / 0 Comments

$ 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.

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.

Frontend development and mobile security

24/01/2013 / kasper / 0 Comments

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.

Datepicker headache

02/04/2012 / kasper / 1 Comment

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

08/03/2012 / kasper / 0 Comments

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.

Create string from jQuery object

19/02/2012 / kasper / 0 Comments

Examine the following:

<div class='item'>
    Here is some sample text.
    <a class='item-of-interest' href='#'>add</a>
</div>

The “Here is some sample text” might be there but not always. What you then want to check is whether the inner html of $(‘.item’) is equal to the link item alone. Since .html() returns a string representation of the html and $(‘.item-of-interest’) returns a jQuery object, you will have to find a way to convert this object to a string representation. The easiest way to do this is by using the following code:

var html = $('<div>').append($('.item-of-interest').clone()).html();

You temporarily create an element to which you append the .item-of-interest, then you request the inner html of it.