= webdev

== using curl for a submit-like POST request

curl --data "param=value" http://lukas-prokop.at/

== disabling HTTP TRACE for security reasons on Apache

RewriteEngine On
RewriteCond %{REQUEST_METHOD} ^TRACE
RewriteRule .* - [F]

== Set windows cmd.exe to UTF-8

chcp 65001

== ARIA landmark roles

role="X" where X is one of {application banner complementary contentinfo form main navigation search}

== viewport sizes

mobile:   …–440px
tablet:   400–880px
desktop:  >880px

@font-face {
  font-family: "Open Sans";
  src: url("path.woff2") format("woff2"),
       url("path.woff") format("woff"),
       url("path.ttf") format("truetype"),
       url("path.otf") format("opentype");
}

== Javascript frameworks

Vue, React, Tailwind, Vite

== WebGL

https://webglfundamentals.org/

== WebAssembly

https://wasmbyexample.dev/home.en-us.html

== CSS
=== add URL with inline data

1. echo '<svg xmlns="http://www.w3.org/2000/svg" … </svg>' | base64
2. remove line breaks in output
3. replace "…" in the following text with the previous result: ".myfancyicon::before { content: url(data:image/svg+xml;base64,…); }"

This can also be done with font files, e.g. "font-family: MyFont; src:url(data:application/font-woff2;charset=utf-8;base64, … )"

=== always recommended

box-sizing: border-box;

=== meyer reset

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


=== Generic CSS attributes

all attribute accept [initial], [inherit], [unset], and [revert]

=== Web typography

web-typography related CSS attributes

glyph-related:
  initial-letter        size and sink for dropped, raised, and sunken initial letters; [<length> <length2>] for "<length> lines tall, baseline at line <length2>"
  font
    font-family                specifies a prioritized list of one or more font family names and/or generic family names for the selected element: [serif], [sans-serif], [cursive], [monospace], [fantasy], [system-ui], [ui-serif], [ui-sans-serif], [ui-monospace], [ui-rounded], [math], [fangsong], …
    font-size                  sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth: [xx-small], …, [medium], …, [xxx-large], [smaller], [larger], [12px], [0.8em], [80%], …
    font-style                 sets whether a font should be styled with a normal, italic, or oblique face from its font-family: [normal], [italic], [oblique], [oblique 10deg]
    font-variant
      font-variant-alternates  controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values: [normal], [historical-forms], [stylistic(user-defined-ident)], [character-variant(user-defined-ident)], [annotation(user-defined-ident)], …
      font-variant-caps        controls the use of alternate glyphs used for small or petite capitals or for titling: [normal], [small-caps], [all-small-caps], [petite-caps], [all-petite-caps], [unicase], [titling-caps]
      font-variant-east-asian  controls the use of alternate glyphs for CJK: [normal], [ruby], [jis78], [jis83], [jis90], [jis04], [simplified], [traditional], [full-width], [proportional-width], [ruby full-width jis83], …
      font-variant-emoji       specifies the default presentation style for displaying emojis: [normal], [text], [emoji], [unicode]
      font-variant-ligatures   controls which ligatures and contextual forms are used in the textual content of the elements it applies to: [normal], [none], [common-ligatures], [discretionary-ligatures], [historical-ligatures], [contextual] … or the same with "no-" prepended
      font-variant-numeric     usage of alternate glyphs for numbers, fractions, and ordinal markers: [normal], [ordinal], [slashed-zero], [lining-nums], [oldstyle-nums], [proportional-nums], [tabular-nums], [diagonal-fractions], [stacked-fractions], [oldstyle-nums stacked-fractions]
      font-variant-position    controls the use of alternate, smaller glyphs that are positioned as superscript or subscript: [normal], [sub], [super]
    font-weight                sets the weight (or boldness) of the font: [normal], [bold], [bolder], [lighter], or some numeric value like [700]
  font-feature-settings        controls advanced typographic features in OpenType fonts: ["smcp" on] ["swsh" 2] ["smcp", "swsh" 2], …
  font-kerning                 sets the use of the kerning information stored in a font: [auto], [normal], [none]
  font-language-override       controls the use of language-specific glyphs in a typeface: [normal], ["ENG"], ["TRK"], …
  font-optical-sizing          sets whether text rendering is optimized for viewing at different sizes: [none], [auto]
  font-palette                 specifies one of the many palettes contained in a color font that a user agent may use for the font: [normal], [light], [dark], [--var-ref], [palette-mix(in lch, --blue, --yellow)]
  font-size-adjust             provides a way to modify the size of lowercase letters relative to the size of uppercase letters, which defines the overall font-size: [none], [from-font], [ex-height 0.5], [cap-height 2], [ch-width 3], [from-font 3], …
  font-synthesis
  font-synthesis-position      synthesize the subscript and superscript "position" typefaces when they are missing in a font family? yes [auto] or no [none]
  font-synthesis-small-caps    synthesize the small-caps typefaces when they are missing in a font family? yes [auto] or no [none]
  font-synthesis-style         synthesize the oblique typefaces when they are missing in a font family? yes [auto], yes if font-style:italic is not set [oblique-only], or no [none]
  font-synthesis-weight        synthesize the bold typefaces when they are missing in a font family? yes [auto] or no [none]
  font-variation-settings      provides low-level control over variable font characteristics by letting you specify the four letter axis names of the characteristics you want to vary along with their values: ["xhgt" 0.7], ["wght" 50], …
  text-rendering        (taken over from SVG) [optimizeLegibility], [geometricPrecision], [optimizeSpeed]?
  tab-size              space representing a U+0009 HORIZONTAL TAB

