Merge branch 'master' of github.com:LeCoupa/awesome-cheatsheets

This commit is contained in:
Julien Le Coupanec 2022-08-28 21:08:14 +02:00
commit ec7afa056b
7 changed files with 705 additions and 6 deletions

View File

@ -8,7 +8,7 @@
## 🤔 Why Awesome-Cheatsheets?
I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. [I started doing these kinds of things a long time ago on Gist](https://gist.github.com/LeCoupa). To better keep track of the history and to let people contribute, I reorganized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.
I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. [I started doing these kinds of things a long time ago on Gist](https://gist.github.com/LeCoupa). To better keep track of the history and to let people contribute, I re-organized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.
Feel free to take a look. You might learn new things. They have been designed to provide a quick way to assess your knowledge and to save you time.
@ -75,6 +75,7 @@ Feel free to take a look. You might learn new things. They have been designed to
#### Basics
- [HTML5](frontend/html5.html)
- [CSS3](frontend/css3.css)
#### Frameworks

683
frontend/css3.css Normal file
View File

@ -0,0 +1,683 @@
/****************************
* 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 */

View File

@ -50,6 +50,7 @@
<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 -->

View File

@ -162,7 +162,7 @@ CHEATSHEET C#
8. C# compiler at the Command Line
csc File.cs -> Compiles Files.cs producing File.exe
csc File.cs -> Compiles File.cs producing File.exe
csc -target:library File.cs -> Compiles File.cs producing File.dll
csc -out:My.exe File.cs -> Compiles File.cs and creates My.exe
csc -define:DEBUG -optimize -out:File2.exe *.cs -> Compiles all the C# files in the current directory with optimizations enabled and defines the DEBUG symbol. The output is File2.exe

View File

@ -26,11 +26,14 @@ public class HelloWorld {
| Type | Set of values | Values | Operators |
|:-------:|:-----------------------:|:----------------------------:|:---------:|
| short | integers | between -2^15 and + (2^15)-1 | + - * / % |
| int | integers | between -2^31 and + (2^31)-1 | + - * / % |
| double | floating-point numbers | real numbers | + - * / |
| long | integers | between -2^63 and + (2^63)-1 | + - * / % |
| float | integers | real numbers 32 bit | + - * / |
| double | floating-point numbers | real numbers 64 bit | + - * / |
| boolean | boolean values | true or false | && \|\| ! |
| char | characters | | |
| String | sequences of characters | | |
| char | characters | 16 bit | |
| String | sequences of characters |it's not a primitive data type| |
### DECLARATION AND ASSIGNMENT STATEMENTS
@ -44,6 +47,16 @@ a = 13212; //a is the variable name; 13212 is the literal which is assign to the
//Initialization statement
int c = a + b;
//Compound assignment expressions
a += b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a + b
a -= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a - b
a *= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a * b
a /= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a / b
a %= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a % b
a ^= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a ^ b
a &= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a & b
a \|= b; //a is the variable name; b is the variable name; this expression is an equivalent shorthand notation of a = a \| b
```
### COMPARISON OPERATORS

View File

@ -17,7 +17,7 @@ var_dump($arr); // Print anything, with type hints for any value and sizes
$string = 'Awesome cheatsheets';
str_contains($string, 'cheat'); // Find if the string contains the specified string (PHP >= 8.0)
str_replace('Awesome', 'Bonjour', $string); // Replace all occurence (PHP >= 8.0)
str_replace('Awesome', 'Bonjour', $string); // Replace all occurence
strcmp($string, 'Awesome cheatsheets'); // Compare two strings
strpos($string, 'a', 0); // Get position in the string
str_split($string, 2); // Split the string

View File

@ -12,6 +12,7 @@ docker stop <hash> # Gracefully stop the specified cont
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