Add Get Going With WebAssembly

Author: johanbrandhorst

JohanBrandhorst-GetGoingWithWebAssembly/README.md

@@ -0,0 +1,23 @@
+# Running this presentation
+
+## Requirements
+
+Go present:
+
+```bash
+$ go get golang.org/x/tools/present
+```
+
+## Running
+
+In order to fit in all the speakers notes for each slide I've made some small
+adjustments to the speaker notes CSS. To take advantage of this, make sure to
+run the presentation locally, specifying a custom base path.
+
+```bash
+$ present -notes -base .
+Open your web browser and visit http://127.0.0.1:3999
+Notes are enabled, press 'N' from the browser to display them.
+```
+
+Navigate to http://127.0.0.1:3999 to view the presentation.

JohanBrandhorst-GetGoingWithWebAssembly/anatomy.png

@@ -0,0 +1,20 @@
+package main
+
+import (
+	"net/http"
+	"strings"
+)
+
+var contentTypeSetter = func(h http.Handler) http.Handler {
+	return http.HandlerFunc(func(resp http.ResponseWriter, req *http.Request) {
+		if strings.HasSuffix(req.URL.Path, ".wasm") {
+			resp.Header().Set("content-type", "application/wasm")
+		}
+		h.ServeHTTP(resp, req)
+	})
+}
+
+func main() {
+	fs := http.FileServer(http.Dir("./html"))
+	http.ListenAndServe(":8080", contentTypeSetter(fs))
+}

JohanBrandhorst-GetGoingWithWebAssembly/content-type.go

@@ -0,0 +1,7 @@
+package main
+
+func main() {
+	doc := webapiall.GetWindow().Document()
+	d := doc.GetElementById("demo")
+	d.SetInnerHTML("Hello <b>Go!</b>")
+}

JohanBrandhorst-GetGoingWithWebAssembly/ebiten.png

@@ -0,0 +1,9 @@
+package main
+
+import "syscall/js"
+
+func setDemo() {
+	doc := js.Global().Get("document")
+	d := doc.Call("getElementById", "demo")
+	d.Set("innerHTML", "Hello <b>Go!</b>")
+}

JohanBrandhorst-GetGoingWithWebAssembly/gopher_webassembly.png

@@ -0,0 +1,4 @@
+function setDemo() {
+    let d = document.getElementById("demo")
+    d.innerHTML = "Hello <b>Go!</b>"
+}

JohanBrandhorst-GetGoingWithWebAssembly/gopherjs.svg

@@ -0,0 +1,161 @@
+body {
+	margin: 0;
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 16px;
+}
+pre,
+code {
+	font-family: Menlo, monospace;
+	font-size: 14px;
+}
+pre {
+	line-height: 18px;
+	margin: 0;
+	padding: 0;
+}
+a {
+	color: #375EAB;
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+}
+p, ul, ol {
+	margin: 20px;
+}
+
+h1, h2, h3, h4 {
+	margin: 20px 0;
+	padding: 0;
+	color: #375EAB;
+	font-weight: bold;
+}
+h1 {
+	font-size: 18px;
+	padding: 2px 5px;
+}
+h2 {
+	font-size: 16px;
+}
+h3 {
+	font-size: 16px;
+}
+h3, h4 {
+	margin: 20px 5px;
+}
+h4 {
+	font-size: 16px;
+}
+
+div#heading {
+	margin: 0 0 10px 0;
+	padding: 21px 0;
+	font-size: 20px;
+	font-weight: bold;
+}
+
+div#heading .author {
+	padding-top: 10px;
+	font-size: 14px;
+	font-weight: normal;
+}
+
+div#topbar {
+}
+
+body {
+	text-align: center;
+}
+div#page {
+	width: 100%;
+}
+div#page > .container,
+div#topbar > .container {
+	text-align: left;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 0 20px;
+	width: 900px;
+}
+div#page.wide > .container,
+div#topbar.wide > .container {
+	width: auto;
+}
+
+div#footer {
+	text-align: center;
+	color: #666;
+	font-size: 14px;
+	margin: 40px 0;
+}
+
+.author p {
+	margin: 0;
+	padding: 0 20px;
+}
+
+div.code,
+div.output {
+	margin: 20px 20px 20px 40px;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+}
+
+div.output {
+	padding: 10px;
+}
+
+div.code { background: white; }
+div.output { background: black; }
+div.output .stdout { color: #e6e6e6; }
+div.output .stderr { color: rgb(244, 74, 63); }
+div.output .system { color: rgb(255, 209, 77) }
+
+.buttons {
+	margin-left: 20px;
+}
+div.output .buttons {
+	margin-left: 0;
+	margin-bottom: 10px;
+}
+
+#toc {
+	float: right;
+	margin: 0px 10px;
+	padding: 10px;
+	border: 1px solid #e5ecf9; 
+	background-color: #eee;
+	box-shadow: 3px 3px 2px #888888;
+
+	max-width: 33%;
+
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+}
+
+#tochead {
+	font-weight: bold;
+	font-variant: small-caps;
+	font-size: 100%;
+	text-align: center;
+	padding-bottom: 5px;
+}
+
+#toc ul, #toc a {
+	list-style-type: none;
+	padding-left: 0px;
+	color: black;
+	margin: 0px;
+}
+
+ul.toc-inner a {
+	padding-left: 10px !important;
+}
+
+@media print {
+	.no-print, .no-print * {
+		display: none !important;
+	}
+}