A SHORT HISTORY OF jQUERY

A SHORT HISTORY OF jQUERY

Let’s go back and review the history of front-end development. Many years ago if front-end developers had to do font tags and color attributes they had to set tags.

HTML files were saturated, and if the goal was to change the style of 100 pages, it was manually done for each page. This scenario played out as the worst nightmare for web developers. Then along came CSS. It allowed managing web pages style from one place. A similar sort played out for JavaScript.

JavaScript became popular by following in the footsteps of CSS. It was very easy to use and provided a much better user experience.

By mid-2000s several pieces of silver code from JavaScript library had been released. Some of those are MOTOOLS, PROTOTYPE, DOJO, jQuery among many others.

JQuery became the top choice of developers for site interactivity and user experience.

History of JQuery

HTML  Relies on structure

CSS   Used for site appearance and styling

JQuery   Controls the behavior of interactivity

WHAT IS JQUERY?

what is jquery

Yes, you read it right. Write less, do more. JQuery is a fast, small, and feature-rich JavaScript library. It’s no surprise that even today jQuery is the most popular lightweight library on the web. It uses the functionality of JavaScript to make it easy for a web developer to do necessary tasks. These tasks may include:

Manipulating web pages

Responding to user events

Getting data from web servers

Building animations and special effects

JQuery builds on top of the functionality that a browser gives us via JavaScript DOM API. It simplifies HTML DOM (Document Object Module) tree traversal. With jQuery traversing, you can start from any element and move up, down, and sideways in the DOM tree. In short, it will perform a function in far fewer lines of code than earlier possible.

We will try to understand by using some examples:

Let’s suppose you wanted to resize all the images on your web page or wanted to add some animation. You could choose to write several lines of code. Or you could write a single line of code and let jQuery do all the heavy lifting for you. jQuery simply means less coding to achieve the same results. Not only that jQuery will also take care of any cross-browser bugs, to make life easier.

DIFFERENCE BETWEEN jQUERY AND JAVASCRIPT

Javascript is a programming language. While jQuery is a set collection of functions written using Javascript.

WHAT IS JQUERY USED FOR AND WHY?

jQuery provides a set of functions written in Javascript. The effort has already been put in once. There is no need to re-write these functions. With jQuery, you just use them where you want to. No need to re-invent the wheel. There are tons of libraries out there you can use for your convenience.

jQuery has several benefits over raw JavaScript.

JQuery is cross-browser applicable

Its a lot easier to use than raw Javascript with less coding

It is extensible (mechanism available to extend the programming language)

It’s simple and has rich AJAX support

jQuery comes with excellent documentation

It has a large developer community and offers many plugins

jquery

jquery

jquery

WHAT IS THE MEANING OF $ IN JQUERY

Here you can find out symbols and their meaning.

Points to Remember

Ready ( ) function ensures that the DOM is fully loaded

$ It is short for jQuery

All three of the following syntaxes are equal to each other:

  • $(document) . ready (handler)
  • $( ). Ready (handler) this is not recommended
  • $(handler)

 

HOW TO GET JQUERY ON A WEBSITE

Here are two ways to add jQuery to your website:
  • Download the jQuery library from its site www.jquery.com.
  • Include jQuery from Google CDN (Content Delivery Network)

 

There are 2 versions available for downloading jQuery.
  • Production version – Used for the live website. The code is minified and compressed.
  • Development version – Used for development and testing. Code is readable and uncompressed

You can download both versions from the jQuery website. The jQuery library is a single javascript file. you can reference it with HTML <scrip>

Note : <script> tag should be inside the tag <head>

<head>
<script src=”jquery-3.5.1.min.js”></script>
</head>

But if you don’t want to download and host jQuery, you can include it from a CDN (Content Delivery Network). Google hosts jQuery, which goes by the name of jQuery Google CDN.

Google CDN is the most reliable, fast, and globally available content delivery network. jQuery hosted on Google CDN is a great choice. This is because Google works directly with all key stakeholders involved. It updates libraries to the most current version with ease and convenience. Google recommends that libraries are loaded from CDN via HTTPS. This is applicable even if your website uses only HTTP.

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js“>

</script>
</head>

Copy and paste the HTML snippet for the library (shown above) for your web page.

2 EASY WAYS TO SOLVE “ ADD EXPIRE HEADERS” IN WORDPRESS WEBSITE

2 EASY WAYS TO SOLVE “ ADD EXPIRE HEADERS” IN WORDPRESS WEBSITE

Most people don’t understand what are “Expire Headers” and how they help in website speed. Other people are not able to add this feature in WordPress.

Expire headers

Let’s try to make it easy to understand for anyone and everyone.

We need to understand a bit about how browsers help to improve user experience on a website.

