Category: Frontend development

Hands-on Google Apps for Work customisation

Ik heb een nieuwe blogpost geschreven voor Now Digital:

Zo gebruiken we bij Incentro vaak formulieren om collega’s uit te nodigen voor een meeting of evenement en kunnen we daarmee direct inventariseren wat men wil eten.We merkten echter dat vaak mensen wel ja zeiden maar geen afspraak in hun agenda zette en daardoor last minute toch niet kwamen.

Kasper – Now Digital

Lees verder op Now Digital:

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


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>

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">
    <span contenteditable="false">one</span>
    <span contenteditable="false">two</span>
    <span contenteditable="false">three</span>

$('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>');

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.

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.


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.

Copyright © 2023 Kasper

Theme by Anders NorenUp ↑