Git log
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.
CSS Applying CSS
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>
Javascript Storage
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”:
- When a user visits a web page, his/her name can be stored in a cookie.
- Next time the user visits the page, the cookie “remembers” his/her name.
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();
HTML Head Section
The <head> element contains metadata or information about the HTML page. It is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
Title tag
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser’s title bar or in the page’s tab. The <title> tag is required in HTML documents!
The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
The <title> element:
- defines a title in the browser toolbar
- provides a title for the page when it is added to favorites
- displays a title for the page in search-engine results
Here are some tips for creating good titles:
- Go for a longer, descriptive title (avoid one- or two-word titles)
- Search engines will display about 50-60 characters of the title, so try not to have titles longer than that
- Do not use just a list of words as the title (this may reduce the page’s position in search results)
So, try to make the title as accurate and meaningful as possible!
Note: You can NOT have more than one <title> element in an HTML document.
<title>lovemesomecoding</title>
Style tag
The <style> tag is used to define style information (CSS) for a document. Inside the <style> element you specify how HTML elements should render in a browser. Note that when a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used (see example below)!
<style>
p {color:black;}
</style>
Meta tag
The <meta> tag defines metadata about an HTML document. Metadata is data or information about data in your web page. <meta> tags are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. There is a method to let web designers take control over the viewport (the user’s visible area of a web page), through the <meta> tag. name specifies the type of meta element it is; what type of information it contains. content specifies the actual meta content.
<!-- charset --> <meta charset="UTF-8"> <!-- application-name, author, description, generator, keywords, viewport --> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="application-name" content="lovemesomecoding"> <meta name="description" content="Free Web tutorials"> <meta name="author" content="John Doe"> <meta name="generator" content="folau"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- http-equiv="content-security-policy|content-type|default-style|refresh" --> <meta http-equiv="refresh" content="30">
Link tag
The <link> tag defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets. The <link> element is an empty element, it contains attributes only.
<link rel="stylesheet" href="style.css">
Script tag
The <script> tag is used to embed a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Note: There are several ways an external script can be executed:
- If async=”async”: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
- If async is not present and defer=”defer”: The script is executed when the page has finished parsing
- If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
<script type="text/javascript"> var username = 'folau'; </script>
NoScript tag
The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn’t support script. The <noscript> element can be used in both <head> and <body>. When used inside <head>, the <noscript> element could only contain <link>, <style>, and <meta> elements.
<noscript>Your browser does not support JavaScript!</noscript>
Base tag
The <base> tag specifies the base URL and/or target for all relative URLs in a document. The <base> tag must have either an href or a target attribute present, or both. There can only be one single <base> element in a document, and it must be inside the <head> element.
<base href="https://lovemesomecoding.com/" target="_blank">
HTML DOM
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM is a standard object model and programming interface for HTML. It defines:
- The HTML elements as objects
- The properties of all HTML elements
- The methods to access all HTML elements
- The events for all HTML elements
In other words:The HTML DOM is a standard for how to get, change, add, or delete HTML elements.