By releasing Inside government we were testing a proposition (‘all of what government is doing and why in one place’), and two supporting products (a frontend website and a content management system).
Ross Ferguson
People usually forget this. When you don’t, your project has way more chances to succeed.
You might have read that when optimizing your site for speed HTTP requests are something to look at – less requests mean less waiting and usually a faster site. When doing that for CSS you’re faced with a dilemma:
When using the first option your only focus can be on how to optimize the CSS so that it loads as fast as possible and is as small as possible. As you have less files you can easily have that file minified and gzipped even if you’re not using a deployment solution that will do that for you.
Using the second variant gives you more options – you should still optimize the files, but now you have the option of deciding when to load them to make sure that the landing page does not get hit by the added request.
Even though I started with CSS preloading can be done for any resources needed on the page – fonts, scripts, images.
An very obvious case is a search results page. It usually has a very distinct design that requires certain resources not needed anywhere else. But that’s not enough – you need to know when the user will these resources so you don’t go preloading everything just in case. With search it’s when they focus inside a search box – they start typing the query, while you start preloading the resources in the background.
Other obvious places to preload resources:
Other less obvious places are landing pages when the choice a user makes turns into many sub-options, especially when products have the same resources used on the content pages.
If you’re already using a library it probably provides AJAX methods and event methods. If not, you can search MicroJS to find one and adapt the syntax.
A simple preloader is almost as simple as helloWorld – the only thing you need to make sure is that the type of data type is set to text so that it does not get executed.
window.preload = function (src) {
$.get(src, null, null, 'text');
} // call with preload('somefile.css');
If you want to allow the loading of multiple files at once you can detect if the passed element is an array.
window.preload = function (data) {
var a = $.isArray(data) ? data : [data];
$.each(a, function (i, n) {
$.get(n, null, null, 'text');
});
}
// call with preload('somefile.css');
// or preload(['somefile.css', 'otherfile.js']);If you prefer to call the function with many parameters you can just use arguments in the each function call.
window.preload = function () {
$.each(arguments, function (i, n) {
$.get(n, null, null, 'text');
});
}
// call with preload('somefile.css');
// or preload('somefile.css', 'otherfile.js');Key element is to load the resources after the window.onload has happened – this means that any resources needed for the page to function properly have been loaded. If you do stuff sooner you might have to wait for other resources like fonts, images, videos. This means you need to know if the onload event happened – if it has, preload immediately, otherwise wait for the event to fire.
(function () {
var win = window,
$ = window.jQuery,
$win = $(win);
$win.load(function () {
$win.data('loaded', true);
});
win.preload = function (data) {
var a = $.isArray(data) ? data : [data],
fn = function (i, n) {
$.each(a, function () {
$.get(n, null, null, 'text');
});
};
if ($win.data('loaded')) {
fn();
} else {
$win.load(fn);
}
};
}());
// call with preload('somefile.css');
// or preload(['somefile.css', 'otherfile.js']);As you can see I also did a few other things – wrapped the code into a function to isolate all the variables. I also assigned window.jQuery to a local $ to make it a bit more bulletproof.
Needless to say this script needs to be loaded during the load stage. If you intend to load it afterwards you need to make sure that you properly detect the onload event – if you don’t nothing will get preloaded as it will be waiting for that event to fire.
I’ve recently done a few things that would benefit from having an offline mode. Empowered by Appcache Facts I tried to make the newly published La Vuelta 2011 results page an offline-capable app.
The goal of this exercise is twofold:
It’s as simple as writing a cache manifest. It pays to name it [something].manifest, as Apache already serves the correct header with that suffix. What you do is list all the files you want cached, add stuff you allow on the network (check Appcache Facts and Dive Into HTML5 – Offline Web Applications) and it all works. Except it doesn’t.
CACHE MANIFEST
# version 1
CACHE:
resource.js
NETWORK:
*
http://*
https://*If you’re using AJAX to get data from a server using jsonp/script, your framework of choice (jQuery in my case) will probably default to using a no-cache approach to loading it. This will mean that it will request the file + some suffix to prevent browser caching. This will mean that the resource will not be available if you’re actually online.
You can use navigator.onLine to switch cache on/off, but I suggest you first try requesting the no-cache resource and if it errors out, request the cached resource. The benefit is that even if you are online but the server is not, the users will still see the data / use the app.
$.ajax({
dataType: 'script',
url: 'resource.js',
cache: false,
success: successHandler,
error: function () {
$.ajax({
dataType: 'script',
url: 'resource.js',
cache: true,
success: successHandler
});
}
});Fixing the AJAX meant that it worked properly on the desktop (test with Firefox that has offline mode) and in Safari on the iPad. The trouble started when I added the app to Home Screen – data failed to load. It was the same app as in Safari and it should have worked.
After some debugging I found out that the data actually was loaded but the eval failed (I was using $.getScript). Some weird testing showed that the problem was a newline character in the data. As I really liked the newline there I added some code to the error handling that removed the newline and evaled the data, then ran success. And it worked!
$.ajax({
dataType: 'script',
url: 'resource.js',
cache: false,
success: successHandler,
error: function () {
$.ajax({
dataType: 'script',
url: 'resource.js',
cache: true,
success: successHandler,
error: function (xhr) {
eval(xhr.textResponse.replace(/\n/g, ''));
successHandler();
}
});
}
});It’s somewhat hard to debug offline stuff. I suggest using a clearly visible version indicator in the file to make sure you know which version of the file you’re looking at. Also remember that the first time you load the app after changing the file & cache manifest it is served from cache. At the same time the manifest is checked and on the iPad the files are downloaded after everything else is done (app finished loading and rendering).
After these problems were solved I used the aforementioned navigator.onLine to hide stuff that normally comes from the network but is not relevant to the offline app (banners, share links, like/+1 buttons) and you can now check the La Vuelta 2011 results page.
I’ve seen a discussion recently on how to protect your forms from spammers/bots that come and fill the forms to either fill your database with crap data or fill your page with porn links. When I read the answers I figured out that none of the people read the amazing article I did years ago, so I decided to try to remember what it said. So, a big fat disclaimer: I read this in an article somewhere and I don’t remember where. If you know the original article please post it in the comments, I’d love to link to it, I bet it has way more info than this one.
Almost all websites now have some forms on them, some of them are contact / registration forms, others use the data submitted and display it on the site itself (comment forms). But letting others submit data to your site/database opens you to all sorts of attacks. If you actually show the content of the submitted form, you’ll get a bunch of spammers posting comments with lots of links. If you only store data and not show it anywhere you’re still at risk – if you don’t notice your disk can fill up, your database may grow beyond its limits,… So what we want to do is to prevent bogus form posting.
If you think about writing a spam-bot that will try to spam as many sites you possibly can you have two basic approaches.
This is a very simple approach – you use a person to submit the form, preferably with something that looks like real input and record the request made. Then you hand that data off to the bot, it changes some content and tries to resubmit it.
I wanted to say AI, but it really isn’t. What it is is a set of simple rules and randomized values that the bot thinks might trick your site into accepting the submit. Let’s say you have three fields, two are inputs with field names “name” and “email” and the third field is “comment”. A simple script can fill these with “valid” data and try to submit it.
By far the simplest, but also most costly for spammers. Go on Amazon Turk or whatever other service, send a link to a Google Spreadsheet and have people manually enter the stuff into your forms. This is the source of “Sorry, this is my job” endings to spam comments.
Add a field to the form that the user must fill with something that humans can do easily, but machines can’t. The biggest group here are Captchas (display an image with distorted characters, possibly an audio link that reads out the same characters, and have the user somehow figure it out and write the solution), but there have been others, like a “Human?” checkbox, or “3 + 4 =” fields, “Is this a kitten?” with a pic next to it.
Supposedly by far the easiest way to do this is by introducing a 2-step process. After the initial submit, you get back a preview of the submitted data, possibly with a checkbox that says “Is this correct?” and another submit button. Robots are usually not good at following through and thus don’t actually submit the content.
Both solutions have an impact on user experience. With Captchas it’s sometimes really hard to see what they are and even if they have a “different image” link, it just seems like the owner of the site wants to make your life hell before you can submit your data. The other challenges might be easier on the user, but also easier to figure out if you’re being targeted by bots. The 2-step process works great for comments, that usually don’t have an edit link, so it might actually be good for user experience if done right (not Wikipedia style), but are less appropriate on other types of forms.
These are the techniques that should prevent most bogus form entries from random passing bots, except “Human entry” – no protection for that, even though Captchas try hard. There is not much you can do when you’re targeted…
Use this field to trick autoguessing bots to submit something in a field you know should be empty.
If the form post includes content in this field discard it and redirect back to the form. The trick is to make sure the bots don’t figure out this is a honeypot, so use valid looking but nonsensical classes…
Use it to prevent resubmit of data too far from the creation date. Allow users a few hours to post the form.
To prevent manual modification you can use either proper encryption (symetric or asymetric) that will allow you to decode it on form post or use this date in combination with the onetime token.
Use this field to prevent replay of request data. If you can, save it into the database.It is a good idea to make this token in a form that it cannot be faked (say one character changed ad you have a valid one). This can be done with hashing data or encryption.
This one can be as tricky as you want. What I usually do (disclaimer: I don’t know much about encryption so this might be crap advice) is use a plain datetime field with the onetime token generated from IP address, UserAgent and the date field with HMAC. There is no need for this token to be reversible – I can recreate the same thing with the data from the form post and check if it matches.
When using these techniques make sure you take care of the user experience. If you detect a problem on what might be valid user input (“timeout” on the date field with a non used onetime token, wrong onetime token from an ip change by the service provider), you might want to display a second step from the “2-step process”. Whatever you do, don’t call your users spammers or bots – be nice, bots don’t read the text anyway.
I know of no plugin that uses all of these techniques, but I haven’t really looked for it. What I do know is that I don’t want to ever use a Captcha, cause it often keeps me out, and the 2-step process in just too weird sometimes. Hope this helps. And again – if you find the original article (must be some 5 years old now at least if not more) or have any other solutions you use or endorse, do leave a comment.
Most of what I learned on the web in my early years was from “View Source”. Then came the books and the conferences.
It makes me sad to see lots of sites minifying code for performance and not releasing the full version of the code so other developers could learn from it. It’s the openness that I really like about the web.
I think there should be a “View Source Alliance” that would set rules on how to release your code in a way that visitors can benefit from the speed of minified code, while web developers can still find your full files and learn from them.
I’ll set a few simple rules here, hoping somebody with more reach picks them up:
This way you will not only help others, but sometimes even stop breaking the law. Because you might be using some open source code with a licence that says you must release your code with a same/similar licence.
I don’t think I ever wrote about motivation much here even though it’s one of my favorite subjects and was also the main topic of my thesis. Recently I’ve been thinking about it quite a lot again and I’ve come to the conclusion that it’s very important to use it to hire the right person.
Back to the beginning. There are loads of theories on motivation and most of them just cover different aspects and mostly they can all live together. One of the aspects of motivation is where it comes from. That gives us intrinsic motivation and extrinsic motivation. Obviously it’s not a boolean thing as any individual sits on a line between the extremes. And there’s also the matter of having a different source of motivation for different things. Let’s not get into that.
Let me quote Wikipedia on this:
Intrinsic motivation refers to motivation that is driven by an interest or enjoyment in the task itself, and exists within the individual rather than relying on any external pressure.
We are motivated by the fact that we’re getting something done and by the feeling we get ourselves when we’re done. We’re not in it so someone can tell us we did a good job. We don’t really care. A friend of mine once said: “It’s for me. If somebody else likes it – great.” We like to think that the more we get into the subject, the better we’ll be at it and the better the result. In other words no relying on luck, no shortcuts, no marketing/selling, no subpar stuff. Because of all this we don’t like when others interfere with stuff we’re responsible for.
Another quote from Wikipedia:
Common extrinsic motivations are rewards like money and grades, coercion and threat of punishment. Competition is in general extrinsic because it encourages the performer to win and beat others, not to enjoy the intrinsic rewards of the activity.
These people often need to be “managed” to give them the sense of direction and success and are in that way more demanding. They also need more information about what is going on and might see the successes of their co-workers as their own and be empowered by them.
You might want to hire intrinsically motivated people when you don’t have the management layers to keep them motivated or you just don’t have time to do that. On the other hand it’s very hard to keep them motivated when all the fun work is gone and thus tend to either switch tasks/assignments or try to over-explore/discover. These two reasons are also why some people want to hire intrinsically motivated employees only to later regret it as they can’t motivate them anymore or don’t know how.
Hiring extrinsically motivated people might be better for cases where you can manage them properly as they might feel lost without guidance. They are somewhat easier to motivate as you have a lot more ways to do it – sometimes even just a public pat on the back suffices. They are surely a better choice for a company in an established market as they thrive on beating the competition. If you have an “employee of the month” you should hire extrinsically motivated people.
I think it’s very important to hire a homogenous team motivation-wise. An extrinsically motivated manager might have a problem motivating an intrinsically employee and the employee won’t get why his extrinsically motivated colleague is bummed that he wasn’t complimented on the great work last week.
We intrinsically motivated have a problem. Even though that extrinsically motivated people can internalize motivation when it matches their values and beliefs it is much more common for somewhat extrinsically motivated people to become more and more extrinsic with time due to the Overjustification effect. As that means that their number will go up with time, most of us are used to just getting in to solve the problems and then get out. Somewhat ironic that it sounds like a mercenary.