diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/css.md | 234 | ||||
| -rw-r--r-- | web/html.md | 217 | ||||
| -rw-r--r-- | web/htmx.md | 12 | ||||
| -rw-r--r-- | web/index.md | 5 | ||||
| -rw-r--r-- | web/networking.md | 12 | ||||
| -rw-r--r-- | web/tailwind.md | 12 | ||||
| -rw-r--r-- | web/wasm.md | 5 |
7 files changed, 497 insertions, 0 deletions
diff --git a/web/css.md b/web/css.md new file mode 100644 index 0000000..14367bc --- /dev/null +++ b/web/css.md @@ -0,0 +1,234 @@ +--- +layout: web +title: A Brief Reference for Modern CSS +--- + +# A Brief Reference for Modern CSS + +I like CSS. I really, really like CSS. I greatly enjoy just... fucking about with it, producing [pretty websites](https://apropos.codes) (egotistical, i know!) and [ugly websites](https://cursedc.tf/2023) and [weird-ass websites](https://cursedc.tf). + +But I don't like *everything* about CSS, and one of those things I don't like is how much I have to rely on references. Property names are remarkably unintuitive. And CSS is complicated! There's a lot to keep in your head, and it's ever changing - ever improving, I would say, but ever changing nonetheless. So I figured writing my *own* reference might help. + +So here is some sort of reference. If you're me, hi! I hope this was helpful. If you're not me, hi! I hope this is helpful. But you shouldn't be here really, go to the [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS) or the [Interneting is Hard tutorial](https://www.internetingishard.com/) or something. I wrote these notes for me: they do not cover things I do not care about: very notably browser support. *Especially* vendor prefixes but also just generally: if it works in modern Chrome and modern Firefox, it's good enough for me. + +https://css-tricks.com/whats-new-since-css3/ + +## Layout + +### flow + +### absolute + +### flexbox + +### grid + +## Media Queries + +## Selectors + +**attributes** go on elements... + +**identifiers** can be selected with `#`. + +**classes** can be selected with `.`. + +### combinators + +### nested queries + +Queries can be nested!!!!!1!! + +### pseudo-classes + +### pseudo-elements + +## Elements + +Many elements have default styles provided by the browser. These are accessible at ... in Firefox, and ... in Chrome. +resource://gre-resources/html.css + +### body and friends + +```css +body { + display: block; + margin: 8px; +} +``` + +```css +html, main, header, footer, div, +section, nav, article, aside, blockquote { + display: block; +} +``` + +### formatting + +```css +b, strong { + font-weight: bolder; +} +``` + +```css +i, em { + font-style: italic; +} +``` + +```css +u { + text-decoration: underline; +} +``` + +```css +s { + text-decoration: line-through; +} +``` + +```css +q:before { + content: open-quote; +} + +q:after { + content: close-quote; +} +``` + +```css +small { + font-size: smaller; +} +``` + +```css +sub { + vertical-align: sub; + font-size: smaller; +} +``` + +```css +sup { + vertical-align: super; + font-size: smaller; +} +``` + +```css +code { + font-family: -moz-fixed; +} +``` + +### paragraphs + +```css +p { + display: block; + margin-block: 1em; +} +``` + +```css +pre { + display: block; + font-family: -moz-fixed; + white-space: pre; + margin-block: 1em; +} +``` + +### headers + +```css +h1, h2, h3, h4, h5, h6 { + display: block; + font-weight: bold; +} + +h1 { + font-size: 2em; + margin-block: .67em; +} + +h2 { + font-size: 1.5em; + margin-block: .83em; +} + +h3 { + font-size: 1.17em; + margin-block: 1em; +} + +h4 { + font-size: 1.00em; + margin-block: 1.33em; +} + +h5 { + font-size: 0.83em; + margin-block: 1.67em; +} + +h6 { + font-size: 0.67em; + margin-block: 2.33em; +} +``` + +`h1`s nested within an `article`, `aside`, `nav`, or `section` behave somewhat strangely, acting as a smaller header depending on the level of nesting. + +### lists + +```css +li { + display: list-item; + text-align: match-parent; +} +``` + +```css +ul, menu { + display: block; + counter-reset: list-item; + margin-block: 1em; + padding-inline-start: 40px; + list-style-type: disc; +} +``` + +```css +ol { + display: block; + counter-reset: list-item; + margin-block: 1em; + padding-inline-start: 40px; + list-style-type: decimal; +} +``` + +Nested lists have no top or bottom margins. The `list-style-type` of unordered lists changes with depth: from a `disc`, to a `circle`, to a `square`. + +### meta + +```css +head, link, meta, title, style, script { + display: none; +} +``` + +___ are invisible. + +## Properties + +There are a *lot* of properties, of various elements, and things. + +`property left right center up` or whatever +this seems consistent and i don't know it diff --git a/web/html.md b/web/html.md new file mode 100644 index 0000000..6dcdef6 --- /dev/null +++ b/web/html.md @@ -0,0 +1,217 @@ +--- +layout: web +title: A Quick Guide to Modern HTML +--- + +# A Quick Guide to Modern HTML + +This guide is a work in progress! + +Modern HTML is a remarkably simple and coherent standard. + +## Basic HTML + +HTML is a *markup language* used for content on the web. It is composed of *tags*, that may be *nested* within each other to form a *document tree*. It is *semantic*: every tag + +and many tags indeed hold no purpose other than indicating ... + + +Every website you visit is composed of HTML, which alongside with styling via CSS... Modern websites are composed of somewhat atrocious amounts of + +Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance. + +HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img> and <input> directly introduce content into the page. Other tags such as <p> and </p> surround and provide information about document text and may include sub-element tags. Browsers do not display the HTML tags but use them to interpret the content of the page. + + +HTML is composed of *tags*. These tags are enclosed in angle brackets + +There are quite a few tags, but not overwhelmingly many. Here they all are. + +if your tag is not reserved, you can kinda just write whatever?? i like doing this + +There are about XX important tags. Here they all are. + +## Style + +- [`<b> </b>`](https://developer.mozilla.org/HTML/Element/b) or [`<strong> </strong>`](https://developer.mozilla.org/HTML/Element/strong): <b>bold</b> text +- [`<i> </i>`](https://developer.mozilla.org/HTML/Element/i) or [`<em> </em>`](https://developer.mozilla.org/HTML/Element/em): <i>italic</i> text +- [`<s> </s>`](https://developer.mozilla.org/HTML/Element/s): <s>struckthrough</s> text +- [`<u> </u>`](https://developer.mozilla.org/HTML/Element/u): <u>underlined</u> text +- [`<q> </q>`](https://developer.mozilla.org/HTML/Element/q): <q>quoted</q> text +- [`<small> </small>`](https://developer.mozilla.org/HTML/Element/small): <small>small</small> text +- [`<sub> </sub>`](https://developer.mozilla.org/HTML/Element/sub): <sub>subtext</sub> +- [`<sup> </sup>`](https://developer.mozilla.org/HTML/Element/sup): <sup>supertext</sup> +- [`<code> </code>`](https://developer.mozilla.org/HTML/Element/code): <code>text styled like code</code> + +Some emphasis must be put: these tags are **semantic**. They are not for styling! You have a much more expressive form of styling with CSS! +Given the existence of a quote key on most ASCII keyboards, this is not very useful, unless you're a stickler for Unicode quotes. + +## Wrappers + +These wrappers have no style associated with them, but are *semantically meaningful*. or is that true? they are all `block`, no? + +`<html>` +`<body>` +`<div> </div>` + +```css +<h1> </h1> +<h2> </h2> +<h3> </h3> +<h4> </h4> +<h5> </h5> +<h6> </h6> +``` + +`<p> </p>` +`<pre> </pre>` +`<br/>` +`<hr/>` +`<span> </span>` (or below) + +## Content + +```css +<a> +``` +`<img/>` +`<video>` +`<audio>` +`<track>` +`<canvas>` +`<iframe>` +`<math>` + +## Lists + +- [`<li value=1> </li>`](https://developer.mozilla.org/HTML/Element/li): + A *list element*. Goes within either `<ul>` or `<ol>`. When within `<ol>`, `value` indicates the list numbering should skip to its value. +- [`<ul> </ul>`](https://developer.mozilla.org/HTML/Element/ul): + An *unordered* list. Contains a bunch of `<li>`s. Displayed with bullet points by default. +- [`<ol type="1" start=1 reversed> </ol>`](https://developer.mozilla.org/HTML/Element/ol): + An *ordered* list. Contains a bunch of `<li>`s. Displayed as a numbered list by default. `type` indicates the numbering type, and can be one-of `a` (lowercase ASCII), `A` (uppercase ASCII), `i` (lowercase Roman), `I` (uppercase Roman), `1` (Arabic). `start` indicates the number to start from. The presence of `reversed` indicates the list ordering should be reversed. + +## Stuff + +`<button>` +`<details>`, `<summary>` +`<form>` +`<input/>` +`<label>` +`<map>`, `<area>` +`<meter>` +`<noscript>` +`<textarea>` +`<dialog>` +`<marquee>` +`<select>`, `<datalist>`, `<optgroup>`, `<option>` + +## Semantic + +Aside from being block elements, they have no styling... + +`<main> </main>` +`<header> </header>` +`<footer> </footer>` +`<nav> </nav>` +`<section> </section>` +`<aside> </aside>` +`<article> </article>` + +## Metadata + +`<head>` +`<meta>` +`<link>` +`<title>` +`<base>` + +```css +<style> +</style> +``` + +```css +<script> +</script> +``` + +`<template>`, `<slot>` + +Okay. That's everything important. 75 tags or so? I dunno. Manageable! + +--- + +## Tables + +- [`<table> </table>`](https://developer.mozilla.org/HTML/Element/table): + A table. Structured data. +- [`<thead> </thead>`](https://developer.mozilla.org/HTML/Element/thead): + A row of cells acting as a header. +- [`<tbody> </tbody>`](https://developer.mozilla.org/HTML/Element/tbody): + The cells that compose the body of the table. +- [`<tfoot> </tfoot>`](https://developer.mozilla.org/HTML/Element/tfoot): + A row of cells acting as a footer. +- [`<tr> </tr>`](https://developer.mozilla.org/HTML/Element/tr): + A row of cells. +- [`<td colspan=1 rowspan=1 headers=""> </td>`](https://developer.mozilla.org/HTML/Element/td): + Data cells. `colspan` and `rowspan` indicate their size in the table. `headers` indicates the ids of the corresponding header cells. +- [`<th scope="" colspan=1 rowspan=1 headers=""> </th>`](https://developer.mozilla.org/HTML/Element/th): + Header cells. `colspan` and `rowspan` indicate their size in the table. `headers` indicates the ids of the corresponding header cells. `scope` may be one-of `row`, `col`, `rowgroup`, `colgroup`, and indicates the set of cells the header corresponds to. +- [`<col span=1> </col>`](https://developer.mozilla.org/HTML/Element/col): + A column within a table. Columns span over atop rows. +- [`<colgroup span=1> </colgroup>`](https://developer.mozilla.org/HTML/Element/colgroup): + A group of columns within a table. +- [`<caption> </caption>`]((https://developer.mozilla.org/HTML/Element/caption): + The title of a table. + +The sheer quantity of tags for tables is quite intimidating. +In general, tables are *far* less used than they once were, thanks to improvements in the layout capabilities of CSS. +You can pretty much just ignore them. + +## Less Useful Elements + +`<fieldset>`, `<legend>` +`<figure>`, `<figcaption>` +`<picture>`, `<source>` +`<output for name>` + +- [`<dl> </dl>`](https://developer.mozilla.org/HTML/Element/dl): + A *description list*. Consists of terms (`<dt>`) and descriptions (`<dd>`). Ugly as sin, and scarcely used. +- [`<dt> </dt>`](https://developer.mozilla.org/HTML/Element/dt): + Specifies a *term* entry in a description list. +- [`<dd> </dd>`](https://developer.mozilla.org/HTML/Element/dd): + Specifies a *description* entry in a description list. +- [`<address> </address>`](https://developer.mozilla.org/HTML/Element/address): + An element indicating its contents are contact information. +- [`<blockquote cite="url"> </blockquote>`](https://developer.mozilla.org/HTML/Element/blockquote): + An element indicating its contents are an extended quotation. +- [`<data value="data"> </data>`](https://developer.mozilla.org/HTML/Element/data): + An element indicating its content has corresponding data, in the `value` attribute. +- [`<search> </search>`](https://developer.mozilla.org/HTML/Element/search): + An element indicating its contents are related to searching. +- [`<time datetime=""> </time>`](https://developer.mozilla.org/HTML/Element/time): + An element indicating a specific time. `datetime` must be set to a machine-readable format. +- [`<wbr> </wbr>`](https://developer.mozilla.org/HTML/Element/wbr): + An element that represents a word break *opportunity*. Browsers will prefer breaking there when possible. + +## Deprecation Fodder + +These elements are *really* useless. You shouldn't bother knowing them. They're in the spec, but scarcely used. + +- [`<abbr> </abbr>`](https://developer.mozilla.org/HTML/Element/abbr): An element for displaying abbreviations. +- [`<cite> </cite>`](https://developer.mozilla.org/HTML/Element/cite): An element indicating its contents are a citation. +- [`<del> </del>`](https://developer.mozilla.org/HTML/Element/del): An element for displaying deleted text. +- [`<dfn> </dfn>`](https://developer.mozilla.org/HTML/Element/dfn): An element indicating its contents are a definition. +- [`<ins> </ins>`](https://developer.mozilla.org/HTML/Element/ins): An element for displaying inserted text. +- [`<kbd> </kbd>`](https://developer.mozilla.org/HTML/Element/kbd): An element for displaying keyboard shortcuts. +- [`<mark> </mark>`](https://developer.mozilla.org/HTML/Element/mark): An element for displaying highlighted text. +- [`<samp> </samp>`](https://developer.mozilla.org/HTML/Element/samp): An element for displaying sample output. +- [`<var> </var>`](https://developer.mozilla.org/HTML/Element/var): An element for displaying mathematical variables. +- [`<embed type="mimetype" src="url"/>`](https://developer.mozilla.org/HTML/Element/embed): + An element for generic embedded content. `<object>` is generally slightly preferred, but `<img>`, `<audio>`, `<video>`, and the like are preferred over both of them. +- [`<object type="mimetype" data="url" name> </object>`](https://developer.mozilla.org/HTML/Element/object): + An element for displaying generic embedded content. Generally slightly preferred over `<embed>`, but `<img>`, `<audio>`, `<video>`, and the like are preferred over both of them. +- [`<menu> </menu>`](https://developer.mozilla.org/HTML/Element/menu): Officially identical to `<ul>` in syntax and semantics. Doesn't have much of a reason to exist. +- [`<progress value=50 max=100> </progress>`](https://developer.mozilla.org/HTML/Element/progress): + A worse version of `<meter>`. Like, this is *exactly* `<meter>`, but without the `min`, `low`, `high`, and `optimum` attributes. Why?? diff --git a/web/htmx.md b/web/htmx.md new file mode 100644 index 0000000..45b8c3c --- /dev/null +++ b/web/htmx.md @@ -0,0 +1,12 @@ +--- +layout: web +title: Exploring HTMX +--- + +# Exploring HTMX + +What is HTMX? + +https://htmx.org/docs/ + +do this when HTMX 2.0 releases! you've got stuff to do in the mean time diff --git a/web/index.md b/web/index.md new file mode 100644 index 0000000..46d48f7 --- /dev/null +++ b/web/index.md @@ -0,0 +1,5 @@ +--- +layout: web +--- + +# the world wide web diff --git a/web/networking.md b/web/networking.md new file mode 100644 index 0000000..b9d8a5b --- /dev/null +++ b/web/networking.md @@ -0,0 +1,12 @@ +--- +layout: web +title: computation/networking +--- + +# the networking layer of the internet + +## routing: IP, DNS + +## transport: TCP, UDP, QUIC + +## content: HTTP, FTP diff --git a/web/tailwind.md b/web/tailwind.md new file mode 100644 index 0000000..db27507 --- /dev/null +++ b/web/tailwind.md @@ -0,0 +1,12 @@ +--- +layout: web +title: A Brief Reference for TailwindCSS +--- + +# A Brief Reference for TailwindCSS + +I really like CSS. So I somewhat spurned Tailwind... Why would anyone want to write CSS in *classes*? Just use inline styles! + +Then I tried it out. It's really really nice actually. + +I appreciate Tailwind... it's a lot more coherent than CSS. But I still need a reference when I write it, mostly because I don't use it enough. So, here it is. diff --git a/web/wasm.md b/web/wasm.md new file mode 100644 index 0000000..33366d7 --- /dev/null +++ b/web/wasm.md @@ -0,0 +1,5 @@ +--- +layout: web +--- + +# webassembly |