Saturday, May 20, 2017

Basic Git Commands

So before beginning down ..here is a Defination of Git as per Wikipedia :

Git is a version control system (VCS) for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for software development, but it can be used to keep track of changes in any files. As a distributed revision control system it is aimed at speed, data integrity, and support for distributed, non-linear workflows.
So fast forward  ....apart from having local git  repositories we have some web based version control systems like Github and Bitbucket


And If you are not a Command Liner Fan you have a nice Set of  GUI applications to manage you git from both Github and Bitbucket  respectively which are : 



Terms to be known with Github 


Command Line: The computer program we use to input Git commands. On a Mac, it’s called Terminal. On a PC, it’s a non-native program that you download when you download Git for the first time (we’ll do that in the next section). In both cases, you type text-based commands, known as prompts, into the screen, instead of using a mouse.

Repository: A directory or storage space where your projects can live. Sometimes GitHub users shorten this to “repo.” It can be local to a folder on your computer, or it can be a storage space on GitHub or another online host. You can keep code files, text files, image files, you name it, inside a repository.

Version Control: Basically, the purpose Git was designed to serve. When you have a Microsoft Word file, you either overwrite every saved file with a new save, or you save multiple versions. With Git, you don’t have to. It keeps “snapshots” of every point in time in the project’s history, so you can never lose or overwrite it.

Commit: This is the command that gives Git its power. When you commit, you are taking a “snapshot” of your repository at that point in time, giving you a checkpoint to which you can reevaluate or restore your project to any previous state.


Branch: How do multiple people work on a project at the same time without Git getting them confused? Usually, they “branch off” of the main project with their own versions full of changes they themselves have made. After they’re done, it’s time to “merge” that branch back with the “master,” the main directory of the project.


Git-Specific Commands
  • ·         git init: Initializes a new Git repository. Until you run this command inside a repository or directory, it’s just a regular folder. Only after you input this does it accept further Git commands.
  • ·         git config: Short for “configure,” this is most useful when you’re setting up Git for the first time.
  • ·         git status: Check the status of your repository. See which files are inside it, which changes still need to be committed, and which branch of the repository you’re currently working on.
  • ·         git add: This does not add new files to your repository. Instead, it brings new files to Git’s attention. After you add files, they’re included in Git’s “snapshots” of the repository.
  • ·         git diff : shows the difference between the working directory and the staging area
  • ·         git commit: Git’s most important command. After you make any sort of change, you input this in order to take a “snapshot” of the repository. Usually it goes git commit -m “Message here.” The -m indicates that the following section of the command should be read as a message.
  • ·         git checkout: Literally allows you to “check out” a repository that you are not currently inside. This is a navigational command that lets you move to the repository you want to check. You can use this command as git checkout master to look at the master branch, or git checkout <name> to look at another branch.
  • ·         git show : to display the latest commit on your brach
  • ·         git checkout HEAD filename : will restore the file in your working directory to look exactly as it did when you last made a commit.
  • ·         git reset HEAD filename : This command resets the file in the staging area to be the same as the HEAD commit. It does not discard file changes from the working directory, it just removes them from the staging area.
  • ·         git reset : This command works by using the first 7 characters of the SHA of a previous commit.


o   git checkout HEAD filename: Discards changes in the working directory.
o   git reset HEAD filename: Unstages file changes in the staging area.
o   git reset SHA: Can be used to reset to a previous commit in your commit history.
  • ·         git branch:  This command will let you build a new branch, or timeline of commits, of changes and file additions that are completely your own. Your title goes after the command

o   git branch -d branch_name : will delete the specified branch from your Git project.
o   git merge branch_name: Used to join file changes from one branch to another.
o   git merge branch_name: Used to join file changes from one branch to another.

  • ·         git merge: When you’re done working on a branch, you can merge your changes back to the master branch, which is visible to all collaborators. git merge cats would take all the changes you made to the “cats” branch and add them to the master.

Working in a Team
  • ·         git clone remote_location clone_name : command to clone this remote repository from remote location to  your location with the name of your choice
  • ·         git remote -v : to see a list of a Git project's remotes with the command:
  • ·         git fetch: to bring remote changes (remote) to remote branch (local)   (no merge)
  • ·         git merge origin/master : to merge remote brach fetch to your own local  master brach
  • ·         git push: If you’re working on your local computer, and want your commits to be visible online on GitHub as well, you “push” the changes up to GitHub with this command.
  • ·         git push origin your_branch_name : will push your branch up to the remote






Sunday, May 14, 2017

MVA Know it prove it- Web Development -2 HTML5 & CSS3 - iii

Article Tag
Article is a HTML5 semantic element, similar to <section> and <header>. It is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in.

The HTML5 <article> element represents a complete composition in a web page or web application that is independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.


Section Tag
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.


Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.


