Skip to content

Instantly share code, notes, and snippets.

@Jak12-3

Jak12-3/HTML5.html

Created December 11, 2024 12:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Jak12-3/cb7d2c5fb455cbe4ea0ba87971fc6e19 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Jak12-3/cb7d2c5fb455cbe4ea0ba87971fc6e19 to your computer and use it in GitHub Desktop.
Download ZIP
Cheatsheet
Raw
css3.css
/****************************
* CSS3 CHEATSHEET - Beginner Friendly
* Learn more: https://web.dev/learn/css/
* Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS
* PDF for Better Readability: https://github.com/LeCoupa/awesome-cheatsheets/files/8880372/CSS_Cheatsheet.pdf
* Brief overview about CSS: http://jonkinney.com/assets/21/advanced_css.pdf
* (Advance) Know more about each topic in-depth: https://www.ciwcertified.com/resources/documents/sample-chapter/CCT02CDHTCSCK1405.PDF
*
*
*
* Table of contents
* -------------------
* 01 | Font
* 02 | Text
* 03 | Background
* 04 | Border
* 05 | Box Model
* 06 | Colors
* 07 | Template Layout
* 08 | Table
* 09 | Columns
* 10 | List & Markers
* 11 | Animations
* 12 | Transitions
* 13 | CSS Flexbox (Important)
* - Parent Properties (flex container)
* - Child Properties (flex items)
* 14 | CSS Grid (Useful in Complex Web Designs)
* - Parent Properties (Grid container)
* - Child Properties (Grid items)
* 15 | Media Queries
*
*
*
*****************************/
/***************************
------------ 01: Font -----------
There are many properties related to the font, such as the face, weight, style, etc. These
properties allow you to change the style or complete look of your text.
*******************************/
/** Body Selector which applies properties to whole body <body></body> */
body {
/* Font-Family */
font-family: "Segoe UI", Tahoma, sans-serif; /* You can declare multiple fonts. */
/*if first font doesn't exists other ones will be declared serial wise */
/* Font-Style */
font-style: italic;
/* Font-Variant */
font-variant: small-caps;
/* Font-Weight */
font-weight: bold;
/* Font-Size */
font-size: larger;
/* Font */
font: style variant weight size family;
}
/***************************
------------ 02: Text -----------
Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the
document.
*******************************/
/* Applies to all tags with class 'container' ex: <div class="container"></div> */
.container {
/* Text-Align */
text-align: justify;
/* Letter-Spacing */
letter-spacing: 0.15em;
/* Text-Decoration */
text-decoration: underline;
/* Word-Spacing */
word-spacing: 0.25em;
/* Text-Transform */
text-transform: uppercase;
/* Text-Indent */
text-indent: 0.5cm;
/* Line-Height */
line-height: normal;
}
/***************************
------------ 03: Background -----------
As the name suggests, these properties are related to background, i.e., you can change the color,
image, position, size, etc., of the document.
*******************************/
/* Applies to all tags with id 'wrapper' ex: <div id="wrapper"></div> */
#wrapper {
/* Background-Image */
background-image: url("Path");
/* Background-Position */
background-position: right top;
/* Background-Size */
background-size: cover;
/* Background-Repeat */
background-repeat: no-repeat;
/* Background-Attachment */
background-attachment: scroll;
/* Background-Color */
background-color: fuchsia;
/* Background */
background: color image repeat attachment position;
}
/***************************
------------ 04: Border -----------
Border properties are used to change the style, radius, color, etc., of buttons or other items of
the document.
*******************************/
/* You can also select multiple items */
div,
.container {
/* Border-Width */
border-width: 5px;
/* Border-Style */
border-style: solid;
/* Border-Color */
border-color: aqua;
/* Border-Radius */
border-radius: 15px;
/* Border */
border: width style color;
}
/***************************
------------ 05: Box Model -----------
In laymen's terms, the CSS box model is a container that wraps around every HTML element. It
consists of margins, borders, padding, and the actual content.
It is used to create the design and layout of web pages.
*******************************/
.wrapper {
/* Float */
float: none;
/* Clear */
clear: both;
/* Display */
display: block;
/* Height */
height: fit-content;
/* Width */
width: auto;
/* Margin */
margin: top right bottom left;
/* Padding */
padding: top right bottom left;
/* Overflow */
overflow: hidden;
/* Visibility */
visibility: visible;
/* z-index */
z-index: 1;
/* position */
position: static | relative | fixed | absolute | sticky;
}
/***************************
------------ 06: Colors -----------
With the help of the color property, one can give color to text, shape, or any other object.
*******************************/
p,
span,
.text {
/* Color - 1 */
color: cornsilk;
/* Color - 2 */
color: #fff8dc;
/* Color - 3 */
color: rgba(255, 248, 220, 1);
/* Color - 4 */
color: hsl(48, 100%, 93%);
/* Opacity */
opacity: 1;
}
/***************************
------------ 07: Template Layout -----------
Specifies the visual look of the content inside a template
*******************************/
/* '*' selects all elements on a page */
* {
/* Box-Align */
box-align: start;
/* Box-Direction */
box-direction: normal;
/* Box-Flex */
box-flex: normal;
/* Box-Flex-Group */
box-flex-group: 2;
/* Box-Orient */
box-orient: inline;
/* Box-Pack */
box-pack: justify;
/* Box-Sizing */
box-sizing: margin-box;
/* max-width */
max-width: 800px;
/* min-width */
min-width: 500px;
/* max-height */
max-height: 100px;
/* min-height */
min-height: 80px;
}
/***************************
------------ 08: Table -----------
Table properties are used to give style to the tables in the document. You can change many
things like border spacing, table layout, caption, etc.
*******************************/
table {
/* Border-Collapse */
border-collapse: separate;
/* Empty-Cells */
empty-cells: show;
/* Border-Spacing */
border-spacing: 2px;
/* Table-Layout */
table-layout: auto;
/* Caption-Side */
caption-side: bottom;
}
/***************************
------------ 09: Columns -----------
These properties are used explicitly with columns of the tables, and they are used to give the
table an incredible look.
*******************************/
/* Applies to <table class="nice-table"></table> */
/* Not <table></table> */
table.nice-table {
/* Column-Count */
column-count: 10;
/* Column-Gap */
column-gap: 5px;
/* Column-rule-width */
column-rule-width: medium;
/* Column-rule-style */
column-rule-style: dotted;
/* Column-rule-color */
column-rule-color: black;
/* Column-width */
column-width: 10px;
/* Column-span */
column-span: all;
}
/***************************
------ 10: List & Markers -------
List and marker properties are used to customize lists in the document.
*******************************/
li,
ul,
ol {
/* List-style-type */
list-style-type: square;
/* List-style-position */
list-style-position: 20px;
/* List-style-image */
list-style-image: url("image.gif");
/* Marker-offset */
marker-offset: auto;
}
/***************************
------------ 11: Animations -----------
CSS animations allow one to animate transitions or other media files on the web page.
*******************************/
svg,
.loader {
/* Animation-name */
animation-name: myanimation;
/* Animation-duration */
animation-duration: 10s;
/* Animation-timing-function */
animation-timing-function: ease;
/* Animation-delay */
animation-delay: 5ms;
/* Animation-iteration-count */
animation-iteration-count: 3;
/* Animation-direction */
animation-direction: normal;
/* Animation-play-state */
animation-play-state: running;
/* Animation-fill-mode */
animation-fill-mode: both;
}
/***************************
------------ 12: Transitions -----------
Transitions let you define the transition between two states of an element.
*******************************/
a,
button {
/* Transition-property */
transition-property: none;
/* Transition-duration */
transition-duration: 2s;
/* Transition-timing-function */
transition-timing-function: ease-in-out;
/* Transition-delay */
transition-delay: 20ms;
}
/***************************
------------ 13: CSS Flexbox (Important) -----------
Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align
items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill
the space. And overall, it makes the responsive design more manageable.
*******************************/
/* ---------------------- Parent Properties (flex container) ------------ */
section,
div#wrapper {
/* display */
display: flex;
/* flex-direction */
flex-direction: row | row-reverse | column | column-reverse;
/* flex-wrap */
flex-wrap: nowrap | wrap | wrap-reverse;
/* flex-flow */
flex-flow: column wrap;
/* justify-content */
justify-content: flex-start | flex-end | center | space-between | space-around;
/* align-items */
align-items: stretch | flex-start | flex-end | center | baseline;
/* align-content */
align-content: flex-start | flex-end | center | space-between | space-around;
}
/* ---------------------- Child Properties (flex items) ------------ */
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
/* order */
order: 5; /* default is 0 */
/* flex-grow */
flex-grow: 4; /* default 0 */
/* flex-shrink */
flex-shrink: 3; /* default 1 */
/* flex-basis */
flex-basis: | auto; /* default auto */
/* flex shorthand */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/* align-self */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
/***************************
------------ 14: CSS Grid (Useful in Complex Web Designs) -----------
Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design
layouts more easily and consistently across browsers.
*******************************/
/* ---------------------- Parent Properties (Grid container) ------------ */
section,
div#wrapper {
/* display */
display: grid | inline-grid;
/* grid-template-columns */
grid-template-columns: 12px 12px 12px;
/* grid-template-rows */
grid-template-rows: 8px auto 12px;
/* grid-template */
grid-template: none | <grid-template-rows> / <grid-template-columns>;
/* column-gap */
column-gap: <line-size>;
/* row-gap */
row-gap: <line-size>;
/* grid-column-gap */
grid-column-gap: <line-size>;
/* grid-row-gap */
grid-row-gap: <line-size>;
/* gap shorthand */
gap: <grid-row-gap> <grid-column-gap>;
/* grid-gap shorthand */
grid-gap: <grid-row-gap> <grid-column-gap>;
/* justify-items */
justify-items: start | end | center | stretch;
/* align-items */
align-items: start | end | center | stretch;
/* place-items */
place-items: center;
/* justify-content */
justify-content: start | end | center | stretch | space-around | space-between;
/* align-content */
align-content: start | end | center | stretch | space-around | space-between;
/* place-content */
place-content: <align-content> / <justify-content>;
/* grid-auto-columns */
grid-auto-columns: <track-size> ...;
/* grid-auto-rows */
grid-auto-rows: <track-size> ...;
/* grid-auto-flow */
grid-auto-flow: row | column | row dense | column dense;
}
/* ---------------------- Child Properties (Grid items) ------------ */
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
/* grid-column-start */
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
/* grid-column-end */
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
/* grid-row-start */
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
/* grid-row-end */
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
/* grid-column shorthand */
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
/* grid-row shorthand */
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
/* grid-area */
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
/* justify-self */
justify-self: start | end | center | stretch;
/* align-self */
align-self: start | end | center | stretch;
/* place-self */
place-self: center;
}
/***************************
------------ 15: MEDIA QUERIES -----------
Using media queries are a popular technique for delivering a tailored style sheet to
desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
|----------------------------------------------------------|
| Responsive Grid Media Queries - 1280, 1024, 768, 480 |
| 1280-1024 - desktop (default grid) |
| 1024-768 - tablet landscape |
| 768-480 - tablet |
| 480-less - phone landscape & smaller |
|----------------------------------------------------------|
*******************************/
@media all and (min-width: 1024px) and (max-width: 1280px) { }
@media all and (min-width: 768px) and (max-width: 1024px) { }
@media all and (min-width: 480px) and (max-width: 768px) { }
@media all and (max-width: 480px) { }
/* Small screens - MOBILE */
@media only screen { } /* Define mobile styles - Mobile First */
@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
/* Medium screens - TABLET */
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
/* Large screens - DESKTOP */
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */
/* XLarge screens */
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
/* XXLarge screens */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */
/*------------------------------------------*/
/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }
/* CSS for iPhone, iPad, and Retina Displays */
/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}
/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}
/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
}
/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}
/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}
/* Make Sure you don't forgot to add */
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> /* within <head> tag */
Raw
docker.sh
##############################################################################
# DOCKER
##############################################################################
docker init # Creates Docker-related starter files
docker build -t friendlyname . # Create image using this directory's Dockerfile
docker run -p 4000:80 friendlyname # Run "friendlyname" mapping port 4000 to 80
docker run -d -p 4000:80 friendlyname # Same thing, but in detached mode
docker exec -it [container-id] bash # Enter a running container
docker ps # See a list of all running containers
docker stop <hash> # Gracefully stop the specified container
docker ps -a # See a list of all containers, even the ones not running
docker kill <hash> # Force shutdown of the specified container
docker rm <hash> # Remove the specified container from this machine
docker rm -f <hash> # Remove force specified container from this machine
docker rm $(docker ps -a -q) # Remove all containers from this machine
docker images -a # Show all images on this machine
docker rmi <imagename> # Remove the specified image from this machine
docker rmi $(docker images -q) # Remove all images from this machine
docker logs <container-id> -f # Live tail a container's logs
docker login # Log in this CLI session using your Docker credentials
docker tag <image> username/repository:tag # Tag <image> for upload to registry
docker push username/repository:tag # Upload tagged image to registry
docker run username/repository:tag # Run image from a registry
docker system prune # Remove all unused containers, networks, images (both dangling and unreferenced), and optionally, volumes. (Docker 17.06.1-ce and superior)
docker system prune -a # Remove all unused containers, networks, images not just dangling ones (Docker 17.06.1-ce and superior)
docker volume prune # Remove all unused local volumes
docker network prune # Remove all unused networks
##############################################################################
# DOCKER COMPOSE
##############################################################################
docker-compose up # Create and start containers
docker-compose up -d # Create and start containers in detached mode
docker-compose down # Stop and remove containers, networks, images, and volumes
docker-compose logs # View output from containers
docker-compose restart # Restart all service
docker-compose pull # Pull all image service
docker-compose build # Build all image service
docker-compose config # Validate and view the Compose file
docker-compose scale <service_name>=<replica> # Scale special service(s)
docker-compose top # Display the running processes
docker-compose run -rm -p 2022:22 web bash # Start web service and runs bash as its command, remove old container.
##############################################################################
# DOCKER SERVICES
##############################################################################
docker service create <options> <image> <command> # Create new service
docker service inspect --pretty <service_name> # Display detailed information Service(s)
docker service ls # List Services
docker service ps # List the tasks of Services
docker service scale <service_name>=<replica> # Scale special service(s)
docker service update <options> <service_name> # Update Service options
##############################################################################
# DOCKER STACK
##############################################################################
docker stack ls # List all running applications on this Docker host
docker stack deploy -c <composefile> <appname> # Run the specified Compose file
docker stack services <appname> # List the services associated with an app
docker stack ps <appname> # List the running containers associated with an app
docker stack rm <appname> # Tear down an application
##############################################################################
# DOCKER MACHINE
##############################################################################
docker-machine create --driver virtualbox myvm1 # Create a VM (Mac, Win7, Linux)
docker-machine create -d hyperv --hyperv-virtual-switch "myswitch" myvm1 # Win10
docker-machine env myvm1 # View basic information about your node
docker-machine ssh myvm1 "docker node ls" # List the nodes in your swarm
docker-machine ssh myvm1 "docker node inspect <node ID>" # Inspect a node
docker-machine ssh myvm1 "docker swarm join-token -q worker" # View join token
docker-machine ssh myvm1 # Open an SSH session with the VM; type "exit" to end
docker-machine ssh myvm2 "docker swarm leave" # Make the worker leave the swarm
docker-machine ssh myvm1 "docker swarm leave -f" # Make master leave, kill swarm
docker-machine start myvm1 # Start a VM that is currently not running
docker-machine stop $(docker-machine ls -q) # Stop all running VMs
docker-machine rm $(docker-machine ls -q) # Delete all VMs and their disk images
docker-machine scp docker-compose.yml myvm1:~ # Copy file to node's home dir
docker-machine ssh myvm1 "docker stack deploy -c <file> <app>" # Deploy an app
Raw
git.sh
git init # initiates git in the current directory
git remote add origin https://github.com/repo_name.git # add remote reposiory
git clone <address> # creates a git repo from given address (get the address from your git-server)
git clone <address> -b <branch_name> <path/to/directory> # clones a git repo from the address into the given directory and checkout's the given branch
git clone <address> -b <branch_name> --single-branch # Clones a single branch
git add <file_name> # adds(stages) file.txt to the git
git add * # adds(stages) all new modifications, deletions, creations to the git
git reset file.txt # Removes file.txt from the stage
git reset --hard # Throws away all your uncommitted changes, hard reset files to HEAD
git reset --soft <commit_id> # moves the head pointer
git reset --mixed <commit_id> # moves the head pointer and then copies the files from the commit it is now pointing to the staging area,
# the default when no argument is provided
git reset -hard <commit_id> # moves the head pointer and then copies the files from the commit it is now pointing to the staging area
# and working directory thus, throw away all uncommitted changes
# git reset
# 1. Move HEAD and current branch
# 2. Reset the staging area
# 3. Reset the working area
# --soft = (1)
# --mixed = (1) & (2) (default)
# --hard = (1) & (2) & (3)
git rm file.txt # removes file.txt both from git and file system
git rm --cached file.txt # only removes file.txt both from git index
git status # shows the modifications and stuff that are not staged yet
git branch # shows all the branches (current branch is shown with a star)
git branch -a # shows all the branches local and remote
git branch my-branch # creates my-branch
git branch -d my-branch # deletes my-branch
git checkout my-branch # switches to my-branch
git merge my-branch # merges my-branch to current branch
git push origin --delete my-branch # delete remote branch
git branch -m <new-branch-name> # rename the branch
git checkout --orphan <branch_name> # checkout a branch with no commit history
git branch -vv # list all branches and their upstreams, as well as last commit on branch
git branch -a # List all local and remote branches
git cherry-pick <commit_id> # merge the specified commit
git cherry-pick <commit_id_A>^..<commit_id_B> # pick the entire range of commits where A is older than B ( the ^ is for including A as well )
git remote # shows the remotes
git remote -v # shows the remote for pull and push
git remote add my-remote <address> # creates a remote (get the address from your git-server)
git remote rm my-remote # Remove a remote
git log # shows the log of commits
# git log by default uses less command so you can use these: f=next page, b=prev page, search=/<query>, n=next match, p=prev match, q=quit
git log --no-pager # shows the log of commits without less command
git log --oneline # shows the log of commits, each commit in a single line
git log --oneline --graph --decorate # shows the log of commits, each commit in a single line with graph
git log --since=<time> # shows the log of commits since given time
git log -- <file_name>
git log -p <file_name> # change over time for a specific file
git log <Branch1> ^<Branch2> # lists commit(s) in branch1 that are not in branch2
git log -n <x> # lists the last x commits
git log -n <x> --oneline # lists the last x commits, each commit in single line
git grep --heading --line-number '<string/regex>' # Find lines matching the pattern in tracked files
git log --grep='<string/regex>' # Search Commit log
git reflog # record when the tips of branches and other references were updated in the local repository.
git ls-files # show information about files in the index and the working tree
git commit -m "msg" # commit changes with a msg
git commit -m "title" -m "description" # commit changes with a title and description
git commit --amend # combine staged changes with the previous commit, or edit the previous commit message without changing its snapshot
git commit --amend --no-edit # amends a commit without changing its commit message
git commit --amend --author='Author Name <[email protected]>' # Amend the author of a commit
git push my-remote my-branch # pushes the commits to the my-remote in my-branch (does not push the tags)
git revert <commit-id> # Undo a commit by creating a new commit
git show # shows one or more objects (blobs, trees, tags and commits).
git diff # show changes between commits, commit and working tree
git diff HEAD #show changes between working directory vs last commit
git diff --staged HEAD #show changes between stage area vs last commit
git diff --color # show colored diff
git diff --staged # Shows changes staged for commit
git tag # shows all the tags
git tag -a v1.0 -m "msg" # creates an annotated tag
git show v1.0 # shows the description of version-1.0 tag
git tag --delete v1.0 # deletes the tag in local directory
git push --delete my-remote v1.0 # deletes the tag in my-remote (be carefore to not delete a branch)
git push my-remote my-branch v1.0 # push v1.0 tag to my-remote in my-branch
git fetch --tags # pulls the tags from remote
git pull my-remote my-branch # pulls and tries to merge my-branch from my-remote to the current branch git pull = git fetch && get merge
git stash # stashes the staged and unstaged changes (git status will be clean after it)
git stash -u # stash everything including new untracked files (but not .gitignore)
git stash save "msg" # stash with a msg
git stash list # list all stashes
git stash pop # delete the recent stash and applies it
git stash pop stash@{2} # delete the {2} stash and applies it
git stash show # shows the description of stash
git stash apply # keep the stash and applies it to the git
git stash branch my-branch stash@{1} # creates a branch from your stash
git stash drop stash@{1} # deletes the {1} stash
git stash clear # clears all the stash
git rebase -i <commit_id> # Rebase commits from a commit ID
git rebase --abort # Abort a running rebase
git rebase --continue # Continue rebasing after fixing all conflicts
git clean -f # clean untracked files permanently
git clean -f -d/git clean -fd # To remove directories permanently
git clean -f -X/git clean -fX # To remove ignored files permanently
git clean -f -x/git clean -fx # To remove ignored and non-ignored files permanently
git clean -d --dry-run # shows what would be deleted
git config --global --list # lists the git configuration for all repos
git config --global --edit # opens an editor to edit the git config file
git config --global alias.<handle> <command> # add git aliases to speed up workflow , eg.
# if handle is st and command is status then running git st would execute git status
git config --global core.editor <editor_name> # config default editor
git archive <branch_name> --format=zip --outpute=./<archive_name>.zip # create an archive of files from a named tree
.gitignore
# is a file including names of stuff that you don"t want to be staged or tracked.
# You usually keep your local files like database, media, etc here.
# You can find good resources online about ignoring specific files in your project files.
# .gitignore is also get ignored
.git
# is a hidden directory in repo directory including git files. It is created after "git init".
# Some useful notes:
# Better Commit messages:
# Key to Effective Debugging
# For the commit message to help in debugging effectively, ensure that it is short and use an imperative
# mood (spoken or written as if giving a command or instruction) when constructing them.
# Also use feature tense for commit messages.
# The first word in your commit message should be one of these:
# Add
# Create
# Refactor
# Fix
# Release
# Document
# Modify
# Update
# Remove
# Delete etc...
# About resetting:
# Use git revert instead of git reset in shared repositories
# git revert creates a new commit that introduces the opposite changes from the specified commit.
# Revert does not change history the original commit stays in the repository
# Difference between ~ and ^ in git:
# > ^ or ^n
# >no args: == ^1: the first parent commit
# >n: the nth parent commit
# > ~ or ~n
# >no args: == ~1: the first commit back, following 1st parent
# >n: number of commits back, following only 1st parent
# note: ^ and ~ can be combined
# Some tools to improve git skill by visualizing it:
# https://git-school.github.io/visualizing-git/
# https://learngitbranching.js.org/
Raw
heroku.sh
# ##############################################################################
##### HEROKU TOOLBELT COMPLETE GUIDE ###########################################
################################################################################
# Installing Heroku toolbelt using command line
# For MacOS...
brew tap heroku/brew && brew install heroku
# For Ubuntu...
sudo snap install --classic heroku
# Other installation methods are
curl https://cli-assets.heroku.com/install.sh | sh # only for unix based systems, windows incompatible as it needs sudo
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh # Ubuntu/Debian apt-get
yay -S heroku-cli # Arch linux, Note: This package is community maintained not by heroku
npm install -g heroku # This installation method is required for users on ARM and BSD...
############
# Verifying your installation
heroku --version
# Let's get started with heroku
heroku login # To login into the heroku toolbelt with your heroku account, this will open browser for you.
heroku login -i # If you prefer to stay in the command line environment, then you can execute this command
# Now navigate to your desired directory and create a blank heroku application
cd ~/myapp
heorku create
# If you are facing login issues, try to execute the following command
mv ~/.netrc ~/.netrc.backup
heroku login
# Uninstalling the heroku CLI
# For macOS
rm -rf /usr/local/heroku /usr/local/lib/heroku /usr/local/bin/heroku ~/.local/share/heroku ~/Library/Caches/heroku
# or you can try the below command also on macOS
brew uninstall heroku
rm -rf ~/.local/share/heroku ~/Library/Caches/heroku
# For Linux (Standalone installs)
rm /usr/local/bin/heroku
rm -rf /usr/local/lib/heroku /usr/local/heroku
rm -rf ~/.local/share/heroku ~/.cache/heroku
# For Linux (Debian and Ubuntu installs)
sudo apt-get remove heroku heroku-toolbelt
sudo rm /etc/apt/sources.list.d/heroku.list
#####################################################################################################
### Managing and deploying applications on Heroku (Using Git) ###################################
#####################################################################################################
cd myapp # Changing into the project directory
git init # Initializing the project into a git repository
git add -f example.json # Adding a perticular content of the project into the repository this will include the content from .gitignore
git add . # Adding all the contents of the project into the repository excluding .gitignore content
git commit -m "My first commit" # Commiting the content to the repository
heroku create appname # Creating a new application on Heroku here ( appname ) represent the name u give to your app
git remote -v # verifying that the remote is set to the heroku
heroku git:remote -a thawing-inlet-61413 # For an existing heroku app, you can add remote to the application
git remote rename heroku heroku-staging # renaming remotes
git push heroku master # Deploying code to the heroku application
git push heroku master --force # Force Pushing to heroku ( required if the remote contain works that u do not have locally )
git push heroku testbranch:master # Deploying code from a non-master branch to the heroku application
heroku create --ssh-git # ssh git transport for the application instead of https
git config --global url.ssh://[email protected]/.insteadOf https://git.heroku.com/ # For using ssh always
git config --global --remove-section url.ssh://[email protected]/ # To remove this rewrite setting run the command
#####################################################################################################
### Managing and deploying applications on Heroku (Using Docker) ###################################
#####################################################################################################
# Setting stack of your app to a Container
heroku stack:set container
heroku container:login # Login to the container resistry
git clone https://github.com/heroku/alpinehelloworld.git # Get sample code by cloning into the following repository
heroku create appname # Creating a heroku application here ( appname ) represent the name u give to your app
heroku container:push web # Build the image and push to Container Registry
heroku container:push --recursive # Pushing from the root directory of the project in recursive manner
heroku container:push web worker --recursive # Building the image and pushing to container resistry in recursive manner
heroku container:release web # Releasing the image to your application
heroku open # Open the application in the browser
Raw
HTML5.html
<!-- * *******************************************************************************************
* HTML5 Cheat sheet by Hackr.io
* Source: https://websitesetup.org/wp-content/uploads/2014/02/HTML-CHEAT-SHEET-768x8555.png
* ******************************************************************************************* * -->
<!-- Document Summary -->
<!DOCTYPE html> <!-- Tells the browser that HTML5 version of HTML to be recognized by the browser -->
<html lang="en"></html> <!-- The HTML lang attribute is used to identify the language of text content on the web. This information helps search engines return language specific results, -->
<head></head> <!-- Contains Information specific to the page like title, styles and scripts -->
<title></title> <!-- Title for the page that shows up in the browser title bar -->
<body></body> <!-- Content that the user will see -->
<!-- Document Information -->
<base/> <!-- Usefull for specifying relative links in a document -->
<style></style> <!-- Contains styles for the html document -->
<meta/> <!-- Contains additional information about the page, author, page description and other hidden page info -->
<script></script> <!-- Contains all scripts internal or external -->
<link/> <!-- Used to create relationships with external pages and stylesheets -->
<!-- Document Structure -->
<h1></h1> ... <h6></h6> <!-- All six levels of heading with 1 being the most promiment and 6 being the least prominent -->
<p></p> <!-- Used to organize paragraph text -->
<div></div> <!-- A generic container used to denote a page section -->
<span></span> <!-- Inline section or block container used for creating inline style elements -->
<br/> <!-- Creates a line-break -->
<hr> <!-- Creates a sectional break into HTML -->
<!-- Text Formatting -->
<strong></strong> and <b></b> <!-- Makes text contained in the tag as bold -->
<em></em> and <i></i> <!-- Alternative way to make the text contained in the tag as italic -->
<del></del> <!-- Creates a strike through the text element -->
<pre></pre> <!-- Preformatted monospace text block with some spacing intact -->
<blockquote></blockquote> <!-- Contains long paragraphs of quotations often cited -->
<abbr></abbr> <!-- Contains abbreviations while also making the full form avaialable -->
<address></address> <!-- Used to display contact information -->
<code></code> <!-- Used to display inline code snippets -->
<q></q> <!-- Defines a short inline quotation -->
<sub></sub> <!-- Defines subscripted text -->
<sup></sup> <!-- Defines superscripted text -->
<kbd></kbd> <!-- Specifies text as keyboard input -->
<small></small> <!-- Specifies small text -->
<ins></ins> <!-- Defines a text that has been inserted into the document -->
<!-- Links Formatting -->
<a href="url"></a> <!-- Used to link to external or internal pages of a wbesite -->
<a href="mailto:[email protected]"></a> <!-- Used to link to an email address -->
<a href="name"></a> <!-- Used to link to a document element -->
<a href="#name"></a> <!-- Used to link to specific div element -->
<a href="tel://####-####-##"></a> <!-- Used to display phone numbers and make them clickable -->
<!-- Image Formatting -->
<img src="url" alt="text"> <!-- Used to display images in a webpage where src="url" contains the link to the image source and alt="" contains an alternative text to display when the image is not displayed -->
<!-- List Formatting -->
<ol></ol> <!-- Used to create ordered lists with numbers in the items -->
<ul></ul> <!-- Used to display unordered lists with numbers in the items -->
<li></li> <!-- Contains list items inside ordered and unordered lists -->
<dl></dl> <!-- Contains list item definitions -->
<dt></dt> <!-- Definition of single term inline with body content -->
<dd></dd> <!-- The descrpition of the defined term -->
<!-- Forms Formatting and Attributes -->
<form action="url"></form> <!-- Form element creates a form and action="" specifies where the data is to be sent to when the visitor submits the form -->
<!-- Supported attributes -->
method="somefunction()" <!-- Contains the type of request (GET, POST... etc) which dictates how to send the data of the form -->
enctype="" <!-- Dictates how the data is to be encoded when the data is sent to the web server. -->
autocomplete="" <!-- Specifies if the autocomplete functionality is enabled or not -->
novalidate <!-- Dictates if the form will be validated or not -->
accept-charset="" <!-- Identifies the character encoding upon form submission -->
target="" <!-- Tell where to display the information upon form submission. Possible values: '_blank', '_self', '_parent', '_top' -->
<fieldset disabled="disabled"></fieldset> <!-- Identifies the group of all fields in the form -->
<label for=""></label> <!-- A simple field label telling the user what to type in the field -->
<legend></legend> <!-- The form legend acts as a caption for the fieldset element -->
<input type="text/email/number/color/date"> <!-- Input is the input field where the user can input various types of data -->
<!-- Supported attributes -->
name="" <!-- Describes the name of the form -->
width="" <!-- Specifies the width of an input field -->
value="" <!-- Describes the value of the input information field -->
size="" <!-- Specifies the input element width in characters -->
maxlength="" <!-- Specifies the maximum input character numbers -->
required="" <!-- Specifies if the input field is required to fill in before submitting the form -->
step="" <!-- Identifies the legal number intervals of the input field -->
<textarea name="" id="" cols="30" rows="10"> <!-- Specifies a large input text field for longer messages -->
</textarea>
<select name=""></select> <!-- Describes a dropdown box for users to select from variety of choices -->
<!-- Supported attributes -->
name="" <!-- The name for a dropdown combination box -->
size="" <!-- Specifies the number of available options -->
multiple <!-- Allows for multiple option selections -->
required <!-- Requires that a value is selected before submitting the form -->
autofocus <!-- Specifies that the dropdown automatically comes to focus once the page loads -->
<optgroup></optgroup> <!-- Specifies the entire grouping of available options -->
<option value=""></option> <!-- Defines one of the avaialble option from the dropdown list -->
<button></button> <!-- A clickable button to submit the form -->
<!-- Tables Formatting -->
<table></table> <!-- Defines and contains all table related content -->
<caption></caption> <!-- A description of what table is and what it contains -->
<thead></thead> <!-- The table headers contain the type of information defined in each column underneath -->
<tbody></tbody> <!-- Contains the tables data or information -->
<tfoot></tfoot> <!-- Defines table footer -->
<tr></tr> <!-- Contains the information to be included in a table row -->
<th></th> <!-- Contains the information to be included in a single table header -->
<td></td> <!-- Contains actual information in a table cell -->
<colgroup></colgroup> <!-- Groups a single or multiple columns for formatting purposes -->
<col> <!-- Defines a single column of information inside a table -->
<!-- Objects and iFrames -->
<object data=""></object> <!-- Describes and embed file type including audio, video, PDF's, images -->
<!-- Supported attributes -->
type="" <!-- Describes the type of media embedded -->
height="" <!-- Describes the height of the object in pixels -->
width="" <!-- Describes the width of the object in pixels -->
usemap="" <!-- This is the name of the client-side image map in the object -->
<iframe src="" frameborder="0"></iframe> <!-- Contains an inline frame that allows to embed external information -->
<embed src="" type=""> <!-- Acts as a container for external application or plug-in -->
src="" <!-- The source of the external file you're embedding -->
width="" <!-- Describes the width of the iframe in pixels -->
<!-- HTML5 New Tags -->
<header></header> <!-- Defines the header block for a document or a section -->
<footer></footer> <!-- Defines the footer block for a document or a section -->
<main></main> <!-- Describes the main content of a document -->
<article></article> <!-- Identifies an article inside a document -->
<aside></aside> <!-- Specifies content contained in a document sidebar -->
<section></section> <!-- Defines a section of a document -->
<details></details> <!-- Describes additonal information that user can view or hide -->
<dialog></dialog> <!-- A dialog box or a window -->
<figure></figure> <!-- An independent content block featuring images, diagrams or illustrations -->
<figcaption></figcaption> <!-- Caption that describe a figure -->
<mark></mark> <!-- Displays a portion of highlighted text with in a page content -->
<nav></nav> <!-- Navigation links for the user in a document -->
<menuitem></menuitem> <!-- The specific menu item that a user can raise from a pop up menu -->
<meter></meter> <!-- Describes the scalar measurement with in a known array -->
<progress></progress> <!-- Displays the progress of a task usually a progress bar -->
<rp></rp> <!-- Describes text within the browsers that do not support ruby notations -->
<rt></rt> <!-- Displays east asian typography character details -->
<ruby></ruby> <!-- Describes annotations for east asian typography -->
<summary></summary> <!-- Contains a visible heading for details element -->
<bdi></bdi> <!-- Helps you format parts of text in a different direction than other text -->
<time></time> <!-- Identifies the time and date -->
<wbr> <!-- A line break within the content -->
<!-- Some other useful tags -->
<canvas></canvas> <!-- Allows to draw 2D shapes on the web page with the help of javascript -->
<map></map> <!-- Specifies an image map -->
<!-- Collective Character Obejcts -->
&#34; &quot; Quotation Marks - "
&#38; &amp; Ampersand - &
&#60; &lt; Less than sign - <
&#62; &gt; Greater than sign - >
&#160; &nbsp; Non-breaking space
&#169; &copy; Copyright Symbol - ©
&#64; &Uuml; @ symbol - @
&#149; &ouml; Small bullet - .
&#153; &ucirc; Trademark Symbol - ™
Raw
nginx.sh
##############################################################################
# NGINX
# DOCUMENTATION: https://nginx.org/en/docs/
##############################################################################
sudo nginx -t # Check syntax
sudo systemctl status nginx # nginx current status
sudo systemctl reload nginx # Reload nginx
sudo systemctl restart nginx # Restart nginx
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ # Link website
sudo tail -f /var/log/nginx/access.log # Tail logs to inspect requests
# *****************************************************************************
# General Settings
# *****************************************************************************
# Ports
server {
# Use HTTP protocol
listen 80;
# Use HTTPS protocol
listen 443 ssl;
# Listen on port 80 using IPv6
listen [::]:80;
# Listen on port 80 using **only** IPv6
listen [::]:80 ipv6only=on;
}
# Domain name (server_name)
server {
# Listen to example.com
server_name example.com;
# Listen to multiple domains
server_name example.com www.example.com;
# Listen to all sub-domains
server_name *.example.com;
# Listen to all top-level domains
server_name example.*;
# Listen to unspecified hostnames (listens to IP address itself)
server_name "";
}
# *****************************************************************************
# Serving Files
# *****************************************************************************
# Static assets (traditional web server)
server {
listen 80;
server_name example.com;
root /path/to/website;
# root /www/data/ for example
# If there's no 'root' inside, it will look for /www/data/index.html
location / {
}
# If there's no 'root' inside, it will look for /www/data/images/index.html
location /images/ {
}
# Since there's 'root' inside, it will look for /www/media/videos/index.html
location /videos/ {
root /www/media;
}
}
# *****************************************************************************
# Redirects
# *****************************************************************************
# 301 Permanent
server {
# Redirect www.example.com to example.com
listen 80;
server_name www.example.com;
return 301 http://example.com$request_uri;
}
server {
# Redirect http to https
listen 80;
server_name example.com;
return 301 https://example.com$request_uri;
}
# 302 Temporary
server {
listen 80;
server_name yourdomain.com;
return 302 http://otherdomain.com;
}
# *****************************************************************************
# Reverse proxy
# *****************************************************************************
# Useful for Node.js, Streamlit, Jupyter, etc
# Basic
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://0.0.0.0:3000;
# where 0.0.0.0:3000 is your Node.js Server bound on 0.0.0.0 listing on port 3000
}
}
# Basic + (upstream)
upstream node_js {
server 0.0.0.0:3000;
# where 0.0.0.0:3000 is your Node.js Server bound on 0.0.0.0 listing on port 3000
}
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://node_js;
}
}
# Upgraded Connection (useful for applications with support for WebSockets)
upstream node_js {
server 0.0.0.0:3000;
}
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://node_js;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
}
# *****************************************************************************
# HTTPS Protocol
# *****************************************************************************
# The majority of SSL options depend on what your application does or needs
server {
listen 443 ssl http2;
server_name example.com;
ssl on;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/privkey.pem;
ssl_stapling on;
ssl_stapling_verify on;
ssl_trusted_certificate /path/to/fullchain.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_session_timeout 1d;
ssl_session_cache shared:SSL:50m;
add_header Strict-Transport-Security max-age=15768000;
}
# Permanent redirect to HTTPS secured domain
server {
listen 80;
server_name yourdomain.com;
return 301 https://$host$request_uri;
}
# You can easily secure you website/app using Let's Encrypt.
# Go https://certbot.eff.org/lets-encrypt/ubuntuxenial-nginx.html for more information
# *****************************************************************************
# Load Balancing
# *****************************************************************************
# Useful for large applications running in multiple instances. Below example is for reverse proxy
upstream node_js {
server 0.0.0.0:3000;
server 0.0.0.0:4000;
server 127.155.142.421;
}
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://node_js;
}
}
Raw
ubuntu.sh
##############################################################################
# UBUNTU
##############################################################################
scp /path/to/file user@server:/path/to/destination # Copy file from local to server
df -h # Check the amount of free space
sudo ufw status # Check status
sudo ufw allow from remote_IP_address to any port 3306 # Allow external ip to access port
scp user@remote_host:remote_file local_file # download: remote -> local
scp local_file user@remote_host:remote_file # upload: local -> remote
service elasticsearch restart # Restart elasticsearch service
sudo -s # Log as root
cat /proc/<process_id>/maps # Show the current virtual memory usage of a Linux process
ip r # Display ip of the server
lsof -i :9000 # List process running on port 9000
journalctl -u minio.service -n 100 --no-pager # List last 100 logs for specific service
sudo resize2fs /dev/disk/by-id/scsi-0DO_example # Resize volume
ps -ax | grep myprocessname # Search processes
kill -9 PROCESS_ID # Kill process PID
Raw
vscode.md

