= 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, … )"










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/>`__
* 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/>`__

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/>`__

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/>`__

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/