g

2023-11-07 21:25:24 -06:00 · 2023-11-07 21:25:24 -06:00 · eecc704fee
commit eecc704fee
8 changed files with 354 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+/dist
+*.pdf
+*.pdfpc
--- a/index.html
+++ b/index.html
@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html>
+  <div id="app"></div>
+  <script src="./index.jsx" type="module"></script>
+</html>
--- a/index.jsx
+++ b/index.jsx
@ -0,0 +1,21 @@
+import React, { renderDom, useState } from "./react";
+
+/** @jsx React.createElement */
+function App() {
+  const [value, setValue] = useState();
+
+  return (
+    <>
+      <p>Counter value: {value}</p>
+      <button onClick={() => setValue((i) => i + 1)}>Increment</button>
+    </>
+  );
+}
+
+renderDom(
+  document.getElementById("app"),
+  <>
+    <App />
+    <App />
+  </>
+);
--- a/notes.md
+++ b/notes.md
@ -0,0 +1,117 @@
+# WWW
+
+- Didn't really have much put together but still wanted to do a talk, so here we are.
+
+# Who am I
+
+- Former webmaster
+  - I made the current ACM website!
+  - Discuss Drupal?
+- Programming languages
+  - Hate every language
+- 4 years industry
+- 10+ years complaining
+  - Javascript was my first language, so soft spot in my heart
+  - I have seen many things come and go (lead into next slide)
+
+# History
+
+- Was gonna put subjective history, but all history is subjective
+- These are all things that at some point I believe "took the web by storm"
+
+- HTML
+  - I mean, this is the platform, so I have to put this here
+  - Styling done via attributes
+  - Frames / tables for layout
+- Javascript
+  - Rather unglamorous
+- CSS
+  - Don't know much, let's gloss over it
+- Flash
+  - Super easy to make and publish things
+- jQuery
+  - One of the longest lasting web frameworks
+- Coffeescript
+  - Introduced a lot of funny little syntax
+  - Transpiling wasn't new, but warmed a lot of people up to the idea of transpiling
+  - Used by a lot of big projects and companies
+  - Benefits not really helpful anymore since they got added to ES6
+- Angular
+- ES6
+  - fetch
+  - spread operator
+  - arrow functions
+
+This is where my list ends, but still lots of new and interesting Javascript projects today.
+
+# Things we fixed
+
+- Scoping
+  - Var/Let
+- Arrow functions
+  - Eliminated `this`
+- Modules
+  - Massively improved analyzability + tree-shaking
+- STDLIB
+  - Map/Set/Symbol/etc
+  - toSorted/map/filter/reduce
+  - Observers
+  - bigints
+
+# Good things
+
+- Bundling
+  - This is basically just preprocessors
+  - Other languages should have this
+- HMR
+  - Incredibly useful and versatile
+  - `watchexec`
+- SSR
+  - Solved the problem of not being able to render immediately
+  - Good for static site generators like Astro
+- X-plat UI
+  - Electron/Tauri
+  - Lot of people could develop really fast
+  - Compare to Qt
+  - Don't play the "familiarity" card
+
+# Reactivity
+
+- Flux
+  - Single point of update
+  - Redux
+  -
+- Signals
+  - Enables better reactivity
+  - Note on Svelte+friends: they talk about compiling but it seems a lot of their compiled code isn't really that much more concise, large runtime
+
+Which brings me to my controversial take:
+
+# Web is a solid choice
+
+- "Small" software as we know it today pretty much doesn't really exist, given the complexity of hardware and needs of users
+- We have optimized for "having nice things" a lot, and there's no point in taking it
+
+# Bad
+
+- Equality
+  - Truthy /falsy
+  - `==` still in the language, typescript doesn't really fix this
+  - Macros
+    - JS was supposed to be a Lisp
+    - No nice features from homoiconicity
+- Runtime
+  - Privacy discussion
+- Ecosystem
+  - NPM sucks
+  - Lots of packages for small simple things
+  - Supply chain attacks
+  - Security of running npm software on ur own computer, possibly an OS problem instead
+- Lack of competition in browsers
+  - WEI / FLOC / google mess
+
+# What's next?
+
+- HTMX
+- CCSS
+- Declarative web framework
--- a/presentation.typ
+++ b/presentation.typ
@ -0,0 +1,51 @@
+#import "@preview/polylux:0.3.1": *
+
+#set page(paper: "presentation-16-9")
+#set text(size: 25pt)
+
+#polylux-slide[
+  #align(horizon + center)[
+    = Compile-Time Programming
+
+    Michael Zhang
+    
+    #datetime.today().display("[month repr:long] [day], [year]")
+  ]
+]
+
+#polylux-slide[
+  == What is compile time?
+
+  #table(
+    columns: (auto, auto),
+    stroke: none,
+    gutter: 35pt,
+
+    ```c
+    int doTheFunny(int n) {
+      int result = 0;
+      for (int i = 0; i < n; i++) {
+        result += i;
+      }
+      return result;
+    }
+
+    int main() {
+      return doTheFunny(21);
+    }
+    ```,
+
+    [
+      #pause
+      ```
+      main:
+        mov     eax, 210
+        ret
+      ```
+    ]
+  )
+]
+
+#polylux-slide[
+
+]
--- a/presentation2.typ
+++ b/presentation2.typ
@ -0,0 +1,102 @@
+#import "@preview/polylux:0.3.1": *
+#import themes.simple: *
+#show: simple-theme
+
+#title-slide[
+  = WWW
+
+  Compendium of interesting web dev + Javascript factoids
+
+  Michael Zhang
+]
+
+#slide[
+  == Who am I #pause
+
+  - Former webmaster
+  - Programming languages
+  - 4 years of industry experience
+  - 10+ years of experience complaining about Javascript
+]
+
+#slide[
+  == History
+
+  #columns(2)[
+    - HTML (1991)
+    - Javascript (1995)
+    - CSS (1996)
+    - Flash (1995)
+    - JSON (2001)
+    - jQuery (2006)
+    - HTML 5 (2008)
+    - Node.js (2009)
+    - CoffeeScript (2009)
+    - Angular (2010)
+    - Typescript (2012)
+    - asm.js (2013)
+    - Webpack (2014)
+    - Babel (2014)
+    - Atom Shell (Electron) (2015)
+    - ECMAScript 6 (2015)
+    - React (2015)
+  ]
+]
+
+#slide[
+  == Things we fixed
+
+  #columns(2)[
+    - JS features
+      - Scoping
+      - Arrow functions
+      - Modules
+      - Standard library
+    - Layout
+      - Flex
+      - Selectors
+  ]
+]
+
+#slide[
+  == Good things
+
+  - Bundling
+  - HMR
+  - SSR + Hydration
+  - Cross-platform UI
+  - Reactivity...
+]
+
+#slide[
+  == Let's talk about reactivity
+
+  - Flux architecture vs. MVC vs. FRP
+  - Signal-based state management
+]
+
+#focus-slide[
+  == Web is a solid choice for UI
+]
+
+#slide[
+  == Bad
+
+  - JS Language
+    - Equality still sucks
+    - Prototypes still suck
+    - No macros
+  - Runtime
+    - Fingerprinting
+  - Ecosystem
+    - Bloat
+    - Lack of competition in browsers
+]
+
+#slide[
+  == What's next?
+
+  - HTMX?
+  - CCSS?
+  - Fully declarative web framework?
+]
--- a/react.js
+++ b/react.js
@ -0,0 +1,46 @@
+let id = 1;
+function createElement(type, props, ...children) {
+  const struct = {
+    id,
+    type,
+    props,
+    children: children.map((child) =>
+      typeof child === "object" ? child : { type: TEXT_NODE }
+    ),
+  };
+  id += 1;
+  return struct;
+}
+
+function intoDom(virtEl) {
+  if (!virtEl) return null;
+  if (typeof virtEl === "string") return document.createTextNode(virtEl);
+
+  console.log("vi", virtEl);
+  if (typeof virtEl.type === "function") {
+    return intoDom(virtEl.type());
+  }
+
+  const el = virtEl.type
+    ? document.createElement(virtEl.type)
+    : document.createDocumentFragment();
+  for (const c of virtEl.children ?? []) {
+    const domC = intoDom(c);
+    if (domC) el.appendChild(domC);
+  }
+  return el;
+}
+
+export function renderDom(domEl, virtEl) {
+  domEl.appendChild(intoDom(virtEl));
+}
+
+export function useState() {
+  let value;
+  const setter = (newValue) => {
+    value = newValue;
+  };
+  return [value, setter];
+}
+
+export default { createElement };
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    modulePreload: {
+      polyfill: false,
+    },
+  },
+});