Tag: HTML5 | IT Nota

How to Serve AVIF Image Format with Fallback for Other Browsers

AVIF is a modern image format based on the AV1 video format and generally has better compression than WebP, JPEG, PNG and GIF. This format is designed to supersede them. Unfortunately, the support for AVIF in web browsers is still not as high as it is for WebP format.

So if we want to use AVIF on our website, it is wise to also provide an easy fallback for other browsers.

The easiest method to do is by using element as follow:

<picture>
  <source srcset="images/logo.avif" type="image/avif">
  <img src="images/logo.png" id="logo" alt="IT Nota Logo example">
</picture>

That’s all there is to it. You can check which image is loaded using your browser developer tools.

If you use an IIS server, you need to add this new image type into the MIME Type before you can serve AVIF format on your page.

How to Serve WebP Image Format with Fallback for Other Browsers

Considering the majority of web users are using Chrome, it’s probably wise to consider using WebP image format on your website. However, since WebP only supported by Chrome and Opera, we also want to utilize an easy fallback for other browsers.

The easiest method to do is by using element as follow:

<picture>
  <source srcset="images/logo.webp" type="image/webp">
  <img src="images/logo.png" id="logo" alt="IT Nota Logo example">
</picture>

That’s all there is to it. You can check which image is loaded using your browser developer tools.

If you use an IIS server, you need to add this new image type into the MIME Type before you can serve WebP format on your page.

How to Use a CDN jQuery in Genesis Framework

As a follow up to my previous post on using a CDN jQuery in your website.

If you use WordPress (with Genesis Framework) and want to take advantage of a CDN (Content Delivery Network) hosted jQuery library to your theme, edit your functions.php file to include these codes:

if ( !is_admin() ) {
  wp_deregister_script('jquery');
  wp_register_script('jquery', 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js', false, '1.11.1');
  wp_enqueue_script('jquery');
}

The codes above will include jQuery CDN on your site, but not the fallback method mentioned in this post. To implement a similar fallback solution in WordPress/Genesis, just add these lines into your functions.php in your child theme directory:

// De-register default jQuery from WordPress
if (!is_admin()) {  
  wp_deregister_script('jquery');  
}

// Replace DOCTYPE to HTML5 and include CDN-hosted jQuery and fallback method
remove_action('genesis_doctype', 'genesis_do_doctype');
add_action('genesis_doctype', 'child_do_doctype');
function child_do_doctype() { ?>
  <!DOCTYPE html>
  <html <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta charset="<?php bloginfo('charset'); ?>" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
    <script>!window.jQuery && document.write('<script src="/js/jquery-1.11.1.min.js"></script>')</script>
<?php
} 
...

This will not only add the jQuery CDN and a fallback method, but also replaces the DOCTYPE heading to HTML5 in your Genesis Theme.

One caution before you do this. Make sure all plugins, especially the old ones, are tested for compatibility with the jQuery version you want to use.

All the above examples use jQuery library hosted on Microsoft CDN. If you want to use other CDN hosts, just change the URL address in the src tag. For example, to use jQuery from Google CDN, you have to use this address instead (everything else should be the same):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Update

With the newer version of WordPress and Genesis, the better and easier way to do this is just to de-register the default jQuery in function.php using the following codes:

// De-register default jQuery from WordPress
if ( !is_admin() ) {  
  add_action( 'wp_print_scripts', 'de_script', 100 );

  function de_script() {
    wp_dequeue_script( 'jquery' );
    wp_deregister_script( 'jquery' );

    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, 1.11.1, true);
    wp_enqueue_script('jquery');
  }
}

The last parameter true will add the jquery in the footer instead of header, which is a better way for performance sake.

Use a CDN Hosted jQuery in Your Website

Serving your jQuery from a public CDN (Content Delivery Network) can arguably offer several advantages to your website, especially if you don’t use a fast server to host it. If you’re not familiar with both sides of the arguments, please check the two attached links below as there’s no points to repeat the subject over the advantages vs. disadvantages of hosting jQuery from a CDN.

