Make jQuery library available to any webpage using Browser JavaScript Console

Hey there,

jQuery is a powerful & easy to use JavaScript library for DOM manipulation. You can do alot of activities in the HTML DOM with this awesome library. Normally I play with jQuery within the Browser Console (Using Firebug in Mozilla Firefox/Chrome Dev Tools in Google Chrome) So I can play inside HTML DOM using this library with one condition that JQuery has to be present in the webpage already. But in some cases, You might have noticed an unavailability of jQuery in some websites. So In that case, you can’t apply any jQuery methods using the browser console. But You can still play with jQuery functions by dynamically including the library using the Console itself. The below JavaScript will help you to do so.



Now you can perform normal jQuery functionalities inside HTML DOM just like the below example.

That’s it. Cheers..!! :)

MySQL LOAD DATA INFILE Syntax for Importing from CSV file.

The LOAD DATA INFILE statement reads rows from a text file into a table at a very high speed. LOAD DATA INFILE is the complement of SELECT … INTO OUTFILE. To write data from a table to a file, use SELECT … INTO OUTFILE. To read the file back into a table, use LOAD DATA INFILE. The syntax of the FIELDS and LINES clauses is the same for both statements. Both clauses are optional, but FIELDS must precede LINES if both are specified.

LOAD DATA INFILE CSV Example (MySQL CLI):

For a sucessful operation, The fields count in the CSV file should match with the column count of the table. Otherwise your operation result will be Invalid/Erroneous. Also path to the CSV file should be correctly specified.

Difference between ‘$(this)’ and ‘this’ keyword selector when using in jQuery

Hey there,

‘this’ and ‘$(this)’ in jQuery refers to the same element. The only difference is the way they are used. ‘this’ is used in traditional sense, when ‘this’ is wrapped in ‘$()’ then it becomes a jQuery object and you are able to use the power of jQuery.

$(this) Example:

this Example:

In the above example, this is an object but since it is not wrapped in $(), we can’t use jQuery method and use the native JavaScript this keyword to get the value of span element.

Load jQuery library from Microsoft, Google, Jquery.com CDNs

Hey there,

There are Mainly 3 popular jQuery CDNs.

1. Google.
2. Microsoft
3. jQuery.com

The Main Advantages of using CDN.

  1.  It reduces the load from your server.
  2.  It saves bandwidth. jQuery framework will load faster from these CDN.
  3.  The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN

load jQuery from CDN

Code to load jQuery library from Google CDN

Code to load jQuery library from Microsoft CDN

Code to load jQuery library from jQuery.com (EdgeCast CDN)

 load jQuery locally when CDN fails

It is a good approach to always use CDN but sometimes what if the CDN is down (rare possibility though). Below given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.

It first loads the jQuery from Google CDN and then checks the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. In the above code, the jQuery.js is loaded from Scripts folder.

 

HTML5 Tag Elements List

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:

  •     It is a new version of the language HTML, with new elements, attributes, and behaviors,
  •     A larger set of technologies that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

Valid HTML5 Elements List

* indicates that the element was added in HTML5.

Root element

<html> : Represents the root of an HTML or XHTML document. All other elements must be descendants of this element.

Document Metadata

<head> :    Represents a collection of metadata about the document, including links to, or definitions of, scripts and style sheets.
<title> :    Defines the title of the document, shown in a browser’s title bar or on the page’s tab. It can only contain text and any contained tags are not interpreted.
<base> :    Defines the base URL for relative URLs in the page.
<link> :    Used to link JavaScript and external CSS with the current HTML document.
<meta> :    Defines metadata that can’t be defined using another HTML element.
<style> :     Used to write inline CSS.

Scripting

<script>     : Defines either an internal script or a link to an external script. The script language is JavaScript.
<noscript>     : Defines alternative content to display when the browser doesn’t support scripting.
<template>* : Container for client-side content instantiated during runtime using JavaScript.

Sections

