Embedding Youtube and HTML5 Video Option

A couple of things I changed to make use of the new iframe code for embedding Youtube videos on the website. The new code supports both Flash and HTML5 video. Only users of supported browsers who opt into the Youtube HTML5 trial will have the HTML5 video option available.

<iframe width="690" height="419" src="http://www.youtube.com/embed/<VIDEOID>?wmode=transparent&modestbranding=1&rel=0" frameborder="0" allowfullscreen></iframe>

Using embed instead of ‘v’, which goes hand in hand with wmode = transparent. What this does is allow divs (drop down menus) to overlay on top of the iframe/video.

modestbranding to reduce Youtube branding.

rel=0 if you do not want to show related videos (which may be a distraction from your web page content) after the user finish playing your video.

Posted in Web Related | Tagged , , , | Leave a comment

@fontface, Google’s WebFont Loader and Cufon

Have been trying to resolve the issue of FOUT (Flash of unstyled text) when using @fontface on IE.

The best solution I found was to use Google’s WebFont loader.

To not allow the default font to show at all before transitioning to the custom font, first hide the elements using CSS with visible:false (on the pre-condition that JavaScript is enabled). Visibility CSS property is used rather than display(:none) so that the elements do take up their respective blocks of space when invisible and waiting for the custom font file to load.

<script type="text/javascript">
     document.write('<style>.ELEMENTNAME{ visibility:hidden;}</style>')
</script>

Run the WebFont loader, referencing the font file that is already within the CSS file. (@fontface syntax example for cross browsers)