PROS – ~~3 reasons why you should let Google host jQuery for you~~ (broken – 4/26/2017)

CONS – Should You Use JavaScript Library CDNs?

If you ever decide to use CDN jQuery, you can choose to serve the javascript library from one of the three official CDN jQuery hosts (Google, Microsoft, and jQuery) that are listed on the jQuery download page. With the first two as most popular, you can host your jQuery from Google CDN or Microsoft’s. Another host that’s also worth mentioning is cdn js.

You just need to hotlink to any of the CDN you want to use in your source attribute:

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

That’s it!

But of course things can go wrong with the CDN server or the routing and for any other bizarre reasons the javascript file is just not available. This scenario can be avoided by creating a fallback method to serve the jQuery from our own website. We can do this by adding the second line (line 4-6):

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
  !window.jQuery && document.write('<script src="/js/jquery-1.12.4.min.js"></script>')
</script>

If you don’t think this technique is sufficient, there are more techniques that might suit your need better from the two links below:

A Simple and Robust jQuery 1.4 CDN Failover in One Line
~~How and Why: CDN Hosted jQuery with a Local Fall-Back Copy~~ (broken – 5 July 2014)

Most Popular jQuery CDN Links

All three links are listed in the order of popularity. Just use one jQuery CDN link as your source.

Google CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQuery’s CDN

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

Microsoft CDN

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

Got HTML5?

Since the publishing of its First Public Working Draft in 2008, HTML5 (not HTML 5) has gained wider acceptance among developers and designers.

While it’s not 100% foolproof, HTML5, combined with CSS3, gives designers greater control on web layout as they envision it, thus more and more web designers and developers committed to using it.

If you haven’t taken a plunge and want to know more about HTML5, here are a few useful HTML5 links you can use as references:

HTML5 Doctor
The website publishes articles relating to HTML5, its semantics, and how to use it right now. In addition, it takes questions from visitors and provide answers in their articles to benefit everyone.
Dive Into HTML5
Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards with the final manuscript published on paper by O’Reilly, under the Google Press imprint. Informative section on the use of Microdata can be found on this site as well.
HTML5 IE Enabling Script (HTML5 Shiv)
Public repo for the latest HTML5 JavaScript shiv for IE version 8 or under to recognize and style the HTML5 elements.
HTML5 Logo
Not as useful as the rest but it’s always cool to have a logo. Use it to spread the word.
HTML Revisited
All the technical details and FAQ surrounding HTML5.
HTML Cheat Sheet
HTML cheat sheet which has a full list of all HTML elements which includes descriptions, code examples and live previews.

And lastly, you might want to validate your HTML5 markup using these validators:

Validator.nu (X)HTML5 Validator
The W3C Markup Validation Service (based on validator.nu)

How to Start Using HTML5

So what do you need to do to start using HTML5? At the very least, you can change your DocType Declaration from the more complex HTML 4 version

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

to this

<!DOCTYPE html>

or to add more HTML5 markups

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  ...  
</head>

That’s all there is to do to start using HTML5. So even if you haven’t been able to update all your markup, there shouldn’t be any reason for you not to switch to HTML5 now.

How to Serve AVIF Image Format with Fallback for Other Browsers

Further Reading

How to Serve WebP Image Format with Fallback for Other Browsers

Further Reading

How to Use a CDN jQuery in Genesis Framework

Update

Further Reading

Use a CDN Hosted jQuery in Your Website

Most Popular jQuery CDN Links

Google CDN

jQuery’s CDN

Microsoft CDN

Further Reading

Got HTML5?

How to Start Using HTML5

Further Reading

Recent Posts

Further Reading

Further Reading

Update

Further Reading

Most Popular jQuery CDN Links

Google CDN

jQuery’s CDN

Microsoft CDN

Further Reading

How to Start Using HTML5

Further Reading

Recent Posts

Tags