word/span level:
  quotes                      sets how the browser should render quotation marks via <q>: two strings
  text-autospace              spacing when text switches between CJK and non-CJK characters
  text-box
    text-box-trim             remove space between X and text box (trim-start) or space between baseline and text box (trim-end)
    text-box-edge             X is {upper end of capital letters [cap], text box [text], or x-height [ex]}
  text-combine-upright        vertical text only, shall text be written horizontally [all] or e.g. arabic digits of a year 90° tilted downwards [none]? tate-chū-yoko "縦中横" in Japanese, or as "橫向文字" in Chinese.
  text-decoration
    text-decoration-color     color of the decoration
    text-decoration-line      position of the line
    text-decoration-skip      which parts shall be skipped? [spaces]? [objects] like inline images? [leading-spaces]? [trailing-spaces]?
    text-decoration-skip-ink  shall glyph ascenders and descenders be skipped? yes [all] or no [none]? or the unspecified default mode [auto]?
    text-decoration-style     style: [solid]? [double]? [dotted]? [dashed]? [wavy]?
    text-decoration-thickness thickness of the decoration
  text-emphasis               emphasis as often done in CJK writing (marks above text)
    text-emphasis-color       color of the emphasis marks
    text-emphasis-position    [over] or [under]? and [right] or [left]?
    text-emphasis-style       [triangle], [filled], [double-circle], a Unicode character, …?
  text-shadow                 which shadow shall be applied (x- & y-offset & blur radius & color)
  text-spacing-trim           set internal spacing for CJK punctuation characters and at start or end of text lines if the font supports OpenType Alternate Half Widths (halt) or Contextual Half-width Spacing (chws) feature
  text-transform              replace text by similar characters: [uppercase], [lowercase], [capitalize], [full-width], [full-size-kana], [math-auto], …
  text-underline-offset       adjust offset by some <length> if text-decoration:underline is set
  text-underline-position     adjust position of underline if text-decoration:underline is set, [auto], [under], (in vertical writing) [left], or (in vertical writing) [right]
  unicode-bidi                together with direction, defines how bidirectional text in a document works: [normal], [bidi-override], [plaintext], [isolate-override]
  white-space                 sets how white space inside an element is handled: [normal], [pre], [pre-wrap], [pre-line], [wrap], [collapse], [preserve nowrap]
  white-space-collapse        controls how white space inside an element is collapsed: [collapse], [preserve], [preserve-breaks], [preserve-spaces], [break-spaces]
  word-break                  sets whether line breaks appear wherever the text would otherwise overflow its content box: [normal], [break-all], [keep-all], [break-word]
  word-spacing                sets the length of space between words and between tags: some <length>

line-related:
  alignment-baseline    (taken over from SVG) how the baseline is defined (e.g. [ideographic], [text-bottom], [text-top]) relative to other text
  dominant-baseline     determine or re-determine a scaled-baseline-table; in that sense it defines which baseline mostly applies
  hyphenate-character   character used at the end of a line before a hyphenation break, [auto] or some Unicode character
  hyphenate-limit-chars specifies the minimum word length to allow hyphenation of words as well as the minimum number of characters before and after the hyphen; two numbers or [auto] respectively
  hyphens               defines whether line breaks shall be hyphenated. [none], [manual], or [auto]?
  line-break            how to break lines of CJK text when working with punctuation and symbols; [auto], [anywhere], [normal], or [loose]?
  line-height           sets the height of a line box in horizontal writing modes: <length>
  line-height-step      if content does not fit into the given line-height, compute the closest next multiple of this value and use it as line-height
  text-align            alignment of a text block
  text-align-last       alignment of the last line
  text-indent           indentation of a paragraph
  text-justify          justification if text-align:justify is set. [inter-word], [inter-character], [distribute], …
  text-wrap             line breaking (=wrapping), [wrap], [nowrap], [balance], [pretty], or [stable]?
    text-wrap-mode      shall text be wrapped? yes [wrap] or no [nowrap].
    text-wrap-style     how shall text be wrapped? [auto], [balance], [pretty], or [stable]?

paragraph level / block-level elements:
  break-after            is it ok to introduce a page/column/region break after this element? yes [all] or no [avoid] or other keywords depending on page/column/region context and whether it is the [left] or [right] printed page or [recto] or [verso]
  break-before           same as break-after but "before this element?"
  break-inside           page, column, or region breaks inside element? [auto], [avoid], [avoid-page], [avoid-column], [avoid-region], [inherit], [initial], [revert], …
  direction              [ltr] or [rtl]  (should be set through HTML dir attribute instead!)
  line-clamp             allows limiting of the contents of a block to the specified number of lines: some integer
  text-orientation       if writing-mode:horizontal-tb is NOT set, place characters [upright] or 90° downwards?
  text-overflow          text overflows box. how to handle? [clipped] to cut off in middle of glyph, show an [ellipsis] …, or display a custom string
  vertical-align         sets vertical alignment of an inline, inline-block or table-cell box: [baseline], [top], [middle], [buttom], [sub], [text-top]
  writing-mode           sets whether lines of text progress horizontally or vertically as well as the direction in which blocks progress: [horizontal-tb], [vertical-rl], [vertical-lr], [sideways-rl], [sideways-lr]?

page level:
  orphans                minimum number of lines in a block container that must be shown at the bottom of a page, region, or column
  page                   specify the named page, a specific type of page defined by the @page at-rule: some string
  text-size-adjust       mobile device render for large viewports, inflate text, and map to small viewport. text-size-adjust:none turns text inflation off (recommended for responsive websites)
  widows                 sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column: some <integer>






Webdevelopment notes
====================

.. contents::

This page lists framework, tips and notes helpful in web development.

Tips and tricks
---------------

* `CSS animated loaders <https://mastodon.social/@anatudor/112517174442041289>`__ by Ana Todur
* `CSS animation: “Floating Cloud Background” <https://codepen.io/shshaw/pen/DxJka>`__
* `Resilient web design <https://resilientwebdesign.com/>`__: recites the history of the web and how to approach elements like languages
* `“You might not need jQuery” <http://youmightnotneedjquery.com/>`__
* `“how to manage HTML DOM with vanilla JavaScript only?” <https://htmldom.dev/>`__
* `flexbox guide <https://css-tricks.com/snippets/css/a-guide-to-flexbox/>`__, `grid guide <https://css-tricks.com/snippets/css/complete-guide-grid/>`__
* `slides of a web engine developer about Javascript optimization and Unicode handling <https://speakerdeck.com/mathiasbynens/>`__
* `“7 Principles of Icon Design: Clarity, Readability, Alignment, Brevity, Consistency, Personality, Ease of Use.” <https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2>`__
* `Media queries <https://mediaqueri.es/>`__

