Skip to content

Commit

Permalink
add slides for comp3110 presentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Craftidore
Craftidore committed Apr 19, 2024
1 parent e22491e commit 3eb0613
Show file tree
Hide file tree
Showing 157 changed files with 38,604 additions and 0 deletions.
225 changes: 225 additions & 0 deletions slides/comp3110/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>OOP and Functional Programming</title>

<link rel="stylesheet" href="reveal/dist/reset.css">
<link rel="stylesheet" href="reveal/dist/reveal.css">
<link rel="stylesheet" href="reveal/dist/theme/black.css">

<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="reveal/plugin/highlight/monokai.css">
<style>
.fragment.disappear-after.visible:not(.current-fragment) {
display: none;
height:0px;
line-height: 0px;
font-size: 0px;
}
pre {
width: fit-content !important;
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Networking: A Windows and Linux Comparison*</h1>
<p class="fragment" data-fragment-index="1">*With tangents</p>
<aside class="notes">
<pre style="white-space: pre-wrap;">
- Only covered networking on windows
- Useful, but one won't always be programming for Windows
- Not full detail about Linux's implementation under-the-hood
</pre>
</aside>
</section>
<section>
<h2>More Similar Than You Think</h2>
<pre class="cpp fragment disappear-after" data-fragment-index="0"><code data-trim data-noescape
>int rc = WSAStartup();
// Do addrinfo setup
rc = getaddrinfo("craft-ublue-desktop", "3000", &amp;hints, &amp;result)
SOCKET sock = INVALID_SOCKET;
sock = socket(result-&gt;ai_family,
result-&gt;ai_socktype,
result-&gt;result-&gt;ai_protocol);
rc = sendto(sock,
"Hello, world!", strlen("Hello, world!")+1,
(sockaddr*)result-&gt;ai_addr, result-&gt;ai_addrlen);
freeaddrinfo(result);
closesocket(sock);
WSACleanup();</code></pre>
<pre class="cpp fragment disappear-after" data-fragment-index="1"><code data-trim data-noescape
>int rc; // No WSAStartup
// Do addrinfo setup
rc = getaddrinfo("craft-ublue-desktop", "3000", &amp;hints, &amp;result)
int sock = INVALID_SOCKET;
sock = socket(result-&gt;ai_family,
result-&gt;ai_socktype,
result-&gt;result-&gt;ai_protocol);
rc = sendto(sock,
"Hello, world!", strlen("Hello, world!")+1,
(sockaddr*)result-&gt;ai_addr, result-&gt;ai_addrlen);
freeaddrinfo(result);
close(sock);
// No WSACleanup</code>
</pre>
</section>
<section>
<ul>
<li><pre class="cpp" style="margin: 10px;"><code>int rc = WSAStartup();</code></pre></li>
<li><pre class="cpp" style="margin: 10px;"><code>SOCKET sock = INVALID_SOCKET;</code></pre></li>
<li><pre class="cpp" style="margin: 10px;"><code>closesocket(sock);</code></pre></li>
<li><pre class="cpp" style="margin: 10px;"><code>WSACleanup();</code></pre></li>
</ul>
<aside class="notes">
<pre style="white-space: pre-wrap;">
As you can see, very _very_ few differences.
Before I talk about the differences, why are they similar?
For this, history!
</pre>
</aside>
</section>
<section>
<h2>Berkeley Sockets, POSIX, and UNIX*</h2>
<p>*Tangent #1</p>
<blockquote class="fragment disappear-after" data-fragment-index="0">"You really need to know more unix than windows, and we don't have it in
enough classes. We touch on it a little here and a little there, and you do
some with it in Operating Systems, but not enough. So take it upon yourself to
learn a lot about it."</blockquote>
<cite class="fragment disappear-after" data-fragment-index="0">- Dr. Baird</cite>
<ol class="fragment" data-fragment-index="1">
<li>UNIX operating system created: Early 70s</li>
<li class="fragment" data-fragment-index="2">CSRG releases Berkeley Software Distribution: 1976</li>
<li class="fragment" data-fragment-index="3">DARPA contracts CSRG to work on ARPANET: 1982</li>
<li class="fragment" data-fragment-index="4">POSIX Created: 1988</li>
<li class="fragment" data-fragment-index="5">CSRG funding ran out; BSD open-sourced: 1990</li>
</ol>
<aside class="notes">
<pre style="white-space: pre-wrap;">
- UNIX was first OS built with high-level lang. Created by AT&amp;T.
Various other OSes built ontop of UNIX code; BSD one of these
- BSD created; common distribution with many userspace programs
- POSIX standard for OSes, APIs, environment, available programs, etc.
Based on UNIX+BSD additions, and including BSD's sockets impl.
- BSD's interface for sockets: unofficial standard, integrated into POSIX w/mods
</pre>
</aside>
</section>
<section>
<h2>GNU and Linux</h2>
<p class="fragment" data-fragment-index="1">GNU stands for GNU's Not UNIX.</p>
<p class="fragment" data-fragment-index="2">Aims to be an Open-Source implementation of POSIX standard, but not officially POSIX-certified</p>
<aside class="notes">
<pre style="white-space: pre-wrap;">
- GNU is both most widely-used version of UNIX, and also not technically UNIX
- GNU is the layer on top of Linux that makes it a usable OS
- GNU's glibc provides implementations of Berk. Sockets for Linux
</pre>
</aside>
</section>
<section>
<h2>GNU's POSIX Sockets functions</h2>
<pre class="c">
<code class="data-trim data-noescape">ssize_t __libc_sendto (int fd, const void *buf,
size_t len, int flags,
__CONST_SOCKADDR_ARG addr, socklen_t addrlen) {
return SYSCALL_CANCEL (sendto, fd, buf, len, flags,
addr.__sockaddr__, addrlen);
}
weak_alias (__libc_sendto, sendto)</code></pre>
<aside class="notes">
<pre style="white-space: pre-wrap;">
- I've slightly simplified the function.
- Notice it's making a syscall.
- What's a syscall? Note ASM.
- Note reason we have to use syscalls as userspace
</pre>
</aside>
</section>
<section>
<h2>In the Kernel</h2>
<ol class="fragment" data-fragment-index="1">
<li>Syscall calls __sys_socket()</li>
<li class="fragment" data-fragment-index="2">Allocates socket struct on heap</li>
<li class="fragment" data-fragment-index="3">Maps socket struct to file descriptor</li>
<li class="fragment" data-fragment-index="4">Creates 'pseudofile' representing socket</li>
<li class="fragment" data-fragment-index="5">Maps pseudofile to file descriptor</li>
<li class="fragment" data-fragment-index="6">Returns file descriptor</li>
</ol>
<aside class="notes">
<pre style="white-space: pre-wrap;">
- sendto is a crazy complicated syscall
- socket is a bit simpler
</pre>
</aside>
</section>
<section>
<h2>Everything is a File*</h2>
<p>*Tangent #2</p>
<pre class="c fragment" data-fragment-index="1"><code class="data-trim data-noescape">/* Windows: */
sock = socket(/* ... */);
closesocket(sock);
/* Linux/Mac/BSD/etc.: */
sock = socket(/* ... */);
close(sock);</code></pre>
<aside class="notes">
<pre style="white-space: pre-wrap;">
- UNIX, for those of you who've taken SoftEng,
has high internal consistency.
- UNIX philosophy drove this; still relevant today
- 'write programs to do 1 and only 1 thing'
- 'Everything is a file' (keyboard/printer/hard drive)
- Interactions like write/read
- Linux, as UNIX-like, follows this as well
- cin/cout are files w/fd, for example,
but our sockets are too
</pre>
</aside>
</section>
<section>
<h2>Windows usage of Berkeley Sockets</h2>
<p>Windows uses the Berkeley Sockets API, but it doesn't fit in well.</p>
<ol class="fragment" data-fragment-index="1">
<li>WSAStartup and WSACleanup required on Windows</li>
<li>SOCKET is an unsigned int, and not an int (so INVALID_SOCKET is MAX_INT, not -1)</li>
<li>SOCKETs are their own thing, instead of generic file descriptors</li>
<li>closesocket() used instead of close()</li>
</ol>
<aside class="notes">
<pre style="white-space: pre-wrap;">
Windows uses Berkeley sockets, but they don't fit in.
At minimum, PascalCase vs all-lowercase.
Behavior inconsistent with rest of OS.
Still probably the right decision; people more
likely to use your OS when they don't need to learn new things.

conclusion: it is fascinating how much an operating system from the 70s still impacts our coding today.
</pre>
</aside>
</section>
</div>
</div>

<script src="reveal/dist/reveal.js"></script>
<script src="reveal/plugin/notes/notes.js"></script>
<script src="reveal/plugin/markdown/markdown.js"></script>
<script src="reveal/plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,

// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>
19 changes: 19 additions & 0 deletions slides/comp3110/reveal/LICENSE
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
Copyright (C) 2011-2023 Hakim El Hattab, http://hakim.se, and reveal.js contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
50 changes: 50 additions & 0 deletions slides/comp3110/reveal/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<p align="center">
<a href="https://revealjs.com">
<img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text-sticker.png" alt="reveal.js" width="500">
</a>
<br><br>
<a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
<a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
</p>

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/).

The framework comes with a powerful feature set including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX typesetting](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and an [extensive API](https://revealjs.com/api/).

---

Want to create reveal.js presentation in a graphical editor? Try <https://slides.com>. It's made by the same people behind reveal.js.

---

### Sponsors
Hakim's open source work is supported by <a href="https://github.com/sponsors/hakimel">GitHub sponsors</a>. Special thanks to:
<div align="center">
<table>
<td align="center">
<a href="https://workos.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=revealjs&utm_source=github">
<div>
<img src="https://user-images.githubusercontent.com/629429/151508669-efb4c3b3-8fe3-45eb-8e47-e9510b5f0af1.svg" width="290" alt="WorkOS">
</div>
<b>Your app, enterprise-ready.</b>
<div>
<sub>Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.</sup>
</div>
</a>
</td>
</table>
</div>

---

### Getting started
- 🚀 [Install reveal.js](https://revealjs.com/installation)
- 👀 [View the demo presentation](https://revealjs.com/demo)
- 📖 [Read the documentation](https://revealjs.com/markup/)
- 🖌 [Try the visual editor for reveal.js at Slides.com](https://slides.com/)
- 🎬 [Watch the reveal.js video course (paid)](https://revealjs.com/course)

---
<div align="center">
MIT licensed | Copyright © 2011-2023 Hakim El Hattab, https://hakim.se
</div>
69 changes: 69 additions & 0 deletions slides/comp3110/reveal/css/layout.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/**
* Layout helpers.
*/

// Stretch an element vertically based on available space
.reveal .stretch,
.reveal .r-stretch {
max-width: none;
max-height: none;
}

.reveal pre.stretch code,
.reveal pre.r-stretch code {
height: 100%;
max-height: 100%;
box-sizing: border-box;
}

// Text that auto-fits its container
.reveal .r-fit-text {
display: inline-block; // https://github.com/rikschennink/fitty#performance
white-space: nowrap;
}

// Stack multiple elements on top of each other
.reveal .r-stack {
display: grid;
}

.reveal .r-stack > * {
grid-area: 1/1;
margin: auto;
}

// Horizontal and vertical stacks
.reveal .r-vstack,
.reveal .r-hstack {
display: flex;

img, video {
min-width: 0;
min-height: 0;
object-fit: contain;
}
}

.reveal .r-vstack {
flex-direction: column;
align-items: center;
justify-content: center;
}

.reveal .r-hstack {
flex-direction: row;
align-items: center;
justify-content: center;
}

// Naming based on tailwindcss
.reveal .items-stretch { align-items: stretch; }
.reveal .items-start { align-items: flex-start; }
.reveal .items-center { align-items: center; }
.reveal .items-end { align-items: flex-end; }

.reveal .justify-between { justify-content: space-between; }
.reveal .justify-around { justify-content: space-around; }
.reveal .justify-start { justify-content: flex-start; }
.reveal .justify-center { justify-content: center; }
.reveal .justify-end { justify-content: flex-end; }
Loading

0 comments on commit 3eb0613

Please sign in to comment.