Category Archives: CSS

Crash Course – Tutorial – Learn – GIT

I have read many Articles/Manuals of git on Internet and think all the articles are messy. No body tried to explain, how to use it just have given the commands and their article is complete. So, today I am here describing my experience about Git and provide the real using of Git and how to do the things.

What is Git?

Most of the persons know what is Git but for those who doesn’t know let me explain them. In software development, Git is a distributed version/revision control and source code management (SCM) system with an emphasis on speed.

What do you mean by revision/Source Code Management system

The software development is very laborious work and to maintain the backup/Management of Source Code is a very critical thing. Let me go through an Example to understand version more easily.
Example:
A client comes to you and told you write certain code for certain project and do have done it easily, as there is no problem upto this stage. You write the Code and optimized it and given to the client.
Now, after sometime the same client comes to you and told you to do certain improvement in the same package and you have done that very easily and have no problem in it.
Now, after the lapse of some large time the same client comes to you and tell you earlier project has that feature and want to implement it. Now, here is the problem, either you have to work again or if you have taken the backup then it is easy. Here we are interested in not taken backup situation. Now, if you have done the project through Version Control system the version system would take the necessary backup at different points and you can view it easily.

Advantage of using Source Code Management system

There are many advantages of using SCM but the important advantages of using SCM are:
  1. Backups: If you accidentally delete some file (or part of a file) you can undelete it. If you change something and want to undo it, the SCM can do so.
  2. Portability:SCM are designed to help to solve the problem of Portability to your code between different computers. You do not need to bother if you always copied the newest version; the SCM will do that for you.
  3. Branching/Debuggin:Say you have developed the project as there are many things involved in it. As such Designing, Security, DBMS etc. things and now if you want to fix come thing in particular branch then you open the branch and debugging or up-gradation would start immediately rather than to see the full code again where the particular branch starts and where it ends.
  4. Simultaneously Working:Say you have developing the project as there are many things involved in it. As such you create the branches of the project and distribute them to different developers and those developers can work simultaneously without interfering with another developer work and each would be having its own new code and master branch with all working simultaneously.
  5. Cross Platform Working:This the piratical advantage that if one developer is familiar with working with one type of system and another in another type the SCM system make the both codes merged and cross-platform development would be easy development as both developers can know that things are required by other. The best example is open source projects such as Apache, MySQL, PHP and many more, which run on the cross-platform.

Does Git is the only SCM and what about cross platform running

No, Git is not only SCM available, there are many others available and that to run on cross-platform but there are certain advantages which makes Git a little superior to others. Other popular SCM are CVS, Sub-Version, Mercurial, Bazaar, Perforce and Team Foundation Server. There are many available but the TOP three are Git, CVS, Subversion. To know why Git is better than others we would have to look on the others SCM and know what are the advantages we are getting.
  1. Git allows your to work offline, with others it is not possible. Even a simple log command cribs for the server.
  2. With the philosophy of Git branching, checkout, tagging is a flash. SVN is good with branching and tagging but with checkout it is slow(goes to the server for each file).
  3. Git being content addressable, can be checked for inconsistencies(CVS had corruption).
  4. There are great workflows which suite them completely and have been worked out great with Git, here.
  5. With facilities like interactive rebasing and interactive add, stashing etc, you do not need to make bulk commits or create un-necessary branches for each bug/feature.
  6. Git is blazing fast with cloning too — it packers files and hence the transfer achieves connection speeds. With SVN and CVS there is no such tarring which makes it inherently slow over the wire.
  7. Non-significant but git metadata is almost half that of CVS and SVN and there have been better reported results with Mozilla’s transition of SVN->GIT.

Important terminology – GIT

One must understand, the terms used by git manual or used in other blogs and website and without understand them, we can’t learn using Git. The important terminology used by Git are:
  1. Repository: The purpose of Git is to manage a project, or a set of files, as they change over time. Git stores this information in a data structure called a repository. The Git repository is stored in the same directory as the project itself, in a subdirectory called .git. A git repository contains, among other things, the following:
    1. A set of files and directories
    2. A set of commit objects (i.e. the finalized code or different stages of backup of code or upgrading of code)
    3. Historical record of changes in the repository. A set of references to commit objects, called heads
  2. Branches: A branch is a separate code line with its own history. You can create a new branch from an existing one and change the code independently from other branches. One of the branches is the default (normally named master). The user selects a branch and works in this selected branch, which is called the “working copy”. Selecting a branch is called “checkout a branch”.
    Example: Say you are working on a paper. You’ve gotten a first draft out, submitted for review. You then get a new batch of data, and you’re in the process of integrating it into the paper. Halfway in, however, the review committee calls you up and tells you that you need to change some of your section headings to conform to format specifications. What do you do?
    Obviously you don’t want to send them your half-baked revisions with corrected headings. What you want to do is jump back to the version you sent out, change the headings on that version, and send off that copy, all the while keeping your recent work safely stored somewhere else.

    This is the idea behind branching, and Git makes it easy to do.

  3. Tagging: Git has the ability to ‘tag’ specific points in history as being important/milestone achieved – generally people use this to mark release points (‘version 1.0’, etc). There are two types of tags available in Git are:
    1. Lightweight: Lightweight tags are very much like branches that don’t change – it’s just a pointer to a specific commit.
    2. Annotated: Annotated tags, however, are stored as full objects in the Git database. They are checksum, contain the taggers name, email and date, have a tagging message and can be GPG signed and verified.
    It’s generally recommended to create annotated tags so you can have all this information, but if you want a temporary tag or for some reason don’t want to keep that other information, lightweight tags are available too.
  4. Commit: Committing is a relatively straight forward process that adds your changes to the history of your repository and assigns a commit this name to it. The change is not sent to a central repository, though. Other people can pull the change from you, or you can push the change to some other repository, but there’s no automatic updating. You can use commit in multiple ways to commit changes to your repository, but every commit requires a log message. You can add a message by adding -m “your message”. The message can be any valid string. You can also specify multiple paragraphs by passing multiple -m options to git commit.
  5. Revision: Represents a version of the source code. Git identifies revisions with SHA1 ids. SHA1 ids are 160 bits long and are represented in hexadecimal. The latest version can be addressed via “HEAD”, the version before that via “HEAD~1” and so on.
  6. HEAD: is used by your repository to define what is currently checked out:
    1. If you checkout a branch, HEAD symbolically refers to that branch, indicating that the branch name should be updated after the next commit operation.
    2. If you checkout a specific commit, HEAD refers to that commit only. This is referred to as a detached HEAD, and occurs, for example, if you check out a tag name.
Those who doesn’t like GUI or want to learn Command line operation the list of important commands is very necessary to learn are:

Important GIT Command

GIT Command Name Command Description
Add Add is used for adding the contents of the file to index.
bisect If any bug is created after update then the command is used to find the changes that introduced a bug in project.
branch branch command is used to create, view, list or delete the branches
checkout Checkout is used for switching between branches
clone clone means duplicate, in git it is used to duplicate the project at different location
commit commit is update the changes to index, note it doesn’t update the remote repository
diff To view the changes between two commits
fetch If you want to use the objects from different project then fetch is used to fetch the particular tag or branch
init create a empty git repository or re-initialize the an existing one
log It is used to show the message sent with commits
merge it is used to join two or more histories
pull pull is the important command used to fetch in case of multiple developers doing work on same project. It fetch from and merge with another repository or local branch
push after commit the project push is required to update the remote project.
rebase In case you deleted the file and wanted it again rebase is used to Forward-port local commits to updated upstream head
reset Moving the head to specified commit or state.
show used to view the different types of objects used in a project
status An important command to view the current status of branch either the code is edited by some body locally or not and if yes then in which files.
tag Tag is used to create, delete, list or verify the tag with GPG

Perquisites to understand GIT

The only thing required for Git is the software git installation, as users from Linux are much know about GIT and I don’t talk about Linux system. My target is for Windows and on Windows Git Can be installed by two ways: i) Either Install Cygwin/Migwin on the system first and then install/download the program through cygwin, ii) installing MSysGit.
I have not used Mac/Embedded systems or other systems and thus my personal interest in Windows and using the Open Source Tools and using GCC for development with cross-platform.
I personally like the second way, as installing the cygwin will be time-consuming and to understand cygwin one has to learn the command line commands and in second option download the simple package and install it and start working with GUI or command line as choice is yours. MSysGit can be downloaded here
I am going to talk about the Remote Git and using Git Locally and update the code Remote and also side by development and distribution with many developers maintaining the code. So, search about free git providers and signup and install GIT locally and generate the SSH key and upload the Key at website, so that you can easily update the code. At this point I am presuming that you have installed the Git and signed up a free/paid Git Provider and also setup the SSH key to update the key generated through your system.
Note: For downloading the SSH Key is not required the SSH Key is only required to update the source code to confirm the developer only update the source code and not by any person.

Creating the First Project on Remote Server

On Git registered website create a new Repositories with any name you like but remember whatever name you give on downloading the code through Git the project name is changed to project folder Name. Since we are using the example and best would be Hello_World.
There are two ways download the Repositories to you system i.e. i) through GUI and ii) through Bash (i.e. command line). I will let you know both the things.
GUI: Click on Start => All program’s => Git => Git GUI. Select the clone option provided there and provide the url of your project created as source and destination as any local system location of your choice.
BASH: Select the folder or drive to use as destination and right lick mouse button and choose the option of git bash from list and in command line write git clone url (url means the project remote address) and press enter and it would ask your password and after that the folder with the name of your Repositories would be created and we have to work under this folder.