function initFont() {
    try {
        WebFontConfig = {
            custom: { families: ['FONTNAMETOBEUSED'],
                urls: ['/Styles/STYLESHEET.css']
            }
        };
        (function () {
            var wf = document.createElement('script');
            wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
   } catch (e) {
         //Possibly add handler here to show invisible elements if Google can't serve up the webfont.js file
   }
}

The WebFont loader will throw a .wf-active CSS class into the html DOM element once the font is loaded and ‘active’, hence set this in CSS to show the hidden element with @fontface

.wf-active .YOURELEMENT {visibility:visible;}

Lastly, if @fontface is not supported by the browser, I can fall back on Cufon to resolve the fonts, especially for IE6. I’m also using Modernizr for feature detection.

if (!Modernizr.fontface) {

        (function () {
            var wf = document.createElement('script');
            wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://localhost/Scripts/cufon.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);

            //Run cufon in cufon.js, or wait for cufon to load
            setTimeout(function () {
                try {
                    Cufon.replace('.ELEMENTNAME', { fontFamily: 'FONT_NAME_IN_CUFON' });
                } catch (e) { }
            }
            , 1500);
        })();
    }
Posted in Web Related | Tagged , , , , | Leave a comment

Get Bing Interactive Map by jQuery

Wanted to initialise Bing map using an exact query  by address.

I had to first get the coordinates of the address before initialising the map using jsonp:

function getMap(query, key, target) {
    $.ajax({
        url: "http://dev.virtualearth.net/REST/v1/Locations",
        dataType: "jsonp",
        data: {
            key: key,
            query: query
        },
        jsonp: "jsonp",
        success: function (data) {
            try{
            var c = data.resourceSets[0].resources[0].geocodePoints[0].coordinates;
            var x = c[0];
            var y = c[1];
            map = new Microsoft.Maps.Map(document.getElementById(target), {
                credentials: key,
                enableSearchLogo: false,
                showDashboard: false,
                showScalebar: false,
                enableClickableLogo: false,
                zoom: 14,
                center: new Microsoft.Maps.Location(x, y)
            });
            map.entities.clear();
            var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
            map.entities.push(pushpin);
            pushpin.setLocation(new Microsoft.Maps.Location(x, y));
            } catch(e) {}
        }
    });
}

More map options can be found here: http://www.bingmapsportal.com/ISDK/AjaxV7

Posted in Web Related | Tagged , , , , , , | Leave a comment

Stylesheet for Print

Interesting and Useful article:

http://designshack.net/articles/css/6-thinks-i-learned-about-print-stylesheets-from-html5-boilerplate/

Posted in Web Related | Tagged , , | Leave a comment

insertAdjacentHTML

Interesting article from

http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/

“On the computer that I used for testing, the innerHTML way of appending managed to append only slightly over 200 tweets in five full seconds. In contrast, the insertAdjacentHTML("beforeend", ...) way of appending managed to append almost 30,000 tweets in 5 seconds. (Yes, that’s hundreds versus tens of thousands.) Obviously, real Web apps should never block the event loop for five seconds—this is just for benchmark purposes. However, this illustrates how the innerHTML way of appending becomes notably slower as more and more content accumulates to be serialized and reparsed each time.”

Usage:

document.getElementById(‘ID’).insertAdjacentHTML(position, markup)

where position can be "beforebegin", "afterbegin", "beforeend", or "afterend"

UPDATE:

FireFox was the last browser to implement this method, so older FF browser cannot use this.

Posted in Web Related | Tagged , , | Leave a comment

Lazy Loading Asynchronous JavaScript

Useful article for keepsake, with a good dose of requirements that I like:

  1. Small. I don’t want a big mess for them to include on their sites. 10-15 lines, tops.
  2. Stand-alone. The environment is unknown, so we can’t rely on any external dependencies, like javascript libraries.
  3. Cross-browser. I have no idea what browsers my customer’s customers have, so I can’t do anything modern or fancy that isn’t backwards compatible. I assume at least IE6 and up though.
  4. Asynchronous download. The download of my script should not block the download of any script on their sites.
  5. Lazy Loading. If my site is temporarily slow, I don’t want to block the onload event from triggering until after our site responds.
  6. Preserve events. Any events used should not override any events on the customer’s site. Minimal impact, like I said.
  7. Don’t pollute namespace. Global variables should be avoided, since they could conflict with existing javascript.

http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

(function() {
function async_load(){
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'http://yourdomain.com/script.js';
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
      window.attachEvent('onload', async_load);
else
      window.addEventListener('load', async_load, false);
})();
Posted in Web Related | Tagged , , | Leave a comment

Honoring Steve Jobs

“Remembering that I’ll be dead soon is the most important tool I’ve ever encountered to help me make the big choices in life. Because almost everything — all external expectations, all pride, all fear of embarrassment or failure – these things just fall away in the face of death, leaving only what is truly important. Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose. You are already naked. There is no reason not to follow your heart.”

- Steve Jobs

http://www.huffingtonpost.com/2011/10/05/steve-jobs-stanford-commencement-address_n_997301.html?ir=Technology

Posted in Random | Tagged | Leave a comment

Fake PageRank

It is actually possible to fake PageRank by setting up redirection.
Just a quick search amongst the domain name sellers in Australia actually found people doing this.

To check whether a domain is truly reflecting it’s own PageRank, simply Google:

info:exampledomainname.com

If the result shows another domain not as per the one you typed in search, you know there is redirection set up and the searched domain’s PageRank is actually the one you see being ‘reflected’ by the redirect. You would be a fool to be buying a domain thinking it has a high page rank when it has zero

A quick search in Google:

link:exampledomainname.com

Will also reveal some back-links Google recognise to the searched domain name. The more authoritative the back links to the domain, the more valuable the domain.

Posted in Random | Tagged , , | Leave a comment

Live website tracking

It’s seldom that I get excited enough about a product to actually write about it.

Recently I signed up for http://chartbeat.com for about $10 bucks a month. It allows me to track up to 5 websites. What it does:

How many visitors on the website at any point of time,
which page they are at,
where they are from geographically,
source of referral,
downtime/recover time alerts,
any twitter conversation pointing to my website

Essentially a dashboard to track my whole website status live… For a website with hundreds of pages, this is very useful indeed. It helps to zero in on pages which may be getting substantial traffic but not converting (or those pages getting minimal traffic and converting better). It makes me think more about the copy of the page… or design…  whatever may not hitting the mark in converting traffic into leads.

The downtime alerts and twitter conversation tracking is like icing on the cake. This is definitely a useful tool which compliments Google Analytics and ClickTale.

 

 

Posted in Web Related | Leave a comment