Parth H. Dave's Blogger

Saturday, January 14, 2017

JSON (JavaScript Object Notation) HTTP Request by Ajax to Show Data on Webpage

First,We create one .Txt file which contains names of different countries.

Country.txt File:

[  
    {  
        "display": "India",  
    },   
    {  
        "display": "China",  
    },   
    {  
        "display": "USA",  
    },   
    {  
        "display": "UK",  
    },   
    {  
        "display": "Canada",  
    },   
    {  
        "display": "Japan",  
    },   
    {  
        "display": "Russia",  
    },   
]  

In the second step, Reads the data from file and display it to the webpage. Use XMLHttpRequest to read the text file, and use fetchData () to display the array.

JsonHttpXmlReqbyAjax.html

<!DOCTYPE html>  
<html>  
<body>  
<div id="maindiv"></div>  
<script>  
var xmlhttp = new XMLHttpRequest();  
var url = "Country.txt";  
xmlhttp.onreadystatechange = function()  
{  
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200)  
   {  
         var myarray = JSON.parse(xmlhttp.responseText);  
         fetchData(myarray);  
   }  
}  
xmlhttp.open("GET", url, true);  
xmlhttp.send();  
function fetchData(arr)  
{  
         var out = "";  
         var i;  
          for(i = 0; i < arr.length; i++)  
         {  
               out += arr[i].display + '<br>';  
         }  
         document.getElementById("maindiv").innerHTML = out;  
}  
</script>  
</body>  
</html>  

After completing all these steps, you will get following output.

India

China

USA

Canada

Japan

Russia

Enjoy Coding...!!!

Sunday, January 1, 2017

Play With Sass Using Compass - An Opensource CSS Authoring Framework

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your style sheets easier to organize and maintain. Compass uses Sass. Compass is a Sass framework, designed to make the work of styling the web smooth and efficient. Much like Rails as a web application framework for Ruby, Compass is a collection of helpful tools and tested best practices for Sass.

Once you finished with the installation of Ruby Germs and Sass on your system, install compass in the next step. If you've not yet installed Ruby Germs and Sass on your system, please refer my following blog for installation:

Install SASS on Windows Using Ruby Gems

Now we are going to install Compass.

Open command prompt (CMD) and type the following command.

It will install Compass on your system. You will get the following message after installation of Compass.

Next we are going to install css parser.

It gives a count of the Sass rules, properties, mixins defined and mixins used as well as the CSS rules and properties that get output from your Sass-style sheets.

After installation, it will give you the following message:

Now we are going to create one sample project.

You can create project using the following command:

After creation of project, you will get the following message.

In the next step, you have to compile Sass to css. So for that purpose, you have to add watch as in the following screenshot:

Once the watch is started, you will get the following message.

This kind of folder Structure is created once you create project.

Now, we are writing some Sass code and will send its impact on css file using Compass.

I use Atom Editor (Open Source) for making this project. You can even use Notepad++, Sublime Text, etc for developing project.

You will see config.rb file in your project.

You can see all the references to the different directories Compass will need in order to compile your CSS.

Now I am going to write some Sass code in screen.scss file.

After saving the complete code, changes will be reflected to css file as well as on command prompt. This could happen because of Compass.

style.css looks like the following:

I hope this quick tutorial made your Compass working environment possible.

Demo Example

Sunday, December 25, 2016

Installation and Usage of Sass on Windows

Download the Ruby installer from:
http://rubyinstaller.org/downloads/ — Look for the version with x64 on it. Be sure the Ruby installer is version is 1.9x. SASS doesn't work on 2.x versions.
Open the Command Line (CMD) by pressing the Windows Key + R and type: CMD, then press Enter.
Type the following command in the CMD:
gem install sass

It will take a few seconds to install SASS. At the end you will see this in CMD.

That's it! SASS is now installed on your machine.

Procedure to use SASS

Create a Demo folder anywhere on your PC.
Inside that folder create the two sub folders /css and /scss.
Create a .scss file.

Go into the /scss folder and create a file called: demo-styles.scss.

Notice the file extension .scss. This is your SASS file.
Return to the CMD line. In CMD you need to go to the Demo Folder as in the following:

Return to the CMD line.

In CMD you need to go to the Demo Folder as in the following:

Make SASS “watch” to your /scss and /css folders.

6. Edit the .scss file and watch SASS compile it into a .css file.

Make SASS “watch” to your /scss and /css folders.

7. Edit the .scss file and watch SASS compile it into a .css file.

Updated CSS File

Included 'reset.scss' File in demo-styles.scss

You have now leveled up by knowing how to use SASS.

Demo Example

Happy Coding Guys!

Monday, December 12, 2016

Media Queries For Mobile, Laptop, Desktop And iPad For Making Responsive Website Design (RWD)

Media Query

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Media queries enable us to create a responsive website design (RWD) where specific styles are applied to small screens, large screens and anywhere in between. The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

General Syntax of Media Query

@media (query) {
/* CSS Rules used when query matches */
}

While there are several different items we can query on, the ones used most often for responsive web design are min-width, max-width, min-height and max-height.

Let's have a look at device specific queries:

1. Mobile
There are two different resolution for laptops.

/* For 480 Resolution */  
@media only screen   
and (min-device-width : 320px)   
and (max-device-width : 480px)  
{ /* STYLES GO HERE */}  

Generally, this dimension is recommended for mobile:

/* For 640 Resolution */  
@media only screen   
and (min-device-width : 360px)   
and (max-device-width : 640px)  
{ /* STYLES GO HERE */}  

2. Laptop
There are two different resolution for laptops.

/* For 1024 Resolution */  
@media only screen   
and (min-device-width : 768px)   
and (max-device-width : 1024px)  
{ /* STYLES GO HERE */}  

/* For 1366 Resolution */  
@media only screen   
and (min-width: 1030px)   
and (max-width: 1366px)  
{ /* STYLES GO HERE */}  

Generally, this dimension is recommended for laptop,
3. Desktop

@media only screen   
and (min-width: 1370px)  
and (max-width: 1605px)  
{ /* STYLES GO HERE */}  

4. iPad

/* If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work. */  
/* Orientation : Landscape */  
@media only screen   
and (orientation : landscape)   
and (-webkit-min-device-pixel-ratio: 1)  
and (min-device-width : 768px)   
and (max-device-width : 1024px)   
{ /* STYLES GO HERE */}  

/* Orientation : Portrait */  
@media only screen   
and (orientation : portrait)   
and (-webkit-min-device-pixel-ratio: 1)   
and (min-device-width : 768px)   
and (max-device-width : 1024px)  
{ /* STYLES GO HERE */}  

I have attached sample .css file in this article. Guys, keep exploring. If you have any queries, please feel free to contact me.

Sample CSS File

Thursday, November 24, 2016

Best Practices to Make Your Site Responsive (RWD)

In a current era, Responsive Website Design must require to develop your site. If you are making a site which can be easily open at desktops, laptops, I pads, Mobiles and etc. In short, your site is clearly visible with all digital devices.

For achieving that purpose, you have to create your site responsive. Means, it covers all different dimensions of all different devices.

Best Practice to make Responsive Website Design (RWD):

Give "width, padding-left, padding-right, margin-left, margin-right" in percentages (%).Because whenever you try to reduce or expand the width of screen, these Css properties are automatically updated.
Don't give "width, padding-left, padding-right, margin-left, margin-right" in pixels because it contains static values. It may not get changed when you try to shrink or expand your page.
Always check compatibility of your page in Mozilla Firefox, Google Chrome, Safari, Opera ,IE 9 as well as above versions.
Don't nest block level elements into inline elements Eg. <span><div></div></span>. It violates the standards of HTML.
Use proper coding conventions and rules for HTML and Css to develop a page.
Study Best Practices for HTML and Css before starting to make a page.
Always make HTML first. After making HTML, write Css for making RWD.
If you are using any framework like Bootstrap, always look after for coding standards of HTML and Css. Because in most of cases, Bootstrap violates coding standards.
Whenever you are creating your site, give most of the values of Css properties in percentages (%).So that it will complete your 80% task for making RWD.
For remaining 20% work, if your page is not fit for a particular dimension, use media query for that dimension only.
Try to avoid device specific hacks as well as use of media queries.
Give size of each elements (Without using hacks and media queries) in such a way that your page should visible in each dimensions.
Use HTML and Css Validator Plug-in to validate your code.
Make minified version of Css before deploying your code on production. Use Css Compressor for making Css minified.
Avoid/stop use of "important" in Css.

It's not still finished. But you can get at least basic idea about how to implement Responsive Website Design (RWD).

Guys, Keep Exploring. If you have any query, please feel free to contact me.

Sunday, November 13, 2016

Atom (Open Source - Text Editor) Auto Indentation

Atom is an Open Source Text Editor. It supports couple of languages like Html, C#, Python, PHP, JavaScript and etc.

I would like to share how to perform Auto Indentation in Atom.

Step 1:

Open File- Init Script - Paste below code

atom.workspace.observeTextEditors (editor) ->

editor.buffer.onWillSave ->

return if editor?.getGrammar()?.scopeName is 'source.coffee'

editor.autoIndentBufferRows 0, editor.getBuffer().getLineCount() - 1

Step 2:

Open File- Key map - Paste below code

'atom-text-editor':

'ctrl-alt-l': 'editor:auto-indent'

Once you finish with both the steps, please restart your Atom.

Now whenever you write some code and press “Ctrl + S" key, your code will be auto indented.

Happy coding...!!

Tuesday, November 1, 2016

Atom (Open Source) - A hackable text editor for 21st Century

Atom is a free and open-source text and source code editor for OS X, Linux, and Windows. It provides support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub.

You can visit official site of Atom on below link:

https://atom.io/

You can easily download Atom from below link. It’s Open Source Text Editor.

http://flight-manual.atom.io/getting-started/sections/installing-atom/

Features of Atom:

1. Cross Platform Editing
Atom can work on any OS like Windows, Linux or OS X.

2. Built In Package Manager
You can search and install new packages. Even you can create your own.

3. Auto completion
Atom automatically completes your code once you write starting character or a word.

4. File System Browser
You can easily browse single file, multiple files or even whole project at a time.

5. Grammar Selection
You can set grammar selection according to file type so that proper color identification and intelligence can get from Atom.

Atom is a desktop application built using web technologies like HTML, CSS, Javascript and Node.Js. Atom is based on Electron (formerly known as Atom Shell), a framework.

Atom also enables cross-platform desktop applications using Chromium and io.js, which is also developed by GitHub. It is written in Less and CoffeeScript.

Atom can also be used as an IDE. Atom was released from beta, as version 1.0, on June 25, 2015.Its developers call it a "hackable text editor for the 21st Century".