First Commit/First update of Project

Now create your project under the folder created by git, here I am creating hello world example as project but you can make any project of any language. The code of hello project is as under:
#include 				/* Including the standard i/o file */
int main(){					/* Starting the main program */
	printf("hello world!!");		/* If all the right print hello world */
	return 0;				/* returning 0 to end the program */
}
At any time during coding you think a stage is reached or the time has come to take the backup then do the following steps to take a backup. Go the folder of the project created by GIT and under that folder right-click on empty screen as both GUI and Bash required this step.
GUI: Select GIT GUI. It will open a new Window which will let you the changes made in project. Under un-stacked the list of files would be displayed on which the changes are made and on clicking any listed file would show the changes made by you and if the file is new then whole new file contents. Stack the changes you want to made by selecting files and press ^T and the files would move from un-staked to stacked changes provide the comment on the small text window, you can type any thing you like to give a note for the project or any other think and press commit button. Now, the changes are staked but the stacked are not sent to remote server and you can also edit the changes upto this step and the last step is to click on push and a new window would pop and again press push and after that your project is updated on the remote server too.
Bash: Select Git Bash for command line update tool, First of all check the “git status”, as it will let you know what files are changed. After you confirm the files are correctly show then issue a command of “git add file-name”. This would all the files as stack to commit, you can also supply multiple file names in “git add file-name file-name …..”. When you have added all the files and no changes are required in files then right “git commit -m ‘your message'”, git commit will make the staked changes to final stage and those changes the original files with recent committed files or stake the changes to the original files, -m is used to write a message as comment as you can provide the description about commit and the changes made by you on the project. It is one of the important thing to write and let you know what is done at the time of that commit. Now the last step to push the changes to the remote git by “git push”, this command make your local committed copy and remote copy sync, and when again somebody or you download the project the new updated copy would be provided.

Note

Git can work with the same workflow as Subversion, with a group of developers using a single repository for exchange of their work. The only change is that their changes aren’t submitted automatically but they have to push (however, you can set up a post-commit hook that will push for you every time you commit; that loses the flexibility to fix up a screwed commit, though). The developers must have either an entry in htaccess (for HTTP DAV) or a UNIX account (for SSH). You can restrict their shell account only to Git pushing/fetching by using the git-shell login shell. In the next article, I would tell you about more advanced features for development under many developers, merging the changes and to track bugs and many more things.
Advertisements
Tagged , , , , , , , , , , ,

Does CSS effects SEO?

Does using CSS affect SEO?

