HTML5: prefetch

Posted on by
Reply

Prefetch allow the browser to fetch a defined document, it could either be a picture, or a web page. The fetching happen while the browser is idle.

page A

<link rel='prefetch' href='/assets/img/image.png'>
/* content */
<a href='/pageB.html'>

The user click on pageB link after reading the content (let some time for the browser to cache the pictur on pageB)

Page B

<img src='/assets/img/images.png'>

Page B is loaded very fast because the picture is already cached by the browser.
Using google analytics, prefetch could be used to cache the page which receive the most rebounds from the landing page. According to rocketmill this features is only supported on chrome and firefox but with differents keywords

For cross browser compatibility, it would be preferable to use

<link rel='prerender prefetch' href='/assets/img/image.png'>

Related Posts:

  • No Related Posts

PHP Javascript:share a timestamp

Posted on by
Reply

Php use the timestamp in second and javascript in millisecond. So when sharing a timestamps between javascript and php, it should be transformed as following:

php to javascript

new Date(date*1000)

javascript to php

new Date(date/1000)

Related Posts:

PHP: Performances

Posted on by
Reply

Using reference can speed up the code execution of the code

$a = "papa noel";
$b = &$a;

b will point to the value of a. In this situation there is a gain a performance

$a['b']['c']['d'] = '42';
$b =&$a['b']['c']['d'];

In this situation it’s better to use

$a['b']['c']['d'] = 42;
$b = $a['b']['c']['d'];

Using Simple and Double quotes

Simple quotes must be used for strings only, php won’t execute the content inside, while double quote could contains variables

$world = 'fubar';
echo "hello $world";
//or
echo "hello {$world}s"; 
// will display hello fubar
echo 'hello $world';
// will display hello $world

Defining sizeof or count  before to use it in the loop

$size =  count($array);
for($i = 0;$i < $size; $i++)

Instead of

for($i = 0;$i<count($array);$i++)

Related Posts:

HTML 5: new attributes

Posted on by
Reply

This week I found some new html 5 attributes

The first one is AUTOFOCUS, it will put automatically the focus on the input once the DOM loaded. Only one input can have the autofocus.

The equivalent javascript for autofocus is

var el = document.getElementById("autofocus");
el.focus();

The Second one is REQUIRED, it’s also an input’s attribute. Once the form is submitted, it will check whether the input is empty.

The equivalent javascript of required is

var el = document.getElementsByClassName("required");
if(el.value == "")
return false

The third attribute is CONTENTEDITABLE. It allow the user to edit the content within the div with contenteditable attribute
Exemple, click on the div below and write some text:

One of the most useful features of siege is that it can take a url file as input, and hit those urls rather than just a single page. This is great for load testing, because you can replay real traffic against your site and see how it performs, rather than just hitting the same URL again and again. Here's how you would use siege to replay your apache logs against another server to load test it with.

And it’s compatible with the last versions of FF, IE, Opera, Safari, Chrome

The fourth attribute is READONLY, to add into an input, this will make the input in readonly mode, which means the content can not be erased or changed.

The javascript (jquery) to do the same effect

$(".readonly").keyup(function(e){
    e.preventDefault()
})

Related Posts:

Css+Js: Light and shadow

Posted on by
Reply

The idea is not my but the code is.

Demo

Just move the mouse for moving the light.

 

The source is on Gist and can be forker

 

Related Posts:

Javascript: small function for adding checkbox on password input and reveal the password

Posted on by
Reply
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 
var reveal = function(msgIn, msgOut){
    msgIn = msgIn || "Reveal it!";
    msgOut = msgOut || "Hide It!";
   
 
    $("input[type=password]").each(function(){
        var self = $(this);
        $(this).after("<span id='revealctrl'></span>")
            .next()
            .append("<input type=checkbox id='revealCheckbox'>")
            .append("<span id='revealMessage'>"+msgIn+"<span>")
            .find("#revealCheckbox")
            .click(function(){
                if($(this).attr('checked')){
                    self[0].type = "text";
                    msg = msgOut;
                }
                else{
                    self[0].type = "password";
                    msg = msgIn;
                }
                msg = "<span id='revealMessage'>"+msg+"</span>";
                $(this).next().remove().end().after(msg);
        });
    });
}
view raw jquery.revealit.js This Gist brought to you by GitHub.

Exemple of use: http://jsfiddle.net/roine/pZr2Z/

Related Posts:

Javascript: Check whether a method exist for an object

Posted on by
Reply

1 Exemple with a predefined Object such as document

if("URL" in document){
    alert(document.URL)
}

2 Exemple with Object created by myself

var products = {
    carpet:"500",
    sendTo:function(){
        return "France"
    }
}
if("carpet" in products)
    console.log(products.carpet)

Extra: See all the methods existing for an object.

for(i in document)
    document.writeln(i+" <strong>will return</strong> "+document[i]+"</br>")

 

 

Related Posts: