Template literals are enclosed by the back-tick (` `)

Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}). The expressions in the placeholders and the text between them get passed to a function.

In order to embed expressions within normal strings, you can use the following syntax:

var a = 5;
var b = 10;
console.log(‘Fifteen is ‘ + (a + b) + ‘ and\nnot ‘ + (2 * a + b) + ‘.’);
// “Fifteen is 15 and
// not 20.”

Now, with template literals, you are able to make use of the syntactic sugar making substitutions like this more readable:

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// “Fifteen is 15 and
// not 20.”

Nesting Templates:

In certain times, nesting a template is the easiest and perhaps more readable way to have configurable strings. Within a backticked template it is simple to allow inner backticks simply by using them inside a placeholder ${ } within the template. For instance, if condition a is true: then return this templated literal.

The post WHAT ARE TEMPLATE LITERALS IN HTML5? appeared first on Pro-Tek Blog.

GraphQL is an application layer query language that construes a string by a server, which then returns the required data in a detailed format. Open sourced by Facebook in 2015, GraphQL was developed internally during the evolution from Facebook’s HTML5-powered mobile apps to native apps. Today it is the principle graph data query language driving the majority of interactions within iOS and Facebook Android applications. The makers of GraphQL plan to open-source an instruction program on how to implement the server. The goal is to increase GraphQL capabilities to adapt to a wide range of back-end’s. This will let the coders to use the technology in projects of any size to access their own data more competently. The product developers will be able to structure servers and provides powerful frameworks, abstractions, and tools.

HOW TO USE IT

GraphQL is a different way of structuring the contract between client and server. The servers publish a set of rules specific to an application. GraphQL then supplies the language to query the developer’s data for the correct answer, within the constraints of rules. This way product developers are able to execute data requirements in a natural form, such as a declarative one and a hierarchical one. To understand how to use GraphQL, better first look at what it is trying to achieve.

Give client-side developers a well-organized way to query data they want to retrieve.
Give server-side developers a well-organized way to get their data out to their users.
Give everyone an easy and efficient way of retrieving data.

HOW IS IT DIFFERENT

The GraphQL query language is sited between client applications and the actual data sources. It works independently from data sources and other platforms. A GraphQL server can be made in PHP, Node or any other platform of the user’s choice. The users should be able to connect to GraphQL server with web apps, mobile apps or any other type of apps they may be using. They can then query and alter the data they are looking for. The major difference is that GraphQL does not come with a transport layer. That end of the operation is handled by a high-level framework, such as Relay. However, GraphQL have an excellent type system. The system is basically constructed on top of a layer of graphs with a set of rules defined by you. The users may not feel the need to display their data groups as a graph, but if the users really thinks about it, most of the time the user can structure his/her data schema in the form of graphs.

To envision what we are talking about, let’s have a look at some code. For this instance, we will look at creating a query for Product Hunt and want to retrieve data for a typical page:

{ product (id: “react-native-for-android”) { name, link, votes, comments
{ text } } }

The result would be:
{ ”
data”:
{ ”
product”:
{ ”
name”:

“React Native for Android”
, ”
link”:
“https://facebook.github.io/react-native/”
, ”
votes”:

“167”
, ”
comments”:
[ { ”
text”:

“Huuuuge for cross-platform progress.”
}, { ”
text”:

“Exciting stuff.”
} ]
}
}
}

Now the user is working with an upgraded version of Product Hunt and want to display the name of the author next to the comment. Then the user has to simply change the query like this:

{ product (id: “react-native-for-android”) { name, link, votes, comments
{ text, author { avatar } } } }

WHAT THE USER CAN DO WITH GRAPHQL

GraphQL is a very liberating platform. GraphQL, product developers no longer need to cope with ad hoc endpoints or worry about accessing data with multiple roundtrip object retrievals. Instead, the developer can easily create a sophisticated, declarative-hierarchical query dispatched to one single endpoint. Now all the experimentation and newly created views are built exclusively in the client development environment. The hassle of moving unstructured data from ad hoc endpoints into business objects is excluded. Instead, the user will get a powerful, intuitive type system you can use as a tool-building platform. The developer, will have the freedom to put more focus on client software and requirements without having to leave the development environment. As the system changes, the developer will be able to support shipped clients with confidence while staying well within the limits of mobile apps.

The post WHAT IS GRAPHQL appeared first on Pro-Tek Blog.

LocalStorage: Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data.

SessionStorage: Similar to localStorage but expires when the browser is closed (not the tab).

The post DIFFERENCE IN LOCAL STORAGE AND SESSION STORAGE (HTML5) appeared first on Pro-Tek Blog.

If you are a HTML developer, it is necessary for you to keep yourself upgraded with the new features introduced by HTML5. In this article, we have explained the top features of HTML5 that will help you to develop dynamic websites for multiple platforms or devices.

1.SIMPLE DOCTYPE

Are you still using the infuriating and baffling XHTML DOCTYPE? Then, it’s high-time to swap it with the new HTML5 DOCTYPE.

The fifth version of HTML comes with a simple DOCTYPE. In order to indicate that your HTML content utilizes HTML5, the user just needs to write:

<!DOCTYPE html>

The HTML5 DOCTYPE is an appreciated standard and is suitable for all new type of documents. It is generally used for both older and modern browsers which needs a specified DOCTYPE. However, browsers that don’t understand this DOCTYPE will directly submit the contained mark-up in standard mode. Thus, one can freely use the new and simple HTML5 DOCTYPE.

2.FLEXIBILITY WITH “QUOTATION MARKS”

If you are writing HTML5 attributes, the user does not need to utilize quotation marks to define the values. It completely depends on the user whether the user wants to close the elements with quotes or not.

<p class=myClass id=someId> Start the reactor.

However, the user cannot always eliminate quotes from attribute values. For instance, if the user wants to use some more structured documents, the user needs to use the quotes.

3.CAN EDIT TEXT CONTENT HTML5

Most of the new browsers assimilated with a new attribute called content editable which enables the user to edit any of the text included within the element.

With the use of this attribute, the user can instruct the browser to enable the users to add, delete, and edit the text. There are many uses for this technique, such as enabling users to customize the way how pages crop out each time when they visit the website. If the user wants to edit the text contained in the element, the user just need to add:

<ul contenteditable=true>

4.NEW AND EASY SEMANTIC ELEMENTS

Most of the websites use the HTML code with an objective to symbolize header, navigation, and footer. However, this is quite a complicated technique.

HTML5 offers new and easy-to-memorize semantic elements that can help the developers to define different sections of a web page. Below are the following Semantic Elements:

<header>

<footer>

<nav>

<section>

<article>

The post FEATURES OF HTML5 appeared first on Pro-Tek Blog.

The web is deriving at a fast pace. Every day a new framework, tools, and libraries are releasing with the ambition to become next jQuery. Here are some of the interesting HTML5 APIs, such as Navigation Timing API and Battery Status API. So, let’s dive deep in and know what are these about.

What is Navigation Timing API?

The Navigation Timing API provides data that can be used to measure the performance of a website. This API exposes several properties which offer information about the time at which certain events happen.

Navigation Timing API is W3C recommendation which means that its specifications will not be changed unless a new version is released. Unlike other JavaScript-based mechanisms that have been used for the same purpose, Navigation Timing API can provide end-to-end latency data that can be more useful and accurate.

Let us see an example of how you can measure perceived loading time:

function onLoad() {
var now = new Date().getTime();
var page_load_time = now – performance.timing.navigationStart;
console.log(“User-perceived page loading time: ” + page_load_time);
}

There are many measured events given in milliseconds that can be accessed through the Performance Timing interface. The list of events in order of occur rence is given below.

navigationStart: Is the time immediately after the browser finishes prompting to unload the previous document. If there is no previous document, then navigationStart is equal to fetchStart. This is the beginning of the page load time as perceived by the user.

unloadEventStart: unloadEventStart is the time immediately before the previous document’s unload event is fired. If there are no previous document, or if the previous document is from different origin then the value would be zero.

unloadEventEnd: If there are any redirects that point to a different origin then unloadEventStart and unloadEventEnd are both zero.

redirectStart: “redirectStart” represents the start time of the URL fetch that initiates a redirect.

redirectEnd: If there are any redirects then “redirectEnd” represents the time after the last byte of the last redirect response received.

requestStart: requestStart is the time before the browser sends a request for the URL.

responseStart: The time immediately after the browser receives the first byte of response.

responseEnd: The time immediately after the browser receives the last byte of the response.

In addition to the above set of properties, the Navigation Timing API also defines another object to determine how a user landed on a particular page. The object is called navigation and it belongs to windows.performance. It contains two properties i.e., “type” and “redirectCount”.

Type : This property provides the method by which the user navigated to the current page. The following are the list of values that “type” can hold.

⦁ If the user navigates to a page by typing the URL, clicking a link, submitting a form, or through a script operation, then the value of “type” is zero.
⦁ If the page is reloaded/refreshed, then the “type” is equal to one.
⦁ If the user navigates to a page by clicking back or forward buttons, then “type” is equal to two.
⦁ For other circumstances, “type” is equal to 255.

redirectCount: It is the number of redirects taken to the current page. If there are no redirects occurred or if any of the redirects are from a different origin, then the value is zero.

Browser Support: Browser support for this API is very good for both desktop and mobile. On a desktop, the Navigation Timing API can be implemented in Chrome, Firefox, Internet Explorer, and Opera. The only desktop browser that currently does not support this API is Safari. On mobile, the API can be implemented in iOS safari, UC browser, and Blackberry browser. Opera Mini is the only browser that does not support this API.

Battery Status API
What is Battery API?

The Battery Status API also referred as the Battery API, is an API that provides information about systems battery level. It also defines events that are fired when changes of the battery level or status take place. This can be used to adjust user’s applications resource usage to minimise battery drain when the battery is low or to save changes before the battery runs out in order to prevent data loss.

The Battery Status API exposes four read-only properties on the window.navigator.battery object, they are as follows:

strong>Charging: A Boolean value that specifies whether the battery is charging or not. If the device doesn’t have a battery or the value cannot be determined, then the value of this property is set to be true.

ChargingTime: A value that specifies the number of seconds remaining until the battery is fully charged. If the battery is already charged or the device doesn’t have a battery, then the property is set to be “0”. If the device is not getting charged or if it is unable to determine the remaining time, then the value is Infinity.

DischargeTime: The value that represents the number of seconds re maining until the battery is completely discharged. If the discharge time cannot be determined or the battery is currently charging, then the value is set to Infinity. If the device doesn’t have a battery, then the discharging Time is also set to Infinity.

Level: A value that specifies the current level of the battery. The value is returned as float ranging from 0 (discharged) to 1 (fully charged). If the level of the battery cannot be determined, the battery is fully charged, or the device does not have a battery, then the value of level is equal to 1.

Battery Status Events:
There are four events that can be fired by the battery object.

Chargingchange: The device has been changed to being charged to being discharged.

Levelchange: The level of the battery will be changed.

Chargingtimechange: It is the time until the battery is fully charged has changed.

strong>Dischargingtimechange: It is the time until the battery is fully discharged has changed.

Browser support

Browser support for the Battery Status API is pretty poor. Firefox is the only browser that provides support for the API without the use of vendor prefix.

The post LATEST APIs IN HTML5 appeared first on Pro-Tek Blog.

In a world that is progressively social and open, portable applications play a key role, and have changed the emphasis from what’s on the Web, to the applications on our smartphone. Versatile applications are no more an alternative, they’re a basic. You require a versatile application, yet where do you begin? Many elements have influence in your versatile technique, for example, your group’s improvement abilities, required gadget usefulness, the significance of security, logged off capacity, interoperability, and so on, that must be considered.

There are mainly 3 options of mobile application development:

Native Mobile Applications

More or less, local applications give the best ease of use, the best elements, and the best general versatile experience. There are a few things you just get with local applications:

Multi touch – Twofold taps, squeeze spread, and other compound UI motions.

Graphics API – The local stage gives you the speediest design, which may not be a major ordeal in case you’re demonstrating a static screen with just a couple of components, or a major ordeal in case you’re utilizing a great deal of information and require a quick invigorate.

Fluid animation – Identified with the quick representation API is the capacity to have fluid liveliness. This is particularly vital in gaming, exceedingly intelligent reporting, or strong computational calculations for changing photographs and sounds.

Built-in components – The camera, location book, geolocation, and different elements local to the gadget can be consistently incorporated into versatile applications. Another imperative implicit parts is scrambled capacity, yet more about that later.

Usability – The local stage is the thing that individuals are acclimated to, thus when you include that recognition with the local’s majority highlights they expect, you have an application that is out and out simpler to utilize.

Documentation – There are more than 2500 books alone for iOS and Android advancement, with numerous more articles, blog entries, and nitty gritty specialized strings on destinations like StackOverflow.

HTML5 Web Apps

HTML5 is a dialect that empowers designers to make rich online applications that keep running on any gadget by means of the web program; engineers can “compose once, run all over”. A versatile venture may need to make a substantial number of distinctive applications to bolster a horde of differing offices and useful undertakings, which makes HTML5 more alluring financially.

Defenders of HTML5 trust that the quality is practically identical to that of a local application. Likewise, it is less demanding to adapt and roll out improvements to your application in light of the fact that you are not experiencing an application store.

Contentions against HTML5 incorporate execution, hindrance of heading off to a URL rather than downloading an application, and absence of program similarity (not all portable programs bolster the same subset of components).

Hybrid App

The last choice is to make a half and half endeavor portable application, which is composed in HTML5 however wrapped in a local “compartment”, and made by means of cross-stage advancement devices, for example, PhoneGap and Sencha. It would seem that a local application, can be downloaded from an endeavor application store, and can even access on-gadget highlights, however doesn’t contain an ounce of Objective-C or Java code. The engineer ordinarily needs to utilize HTML5, CSS, and JavaScript inside of the stage environment, abilities which are less demanding and less expensive to discover than Objective-C or Java.

One downside to this methodology is timing: there may be issues while sitting tight for your stage to actualize new usefulness discharged by a working framework. This methodology is picking up in prominence: Gartner predicts that by 2016, more than half of all applications conveyed will be crossover.

At last, if your endeavor portable applications oblige access to gadget particular components or predominant response time required for amusements rate advanced applications (video), then local is your most logical option.

On the off chance that you are expense obliged and need to create numerous applications for some stages, or need to do quick prototyping preceding building up the full-highlighted application (run of the mill with a commercial organization), pick HTML5.

In the event that you are some place between the two, well then go half and half.

The post WHICH WAY TO GO: NATIVE, HTML5, OR HYBRID? appeared first on Pro-Tek Blog.

To detect an iPad Mini in HTML5, you can use Javascript by inspecting all properties of the default browser objects. So for this device, the only property unique is :
screen.availWidth = 748
screen.availHeight = 1024

The post How to detect iPad Mini in HTML5? appeared first on Pro-Tek Blog.

Quirks mode and strict mode are the two ’modes’ modern browsers can use to interpret your CSS.

Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older versions.

In HTML5, the only purpose of the DOCTYPE is to activate full standards mode. Older versions of the HTML standard gave additional meaning to the DOCTYPE, but no browser has ever used the DOCTYPE for anything other than switching between quirks mode and standards mode.

The post Strict vs. quirks modes – How to trigger each and why this matters? appeared first on Pro-Tek Blog.

A placeholder in input field looks like this:
By default the color of the placeholder is black (with some opacity).

In order to change the default color of a placeholder in input field, we can use pseudo-elements and pseduo-classes.
Mozilla Firefox
/* Mozilla Firefox 4 to 18 */
[one colon]
:-moz-placeholder {
color: #909;
opacity: 1;
}
/* Mozilla Firefox 19 & above */
::-moz-placeholder {
color: #909;
}
Webkit Browsers
/*Chrome,Safari,etc*/
::-webkit-input-placeholder {
color: #909;
}
Internet Explorer
/* IE 10+ */
:-ms-input-placeholder {
color: #909;
}
Points to Note:
IE 9 & Below and Opera 12 & below do not support any CSS selector for placeholders.
Firefox’s placeholder needs to use opacity: 1 to avoid any default contrasts.
It is highly recommended to use em’s for input elements’ dimensions to avoid any cutoff in placeholder’s text.

The post How to Change an input’s HTML5 placeholder color with CSS? appeared first on Pro-Tek Blog.