Kraballa/cheatsheet.html

## cheatsheet.html
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: sans-serif;
            --code-col: rgba(220, 220, 220, 0.511);
        }

        pre {
            margin: 0;
            padding: 5px;
            background-color: var(--code-col);
            border-radius: 3px;
        }

        code {
            background-color: var(--code-col);
            border-radius: 3px;
            margin: 0.2em;
        }

        h3 {
            margin-top: 1.5em;
            margin-bottom: 0.5em;
        }

        p {
            margin: 0;
        }

        ul {
            margin-top: 0;
            padding-left: 18px;
        }

        .column {
            border: 2px solid gray;
            padding: 0.5em;
            margin-bottom: 0.3em;
            border-radius: 5px;
        }

        .column>*+* {
            margin-top: 0.5em;
        }

        .row {
            max-width: 650px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="row">
        <p>
            <a href="#python">Python</a>,
            <a href="#js">Javasript</a>,
            <a href="#shell">Shell</a>,
            <a href="#css">Css</a>
        </p>
        <h3 id="python">Python</h3>
        <div class="column">
            <p>basic variables</p>
            <pre>
num = 3
nums = [1, 2, 3, 4, 5]
sum = sum(nums)
avg = sum / len(nums)
print(sum)</pre>
            <p>available array funcs:
                <code>append</code><code>clear</code><code>pop</code><code>reverse</code><code>sort</code>
            </p>
            <hr>
            <p>
                a function
            </p>
            <pre>
def printThis(param):
    print("printing:", param)</pre>
    <hr>
    <p>
        a program
    </p>
            <pre>
def inc(val):
    return val + 1

if __name__ == "__main__":
    print("this is a main function")
    num = 2
    print(inc(num))</pre>
        </div>

        <h3 id="js">Javascript</h3>
        <div class="column">
            <p>
                variables
            </p>
            <pre>
let num = 3;
num += 2;
let nums = [1,2,3,4,5,6]</pre>
<hr>
<p>
    control flow
</p>
<pre>
let vals = []
for(let i = 2; i <= 100; i+=2){
    vals.push(i)
}
console.log(vals)
</pre>
<hr>
<p>
    functions
</p>
<pre>
function setContent(id, cont){
    let elem = document.getElementById(id);
    elem.innerHtml = cont;
}
setContent("out", "hello, world!")
</pre>
        </div>

        <h3 id="shell">Shell</h3>
        <div class="column">
            <p>
                several commands used in the shell for network management
            </p>
            <pre>
ip netns list // list all networking namespaces
sudo ip netns exec &lt;netns&gt; ip -4 addr show // show ip addresses in netns

sudo ip netns exec &lt;netns&gt; ip addr add 10.0.0.202/24 dev &lt;netns&gt;.&lt;vlan&gt;
sudo ip netns exec &lt;netns&gt; ip -4 addr show | grep -oP '(?&lt;=inet\s)\d+(\.\d+){3}'</pre>
        </div>

        <h3 id="css">CSS</h3>
        <div class="column">
            <p>
                padding/margin side order
            </p>
            <pre>
padding: &lt;all&gt;;
padding: &lt;vert&gt; &lt;horiz&gt;;
padding: &lt;top&gt; &lt;horiz&gt; &lt;bottom&gt;;
padding: &lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;;</pre>
<hr>
            <p>
                margin between all child elements (except first one)
            </p>
            <pre>
.column > * + * {
    margin-top: 0.5em;
}</pre>
        </div>
        <a href="#">top</a>
    </div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<style>
	body {
	font-family: sans-serif;
	--code-col: rgba(220, 220, 220, 0.511);
	}

	pre {
	margin: 0;
	padding: 5px;
	background-color: var(--code-col);
	border-radius: 3px;
	}

	code {
	background-color: var(--code-col);
	border-radius: 3px;
	margin: 0.2em;
	}

	h3 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	}

	p {
	margin: 0;
	}

	ul {
	margin-top: 0;
	padding-left: 18px;
	}

	.column {
	border: 2px solid gray;
	padding: 0.5em;
	margin-bottom: 0.3em;
	border-radius: 5px;
	}

	.column>+ {
	margin-top: 0.5em;
	}

	.row {
	max-width: 650px;
	margin: auto;
	}
	</style>
	</head>

	<body>
	<div class="row">
	<p>
	<a href="#python">Python</a>,
	<a href="#js">Javasript</a>,
	<a href="#shell">Shell</a>,
	<a href="#css">Css</a>
	</p>
	<h3 id="python">Python</h3>
	<div class="column">
	<p>basic variables</p>
	<pre>
	num = 3
	nums = [1, 2, 3, 4, 5]
	sum = sum(nums)
	avg = sum / len(nums)
	print(sum)</pre>
	<p>available array funcs:
	<code>append</code><code>clear</code><code>pop</code><code>reverse</code><code>sort</code>
	</p>
	<hr>
	<p>
	a function
	</p>
	<pre>
	def printThis(param):
	print("printing:", param)</pre>
	<hr>
	<p>
	a program
	</p>
	<pre>
	def inc(val):
	return val + 1

	if __name__ == "__main__":
	print("this is a main function")
	num = 2
	print(inc(num))</pre>
	</div>

	<h3 id="js">Javascript</h3>
	<div class="column">
	<p>
	variables
	</p>
	<pre>
	let num = 3;
	num += 2;
	let nums = [1,2,3,4,5,6]</pre>
	<hr>
	<p>
	control flow
	</p>
	<pre>
	let vals = []
	for(let i = 2; i <= 100; i+=2){
	vals.push(i)
	}
	console.log(vals)
	</pre>
	<hr>
	<p>
	functions
	</p>
	<pre>
	function setContent(id, cont){
	let elem = document.getElementById(id);
	elem.innerHtml = cont;
	}
	setContent("out", "hello, world!")
	</pre>
	</div>

	<h3 id="shell">Shell</h3>
	<div class="column">
	<p>
	several commands used in the shell for network management
	</p>
	<pre>
	ip netns list // list all networking namespaces
	sudo ip netns exec <netns> ip -4 addr show // show ip addresses in netns

	sudo ip netns exec <netns> ip addr add 10.0.0.202/24 dev <netns>.<vlan>
	sudo ip netns exec <netns> ip -4 addr show \| grep -oP '(?<=inet\s)\d+(\.\d+){3}'</pre>
	</div>

	<h3 id="css">CSS</h3>
	<div class="column">
	<p>
	padding/margin side order
	</p>
	<pre>
	padding: <all>;
	padding: <vert> <horiz>;
	padding: <top> <horiz> <bottom>;
	padding: <top> <right> <bottom> <left>;</pre>
	<hr>
	<p>
	margin between all child elements (except first one)
	</p>
	<pre>
	.column > * + * {
	margin-top: 0.5em;
	}</pre>
	</div>
	<a href="#">top</a>
	</div>
	</body>

	</html>