A DOCTYPE is an instruction to the web browser about the version of HTML in which the web page is written. A DOCTYPE declaration appears at the top of a web page before all other elements. According to the HTML specification or standards, every HTML document requires a valid document type declaration to insure that your web pages are displayed the way they are intended to be displayed.
The DOCTYPE for HTML5
<!DOCTYPE html>
Doctypes for earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD, but they are obsolete now.
With HTML5 this is no longer the case and the doctype declaration is only needed to enable the standard mode for documents written using the HTML syntax.
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
You can use the following markup as a template to create a new HTML5 document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Create auth server and resource server
Create auth client that consumes resource from a third party like Google or Github
Shows commit logs.
git log is intended for creating release announcements. It groups each commit by author and displays the first line of each commit message. This is an easy way to see who’s been working on what.
git log
Show insertions and deletions to each file
The --stat option displays the number of insertions and deletions to each file altered by each commit (note that modifying a line is represented as 1 insertion and 1 deletion). This is useful when you want a brief summary of the changes introduced by each commit.
git log --stat
Show actual changes
If you want to see the actual changes introduced by each commit, you can pass the -p option to git log. This command is very useful due to the fact that it shows details of what and when things changed over time.
git log -p
Show history
The --graph option draws an ASCII graph representing the branch structure of the commit history. This is commonly used in conjunction with the --oneline and --decorate commands to make it easier to see which commit belongs to which branch.
git log --graph --oneline --decorate
Show certain number of commits
git log -n // show last 5 commits git log -5
Show commits by author
The --author displays commits per specific author
git log --author="folaulau"
Get commit differences
This command is particularly useful when you use branch references as the parameters. It’s a simple way to show the differences between 2 branches.
git log master..another-branch // show commits that in feature but not in master git log master..feature
Note that if you switch the order of the range (feature..master), you will get all of the commits in master, but not in feature. If git log outputs commits for both versions, this tells you that your history has diverged.
There are three methods of applying CSS to a document.
Inline
Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute.
Avoid using CSS in this way, when possible. It is the opposite of a best practice. First, it is the least efficient implementation of CSS for maintenance. One styling change might require multiple edits within a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and content, making everything more difficult to read and understand. Separating code and content makes maintenance easier for all who work on the website.
<div class="row">
<div class="col-3" style="color: red">
I am inline styled
</div>
</div>
Internal
An internal stylesheet resides within an HTML document. To create an internal stylesheet, you place CSS inside a <style> element contained inside the HTML <head>.
In some circumstances, internal stylesheets can be useful. For example, perhaps you're working with a content management system where you are blocked from modifying external CSS files. But for sites with more than one page, an internal stylesheet becomes a less efficient way of working. To apply uniform CSS styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. The efficiency penalty carries over to site maintenance too. With CSS in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages.
<style>
p {
color: green;
}
a {
color: blue;
}
</style>
<!-- Internal -->
<div class="row">
<div class="col-3">
<h4>Internal CSS</h4>
</div>
</div>
<div class="row">
<div class="col-3">
<p>I am internal styled</p>
</div>
</div>
External
An external stylesheet contains CSS in a separate file with a .css extension. This is the most common and useful method of bringing CSS to a document. You can link a single CSS file to multiple web pages, styling all of them with the same CSS stylesheet.
style.css
.note{
color: blue;
}
In the head section, include the external style sheet
<link rel="stylesheet" href="style.css">
<!-- External -->
<div class="row">
<div class="col-3">
<h4>External CSS</h4>
</div>
</div>
<div class="row">
<div class="col-3">
<p class="note">I am external styled</p>
</div>
</div>
Cookies
An http cookie AKA web cookie, AKA browser cookie is a small piece of data stored in a text file that a server sends to the user’s web browser. The browser may store it and send it back with later requests to the same server. Typically, it’s used to tell if two requests came from the same browser — keeping a user logged-in.
When a web server sends a web page to a browser, the connection is shut down, and the server forgets everything about the browser. Cookies were invented to solve the problem “how to remember information about the user”:
Cookies are saved in name-value pairs like: username=folauk
When the browser requests another web page from the server, cookies belonging to that page are added to the request. This way the server gets the necessary data to “remember” information about users.
You can use javascript to read cookies this way
document.cookie – gets all the cookies
// function to read a cookie from browser
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
LocalStorage
The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, next week, or next year.
// save data to localStorage
localStorage.setItem("key", "value");
//example saving data to localStorage
localStorage.setItem("lastName", "Kaveinga");
// retrieve data to localStorage
var value = localStorage.getItem("key");
// example of retrieving data from localStorage
var lastname = localStorage.getItem("lastName");
// remove data from localStorage
localStorage.removeItem("key");
// example of removing data from localStorage
localStorage.removeItem("lastName");l
// remove all localStorage content for a perticular domain
localStorage.clear();
SessionStorage
The sessionStorage object stores data for only one session. The data is deleted when the browser tab is closed.
// save data to sessionStorage
sessionStorage.setItem("key", "value");
//example saving data to sessionStorage
sessionStorage.setItem("lastName", "Kaveinga");
// retrieve data from sessionStorage
var value = sessionStorage.getItem("key");
// example of retrieving data from sessionStorage
var lastname = sessionStorage.getItem("lastName");
// remove data from sessionStorage
sessionStorage.removeItem("key");
// example of removing data from sessionStorage
sessionStorage.removeItem("lastName");l
// remove all sessionStorage content for a perticular domain
sessionStorage.clear();