Accessibility
~~~~~~~~~~~~~

* `“accessibility checker” <https://khan.github.io/tota11y/>`__
* Tool by WebAIM: https://wave.webaim.org/report
* https://benjaminwand.github.io/Web-accessibility_101/
* C3 Inclusion Operation Center

  * https://c3ioc.de/
  * https://c3ioc.de/speakersdesk.html#english
  * https://c3ioc.de/about.html#english

Wordpress related
~~~~~~~~~~~~~~~~~

* https://github.com/SchumacherFM/wordpress-to-hugo-exporter

HTTP operation notes
~~~~~~~~~~~~~~~~~~~~

CREATE
  "submit data objects for archive"
GET
  "retrieve archived data objects"
DELETE
  "delete archived data objects"

"Following submission, the service must provide an identifier that can be used to retrieve the archived data and/or associated evidence."

"Submission, retrieval, query state, and deletion of archived data objects are necessary basic functions of a long-term archive service."

"A long-term archive service must be capable of providing evidence that can be used to demonstrate the integrity of data for which it is responsible, from the time it received the data until the expiration of the archival period of the data."

"Data is the principal asset protected by a long-term archive service. The principle threat that must be addressed by a long-term archive service is an undetected loss of data integrity."

Tools
-----

Tools for frontend development:

* `A privacy-friendly drop-in replacement for Google Fonts <https://fonts.coollabs.io/>`__
* `PageSpeed Insights <https://pagespeed.web.dev>`__

Tools for backend development:

* https://httpbingo.org/
* https://github.com/postmanlabs/httpbin
* `“Free IP Geolocation API” <https://freegeoip.app/>`__
* `“What is ngrok? Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels” <https://ngrok.com/product>`__

Tools for creators:

* `Create neat source code screenshots for microblogging <https://carbon.now.sh/>`__

Content to reuse
----------------

Photography, stock photos and high-res images:

* `“Free, high resolution images.” <https://littlevisuals.co/>`__
* `“Biodiversity Heritage Library” <https://www.flickr.com/photos/biodivlibrary/>`__
* `“Lizenzfreie Stockfotos, Vektorbilder, Videos und Musik” <https://de.depositphotos.com/>`__
* `top wallpapers at wallhaven <https://wallhaven.cc/toplist?page=3>`__
* `The internet’s source of freely-usable images. <https://unsplash.com/>`__

Icon sets:

* `Iconfinder <https://www.iconfinder.com/>`__
* `“The noun project: Icons for everything” <https://thenounproject.com/>`__
* `Numix (cool icon sets) <https://github.com/killown/numix-white/>`__
* `Your Ultimate Icon Library <https://app.streamlinehq.com/icons>`__
* `“beautifully crafted animated icons” <https://icons.pqoqubbw.dev/>`__
* `Heroicons <https://heroicons.com/>`__

Patterns / Texture

* `“Subtle Patterns” <https://www.toptal.com/designers/subtlepatterns/>`__
* `Generated SVG background patterns <https://web.archive.org/web/20140207222739/http://svgeneration.com/>`__

Color pallets:

* `Color pallet <https://color.adobe.com/create>`__
* `Sorted CSS colors <https://enes.in/sorted-colors/>`__
* `Accessible color palette generator <https://venngage.com/tools/accessible-color-palette-generator>`__
* `Palettes on colourlovers <http://www.colourlovers.com/palettes>`__

Frontend frameworks:

* `Tailwind CSS <https://tailwindcss.com/>`__
* `Bootstrap: Build fast, responsive sites with Bootstrap <https://getbootstrap.com/>`__
* `Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces. <https://bulma.io/>`__
* `Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. <http://sass-lang.com/>`__
* `Pure.css. A set of small, responsive CSS modules that you can use in every web project. <https://purecss.io/>`__
* `MVP.css. A minimalist stylesheet for HTML elements <https://andybrewer.github.io/mvp/>`__
* `It's CSS, with just a little more. <http://lesscss.org/>`__
* `Blueprint is a CSS framework, which aims to cut down on your development time <http://www.blueprintcss.org/>`__
* `Minimal CSS Framework for semantic HTML <https://picocss.com/>`__
* `Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts <https://edwardtufte.github.io/tufte-css/>`__