Visual Studio CheatSheet

Shortcuts

Linux

General

  • Ctrl+Shift+P, F1: Show Command Palette
  • Ctrl+Shift+T: Open last closed tab
  • Ctrl+P: Quick Open, Go to File
  • Ctrl+Shift+N: New window/instance
  • Ctrl+W: Close window/instance
  • Ctrl+,: User Settings
  • Ctrl+K, Ctrl+S: Keyboard Shortcuts

Basic editing

  • Ctrl+X: Cut line (empty selection)
  • Ctrl+C: Copy line (empty selection)
  • Ctrl+↓/↑: Move line down / up
  • Ctrl+Shift+K: Delete line
  • Ctrl+Enter / Ctrl+Shift+Enter: Insert line below / above
  • Ctrl+Shift+\: Jump to matching bracket
  • Ctrl+] / Ctrl+[: Indent / Outdent line
  • Ctrl+Home / End: Go to beginning / end of file
  • Ctrl+↑ / ↓: Scroll line up / down
  • Alt+PgUp / PgDn: Scroll page up / down
  • Ctrl+Shift+[ / ]: Fold / unfold region
  • Ctrl+K, Ctrl+[ / ]: Fold / unfold all subregions
  • Ctrl+K, Ctrl+0 / Ctrl+K, Ctrl+J: Fold /Unfold all regions
  • Ctrl+K, Ctrl+C: Add line comment
  • Ctrl+K, Ctrl+U: Remove line comment
  • Ctrl+/: Toggle line comment
  • Ctrl+Shift+A: Toggle block comment
  • Alt+Z: Toggle word wrap

Useful Extensions

HTML & CSS

  • CSScomb: Coding style formatter for CSS, Less, SCSS and Saas.

  • Puglint: Linter and style checker for pug.

  • Sass: Indented Sass syntax highlighting, autocomplete & snippets.

  • SCSS IntelliSense: Advanced autocompletion and refactoring support for SCSS.

  • XML Format: Format XML documents.

JavaScript, Node & NPM

  • Import Cost: This extension will display inline in the editor the size of the imported package.

  • ESLint: Integrates ESLint into VS Code

  • NPM: NPM support for VS Code.

  • NPM Intellisense: Visual Studio Code plugin that autocompletes NPM modules in import statements.

  • Version Lens: Shows the latest version for each package using code lens.

  • Vetur: Vue tooling for VS Code.

PHP

Perl

  • Perl: Code intelligence for the Perl language.

  • Perl Toolbox: Perl Toolbox for linting and syntax checking for Perl.

  • Perl Moose: Perl Moose syntax highlight support for Visual Studio Code.

Git

  • Git History: View git log, file history, compare branches or commits.

  • Gitignore: An extension for Visual Studio Code that assists you in working with .gitignore files.

  • GitLens: Visualize code authorship, code lens, seamlessly Git blame annotations and more.

  • Gitmoji: An emoji tool for your git commit messages.

Themes

Handy

My Settings

{
    // Controls the font size in pixels
    "editor.fontSize": 14,

    // Render vertical rulers after a certain number of
    // monospace characters. Use multiple values for multiple
    // rulers. No rulers are drawn if array is empty
    "editor.rulers": [100],

    // The number of spaces a tab is equal to
    "editor.tabSize": 2,

    "[python]": {
        "editor.tabSize": 4
    },

    // Controls the line height
    "editor.lineHeight": 22,

    // Controls the font family
    "editor.fontFamily": "Fira Code",

    // Enables font ligatures
    "editor.fontLigatures": true,

    // Controls whether snippets are shown with other suggestions and how they are sorted.
    "editor.snippetSuggestions": "top",

    // Ignore extension recommendations
    "extensions.ignoreRecommendations": false,

    // Controls auto save of dirty files
    "files.autoSave": "afterDelay",

    // Controls the delay in ms after which a dirty file is saved automatically
    "files.autoSaveDelay": 1000,

    // Configure glob patterns for excluding files and folders
    "files.exclude": {
        ".yarn": true,
        "**/*.pyc": true
    },

    // Insert a final new line at the end of the file when saving it
    "files.insertFinalNewline": true,

    // Confirm before synchronizing git repositories
    "git.confirmSync": false,

    // Commit all changes when there are no staged changes
    "git.enableSmartCommit": true,

    // Whether to lint Python files using pylint
    "python.linting.pylintEnabled": false,

    // Whether to lint Python files using flake8
    "python.linting.flake8Enabled": true,

    // Configure glob patterns for excluding files and folders in
    // searches. Inherits all glob patterns from the files.exclude setting.
    "search.exclude": {
        "**/.git": true,
        "**/.nuxt": true,
        "**/build": true,
        "**/data": true,
        "**/dist": true,
        "**/env": true
    },

    // Adjust the zoom level of the window. The original size is 0
    // and each increment above (e.g. 1) or below (e.g. -1) represents
    // zooming 20% larger or smaller. You can also enter decimals to
    // adjust the zoom level with a finer granularity.
    "window.zoomLevel": 0,

    // Overrides colors from the currently selected color theme.
    "workbench.colorCustomizations": {
        "statusBar.background": "#8252be",
        "statusBar.foreground": "#eeffff",
        "titleBar.activeBackground": "#282b3c",
        "titleBar.activeForeground": "#eeefff"
    },

    // Specifies the color theme used in the workbench
    "workbench.colorTheme": "Material Palenight",

    // Specifies the icon theme used in the workbench
    "workbench.iconTheme": "material-icon-theme",

    // Controls font aliasing method in the workbench
    "workbench.fontAliasing": "antialiased",
    "explorer.confirmDragAndDrop": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment