Saturday, February 16, 2013

HTML Compression Leads to Great Speed


HTML Compression Leads to Great Speed

HTML Compression, the first time I talked to a person regarding this he/she laughed at me, Rather it was a team of He and She ;) . Anyways I gave it a thought and Googled out a bit whether are there fools like me anyways thinking about such a knave stuff and then I witnessed "Yes There are bigger fools than me who are working tremendously for User Experience and Faster Websites" . Now lets get back to the Topic "What is HTML compression anyways ?"
Lets see two HTML Snippets and then Compate their performance depending upon the different scenarios. The Below mentioned code is
Sample HTML(225 Bytes)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
 Compressed HTML(142 Bytes)
<!DOCTYPE html><html><head><title>My first styled page</title><style type="text/css">body{color:purple;background-color:#d8da3d}</style><body>
From the above we could see the considerable amount of change in the Size of the page as well as the HTTP request would take lesser time to fetch the HTML page. Hence improvement in Speed.
Now lets consider a scenerio where the CSS is also externalized and the cache has been enabled in the HTTP headers. So now if we try to see the size of the content it would be
CSS Externalized(103 Byte)
<!DOCTYPE html><html><head><title>My first styled page</title><link rel="stylesheet" src="x.css"><body>
Well now if the page is large then consider the efficiency you gain with this small effort. This was just a small trick in the trade.There are many such things that could be done in order to increase the deliverable of the payload.
Externalizing JavaScript (Haven't showed calculations)
As per my assumption there are many projects where people just scribble JavaScript clueless into the HTML page destroying the speed of the view this also hampers the efficiency of the page.
This article clearly shows how externalizing the scripts and styles and compression of the HTML helps to speedup the website. Let me know your views regarding the same.
Note: The HTML code mentioned above a junk code taken from some random website just to portray the sample. Content is original.

Thursday, February 7, 2013

Want to be a responsible web developer?

                                  Want to be a responsible web developer?

Follow the six steps below

1.Learn to write better JavaScript and CSS

2.Familiarize yourself with a Responsive Framework

3.Learn the most useful JavaScript MVC frameworks

4.Understand REST and HTTP

5.Understand HTML5 Beyond the Buzzword

6.Optimize what ever you do.

7:Think long term

8: Plan out things properly

9: Follow coding standards

10: Try to be a user and think from their perpective

11.Mastering Page Styles

12.Try to use development tools for better and ease of development

13.Always test ur web app , specially cross-browser testing

Tuesday, February 5, 2013


Span tag in HTML5


The HTML <span> tag is used for grouping and applying styles to inline elements.
The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whilst the <div> tag is used with block-level content.


The HTML <span> tag is used to group inline-elements in a document.
The HTML <span> tag provides no visual change by itself.
The HTML <span> tag provides a way to add a hook to a part of a text or a part of a document.


Tip: When a text is hooked in a <span> element, you can style it with CSS, or manipulate it with JavaScript.


It is available in the previous versions of HTML.
It supports both Global Attributes and Event Attributes in HTML5.


Cons :

It is applicable to all major browsers only.



<style type="text/css">
.tab
{
font-family: Monaco, Verdana, Sans-serif;
font-size:12px;
border: 1px solid #D0D0D0;
color: #002166;
 }
</style>
<h1>Demo on Span Element</h1>
<table cellpadding=4 cellspacing=6 border="0">
<tbody>
<tr>
<th>Scripts</th><th>Tutorials</th>
</tr>
<tr>
<td><span class='tab'> JAVA  Script</span></td>
<td><span class='tab'>CSS Tutorial</span></td>
</tr>
</tbody>
</table>

 Output :
======


Friday, February 1, 2013

Beautifying JavaScript/HTML Code

Beautifying JavaScript/HTML Code

It is important that developers format their code in an effective manner irrespective of the language they use. The confusing part of source code formatting is some will use space and some will use tabs in an inconsistent manner in source code for manual formatting. A Front-End developer always works with minified resources and needs some special tools to make the minified source readable either for troubleshooting or for familiarizing with the source.

JS Beautifier (https://github.com/einars/js-beautify) is a great tool for anyone who wants to format their JavaScript/HTML source code in an efficient and quick manner. There is a web hosted solution of this tool at http://jsbeautifier.org/
Instead of using the web hosted solution you can download this tool and host it in your own web server and use it for beautifying your JavaScript/HTML code
The installation procedure is pretty simple. Download the files from the above mentioned github repository (a zip file), unzip it and place it in your local web server's web root folder. There is an index.html file in the newly placed folder and access it from your local webserver over any browser. Now you should be able to see something similar to the following in your browser.


You can put your JavaScript/HTML code in the textbox and click on the Beautify button placed on top of the textbox.
There are some options available in the page that you can use based on your requirements. The options are self explanatory and does not need any descriptions about them.
This tool comes with a Python library that can perform source code formatting from command line. This will be possible only if your PC has Python installed in it. 

jQuery source viewer

jQuery source viewer

As Front-End developer it is my obsession (I am sure that I am not the only one doing this) to explore the source code of various frameworks, libraries, etc and gather as much as information as possible about the framework implementation from its source. Usually a normal editor is the only tool that I need to explore the source code. But definitely this would be really difficult for a developer to go through the source and learn implementations of specific things in the framework.

Fortunately I have stumbled upon a tool called jQuery source viewer and this tool made the exploration of jQuery source file to know the implementation of jQuery functions easier than never before.


This tool provides a provision through which you can select a specific version of jQuery (from the left side select list), you can even select the latest jQuery code from Git directly and then can specify the jQuery function name which you want to explore in the textbox placed along with the selectlist  eg: ready

jQuery source viewer Tool

Begining of jQuery 2.0 Beta and End line of jQuery 1.9 plugin

Begining of jQuery 2.0 Beta and End line of jQuery 1.9 plugin

Some of the changes we bring to notice are listed below here...
  • jQuery 2.0 will not run on oldIE. As a result of removing several layers of barnacle-encrusted code, it will be both faster and smaller than jQuery 1.9.
  • jQuery 1.9 runs on Internet Explorer 6, 7, and 8 (“oldIE”), just like previous versions. Consider it a cleaner, slimmer, modern-API upgrade from jQuery 1.8.
  • jQuery 1.9 and 2.0 have the same API. Several deprecated features such as $.browser have been removed from both versions

for more iformation related to this article please follow with the below link
http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

Flow Slider jQuery Plugin

Flow Slider jQuery Plugin

Flow Slider jQuery Plugin is a JavaScript thumbnail slider. Flow Slider is customizable, skinnable, fashionable, and looks great on every site. Impress your visitors and make navigation more intuitive!

Features
  1. Basic Slider: Just move your mouse over the slider and it will follow
  2. Around Center: Slider moves as you move your mouse away from center
  3. Drag, Wheel, & Keys: Grab and drag the slider or use scrollwheel, or ←→ keys
What can I do with Flow Slider?

Flow Slider is made to enhance user experience. It lets your users navigate faster and more intuitively. Why use buttons when mouse movements can do the job?

You can create a slider out of any HTML content you wish. Create horizontal, as well as, vertical sliders. You can also choose animation options and controllers for your slider.

Virtually anything can be a slider: a navigation, thumbnails, image gallery. We discover new ways to use it every day. Here is a sketch of most obvious usage scenarios:

HTML Popup

                                           HTML POPUP using JavaScript


HTML & JavaScript Code:
<head>
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://www.google.com/" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
</body>

This works with pretty much any tag that can be clicked on, so please go ahead and experiment with this fun little tool. Afterwards, read on to learn more about the different ways you can customize the JavaScript window that pops up.