Preloading images before page onload using css and js

css:

body:after
{
content: url(‘../../img/spinner/b.webp’);

}

 

js/ajax:

window.onload = function() {
	setTimeout(function() {
		// XHR to request a JS and a CSS
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.js');
		xhr.send('');
		xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.css');
		xhr.send('');
		// preload image
		new Image().src = "http://domain.tld/preload.png";
	}, 1000);
};
Advertisements

character encoding utf-8

Which character encoding should I use for my content, and how do I apply it to my content?

Content is composed of a sequence of characters. Characters represent letters of the alphabet, punctuation, etc. But content is stored in a computer as a sequence of bytes, which are numeric values. Sometimes more than one byte is used to represent a single character. Like codes used in espionage, the way that the sequence of bytes is converted to characters depends on what key was used to encode the text. In this context, that key is called a character encoding.

Why use UTF-8?

An HTML page can only be in one encoding. You cannot encode different parts of a document in different encodings.

A Unicode-based encoding such as UTF-8 can support many languages and can accommodate pages and forms in any mixture of those languages. Its use also eliminates the need for server-side logic to individually determine the character encoding for each page served or each incoming form submission. This significantly reduces the complexity of dealing with a multilingual site or application.

There are three different Unicode character encodings: UTF-8, UTF-16 and UTF-32. Of these three, only UTF-8 should be used for Web content. The HTML5 specification says “Authors are encouraged to use UTF-8. Conformance checkers may advise authors against using legacy encodings. Authoring tools should default to using UTF-8 for newly-created documents.”

Real Essence of HTML5

What are those? Any example??

Page load time is one of the most important aspects of the user experience. Unfortunately, troubleshooting a slow page load is not easy because there are many contributing factors. To help with this, We have Navigation timing API.

function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  alert("User-perceived page loading time: " + page_load_time);
}

Establishing “socket” connections between a web browser and a server using Web Sockets API..

High Resolution Time API

The High Resolution Time API provides the current time in sub-millisecond resolution and such that it is not subject to system clock skew or adjustments.

It exposes only one method, that belongs to the window.performance object, called now(). It returns aDOMHighResTimeStamp representing the current time in milliseconds. The timestamp is very accurate, with precision to a thousandth of a millisecond, allowing for accurate tests of the performance of our code.

The most important feature of this method is that performance.now() is monotonically increasing (that is, it increases consistently), so the difference between two calls will never be negative.

A basic example of calling this method is shown below:

1
var time = performance.now();

3. Navigation Timing API

Page load time is one of the most important aspects of the user experience. Unfortunately, troubleshooting a slow page load is not easy because there are many contributing factors. To help with this, in addition to the APIs considered above, the W3C have proposed the Navigation Timing API.

This API offers detailed timing information throughout the page load process accessible through the timingproperty of the window.performance object. In detail, it provides measurements related to page redirects, DNS lookup, time spent building the DOM, TCP connection establishment, and several other metrics.

Network Information API

Another API that deals with performance is the Network Information API. It helps you discover whether the user is on a metered connection, such as pay-as-you-go, and provides an estimate of bandwidth. Thanks to this information, it’s possible to change the behaviour of our pages to accommodate a user in the best way possible. For example, we could conditionally load images, videos, fonts and other resources based on the type of connection detected.

This API belongs to the connection property of the window.navigator object. It exposes two read-only properties: bandwidth and metered. The former is a number representing an estimation of the current bandwidth, while the latter is a Boolean whose value is true if the user’s connection is subject to limitation and bandwidth usage, and false otherwise.

5. Vibration API

Another key concept that gets a lot of attention in our industry is user experience (UX). One of the APIs proposed that allows us to enhance this aspect of our websites is the Vibration API.

This API is designed to address use cases where touch-based feedback is required, and offers the ability to programmatically produce a vibration interacting with the mobile device’s built-in vibration hardware component. If such a component doesn’t exist, it does nothing.

The Vibration API is particularly useful if you’re working with online videos or web games. For example, you could let the user’s device vibrate during the progress of the game in reaction to a particular event.

It exposes only one method, vibrate(), that belongs to the window.navigator object. This method accepts one parameter specifying the duration of the vibration in milliseconds. The parameter can be either an integer or an array of integers. In the second case, it’s interpreted as alternating vibration times and pauses.

A basic use of this API is shown below:

1
2
// Vibrate once for 2 seconds
navigator.vibrate(2000);

6. Battery Status API

The Vibration API isn’t the only one that allows access to a device’s hardware. Another API of this type, designed with mobile devices in mind, is the Battery Status API. It allows you to inspect the state of a device’s battery and fires events about changes in battery level or status.

The Battery Status API exposes four properties (charging, chargingTime, discharingTime, andlevel) and four events. The properties specify if the battery is in charge, the seconds remaining until the battery is fully charged, the seconds remaining until the battery is fully discharged, and the current level of the battery. These properties belongs to the battery property of the window.navigator object.

7. Page Visibility API

The Page Visibility API enables us to determine the current visibility state of the page. What this means is that we’re able to detect if our page is in the background or minimized (i.e. it’s not the currently-focused window).

This capability can help us to develop powerful, yet CPU and bandwidth efficient web applications. In fact, we can slow down or even stop a CPU and/or bandwidth consuming process if we detect the user isn’t using the page.

This API exposes one event, called visibilitychange, that we can listen for to detect changes in the state of the page’s visibility, and two read-only properties, hidden and visibilityState. These properties belong to the document object. hidden is a Boolean whose value is true if the page is not visible, andfalse otherwise. visibilityState is an enumeration that specifies the current state of the document and consists of the following values: hidden, visible, prerender, and unloaded.

8. Fullscreen API

The Fullscreen API provides a way to request fullscreen display from the user, and exit this mode when desired.

This API exposes two methods, requestFullscreen() and exitFullscreen(), allowing us to request an element to become fullscreen and to exit fullscreen.

It also exposes two properties, fullScreenElement and fullScreenEnabled, belonging to the documentobject. These specify the element that has been pushed to fullscreen and if fullscreen mode is currently enabled. It also exposes one event, fullScreenEnabled, which provides us a convenient way to listen for when fullscreen mode has been enabled or disabled.

9. getUserMedia API

The getUserMedia API provides access to multimedia streams (video, audio, or both) from local devices. This means that we can access these streams without the use of Flash or Silverlight. Some use cases for this API include real-time communication and tutorials or lesson recording.

The getUserMedia API exposes just one method called getUserMedia(). It belongs to thewindow.navigator object and accepts as its parameters an object of constraints, a success callback, and a failure callback.

The getUserMedia API also allows us to have a lot of control over the requested stream. For example, we can choose to retrieve a video source at high resolution or at low resolution.

  • Offline apps – This API allows marking pages to be available in Offline mode. This is useful if a resource requires dynamic processing.
  • Indexed database – This API is meant for a database of records holding simple values (including hierarchical objects). Every record has a key and a value. An indexed database is supposed to be implemented using b-trees. Web SQL DB is no longer being pursued as part of HTML5 specification.
  • Web workers – This API is meant to be invoked by web application to spawn background workers to execute scripts which run in parallel to UI page. The concept of web works is similar to worker threads which get spawned for tasks which need to invoked separate from the UI thread.
  • Web storage – This specification defines an API for persistent data storage of key-value pair data in Web clients.
  • Web sockets – This API used for persisting data storage of data in a key-value pair format for Web clients.
    • Server-Sent Events – This API is used for opening an HTTP connection to receive push notifications from a server. These events are received as DOM events. This API is supposed to be used with Push SMS.
    • XMLHttpRequest2 – This API is used to provide scripted client functionality to transfer data between a server and a client.
    • Geolocation – This API is used to provide web applications with scripted access to geographical location information of the hosting device.
    • Canvas 2D Context – This API provides objects, methods and properties to draw and manipulate graphics on a canvas drawing surface.
    • HTML Microdata – This API is used to annotate content with specific machine-readable labels, e.g. to allow generic scripts to provide services that are customized to a page. Microdata allows nested groups of name-value pairs to be added to documents.
    • Media Capture – This API is used to facilitate user access to a device’s media capture mechanism (camera, microphone, file upload control, etc.). This only coves a subset of media capture functionality of the web platform.
    • Web Messaging – This API is used for communications between browsing contexts in HTML documents.
    • Forms – The Forms API can be used with the new data types supported with HTML5.
    • File API – The File APIs are used by the browser to provide secure access to the file system.