<body>     : Represents the content of an HTML document. There is only one <body> element in a document.
<section>*     : Defines a section in a document.
<nav>*     : Defines a section that contains only navigation links.
<article>*     : Defines self-contained content that could exist independently of the rest of the content.
<aside>*     : Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> : Heading elements implement six levels of document headings; <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces.
<header>*     : Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of content.
<footer>*     : Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback.
<address>     : Defines a section containing contact information.
<main>*     : Defines the main or important content in the document. There is only one <main> element in the document.

Grouping content

<p> : Defines a portion that should be displayed as a paragraph.
<hr> : Represents a thematic break between paragraphs of a section or article or any longer content.
<pre> : Indicates that its content is preformatted and that this format must be preserved.
<blockquote> : Represents a content that is quoted from another source.
<ol> : Defines an ordered list of items.
<ul> : Defines an unordered list of items.
<li> : Defines a item of an enumeration list.
<dl> : Defines a definition list, that is, a list of terms and their associated definitions.
<dt> : Represents a term defined by the next <dd>.
<dd> : Represents the definition of the terms immediately listed before it.
<figure>* : Represents a figure illustrated as part of the document.
<figcaption>* : Represents the legend of a figure.
<div> : Represents a generic container with no special meaning.

Text-level semantics

<a> : Represents a hyperlink , linking to another resource.
<em> : Represents emphasized text, like a stress accent.
<strong> : Represents especially important text.
<small> : Represents a side comment , that is, text like a disclaimer or a copyright, which is not essential to the comprehension of the document.
<s> : Represents content that is no longer accurate or relevant .
<cite> : Represents the title of a work .
<q> : Represents an inline quotation .
<dfn> : Represents a term whose definition is contained in its nearest ancestor content.
<abbr> : Represents an abbreviation or an acronym ; the expansion of the abbreviation can be represented in the title attribute.
<data>* : Associates to its content a machine-readable equivalent . (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of HTML5).
<time>* : Represents a date and time value; the machine-readable equivalent can be represented in the datetime attribute.
<code> : Represents computer code .
<var> : Represents a variable, that is, an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.
<samp> : Represents the output of a program or a computer.
<kbd> : Represents user input , often from the keyboard, but not necessarily; it may represent other input, like transcribed voice commands.
<sub>,<sup> : Represent a subscript , or a superscript.
<i> : Represents some text in an alternate voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought, or a ship name.
<b> : Represents a text which to which attention is drawn for utilitarian purposes . It doesn’t convey extra importance and doesn’t imply an alternate voice.
<u> : Represents a non-textual annoatation for which the conventional presentation is underlining, such labeling the text as being misspelt or labeling a proper name in Chinese text.
<mark>* : Represents text highlighted for reference purposes, that is for its relevance in another context.
<ruby>* : Represents content to be marked with ruby annotations , short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese furigana .
<rt>* : Represents the text of a ruby annotation .
<rp>* : Represents parenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.
<bdi>* : Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality.
<bdo> : Represents the directionality of its children, in order to explicitly override the Unicode bidirectional algorithm.
<span> : Represents text with no specific meaning. This has to be used when no other text-semantic element conveys an adequate meaning, which, in this case, is often brought by global attributes like class, lang, or dir.
<br> : Represents a line break .
<wbr>* : Represents a line break opportunity , that is a suggested point for wrapping text in order to improve readability of text split on several lines.

Edits

<ins>  :   Defines an addition to the document.
<del>  :   Defines a removal from the document.

Embedded content

