fix: Update packages and fix local dev (#26907)
<!-- Please follow this checklist and put an x in each of the boxes, like this: [x]. It will ensure that our team takes your pull request seriously. --> - [x] I have read [freeCodeCamp's contribution guidelines](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md). - [x] My pull request has a descriptive title (not a vague title like `Update index.md`) - [x] My pull request targets the `master` branch of freeCodeCamp.
This commit is contained in:
Stuart Taylor
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
153e1c9f38
commit
7da04a348b
@ -1,19 +1,19 @@
|
||||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
import { createStore } from './src/redux/createStore';
|
||||
import AppMountNotifier from './src/components/AppMountNotifier';
|
||||
import GuideNavigationContextProvider from './src/contexts/GuideNavigationContext';
|
||||
import GuideNavContextProvider from './src/contexts/GuideNavigationContext';
|
||||
|
||||
const store = createStore();
|
||||
|
||||
export const wrapRootElement = ({ element }) => {
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<GuideNavigationContextProvider>
|
||||
<GuideNavContextProvider>
|
||||
<AppMountNotifier render={() => element} />
|
||||
</GuideNavigationContextProvider>
|
||||
</GuideNavContextProvider>
|
||||
</Provider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,6 +2,14 @@ const path = require('path');
|
||||
|
||||
const { buildChallenges } = require('./utils/buildChallenges');
|
||||
|
||||
const { NODE_ENV: env, LOCALE: locale = 'english' } = process.env;
|
||||
|
||||
const selectedGuideDir = `../${
|
||||
env === 'production' ? 'guide' : 'mock-guide'
|
||||
}/${locale}`;
|
||||
const guideRoot = path.resolve(__dirname, selectedGuideDir);
|
||||
const curriculumIntroRoot = path.resolve(__dirname, './src/pages');
|
||||
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: 'freeCodeCamp',
|
||||
@ -32,10 +40,17 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: '@freecodecamp/gatsby-source-filesystem',
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
name: 'guides',
|
||||
path: guideRoot
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
name: 'introductions',
|
||||
path: path.resolve(__dirname, './src/pages')
|
||||
path: curriculumIntroRoot
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -110,7 +125,7 @@ module.exports = {
|
||||
}
|
||||
}
|
||||
},
|
||||
'fcc-create-nav-data',
|
||||
{ resolve: 'fcc-create-nav-data' },
|
||||
{
|
||||
resolve: 'gatsby-plugin-manifest',
|
||||
options: {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
require('dotenv').config();
|
||||
|
||||
const { createFilePath } = require('@freecodecamp/gatsby-source-filesystem');
|
||||
const { createFilePath } = require('gatsby-source-filesystem');
|
||||
|
||||
const { dasherize } = require('./utils');
|
||||
const { blockNameify } = require('./utils/blockNameify');
|
||||
@ -37,7 +37,7 @@ exports.onCreateNode = function onCreateNode({ node, actions, getNode }) {
|
||||
}
|
||||
};
|
||||
|
||||
exports.createPages = ({ graphql, actions }) => {
|
||||
exports.createPages = function createPages({ graphql, actions }) {
|
||||
const { createPage } = actions;
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
@ -73,6 +73,7 @@ exports.createPages = ({ graphql, actions }) => {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
nodeIdentity
|
||||
}
|
||||
frontmatter {
|
||||
block
|
||||
@ -82,9 +83,6 @@ exports.createPages = ({ graphql, actions }) => {
|
||||
htmlAst
|
||||
id
|
||||
excerpt
|
||||
internal {
|
||||
identity
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -92,7 +90,7 @@ exports.createPages = ({ graphql, actions }) => {
|
||||
`).then(result => {
|
||||
if (result.errors) {
|
||||
console.log(result.errors);
|
||||
reject(result.errors);
|
||||
return reject(result.errors);
|
||||
}
|
||||
|
||||
// Create challenge pages.
|
||||
@ -103,34 +101,32 @@ exports.createPages = ({ graphql, actions }) => {
|
||||
// Create intro pages
|
||||
result.data.allMarkdownRemark.edges.forEach(edge => {
|
||||
const {
|
||||
node: {
|
||||
internal: { identity },
|
||||
frontmatter,
|
||||
fields
|
||||
}
|
||||
node: { frontmatter, fields }
|
||||
} = edge;
|
||||
|
||||
if (!fields) {
|
||||
return null;
|
||||
}
|
||||
const { slug } = fields;
|
||||
const { slug, nodeIdentity } = fields;
|
||||
if (slug.includes('LICENCE')) {
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const pageBuilder = createByIdentityMap[identity](createPage);
|
||||
const pageBuilder = createByIdentityMap[nodeIdentity](createPage);
|
||||
return pageBuilder(edge);
|
||||
} catch (e) {
|
||||
console.log(`
|
||||
ident: ${identity} does not belong to a function
|
||||
ident: ${nodeIdentity} does not belong to a function
|
||||
|
||||
${frontmatter ? JSON.stringify(edge.node) : 'no frontmatter'}
|
||||
|
||||
|
||||
`);
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
return;
|
||||
return null;
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
3290
client/package-lock.json
generated
3290
client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -14,7 +14,6 @@
|
||||
"@fortawesome/free-solid-svg-icons": "^5.2.0",
|
||||
"@fortawesome/react-fontawesome": "0.0.20",
|
||||
"@freecodecamp/curriculum": "0.0.0-next.4",
|
||||
"@freecodecamp/gatsby-source-filesystem": "^2.0.1-beta.3",
|
||||
"@freecodecamp/react-bootstrap": "^0.32.3",
|
||||
"@reach/router": "^1.1.1",
|
||||
"axios": "^0.18.0",
|
||||
@ -23,15 +22,16 @@
|
||||
"enzyme": "^3.6.0",
|
||||
"enzyme-adapter-react-16": "^1.5.0",
|
||||
"fetchr": "^0.5.37",
|
||||
"gatsby": "^2.0.0-rc.15",
|
||||
"gatsby-cli": "^2.4.2",
|
||||
"gatsby-link": "^2.0.0-rc.2",
|
||||
"gatsby-plugin-create-client-paths": "^2.0.0-rc.1",
|
||||
"gatsby-plugin-manifest": "next",
|
||||
"gatsby-plugin-react-helmet": "^3.0.0-rc.1",
|
||||
"gatsby-plugin-sitemap": "^2.0.0-rc.1",
|
||||
"gatsby-remark-prismjs": "^3.0.0-rc.2",
|
||||
"gatsby-transformer-remark": "^2.1.1-rc.5",
|
||||
"gatsby": "^2.0.28",
|
||||
"gatsby-cli": "^2.4.3",
|
||||
"gatsby-link": "^2.0.4",
|
||||
"gatsby-plugin-create-client-paths": "^2.0.1",
|
||||
"gatsby-plugin-manifest": "^2.0.5",
|
||||
"gatsby-plugin-react-helmet": "^3.0.0",
|
||||
"gatsby-plugin-sitemap": "^2.0.1",
|
||||
"gatsby-remark-prismjs": "^3.0.2",
|
||||
"gatsby-source-filesystem": "^2.0.5",
|
||||
"gatsby-transformer-remark": "^2.1.8",
|
||||
"lodash": "^4.17.10",
|
||||
"loop-protect": "^2.1.6",
|
||||
"monaco-editor-webpack-plugin": "^1.5.4",
|
||||
|
||||
@ -5,13 +5,20 @@ const commonREs = require('../../utils/regEx');
|
||||
const readDir = require('../../utils/readDir');
|
||||
|
||||
const { isAStubRE } = commonREs;
|
||||
const pagesDir = path.resolve(__dirname, '../../../guide/english/');
|
||||
// default locale to english for testing
|
||||
const { NODE_ENV: env, LOCALE: locale = 'english' } = process.env;
|
||||
|
||||
const guideDir = `../../../${
|
||||
env === 'production' ? 'guide' : 'mock-guide'
|
||||
}/${locale}`;
|
||||
|
||||
const pagesDir = path.resolve(__dirname, guideDir);
|
||||
|
||||
function withGuidePrefix(str) {
|
||||
return `/guide${str}`;
|
||||
}
|
||||
|
||||
exports.createNavigationNode = node => {
|
||||
exports.createNavigationNode = function createNavigationNode(node) {
|
||||
const {
|
||||
fileAbsolutePath,
|
||||
frontmatter: { title },
|
||||
@ -21,8 +28,9 @@ exports.createNavigationNode = node => {
|
||||
|
||||
const nodeDir = fileAbsolutePath.replace(/\/index\.md$/, '');
|
||||
const dashedName = nodeDir.split('/').slice(-1)[0];
|
||||
const [, path] = nodeDir.split(pagesDir);
|
||||
const parentPath = path
|
||||
const [, nodePath] = nodeDir.split(pagesDir);
|
||||
|
||||
const parentPath = nodePath
|
||||
.split('/')
|
||||
.slice(0, -1)
|
||||
.join('/');
|
||||
@ -33,7 +41,7 @@ exports.createNavigationNode = node => {
|
||||
hasChildren: !!categoryChildren.length,
|
||||
dashedName,
|
||||
isStubbed: isAStubRE.test(content),
|
||||
path: withGuidePrefix(path),
|
||||
path: withGuidePrefix(nodePath),
|
||||
parentPath: withGuidePrefix(parentPath),
|
||||
title
|
||||
};
|
||||
|
||||
@ -25,7 +25,7 @@ describe('fcc-create-nav-data', () => {
|
||||
},
|
||||
fileAbsolutePath: path.resolve(
|
||||
__dirname,
|
||||
'../../../guide/english/php/functions/files/file-writing/index.md'
|
||||
'../../../mock-guide/english/php/functions/files/file-writing/index.md'
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
@ -1,13 +1,21 @@
|
||||
const { createNavigationNode } = require('./create-navigation-node');
|
||||
|
||||
exports.onCreateNode = ({ actions, node }) => {
|
||||
const { internal: {type, identity}} = node;
|
||||
if (type === 'MarkdownRemark' && identity === 'guideMarkdown') {
|
||||
exports.onCreateNode = function createNavDataOnCreateNode({ actions, node }) {
|
||||
const {
|
||||
internal: { type },
|
||||
fields
|
||||
} = node;
|
||||
if (
|
||||
type === 'MarkdownRemark' &&
|
||||
fields &&
|
||||
fields.nodeIdentity === 'guideMarkdown'
|
||||
) {
|
||||
if (node.fileAbsolutePath.includes('LICENSE.md')) {
|
||||
return null;
|
||||
}
|
||||
const { createNode } = actions;
|
||||
return Promise.resolve(createNavigationNode(node)).then(createNode);
|
||||
const navNode = createNavigationNode(node);
|
||||
return createNode(navNode);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
const { createChallengeNodes } = require('./create-Challenge-nodes');
|
||||
|
||||
exports.sourceNodes = ({ actions, reporter }, pluginOptions) => {
|
||||
exports.sourceNodes = function sourceChallengesSourceNodes(
|
||||
{ actions, reporter },
|
||||
pluginOptions
|
||||
) {
|
||||
if (typeof pluginOptions.source !== 'function') {
|
||||
reporter.panic(`
|
||||
"source" is a required option for fcc-source-challenges. It must be a function
|
||||
|
||||
@ -19,12 +19,11 @@ function markdownToHTML(node) {
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = ({ markdownAST }) => {
|
||||
visit(markdownAST, 'image', imageNode => {
|
||||
if (emojiRE.test(imageNode.title)) {
|
||||
return markdownToHTML(imageNode);
|
||||
}
|
||||
|
||||
return imageNode;
|
||||
});
|
||||
module.exports = function forumEmojiPlugin({ markdownAST }) {
|
||||
visit(
|
||||
markdownAST,
|
||||
'image',
|
||||
imageNode =>
|
||||
emojiRE.test(imageNode.title) ? markdownToHTML(imageNode) : imageNode
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
exports.onCreateNode = ({ node, reporter }, { predicate, identity }) => {
|
||||
exports.onCreateNode = function remarkNodeIdentityOnCreateNode(
|
||||
{ node, reporter, actions },
|
||||
{ predicate, identity }
|
||||
) {
|
||||
if (typeof predicate !== 'function') {
|
||||
reporter.panic(
|
||||
'Please supply a predicate function to `gatsby-plugin-identity`'
|
||||
@ -10,7 +13,9 @@ exports.onCreateNode = ({ node, reporter }, { predicate, identity }) => {
|
||||
'that match the predicate'
|
||||
);
|
||||
}
|
||||
const { createNodeField } = actions;
|
||||
if (predicate(node)) {
|
||||
node.internal.identity = identity;
|
||||
createNodeField({ node, name: 'nodeIdentity', value: identity });
|
||||
}
|
||||
return node;
|
||||
};
|
||||
|
||||
@ -13,7 +13,7 @@ const mapStateToProps = createSelector(userSelector, ({ picture }) => ({
|
||||
function SignedIn({ picture }) {
|
||||
return (
|
||||
<Link to='/settings'>
|
||||
<img alt='your user image' height='38px' src={picture} />
|
||||
<img alt='' height='38px' src={picture} />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { PureComponent, createContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Media from 'react-media';
|
||||
|
||||
const noop = () => {};
|
||||
|
||||
|
||||
@ -71,10 +71,10 @@ exports.createChallengePages = createPage => ({ node }, index, thisArray) => {
|
||||
id
|
||||
} = node;
|
||||
if (challengeType === 7) {
|
||||
return;
|
||||
return null;
|
||||
}
|
||||
|
||||
createPage({
|
||||
return createPage({
|
||||
path: slug,
|
||||
component: getTemplateComponent(challengeType),
|
||||
context: {
|
||||
@ -96,7 +96,7 @@ exports.createBlockIntroPages = createPage => edge => {
|
||||
frontmatter: { block }
|
||||
} = edge.node;
|
||||
|
||||
createPage({
|
||||
return createPage({
|
||||
path: slug,
|
||||
component: intro,
|
||||
context: {
|
||||
@ -112,7 +112,7 @@ exports.createSuperBlockIntroPages = createPage => edge => {
|
||||
frontmatter: { superBlock }
|
||||
} = edge.node;
|
||||
|
||||
createPage({
|
||||
return createPage({
|
||||
path: slug,
|
||||
component: superBlockIntro,
|
||||
context: {
|
||||
@ -143,8 +143,8 @@ exports.createGuideArticlePages = createPage => ({
|
||||
meta.description = description ? description.children[0].value : '';
|
||||
}
|
||||
|
||||
createPage({
|
||||
path: slug,
|
||||
return createPage({
|
||||
path: `/guide${slug}`,
|
||||
component: guideArticle,
|
||||
context: {
|
||||
id,
|
||||
|
||||
3
mock-guide/README.md
Normal file
3
mock-guide/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Mock Guide Articles
|
||||
|
||||
This directory holds mock guide articles for use in development
|
||||
187
mock-guide/english/accessibility/accessibility-basics/index.md
Normal file
187
mock-guide/english/accessibility/accessibility-basics/index.md
Normal file
@ -0,0 +1,187 @@
|
||||
---
|
||||
title: Accessibility Basics
|
||||
---
|
||||
> "The Dark Arts are many, varied, ever-changing, and eternal. Fighting them is like fighting a many-headed monster, which, each time a neck is severed, sprouts a head even fiercer and cleverer than before. You are fighting that which is unfixed, mutating, indestructible."
|
||||
>
|
||||
> --Professor Severus Snape, Harry Potter Series
|
||||
|
||||
|
||||
Accessibility's role in development is essentially understanding the user's perspective and needs, and knowing that the web, and applications are a solution for people with disabilities.
|
||||
|
||||
In this day and age, more and more new technologies are invented to make the life of developers, as well as users, easier. To what degree this is a good thing is a debate for another time, for now it's enough to say the toolbox of a developer, especially a web developer, is as ever-changing as the so called "dark arts" are according to our friend Snape.
|
||||
|
||||
One tool in that toolbox should be accessibility. It is a tool that should ideally be used in one of the very first steps of writing any form of web content. However, this tool is often not all that well presented in the toolbox of most developers. This could be due to a simple case of not knowing it even exists to extreme cases like not caring about it.
|
||||
|
||||
In my life as a user, and later a developer, who benefits from accessibility in any form of content, I have seen both ends of that spectrum. If you are reading this article, I am guessing you are in one of the following categories:
|
||||
|
||||
* You are a novice web developer and would like to know more about accessibility.
|
||||
* You are a seasoned web developer and have lost your way (more on that later).
|
||||
* You feel that there is a legal obligation from work, and need to learn more about it.
|
||||
|
||||
If you fall outside these rather broad categories, please let me know. I always like to hear from the people who read what I write about. Implementing accessibility impacts the entire team, from the colors chosen by the designer, the copy written by the copywriter, and to you, the developer.
|
||||
|
||||
## So, what is accessibility anyway?
|
||||
|
||||
Accessibility in itself is a bit of a misleading term sometimes, especially if English is your second language. It is sometimes referred to as inclusive design.
|
||||
|
||||
If your site is on the Internet, reachable by anyone with a web browser, in one sense that website is accessible to everyone with a web browser.
|
||||
|
||||
But, is all content on your website actually readable, usable and understandable for everyone? Are there no thresholds that bar certain people from 'accessing' all the information you are exposing?
|
||||
|
||||
You could ask yourself questions like the following ones:
|
||||
|
||||
* If you add information that is only contained in an audio file, can a deaf person still get that information?
|
||||
* If you denote an important part of your website with a certain color, will a colorblind person know about it?
|
||||
* If you add images on your website that convey important information, how will a blind or low-vision person know about it?
|
||||
* If you want to navigate the application with keyboard or mouth-stick, will it be possible and predictable?
|
||||
* Does your application assume the orientation of the device, and what if the user can't physically change it?
|
||||
* Are there forgiving timed aspects of your application for someone that might need more time to fill in a form?
|
||||
* Does your application still work (progressive enhancement) assuming that JavaScript does not load in time?
|
||||
* You can even go as far as saying, if your website is very resource-heavy, will someone on a slow or spotty connection be able to read your content?
|
||||
|
||||
This is where accessibility comes into play. Accessibility basically entails making your content as friendly, as easy to 'access' as possible for the largest amount of people. This includes people who are deaf, low-vision, blind, dyslexic, mute, on a slow connection, colorblind, suffering from epilepsy, mental fatigue, age, physical limitations, etc.
|
||||
|
||||
## Why implement accessibility?
|
||||
|
||||
You may think that accessibility doesn't apply to you or to your users, so why implement it? What would a blind person do with a photo editing tool?
|
||||
|
||||
The truth is, you're right to a certain degree. If you have done meticulous user research and have excluded any chance of a certain group of people visiting your website, the priority for catering to that group of people diminishes quite a bit.
|
||||
|
||||
However, doing this research is key in actually defending such a statement. Did you know there were <a href='http://audiogames.net' target='_blank' rel='nofollow'>blind gamers?</a> and even <a href='http://peteeckert.com/' target='_blank' rel='nofollow'>blind photographers?</a>. Perhaps you knew <a href='http://mentalfloss.com/article/25750/roll-over-beethoven-6-modern-deaf-musicians' target='_blank' rel='nofollow'>musicians can be deaf</a>?
|
||||
|
||||
If you did, good for you. If not, I guess this drives my point home all the more.
|
||||
|
||||
The picture gets even more complicated when we look at legislation that actually forces you to make certain websites and web apps accessible. A prime example is the US-based <a href='http://jimthatcher.com/webcourse1.htm' target='_blank' rel='nofollow'>section 508</a>. Right now, this law mainly refers to government organizations, public sector websites etc. However, laws change.
|
||||
|
||||
Last year, airline websites were included in this list which meant that even here in Europe, airline website devs scrambled to make their content accessible. Not doing so can get your company a fine of literally tens of thousands of dollars for each day the problem isn't fixed.
|
||||
|
||||
There's variations on this legislation all over the world, some more severe and all-encompassing than others. Not knowing about that fact doesn't make the lawsuit go away, sadly.
|
||||
|
||||
## Ok, so accessibility is a big deal. Now how do we implement it?
|
||||
|
||||
That question, sadly, is harder to answer than it may seem. The Harry Potter quote at the top is there for a reason, and its not my being an avid Fantasy reader.
|
||||
|
||||
As I stated above, accessibility is important for a large group of different people, each with their own needs. Making your website work for literally everyone is a large, on-going task.
|
||||
|
||||
To bring a bit of a method to the madness, the Web Content Accessibility Guidelines or <a href='https://www.wuhcag.com/web-content-accessibility-guidelines/' target='_blank' rel='nofollow'>WCAG</a> were composed. This document contains a number of criteria you can use to check your website. For now, I will cover some of the most important basics here. I will point you at the low-hanging fruits, so to speak. In subsequent articles, I will discuss more advanced techniques like [WAI-ARIA] which is important for JavaScript-based apps.
|
||||
|
||||
### Talk like the natives
|
||||
|
||||
The HTML specification is a document that describes how the language should be used to build websites. Assistive technologies, like screen-readers, speech recognition programs etc. are aware of this document. Web developers however, often are not, or at least not enough, and think something like this is ok:
|
||||
```html
|
||||
<div class="awesome-button"></div>
|
||||
|
||||
<span><strong>Huge heading I will style with CSS later</strong></span>
|
||||
|
||||
<span class="clickable-with-JavaScript">English</span>
|
||||
```
|
||||
Guess what? All three of these elements break several criteria of WCAG and therefore are not accessible at all.
|
||||
|
||||
The first element breaks the so-called 'name, role, value'-criterium, which states that all elements on a web page should expose their name, their role (like button) and their value (like the contents of an edit field) to assistive technologies. This div actually doesn't provide any of the three, rendering it invisible to screen-readers.
|
||||
|
||||
The second element looks like a heading visually after styling it with CSS, but semantically is a span. Therefore, assistive technologies won't know its a heading. A screen-reader will read this as regular text, instead of a heading. Screen-readers often have a hotkey to quickly jump to the nearest heading, this heading will not be included in that scope.
|
||||
|
||||
The third element could for example be an element a user can click to change the language of the website. Maybe a fancy animated menu of languages will expand when it is clicked. However, this is also a span and does not expose its role (link, or button), making assistive technologies think this is just the word English with some styling.
|
||||
|
||||
Spans and divs are non-elements. They are meant to contain other elements, not to be elements themselves. You can fix these in two ways:
|
||||
|
||||
* You can manually add ARIA-attributes to the elements above. This is an advanced topic and outside the scope of this article.
|
||||
* Or, you can simply do this:
|
||||
```html
|
||||
<button>This is a button</button>
|
||||
|
||||
<h2>Here's a heading level two</h2>
|
||||
|
||||
<a href="JavascriptThing">English</a>
|
||||
```
|
||||
Boom. Suddenly, all these elements are now perfectly accessible, just by using native HTML. HTML the way it was meant to be used, in other words.
|
||||
|
||||
### A foundation cannot stand without structure
|
||||
|
||||
A bit earlier, I touched upon a screen-reader's hotkeys to jump from heading to heading. There are in fact many hotkeys like this to quickly jump to the nearest table, form field, link etc. Making sure these headings are actually in logical places is therefore a good practice and really decreases your assistive technology users' stress levels, which is good if you want visitors to keep coming back to your website.
|
||||
|
||||
Also remember that headings are hierarchical. If you use an h2, make sure the h3's that follow it actually have something to do with that h2\. Don't put an h3 for contact details under your h2 for recent blog posts. A good analogy here is a book with chapters, that have subsections. You wouldn't put a section on baking cookies in the middle of a chapter on preparing vegetables ...or ...you wouldn't... right?
|
||||
|
||||
### What's the alternative?
|
||||
|
||||
Images on a website are great. They add a new layer to your content, can really make the experience your site visitors have way more immersive and generally just look good among all that text. A picture can say more than a thousand words, right?
|
||||
|
||||
Certainly. That is, if you can see them. In the HTML5-specification, an img-attribute must always have an alt-attribute. This attribute is meant as an alternative to the image in case it can't be seen. This would be true for blind visitors to your website, but also when your image can't be loaded for some reason. Not adding an alt-tag to an img-attribute is therefore not only breaking accessibility, but going against the HTML5-spec.
|
||||
|
||||
I implore any web developer who catches themselves doing this to eat their programmer's hat and work on Windows 95 exclusively for a week. After the time is up, write an essay on what you have learned from this ordeal so I can have a laugh during my afternoon coffee.
|
||||
|
||||
Now, there is one caveat here. Alt-attributes are mandatory according to the HTML5-spec, but it's not mandatory to actually fill them in. `<img src="awesome-image.jpg", alt="">` is therefore legal HTML5 code.
|
||||
|
||||
Should you therefore fill in alt-tags for all images? It depends on the image, really. For background images, the answer is usually no, but you should use CSS for those anyway.
|
||||
|
||||
For purely decorative images that have no information in them at all, you're basically free to choose. Either put in something useful and descriptive or nothing at all.
|
||||
|
||||
For images that contain information, like a brochure, a map, a chart etc., not adding alt text breaks WCAG unless you provide a textual alternative. This is usually an alt-attribute, but can also be a block of text right below or next to the image.
|
||||
|
||||
For images of text, the text can either be included in the alt-attribute or offered in some alternative manner. The problem is that adding the textual alternative on the same page would basically make the same content show twice for people who can see the image, which is why the alt-attribute is better in this case.
|
||||
|
||||
The text should provide the context and information that is an alternative to seeing the image. It is simply not enough to write "image of hot air balloons" - why are the balloon pictures there? If the image is stylized or conveys an emotional meaning, this can be included.
|
||||
|
||||
### I can't read your scrawl, son
|
||||
|
||||
Even people who don't wear glasses and have no problem with their eyesight at all benefit from an easy to read font and proper contrast. I'm sure you would cringe if you had to fill in a form where light yellow, hopelessly loopy letters are placed on a white background. For people who's eyesight is not as good, like your grandma, for example, this becomes hopelessly worse.
|
||||
|
||||
The WCAG has contrast ratios for smaller and larger letters and there's plenty of tools out there to check if the contrast ratios are strong enough. The information and tooling is there, go use it.
|
||||
|
||||
A good place to start checking color contrast is by using the [WebAIM](https://webaim.org/resources/contrastchecker/) color contrast checker.
|
||||
|
||||
### What does this button do?
|
||||
While we are on the topic of forms, let's quickly glance at the <code>input</code> tag. This little guy is kinda important.
|
||||
|
||||
When you put some input fields on a web page, you can use labels to ...well ...label them. However, putting them next to each other is not quite enough. The attribute you want is the for-attribute, which takes the ID of a subsequent input field. This way, assistive technologies know what label to associate with what form field.
|
||||
|
||||
I guess the best way to illustrate this is by giving an example:
|
||||
```html
|
||||
<label for='username'>
|
||||
|
||||
<input type='text' id='username'>
|
||||
```
|
||||
|
||||
This will make for example a screen-reader say "username, text edit field", instead of just reporting' text edit field' and requiring the user to go look for a label. This also really helps people who use speech recognition software.
|
||||
|
||||
### That's a tall order
|
||||
|
||||
Let's take a small break. I want you to go look at a really well-designed web page. It can be any page. Go on, I'll wait.
|
||||
|
||||
Back? Ok, great. Now, look at the page again but disable all CSS. Does it still look good? Is the content on the page still in a logical order? If so, great. You found a page with decent HTML structure. (One way to easily view a page without CSS is to load the site in WebAIM's <a href='http://wave.webaim.org' target='_blank' rel='nofollow'>WAVE Web Accessibility Evaluation Tool</a>. Then click on the "No Styles" tab to see it without styles.)
|
||||
|
||||
If not, great. Now you get an impression of what I have to deal with on a daily basis when I come across a badly structured website.
|
||||
|
||||
Full disclosure: I tend to curse when this happens. Loudly. With vigor.
|
||||
|
||||
Why is this such a big deal? I'll explain.
|
||||
|
||||
_spoiler alert!_ To those who have only covered the HTML/CSS curriculum so far, we're going to skip ahead a little.
|
||||
|
||||
Screen-readers and other assistive technologies render a top-to-bottom representation of a web page based on your website's DOM. All positional CSS is ignored in this version of the web page.
|
||||
|
||||
DOM stands for Document Object Model and is the tree-like structure of your website's HTML elements. All your HTML elements are nodes that hierarchically interlink based on the HTML tags you use and JavaScript. Screen-readers use this DOM tree to work with your HTML code.
|
||||
|
||||
If you put your element at the top of your element, it will show up at the top of your DOM tree as well. therefore, the screen-reader will put it at the top as well, even if you move it to the bottom of the page using CSS.
|
||||
|
||||
So a final tip I want to give you all is to pay attention to the order of your HTML, not just your finished website with CSS added in. Does it still make sense without CSS? Great!
|
||||
|
||||
Oh ... it doesn't? In that case ..you might one day hear a muffled curse carried to you on a chilly breeze while walking outside. That will most likely be me, visiting your website.
|
||||
|
||||
In that case I really only have two words for you. Often have I heard those same two words directed at me when I wrote some bad code and it is with great pleasure that I tell you: "go fix!"
|
||||
|
||||
### Color Contrast
|
||||
Color contrast should be a minimum of 4.5:1 for normal text and 3:1 for large text. “Large text” is defined as text that is at least 18 point (24px) or 14 point (18.66px) and bold. [Contrast Checker](https://webaim.org/resources/contrastchecker/)
|
||||
|
||||
## Conclusion
|
||||
I have told you about accessibility, what it is, what it's not and why it's important.
|
||||
|
||||
I have also given you the basics, the very basics, of getting accessibility right. These basics are however very powerful and can make your life a lot easier when coding for accessibility.
|
||||
|
||||
If we talk in FCC terms, you should keep these in mind while doing the HTML/CSS curriculum as well as the JavaScript curriculum.
|
||||
In subsequent articles, I will touch on a number of more notch topics. A number of questions I will answer are:
|
||||
|
||||
* Adding structured headings sounds like a good idea, but they don't fit in my design. What do I do?
|
||||
* Is there a way for me to write content only screen-readers and other assistive technologies see?
|
||||
* How do I make custom JavaScript components accessible?
|
||||
* What tools are there, in addition to inclusive user testing, that can be used to develop the most robust and accessible experience for the largest group of users?
|
||||
41
mock-guide/english/accessibility/index.md
Normal file
41
mock-guide/english/accessibility/index.md
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Accessibility
|
||||
---
|
||||
## Accessibility
|
||||
<strong>Web accessibility means that people with disabilities can use the Web</strong>.
|
||||
|
||||
More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can
|
||||
contribute to the Web. Web accessibility also benefits others, including [older people](https://www.w3.org/WAI/bcase/soc.html#of) with changing abilities
|
||||
due to aging.
|
||||
|
||||
Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological
|
||||
disabilities. The document [How People with Disabilities Use the Web](http://www.w3.org/WAI/intro/people-use-web/Overview.html) describes how different
|
||||
disabilities affect Web use and includes scenarios of people with disabilities using the Web.
|
||||
|
||||
Web accessibility also **benefits** people *without* disabilities. For example, a key principle of Web accessibility is designing Web sites and software
|
||||
that are flexible to meet different user needs, preferences, and situations. This **flexibility** also benefits people *without* disabilities in certain
|
||||
situations, such as people using a slow Internet connection, people with "temporary disabilities" such as a broken arm, and people with changing abilities
|
||||
due to aging. The document [Developing a Web Accessibility Business Case for Your Organization](https://www.w3.org/WAI/bcase/Overview) describes many
|
||||
different benefits of Web accessibility, including **benefits for organizations**.
|
||||
|
||||
Web accessibility should also include the people who don't have access to the internet or to computers.
|
||||
|
||||
A prominent guideline for web development was introduced by the [World Wide Web Consortium (W3C)](https://www.w3.org/), the [Web Accessibility Initiative](https://www.w3.org/WAI/)
|
||||
from which we get the [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics), the Accessible Rich Internet Applications Suite.
|
||||
Where WAI tackles the semantics of html to more easily nagivate the DOM Tree, ARIA attempts to make web apps, especially those developed with javascript and
|
||||
AJAX, more accessible.
|
||||
|
||||
The use of images and graphics on websites can decrease accessibility for those with visual impairments. However, this doesn't mean designers should avoid
|
||||
using these visual elements. When used correctly, visual elements can convey the appropriate look and feel to users without disabilities and should be used
|
||||
to do so. In order to use these elements appropriately, web designers must use alt text to communicate the message of these elements to those who cannot see
|
||||
them. Alt text should be short and to the point--generally [no more than five to 15 words](https://www.thoughtco.com/writing-great-alt-text-3466185). If a
|
||||
graphic is used to convey information that exceeds the limitations of alt text, that information should also exist as web text in order to be read by screen
|
||||
readers. [Learn more about alt text](https://webaim.org/techniques/alttext/).
|
||||
|
||||
Just like Alt text is for people who are visually impaired, transcripts of the audio are for the people who cannot listen. Providing a written document or a transcript of what is being spoken accessible to people who are hard of hearing.
|
||||
|
||||
Copyright © 2005 <a href="http://www.w3.org" shape="rect">World Wide Web Consortium</a>, (<a href="http://www.csail.mit.edu/" shape="rect">MIT</a>, <a href="http://www.ercim.org" shape="rect">ERCIM</a>, <a href="http://www.keio.ac.jp" shape="rect">Keio</a>,<a href="http://ev.buaa.edu.cn" shape="rect">Beihang</a>). http://www.w3.org/Consortium/Legal/2015/doc-license
|
||||
|
||||
### More Information:
|
||||
<a href='https://www.w3.org/WAI/intro/accessibility.php' target='_blank' rel='nofollow'>w3.org introduction to accessibility.</a>
|
||||
<a href='http://a11yproject.com/' target='_blank' rel='nofollow'>The A11Y Project</a>
|
||||
26
mock-guide/english/agile/index.md
Normal file
26
mock-guide/english/agile/index.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Agile
|
||||
---
|
||||
## Agile
|
||||
|
||||
Agile software development is a collection of methodologies used to manage teams of developers. It advocates adaptive planning, evolutionary development, early delivery, and continuous improvement, and it encourages rapid and flexible response to change. People and communication are considered more important than tools and processes.
|
||||
|
||||
Agile emphasizes asking end users what they want, and frequently showing them demos of the product as it is developed. This stands in contrast to the "Waterfall" approach, specification-driven development, and what Agile practitioners call "Big Up-Front Design." In these approaches, the features are planned out and budgeted before development starts.
|
||||
|
||||
With Agile, the emphasis is on "agility" - being able to quickly respond to feedback from users and other changing circumstances.
|
||||
|
||||
|
||||
|
||||
The agile software development places its emphasis on four core values.
|
||||
1. Preference on team and individual interactions over tools and processes.
|
||||
2. A working software over exhaustive documentation.
|
||||
3. Collaboration with customer is given more importance than contract negotiations.
|
||||
4. Response to changes over following a plan.
|
||||
|
||||
There are many different flavors of agile, including Scrum and Extreme Programming.
|
||||
|
||||
|
||||
|
||||
### More information
|
||||
|
||||
[Agile Alliance's Homepage](https://www.agilealliance.org/)
|
||||
@ -0,0 +1,30 @@
|
||||
---
|
||||
title: Behavioral patterns
|
||||
---
|
||||
|
||||
## Behavioral patterns
|
||||
|
||||
Behavioral design patterns are design patterns that identify common communication problems between objects and realize these patterns. By doing so, these patterns increase flexibility in carrying out this communication, making the software more reliable and easy to mantain.
|
||||
|
||||
Examples of this type of design pattern include:
|
||||
|
||||
1. **Chain of responsibility pattern**: Command objects are handled or passed on to other objects by logic-containing processing objects.
|
||||
2. **Command pattern**: Command objects encapsulate an action and its parameters.
|
||||
3. **Interpreter pattern**: Implement a specialized computer language to rapidly solve a specific set of problems.
|
||||
4. **Iterator pattern**: Iterators are used to access the elements of an aggregate object sequentially without exposing its underlying representation.
|
||||
5. **Mediator pattern**: Provides a unified interface to a set of interfaces in a subsystem.
|
||||
6. **Memento pattern**: Provides the ability to restore an object to its previous state (rollback).
|
||||
7. **Null Object pattern**: Designed to act as a default value of an object.
|
||||
8. **Observer pattern**: a.k.a. P**ublish/Subscribe** or **Event Listener**. Objects register to observe an event that may be raised by another object.
|
||||
9. **Weak reference pattern**: De-couple an observer from an observable.
|
||||
10. **Protocol stack**: Communications are handled by multiple layers, which form an encapsulation hierarchy.
|
||||
11. **Scheduled-task pattern**: A task is scheduled to be performed at a particular interval or clock time (used in real-time computing).
|
||||
12. **Single-serving visitor pattern**: Optimize the implementation of a visitor that is allocated, used only once, and then deleted.
|
||||
13. **Specification pattern**: Recombinable business logic in a boolean fashion.
|
||||
14. **State pattern**: A clean way for an object to partially change its type at runtime.
|
||||
15. **Strategy pattern**: Algorithms can be selected on the fly.
|
||||
16. **Template method pattern**: Describes the program skeleton of a program.
|
||||
17. **Visitor pattern**: A way to separate an algorithm from an object.
|
||||
|
||||
### Sources
|
||||
[https://en.wikipedia.org/wiki/Behavioral_pattern](https://en.wikipedia.org/wiki/Behavioral_pattern)
|
||||
@ -0,0 +1,27 @@
|
||||
---
|
||||
title: Algorithm Design Patterns
|
||||
---
|
||||
## Algorithm Design Patterns
|
||||
|
||||
In software engineering, a design pattern is a general repeatable solution to a commonly occurring problem in software design. A design pattern isn't a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations.
|
||||
|
||||
Design patterns can speed up the development process by providing tested, proven development paradigms.
|
||||
|
||||
This patterns are divided in three major categories:
|
||||
|
||||
### Creational patterns
|
||||
|
||||
These are design patterns that deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. The basic form of object creation could result in design problems or in added complexity to the design. Creational design patterns solve this problem by somehow controlling this object creation.
|
||||
|
||||
### Structural patterns
|
||||
|
||||
These are design patterns that ease the design by identifying a simple way to realize relationships between entities.
|
||||
|
||||
### Behavioral patterns
|
||||
|
||||
These are design patterns that identify common communication patterns between objects and realize these patterns. By doing so, these patterns increase flexibility in carrying out this communication.
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
[Design patterns - Wikipedia](https://en.wikipedia.org/wiki/Design_Patterns)
|
||||
|
||||
63
mock-guide/english/algorithms/avl-trees/index.md
Normal file
63
mock-guide/english/algorithms/avl-trees/index.md
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
title: AVL Trees
|
||||
---
|
||||
## AVL Trees
|
||||
|
||||
|
||||
An AVL tree is a subtype of binary search tree.
|
||||
|
||||
A BST is a data structure composed of nodes. It has the following guarantees:
|
||||
|
||||
1. Each tree has a root node (at the top).
|
||||
2. The root node has zero or more child nodes.
|
||||
3. Each child node has zero or more child nodes, and so on.
|
||||
4. Each node has up to two children.
|
||||
5. For each node, its left descendents are less than the current node, which is less than the right descendents.
|
||||
|
||||
AVL trees have an additional guarantee:
|
||||
6. The difference between the depth of right and left subtrees cannot be more than one. In order to maintain this guarantee, an implementation of an AVL will include an algorithm to rebalance the tree when adding an additional element would upset this guarantee.
|
||||
|
||||
AVL trees have a worst case lookup, insert and delete time of O(log n).
|
||||
|
||||
### Right Rotation
|
||||
|
||||
|
||||
|
||||
### Left Rotation
|
||||
|
||||
|
||||
|
||||
### AVL Insertion Process
|
||||
|
||||
You will do an insertion similar to a normal Binary Search Tree insertion. After inserting, you fix the AVL property using left or right rotations.
|
||||
|
||||
- If there is an imbalance in left child of right subtree, then you perform a left-right rotation.
|
||||
- If there is an imbalance in left child of left subtree, then you perform a right rotation.
|
||||
- If there is an imbalance in right child of right subtree, then you perform a left rotation.
|
||||
- If there is an imbalance in right child of left subtree, then you perform a right-left rotation.
|
||||
|
||||
|
||||
#### More Information:
|
||||
[YouTube - AVL Tree](https://www.youtube.com/watch?v=7m94k2Qhg68)
|
||||
|
||||
An AVL tree is a self-balancing binary search tree.
|
||||
An AVL tree is a binary search tree which has the following properties:
|
||||
->The sub-trees of every node differ in height by at most one.
|
||||
->Every sub-tree is an AVL tree.
|
||||
|
||||
AVL tree checks the height of the left and the right sub-trees and assures that the difference is not more than 1. This difference is called the Balance Factor.
|
||||
The height of an AVL tree is always O(Logn) where n is the number of nodes in the tree.
|
||||
|
||||
AVL Tree Rotations:-
|
||||
|
||||
In AVL tree, after performing every operation like insertion and deletion we need to check the balance factor of every node in the tree. If every node satisfies the balance factor condition then we conclude the operation otherwise we must make it balanced. We use rotation operations to make the tree balanced whenever the tree is becoming imbalanced due to any operation.
|
||||
|
||||
Rotation operations are used to make a tree balanced.There are four rotations and they are classified into two types:
|
||||
->Single Left Rotation (LL Rotation)
|
||||
In LL Rotation every node moves one position to left from the current position.
|
||||
->Single Right Rotation (RR Rotation)
|
||||
In RR Rotation every node moves one position to right from the current position.
|
||||
->Left Right Rotation (LR Rotation)
|
||||
The LR Rotation is combination of single left rotation followed by single right rotation. In LR Rotation, first every node moves one position to left then one position to right from the current position.
|
||||
->Right Left Rotation (RL Rotation)
|
||||
The RL Rotation is combination of single right rotation followed by single left rotation. In RL Rotation, first every node moves one position to right then one position to left from the current position.
|
||||
60
mock-guide/english/algorithms/index.md
Normal file
60
mock-guide/english/algorithms/index.md
Normal file
@ -0,0 +1,60 @@
|
||||
---
|
||||
title: Algorithms
|
||||
---
|
||||
|
||||
## Algorithms
|
||||
|
||||
In computer science, an algorithm is an unambiguous specification of how to solve a class of problems. Algorithms can perform calculations, data processing and automated reasoning tasks.
|
||||
|
||||
An algorithm is an effective method that can be expressed within a finite amount of space and time and in a well-defined formal language for calculating a function. Starting from an initial state and initial input (perhaps empty), the instructions describe a computation that, when executed, proceeds through a finite number of well-defined successive states, eventually producing "output" and terminating at a final ending state. The transition from one state to the next is not necessarily deterministic; some algorithms, known as randomized algorithms, incorporate random input.
|
||||
|
||||
There are certain requirements that an algorithm must abide by:
|
||||
<ol>
|
||||
<li>Definiteness: Each step in the process is precisely stated.</li>
|
||||
<li>Effective Computability: Each step in the process can be carried out by a computer.</li>
|
||||
<li>Finiteness: The program will eventually successfully terminate.</li>
|
||||
</ol>
|
||||
|
||||
Some common types of algorithms include sorting algorithms, search algorithms, and compression algorithms. Classes of algorithms include Graph, Dynamic Programming, Sorting, Searching, Strings, Math, Computational Geometry, Optimization, and Miscellaneous. Although technically not a class of algorithms, Data Structures are often grouped with them.
|
||||
|
||||
### Efficiency
|
||||
|
||||
Algorithms are most commonly judged by their efficiency and the amount of computing resources they require to complete their task. A common way to evaluate an algorithm is to look at its time complexity. This shows how the running time of the algorithm grows as the input size grows. Since the algorithms today, have to be operate on large data inputs, it is essential for our algorithms to have a reasonably fast running time .
|
||||
|
||||
### Sorting Algorithms
|
||||
|
||||
Sorting algorithms come in various flavors depending on your necessity.
|
||||
Some, very common and widely used are:
|
||||
|
||||
#### Quick Sort
|
||||
|
||||
There is no sorting discussion which can finish without quick sort. The basic concept is in the link below.
|
||||
[Quick Sort](http://me.dt.in.th/page/Quicksort/)
|
||||
|
||||
#### Merge Sort
|
||||
It is the sorting algorithm which relies on the concept how to sorted arrays are merged to give one sorted arrays. Read more about it here-
|
||||
[Merge Sort](https://www.geeksforgeeks.org/merge-sort/)
|
||||
|
||||
freeCodeCamp's curriculum heavily emphasizes creating algorithms. This is because learning algorithms is a good way to practice programming skills. Interviewers most commonly test candidates on algorithms during developer job interviews.
|
||||
|
||||
### Further Resources
|
||||
|
||||
[Intro to Algorithms | Crash Course: Computer Science](https://www.youtube.com/watch?v=rL8X2mlNHPM)
|
||||
|
||||
This video gives an accessible and lively introduction to algorithms focusing on sorting and graph search algorithms.
|
||||
|
||||
[What is an Algorithm and Why Should you Care? | Khan Academy](https://www.youtube.com/watch?v=CvSOaYi89B4)
|
||||
|
||||
This video introduces algorithms and briefly discusses some high profile uses of them.
|
||||
|
||||
[15 Sorting Algorithms in 6 Minutes | Timo Bingmann](https://www.youtube.com/watch?v=kPRA0W1kECg)
|
||||
|
||||
This video visually demonstrates some popular sorting algorithms that are commonly taught in programming and Computer Science courses.
|
||||
|
||||
[Algorithm Visualizer](http://algo-visualizer.jasonpark.me)
|
||||
|
||||
This is also a really good open source project that helps you visualize algorithms.
|
||||
|
||||
[Infographic on how Machine Learning Algorithms Work](https://www.boozallen.com/content/dam/boozallen_site/sig/pdf/infographic/how-do-machines-learn.pdf)
|
||||
|
||||
This infographic shows you how unsupervised and supervised machine learning algorithms work..
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
title: How to authenticate with GitHub using SSH
|
||||
---
|
||||
|
||||
# How to authenticate with GitHub using SSH
|
||||
|
||||
Check that there are no `rsa` files here before continuing, use:
|
||||
|
||||
```shell
|
||||
ls -al ~/.ssh
|
||||
```
|
||||
|
||||
If there is nothing to list (i.e. `: No such file or directory`) then use:
|
||||
|
||||
```shell
|
||||
mkdir $HOME/.ssh
|
||||
```
|
||||
|
||||
If there's nothing there then generate a new keygen with:
|
||||
|
||||
```shell
|
||||
ssh-keygen -t rsa -b 4096 -C your@email.com
|
||||
```
|
||||
|
||||
Now using `ls -al ~/.ssh` will show our `id_rsa.pub` file.
|
||||
|
||||
Add the SSH key to the SSH agent:
|
||||
|
||||
```shell
|
||||
eval "$(ssh-agent -s)" # for mac and Linux from bash
|
||||
```
|
||||
|
||||
```shell
|
||||
eval `ssh-agent -s`
|
||||
ssh-agent -s # for Windows
|
||||
```
|
||||
|
||||
Add RSA key to SHH with:
|
||||
|
||||
```shell
|
||||
ssh-add ~/.ssh/id_rsa
|
||||
```
|
||||
|
||||
Copy your key to clipboard
|
||||
|
||||
```shell
|
||||
clip < ~/.ssh/id_rsa.pub # Windows
|
||||
```
|
||||
|
||||
```shell
|
||||
cat ~/.ssh/id_rsa.pub # Linux
|
||||
```
|
||||
|
||||
Go to your GitHub [settings](https://github.com/settings/keys) page and click the 'New SSH key' button paste in your generated key.
|
||||
|
||||
Then authenticate with:
|
||||
|
||||
```shell
|
||||
ssh -T git@github.com
|
||||
```
|
||||
22
mock-guide/english/git/difference-git-github/index.md
Normal file
22
mock-guide/english/git/difference-git-github/index.md
Normal file
@ -0,0 +1,22 @@
|
||||
---
|
||||
title: Difference between Git and GitHub
|
||||
---
|
||||
## Difference between Git and GitHub
|
||||
|
||||
Git and Github are two different things. [Git](https://git-scm.com/) is the [version control system](https://en.wikipedia.org/wiki/Version_control), while [GitHub](https://github.com/) is a service for hosting Git repos and help people collaborate on writing software. However, they are often confounded because of their similar name, because of the fact that GitHub builds on top of Git, and because many websites and articles don't make the difference between them clear enough.
|
||||
|
||||
|
||||
|
||||
### Git
|
||||
|
||||
Git is the distributed version control system. Git is responsible for keeping track of changes to content – usually source code files.
|
||||
|
||||
For more info, there is a [complete article about Git itself](https://guide.freecodecamp.org/git).
|
||||
|
||||
### GitHub
|
||||
|
||||
GitHub is a company that provides Git repository hosting. That means that they provide a turnkey solution to host Git repositories on their servers. That can be useful to keep a backup of your repository (Git only tracks the changes made to you files over time, the repo still needs to be backed up), and to have a centralized place to keep and share your code with others.
|
||||
|
||||
More than just a Git repository hosting service, GitHub is a [software forge](https://en.wikipedia.org/wiki/Forge_(software)). That means it also provides an [issue tracker](https://en.wikipedia.org/wiki/Issue_tracking_system), tools for [code review](https://en.wikipedia.org/wiki/Code_review), and other tools for collaborating with other people and creating software.
|
||||
|
||||
GitHub isn't the only one to provide this kind of service. One of its major competitors is [GitLab](https://gitlab.com). For more on this, look at the [article about Git hosting](https://guide.freecodecamp.org/git/git-hosting).
|
||||
62
mock-guide/english/git/git-alias/index.md
Normal file
62
mock-guide/english/git/git-alias/index.md
Normal file
@ -0,0 +1,62 @@
|
||||
---
|
||||
title: Git Aliases
|
||||
---
|
||||
|
||||
## Git Alias
|
||||
|
||||
Git doesn’t automatically infer your command if you type it in partially. If you don’t want to type the entire text of each of the Git commands, you can easily set up an alias for each command using git config. Here are a couple of examples you may want to set up:
|
||||
|
||||
```shell
|
||||
$ git config --global alias.co checkout
|
||||
$ git config --global alias.br branch
|
||||
$ git config --global alias.ci commit
|
||||
$ git config --global alias.st status
|
||||
```
|
||||
This means that, for example, instead of typing git commit, you just need to type git ci. As you go on using Git, you’ll probably use other commands frequently as well; don’t hesitate to create new aliases.
|
||||
|
||||
This technique can also be very useful in creating commands that you think should exist. For example, to correct the usability problem you encountered with unstaging a file, you can add your own unstage alias to Git:
|
||||
|
||||
```shell
|
||||
$ git config --global alias.unstage 'reset HEAD --'
|
||||
```
|
||||
This makes the following two commands equivalent:
|
||||
|
||||
```shell
|
||||
$ git unstage fileA
|
||||
$ git reset HEAD fileA
|
||||
```
|
||||
This seems a bit clearer. It’s also common to add a last command, like this:
|
||||
|
||||
```shell
|
||||
$ git config --global alias.last 'log -1 HEAD'
|
||||
```
|
||||
This way, you can see the last commit easily:
|
||||
|
||||
```shell
|
||||
$ git last
|
||||
commit 66938dae3329c7aebe598c2246a8e6af90d04646
|
||||
Author: Josh Goebel <dreamer3@example.com>
|
||||
Date: Tue Aug 26 19:48:51 2008 +0800
|
||||
|
||||
test for current head
|
||||
|
||||
Signed-off-by: Scott Chacon <schacon@example.com>
|
||||
```
|
||||
|
||||
```shell
|
||||
$ git config --global alias.st status --short --branch
|
||||
```
|
||||
When you run the command `git st`, your git status will be displayed in a nice, streamlined format.
|
||||
|
||||
### View, Edit and Delete Aliases
|
||||
To view all of the aliases you have created on your machine, run the command:
|
||||
```shell
|
||||
cat ~/.gitconfig
|
||||
```
|
||||
Replacing `cat` with `nano` will allow you to edit them or remove them completely.
|
||||
|
||||
### Alias to view all Aliases
|
||||
To add an alias to view all others created on your machine, add the alias
|
||||
```shell
|
||||
git config --global alias.aliases 'config --get-regexp alias'
|
||||
```
|
||||
32
mock-guide/english/git/git-bisect/index.md
Normal file
32
mock-guide/english/git/git-bisect/index.md
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Git Bisect
|
||||
---
|
||||
|
||||
## Git Bisect
|
||||
|
||||
The `git bisect` command helps you find commits that added specific changes in your project. This is particularly useful if you need to find which change introduced a bug.
|
||||
|
||||
This command works by providing it a "bad" commit that includes the bug and a "good" commit from before the bug was introduced. Through binary search, `git bisect` will pick commits and ask you to identify whether the commit is "good" or "bad". This continues until the command is able to find the exact commit that introduced the change.
|
||||
|
||||
### Bisect Commands
|
||||
To start a bisect session, you will tell git to start a bisect session, identify a "bad" version, and identify a "good" version. Assuming the current commit is broken but commit `4b60707` is good, you will run the following:
|
||||
```shell
|
||||
git bisect start
|
||||
git bisect bad
|
||||
git bisect good 4b60707
|
||||
```
|
||||
|
||||
Git will check out a commit between the "good" and "bad" versions and output something like the following:
|
||||
```
|
||||
Bisecting: 2 revisions left to test after this (roughly 2 steps)
|
||||
```
|
||||
|
||||
You should now tell git if the current commit works with `git bisect good` or if the current commit is broken with `git bisect bad`. This process will repeat until the command is able to print out the first bad commit.
|
||||
|
||||
When finished, you should clean up the bisect session. This will reset your HEAD to what it was before you started the bisect session:
|
||||
```shell
|
||||
git bisect reset
|
||||
```
|
||||
|
||||
### Other Resources
|
||||
- [Git bisect documentation](https://git-scm.com/docs/git-bisect)
|
||||
39
mock-guide/english/git/git-blame/index.md
Normal file
39
mock-guide/english/git/git-blame/index.md
Normal file
@ -0,0 +1,39 @@
|
||||
---
|
||||
title: Git Blame
|
||||
---
|
||||
## Git Blame
|
||||
|
||||
With `git blame` you can see who changed what in a specific file, line by line, which is useful if you work in a team, instead of alone. For example, if a line of code makes you wonder why it is there, you can use `git blame` and you will know who you must ask.
|
||||
|
||||
### Usage
|
||||
|
||||
You use `git blame` like this: `git blame NAME_OF_THE_FILE`
|
||||
|
||||
For example: `git blame triple_welcome.rb`
|
||||
|
||||
You will see an output like this:
|
||||
|
||||
```shell
|
||||
0292b580 (Jane Doe 2018-06-18 00:17:23 -0500 1) 3.times do
|
||||
e483daf0 (John Doe 2018-06-18 23:50:40 -0500 2) print 'Welcome '
|
||||
0292b580 (Jane Doe 2018-06-18 00:17:23 -0500 3) end
|
||||
```
|
||||
|
||||
Each line is annotated with the SHA, name of the author and date of the last commit.
|
||||
|
||||
### Aliasing Git Blame
|
||||
|
||||
Some programmers don't like the word 'blame', because of the negative connotation 'blaming someone' brings with it. Also, the tool is rarely (if ever) used for blaming someone, but rather to ask for advice or understand the history of a file. Therefore, sometimes people use an alias to change `git blame` to something which sounds a bit nicer such as `git who`, `git history` or `git praise`. To do that you simply add a git alias like this:
|
||||
|
||||
`git config --global alias.history blame`
|
||||
|
||||
You can find more information about aliasing git commands [here](../git-alias/index.md).
|
||||
|
||||
### Text Editor Plugins utilizing Git Blame
|
||||
|
||||
There are a few plugins out there for various text editors which utilize `git blame`. For example, to create something like heat maps or add inline information for the current line you are inspecting. A famous example is [GitLense](https://gitlens.amod.io/) for VSCode.
|
||||
|
||||
### Further Reading
|
||||
|
||||
- [Git Blame documentation](https://git-scm.com/docs/git-blame)
|
||||
- [further reading on usage of Git Blame](https://corgibytes.com/blog/2016/10/18/git-blame/)
|
||||
117
mock-guide/english/git/git-branch/index.md
Normal file
117
mock-guide/english/git/git-branch/index.md
Normal file
@ -0,0 +1,117 @@
|
||||
---
|
||||
title: Git Branch
|
||||
---
|
||||
|
||||
## Git Branch
|
||||
|
||||
Git's branching functionality lets you create new branches of a project to test ideas, isolate new features, or experiment without impacting the main project.
|
||||
|
||||
**Table of Contents**
|
||||
- [View Branches](#view-branches)
|
||||
- [Checkout a Branch](#checkout-a-branch)
|
||||
- [Create a New Branch](#create-a-new-branch)
|
||||
- [Rename a Branch](#rename-a-branch)
|
||||
- [Delete a Branch](#delete-a-branch)
|
||||
- [Compare Branches](#compare-branches)
|
||||
- [Help with Git Branch](#help-with-git-branch)
|
||||
- [More Information](#more-information)
|
||||
|
||||
### View Branches <a name="view-branches"></a>
|
||||
To view the branches in a Git repository, run the command:
|
||||
```shell
|
||||
git branch
|
||||
```
|
||||
|
||||
To view both remote-tracking branches and local branches, run the command:
|
||||
```shell
|
||||
git branch -a
|
||||
```
|
||||
|
||||
There will be an asterisk (\*) next to the branch that you're currently on.
|
||||
|
||||
There are a number of different options you can include with `git branch` to see different information. For more details about the branches, you can use the `-v` (or `-vv`, or `--verbose`) option. The list of branches will include the SHA-1 value and commit subject line for the `HEAD` of each branch next to its name.
|
||||
|
||||
You can use the `-a` (or `--all`) option to show the local branches as well as any remote branches for a repository. If you only want to see the remote branches, use the `-r` (or `--remotes`) option.
|
||||
|
||||
### Checkout a Branch <a name="checkout-a-branch"></a>
|
||||
To checkout an existing branch, run the command:
|
||||
```shell
|
||||
git checkout BRANCH-NAME
|
||||
```
|
||||
|
||||
Generally, Git won't let you checkout another branch unless your working directory is clean, because you would lose any working directory changes that aren't committed. You have three options to handle your changes:
|
||||
1) trash them (see <a href='https://guide.freecodecamp.org/git/git-checkout/' target='_blank' rel='nofollow'>Git checkout for details</a>) or
|
||||
2) commit them (see <a href='https://guide.freecodecamp.org/git/git-commit/' target='_blank' rel='nofollow'>Git commit for details</a>) or
|
||||
3) stash them (see <a href='https://guide.freecodecamp.org/git/git-stash/' target='_blank' rel='nofollow'>Git stash for details</a>).
|
||||
|
||||
### Create a New Branch <a name="create-a-new-branch"></a>
|
||||
To create a new branch, run the command:
|
||||
```shell
|
||||
git branch NEW-BRANCH-NAME
|
||||
```
|
||||
|
||||
Note that this command only creates the new branch. You'll need to run `git checkout NEW-BRANCH-NAME` to switch to it.
|
||||
|
||||
There's a shortcut to create and checkout a new branch at once. You can pass the `-b` option (for branch) with `git checkout`. The following commands do the same thing:
|
||||
```shell
|
||||
# Two-step method
|
||||
git branch NEW-BRANCH-NAME
|
||||
git checkout NEW-BRANCH-NAME
|
||||
|
||||
# Shortcut
|
||||
git checkout -b NEW-BRANCH-NAME
|
||||
```
|
||||
|
||||
When you create a new branch, it will include all commits from the parent branch. The parent branch is the branch you're on when you create the new branch.
|
||||
|
||||
### Rename a Branch <a name="rename-a-branch"></a>
|
||||
To rename a branch, run the command:
|
||||
```shell
|
||||
git branch -m OLD-BRANCH-NAME NEW-BRANCH-NAME
|
||||
|
||||
# Alternative
|
||||
git branch --move OLD-BRANCH-NAME NEW-BRANCH-NAME
|
||||
```
|
||||
|
||||
### Delete a Branch <a name="delete-a-branch"></a>
|
||||
Git won't let you delete a branch that you're currently on. You first need to checkout a different branch, then run the command:
|
||||
```shell
|
||||
git branch -d BRANCH-TO-DELETE
|
||||
|
||||
# Alternative:
|
||||
git branch --delete BRANCH-TO-DELETE
|
||||
```
|
||||
|
||||
The branch that you switch to makes a difference. Git will throw an error if the changes in the branch you're trying to delete are not fully merged into the current branch. You can override this and force Git to delete the branch with the `-D` option (note the capital letter) or using the `--force` option with `-d` or `--delete`:
|
||||
```shell
|
||||
git branch -D BRANCH-TO-DELETE
|
||||
|
||||
# Alternatives
|
||||
git branch -d --force BRANCH-TO-DELETE
|
||||
git branch --delete --force BRANCH-TO-DELETE
|
||||
```
|
||||
|
||||
### Compare Branches <a name="compare-branches"></a>
|
||||
You can compare branches with the `git diff` command:
|
||||
```shell
|
||||
git diff FIRST-BRANCH..SECOND-BRANCH
|
||||
```
|
||||
|
||||
You'll see colored output for the changes between branches. For all lines that have changed, the `SECOND-BRANCH` version will be a green line starting with a "+", and the `FIRST-BRANCH` version will be a red line starting with a "-". If you don't want Git to display two lines for each change, you can use the `--color-words` option. Instead, Git will show one line with deleted text in red, and added text in green.
|
||||
|
||||
If you want to see a list of all the branches that are completely merged into your current branch (in other words, your current branch includes all the changes of the other branches that are listed), run the command `git branch --merged`.
|
||||
|
||||
### Help with Git Branch <a name="help-with-git-branch"></a>
|
||||
If you forget how to use an option, or want to explore other functionality around the `git branch` command, you can run any of these commands:
|
||||
```shell
|
||||
git help branch
|
||||
git branch --help
|
||||
man git-branch
|
||||
```
|
||||
|
||||
### More Information: <a name="more-information"></a>
|
||||
- The `git merge` command: <a href='https://guide.freecodecamp.org/git/git-merge/' target='_blank' rel='nofollow'>fCC Guide</a>
|
||||
- The `git checkout` command: <a href='https://guide.freecodecamp.org/git/git-checkout/' target='_blank' rel='nofollow'>fCC Guide</a>
|
||||
- The `git commit` command: <a href='https://guide.freecodecamp.org/git/git-commit/' target='_blank' rel='nofollow'>fCC Guide</a>
|
||||
- The `git stash` command: <a href='https://guide.freecodecamp.org/git/git-stash/' target='_blank' rel='nofollow'>fCC Guide</a>
|
||||
- Git documentation: <a href='https://git-scm.com/docs/git-branch' target='_blank' rel='nofollow'>branch</a>
|
||||
55
mock-guide/english/git/git-checkout/index.md
Normal file
55
mock-guide/english/git/git-checkout/index.md
Normal file
@ -0,0 +1,55 @@
|
||||
---
|
||||
title: Git Checkout
|
||||
---
|
||||
## Git Checkout
|
||||
|
||||
The `git checkout` command switches between branches or restores working tree files. There are a number of different options for this command that won't be covered here, but you can take a look at all of them in the <a href='https://git-scm.com/docs/git-checkout' target='_blank' rel='nofollow'>Git documentation</a>.
|
||||
|
||||
### Checkout a specific commit
|
||||
|
||||
to checkout a specific commit, run the command :
|
||||
```shell
|
||||
git checkout specific-commit-id
|
||||
```
|
||||
we can get the specific commit id's by running:
|
||||
```shell
|
||||
git log
|
||||
```
|
||||
### Checkout an Existing Branch
|
||||
To checkout an existing branch, run the command:
|
||||
```shell
|
||||
git checkout BRANCH-NAME
|
||||
```
|
||||
Generally, Git won't let you checkout another branch unless your working directory is clean, because you would lose any working directory changes that aren't committed. You have three options to handle your changes: 1) trash them, 2) <a href='https://guide.freecodecamp.org/git/git-commit/' target='_blank' rel='nofollow'>commit them</a>, or 3) <a href='https://guide.freecodecamp.org/git/git-stash/' target='_blank' rel='nofollow'>stash them</a>.
|
||||
|
||||
### Checkout a New Branch
|
||||
To create and checkout a new branch with a single command, you can use:
|
||||
```shell
|
||||
git checkout -b NEW-BRANCH-NAME
|
||||
```
|
||||
This will automatically switch you to the new branch.
|
||||
|
||||
### Checkout a New Branch or Reset a Branch to a Start Point
|
||||
The following command is similar to checking out a new branch, but uses the `-B` (note the captital B) flag and an optional `START-POINT` parameter:
|
||||
```shell
|
||||
git checkout -B BRANCH-NAME START-POINT
|
||||
```
|
||||
If the `BRANCH-NAME` branch doesn't exist, Git will create it and start it at `START-POINT`. If the `BRANCH-NAME` branch already exists, then Git resets the branch to `START-POINT`. This is equivalent to running `git branch` with `-f`.
|
||||
|
||||
### Force a Checkout
|
||||
You can pass the `-f` or `--force` option with the `git checkout` command to force Git to switch branches, even if you have un-staged changes (in other words, the index of the working tree differs from `HEAD`). Basically, it can be used to throw away local changes.
|
||||
|
||||
When you run the following command, Git will ignore unmerged entries:
|
||||
|
||||
```shell
|
||||
git checkout -f BRANCH-NAME
|
||||
|
||||
# Alternative
|
||||
git checkout --force BRANCH-NAME
|
||||
```
|
||||
|
||||
### Undo Changes in your Working Directory
|
||||
You can use the `git checkout` command to undo changes you've made to a file in your working directory. This will revert the file back to the version in `HEAD`:
|
||||
```shell
|
||||
git checkout -- FILE-NAME
|
||||
```
|
||||
35
mock-guide/english/git/git-cherry-pick/index.md
Normal file
35
mock-guide/english/git/git-cherry-pick/index.md
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
title: Git Cherry Pick
|
||||
---
|
||||
## Git Cherry Pick
|
||||
|
||||
The `git cherry-pick` command applies the changes introduced by some existing commits. This guide will be focusing on explaining this feature as much as possible but of course the real <a href='https://git-scm.com/docs/git-cherry-pick' target='_blank' rel='nofollow'>Git documentation</a> will always come in handy.
|
||||
|
||||
### Checkout an Existing Branch Cherry Pick from master
|
||||
To apply the change introduced by the commit at the tip of the master branch and create a new commit with this change. Run the following command
|
||||
```shell
|
||||
git cherry-pick master
|
||||
```
|
||||
|
||||
### Check in a change from a different commit
|
||||
To apply the change introduced by the commit at the particular hash value you want, run the following command
|
||||
```shell
|
||||
git cherry-pick {HASHVALUE}
|
||||
```
|
||||
This will add the changes included referenced in that commit, to your current repository
|
||||
|
||||
### Apply certain commits from one branch to another
|
||||
`cherry-pick` allows you to pick and choose between commits from one branch one to another. Let's say you have two branches `master` and `develop-1`. In the branch `develop-1` you have 3 commits with commit ids `commit-1`,`commit-2` and `commit-3`. Here you can only apply `commit-2` to branch `master` by:
|
||||
```shell
|
||||
git checkout master
|
||||
git cherry-pick commit-2
|
||||
```
|
||||
If you encounter any conflicts at this point, you have to fix them and add them using `git add` and then you can use the continue flag to apply the cherry-pick.
|
||||
```shell
|
||||
git cherry-pick --continue
|
||||
```
|
||||
If you wish to abort a cherry-pick in between you can use the abort flag:
|
||||
```shell
|
||||
git cherry-pick --abort
|
||||
```
|
||||
|
||||
61
mock-guide/english/git/git-clone/index.md
Normal file
61
mock-guide/english/git/git-clone/index.md
Normal file
@ -0,0 +1,61 @@
|
||||
---
|
||||
title: Git Clone
|
||||
---
|
||||
## Git Clone
|
||||
|
||||
The `git clone` command allows you to copy a remote repository onto your local machine.
|
||||
|
||||
First, find the remote repository for the project you're working on or interested in - this can also be your fork of a project. Next, copy the URL for it. For example, if you've forked the freeCodeCamp guides repository, the URL looks like `https://github.com/YOUR-GITHUB-USERNAME/guides.git`.
|
||||
|
||||
In the command line on your local machine, navigate to where you want to save the project in your working directory. Finally, run the `git clone` command:
|
||||
|
||||
```shell
|
||||
git clone URL-OF-REPOSITORY
|
||||
```
|
||||
|
||||
The default name of the new directory on your computer is the name of the repository, but you can change this by including the last (optional) parameter:
|
||||
|
||||
```shell
|
||||
git clone URL-OF-REPOSITORY NAME-OF-DIRECTORY-ON-COMPUTER
|
||||
```
|
||||
|
||||
Git gives the remote the alias "origin". This is a useful way to refer to the remote when you want to push your changes to the remote server or pull changes from it. See <a href='https://guide.freecodecamp.org/git/git-push/' target='_blank' rel='nofollow'>Git push</a> and <a href='https://guide.freecodecamp.org/git/git-pull/' target='_blank' rel='nofollow'>Git pull</a> for more details.
|
||||
|
||||
Git only pulls the remote's main branch onto your computer. This branch is usually named "master" by convention but may be defined differently depending on the project.
|
||||
|
||||
Also, Git automatically sets up your local main branch to track the remote branch. When you run `git status`, you'll see information about whether your local branch is up-to-date with the remote. Here's an example output:
|
||||
|
||||
```shell
|
||||
myCommandPrompt (master) >> git status
|
||||
On branch master
|
||||
Your branch is up-to-date with 'origin/master'.
|
||||
nothing to commit, working tree clean
|
||||
myCommandPrompt (master) >>
|
||||
```
|
||||
|
||||
If your local `master` branch has three commits that you haven't pushed up to the remote server yet, the status would say "Your branch is ahead of 'origin/master' by 3 commits."
|
||||
|
||||
### Git Clone Mirror
|
||||
|
||||
If you want to host mirror of a repository you can use mirror parameter.
|
||||
|
||||
```shell
|
||||
git clone URL-OF-REPOSITORY --mirror
|
||||
```
|
||||
|
||||
After mirroring a repository, you can clone your local mirror from your server.
|
||||
|
||||
```shell
|
||||
git clone NAME-OF-DIRECTORY-ON-COMPUTER
|
||||
```
|
||||
|
||||
### To clone a spacific branch
|
||||
|
||||
If you want to clone a spacific branch, you can do that by the following command.
|
||||
|
||||
```shell
|
||||
git clone URL-OF-REPOSITORY -R branch_name
|
||||
```
|
||||
|
||||
### More Information:
|
||||
- Git documentation: [clone](https://git-scm.com/docs/git-clone)
|
||||
86
mock-guide/english/git/git-commit/index.md
Normal file
86
mock-guide/english/git/git-commit/index.md
Normal file
@ -0,0 +1,86 @@
|
||||
---
|
||||
title: Git Commit
|
||||
---
|
||||
|
||||
## Git Commit
|
||||
The `git commit` command will save all staged changes, along with a brief description from the user, in a "commit" to the local repository.
|
||||
|
||||
Commits are at the heart of Git usage. You can think of a commit as a snapshot of your project, where a new version of that project is created in the current repository. Two important features of commits are:
|
||||
|
||||
- you can recall the commited changes at a later date, or revert the project to that version ([see Git checkout](https://guide.freecodecamp.org/git/git-checkout))
|
||||
- if multiple commits edit different parts of the project, they will not overwrite each other even if the authors of the commit were unaware of each other. This is one of the benefits of using Git over a tool like Dropbox or Google Drive.
|
||||
|
||||
### Options
|
||||
There are a number of options that you can include with `git commit`. However, this guide will only cover the two most common options. For an extensive list of options, please consult the [Git documentation](https://git-scm.com/docs/git-commit).
|
||||
|
||||
#### The -m Option
|
||||
The most common option used with `git commit` is the `-m` option. The `-m` stands for message. When calling `git commit`, it is required to include a message. The message should be a short description of the changes being committed. The message should be at the end of the command and it must be wrapped in quotations `" "`.
|
||||
|
||||
An example of how to use the `-m` option:
|
||||
```shell
|
||||
git commit -m "My message"
|
||||
```
|
||||
The output in your terminal should look something like this:
|
||||
```shell
|
||||
[master 13vc6b2] My message
|
||||
1 file changed, 1 insertion(+)
|
||||
```
|
||||
|
||||
**NOTE:** If the `-m` is not included with the `git commit` command, you will be prompted to add a message in your default text editor - see 'Using detailed commit messages' below.
|
||||
|
||||
#### The -a Option
|
||||
Another popular option is the `-a` option. The `-a` stands for all. This option automatically stages all modified files to be committed. If new files are added the `-a` option will not stage those new files. Only files that the Git repository is aware of will be committed.
|
||||
|
||||
For example:
|
||||
|
||||
Let’s say that you have a `README.md` file that has already been committed to your repository. If you make changes to this file, you can use the `-a` option in your commit command to stage and add the changes to your repository. However, what if you also added a new file called `index.html`? The `-a` option will not stage the `index.html` as it does not currently exist in the repository. When new files have been added, the `git add` command should be invoked in order to stage the files before they can be committed to the repository.
|
||||
|
||||
An example of how to use the `-a` option:
|
||||
```shell
|
||||
git commit -am “My new changes”
|
||||
```
|
||||
The output in your terminal should look something like this:
|
||||
```shell
|
||||
[master 22gc8v1] My new message
|
||||
1 file changed, 1 insertion(+)
|
||||
```
|
||||
|
||||
### Using detailed commit messages
|
||||
Although `git commit -m "commit message"` works just fine, it can be useful to provide more detailed and systmatic information.
|
||||
|
||||
If you commit without using the `-m` option, git will open your default text editor with a new file, which will include a commented-out list of all the files/changes that are staged in the commit. You then write your detailed commit message (the first line will be treated as the subject line) and the commit will be performed when you save/close the file.
|
||||
|
||||
Bear in mind:
|
||||
* Keep your commit message lines length less than 72 charcters as standard practice
|
||||
* It is perfectly ok - and even recommended - to write multiline commit messages
|
||||
* You can also refer to other issues or pull requests in your commit message. GitHub allocated a number reference to all pull requests and issues, so for example if you want to refer to pull request #788 simply do so in either the subject-line or in the body text as appropriate
|
||||
|
||||
#### The --amend Option
|
||||
The `--amend` option allows you to change your last commit. Let's say you just committed and you made a mistake in your commit log message. You can conveniently modify the most recent commit using the command:
|
||||
```shell
|
||||
git commit --amend -m "an updated commit message"
|
||||
```
|
||||
If you forget to include a file in the commit:
|
||||
```shell
|
||||
git add FORGOTTEN-FILE-NAME
|
||||
git commit --amend -m "an updated commit message"
|
||||
|
||||
# If you don't need to change the commit message, use the --no-edit option
|
||||
git add FORGOTTEN-FILE-NAME
|
||||
git commit --amend --no-edit
|
||||
```
|
||||
Premature commits happen all the time in the course of your day-to-day development. It’s easy to forget to stage a file or how to correctly format your commit message. The `--amend` flag is a convenient way to fix these minor mistakes. This command will replace the old commit message with the updated one specified in the command.
|
||||
|
||||
Amended commits are actually entirely new commits and the previous commit will no longer be on your current branch. When you're working with others, you should try to avoid amending commits if the last commit is already pushed into the repository.
|
||||
|
||||
With `--amend`, one of the useful flag you could use is `--author` which enables you to change the author of the last commit you've made. Imagine a situation you haven't properly set up your name or email in git configurations but you already made a commit. With `--author` flag you can simply change them without resetting the last commit.
|
||||
|
||||
```
|
||||
git commit --amend --author="John Doe <johndoe@email.com>"
|
||||
```
|
||||
|
||||
#### The -v or --verbose Option
|
||||
The `-v` or `--verbose` option is used without the `-m` option. The `-v` option can be useful when you wish to edit a Git commit message in your default editor while being able to see the changes you made for the commit. The command opens your default text editor with a commit message template *as well as* a copy of the changes you made for this commit. The changes, or diff, will not be included in the commit message, but they provide a nice way to reference your changes when you're describing them in your commit message.
|
||||
|
||||
### More Information:
|
||||
- Git documentation: [commit](https://git-scm.com/docs/git-commit)
|
||||
6
mock-guide/english/git/git-fetch/index.md
Normal file
6
mock-guide/english/git/git-fetch/index.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Git Fetch
|
||||
---
|
||||
|
||||
## Git Fetch
|
||||
The `git fetch` git-fetch - Download objects and refs from another repository
|
||||
14
mock-guide/english/git/git-hooks/index.md
Normal file
14
mock-guide/english/git/git-hooks/index.md
Normal file
@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Git Hooks
|
||||
---
|
||||
|
||||
## Git Hooks
|
||||
Git Hooks are scripts located in the `.git/hooks/` directory of a git repository. These scripts run after being triggered by different stages in the version control process.
|
||||
|
||||
### Samples
|
||||
In this directory are a handful of sample scripts, such as `pre-commit.sample`. This particular sample runs every time a user runs `git commit`. If the hook script exits with a status other than 0, then the commit stops.
|
||||
|
||||
### Documentation
|
||||
- [Documentation for Git Hooks](https://git-scm.com/docs/githooks)
|
||||
- [Atlassian Tutorial on Git Hooks](https://www.atlassian.com/git/tutorials/git-hooks)
|
||||
- [Git Hooks Guide](http://githooks.com/)
|
||||
13
mock-guide/english/git/git-hosting/index.md
Normal file
13
mock-guide/english/git/git-hosting/index.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Git hosting
|
||||
---
|
||||
## Git hosting
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/git/git-hosting/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
93
mock-guide/english/git/git-how-to-undo-things/index.md
Normal file
93
mock-guide/english/git/git-how-to-undo-things/index.md
Normal file
@ -0,0 +1,93 @@
|
||||
---
|
||||
title: How to Undo Things in Git
|
||||
---
|
||||
## How to Undo Things in Git
|
||||
|
||||
As a version control software, Git gives you the ability to undo your changes at all levels. This includes the un-staged edits you made in your working directory all the way through undoing multiple commits.
|
||||
|
||||
Here's a quick summary outlining how to undo or revert changes in your Git project. There are Guide articles with more details for each of the following commands.
|
||||
|
||||
### Undoing changes in your working directory
|
||||
|
||||
If you want to undo changes you made to a file or directory in your working directory (that you haven't staged or committed yet), you use the `git checkout` command. Git replaces the file or directory you've specified with the version of them from in `HEAD`. The `--` in the command tells Git to stay in the current branch and use that branch's `HEAD`.
|
||||
|
||||
```shell
|
||||
git checkout -- FILE-NAME
|
||||
```
|
||||
|
||||
Typically, Git won't allow you to checkout another branch when you have un-staged changes. However, you can do a forced checkout to switch to a different branch, and this will discard all the changes you've made to files in your working directory.
|
||||
|
||||
```shell
|
||||
git checkout (-f | --force) OTHER-BRANCH-NAME
|
||||
```
|
||||
|
||||
See the [Git Checkout article](../git-checkout/index.md) for more details.
|
||||
|
||||
### Un-staging files
|
||||
|
||||
Say you ran `git add .` to move several files you edited in your working directory to the staging area. It's possible to remove one or all of them from the staging area while keeping your changes in your working directory. You can un-stage certain files with the `git reset` command. This may happen when you edit several files, add everything to your staging area, but decide you want to make multiple, more focused, commits.
|
||||
|
||||
```shell
|
||||
git reset HEAD FILE-NAME
|
||||
```
|
||||
|
||||
See the [Git Reset article](../git-reset/index.md) for more details.
|
||||
|
||||
### Amending the last commit
|
||||
|
||||
If you've committed your changes, but need to make more edits, Git allows you to amend your last commit. Simply make your changes, stage them with the `git add` command, then use the `git commit` command with the `--amend` option.
|
||||
|
||||
```shell
|
||||
# Use the original commit message
|
||||
git add EDITED-FILE
|
||||
git commit --amend --no-edit
|
||||
|
||||
# Change the commit message
|
||||
git add EDITED-FILE
|
||||
git commit --amend -m "new message"
|
||||
```
|
||||
|
||||
When you're working with others, you should try to avoid amending commits if the last commit is already pushed into the project repository.
|
||||
|
||||
See the [Git Commit article](../git-commit/index.md) for more details.
|
||||
|
||||
### Changing a file back to a version in an older commit
|
||||
|
||||
In a similar workflow to how you removed changes in your working directory, the `git checkout` command also lets you revert to a version of that file in an older commit. First, you need to find the SHA-1 hash for the older commit with the version of the file you want, and copy about the first 8-10 characters of it.
|
||||
|
||||
```shell
|
||||
git checkout PART-OF-SHA-OF-OLDER-COMMIT -- FILE-NAME
|
||||
```
|
||||
|
||||
This puts the file (in the state it was in from the older commit) into your working directory and staging area.
|
||||
|
||||
### Reverting a commit
|
||||
|
||||
You can undo changes from a recent commit with the `git revert` command. This will rollback the changes you committed but keep a record of the action in the commit history. It's not just for the recent commit, you can revert to older versions.
|
||||
|
||||
```shell
|
||||
git revert PART-OF-SHA-OF-OLDER-COMMIT
|
||||
```
|
||||
|
||||
See the [Git Revert article](../git-revert/index.md) for a detailed example and more information.
|
||||
|
||||
|
||||
### Undoing multiple commits
|
||||
|
||||
You can use the `git reset` command to change where your current `HEAD` pointer points. This works for specific files or for the entire branch. The command is different than `git revert` because it will overwrite everything that came after that point.
|
||||
|
||||
The following command resets your current branch's `HEAD` to the given `COMMIT` and updates the index. It basically rewinds the state of your branch, then all commits you make going forward write over anything that came after the reset point. If you omit the `MODE`, it defaults to `--mixed`:
|
||||
|
||||
```shell
|
||||
git reset MODE COMMIT
|
||||
```
|
||||
|
||||
There are five options for the `MODE`, but the three you'll likely want to use are `--soft` (resets `HEAD` but doesn't reset the staging area or working directory), `--mixed` (resets the staging area but not the working directory), and `--hard` (resets the staging area and working directory).
|
||||
|
||||
See the [Git Reset article](../git-reset/index.md) for all the options and more information.
|
||||
|
||||
### More Information:
|
||||
- [Git checkout documentation](https://git-scm.com/docs/git-checkout)
|
||||
- [Git commit documentation](https://git-scm.com/docs/git-commit)
|
||||
- [Git revert documentation](https://git-scm.com/docs/git-revert)
|
||||
- [Git reset documentation](https://git-scm.com/docs/git-reset)
|
||||
123
mock-guide/english/git/git-log/index.md
Normal file
123
mock-guide/english/git/git-log/index.md
Normal file
@ -0,0 +1,123 @@
|
||||
---
|
||||
title: Git Log
|
||||
---
|
||||
## Git Log
|
||||
|
||||
The ```git log``` command displays all of the commits in a respository's history.
|
||||
|
||||
By default, the command displays each commit's:
|
||||
|
||||
* Secure Hash Algorithm (SHA)
|
||||
* author
|
||||
* date
|
||||
* commit message
|
||||
|
||||
### Navigating Git Log
|
||||
|
||||
Git uses the Less terminal pager to page through the commit history. You can navigate it with the following commands:
|
||||
|
||||
* to scroll down by one line, use j or ↓
|
||||
* to scroll up by one line, use k or ↑
|
||||
* to scroll down by one page, use the spacebar or the Page Down button
|
||||
* to scroll up by one page, use b or the Page Up button
|
||||
* to quit the log, use q
|
||||
|
||||
### Git Log Flags
|
||||
|
||||
You can customize the information presented by ```git log``` using flags.
|
||||
|
||||
#### --oneline
|
||||
|
||||
```git log --oneline```
|
||||
|
||||
The ```--oneline``` flag causes ```git log ``` to display
|
||||
|
||||
* one commit per line
|
||||
* the first seven characters of the SHA
|
||||
* the commit message
|
||||
|
||||
#### --stat
|
||||
|
||||
```git log --stat```
|
||||
|
||||
The ```--stat``` flag causes ```git log ``` to display
|
||||
|
||||
* the files that were modified in each commit
|
||||
* the number of lines added or removed
|
||||
* a summary line with the total number of files and lines changed
|
||||
|
||||
#### --patch or -p
|
||||
|
||||
```git log --patch```
|
||||
|
||||
or, the shorter version
|
||||
|
||||
```git log -p```
|
||||
|
||||
The ```--patch``` flag causes ```git log ``` to display
|
||||
|
||||
* the files that you modified
|
||||
* the location of the lines that you added or removed
|
||||
* the specific changes that you made
|
||||
|
||||
### View specified number of commits by author
|
||||
|
||||
To view a specified number of commits by an author to the current repo (optionally in a prettified format), the following command can be used
|
||||
|
||||
```git log --pretty=format:"%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset" -n {NUMBER_OF_COMMITS} --author="{AUTHOR_NAME}" --all```
|
||||
|
||||
#### Start at a specific commit
|
||||
|
||||
To start ```git log``` at a specific commit, add the SHA:
|
||||
|
||||
```git log 7752b22```
|
||||
|
||||
This will display the commit with the SHA 7752b22 and all of the commits made before that commit. You can combine this with any of the other flags.
|
||||
|
||||
#### --graph
|
||||
|
||||
```git log --graph```
|
||||
|
||||
The ```--graph``` flag enables you to view your ```git log ``` as a graph. To make things things interesting, you can combine this command with ```--oneline``` option you learned from above.
|
||||
|
||||
```git log --graph --oneline```
|
||||
|
||||
The output would be similar to,
|
||||
|
||||
* 64e6db0 Update index.md
|
||||
* b592012 Update Python articles (#5030)
|
||||
* ecbf9d3 Add latest version and remove duplicate link (#8860)
|
||||
* 7e3934b Add hint for Compose React Components (#8705)
|
||||
* 99b7758 Added more frameworks (#8842)
|
||||
* c4e6a84 Add hint for "Create a Component with Composition" (#8704)
|
||||
* 907b004 Merge branch 'master' of github.com:freeCodeCamp/guide
|
||||
|\
|
||||
| * 275b6d1 Update index.md
|
||||
* | cb74308 Merge branch 'dogb3rt-patch-3'
|
||||
|\ \
|
||||
| |/
|
||||
|/|
|
||||
| * 98015b6 fix merge conflicts after folder renaming
|
||||
| |\
|
||||
|/ /
|
||||
| * fa83460 Update index.md
|
||||
* | 6afb3b5 rename illegally formatted folder name (#8762)
|
||||
* | 64b1fe4 CSS3: border-radius property (#8803)
|
||||
|
||||
One of the benefit of using this command is that it enables you to get a overview of how commits have merged and how the git history was created.
|
||||
|
||||
There are may other options you could use in combination with ```--graph```. Couple of them are ```--decorate``` and ```--all```. Make sure to try these out too. And refer to [documantation](https://git-scm.com/docs/git-log) for more helpful info.
|
||||
|
||||
#### More Information:
|
||||
|
||||
- [Git Basics - Viewing the Commit History](https://git-scm.com/book/en/v2/Git-Basics-Viewing-the-Commit-History)
|
||||
- [Git Log](https://git-scm.com/docs/git-log)
|
||||
|
||||
##### Other Resources on Git in guide.freecodecamp.org
|
||||
|
||||
- [Git Merge](../git-merge/index.md)
|
||||
- [Git Checkout](../git-checkout/index.md)
|
||||
- [Git Commit](../git-commit/index.md)
|
||||
- [Git Stash](../git-stash/index.md)
|
||||
- [Git Branch](../git-branch/index.md)
|
||||
|
||||
55
mock-guide/english/git/git-merge/index.md
Normal file
55
mock-guide/english/git/git-merge/index.md
Normal file
@ -0,0 +1,55 @@
|
||||
---
|
||||
title: Git Merge
|
||||
---
|
||||
## Git Merge
|
||||
The `git merge` command will merge any changes that were made to the code base on a seperate branch to your current branch.
|
||||
|
||||
The command syntax is as follows:
|
||||
```shell
|
||||
git merge BRANCH-NAME
|
||||
```
|
||||
For example, if you are currently working in a branch named `dev` and would like to merge any new changes that were made in a branch named `new-features`, you would issue the following command:
|
||||
|
||||
```shell
|
||||
git merge new-features
|
||||
```
|
||||
|
||||
**Please Note:** If there are any uncommitted changes on your current branch, Git will not allow you to merge until all changes in your current branch have been committed. To handle those changes, you can either:
|
||||
|
||||
* Create a new branch and commit the changes
|
||||
```shell
|
||||
git checkout -b new-branch-name
|
||||
git add .
|
||||
git commit -m "<your commit message>"
|
||||
```
|
||||
|
||||
* Stash them
|
||||
```shell
|
||||
git stash # add them to the stash
|
||||
git merge new-features # do your merge
|
||||
git stash pop # get the changes back into your working tree
|
||||
```
|
||||
|
||||
* Abandon it all
|
||||
```shell
|
||||
git reset --hard # removes all pending changes
|
||||
```
|
||||
|
||||
## Merge Conflict
|
||||
|
||||
A merge conflict is when you make commits on separate branches that alter the same line in conflicting ways. Therefore Git will not know which version of the file to keep
|
||||
|
||||
resulting in the error message:
|
||||
|
||||
CONFLICT (content): Merge conflict in resumé.txt
|
||||
Automatic merge failed; fix conflicts and then commit the result.
|
||||
|
||||
In the code editor Git uses markings to indicate the HEAD (master) version of the file and the other version of the file.
|
||||
|
||||
`<<<<<<< HEAD`
|
||||
|
||||
`>>>>>>> OTHER`
|
||||
|
||||
From the code editor delete/update to resolve conflict and remove the special markings including the HEAD and OTHER file names, reload your file, then re add and recommit your changes.
|
||||
|
||||
For more information about the `git merge` command and all available options, please refer to the <a href="https://git-scm.com/docs/git-merge" target="_blank" rel="nofollow">Git documentation</a>.
|
||||
112
mock-guide/english/git/git-pull/index.md
Normal file
112
mock-guide/english/git/git-pull/index.md
Normal file
@ -0,0 +1,112 @@
|
||||
---
|
||||
title: Git Pull
|
||||
---
|
||||
## Git Pull
|
||||
|
||||
`git pull` is a Git command used to update the local version of a repository from a remote.
|
||||
|
||||
It is one of the four commands that prompts network interaction by Git. By default, `git pull` does two things.
|
||||
|
||||
1. Updates the current local working branch (currently checked out branch)
|
||||
1. Updates the remote tracking branches for all other branches.
|
||||
|
||||
`git pull` fetches (`git fetch`) the new commits and merges <a href='https://guide.freecodecamp.org/git/git-merge' target='_blank' rel='nofollow'>(`git merge`)</a> these into your local branch.
|
||||
|
||||
This command's syntax is as follows:
|
||||
|
||||
```shell
|
||||
# General format
|
||||
git pull OPTIONS REPOSITORY REFSPEC
|
||||
|
||||
# Pull from specific branch
|
||||
git pull REMOTE-NAME BRANCH-NAME
|
||||
```
|
||||
|
||||
in which:
|
||||
|
||||
- **OPTIONS** are the command options, such as `--quiet` or `--verbose`. You can read more about the different options in the <a href='https://git-scm.com/docs/git-pull' target='_blank' rel='nofollow'>Git documentation</a>
|
||||
- **REPOSITORY** is the URL to your repo. Example: https://github.com/freeCodeCamp/freeCodeCamp.git
|
||||
- **REFSPEC** specifies which refs to fetch and which local refs to update
|
||||
- **REMOTE-NAME** is the name of your remote repository. For example: *origin*.
|
||||
- **BRANCH-NAME** is the name of your branch. For example: *develop*.
|
||||
|
||||
**Note**
|
||||
|
||||
If you have uncommitted changes, the merge part of the `git pull` command will fail and your local branch will be untouched.
|
||||
|
||||
Thus, you should *always commit your changes in a branch before pulling* new commits from a remote repository.
|
||||
|
||||
**Table of Contents**
|
||||
|
||||
- [Using `git pull`](#using-git-pull)
|
||||
- [Distributed Version Control](#distributed-version-control)
|
||||
- [`git fetch` + `git merge`](#git-fetch-plus-git-merge)
|
||||
- [`git pull` in IDEs](#git-pull-in-IDEs)
|
||||
|
||||
### Using git pull
|
||||
|
||||
Use `git pull` to update a local repository from the corresponding remote repository. Ex: While working locally on `master`, execute `git pull` to update the local copy of `master` and update the other remote tracking branches. (More information on remote tracking branches in the next section.)
|
||||
|
||||
But, there are a few things to keep in mind for that example to be true:
|
||||
- The local repository has a linked remote repository
|
||||
- Check this by executing `git remote -v`
|
||||
- If there are multiple remotes, `git pull` might not be enough information. You might need to enter `git pull origin` or `git pull upstream`.
|
||||
- The branch you are currently checked out to has a corresponding remote tracking branch
|
||||
- Check this by executing `git status`. If there is no remote tracking branch, Git doesn't know where to pull information _from_.
|
||||
|
||||
### Distributed Version Control
|
||||
Git is a **Distributed Version Control System** (DVCS). With DVCS, developers can be working on the same file at the same time in separate environments. After _pushing_ code up to the shared remote repository, other developers can _pull_ changed code.
|
||||
|
||||
#### Network interactions in Git
|
||||
There are only four commands that prompt network interactions in Git. A local repository has no awareness of changes made on the remote repository until there is a request for information. And, a remote repository has no awareness of local changes until commits are pushed.
|
||||
|
||||
The four network commands are:
|
||||
- `git clone`
|
||||
- `git fetch`
|
||||
- `git pull`
|
||||
- `git push`
|
||||
|
||||
#### Branches in DVCS
|
||||
|
||||
When working with Git, it can feel like there are lots of copies of the same code floating all over the place. There are different versions of the same file on each branch. And, different copies of the same branches on every developer's computer and on the remote. To keep track of this, Git uses something called **remote tracking branches**.
|
||||
|
||||
If you execute `git branch --all` within a Git repository, remote tracking branches appear in red. These are read-only copies of the code as it appears on the remote. ( When was the last network interaction that would have brought information locally? Remember when this information was last updated. The information in the remote tracking branches reflects the information from that interaction.)
|
||||
|
||||
With **remote tracking branches**, you can work in Git on several branches without network interaction. Every time you execute `git pull` or `git fetch` commands, you update **remote tracking branches**.
|
||||
|
||||
### git fetch plus git merge
|
||||
|
||||
`git pull` is a combination command, equal to `git fetch` + `git merge`.
|
||||
|
||||
#### git fetch
|
||||
On its own, `git fetch` updates all the remote tracking branches in local repository. No changes are actually reflected on any of the local working branches.
|
||||
|
||||
#### git merge
|
||||
Without any arguments, `git merge` will merge the corresponding remote tracking branch to the local working branch.
|
||||
|
||||
#### git pull
|
||||
`git fetch` updates remote tracking branches. `git merge` updates the current branch with the corresponding remote tracking branch. Using `git pull`, you get both parts of these updates. But, this means that if you are checked out to `feature` branch and you execute `git pull`, when you checkout to `master`, any new updates will not be included. Whenever you checkout to another branch that may have new changes, it's always a good idea to execute `git pull`.
|
||||
|
||||
### git pull in IDEs
|
||||
Common language in other IDES may not include the word `pull`. If you look out for the words `git pull` but don't see them, look for the word `sync` instead.
|
||||
|
||||
### fethcing a remote PR (Pull Request) in to local repo
|
||||
For purposes of reviewing and such, PRs in remote should be fetched to the local repo. You can use `git fetch` command as follows to achieve this.
|
||||
|
||||
`git fetch origin pull/ID/head:BRANCHNAME`
|
||||
|
||||
ID is the pull request id and BRANCHNAME is the name of the branch that you want to create. Once the branch has been created you can use `git checkout` to switch to that brach.
|
||||
|
||||
|
||||
### Other Resources on git pull
|
||||
- <a href='https://git-scm.com/docs/git-pull' target='_blank' rel='nofollow'>git-scm</a>
|
||||
- <a href='https://help.github.com/articles/fetching-a-remote/#pull' target='_blank' rel='nofollow'>GitHub Help Docs</a>
|
||||
- <a href='https://services.github.com/on-demand/intro-to-github/create-pull-request' target='_blank' rel='nofollow'>GitHub On Demand Training</a>
|
||||
- <a href='https://www.atlassian.com/git/tutorials/syncing' target='_blank' rel='nofollow'>Syncing Tutorials</a>
|
||||
|
||||
### Other Resources on git in guide.freecodecamp.org
|
||||
- [Git merge](../git-merge/index.md)
|
||||
- [Git checkout](../git-checkout/index.md)
|
||||
- [Git commit](../git-commit/index.md)
|
||||
- [Git stash](../git-stash/index.md)
|
||||
- [Git branch](../git-branch/index.md)
|
||||
63
mock-guide/english/git/git-push/index.md
Normal file
63
mock-guide/english/git/git-push/index.md
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
title: Git Push
|
||||
---
|
||||
## Git Push
|
||||
|
||||
The `git push` command allows you to send (or *push*) the commits from your local branch in your local Git repository to the remote repository.
|
||||
|
||||
To be able to push to your remote repository, you must ensure that **all your changes to the local repository are committed**.
|
||||
|
||||
This command's syntax is as follows:
|
||||
```bash
|
||||
git push <repo name> <branch name>
|
||||
```
|
||||
There are a number of different options you can pass with the command, you can learn more about them in the <a href='https://git-scm.com/docs/git-push#_options_a_id_options_a' target='_blank' rel='nofollow'>Git documentation</a> or run `git push --help`.
|
||||
|
||||
### Push to a Specific Remote Repository and Branch
|
||||
In order to push code, you must first clone a repository to your local machine.
|
||||
```bash
|
||||
# Once a repo is cloned, you'll be working inside of the default branch (the default is `master`)
|
||||
git clone https://github.com/<git-user>/<repo-name> && cd <repo-name>
|
||||
# make changes and stage your files (repeat the `git add` command for each file, or use `git add .` to stage all)
|
||||
git add <filename>
|
||||
# now commit your code
|
||||
git commit -m "added some changes to my repo!"
|
||||
# push changes in `master` branch to github
|
||||
git push origin master
|
||||
```
|
||||
|
||||
To learn more about branches check out the links below:
|
||||
* [git checkout](https://github.com/renington/guides/blob/master/src/pages/git/git-checkout/index.md)
|
||||
* [git branch](https://github.com/renington/guides/blob/master/src/pages/git/git-branch/index.md)
|
||||
|
||||
|
||||
### Push to a Specific Remote Repository and All Branches in it
|
||||
If you want to push all your changes to the remote repository and all branches in it, you can use:
|
||||
```bash
|
||||
git push --all <REMOTE-NAME>
|
||||
```
|
||||
in which:
|
||||
- `--all` is the flag that signals that you want to push all branches to the remote repository
|
||||
- `REMOTE-NAME` is the name of the remote repository you want to push to
|
||||
|
||||
### Push to a specific branch with force parameter
|
||||
If you want to ignore the local changes made to Git repository at Github(Which most of developers do for a hot fix to development server) then you can use --force command to push by ignoring those changs.
|
||||
|
||||
```bash
|
||||
git push --force <REMOTE-NAME> <BRANCH-NAME>
|
||||
```
|
||||
in which:
|
||||
- `REMOTE-NAME` is the name of the remote repository to which you want to push the changes to
|
||||
- `BRANCH-NAME` is the name of the remote branch you want to push your changes to
|
||||
|
||||
### Push ignoring Git's pre-push hook
|
||||
By default `git push` will trigger the `--verify` toggle. This means that git will execute any client-side pre-push script that may have been configured. If the pre-push scripts fails, so will the git push. (Pre-Push hooks are good for doing things like, checking if commit messages confirm to company standards, run unit tests etc...). Occasionally you may wish to ignore this default behavior e.g. in the scenario where you wish to push your changes to a feature branch for another contributor to pull, but your work-in-progress changes are breaking unit tests. To ignore the hook, simply input your push command and add the flag `--no-verify`
|
||||
|
||||
```bash
|
||||
git push --no-verify
|
||||
```
|
||||
|
||||
|
||||
### More Information:
|
||||
- [Git documentation - push](https://git-scm.com/docs/git-push)
|
||||
- [Git hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)
|
||||
72
mock-guide/english/git/git-rebase/index.md
Normal file
72
mock-guide/english/git/git-rebase/index.md
Normal file
@ -0,0 +1,72 @@
|
||||
---
|
||||
title: Git Rebase
|
||||
---
|
||||
## Git Rebase
|
||||
|
||||
Rebasing a branch in Git is a way to move the entirety of a branch to another point in the tree. The simplest example is moving a branch further up in the tree. Say we have a branch that diverged from the master branch at point A:
|
||||
|
||||
/o-----o---o--o-----o--------- branch
|
||||
--o-o--A--o---o---o---o----o--o-o-o--- master
|
||||
|
||||
When you rebase you can move it like this:
|
||||
|
||||
/o-----o---o--o-----o------ branch
|
||||
--o-o--A--o---o---o---o----o--o-o-o master
|
||||
|
||||
To rebase, make sure you have all the commits you want in the rebase in your master branch. Check out the branch you want to rebase and type `git rebase master` (where master is the branch you want to rebase on).
|
||||
|
||||
It is also possible to rebase on a different branch, so that for example a branch that was based on another branch (let's call it feature) is rebased on master:
|
||||
|
||||
/---o-o branch
|
||||
/---o-o-o-o---o--o------ feature
|
||||
----o--o-o-A----o---o--o-o-o--o--o- master
|
||||
|
||||
After `git rebase master branch` or `git rebase master` when you have checked out the branch, you'll get:
|
||||
|
||||
|
||||
/---o-o-o-o---o--o------ feature
|
||||
----o--o-o-A----o---o--o-o-o--o--o- master
|
||||
\---o-o branch
|
||||
|
||||
### Git rebase interactive in the console
|
||||
|
||||
To use `git rebase` in the console with a list of commits you can choose, edit or drop in the rebase:
|
||||
|
||||
- Enter `git rebase -i HEAD~5` with the last number being any number of commits from the most recent backwards you want to review.
|
||||
- In vim, press `esc`, then `i` to start editing the test.
|
||||
- On the left hand side you can overwrite the `pick` with one of the commands below. If you want to squash a commit into a previous one and discard the commit message, enter `f` in the place of the `pick` of the commit.
|
||||
|
||||
```
|
||||
pick 452b159 <message for this commit>
|
||||
pick 7fd4192 <message for this commit>
|
||||
pick c1af3e5 <message for this commit>
|
||||
pick 5f5e8d3 <message for this commit>
|
||||
pick 5186a9f <message for this commit>
|
||||
|
||||
# Rebase 0617e63..5186a9f onto 0617e63 (30 commands)
|
||||
#
|
||||
# Commands:
|
||||
# p, pick = use commit
|
||||
# r, reword = use commit, but edit the commit message
|
||||
# e, edit = use commit, but stop for amending
|
||||
# s, squash = use commit, but meld into previous commit
|
||||
# f, fixup = like "squash", but discard this commit's log message
|
||||
# x, exec = run command (the rest of the line) using shell
|
||||
# d, drop = remove commit
|
||||
#
|
||||
# These lines can be re-ordered; they are executed from top to bottom.
|
||||
#
|
||||
# If you remove a line here THAT COMMIT WILL BE LOST.
|
||||
#
|
||||
# However, if you remove everything, the rebase will be aborted.
|
||||
#
|
||||
# Note that empty commits are commented out
|
||||
```
|
||||
|
||||
- Enter `esc` followed by `:wq` to save and quit.
|
||||
- If it rebases successfully then you need to force push your changes with `git push -f` to add the rebased version to your github repo.
|
||||
- If there is a merge conflict, there are a number of ways to fix this, including following the suggestions in [this guide](https://help.github.com/enterprise/2.11/user/articles/resolving-a-merge-conflict-using-the-command-line/). One way is to open the files in a text editor and delete the parts of the code you do not want. Then use `git add <file name>` followed by `git rebase --continue`. You can skip over the conflicted commit by entering `git rebase --skip`, exit the git rebase by entering `git rebase --abort` in your console.
|
||||
|
||||
### More Information:
|
||||
- [Git documentation: rebase](https://git-scm.com/docs/git-rebase)
|
||||
- [Thoughbot interactive guide to git rebase](https://robots.thoughtbot.com/git-interactive-rebase-squash-amend-rewriting-history)
|
||||
59
mock-guide/english/git/git-remote/index.md
Normal file
59
mock-guide/english/git/git-remote/index.md
Normal file
@ -0,0 +1,59 @@
|
||||
---
|
||||
title: Git Remote
|
||||
---
|
||||
## Git Remote
|
||||
The `git remote` command allows you to manage your Git remote repositories. Remote repositories are references to other Git repositories that operate on the same codebase.
|
||||
|
||||
You can
|
||||
<a href='https://guide.freecodecamp.org/git/git-pull/' target='_blank' rel='nofollow'>pull from</a>
|
||||
and
|
||||
<a href='https://guide.freecodecamp.org/git/git-push/' target='_blank' rel='nofollow'>push to</a>
|
||||
remote repositories.
|
||||
|
||||
You can push or pull to either an HTTPS URL, such as `https://github.com/user/repo.git`, or an SSH URL, like `git@github.com:user/repo.git`.
|
||||
|
||||
Don't worry, every time you push something, you don't need to type the entire URL. Git associates a remote URL with a name, and the name most people use is `origin`.
|
||||
|
||||
### List all configured remote repositories
|
||||
```bash
|
||||
git remote -v
|
||||
```
|
||||
This command lists all remote repositories alongside their location.
|
||||
|
||||
Remote repositories are referred to by name. As noted above, the main repository for a project is usually called `origin`.
|
||||
|
||||
When you you use
|
||||
<a href='https://guide.freecodecamp.org/git/git-clone/' target='_blank' rel='nofollow'>git clone</a>
|
||||
to obtain a copy of a repository, Git sets up the original location as the *origin* remote repository.
|
||||
|
||||
### Add a remote repository
|
||||
To add a remote repository to your project, you would run the following command:
|
||||
```bash
|
||||
git remote add REMOTE-NAME REMOTE-URL
|
||||
```
|
||||
The `REMOTE-URL` can be either HTTPS or SSH. You can find the URL on GitHub by clicking the "Clone or download" dropdown in your repository.
|
||||
|
||||
For example, if you want to add a remote repository and call it `example`, you would run:
|
||||
```bash
|
||||
git remote add example https://example.org/my-repo.git
|
||||
```
|
||||
|
||||
### Update a remote URL
|
||||
If the URL of a remote repository changes, you can update it with the following command, where `example` is the name of the remote:
|
||||
```bash
|
||||
git remote set-url example https://example.org/my-new-repo.git
|
||||
```
|
||||
|
||||
### Deleting Remotes
|
||||
Deleting remotes is done like so:
|
||||
```bash
|
||||
git remote rm REMOTE-NAME
|
||||
```
|
||||
|
||||
You can confirm the remote is gone by viewing the list of your existing remotes:
|
||||
```bash
|
||||
git remote -v
|
||||
```
|
||||
|
||||
### More Information:
|
||||
- [Git remote documentation](https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes)
|
||||
40
mock-guide/english/git/git-reset/index.md
Normal file
40
mock-guide/english/git/git-reset/index.md
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
title: Git Reset
|
||||
---
|
||||
## Git Reset
|
||||
|
||||
The `git reset` command allows you to RESET your current head to a specified state. You can reset the state of specific files as well as an entire branch.
|
||||
|
||||
### Reset a file or set of files
|
||||
The following command lets you selectively choose chunks of content and revert or unstage it.
|
||||
|
||||
```shell
|
||||
git reset (--patch | -p) [tree-ish] [--] [paths]
|
||||
```
|
||||
|
||||
### Unstage a file
|
||||
If you moved a file into the staging area with `git add`, but no longer want it to be part of a commit, you can use `git reset` to unstage that file:
|
||||
|
||||
```shell
|
||||
git reset HEAD FILE-TO-UNSTAGE
|
||||
```
|
||||
|
||||
The changes you made will still be in the file, this command just removes that file from your staging area.
|
||||
|
||||
### Reset a branch to a prior commit
|
||||
The following command resets your current branch's HEAD to the given `COMMIT` and updates the index. It basically rewinds the state of your branch, then all commits you make going forward write over anything that came after the reset point. If you omit the `MODE`, it defaults to `--mixed`:
|
||||
|
||||
```shell
|
||||
git reset MODE COMMIT
|
||||
```
|
||||
|
||||
The options for `MODE` are:
|
||||
|
||||
- `--soft`: does not reset the index file or working tree, but resets HEAD to `commit`. Changes all files to "Changes to be commited"
|
||||
- `--mixed`: resets the index but not the working tree and reports what has not been updated
|
||||
- `--hard`: resets the index and working tree. Any changes to tracked files in the working tree since `commit` are discarded
|
||||
- `--merge`: resets the index and updates the files in the working tree that are different between `commit` and HEAD, but keeps those which are different between the index and working tree
|
||||
- `--keep`: resets index entries and updates files in the working tree that are different between `commit` and HEAD. If a file that is different between `commit` and HEAD has local changes, the reset is aborted
|
||||
|
||||
### More Information:
|
||||
- [Git reset documentation](https://git-scm.com/docs/git-reset)
|
||||
68
mock-guide/english/git/git-revert/index.md
Normal file
68
mock-guide/english/git/git-revert/index.md
Normal file
@ -0,0 +1,68 @@
|
||||
---
|
||||
title: Git Revert
|
||||
---
|
||||
## Git Revert
|
||||
|
||||
The `git revert` command undoes a commit, but unlike `git reset`, which removes the commit from the commit history, it appends a new commit with the resulting content. This prevents Git from losing history, which is important for the integrity of your revision history and for reliable collaboration. When you are working on a repository with other developers, using `git reset` is highly dangerous because you alter the history of commits which makes it very difficult to maintain a consistent history of commits with other developers.
|
||||
|
||||
### Common options
|
||||
1.) This is a default option and doesn't need to be specified. This option will open the configured system editor and prompts you to edit the commit message prior to committing the revert.
|
||||
|
||||
```shell
|
||||
-e
|
||||
--edit
|
||||
```
|
||||
2.) This is the inverse of the -e option. The `revert` will not open the editor.
|
||||
|
||||
```shell
|
||||
--no-edit
|
||||
```
|
||||
3.) Passing this option will prevent `git revert` from creating a new commit that inverses the target commit. Instead of creating the new commit this option will add the inverse changes to the Staging Index and Working Directory.
|
||||
|
||||
```shell
|
||||
-n
|
||||
--no-edit
|
||||
```
|
||||
|
||||
### Example.
|
||||
Let's imagine the following situation.
|
||||
1.) You are working on a file and you add and commit your changes.
|
||||
2.) You then work on a few other things, and make some more commits.
|
||||
3.) Now you realize, three or four commits ago, you did something that you would like to undo - how can you do this?
|
||||
|
||||
You might be thinking, just use `git reset`, but this will remove all of the commits after the one you would like to change - `git revert` to the rescue! Let's walk through this example:
|
||||
|
||||
```shell
|
||||
mkdir learn_revert # Create a folder called `learn_revert`
|
||||
cd learn_revert # `cd` into the folder `learn_revert`
|
||||
git init # Initialize a git repository
|
||||
|
||||
touch first.txt # Create a file called `first.txt`
|
||||
echo Start >> first.txt # Add the text "Start" to `first.txt`
|
||||
|
||||
git add . # Add the `first.txt` file
|
||||
git commit -m "adding first" # Commit with the message "Adding first.txt"
|
||||
|
||||
echo WRONG > wrong.txt # Add the text "WRONG" to `wrong.txt`
|
||||
git add . # Add the `wrong.txt` file
|
||||
git commit -m "adding WRONG to wrong.txt" # Commit with the message "Adding WRONG to wrong.txt"
|
||||
|
||||
echo More >> first.txt # Add the text "More" to `first.txt`
|
||||
git add . # Add the `first.txt` file
|
||||
git commit -m "adding More to first.txt" # Commit with the message "Adding More to first.txt"
|
||||
|
||||
echo Even More >> first.txt # Add the text "Even More" to `first.txt`
|
||||
git add . # Add the `first.txt` file
|
||||
git commit -m "adding Even More to First.txt" # Commit with the message "Adding More to first.txt"
|
||||
|
||||
# OH NO! We want to undo the commit with the text "WRONG" - let's revert! Since this commit was 2 from where we are not we can use git revert HEAD~2 (or we can use git log and find the SHA of that commit)
|
||||
|
||||
git revert HEAD~2 # this will put us in a text editor where we can modify the commit message.
|
||||
|
||||
ls # wrong.txt is not there any more!
|
||||
git log --oneline # note that the commit history hasn't been altered, we've just added a new commit reflecting the removal of the `wrong.txt`
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
- [Git revert documentation](https://git-scm.com/docs/git-revert)
|
||||
- [Git revert interactive tutorial](https://www.atlassian.com/git/tutorials/undoing-changes/git-revert)
|
||||
55
mock-guide/english/git/git-show/index.md
Normal file
55
mock-guide/english/git/git-show/index.md
Normal file
@ -0,0 +1,55 @@
|
||||
---
|
||||
title: Git Show
|
||||
---
|
||||
## Git Show
|
||||
|
||||
The `git show` is a handy command that enables you to see in detail view of a given object (commits, tags, blobs and trees).
|
||||
|
||||
This command's syntax is as follows:
|
||||
```bash
|
||||
git show [<options>] [<object>…]
|
||||
```
|
||||
|
||||
For different git objects `git show` gives different outputs.
|
||||
|
||||
* commits it shows the commit log message with a diff of changes which were committed.
|
||||
* For tags, it shows the tag message and the referenced objects.
|
||||
* For trees, it shows the names
|
||||
* For plain blobs, it shows the plain contents
|
||||
|
||||
The most common usage of `git show` would be in association with git commit object
|
||||
|
||||
```bash
|
||||
git show 3357d63
|
||||
```
|
||||
|
||||
You'd get an output similar to,
|
||||
|
||||
commit 3357d63d8f44104940e568a1ba89fa88a16dc753
|
||||
Author: John Doe <johndoe@acme.com>
|
||||
Date: Tue Oct 2 00:57:38 2018 +0530
|
||||
|
||||
add a section on git commit --amend --author
|
||||
|
||||
diff --git a/src/pages/git/git-commit/index.md b/src/pages/git/git-commit/index.md
|
||||
index fc9f568..8f1c8eb 100644
|
||||
--- a/src/pages/git/git-commit/index.md
|
||||
+++ b/src/pages/git/git-commit/index.md
|
||||
@@ -73,5 +73,11 @@ Premature commits happen all the time in the course of your day-to-day developme
|
||||
|
||||
Amended commits are actually entirely new commits and the previous commit will no longer be on your current branch. When you're working with others, you should try to avoid amending commits if the last commit is already pushed into the repository.
|
||||
|
||||
+With `--amend`, one of the useful flag you could use is `--author` which enables you to change the author of the last commit you've made. Imagine a situation you haven't properly set up your name or email in git configurations but you already made a commit. With `--author` flag you can simply change them without resetting the last commit.
|
||||
+
|
||||
+```
|
||||
+git commit --amend --author="John Doe <johndoe@email.com>"
|
||||
+```
|
||||
+
|
||||
### More Information:
|
||||
- Git documentation: [commit](https://git-scm.com/docs/git-commit)
|
||||
|
||||
You could just use `git show` and it will display the content of the latest git commit.
|
||||
|
||||
### More Information:
|
||||
- [Git documentation - show](https://git-scm.com/docs/git-show)
|
||||
|
||||
92
mock-guide/english/git/git-squash/index.md
Normal file
92
mock-guide/english/git/git-squash/index.md
Normal file
@ -0,0 +1,92 @@
|
||||
---
|
||||
title: Git Squash
|
||||
---
|
||||
## Git Squash
|
||||
|
||||
One of the things that developers hear quite often regarding their pull requests is something like "That looks good to me, please squash and merge". The fun part is that there is no such command like `git squash` (unless you create an [alias](https://guide.freecodecamp.org/git/git-rebase) to it). To `squash` pull request means commonly to compact all the commits in this request into one (rarely to other number) to make it more concise, readable and not to pollute main branch's history. To achieve that developer needs to use **interactive mode** of [Git Rebase](https://guide.freecodecamp.org/git/git-rebase) command.
|
||||
|
||||
Quite often when you develop some new feature you end up with several intermittent commits in your history - you develop incrementally after all. That might be just some typos or steps to final solution. Most of the time there is no use in having all these commits in final public version of code, so it's more beneficial to have all of them compacted into one, single and final.
|
||||
|
||||
So let's assume you have following commit log in the branch you'd like to merge as part of pull request:
|
||||
```shell
|
||||
$ git log --pretty=oneline --abbrev-commit
|
||||
30374054 Add Jupyter Notebook stub to Data Science Tools
|
||||
8490f5fc Minor formatting and Punctuation changes
|
||||
3233cb21 Prototype for Notebook page
|
||||
```
|
||||
|
||||
Clearly we would prefer to have only one commit here, since there is no benefit in knowing what we started on writing and which typos we fixed there later, only final result is of importance.
|
||||
|
||||
So what we do is starting interactive rebase session from current **HEAD** (commit **30374054**) to commit **3233cb21**, with intention to combine **3** latest commits into one:
|
||||
|
||||
```shell
|
||||
$ git rebase -i HEAD~3
|
||||
```
|
||||
|
||||
That will open an editor with something like following:
|
||||
|
||||
|
||||
```shell
|
||||
pick 3233cb21 Prototype for Notebook page
|
||||
pick 8490f5fc Minor formatting and Punctuation changes
|
||||
pick 30374054 Add Jupyter Notebook to Data Science Tools
|
||||
# Rebase
|
||||
#
|
||||
# Commands:
|
||||
# p, pick = use commit
|
||||
# r, reword = use commit, but edit the commit message
|
||||
# e, edit = use commit, but stop for amending
|
||||
# s, squash = use commit, but meld into previous commit
|
||||
# f, fixup = like "squash", but discard this commit's log message
|
||||
# x, exec = run command (the rest of the line) using shell
|
||||
#
|
||||
# These lines can be re-ordered; they are executed from top to bottom.
|
||||
#
|
||||
# If you remove a line here THAT COMMIT WILL BE LOST.
|
||||
#
|
||||
# However, if you remove everything, the rebase will be aborted.
|
||||
#
|
||||
# Note that empty commits are commented out
|
||||
```
|
||||
|
||||
As always, Git gives us very nice help message where you can see this `squash` option we are looking for.
|
||||
|
||||
Currently the instructions for interactive rebase say to `pick` every specified commit **and** preserve corresponding commit message. That is - don't change anything. But we want to have only one commit in the end. Simply edit the text in you editor replacing `pick` with `squash` (or just `s`) next yo every commit we want to get rid of and save/exit the editor. That might look like this:
|
||||
|
||||
```shell
|
||||
s 3233cb21 Prototype for Notebook page
|
||||
s 8490f5fc Minor formatting and Punctuation changes
|
||||
pick 30374054 Add Jupyter Notebook to Data Science Tools
|
||||
```
|
||||
|
||||
When you close your editor saving this changes it will be reopened right away suggesting to choose and reword commit messages. Something like
|
||||
```shell
|
||||
# This is a combination of 3 commits.
|
||||
# The first commit's message is:
|
||||
Prototype for Notebook page
|
||||
|
||||
# This is the 2nd commit message:
|
||||
|
||||
Minor formatting and Punctuation changes
|
||||
|
||||
# This is the 3rd commit message:
|
||||
|
||||
Add Jupyter Notebook to Data Science Tools
|
||||
|
||||
# Please enter the commit message for your changes. Lines starting
|
||||
# with '#' will be ignored, and an empty message aborts the commit.
|
||||
```
|
||||
|
||||
At this point you can delete all the messages you don't want to be included in the final commit version, reword them or just write commit message from scratch. Just remember that new version will include all the lines that are not starting with `#` character. Once again, save and exit your editor.
|
||||
|
||||
Your terminal now should show a success message including `Successfully rebased and updated <branch name>` and the git log should show nice and compacted history with only one commit. All intermediary commits are gone and we are ready to merge!
|
||||
|
||||
### Warning about local and remote commit history mismatch
|
||||
|
||||
This operation is slightly dangerous if you have your branch already published in a remote repository - you are modifying commit history after all. So it's best to do squash operation on local branch before you do **push**. Sometimes, it will be already pushed - how would you create pull request after all? In this case you'll have to **force** the changes on remote branch after doing the squashing, since your local history and branch history in the remote repository are different:
|
||||
|
||||
``` shell
|
||||
$ git push origin +my-branch-name
|
||||
```
|
||||
|
||||
Do your best to make sure you are the only one using this remote branch at this point, or you'll make their life harder having history mismatch. But since **squashing** is usually done as the final operation on a branch before getting rid of it, it's usually not so big of a concern.
|
||||
65
mock-guide/english/git/git-stash/index.md
Normal file
65
mock-guide/english/git/git-stash/index.md
Normal file
@ -0,0 +1,65 @@
|
||||
---
|
||||
title: Git Stash
|
||||
---
|
||||
## Git Stash
|
||||
|
||||
Git has an area called the stash where you can temporarily store a snapshot of your changes without committing them to the repository. It's separate from the working directory, the staging area, or the repository.
|
||||
|
||||
This functionality is useful when you've made changes to a branch that you aren't ready to commit, but you need to switch to another branch.
|
||||
|
||||
### Stash Changes
|
||||
To save your changes in the stash, run the command:
|
||||
|
||||
```shell
|
||||
git stash save "optional message for yourself"
|
||||
```
|
||||
|
||||
This saves your changes and reverts the working directory to what it looked like for the latest commit. Stashed changes are available from any branch in that repository.
|
||||
|
||||
Note that changes you want to stash need to be on tracked files. If you created a new file and try to stash your changes, you may get the error `No local changes to save`.
|
||||
|
||||
### View Stashed Changes
|
||||
To see what is in your stash, run the command:
|
||||
|
||||
```shell
|
||||
git stash list
|
||||
```
|
||||
This returns a list of your saved snapshots in the format `stash@{0}: BRANCH-STASHED-CHANGES-ARE-FOR: MESSAGE`. The `stash@{0}` part is the name of the stash, and the number in the curly braces (`{ }`) is the index of that stash. If you have multiple change sets stashed, each one will have a different index.
|
||||
|
||||
If you forgot what changes were made in the stash, you can see a summary of them with `git stash show NAME-OF-STASH`. If you want to see the typical diff-style patch layout (with the +'s and -'s for line-by-line changes), you can include the `-p` (for patch) option. Here's an example:
|
||||
|
||||
```shell
|
||||
git stash show -p stash@{0}
|
||||
|
||||
# Example result:
|
||||
diff --git a/PathToFile/fileA b/PathToFile/fileA
|
||||
index 2417dd9..b2c9092 100644
|
||||
--- a/PathToFile/fileA
|
||||
+++ b/PathToFile/fileA
|
||||
@@ -1,4 +1,4 @@
|
||||
-What this line looks like on branch
|
||||
+What this line looks like with stashed changes
|
||||
```
|
||||
|
||||
### Retrieve Stashed Changes
|
||||
To retrieve changes out of the stash and apply them to the current branch you're on, you have two options:
|
||||
|
||||
1. `git stash apply STASH-NAME` applies the changes and leaves a copy in the stash
|
||||
2. `git stash pop STASH-NAME` applies the changes and removes the files from the stash
|
||||
|
||||
There may be conflicts when you apply changes. You can resolve the conflicts similar to a merge (<a href='https://guide.freecodecamp.org/git/git-merge/' target='_blank' rel='nofollow'>see Git merge for details</a>).
|
||||
|
||||
### Delete Stashed Changes
|
||||
If you want to remove stashed changes without applying them, run the command:
|
||||
```shell
|
||||
git stash drop STASH-NAME
|
||||
```
|
||||
|
||||
To clear the entire stash, run the command:
|
||||
```shell
|
||||
git stash clear
|
||||
```
|
||||
|
||||
### More Information:
|
||||
- The `git merge` command: <a href='https://guide.freecodecamp.org/git/git-merge/' target='_blank' rel='nofollow'>fCC Guide</a>
|
||||
- Git documentation: <a href='https://git-scm.com/docs/git-stash' target='_blank' rel='nofollow'>stash</a>
|
||||
15
mock-guide/english/git/git-status/index.md
Normal file
15
mock-guide/english/git/git-status/index.md
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Git Status
|
||||
---
|
||||
## Git Status
|
||||
|
||||
The `git status` commands displays the state of the working directory and the staging area. It displays paths that have differences between the `index` file and the current `HEAD` commit, paths that have differences between the working tree and the `index` file, and paths in the working tree that are not tracked by Git (and are not ignored by [gitignore](https://git-scm.com/docs/gitignore)
|
||||
|
||||
`git status` command output does not show you any information regarding the committed project history. For this, you need to use `git log`.
|
||||
|
||||
### Usage
|
||||
```shell
|
||||
git status
|
||||
```
|
||||
|
||||
List which files are staged, unstaged, and untracked.
|
||||
17
mock-guide/english/git/git-verifying-commits/index.md
Normal file
17
mock-guide/english/git/git-verifying-commits/index.md
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Git Verifying Commits
|
||||
---
|
||||
## Git Verifying Commits
|
||||
|
||||
When you’re building software with people from around the world, sometimes it’s important to validate that commits and tags are coming from an identified source. Git supports signing commits and tags with GPG. GitHub shows when commits and tags are signed.
|
||||
|
||||
|
||||
|
||||
When you view a signed commit or tag, you will see a badge indicating if the signature could be verified using any of the contributor’s GPG keys uploaded to GitHub. You can upload your GPG keys by visiting the keys settings page.
|
||||
|
||||
Many open source projects and companies want to be sure that a commit is from a verified source. GPG signature verification on commits and tags makes it easy to see when a commit or tag is signed by a verified key that GitHub knows about.
|
||||
|
||||
|
||||
|
||||
### More Information:
|
||||
- [Signing Your Work](https://git-scm.com/book/en/v2/Git-Tools-Signing-Your-Work)
|
||||
46
mock-guide/english/git/gitignore/index.md
Normal file
46
mock-guide/english/git/gitignore/index.md
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Gitignore
|
||||
---
|
||||
## Gitignore
|
||||
|
||||
The `.gitignore` file is a text file that tells Git which files or folders to ignore in a project.
|
||||
|
||||
A local `.gitignore` file is usually placed in the root directory of a project. You can also create a global `.gitignore` file and any entries in that file will be ignored in all of your Git repositories.
|
||||
|
||||
To create a local `.gitignore` file, create a text file and name it `.gitignore` (remember to include the `.` at the beginning). Then edit this file as needed. Each new line should list an additional file or folder that you want Git to ignore.
|
||||
|
||||
The entries in this file can also follow a matching pattern.
|
||||
|
||||
* `*` is used as a wildcard match
|
||||
* `/` is used to ignore pathnames relative to the `.gitignore` file
|
||||
* `#` is used to add comments to a `.gitignore` file
|
||||
|
||||
This is an example of what the `.gitignore` file could look like:
|
||||
|
||||
```
|
||||
# Ignore Mac system files
|
||||
.DS_store
|
||||
|
||||
# Ignore node_modules folder
|
||||
node_modules
|
||||
|
||||
# Ignore all text files
|
||||
*.txt
|
||||
|
||||
# Ignore files related to API keys
|
||||
.env
|
||||
|
||||
# Ignore SASS config files
|
||||
.sass-cache
|
||||
```
|
||||
|
||||
To add or change your global .gitignore file, run the following command:
|
||||
```bash
|
||||
git config --global core.excludesfile ~/.gitignore_global
|
||||
```
|
||||
This will create the file `~/.gitignore_global`. Now you can edit that file the same way as a local `.gitignore` file. All of your Git repositories will ignore the files and folders listed in the global `.gitignore` file.
|
||||
|
||||
### More Information:
|
||||
- Git documentation: <a href='https://git-scm.com/docs/gitignore' target='_blank' rel='nofollow'>gitignore</a>
|
||||
- Ignoring files: <a href='https://help.github.com/articles/ignoring-files/' target='_blank' rel='nofollow'>GitHub</a>
|
||||
- Useful `.gitignore` templates: <a href='https://github.com/github/gitignore' target='_blank' rel='nofollow'>GitHub</a>
|
||||
15
mock-guide/english/git/gui-options/index.md
Normal file
15
mock-guide/english/git/gui-options/index.md
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: GUI Options
|
||||
---
|
||||
|
||||
## GUI Options for Git
|
||||
|
||||
Most people prefer to use Git as a [CLI (command-line interface)](https://en.wikipedia.org/wiki/Command-line_interface) tool, but there are plenty of [GUI (graphical user interface)](https://en.wikipedia.org/wiki/Graphical_user_interface) tools allowing you to use Git in a graphical way. GUI tools can useful to get a better view of the state of your Git repository, and some might find them easier to use than the CLI. However, knowing how to use the CLI is highly recommended because it will be the same interface on every platform, because it is generally considered to be more efficient, and because it is required as soon as you want to do something even a little bit complex.
|
||||
|
||||
## List of Git GUI Based Solutions
|
||||
* [GitKraken](https://www.gitkraken.com) is a popular Git GUI for Windows, Mac and Linux. It is proprietary but free for non-commercial use.
|
||||
* [GitHub Desktop](https://desktop.github.com/) is the Git client application provided by GitHub, allowing better integration with GitHub than other solutions. It is available for Windows and Mac, but not yet for Linux. It is free and open source.
|
||||
* [SourceTree](https://www.sourcetreeapp.com/) is another Git GUI for Windows and Mac by Atlassian. It has many features such as interactive rebase, designed to make using Git easier for beginners.
|
||||
* [Git Tower](https://www.git-tower.com/mac/) is available for Mac and Windows.
|
||||
* [TortoiseGit](https://tortoisegit.org/) is a Windows Shell Interface to Git based on TortoiseSVN. It's open source and can be built with freely available software.
|
||||
* [SmartGit](https://www.syntevo.com/smartgit/) is a Git client free for a non-commercial use for Windows, Mac and Linux.
|
||||
98
mock-guide/english/git/index.md
Normal file
98
mock-guide/english/git/index.md
Normal file
@ -0,0 +1,98 @@
|
||||
---
|
||||
title: Git
|
||||
---
|
||||
## Git
|
||||
|
||||
|
||||
Git is an open source distributed version control system created in 2005 by Linus Torvalds and others from the Linux development community. Git can work with many types of projects, but it's most commonly used for software source code.
|
||||
|
||||
Version control is a system that keeps track of changes to a file or group of files over time. When you have a history of these changes, it lets you find specific versions later, compare changes between versions, recover files you may have deleted, or revert files to previous versions.
|
||||
|
||||
A *distributed* version control system means that different users maintain their own repositories of a project, instead of working from one central repository. Users automatically have full file tracking abilities and the project's complete version history without needing access to a central server or network.
|
||||
|
||||
When Git is initialized in a project directory, it begins tracking file changes and stores them as "change sets" or "patches." Users working together on a project submit their change sets which are then included (or rejected) in the project.
|
||||
|
||||
**Table of Contents**
|
||||
- [Understand the Three Sections of a Git Project](#understand-the-three-sections-of-a-git-project)
|
||||
- [Install Git](#install-git)
|
||||
- [Configure the Git Environment](#configure-the-git-environment)
|
||||
- [Initialize Git in a Project](#initialize-git-in-a-project)
|
||||
- [Get Help in Git](#get-help-in-git)
|
||||
- [Sources](#sources)
|
||||
- [More Information](#more-information)
|
||||
|
||||
### Understand the Three Sections of a Git Project <a name="understand-the-three-sections-of-a-git-project"></a>
|
||||
A Git project will have the following three main sections:
|
||||
1. Git directory
|
||||
2. Working directory (or working tree)
|
||||
3. Staging area
|
||||
|
||||
The **Git directory** (located in `YOUR-PROJECT-PATH/.git/`) is where Git stores everything it needs to accurately track the project. This includes metadata and an object database which includes compressed versions of the project files.
|
||||
|
||||
The **working directory** is where a user makes local changes to a project. The working directory pulls the project's files from the Git directory's object database and places them on the user's local machine.
|
||||
|
||||
The **staging area** is a file (also called the "index", "stage", or "cache") that stores information about what will go into your next commit. A commit is when you tell Git to save these staged changes. Git takes a snapshot of the files as they are and permanently stores that snapshot in the Git directory.
|
||||
|
||||
With three sections, there are three main states that a file can be in at any given time: committed, modified, or staged. You *modify* a file any time you make changes to it in your working directory. Next, it's *staged* when you move it to the staging area. Finally, it's *committed* after a commit.
|
||||
|
||||
### Install Git <a name="install-git"></a>
|
||||
- Ubuntu: `sudo apt-get install git`
|
||||
- Windows: <a href="https://git-scm.com/download/win" target="_blank">Download</a>
|
||||
- Mac: <a href="https://git-scm.com/download/mac" target="_blank">Download</a>
|
||||
|
||||
### Configure the Git Environment <a name="configure-the-git-environment"></a>
|
||||
Git has a `git config` tool that allows you to customize your Git environment. You can change the way Git looks and functions by setting certain configuration variables. Run these commands from a command line interface on your machine (Terminal in Mac, Command Prompt or Powershell in Windows).
|
||||
|
||||
There are three levels of where these configuration variables are stored:
|
||||
1. System: located in `/etc/gitconfig`, applies default settings to every user of the computer. To make changes to this file, use the `--system` option with the `git config` command.
|
||||
2. User: located in `~/.gitconfig` or `~/.config/git/config`, applies settings to a single user. To make changes to this file, use the `--global` option with the `git config` command.
|
||||
3. Project: located in `YOUR-PROJECT-PATH/.git/config`, applies settings to the project only. To make changes to this file, use the `git config` command.
|
||||
|
||||
If there are settings that conflict with each other, the project-level configurations will override the user-level ones, and the user-level configurations will override the system-level ones.
|
||||
|
||||
Note for Windows users: Git looks for the user-level configuration file (`.gitconfig`) in your `$HOME` directory (`C:\Users\$USER`). Git also looks for `/etc/gitconfig`, although it's relative to the MSys root, which is wherever you decide to install Git on your Windows system when you run the installer. If you are using version 2.x or later of Git for Windows, there is also a system-level config file at `C:\Documents and Settings\All Users\Application Data\Git\config` on Windows XP, and in `C:\ProgramData\Git\config` on Windows Vista and newer. This config file can only be changed by `git config -f FILE` as an admin.
|
||||
|
||||
#### Add Your Name and Email
|
||||
Git includes the user name and email as part of the information in a commit. You'll want to set this up under your user-level configuration file with these commands:
|
||||
```shell
|
||||
git config --global user.name "My Name"
|
||||
git config --global user.email "myemail@example.com"
|
||||
```
|
||||
|
||||
#### Change Your Text Editor
|
||||
Git automatically uses your default text editor, but you can change this. Here's an example to use the Atom editor instead (the `--wait` option tells the shell to wait for the text editor so you can do your work in it before the program moves on):
|
||||
```shell
|
||||
git config --global core.editor "atom --wait"
|
||||
```
|
||||
|
||||
#### Add Color to Git Output
|
||||
You can configure your shell to add color to Git output with this command:
|
||||
```shell
|
||||
git config --global color.ui true
|
||||
```
|
||||
|
||||
To see all your configuration settings, use the command `git config --list`.
|
||||
|
||||
### Initialize Git in a Project <a name="initialize-git-in-a-project"></a>
|
||||
Once Git is installed and configured on your computer, you need to initialize it in your project to start using its version control powers. In the command line, use the `cd` command to navigate to the top-level (or root) folder for your project. Next, run the command `git init`. This installs a Git directory folder with all the files and objects Git needs to track your project.
|
||||
|
||||
It's important that the Git directory is installed in the project root folder. Git can track files in subfolders, but it won't track files located in a parent folder relative to the Git directory.
|
||||
|
||||
### Get Help in Git <a name="get-help-in-git"></a>
|
||||
If you forget how any command works in Git, you can access Git help from the command line several ways:
|
||||
```shell
|
||||
git help COMMAND
|
||||
git COMMAND --help
|
||||
man git-COMMAND
|
||||
```
|
||||
This displays the manual page for the command in your shell window. To navigate, scroll with the up and down arrow keys or use the following keyboard shortcuts: <!-- Need to confirm these work in Windows -->
|
||||
- `f` or `spacebar` to page forward
|
||||
- `b` to page back
|
||||
- `q` to quit
|
||||
|
||||
### Sources <a name="sources"></a>
|
||||
This article uses information from the <a href='https://github.com/progit/progit2' target='_blank' rel='nofollow'>Pro Git</a> book, written by Scott Chacon and Ben Straub and published by Apress. The book is displayed in full in the <a href='https://git-scm.com/book/en/v2' target='_blank' rel='nofollow'>Git documentation</a>.
|
||||
|
||||
### More Information: <a name="more-information"></a>
|
||||
- For downloads, documentation, and a browser-based tutorial: <a href='https://git-scm.com/' target='_blank' rel='nofollow'>Git official website</a>
|
||||
- Most useful commands when you're in bad GIT situation: <a href='http://ohshitgit.com/' target='_blank' rel='nofollow'>Oh shit, git!</a>
|
||||
218
mock-guide/english/git/tagging-in-git/index.md
Normal file
218
mock-guide/english/git/tagging-in-git/index.md
Normal file
@ -0,0 +1,218 @@
|
||||
---
|
||||
title: Tagging in Git
|
||||
---
|
||||
|
||||
Tagging lets developers mark important checkpoints in the course of their projects development. For instance, software release versions can be tagged. (Ex: v1.3.2) It essentially allows you to give a commit a special name(tag).
|
||||
|
||||
To view all the created tags in alphabetical order:
|
||||
```bash
|
||||
git tag
|
||||
```
|
||||
To get more information on a tag:
|
||||
```bash
|
||||
git show v1.4
|
||||
```
|
||||
|
||||
There are two types of tags:
|
||||
1. Annotated
|
||||
```bash
|
||||
git tag -a v1.2 -m "my version 1.4"
|
||||
```
|
||||
2. Lightweight
|
||||
```bash
|
||||
git tag v1.2
|
||||
```
|
||||
They differ in the way that they are stored.
|
||||
These create tags on your current commit.
|
||||
|
||||
Incase, you'd like to tag a previous commit specify the commit ID you'd like to tag:
|
||||
```bash
|
||||
git tag -a v1.2 9fceb02
|
||||
```
|
||||
|
||||
The tags names may be used instead of commit IDs while checking out and pushing commits to a remote repo.
|
||||
|
||||
#### More Information:
|
||||
- Git documentation: <a href='https://git-scm.com/docs/git-tag' target='_blank' rel='nofollow'>Documentation</a>
|
||||
- Git Tagging Chapter: <a href='https://git-scm.com/book/en/v2/Git-Basics-Tagging' target='_blank' rel='nofollow'>Book</a>
|
||||
|
||||
You can list all available tags in a project with the ```git tag``` command (nate that they will appear in alphabetical order):
|
||||
|
||||
```
|
||||
$ git tag
|
||||
v1.0
|
||||
v2.0
|
||||
v3.0
|
||||
```
|
||||
|
||||
This way of listing tags is great for small projects, but greater projects can have hundreds of tags, so you may need to filter them when searching for an important point in the history. You can find tags containing specific characters adding an ```-l``` to the ```git tag``` command:
|
||||
|
||||
```
|
||||
$ git tag -l "v2.0*"
|
||||
v2.0.1
|
||||
v2.0.2
|
||||
v2.0.3
|
||||
v2.0.4
|
||||
```
|
||||
|
||||
## Create a tag
|
||||
|
||||
You can create two type of tags: annotated and lightweight. They first ones are compete objects in GIT database: they are checksummed, requiere a message (like commits) and store other important data such as name, email and date. On the other hand, lightweight tags don require a mesage or store other data, working just as a pointer to a specific point in the project.
|
||||
|
||||
### Create an annotated tag
|
||||
|
||||
To create an anotated tag, add ```-a tagname -m "tag message"``` to the ```git tag``` command:
|
||||
|
||||
```
|
||||
$ git tag -a v4.0 -m "release version 4.0"
|
||||
$ git tag
|
||||
v1.0
|
||||
v2.0
|
||||
v3.0
|
||||
v4.0
|
||||
```
|
||||
|
||||
As you can see, the ```-a``` specifies that you are creating an annotated tag, after comes the tag name and finally, the ```-m``` followed by the tag message to store in the Git database.
|
||||
|
||||
### Create a lightweight tag
|
||||
|
||||
Lightweight tags contain only the commit checksum (no other information is stored). To create one, just run the ```git tag``` command without any other options (the -lw characters at the end of the name are used to indicate lightweight tags, but you can mark them as you like):
|
||||
|
||||
```
|
||||
$ git tag v4.1-lw
|
||||
$ git tag
|
||||
v1.0
|
||||
v2.0
|
||||
v3.0
|
||||
v4.0
|
||||
v4.1-lw
|
||||
```
|
||||
|
||||
This time you didn't specify a message or other relevant data, so the tag contains only the refered commit's checksum.
|
||||
|
||||
## View tag's data
|
||||
|
||||
You can run the ```git show``` command to view the data stored in a tag. In the case of annotated tags, you'll see the tag data and the commit data:
|
||||
|
||||
```
|
||||
$ git show v4.0
|
||||
tag v4.0
|
||||
Tagger: John Cash <john@cash.com>
|
||||
Date: Mon Sat 28 15:00:25 2017 -0700
|
||||
|
||||
release version 4.0
|
||||
|
||||
commit da43a5fss745av88d47839247990022a98419093
|
||||
Author: John Cash <john@cash.com>
|
||||
Date: Fri Feb 20 20:30:05 2015 -0700
|
||||
|
||||
finished details
|
||||
```
|
||||
|
||||
If the tag you are watching is a lightweight tag, you'll only see the refered commit data:
|
||||
|
||||
```
|
||||
$ git show v1.4-lw
|
||||
commit da43a5f7389adcb9201ab0a289c389ed022a910b
|
||||
Author: John Cash <john@cash.com>
|
||||
Date: Fri Feb 20 20:30:05 2015 -0700
|
||||
|
||||
finished details
|
||||
```
|
||||
|
||||
## Tagging old commits
|
||||
|
||||
You can also tag past commits using the git tag commit. In order to do this, you'll need to specify the commit's checksum (or at least a part of it) in the command's line.
|
||||
|
||||
First, run git log to find out the required commit's checksum:
|
||||
|
||||
```
|
||||
$ git log --pretty=oneline
|
||||
ac2998acf289102dba00823821bee04276aad9ca added products section
|
||||
d09034bdea0097726fd8383c0393faa0072829a7 refactorization
|
||||
a029ac120245ab012bed1ca771349eb9cca01c0b modified styles
|
||||
da43a5f7389adcb9201ab0a289c389ed022a910b finished details
|
||||
0adb03ca013901c1e02174924486a08cea9293a2 small fix in search textarea styles
|
||||
```
|
||||
|
||||
When you have the checksum needed, add it at the end of the tag creation line:
|
||||
|
||||
```
|
||||
$ git tag -a v3.5 a029ac
|
||||
```
|
||||
|
||||
You'll see the tag was correctly added running ```git tag```:
|
||||
|
||||
```
|
||||
$ git tag
|
||||
v1.0
|
||||
v2.0
|
||||
v3.0
|
||||
v3.5
|
||||
v4.0
|
||||
v4.1-lw
|
||||
```
|
||||
|
||||
## Push tags
|
||||
|
||||
Git does't push tags by default when you run the git push command. So, to succesfully push a tag to a server you'll have to ```git push origin``` command:
|
||||
|
||||
```
|
||||
$ git push origin v4.0
|
||||
Counting objects: 14, done.
|
||||
Delta compression using up to 8 threads.
|
||||
Compressing objects: 100% (16/16), done.
|
||||
Writing objects: 100% (18/18), 3.15 KiB | 0 bytes/s, done.
|
||||
Total 18 (delta 4), reused 0 (delta 0)
|
||||
To git@github.com:jcash/gitmanual.git
|
||||
* [new tag] v4.0 -> v4.0
|
||||
```
|
||||
|
||||
You can also use the ```--tags``` option to add multiple tags at once with the ```git push origin``` command:
|
||||
|
||||
```
|
||||
$ git push origin --tags
|
||||
Counting objects: 1, done.
|
||||
Writing objects: 100% (1/1), 160 bytes | 0 bytes/s, done.
|
||||
Total 1 (delta 0), reused 0 (delta 0)
|
||||
To git@github.com:jcash/gitmanual.git
|
||||
* [new tag] v4.0 -> v4.0
|
||||
* [new tag] v4.1-lw -> v4.1-lw
|
||||
```
|
||||
|
||||
## Checking out Tags
|
||||
|
||||
You can use ```git checkout``` to checkout to a tag like you would normally do. But you need to keep in mind that this would result a *detached HEAD* state.
|
||||
|
||||
```
|
||||
$ git checkout v0.0.3
|
||||
Note: checking out 'v0.0.3'.
|
||||
|
||||
You are in 'detached HEAD' state. You can look around, make experimental
|
||||
changes and commit them, and you can discard any commits you make in this
|
||||
state without impacting any branches by performing another checkout.
|
||||
```
|
||||
|
||||
## Deleting a Tag
|
||||
|
||||
You may find a situation were you want to delete a certain tag. There's a very useful command for this situations:
|
||||
|
||||
```
|
||||
$ git tag --delete v0.0.2
|
||||
$ git tag
|
||||
v0.0.1
|
||||
v0.0.3
|
||||
v0.0.4
|
||||
```
|
||||
|
||||
### More Information
|
||||
|
||||
* [Git Pro - Tagging Basics](https://git-scm.com/book/en/v2/Git-Basics-Tagging)
|
||||
* [Git Pro - Documentation](https://git-scm.com/docs/git-tag)
|
||||
* [Git HowTo](https://githowto.com/tagging_versions)
|
||||
* [Git tip: Tags](http://alblue.bandlem.com/2011/04/git-tip-of-week-tags.html)
|
||||
* [Creating a tag](https://www.drupal.org/node/1066342)
|
||||
|
||||
### Sources
|
||||
|
||||
Git documentation: [tags](https://git-scm.com/book/en/v2/Git-Basics-Tagging)
|
||||
84
mock-guide/english/go/index.md
Normal file
84
mock-guide/english/go/index.md
Normal file
@ -0,0 +1,84 @@
|
||||
---
|
||||
title: Go
|
||||
---
|
||||
## Go
|
||||
|
||||
|
||||
**Go** (or **golang**) is a programming language created at Google in 2007 by Robert Griesemer, Rob Pike, and Ken Thompson. It is a compiled, statically-typed language in the tradition of Algol and C. It has garbage collection, limited structural typing, memory safety, and CSP-style concurrent programming features added. The compiler and other language tools originally developed by Google are all free and open source. Its popularity is increasing fast. It is a great choice for building web applications.
|
||||
|
||||
For more information head to [Go's Homepage](https://golang.org/)
|
||||
|
||||
Want a quick [Tour of Go?](https://tour.golang.org/welcome/1)
|
||||
|
||||
## Pre-Installations:
|
||||
-----------
|
||||
|
||||
#### Install Golang with Homebrew:
|
||||
|
||||
```bash
|
||||
$ brew update
|
||||
$ brew install golang
|
||||
```
|
||||
#### When installed, try to run go version to see the installed version of Go.
|
||||
|
||||
### Setup the workspace:
|
||||
------
|
||||
|
||||
##### Add Environment variables:
|
||||
|
||||
First, you'll need to tell Go the location of your workspace.
|
||||
|
||||
We'll add some environment variables into shell config. One of does files located at your home directory bash_profile, bashrc or .zshrc (for Oh My Zsh Army)
|
||||
|
||||
```bash
|
||||
$ vi .bashrc
|
||||
````
|
||||
|
||||
then add those lines to export the required variables
|
||||
|
||||
#### This is actually your .bashrc file
|
||||
|
||||
```bash
|
||||
export GOPATH=$HOME/go-workspace # don't forget to change your path correctly!
|
||||
export GOROOT=/usr/local/opt/go/libexec
|
||||
export PATH=$PATH:$GOPATH/bin
|
||||
export PATH=$PATH:$GOROOT/bin
|
||||
```
|
||||
|
||||
#### Create your workspace:
|
||||
--------
|
||||
##### Create the workspace directories tree:
|
||||
```bash
|
||||
$ mkdir -p $GOPATH $GOPATH/src $GOPATH/pkg $GOPATH/bin
|
||||
$GOPATH/src : Where your Go projects / programs are located
|
||||
$GOPATH/pkg : contains every package objects
|
||||
$GOPATH/bin : The compiled binaries home
|
||||
```
|
||||
|
||||
### Quickstart
|
||||
For a quickstart and boilerplate Go project, try <a href='https://www.growthmetrics.io/open-source/alloy' target='_blank' rel='nofollow'>Alloy</a>
|
||||
|
||||
1. Clone Alloy repository
|
||||
```
|
||||
git clone https://github.com/olliecoleman/alloy
|
||||
cd alloy
|
||||
```
|
||||
2. Install the dependencies
|
||||
```
|
||||
glide install
|
||||
npm install
|
||||
```
|
||||
3. Start the development server
|
||||
```
|
||||
go install
|
||||
alloy dev
|
||||
```
|
||||
4. Visit website at `http://localhost:1212`
|
||||
|
||||
*Alloy uses Node, NPM, and Webpack*
|
||||
|
||||
### Go Playground
|
||||
|
||||
[Go Playground](https://play.golang.org/)
|
||||
|
||||
Learning how to install go on your local machine is important, but if want to start playing with go right in your browser, then Go Playground is the perfect sandbox to get started right away! To learn more about the Go Playground see their article titled [Inside the Go Playground](https://blog.golang.org/playground)
|
||||
8
mock-guide/english/groovy/index.md
Normal file
8
mock-guide/english/groovy/index.md
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Groovy
|
||||
---
|
||||
## Groovy
|
||||
Apache Groovy or Groovy is a powerful and dynamic language with static compilation and typing capabilities for the Java platform and was designed to increase productivity with its concise and familiar syntax. It integrates with any Java program with ease.
|
||||
|
||||
#### More Information:
|
||||
For documentation and more information, visit [Groovy's Official Website](http://groovy-lang.org)
|
||||
69
mock-guide/english/html/attributes/a-href-attribute/index.md
Normal file
69
mock-guide/english/html/attributes/a-href-attribute/index.md
Normal file
@ -0,0 +1,69 @@
|
||||
---
|
||||
title: A Href Attribute
|
||||
---
|
||||
|
||||
## A Href Attribute
|
||||
|
||||
The `<a href>` attribute refers to a destination provided by a link. The `a` (anchor) tag is dead without the `<href>` attribute. Sometimes in your workflow, you don't want a live link or you won't know the link destination yet. In this case, it's useful to set the `href` attribute to `"#"` to create a dead link. The `href` attribute can be used to link to local files or files on the internet.
|
||||
|
||||
For instance:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Href Attribute Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Href Attribute Example</h1>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org/contribute/">The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamp's community and growth.
|
||||
</p>
|
||||
</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
The `<a href>` attribute is supported by all browsers.
|
||||
|
||||
#### More attributes:
|
||||
`hreflang` : Specifies the language of the linked resource.
|
||||
`target` : Specifies the context in which the linked resource will open.
|
||||
`title` : Defines the title of a link, which appears to the user as a tooltip.
|
||||
|
||||
### Examples
|
||||
```html
|
||||
<a href="#">This is a dead link</a>
|
||||
<a href="https://www.freecodecamp.org">This is a live link to freeCodeCamp</a>
|
||||
<a href="https://html.com/attributes/a-href/">more with a href attribute</a>
|
||||
|
||||
```
|
||||
### In-page anchors
|
||||
|
||||
It's also possible to set an anchor to certain place of the page. To do this you should first place a tab at location on the page with tag <a> and necessary attribute "name" with any keyword description in it, like this:
|
||||
|
||||
```html
|
||||
<a name="top"></a>
|
||||
```
|
||||
|
||||
Any description between tags is not required. After that you can place a link leading to this anchor at any place on the same page. To do this you should use tag <a> with necessary attribute "href" with symbol # (sharp) and key-word description of the anchor, like this:
|
||||
|
||||
```html
|
||||
<a href="#top">Go to Top</a>
|
||||
```
|
||||
|
||||
### Image Links
|
||||
|
||||
The `<a href="#">` may also be applied to images and other HTML elements.
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<a href="#"><img itemprop="image" style="height: 90px;" src="http://www.chatbot.chat/assets/images/header-bg_y.jpg" alt="picture"> </a>
|
||||
|
||||
```
|
||||
### Example
|
||||
<a href="#"><img itemprop="image" style="height: 90px;" src="http://www.chatbot.chat/assets/images/header-bg_y.jpg" alt="picture"> </a>
|
||||
### Some more examples of href
|
||||
```html
|
||||
<base href="https://www.freecodecamp.org/a-href/">This gives a base url for all further urls on the page</a>
|
||||
<link href="style.css">This is a live link to an external stylesheet</a>
|
||||
```
|
||||
@ -0,0 +1,51 @@
|
||||
---
|
||||
title: A Target Attribute
|
||||
---
|
||||
## A Target Attribute
|
||||
|
||||
The `<a target>` attribute specifies where to open the linked document in an `a` (anchor) tag.
|
||||
<br>
|
||||
|
||||
#### Examples:
|
||||
|
||||
|
||||
A target attribute with the value of “_blank” opens the linked document in a new window or tab.
|
||||
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_blank">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
A target attribute with the value of “_self” opens the linked document in the same frame as it was clicked (this is the default and usually does not need to be specified).
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_self">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
A target attribute with the value of “_parent” opens the linked document in the parent frame.
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_parent">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
A target attribute with the value of “_top” opens the linked document in the full body of the window.
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_top">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
A target attribute with the value of _"framename"_ Opens the linked document in a specified named frame.
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="framename">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
|
||||
#### More Information:
|
||||
|
||||
Target Attribute: <a href="https://www.w3schools.com/tags/att_a_target.asp" target="_blank">w3schools</a>
|
||||
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Autofocus Attribute
|
||||
---
|
||||
## Autofocus Attribute | HTML5
|
||||
|
||||
The **autofocus** attribute is a boolean attribute.
|
||||
|
||||
When present, it specifies that the element should automatically get input focus when the page loads.
|
||||
|
||||
Only one form element in a document can have the **autofocus** attribute. It cannot be applied to `<input type="hidden">`.
|
||||
|
||||
### Applies to
|
||||
|
||||
| Element | Attribute |
|
||||
| :-- | :-- |
|
||||
| `<button>` | autofocus |
|
||||
| `<input>` | autofocus |
|
||||
| `<select>` | autofocus |
|
||||
| `<textarea>` | autofocus |
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<form>
|
||||
<input type="text" name="fname" autofocus>
|
||||
<input type="text" name="lname">
|
||||
</form>
|
||||
```
|
||||
|
||||
### Compatibility
|
||||
|
||||
This is an HTML5 attribute.
|
||||
|
||||
#### More Information:
|
||||
|
||||
[HTML autofocus Attribute](https://www.w3schools.com/tags/att_autofocus.asp) on w3schools.com
|
||||
|
||||
[<input> autofocus attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) on MDN web docs
|
||||
@ -0,0 +1,37 @@
|
||||
---
|
||||
title: Body Background Attribute
|
||||
---
|
||||
## Body Background Attribute
|
||||
|
||||
If you want to add a background image instead of a color, one solution is the `<body background>` attribute. It specifies a background image for an HTML document.
|
||||
|
||||
|
||||
Syntax:
|
||||
|
||||
`<body background="URL">`
|
||||
|
||||
|
||||
Attribute:
|
||||
|
||||
`background - URL for background image`
|
||||
|
||||
|
||||
Example:
|
||||
```html
|
||||
<html>
|
||||
<body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
## body-background attribute is depreciated
|
||||
the body-background attribute been deprecated in HTML5. The correct way to style the ```<body>``` tag is with CSS.
|
||||
|
||||
|
||||
There are several CSS properties used for setting the background of an element. These can be used on <body> to set the background of an entire page.
|
||||
|
||||
## Check it Out:
|
||||
* [CSS background proprety](https://github.com/freeCodeCamp/guides/blob/master/src/pages/css/background/index.md)
|
||||
|
||||
|
||||
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Body Bgcolor Attribute
|
||||
---
|
||||
## Body Bgcolor Attribute
|
||||
The `<body bgcolor>` attribute assigns a background color for an HTML document.
|
||||
|
||||
**Syntax**:
|
||||
|
||||
`<body bgcolor="color">`
|
||||
The color value can be either a color name (like, `purple`) or a hex value (like, `#af0000`).
|
||||
|
||||
To add a background color to a webpage you can use the `<body bgcolor="######">` attribute. It specifies a color for the HTML document to display.
|
||||
|
||||
**For example:**
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Body bgcolor Attribute example</title>
|
||||
</head>
|
||||
<body bgcolor="#afafaf">
|
||||
<h1>This webpage has colored background.</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
You can change the color by replacing ###### with a hexadecimal value. For simple colors you can also use the word, such as "red" or "black".
|
||||
|
||||
All major browsers support the `<body bgcolor>` attribute.
|
||||
|
||||
*Note:*
|
||||
* HTML 5 does not support the `<body bgcolor>` attribute. Use CSS for this purpose. How? By using the following code:
|
||||
`<body style="background-color: color">`
|
||||
Of course, you can also do it in a separate document instead of an inline method.
|
||||
|
||||
* Do not use RGB value in `<body bgcolor>` attribute because `rgb()` is for CSS only, that is, it will not work in HTML.
|
||||
|
||||
**See it in action:**
|
||||
https://repl.it/Mwht/2
|
||||
|
||||
**Other resources:**
|
||||
* HTML color names: https://www.w3schools.com/colors/colors_names.asp
|
||||
* CSS background-color property: https://www.w3schools.com/cssref/pr_background-color.asp
|
||||
@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Div Align Attribute
|
||||
---
|
||||
## Div Align Attribute
|
||||
|
||||
The `<div align="">` attribute is used for aligning the text in a div tag to The Left, Right, center or justify.
|
||||
|
||||
For instance:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title> Div Align Attribbute </title>
|
||||
</head>
|
||||
<body>
|
||||
<div align="left">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div align="right">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div align="center">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div align="justify">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
## Important!
|
||||
This attribute is no longer supported in html5. css is the way to go.
|
||||
|
||||
The Div Align attribute can be used to horizontally align the contents within a div. In the below example, the text will be centered within the div.
|
||||
|
||||
```html
|
||||
<div align="center">
|
||||
This Text Will Be Centered
|
||||
</div>
|
||||
```
|
||||
|
||||
**This attribute is not supported in HTML5 and [CSS Text Align](https://github.com/freeCodeCamp/guides/blob/f50b7370be514b2a03ee707cd0f0febe2bb713ae/src/pages/css/text-align/index.md) should be used instead
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Font Color Attribute
|
||||
---
|
||||
|
||||
## Font Color Attribute
|
||||
This attribute is used to set a color to the text enclosed in a ```<font>``` tag.
|
||||
|
||||
### Syntax:
|
||||
```html
|
||||
<font color= "color">
|
||||
```
|
||||
|
||||
### Important:
|
||||
This attribute is not supported in HTML5. Instead, this [freeCodeCamp article](https://guide.freecodecamp.org/css/colors) specifies a CSS method, which can be used.
|
||||
|
||||
### Note:
|
||||
A color can also be specified using a 'hex code' or an 'rgb code', instead of using a name.
|
||||
|
||||
### Example:
|
||||
1. Color name attribute
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<font color="green">Font color example using color attribute</font>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
2. Hex code attribute
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<font color="#00FF00">Font color example using color attribute</font>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
3. RGB attribute
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<font color="rgb(0,255,0)">Font color example using color attribute</font>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,22 @@
|
||||
---
|
||||
title: Font Size Attribute
|
||||
---
|
||||
## Font Size Attribute
|
||||
|
||||
This attribute specifies the font size as either a numeric or relative value. Numeric values range from `1` to `7` with `1` being the smallest and `3` the default. It can also be defined using a relative value, like `+2` or `-3`, which set it relative to the value of the size attribute of the `<basefont>` element, or relative to `3`, the default value, if none does exist.
|
||||
|
||||
Syntax:
|
||||
|
||||
`<font size="number">
|
||||
`
|
||||
|
||||
Example:
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<font size="6">This is some text!</font>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Note : `The size attribute of <font> is not supported in HTML5. Use CSS instead.`
|
||||
21
mock-guide/english/html/attributes/href-attribute/index.md
Normal file
21
mock-guide/english/html/attributes/href-attribute/index.md
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Href Attribute
|
||||
---
|
||||
## Href Attribute
|
||||
|
||||
Href is short for "Hypertext Reference" and is an HTML attribute. The href attribute is mainly used for `<a>` tags to specify the URL for a webpage the link leads to (whether it be on a different section of the same page, or on a completely different webpage).
|
||||
|
||||
#### How to use
|
||||
`<a href="URL"></a>`
|
||||
|
||||
#### Examples
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org">This is an absolute URL</a>
|
||||
|
||||
<a href="index.html">This is a relative URL</a>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
[W3Schools](https://www.w3schools.com/tags/att_href.asp)
|
||||
|
||||
[HTMLElementReference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
|
||||
51
mock-guide/english/html/attributes/href/index.md
Normal file
51
mock-guide/english/html/attributes/href/index.md
Normal file
@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Href
|
||||
---
|
||||
## Href
|
||||
|
||||
Hypertext Reference (HREF) is an HTML attribute that you use to specify a link destination or Uniform Resource Locator (URL). Most commonly you will see the HREF attribute paired with an anchor tag `<a>`.
|
||||
|
||||
The HREF attribute gets the exact meaning of a link depending on the element that is using it. For instance when using with the `<a>` tag, it is referencing the location of an object express as a URL. When using the HREF attribute with the `<image>` tag, the HREF attribute is referencing the URL of the image to render.
|
||||
|
||||
### Examples:
|
||||
Link to Google's Homepage:
|
||||
|
||||
-> The text "Visit Google's Homepage acts like the link to the Homepage
|
||||
|
||||
```html
|
||||
<a href="https://www.google.com">Visit Google’s Homepage</a>
|
||||
```
|
||||
|
||||
Image as an Link:
|
||||
|
||||
-> Google Logo that refers to Google's Homepage
|
||||
|
||||
```html
|
||||
<a href="https://www.google.com">
|
||||
<img border="0" alt="Google" src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" width="100" height="100">
|
||||
```
|
||||
|
||||
Tags that use HREF:
|
||||
```html
|
||||
<a>
|
||||
<area>
|
||||
<base>
|
||||
<cursor>
|
||||
<discard>
|
||||
<feImage>
|
||||
<hatch>
|
||||
<image>
|
||||
<link>
|
||||
<mesh>
|
||||
<meshgradient>
|
||||
<mpath>
|
||||
<pattern>
|
||||
<script>
|
||||
<textPath>
|
||||
<use>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
<a href='https://tomayko.com/blog/2008/wtf-is-an-href-anyway' target='_blank' rel='nofollow'>WTF is a href anyway</a>
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href' target='_blank' rel='nofollow'>MDN</a>
|
||||
@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Img Align Attribute
|
||||
---
|
||||
## Img Align Attribute
|
||||
|
||||
The align attribute of an image specifies where the image should be aligned according to the surrounding element.
|
||||
|
||||
Attribute Values:
|
||||
right - Align image to the right
|
||||
left - Align image to the left
|
||||
top - Align image to the top
|
||||
bottom - Align image to the bottom
|
||||
middle - Align image to the middle
|
||||
|
||||
For example:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Img Align Attribute</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This is an example. <img src="image.png" alt="Image" align="middle"> More text right here
|
||||
<img src="image.png" alt="Image" width="100"/>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
We can also align in right if we want:
|
||||
```html
|
||||
<p>This is another example<img src="image.png" alt="Image" align="right"></p>
|
||||
```
|
||||
**Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.**
|
||||
|
||||
|
||||
#### More Information:
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" target="_blank">MDN article on the img tag and its attributes<a>
|
||||
@ -0,0 +1,40 @@
|
||||
---
|
||||
title: Img Src Attribute
|
||||
---
|
||||
## Img Src Attribute
|
||||
The `<img src>` attribute refers to the source of the image you want to display. The `img` tag will not display an image without the `src` attribute. However, if you set the source to the location of the image, you can display any image.
|
||||
|
||||
There is an image of the freeCodeCamp Logo located at `https://avatars0.githubusercontent.com/u/9892522?v=4&s=400`
|
||||
|
||||
You can set that as the image using the `src` attribute.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Img Src Attribute Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400">
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
The above code displays like this:
|
||||
|
||||
|
||||
|
||||
The `src` attribute is supported by all browsers.
|
||||
|
||||
You can also have a locally hosted file as your image.
|
||||
|
||||
For example, `<img src="images/freeCodeCamp.jpeg>` would work if you had a folder called `images` which had the `freeCodeCamp.jpeg` inside, as long as the 'images' folder was in the same location as the `index.html` file.
|
||||
|
||||
`../files/index.html`
|
||||
|
||||
`..files/images/freeCodeCamp.jpeg`
|
||||
|
||||
|
||||
### More Information:
|
||||
|
||||
- [HTML.com](https://html.com/attributes/img-src/)
|
||||
- [W3 Schools](https://www.w3schools.com/tags/att_img_src.asp)
|
||||
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Img Width Attribute
|
||||
---
|
||||
## Img Width Attribute
|
||||
|
||||
The HTML 'width' attribute refers to the width of an image. The value in the quotations is the amount of pixels.
|
||||
|
||||
For example, if you already have a link to an image set up via the `src` attribute you can add the width attribute like so:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Img Width Attribute</title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="image.png" alt="Image" width="100"/>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
In the code snippet above there is an image tag and the image is set to a width of 100 pixels. `width="100"`
|
||||
|
||||
#### More Information:
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" target="_blank">MDN article on the img tag<a>
|
||||
43
mock-guide/english/html/attributes/index.md
Normal file
43
mock-guide/english/html/attributes/index.md
Normal file
@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Attributes
|
||||
---
|
||||
# HTML Attributes
|
||||
|
||||
HTML elements can have attributes, which contain additional information about the element.
|
||||
|
||||
HTML attributes generally come in name-value pairs, and always go in the opening tag of an element. The attribute name says what type of information you're providing about the element, and the attribute value is the actual information.
|
||||
|
||||
For example, an anchor (`<a>`) element in an HTML document creates links to other pages, or other parts of the page. You use the `href` attribute in the opening `<a>` tag to tell the browser where the link sends a user.
|
||||
|
||||
Here's an example of a link that sends users to freeCodeCamp's home page:
|
||||
|
||||
```html
|
||||
<a href="www.freecodecamp.org">Click here to go to freeCodeCamp!</a>
|
||||
```
|
||||
|
||||
Notice that the attribute name (`href`) and value ("www.freeCodeCamp.org") are separated with an equals sign, and quotes surround the value.
|
||||
|
||||
There are many different HTML attributes, but most of them only work on certain HTML elements. For example, the `href` attribute won't work if it's placed in an opening `<h1>` tag.
|
||||
|
||||
In the example above, the value supplied to the `href` attribute could be any valid link. However, some attributes only have a set of valid options you can use, or values need to be in a specific format. The `lang` attribute tells the browser the default language of the contents in an HTML element. The values for the `lang` attribute should use standard language or country codes, such as `en` for English, or `it` for Italian.
|
||||
|
||||
## Boolean Attributes
|
||||
|
||||
Some HTML attributes don't need a value because they only have one option. These are called Boolean attributes. The presence of the attribute in a tag will apply it to that HTML element. However, it's okay to write out the attribute name and set it equal to the one option of the value. In this case, the value is usually the same as the attribute name.
|
||||
|
||||
For example, the `<input>` element in a form can have a `required` attribute. This requires users to fill out that item before they can submit the form.
|
||||
|
||||
Here are examples that do the same thing:
|
||||
|
||||
```html
|
||||
<input type="text" required >
|
||||
<input type="text" required="required" >
|
||||
```
|
||||
|
||||
## Other Resources
|
||||
|
||||
[HTML links](#)
|
||||
[Href Attribute](#)
|
||||
[Lang Attribute](#)
|
||||
[HTML Input Element](#)
|
||||
[Required Attribute](#)
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: Input Checked Attribute
|
||||
---
|
||||
## Input Checked Attribute
|
||||
|
||||
The checked attribute is a boolean attribute.
|
||||
|
||||
When present, it specifies that an <input> element should be pre-selected (checked) when the page loads.
|
||||
|
||||
The checked attribute can be used with <input type="checkbox"> and <input type="radio">.
|
||||
|
||||
The checked attribute can also be set after the page load, through JavaScript.
|
||||
|
||||
## Take a look at the following example:
|
||||
```html
|
||||
<form action="/action_page.php">
|
||||
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
|
||||
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
```
|
||||
|
||||
In the example above when the web page is loaded by default the first checkbox will come automatically selected due to the checked attribute.
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
title: Input Type Attribute
|
||||
---
|
||||
## Input Type Attribute
|
||||
|
||||
The input type attribute specifies the type of the input the user should put in your form.
|
||||
|
||||
### text
|
||||
One line of a text.
|
||||
```html
|
||||
<form>
|
||||
<label for="login">Login:</label>
|
||||
<input type="text" name="login">
|
||||
</form>
|
||||
```
|
||||
|
||||
### password
|
||||
One line of a text. Text is automatically displayed as a series of dots or asterisks (depends on the browser and OS).
|
||||
```html
|
||||
<form>
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password">
|
||||
</form>
|
||||
```
|
||||
|
||||
### email
|
||||
The HTML checks if the input matches the e-mail address format (something@something).
|
||||
```html
|
||||
<form>
|
||||
<label for="email">E-mail address:</label>
|
||||
<input type="email" name="email">
|
||||
</form>
|
||||
```
|
||||
|
||||
### number
|
||||
Allow only numeric input. You can also specify the min and max value allowed. The example below check that the input is number between 1 and 120.
|
||||
```html
|
||||
<form>
|
||||
<label for="age">Age:</label>
|
||||
<input type="number" name="age" min="1" max="120">
|
||||
</form>
|
||||
```
|
||||
|
||||
### radio
|
||||
Only one option can be selected by the user. The group of radio buttons need to have the same name attribute. You can select automatically one option by using `checked` property (in example below the value Blue is selected).
|
||||
```html
|
||||
<form>
|
||||
<label><input type="radio" name="color" value="red">Red</label>
|
||||
<label><input type="radio" name="color" value="green">Green</label>
|
||||
<label><input type="radio" name="color" value="blue" checked>Blue</label>
|
||||
</form>
|
||||
```
|
||||
### checkbox
|
||||
User can select zero or more options from the group of checkboxes. You can use `checked` property here too for one or more options.
|
||||
```html
|
||||
<form>
|
||||
<label><input type="checkbox" name="lang" value="english">english</label>
|
||||
<label><input type="checkbox" name="lang" value="spanish">spanish</label>
|
||||
<label><input type="checkbox" name="lang" value="french">french</label>
|
||||
</form>
|
||||
```
|
||||
### button
|
||||
The input is displayed as button, the text which should be displayed in the button is in value attribute.
|
||||
```html
|
||||
<form>
|
||||
<input type="button" value="click here">
|
||||
</form>
|
||||
```
|
||||
### submit
|
||||
Displays the submit button. The text which should be displayed in the button is in value attribute. After clicking on the button, the HTML do the validation and if it passes, the form is submitted.
|
||||
```html
|
||||
<form>
|
||||
<input type="submit" value="SUBMIT">
|
||||
</form>
|
||||
```
|
||||
|
||||
### reset
|
||||
Displays the reset button. The text which should be displayed in the button is in value attribute. After clicking on the button, all values from the form are deleted.
|
||||
```html
|
||||
<form>
|
||||
<input type="reset" value="CANCEL">
|
||||
</form>
|
||||
```
|
||||
|
||||
There are more types elements. For more information visit [MSDN]("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input") or [w3schools]("https://www.w3schools.com/Html/html_form_input_types.asp").
|
||||
|
||||
42
mock-guide/english/html/attributes/input/index.md
Normal file
42
mock-guide/english/html/attributes/input/index.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Input
|
||||
---
|
||||
## Input
|
||||
The HTML `<input>` tag is used within a form to declare an input element.
|
||||
It allows the user to enter data.
|
||||
|
||||
## Example
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>HTML input Tag</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form action = "/cgi-bin/hello_get.cgi" method = "get">
|
||||
First name:
|
||||
<input type = "text" name = "first_name" value = "" maxlength = "100" />
|
||||
<br />
|
||||
|
||||
Last name:
|
||||
<input type = "text" name = "last_name" value = "" maxlength = "100" />
|
||||
<input type = "submit" value = "Submit" />
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
In the above example, there are two input fields which ask the user to enter their first and last names according to the labels specified. The submit `<button type="submit">` is another type of input which is used to take the data entered by the user into the form and send it to some other location specified in the code.
|
||||
|
||||
#### More Information:
|
||||
<a href="https://www.youtube.com/watch?v=qJ9ZkxmVf5s">Youtube</a>
|
||||
|
||||
|
||||
## Input
|
||||
The HTML `<input>` tag is of many types to enter data. Some of them are:
|
||||
Type:Text(This is the most common type which is used to create general textboxes)
|
||||
Type:Password(This type is used for creation of password feilds)
|
||||
Type:Hidden(This is a special type of Input that is not shown to the user but it is used for passing information from one page to another while using <a href> tag)
|
||||
25
mock-guide/english/html/attributes/lang/index.md
Normal file
25
mock-guide/english/html/attributes/lang/index.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
title: Lang
|
||||
---
|
||||
## Lang
|
||||
|
||||
In HTML, Lang tag is used to declare the language of the whole or a part of a web page.
|
||||
|
||||
### Examples
|
||||
|
||||
```html
|
||||
<html lang="en">
|
||||
</html>
|
||||
```
|
||||
|
||||
The lang attribute can also be used to specify the language of a specific element:
|
||||
|
||||
```html
|
||||
<p lang="hi">
|
||||
फ्री कोड कैंप
|
||||
</p>
|
||||
```
|
||||
|
||||
In the above example, "hi" denotes the Hindi language. Similarly, you can use "en" for English, "es" for Spanish, "fr" for French and so on.
|
||||
|
||||
Refer to [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for the appropriate two-digit Language code.
|
||||
48
mock-guide/english/html/attributes/links/index.md
Normal file
48
mock-guide/english/html/attributes/links/index.md
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Links
|
||||
---
|
||||
## Links
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/attributes/links/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
Links are used everywhere on the web, with the purpose if directing users to various content items. They're usually indicated by your cursor turning into a hand icon. Links can be text, images or other elements contained within your HTML or webpage.
|
||||
|
||||
You use an ```code <a>``` tag or anchor element to define your link, which also also needs a destination address that you'll access with the ```code href``` attribute. Here's a snippet that makes the phrase 'the freeCodeCamp Guide' a link:
|
||||
|
||||
```html
|
||||
<a href="https://guide.freecodecamp.org">the freeCodeCamp Guide</a>
|
||||
```
|
||||
|
||||
If you'd like your link to open in a new tab, you'll use the ```code target``` attribute along with the ```code "_blank"``` value inside your opening ```code <a>``` tag. That looks like this:
|
||||
|
||||
```html
|
||||
<a href="https://guide.freecodecamp.org" target="_blank">the freeCodeCamp Guide</a>
|
||||
```
|
||||
|
||||
When you need to guide users to a specific part of your webpage, let's assume the very bottom, you first need to assign the hash ```code #``` symbol to the ```code href``` attribute, like this
|
||||
|
||||
```html
|
||||
<a href="#footer>More about us<a/>
|
||||
```
|
||||
|
||||
you'll then need to use an ```code id``` attribute in the element you want to direct your user to - in this case the ```code <footer>``` at the bottom of the webpage.
|
||||
|
||||
```html
|
||||
<footer id="footer">Powered by freeCodeCamp</footer>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
<a href="https://www.w3schools.com/html/html_links.asp" target="_blank">w3sschools - HTML Links</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
---
|
||||
title: Onclick Event Attribute
|
||||
---
|
||||
|
||||
## Onclick Event Attribute
|
||||
|
||||
When the element is clicked fires a event.
|
||||
|
||||
It works just like the *onclick method* or `addEventListener('click')` to the element.
|
||||
|
||||
```html
|
||||
<element onclick="event"></element>
|
||||
```
|
||||
> `event` can be a JavaScript function or you can write raw JavaScript
|
||||
|
||||
### Examples
|
||||
|
||||
Changing the color of a ```<p>``` element when clicked
|
||||
|
||||
```html
|
||||
<p id="text" onclick="redify()">Change my color</p>
|
||||
|
||||
<script>
|
||||
function redify(){
|
||||
let text = document.querySelector('#text');
|
||||
text.style.color = "red";
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Using raw JavaScript onclick attribute:
|
||||
|
||||
```html
|
||||
<button onclick="alert('Hello')">Hello World</button>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
|
||||
- [MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/onclick)
|
||||
@ -0,0 +1,36 @@
|
||||
---
|
||||
title: P Align Attribute
|
||||
---
|
||||
## P Align Attribute
|
||||
|
||||
### Important
|
||||
This attribute is not supported in HTML5. It is recommended to use the [`text-align` CSS property](https://guide.freecodecamp.org/css/text-align).
|
||||
|
||||
To align the text inside a `<p>` tag, this attribute will help.
|
||||
|
||||
### Syntax
|
||||
```html
|
||||
<p align="position">Lorem Ipsum...</p>
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
- **left** - Text aligns to the left
|
||||
- **right** - Text aligns to the right
|
||||
- **center** - Text aligns to the center
|
||||
- **justify** - All lines of text have equal width
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<p align="center">Paragraph align attribute example</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
* [CSS `text-align`](https://guide.freecodecamp.org/css/text-align)
|
||||
* [W3 - HTML 4.01 Specification](https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)
|
||||
* [MDN - CSS Text Align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
|
||||
@ -0,0 +1,35 @@
|
||||
---
|
||||
title: Placeholder Attribute
|
||||
---
|
||||
## Placeholder Attribute | HTML5
|
||||
|
||||
Specifies a short hint that describes the expected value of an `<input>` or `<textarea>` form control.
|
||||
|
||||
The placeholder attribute must not contain carriage returns or line-feeds.
|
||||
|
||||
NOTE: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take.
|
||||
|
||||
### Example
|
||||
|
||||
Input Example
|
||||
|
||||
```html
|
||||
<form>
|
||||
<input type="text" name="fname" placeholder="First Name">
|
||||
<input type="text" name="lname" placeholder="Last Name">
|
||||
</form>
|
||||
```
|
||||
|
||||
Textarea Example
|
||||
|
||||
```html
|
||||
<textarea placeholder="Describe yourself here..."></textarea>
|
||||
```
|
||||
|
||||
### Compatibility
|
||||
|
||||
This is an HTML5 Attribute.
|
||||
|
||||
#### More Information:
|
||||
|
||||
[HTML placeholder Attribute](https://www.w3schools.com/tags/att_placeholder.asp) on w3schools.com
|
||||
51
mock-guide/english/html/attributes/required/index.md
Normal file
51
mock-guide/english/html/attributes/required/index.md
Normal file
@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Required
|
||||
---
|
||||
## Required
|
||||
|
||||
|
||||
The HTML required attribute is used in an input element to make the input field in a form required to submit the form.
|
||||
If the user does not fill in the input field the form will not submit and it will give a message asking the user to fill out the field.
|
||||
The `required` attribute is applicable to `<input>`, `<select>`, `<textarea>`.
|
||||
|
||||
For example:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML Required Attribute</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="/">
|
||||
Text Field: <input type="text" name="textfield" required>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Select Example:
|
||||
```html
|
||||
<form action="/action.php">
|
||||
<select required>
|
||||
<option value="">None</option>
|
||||
<option value="volvo">Volvo</option>
|
||||
<option value="saab">Saab</option>
|
||||
<option value="mercedes">Mercedes</option>
|
||||
<option value="audi">Audi</option>
|
||||
</select>
|
||||
</form>
|
||||
```
|
||||
Text Area Example:
|
||||
```html
|
||||
<form action="/action.php">
|
||||
<textarea name="comment" required></textarea>
|
||||
<input type="submit">
|
||||
</form>
|
||||
```
|
||||
|
||||
Simply add `required` to an input element
|
||||
|
||||
#### More Information:
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" target="_blank">MDN article on the input element</a>
|
||||
|
||||
20
mock-guide/english/html/attributes/role-attribute/index.md
Normal file
20
mock-guide/english/html/attributes/role-attribute/index.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Role Attribute
|
||||
---
|
||||
## Role Attribute
|
||||
|
||||
The `role` attribute, describes the role of an element to programs that can make use of it, such as screen readers or magnifiers.
|
||||
|
||||
Usage Example:
|
||||
```html
|
||||
<a href="#" role="button">Button Link</a>
|
||||
```
|
||||
Screen Readers will read this element as "button" instead of "link".
|
||||
|
||||
There are four categories of roles:
|
||||
- Abstract Roles
|
||||
- Widget Roles
|
||||
- Document Structure Roles
|
||||
- Landmark Roles
|
||||
|
||||
For full list of existing roles, refer to [aria roles documentation](https://www.w3.org/TR/wai-aria/roles).
|
||||
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Script Src Attribute
|
||||
---
|
||||
## Script Src Attribute
|
||||
|
||||
The 'src' attribute in a <script></script> tag is the path to an external file or resource that you want to link to your HTML document.
|
||||
|
||||
For example, if you had your own custom JavaScript file named 'script.js' and wanted to add its functionality to your HTML page, you would add it like this:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Script Src Attribute Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
This would point to a file named 'script.js' that is in the same directory as the .html file. You can also link to other directories by using '..' in the file path.
|
||||
|
||||
```html
|
||||
<script src="../public/js/script.js"></script>
|
||||
```
|
||||
|
||||
This jumps up one directory level then into a 'public' directory then to a 'js' directory and then to the 'script.js' file.
|
||||
|
||||
You can also use the 'src' attribute to link to external .js files hosted by a third party. This is used if you don't want to download a local copy of the file. Just note that if the link changes or network access is down, then the external file you are linking to won't work.
|
||||
|
||||
This example links to a jQuery file.
|
||||
|
||||
```html
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-src' target='_blank' rel='nofollow'>MDN Article on the HTML <script> tag</a>
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Table Border Attribute
|
||||
---
|
||||
## Table Border Attribute
|
||||
|
||||
The `<table>` tag border attribute is a way to order a border to a HTML Table. The supported values are `0` (no border) and `1` (border). The border attribute is not supported in HTML 5 the latest version of HTML. It's recommended to use CSS to add a border to a table in HTML 5.
|
||||
|
||||
#### More Information:
|
||||
* [MDN - HTML Attribute Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)
|
||||
* [MDN - CSS Border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
|
||||
37
mock-guide/english/html/block-and-inline-elements/index.md
Normal file
37
mock-guide/english/html/block-and-inline-elements/index.md
Normal file
@ -0,0 +1,37 @@
|
||||
---
|
||||
title: Block and Inline Elements
|
||||
---
|
||||
## Block and Inline Elements
|
||||
|
||||
Let us understand them using below examples :
|
||||
|
||||
#### Code Sample with Output :
|
||||
|
||||
|
||||
#### Block-Level Element :
|
||||
A Block-level element occupies the entire space of the parent(container) such as `<div>` and `<p>` in the example .
|
||||
|
||||
Note that both `<div>` and `<p>` start from a new line each time, forming a **block-like** structure. Block-level elements begin on new lines.
|
||||
|
||||
|
||||
Common **block-level elements** are `<div>`,`<p>`,`<article>`,`<section>`,`<figure>`,`<footer>` etc.
|
||||
|
||||
|
||||
|
||||
#### Inline Element :
|
||||
Inline as the name says "included as a part of the main text and not as a separate section". Inline elements occupy the space as needed within the space defined by the main element. Unlike block-level elements, they do not begin on new lines.
|
||||
|
||||
Some of the **inline elements** are `<a>`,`<span>`,`<img>`,`<code>`,`<cite>`,`<button>`,`<input>` etc.
|
||||
|
||||
#### Code Sample with Output :
|
||||
|
||||
|
||||
***Note*** : Block-level elements may contain other block-level elements or inline elements. Inline elements **cannot** contain block-level elements.
|
||||
|
||||
#### Changes In HTML5
|
||||
|
||||
While an understanding of block and inline elements is still relevant, you should be aware that these terms were defined in prior versions of the HTML specification. In HTML5, a more complex set of "content categories" replaces block-level and inline elements. Block-level elements are largely placed in the "flow content" category in HTML5, while inline elements correspond to the "phrasing content" catagory. For more information on the new content categories in HTML5, including flow content and phrasing content, refer to the <a href = "https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories">Content categories page on the Mozilla Developer Network.</a>
|
||||
|
||||
#### More Information:
|
||||
Please refer <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Block-level_vs._inline' target='_blank' rel='nofollow'>Mozilla Docs</a>
|
||||
|
||||
59
mock-guide/english/html/comments-in-html/index.md
Normal file
59
mock-guide/english/html/comments-in-html/index.md
Normal file
@ -0,0 +1,59 @@
|
||||
---
|
||||
title: Comments in HTML
|
||||
---
|
||||
## Comments in HTML
|
||||
|
||||
The comment tag is an element used to leave notes, mostly related to the project or the website. This tag is frequently used to explain something in the code or leave some recommendations about the project. The comment tag also makes it easier for the developer to come back and understand the code he's written at a later stage. Comments can also used for commenting out lines of code for debugging purposes.
|
||||
|
||||
It is good practice to add comments to your code, especially when working with a team or at a company.
|
||||
|
||||
Comments are started with `<!--` and ended with `-->`, and can span multiple lines. They can contain code or text, and won't appear on the front-end of the website when a user visits a page. You can view comments through the Inspector Console, or by viewing Page Source.
|
||||
|
||||
### Example
|
||||
```html
|
||||
|
||||
<!-- You can comment out a large number of lines like this.
|
||||
Author: xyz
|
||||
Date: xx/xx/xxxx
|
||||
Purpose: abc
|
||||
-->
|
||||
Read more: https://html.com/tags/comment-tag/#ixzz4vtZHu5uR
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<h1>FreeCodeCamp web</h1>
|
||||
<!-- Leave some space between the h1 and the p in order to understand what are we talking about-->
|
||||
<p>FreeCodeCamp is an open-source project that needs your help</p>
|
||||
<!-- For readability of code use proper indentation -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
## Conditional Comments
|
||||
Conditional Comments defines some HTML tags to be excuted when a certain codition is fullfilled.
|
||||
|
||||
Conditional Comments are only recognised by Internet Explorer Version 5 through to Version 9 (IE5 - IE9).
|
||||
|
||||
### Example
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<!--[if IE 9]>
|
||||
<h1>FreeCodeCamp web</h1>
|
||||
<p>FreeCodeCamp is an open-source project that needs your help</p>
|
||||
<![endif]-->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### IE Conditional Comments
|
||||
|
||||
These comments are only available in Internet Explorer and can be used up to IE9. In the current times, there is a good change you will never see them, but it is good to know about their existance. Conditional Comments are a way to serve a different experience for different client browsers. For example:
|
||||
|
||||
```html
|
||||
<!--[if lt IE 9]> <p>Your browser is lower then IE9</p> <![endif]-->
|
||||
<!--[if IE 9]> <p>Your browser is IE9</p> <![endif]-->
|
||||
<!--[if gt IE 9]> <p>Your browser is greater then IE9</p> <![endif]-->
|
||||
```
|
||||
|
||||
[About conditional comments](https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx)
|
||||
71
mock-guide/english/html/css-classes/index.md
Normal file
71
mock-guide/english/html/css-classes/index.md
Normal file
@ -0,0 +1,71 @@
|
||||
---
|
||||
title: CSS Classes
|
||||
---
|
||||
## CSS Classes
|
||||
|
||||
Classes are an efficient way of grouping HTML elements so that they can share the same styles. CSS (Cascading Style Sheets) classes can be used to arrange and decorate web page elements.
|
||||
|
||||
When writing HTML, you can add classes to an element. Just add the attribute `class="myclass"` to the element. Multiple elements can have the same class, and one element can have multiple classes. You can assign multiple classes to an element by adding all the desired class names separated by a space to the `class` attribute in HTML.
|
||||
|
||||
```html
|
||||
<h1 class="super-man other-class third-class">"Here I come to save the day!"</h1>
|
||||
<p>is a popular catchphrase that <span class="super-man">Super Man</span> often said.</p>
|
||||
```
|
||||
|
||||
You can then style these elements with CSS. Classes are referenced with period (.) before them in CSS, but you should not put periods in your HTML.
|
||||
|
||||
```css
|
||||
.super-man {
|
||||
color: red;
|
||||
background-color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
This code will give s blue background and red text color to all the elements which have the `super-man` class.
|
||||
[View this example on CodePen](https://codepen.io/Tlandis/pen/RLvomV).
|
||||
|
||||
You can also declare more than one class to your element, like:
|
||||
|
||||
```html
|
||||
|
||||
<div class="ironMan alfred">
|
||||
We're going to save you.
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
Then in your css file:
|
||||
|
||||
```css
|
||||
|
||||
.ironMan{
|
||||
color:red;
|
||||
}
|
||||
|
||||
.alfred{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
**Note:** Class names are traditionally all lowercase, with each word in a multi-word class name separated by hyphens (e.g. "super-man").
|
||||
|
||||
You can also combine classes in the same line:
|
||||
```css
|
||||
.superMan .spiderMan {
|
||||
color: red;
|
||||
background-color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
You can see the result of the above code [here](https://codepen.io/Tlandis/pen/RLvomV). Learn how to combine css classes using selectors [here](https://www.w3schools.com/css/css_combinators.asp).
|
||||
|
||||
#### More Information:
|
||||
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
|
||||
- [CSS Class Selector, w3 schools](https://www.w3schools.com/cssref/sel_class.asp)
|
||||
- [HTML Classes, w3 Schools](https://www.w3schools.com/html/html_classes.asp)
|
||||
- [css-tricks](https://css-tricks.com/how-css-selectors-work/)
|
||||
- [How to Code in HTML5 and CSS3](http://howtocodeinhtml.com/chapter7.html)
|
||||
- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class)
|
||||
67
mock-guide/english/html/doctype-declaration/index.md
Normal file
67
mock-guide/english/html/doctype-declaration/index.md
Normal file
@ -0,0 +1,67 @@
|
||||
---
|
||||
title: Doctype Declaration
|
||||
---
|
||||
## Doctype Declaration
|
||||
|
||||
The HTML document type declaration, also known as `DOCTYPE`, is the first line of code required in every HTML or XHTML document. The `DOCTYPE` declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that the web page is parsed the same way by different web browsers.
|
||||
|
||||
In HTML 4.01, the `DOCTYPE` declaration refers to a document type definition (DTD). A DTD defines the structure and the legal elements of an XML document. Because HTML 4.01 was based on the Standard Generalised Markup Language (SGML), referring to a DTD in the `DOCTYPE` declaration was necessary.
|
||||
|
||||
Additionally, doctypes for HTML 4.01 required the declaration of either `strict`, `transitional`, or `frameset` DTD, each with a different use case as outlined below.
|
||||
|
||||
- **Strict DTD**: Used for web pages that *exclude* attributes and elements that W3C expects to phase out as CSS support grows
|
||||
- **Transitional DTD**: Used for web pages that *include* attributes and elements that W3C expects to phase out as CSS support grows
|
||||
- **Frameset DTD**: Used for web pages with frames
|
||||
|
||||
In contrast, the declaration of HTML5 `DOCTYPE` is much simpler: it no longer requires a reference to DTDs as it is no longer based on SGML. See the examples below for a comparison between HTML 4.01 and HTML5 `DOCTYPE`s.
|
||||
|
||||
### Examples
|
||||
|
||||
Doctype syntax for HTML5 and beyond:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
```
|
||||
|
||||
Doctype syntax for strict HTML 4.01:
|
||||
```html
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
```
|
||||
|
||||
Doctype syntax for transitional HTML 4.01:
|
||||
```html
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
```
|
||||
|
||||
|
||||
Doctype syntax for frameset HTML 4.01:
|
||||
```html
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
|
||||
```
|
||||
|
||||
## History
|
||||
|
||||
During the formative years of HTML, web standards were not agreed upon yet. Browser vendors would build new features in whatever way they wanted. There was little concern for competing browsers. The result was that web developers had to choose a browser to develop their sites for. This meant that sites would not render well in unsupported browsers. This situation could not continue.
|
||||
|
||||
The W3C (World Wide Web Consortium) wrote a set of web standards to handle this situation. All browser vendors and web developers should adhere to these standards. This would ensure that websites would render well across browsers. The changes required by the standards were quite different from some existing practices. Adhering to them would break existing non standards compliant websites.
|
||||
|
||||
To handle this problem, vendors began programming rendering modes in to their browsers. Web developers would need to add a doctype declaration to the top of an HTML document. The doctype declaration would tell the browser which rendering mode to use for that document. Three separate rendering modes were generally available across browsers. **Full standards mode** renders pages according to the W3C web standards. **Quirks mode** renders pages in a non standards compliant way. **Almost standards mode** is close to full standards mode, but features support for a small number of quirks.
|
||||
|
||||
In the modern age of HTML5, web standards are fully implemented in all major browsers. Web sites are generally developed in a standards compliant way. Because of this the HTML5 doctype declaration only exists to tell the browser to render the document in full standards mode.
|
||||
|
||||
## Usage
|
||||
|
||||
The Doctype Declaration must be the very first line of code in an HTML document, aside from comments, which can go before it if needed. For modern HTML5 documents the doctype declaration should be as follows:
|
||||
|
||||
`<!DOCTYPE html>`
|
||||
|
||||
#### More Information:
|
||||
|
||||
While no longer in general use, there are several other doctype declaration types from previous versions of HTML. There are also specific versions for XML documents. To read more about these, and to see code examples for each, take a look at the [Wikipedia article](https://en.wikipedia.org/wiki/Document_type_declaration).
|
||||
|
||||
[A note from the W3](https://www.w3.org/QA/Tips/Doctype)
|
||||
|
||||
[MDN Glossary entry](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
|
||||
|
||||
[W3Schools](https://www.w3schools.com/tags/tag_doctype.asp)
|
||||
|
||||
[A quick explanation of "Quirks Mode" and "Standards Mode"](https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode)
|
||||
46
mock-guide/english/html/elements/a-tag/index.md
Normal file
46
mock-guide/english/html/elements/a-tag/index.md
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: A Tag
|
||||
---
|
||||
## A Tag
|
||||
|
||||
The `<a>` tag or _anchor_ element creates a hyperlink to another page or file. In order to link to a different page or file the `<a>` tag must also contain a `href` attribute, which indicates the link's destination.
|
||||
|
||||
The text between the opening and closing `<a>` tags becomes the link.
|
||||
|
||||
By default, a linked page is displayed in the current browser window unless another target is specified.
|
||||
|
||||
#### Example:
|
||||
|
||||
```html
|
||||
<a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
An image can also be turned into a link by enclosing the `<img>` tag in an `<a>` tag.
|
||||
|
||||
#### Example:
|
||||
|
||||
```html
|
||||
<a href= "https://guide.freecodecamp.org/"><img src="logo.svg"></a>
|
||||
```
|
||||
|
||||
It is also possible to determine the target of the `<a>` tag. This is done using the `target` attribute. The `target` attribute has the following values available `_blank|_self|_parent|_top|framename`.
|
||||
|
||||
`_blank`: Opens the link in a new tab or a new window depending on the user's preferences.
|
||||
`_self`: Opens the link in same frame (default behaviour).
|
||||
`_parent`: Opens the link in the parent frame, for example when the user clicks a link in an iframe.
|
||||
`_top`: Opens the link in the full body of the window.
|
||||
`framename`: Opens the link in the specified frame.
|
||||
|
||||
#### Example:
|
||||
|
||||
```html
|
||||
<a href= "https://guide.freecodecamp.org/" target="_blank">freeCodeCamp</a>
|
||||
```
|
||||
<a href= "https://guide.freecodecamp.org/" target="_blank">freeCodeCamp</a><br>
|
||||
This link is created in the same way as the example code block suggests. Click it to see how it works.
|
||||
#### More Information:
|
||||
|
||||
- <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a' target='_blank' rel='nofollow'>The HTML <a> element: MDN</a>
|
||||
- <a href='https://www.w3schools.com/tags/tag_a.asp' target='_blank' rel='nofollow'>A tag: w3schools</a>
|
||||
- <a href='http://htmlreference.io/element/a/' target='_blank' rel='nofollow'>A tag: htmlreference.io</a>
|
||||
|
||||
16
mock-guide/english/html/elements/abbr-tag/index.md
Normal file
16
mock-guide/english/html/elements/abbr-tag/index.md
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Abbr Tag
|
||||
---
|
||||
## Abbr Tag
|
||||
|
||||
The `<abbr>` tag stands for 'abbreviation'. It can take `title` attribute, to explain the abbreviation.
|
||||
|
||||
Example usage:
|
||||
```html
|
||||
<abbr title="Free Code Camp">FCC</abbr>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
|
||||
- <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr' target='_blank' rel='nofollow'>The HTML <abbr> element: MDN</a>
|
||||
- <a href='https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations' target='_blank' rel='nofollow'>Advanced Text Formatting: Abbreviations</a>
|
||||
33
mock-guide/english/html/elements/address-tag/index.md
Normal file
33
mock-guide/english/html/elements/address-tag/index.md
Normal file
@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Address Tag
|
||||
---
|
||||
## Address Tag
|
||||
|
||||
Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
|
||||
|
||||
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
|
||||
|
||||
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
|
||||
|
||||
#### Usage
|
||||
|
||||
```html
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
Check me out
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
```
|
||||
15
mock-guide/english/html/elements/area-tag/index.md
Normal file
15
mock-guide/english/html/elements/area-tag/index.md
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Area Tag
|
||||
---
|
||||
## Area Tag
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/area-tag/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
|
||||
|
||||
24
mock-guide/english/html/elements/article-tag/index.md
Normal file
24
mock-guide/english/html/elements/article-tag/index.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Article Tag
|
||||
---
|
||||
## Article Tag
|
||||
|
||||
The `<article>` tag represents self-contained content in a document. The article should be independent from the rest of page, intended to be distributable and reusable.
|
||||
|
||||
The `<article>` tag was added in HTML5 and is supported by major browsers.
|
||||
|
||||
### Example
|
||||
Here is an example of how to use article tag in webpage:
|
||||
|
||||
```html
|
||||
<article>
|
||||
<h1>FreeCodeCamp</h1>
|
||||
<p>
|
||||
Learn to code with a community of programmers and contribute to open source projects.
|
||||
</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
|
||||
[MDN](https://developer.mozilla.org/tr/docs/Web/HTML/Element/article)
|
||||
13
mock-guide/english/html/elements/aside-tag/index.md
Normal file
13
mock-guide/english/html/elements/aside-tag/index.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Aside Tag
|
||||
---
|
||||
## Aside Tag
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/aside-tag/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
64
mock-guide/english/html/elements/audio-tag/index.md
Normal file
64
mock-guide/english/html/elements/audio-tag/index.md
Normal file
@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Audio Tag
|
||||
---
|
||||
## Audio Tag
|
||||
|
||||
The <***audio***> tag defines an audio element, that can be used to add audio media resource to an HTML document that will be played by native support for audio playback built into the browser rather than a browser plugin.
|
||||
|
||||
The audio tag currently supports three file formats OGG, MP3 and WAV which can be added to your html as follows.
|
||||
##### Adding an OGG
|
||||
```
|
||||
<audio controls>
|
||||
<source src="file.ogg" type="audio/ogg">
|
||||
</audio>
|
||||
```
|
||||
##### Adding an MP3
|
||||
```
|
||||
<audio controls>
|
||||
<source src="file.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
```
|
||||
|
||||
##### Adding a WAV
|
||||
```
|
||||
<audio controls>
|
||||
<source src="file.wav" type="audio/wav">
|
||||
</audio>
|
||||
```
|
||||
|
||||
|
||||
It may contain one or more audio sources, represented using the src attribute or the source element.
|
||||
|
||||
##### Adding Multiple Audio Files
|
||||
```
|
||||
<audio controls>
|
||||
<source src="file-1.wav" type="audio/wav">
|
||||
<source src="file-2.ogg" type="audio/ogg">
|
||||
<source src="file-3.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
```
|
||||
#### Browser Support for different filetypes is as follows
|
||||
|
||||
|
||||
| Browser | Mp3 | Wav | Ogg|
|
||||
|:-------:|:---:|:---:|:---:|
|
||||
|Internet Explorer| Yes | No | No |
|
||||
|Google Chrome| Yes | Yes | Yes |
|
||||
|Mozilla Firefox | Yes | Yes | Yes |
|
||||
|Safari| Yes | Yes | No|
|
||||
|Opera | Yes | Yes | Yes
|
||||
|
||||
### Supported Attributes
|
||||
|
||||
| Attribute | Value | Description |
|
||||
|:-------:|:---:|:---:|
|
||||
|autoplay|autoplay|The audio will start playing as soon as it is ready|
|
||||
|controls|controls|audio will be displayed (such as a play/pause button etc)|
|
||||
|loop|loop|audio will start over again, every time it is finished|
|
||||
|muted|muted|audio output will be muted|
|
||||
|src|URL|Specifies the URL of the audio file|
|
||||
|
||||
#### More Information:
|
||||
[https://www.w3schools.com/tags/tag_audio.asp](https://www.w3schools.com/tags/tag_audio.asp)
|
||||
[https://html.com/tags/audio/](https://html.com/tags/audio/)
|
||||
[https://html.com/tags/audio/#ixzz5Sg4QbtH8](https://html.com/tags/audio/#ixzz5Sg4QbtH8)
|
||||
24
mock-guide/english/html/elements/b-tag/index.md
Normal file
24
mock-guide/english/html/elements/b-tag/index.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: B Tag
|
||||
---
|
||||
|
||||
## B Tag
|
||||
|
||||
Formerly used to bold text the `<b>` tag is now known as the 'Bring Attention To element' tag. It should be used only to draw attention to the contents of the element.
|
||||
|
||||
Most browsers will display text in bold type but you should not use it for this purpose, instead use CSS `font-weight` property for purely visual display reasons. If you wish to signify the elements content are of special importance use the `<strong>` tag instead.
|
||||
|
||||
An appropriate use case is drawing attention to keywords in a text.
|
||||
|
||||
### Example:
|
||||
```html
|
||||
Examples of extinct <b>fauna</b>include ...
|
||||
```
|
||||
This would appear as:
|
||||
|
||||
Examples of extinct **fauna** include ...
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
|
||||
1. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b)
|
||||
13
mock-guide/english/html/elements/base-tag/index.md
Normal file
13
mock-guide/english/html/elements/base-tag/index.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Base Tag
|
||||
---
|
||||
## Base Tag
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/base-tag/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
24
mock-guide/english/html/elements/blockquote-tag/index.md
Normal file
24
mock-guide/english/html/elements/blockquote-tag/index.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Blockquote Tag
|
||||
---
|
||||
## Blockquote Tag
|
||||
|
||||
### Purpose
|
||||
The HTML `<blockquote>` element breaks out a quote from the surrounding content. This allows the reader to clearly see the quotation as material attributed to it's original author.
|
||||
|
||||
### Usage
|
||||
Just like the "H" tags send signals to a reader that the informaiton is important, the blockquote alerts a reader that the information they're reading is from an outside source. The `<blockquote>` tag can include A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the `<cite>` element.
|
||||
|
||||
### Example
|
||||
```html
|
||||
<blockquote cite="https://www.cnet.com/news/tim-cook-maintains-steve-jobs-beatles-business-model/">
|
||||
“My model for business is The Beatles. They were four guys who kept each other’s kind of negative tendencies in check.
|
||||
They balanced each other and the total was greater than the sum of the parts.
|
||||
That’s how I see business: great things in business are never done by one person, they’re done by a team of people.”
|
||||
</blockquote>
|
||||
<cite>Steve Jobs</cite>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
|
||||
[blockquote MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)
|
||||
25
mock-guide/english/html/elements/body-tag/index.md
Normal file
25
mock-guide/english/html/elements/body-tag/index.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
title: Body Tag
|
||||
---
|
||||
|
||||
## Body Tag
|
||||
|
||||
The `<body>` tag contains the content for a webpage. Along with `<head>`, it is one of the two required elements of an HTML document. `<body>` must be the second child of an `<html>` element. There can only be one `<body>` element on a page.
|
||||
|
||||
The `<body>` element should contain all of a page's content, including all display elements. The `<body>` element can also contain `<script>` tags, generally scripts that must be run after a page's content has been loaded.
|
||||
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Titles Belong in the Head</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This paragraph is content. It goes in the body!</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
#### More Information:
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body' target='_blank' rel='nofollow'>MDN</a>
|
||||
26
mock-guide/english/html/elements/br-tag/index.md
Normal file
26
mock-guide/english/html/elements/br-tag/index.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Br Tag
|
||||
---
|
||||
## Br Tag
|
||||
|
||||
The `<br>` tag produces a line break in a text. This is useful for poems and addresses.
|
||||
|
||||
### Example
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
Mozilla Foundation<br>
|
||||
1981 Landings Drive<br>
|
||||
Building K<br>
|
||||
Mountain View, CA 94043-0801<br>
|
||||
USA
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
|
||||
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)
|
||||
|
||||
[br tag: w3schools](https://www.w3schools.com/tags/tag_br.asp)
|
||||
69
mock-guide/english/html/elements/button-tag/index.md
Normal file
69
mock-guide/english/html/elements/button-tag/index.md
Normal file
@ -0,0 +1,69 @@
|
||||
---
|
||||
title: Button Tag
|
||||
---
|
||||
## Button Tag
|
||||
|
||||
A `<button>` tag specifies a clickable button on the HTML document.
|
||||
Between the `<button>` tags, you can put content, like text or images. This is different from the button created using `<input>` tag, which only takes text as content.
|
||||
|
||||
**Syntax:**
|
||||
|
||||
`<button type="submit">Click Here!</button>`
|
||||
|
||||
**Atributes:**
|
||||
|
||||
Following are the associated attribute supported by HTML 4:
|
||||
|
||||
| **Attributes** | **Value** | **What it does** |
|
||||
|---|---|---|
|
||||
| disabled | disabled | Disables the button |
|
||||
| name | name | Specifies a name for the button. The name is for referencing the button in HTML form, JS, etc. |
|
||||
| type | button or reset or submit | Sets the type of the button. A button with `button` type is a simple clickable button, with `submit` type it submits form-data, and with `reset` type it resets form-data. |
|
||||
| value | text | Sets an initial value for the button. This value is sent along with the form-data. |
|
||||
|
||||
HTML 5 supports the following extra attributes:
|
||||
|
||||
| **Attributes** | **Value** | **What it does** |
|
||||
|---|---|---|
|
||||
| autofocus | autofocus | Should the button automatically get focus when the page loads. For example, see Google. As the page gets loaded completely, the text-box get focus automatically. |
|
||||
| form | form_id | Specifies one or more forms the button belongs to. |
|
||||
| formaction | URL | Specifies where to send the form-data once the `submit` type button is pressed. |
|
||||
| formmethod | get or post | Specifies how to send the form-data. Only for `submit` type button. |
|
||||
| formtarget | `_blank` or `_self` or `_parent` or `_top` or framename | Specifies the location where the result is to be displayed after submitting form-data. |
|
||||
|
||||
**Example:**
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Button Tag example</title>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
First name:<br>
|
||||
<input type="text" name="firstname" value="Free">
|
||||
<br>
|
||||
Last name:<br>
|
||||
<input type="text" name="lastname" value="CodeCamp">
|
||||
<br><br>
|
||||
<input type="submit" value="Submit" formtarget="_self">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
All major browsers support the `<button>` tag. `<button>` tag also supports event attributes in HTML.
|
||||
**Note:** Different browsers may send different values if you use `<button>` element. It is advised to either specify the button value or use the `<input>` tag to create button in an HTML form.
|
||||
|
||||
**Other resources:**
|
||||
* Other attributes:
|
||||
|
||||
| **Attributes** | **Link** |
|
||||
|---|---|
|
||||
| formenctype | https://www.w3schools.com/TAgs/att_button_formenctype.asp |
|
||||
| formnovalidate | https://www.w3schools.com/TAgs/att_button_formnovalidate.asp |
|
||||
|
||||
* `<input>` tag: https://www.w3schools.com/TAgs/tag_input.asp
|
||||
* Event Attributes: https://www.w3schools.com/TAgs/ref_eventattributes.asp
|
||||
* `formtarget` attribute values: https://www.w3schools.com/TAgs/att_button_formtarget.asp
|
||||
* HTML Form:
|
||||
15
mock-guide/english/html/elements/canvas-tag/index.md
Normal file
15
mock-guide/english/html/elements/canvas-tag/index.md
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Canvas Tag
|
||||
---
|
||||
## Canvas Tag
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/canvas-tag/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
|
||||
|
||||
10
mock-guide/english/html/elements/center-tag/index.md
Normal file
10
mock-guide/english/html/elements/center-tag/index.md
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Center Tag
|
||||
---
|
||||
## Center Tag
|
||||
|
||||
In HTML the `<center>` tag is used to center text on a page. You can write a `<center>` tag as `<center>My Text Here</center>` The feature is obsolute not recommended to use. The `<center>` tag was deprecated in HTML 4, the feature could be removed from web browsers at anytime. It is recommended to use CSS `text-align` to center text.
|
||||
|
||||
#### More Information:
|
||||
* [MDN - HTML Center Tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)
|
||||
* [MDN - CSS Text Align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user