Inspiration
-----------

* `“isometric graphics library for HTML5 canvas” <http://jdan.github.io/isomer/>`__

design_inspiration
~~~~~~~~~~~~~~~~~~

General web design:

* `curated.design: “Curated web design inspiration catalog” <https://web.archive.org/web/20230224014540/http://curated.design/>`__ (website itself has nice, rounded tiles) redirects to `craftwork.design <https://craftwork.design/curated/websites/>`__ these days
* `tao-digital.at: modern vertical layout with good balance between topic (left, e.g. “Der Nutzen”) and content (list items on the right) <https://web.archive.org/web/20220628024857/https://www.tao-digital.at/case/allesbauer/>`__
* `sparkleshare.org: fresh icon design used on website <https://web.archive.org/web/20130808071911/http://sparkleshare.org/>`__
* `bright, white, fresh webblog design focused on images <https://web.archive.org/web/20170617120630/https://www.tooplate.com/live/2082-pure-mix>`__
* `designspiration.net: Images chosen by uniform color aligned in mansory layout <https://web.archive.org/web/20230701085520/https://www.designspiration.com/>`__
* `witheve.com: nice two-column design <https://web.archive.org/web/20250224115924/https://witheve.com/>`__
* `golang.github.io: nice color choice (blue and black) for text versus links/headers <https://web.archive.org/web/20250326111608/https://golang.github.io/dep/blog/>`__
* `lesswrong: nice non-intrusive menu, nice blocks in main text, and beautiful background image with lines on the right <https://web.archive.org/web/20250210042900/https://www.lesswrong.com/>`__
* `agencyinbiosphere.com: non-standard monospace-text design with neat color gradient lines to split sections apart <https://web.archive.org/web/20250124184434/http://agencyinbiosphere.com/de/archives/project/urban-oasis-vienna>`__
* `bohrn-mena.at: neat topic overview page <https://web.archive.org/web/20180711163218/http://bohrn-mena.at/politik/>`__
* `cruncher.ch: very cool left menu bar with colorful 3D logo and non-obstrusive menu as well as clear contrast between flow text and source code <https://web.archive.org/web/20240502151041/https://cruncher.ch/blog/printing-music-with-css-grid/>`__

Only one specific element:

* `whopayswriters: nice logo <https://web.archive.org/web/20170622142345/http://whopayswriters.com/#/results>`__
* `nice presentation of a book (metadata, plot, …) <https://shop.oegbverlag.at/leistungsklasse-9783990464731>`__

Nice font choice:

* nice header font: sorts-mill-goudy-1,sorts-mill-goudy-2,Muli,Helvetica,Arial,sans-serif
* nice article reading font: Spectral
* Martin Thür uses "Plus Jakarta Sans" as font `on his weblog <https://www.martinthuer.at/2025/06/stueck-werk/>`__ and it looks nice

Unsorted (TODO to be sorted):

* https://insect.sh/
* https://harmonia-game.com/
* https://www.redblobgames.com/pathfinding/a-star/introduction.html
* https://gratisography.com/
* https://creativemarket.com/
* Speckyboy: https://speckyboy.com/category/typography/
* James Brocklehurst: https://www.behance.net/mightymeta
* https://www.gwern.net/Self-decrypting-files
* beautiful JS slides: http://progslides.github.io/ss18/tut2.html#8
* Vietnamese typography: https://vietnamesetypography.com/samples/
* balanced color selection: https://loopholelabs.io/
* nice code presentation: https://scale.sh/

Awesome pure-CSS & HTML projects
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

* https://benjaminaster.com/css-minecraft/
* https://a.singlediv.com/
* https://lyra.horse/css-clicker/
* https://keithclark.co.uk/labs/css-3d-shadows/
* https://suricrasia.online/puzzlebox/