All browser applications use a cache to store certain media or resources such as CSS files.

This caching action, decreases page loading time, translating into a delightful user experience.

An important thing to note is that these files are ones that are not changed frequently. A web browser will store these files in the cache. When the page is requested again, the files will be loaded through the browser cache instead of the webserver.

A browser’s cache cannot hold on to a website’s files like images, CSS, Javascript, etc.) forever. These files need to be discarded from the cache after some time. Then fresh data is requested from the webserver.

This is WHERE “Expire Headers” will help you make a faster loading web page.

Got it so far?

Let’s get into a bit more detail and discover HOW the magic happens.

It’s quite simple. All is you need to do, is to set the correct rules in a particular file stored on the webserver. These rules set the date to discard old copies and get fresh copies from the webserver.

HOW WILL BROWSER CACHE EFFECT LOAD SPEED OF A WEBSITE?

When a user clicks on a link in the browser, an HTTP request goes to the web server browser to allow file download. The browser then stores the files in the cache for a specified period.

The browser will serve the files immediately instead of requesting the webserver.

Let us take a look at an example that will help you understand how browser caching can be leveraged for better page speed.

GTMetrix is a specialized website performance analysis tool. The best digital marketing companies use it to track website metrics. A typical report from a website analysis performed on GTMetrix would look like this

Add Expire Headers

On the screenshot you see, the third recommendation is “Leverage browser caching”. Digital marketing experts know that this requires the addition of “Expire Headers”.

HOW TO ADD EXPIRE HEADERS?

There are two ways in which Expires Headers can be added to leverage a browser’s caching ability.

We can choose to add Expires Headers manually or by using an appropriate plugin. Let’s find out how to do this using both methods.

1. ADDING EXPIRES HEADERS IN WORDPRESS MANUALLY

The solution presented here will show you how to add Expire Headers on Apache and NGINX servers in 4 easy steps.

STEP 1 – Log in to C-Panel on your hosting account.

STEP 2 – Locate the File Manager icon as highlighted below. Click on it.

expire header in wordpress

After clicking on the File Manager icon you should be in the files and folder structure of your website.

STEP 3 – Now locate the folder “public_html” (highlighted by the red box & arrow) with a blue globe icon on its side. Go ahead and click on that.

Expire Header in Website

STEP 4 – The public_html folder stores the “.htaccess” file. Navigate your pointer to the “.htaccess” file and RIGHT CLICK on it. When you are presented with a menu, choose EDIT.

Solution of Expire Headers

Now comes the easiest part.

Just copy and paste the lines of code displayed below.

<IfModule mod_expires.c>

  ExpiresActive On

  # Images

  ExpiresByType image/jpeg “access plus 1 year”

  ExpiresByType image/gif “access plus 1 year”

  ExpiresByType image/png “access plus 1 year”

  ExpiresByType image/webp “access plus 1 year”

  ExpiresByType image/svg+xml “access plus 1 year”

  ExpiresByType image/x-icon “access plus 1 year”

  # Video

  ExpiresByType video/mp4 “access plus 1 year”

  ExpiresByType video/mpeg “access plus 1 year”

  # CSS, JavaScript

  ExpiresByType text/css “access plus 1 month”

  ExpiresByType text/javascript “access plus 1 month”

  ExpiresByType application/javascript “access plus 1 month”

  # Others

  ExpiresByType application/pdf “access plus 1 month”

  ExpiresByType application/x-shockwave-flash “access plus 1 month”

</IfModule>

2. ADDING EXPIRE HEADERS IN WORDPRESS BY USING PLUGIN

If you are not comfortable with editing any files then  Adding Expire Headers from .htaccess is not be advisable. Any type of mistake in editing can render the website inaccessible.

Luckily plugins are available for WordPress users to solve this issue. Some of the highly recommended plugins are:

  1. ADD EXPIRE HEADERS PLUGINAdd Expire headers

It will:

Reduce page load time by caching browser

Improve user experience

Decrease the total data size of the page

It has both free and pro features.

W3 TOTAL CACHE

w3 total cache

When it comes to browser caching W3 TOTAL CACHE plugin is an excellent plugin available. It solves many web page cache problems. It also offers file compression as well as website security, and traffic management. It does a lot more including allowing a user to minify JavaScript, and the best thing of all is that it is a free plugin. Let’s hope it stays that way!

WP ROCKET

WP Rocket

WP Rocket is also a great plugin. That is if would like to go with a premium and can afford it.

Starting at 49$ per year it offers a lot. From caching and gzip to compression, lazy loading expires headers and a whole lot more. You don’t need to access any files or add, delete or edit a single line of code. This plugin will do everything for you and keep your website in tip-top shape.

That’s it!

Bookmark this page and come back to it if you need a refresher.