DIV Tag
The HTML <div> tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS.
The difference between the div tag and the span tag is that the div tag is used with block-level elements whilst the span tag is used with inline elements.



Forms Tag
The HTML <form> tag is used to create an HTML form and it has following syntax:

<form action="Script URL" method="GET|POST">
    form elements like input, textarea etc.
</form>

Two commonly used methods for a request-response between a client and server are: GET and POST.
  • GET - Requests data from a specified resource
  • POST - Submits data to be processed to a specified resource

Reset CSS


A CSS reset is a set of styles you load prior to your other styles, to remove browser built-in styles. One of first and most popular ones was Eric Mayer's Reset CSS.
Another option is to harmonize browser built-in styles. The most popular tool to achieve this is currently Normalize.css.

Selectors

Selectors define to which elements a set of CSS rules apply.

Type selectors
This basic selector chooses all elements that matches the given name.
Syntax: eltname
Example: input will match any <input> element.
Class selectors
This basic selector chooses elements based on the value of their class attribute.
Syntax: .classname
Example: .index will match any element that has the class index (likely defined by a class="index" attribute or similar).
ID selectors
This basic selector chooses nodes based on the value of its id attribute. There should be only one element with a given ID in a document.
Syntax: #idname
Example: #toc will match the element that has the id toc (likely defined by a id="toc"attribute or similar).
Universal selectors
This basic selector chooses all nodes. It also exists in a one-namespace only and in an all-namespace variant too.
Syntax: * ns|* *|*
Example: * will match all the elements of the document.
Attribute selectors
This basic selector chooses nodes based on the value of one of its attributes.
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Example: [autoplay] will match all the elements that have the autoplay attribute set (to any value).
Cascading order of preference




Canvas Element

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.


What is SVG 

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVGspecification is an open standard developed by the World Wide Web Consortium (W3C) since 1999

The difference between vector and raster graphics is that raster graphics are composed of pixels, while vector graphics are composed of paths. A raster graphic, such as a gif or jpeg, is an array of pixels of various colors, which together form an image.

Vendor Prefixes
When CCS3 was first being introduced, a number of excited properties began to hit different browsers at different times. For example, the webkit-powered browsers (Safari and Chrome) were the first ones to introduce some of the animation-style properties like transform and transition. By using vendor prefixed properties, web designers were able to use those new features in their work and have them seen on the browsers that supported them right away, instead of having to wait for every other browser manufacturer to catch up!

So from the perspective of a front-end web developer, browser prefixes are used to add new CSS features onto a site while  having comfort knowing that the browsers will support those styles. This can be especially helpful when different browser manufacturers implement properties in slightly different ways or with a different syntax.

Responsive  Web Design
Responsive web design (RWD) is an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with. In addition it's important to understand that Responsive Web Design tasks include offering the same support to a variety of devices for a single website. As mentioned by the Nielsen Norman Group: content, design and performance are necessary across all devices to ensure usability and satisfaction

Bootstrap
Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.



Tuesday, May 02, 2017

MVA Know it prove it- Web Development -2 HTML5 & CSS3 - ii

W3C
The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (abbreviated WWW or W3).
Founded and currently led by Tim Berners-Lee, the consortium is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the World Wide Web.
The W3C also engages in education and outreach, develops software and serves as an open forum for discussion about the Web.



Absolute URL 
Absolute URL requires you to place the entire address on the page that you link to. An example of an absolute URL would look like this:

<a href = http://www.example.com/xyz.html>

Relative URL
The relative URL, on the other hand, does not use the full address. It assumes that the page you type in is on the same site. An example of a relative URL would look like this:


<a href = “/xyz.html”>

Why Choose Absolute URL  ?


– FOILS SCRAPERS

An absolute URL makes it harder for people to scrape information from your website using scraper programs. If you have all of your internal links as relative URLs, it would be very easy for a scraper to simply scrape your entire website and put it up on a new domain.

– DISALLOWS DUPLICATE CONTENT

It’s very important to have absolute URLs in order to avoid duplicate content issue. Imagine you have multiple versions of root domains that are indexed in Google without a canonical tag point to correct version of the site.

– IMPROVE INTERNAL LINK STRATEGY

While coding URL, you do want to think about internal linking. If you have a <base href> tag that was implemented wrong on the site along with relative URLs, it will create a page that will land on 404 error page.

Why Choose Relative  URL  ?

– QUICKER CODING

Large websites are made much easier to code when you shorten your URL into a relative format.
– STAGING ENVIRONMENT
If you are using a content management system that has staging environment with its own unique domain like WordPress or SharePoint, then your entire website is replicated on that staging domain. The relative format allows the same website to exist on staging and production domain, or the live accessible version of your website, without having to go back in and recode all of the URLs. This not only makes coding easier for a web developer but also serves as a time saver.

– FASTER LOAD TIMES

Pages that use a relative URL will load more quickly than pages using absolute URLs, for the most part, although the difference is miniscule at best.