<img> : Represents an image .
<iframe> : Represents a nested browsing context , that is an embedded HTML document.
<embed>* : Represents a integration point for an external, often non-HTML, application or interactive content.
<object> : Represents an external resource , which is treated as an image, an HTML sub-document, or an external resource to be processed by a plug-in.
<param> : Defines parameters for use by plug-ins invoked by <object> elements.
<video>* : Represents a video , and its associated audio files and captions, with the necessary interface to play it.
<audio>* : Represents a sound , or an audio stream .
<source>* : Allows authors to specify alternative media resources for media elements like <video> or <audio>.
<track>* : Allows authors to specify timed text track for media elements like <video> or <audio>.
<canvas>* : Represents a bitmap area that scripts can be used to render graphics, like graphs, game graphics, or any visual images on the fly.
<map> : In conjunction with <area>, defines an image map .
<area> : In conjunction with <map>, defines an image map .
<svg>* : Defines an embedded vectorial image .
<math>* : Defines a mathematical formula .

Tabular data

<table> : Represents data with more than one dimension .
<caption> : Represents the title of a table .
<colgroup> : Represents a set of one or more columns of a table.
<col> : Represents a column of a table.
<tbody> : Represents the block of rows that describes the concrete data of a table.
<thead> : Represents the block of rows that describes the column labels of a table.
<tfoot> : Represents the block of rows that describes the column summaries of a table.
<tr> : Represents a row of cells in a table.
<td> : Represents a data cell in a table.
<th> : Represents a header cell in a table.

Forms

<form> : Represents a form , consisting of controls, that can be submitted to a server for processing.
<fieldset> : Represents a set of controls .
<legend> : Represents the caption for a <fieldset>.
<label> : Represents the caption of a form control.
<input> : Represents a typed data field allowing the user to edit the data.
<button> : Represents a button .
<select> : Represents a control allowing selection among a set of options .
<datalist>* : Represents a set of predefined options for other controls.
<optgroup> : Represents a set of options , logically grouped.
<option> : Represents an option in a <select> element, or a suggestion of a <datalist> element.
<textarea> : Represents a multiline text edit control .
<keygen>* : Represents a key-pair generator control .
<output>* : Represents the result of a calculation .
<progress>* : Represents the completion progress of a task.
<meter>* : Represents a scalar measurement (or a fractional value), within a known range.

Interactive elements

<details>* : Represents a widget from which the user can obtain additional information or controls.
<summary>* : Represents a summary , caption , or legend for a given <details>.
<menuitem>* : Represents a command that the user can invoke.
<menu>* : Represents a list of commands .

* indicates that the element was added in HTML5.

Useful HTML5 related Links:

 

MySQL Database Find and Replace Field Text Query Syntax

Hey there,

You might have stopped while working with applications where you wanted to find some specific string values from the database & replace with another value. This can be easily achieved within the MySQL database. The syntax for FIND & REPLACE operation on MySQL database as follows.

Where,
yourTableName is the name of the Database Table.

YourFieldName is the Field name corresponds to the Database Table yourTableName.

stringToFind is the String to find from the field value.

stringToReplace is the string to be replaced for the existing stringToFind string.

For eg.

Let’s say YourFieldName value as Name is a very Good boy. Name is very intelligent also. You can’t see any boy like Name..;)

And if you want to replace Name with Jax try the following query.

After the query execution, New YourFieldName value will be

Jax is a very Good boy. Jax is very intelligent also. You can’t see any boy like Jax ..;)

That’s it..Share this..Cheers..:)

Google Hot/Top Trends By Countries : PHP implementation

Hey there,

Google Trends is a public web facility of Google Inc., based on Google Search, that shows how often a particular search term is entered relative to the total search volume across various regions of the world, and in various languages. Google Hot/Top Trends displays the top 20 hot, i.e., fastest rising, searches (search-terms) of the past hour from many countries around the Globe. This is for searches that have recently experienced a sudden surge in popularity. I was in search for finding top keywords for one of my online service Social Media Search. Somehow I managed to get Google trends atom feed URL from my Stackoverflow. The atom feed URL which I got from Stackoverflow was for Google Global Hot Trends (United States) & I had collected other Google top level country domains to integrate with the PHP version of  Google hot trends by Countries.

I’m giving the details below:

Google Trends Class (googleTrends.php), Which is really diminutive.

Usage :

Click here to download complete source code from GitHub

Share it..Cheers..:)

Simple HTML parsing using PHP DomDocument With Example

Hey there,

Here I’m just giving an example about how to parse a HTML document with the help of PHP’s DomDocument class. This example is intended for a beginner, with little or limited knowledge about parsing HTML using PHP. In this example I’m using this web page (Included in the Source Code Zip) as a HTML document. This web page is a list of all top country level domains owned by Google & related details (which include Extension, Country Name, Language & ISO etc.). We’ll look into how to fetch all those data using DomDocument class. If you refer to the HTML source, you could see all those data like Top level domain, Extension contained with in <td> elements within different <tr> elements . So our main task is to fetch all <td> values. I’m giving the PHP code used to fetch those data.

I’ll explain the source code below :

Initially I’ve created an object variable ($dom) for DOMDocument class

Here used PHP’s file_get_contents function to fetch the HTML content.

Loading HTML source using DomDocument loadHTML function.

Get all <tr> elements

Loop through all <td> elements & respective elements to fetch all required data.

You could see I’ve used getElementsByTagName again to fetch all <td> elements as well. If you execute this PHP code, you can print all values contained within all <td> elements.

That’s it. You can Download the source Here.  Share it..Cheers..:)

Open & View Really Big Giant Heavy Huge large XML, Text, CSV Files Online

When opening a 100 MB plus single file within your favourite viewer, editor, 90-95% chance that Your computer would probably freeze. That will bring OS, You into a dead lock state which would never complete.  If you want to go through your error logs, data dumps, or any other really big stuff like 1 GB plus files, You should require some tools that would carefully handle everything without any problem. These tools includes gVim, large-textfile-viewer etc. But these tools have some limitations like file size is restricted to 2 or 3 GB. But sometimes your error logs, data dumps or CSVs cross more than 5 GB! In this case You can try this below tool.

Open Giant Files Online

This tool will let you open really very very Huge, Giant, Big, Mammoth, Monster ((25 GB+ single file tested)) file on the fly. The main benefit of this tool is that you can open your huge files directly within your browser. You don’t need to download any desktop applications, mobile apps to view your big data. It will take very less memory so that the Programs/Process in the system won’t get affected. All the process happens just within your browser. The only thing you’ve to keep in mind that You need to have HTML5 enabled browser. That’s not at all a problem since all the latest browsers come with built in support for HTML5.  Once again, The really cool feature is that you don’t need to download any external plugin, software or any other tool! Just browse your Giant file here & Click to open. That’s all. Enjoy Opening Huge files. Share it..:)

HTML, HTML5 : What does DOCTYPE mean?

A document type declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a document type definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

The HTML layout engines in modern web browsers perform DOCTYPE “sniffing” or “switching”, wherein the DOCTYPE in a document served as text/html determines a layout mode, such as “quirks mode” or “standards mode”. The text/html serialization of HTML5, which is not SGML-based, uses the DOCTYPE only for mode selection. Since web browsers are implemented with special-purpose HTML parsers, rather than general-purpose DTD-based parsers, they don’t use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in HTML5 as a “mostly useless, but required” header only to trigger “standards mode” in common browsers.

Why do I want to use it?

The term DOCTYPE tells the browser which type of HTML is used on a webpage. In turn, the browsers use DOCTYPE to determine how to render a page. Failing to use DOCTYPE or using a wrong DOCTYPE may load your page in Quirks Mode. See example:

 Declaring that the document contains HTML5 Markup

The doctype for HTML5 is very simple. To indicate that your HTML content uses HTML5, simply use:

Doing so will cause even browsers that don’t presently support HTML5 to enter into standards mode, which means that they’ll interpret the long-established parts of HTML in an HTML5-compliant way while ignoring the new features of HTML5 they don’t support.

This is much simpler than the former doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded.

Cheers..:)