The question is very interesting but the answer is more challenging to find correct answer. In today competitive world where every thing is seen carefully effects. This question asked time and time again by Developers and Website Owners. The simple answer is NO but I would say it depends on the CSS rules applied by Developer or Designer that it would help the Search Engine and users for ranking purposes.There are some rules of CSS which would help a little bit in SEO and from many rules some of them are:
With CSS there is no rule of using standard ID and Class, Anyone can use any ID Name or Class name to refer the HTML Tag. So, there would be very difficult for automatic process to see page but the human beings are required and tell this is Important and this not. For looking into important things in the web spiders use HTML H1 to H6 Tags. They have given the perfectness to HTML Heading Tags. So, the process in the automatic mode and with different algorithms the text between Heading Tags are read and given score according to it. Now taking the advantages of CSS one can disable the default setups and make his own rules for font setting and size and positing of the default tag.
<html>
     <head>
          <title>Over riding HTML Tags default rules</title>
     </head>
     <style>
          body, h1, h2, h3, h4, h5, h6{margin:0; padding:0; outline:0; border-spacing:0; font-size:100%; font-weight:normal;}
          h1, h2, h3, h4{font-weight:bold; text-align:center; border:1px solid #000; border-spacing:5px; width:50%;padding:6px;}
          h1{width:150px;height:40px;position:absolute;background-color:yellow;top:20px;left:20px;z-index:0;opacity:0.5;border:1px solid #333333;}
          h2{width:150px;height:40px;position:absolute;background-color:yellow;top:50px;left:70px;z-index:1;opacity:0.5;border:1px solid #333333; color:red;}
          h3{width:160px;height:40px;position:absolute;top:50px;left:200px;z-index:1;opacity:0.5;border:1px solid #333333;}
          h4{width:200px;height:40px;position:absolute;top:78px;left:130px;z-index:3;opacity:0.5;border:1px solid #333333;background-color:red; color:#fff}
    </style>
    <body>
         <h1>Grand father</h1>
         <h2>Father</h2>
         <h4>Son</h4>
        <h3>Mother</h3>
    </body>
</html>
In the above example, we have written the text in order of h1, h2, h4, h3 but with css rule we have changed the position of the tag and you will see that Grand Father is at TOP and Father and Mother in Middle and Son at bottom, we have given the appearances according to our needs and Spider will also given the same importance as per HTML Tags.
According to Google, “Googlebot processes each of the pages it crawls in order to compile a massive index of all the words it sees and their location on each page. In addition, we process information included in key content tags and attributes, such as Title tags and ALT attributes. Googlebot can process many, but not all, content types”. Now two things which they have said is the location of text and tags means HTML Tags. Thus while writing a content page on has written the important content at the bottom but want to know at top then with the CSS help you can change the location of the Text and Google would fetch the text as per HTML Tags and same importance would be given to your content as you have provided.

Tips and Tricks to optimize page with CSS rules

There are many tips and tricks available to optimize the web page but I will provide only important rules which would help every body, are
  1. View without CSS and JavaScript Code: Today design is every thing and many websites and spent thousands to get the best design but on the prospective view they don’t think about SEO. The First trick is turn of CSS and JavaScript Code and take a view of your webpage and you will come to know what is actual position of the text and change the position according to your desire. Main reason is that the spider and crawler are not human beings so they view things without CSS and JavaScript Event.
  2. Organized Code: In SEO, the location of text, size of text and location of the text matter a lot.If your page is significantly long, the content towards the bottom of your page won’t rank as “important” as the stuff at the top. Now another question arises that what would be the length of the page and how to determine length and the rule is length of the page is determined not by the amount of content (i.e, text, images, links, etc.) but by the quantity of code. Now consider that you have nested tables constituting your top navigation and now spider/crawler comes and before it gets to your content, spider or algorithm mark the page as the real guts of your website insignificant content.
  3. CSS Pagination:Long one page articles will outrank short ones usually. Apart from that the usability is key in making your visitors read the whole article so you don’t want users neither to scroll for ages nor to click a link and send a request each time they want to get to the next page of your article. Many developers use solution is CSS pagination and question arose that Isn’t it hidden text though? Hidden text is one of the oldest “tricks” to cheat search engines, webmasters still employ it and my potential clients sometimes wonder why they don’t rank while using hidden text. So hands off hidden text! Anyways this way you can divide the content into easily digestible parts while still having it on one page. Presently in HTML5 use section and article tags again and again and try to divide the content into different sections, but don’t use CSS Pagination with hiding text.
  4. Styling with HTML Standard Tags: Dont’ try to create your own HTML Tags and don’t use different types of tags for giving performance according to your choice. Try to think that Spiders are not human being and designing or making content more stylish without using standard tags will make your site less important. Use HTML5 header tag to tell your header, menu to provide the menu content, sidebar and article and section tags. If you are using the HTML4 then it is advises to name your CSS ID or Class with these names, as with algorithms the use of standard names with Tags would also boost the Ranking of your web page.
  5. CSS Sprites:Now that site speed is an official ranking factor at Google even the webmasters who didn’t care about fast loading pages until now. One simple technique to use reduce page load and the number of requests is the usage of so-called CSS sprites. CSS sprites are basically several small images merged into one big image. Instead of loading each image by itself you can load just the CSS sprite and display only part of it depending on the user interaction. You use a background-image for that purpose and move the displayed area on click or mouse over then. In order to accomplish that you simply change the background-position in the CSS.
  6. Use ALT Tag with Images: This is very important from SEO point of view as the spiders are not humans and if ALT tag is provided then they would give the preferences to images and also try to assert the resiliency of your content with the ALT tags of the Images used on web page.
  7. Emphasis:Headings aren’t the only things that affect your SEO. Search engines also pay attention to a few other tags when determining what the “important” words on a page are. For example, Google tends to treat words wrapped in and tags as being more significant that their surrounding text. That’s why you’ll sometimes see pages with randomly bold-faced or italicized word strewn about – they’re trying to boost their SEO by helping Google find the keywords they want to focus on. But who’s to say that those keywords need to be visible to everyone? We could always use CSS to ensure that search engines like Google and Yahoo understand which words are important, without having to annoy our readers with our strong-em soup. If we just take some XHTML like this:
    </pre>
    This sentence contains several <strong class="seo">keywords</strong> of <em class="seo">significant importance.
    <pre>
    
    em.seo, strong.seo {font-weight: normal;font-style: normal; }
    

    This CSS will prevent your SEO-purposed strong and em tags from being bold-faced or italicized on the screen. However, search engines will still recognize the significance of those tags.

Tagged , , , , ,
%d bloggers like this: