2>&1

"Web development" on https://aligot-death.space, available at https://aligot-death.space/wiki/webdev-en

wiki/webdev web development network nginx pelican https UX UI design

Web development

web development tips and notes.

Read it aloud: play pause stop

Content

Writing#

Colours#

There is no "systematic" approach to colours: it's all a matter of design decision. Do not fall into the whole "triad/split complementaries" trap from palette creation tools. Choose a main "colour" with multiples shades and tints, and a main accent colour. Build a palette from that, and add necessary colours (e.g. warnings and success texts) based on how good they look with the rest.

An interesting article on the subject: Building Your Color Palette on refactoringui.com.

The only framework for palette creation is AA(A) colour constrasts (see Accessibility).

For instance, first choose a text colour and a background color:

#002a38
text
#f6f5f0
background

The choose an "accent" colour for elements that need to pop:

#002a38
text
#f6f5f0
background
#a54747
accent

Then choose intermediate colours, for nuance and more or less important elements:

#002a38
text
#294d59
darker
#446874
intermediate
#b4c9d0
lighter
#f6f5f0
background
#a54747
accent

Depending on your needs, you might require more nuances:

#002a38
text
#213e48
darkest
#294d59
darker
#355a65
dark
#446874
intermediate
#86a6b0
light
#b4c9d0
lighter
#dbe5e9
lightest
#f6f5f0
background
#a54747
accent

And finally add colours for specific cases such as error messages, warning… etc:

#c72323;
red
#eea828;
orange
#e8e852;
yellow
#47b787;
green
#5057ba;
blue
#7d517d;
purple
#ffe3ff;
lila
#88b4a8;
flat-green
#333333;
charcoal

The colours should be defined using CSS's variables to ensure consistency between elements.

Design#

Typography#

Notable typefaces#

atypical open-source typefaces http://velvetyne.fr/

Tools#

(Kind of broken) @font-face CSS rules and various format generator (woff woff2 ttf) https://transfonter.org/

Typical workflow#

typeface/font downloader ttf woff woff2 https://google-webfonts-helper.herokuapp.com/fonts/zilla-slab?subsets=latin,latin-ext Add latin-ext if available Copy and paste font-face CSS rules, add font-display: swap;

html5#

boilerplate#

Partially inspired by this

 1  <!DOCTYPE html>
 2  <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 3    <head>
 4      <meta charset="UTF-8" />
 5      <meta name="viewport" content="width=device-width,
 6      initial-scale=1.0">
 7      <title>home | nemecl.eu</title>
 8      <base href="https://nemecl.eu/"/>
 9      <meta name="title" content="home | nemecl.eu">
10      <meta name="description" content="Homepage for nemecl.eu. Homemade interwebz, some kind of chaos garden.">
11      <link rel="icon" type="image/png" href="https://rsc.aligot-death.space/images/favicon.png" />
12 
13      <link rel="preload" href="main.css" as="style">
14      <link rel="preload" href="https://rsc.aligot-death.space/css/base.css" as="style"/>
15 
16      <link rel="preload" href="/rsc/webfonts/inconsolata/inconsolata-v20-latin-ext_latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
17 
18      <link rel="stylesheet" href="https://rsc.aligot-death.space/css/base.css" type="text/css" />
19      <link rel="stylesheet" href="main.css" />
20 
21      <link rel="canonical" href="http://nemecl.eu/">
22      <meta property="og:title" content="home | nemecl.eu">    <meta property="og:locale" content="en_GB">
23      <meta property="og:type" content="website">
24      <meta property="og:url" content="http://nemecl.eu/">
25      <meta property="og:description" content="Homepage for nemecl.eu. Homemade interwebz, some kind of chaos garden.">
26      <meta property="og:image" content="https://rsc.aligot-death.space/images/favicon.png">
27 
28      <meta name="twitter:card" content="summary">
29      <meta name="twitter:title" content="nemecl.eu">
30      <meta name="twitter:url" content="https://nemecl.eu">
31      <meta name="twitter:site" content="@nemecle">
32      <meta name="twitter:description" content="Welcome to my small patch of homemade interwebz, some kind of chaos garden.">
33      <meta name="twitter:image" content="https://rsc.aligot-death.space/images/favicon.png">
34      <!--<base href = "https://nemecl.eu"/>-->
35 
36      <meta name="theme-color" content="#eaeaea">
37 
38      <script src="https://rsc.aligot-death.space/scripts/instant-page_5.1.0.js" type="module"></script>
39 
40      <meta name="format-detection" content="telephone=no">
41      <meta name="twitter:dnt" content="on">
42    </head>
43    <body>

<article> is not "article" as in blog post, but as in "shop article": you can use it for instance for a list of articles. An article would simply be in a <main> element, under a <section> in necessary

CSS#

sort CSS properties by alphabetical order https://jerrylowm.medium.com/alphabetize-your-css-properties-for-crying-out-loud-780eb1852153

"classless" CSS is a framework that doesn't use html classes or IDs, and only leverages html elements. It's not necessarly a good idea to apply it to everything but using as little classes and IDs as possible makes writing pages easier.

Avoid margin to simplify layout management: Margin considered harmful

"full-bleed" layout: a flexible layout for width-contrained content, while allowing exceptions. See this article

Serving#

Default "catch all" nginx server block#

from nginx documentation.

 1  http {
 2    index index.html;
 3 
 4    server {
 5      listen 80 default_server;
 6      server_name _; # This is just an invalid value which will never trigger on a real hostname.
 7      access_log logs/default.access.log main;
 8 
 9      server_name_in_redirect off;
10 
11      root  /var/www/default/htdocs;
12    }
13  }

Test#

General test for DNS, HTTPS, content...: https://check-your-website.server-daten.de/?q=nemecl.eu

Security#

https://infosec.mozilla.org/guidelines/web_security https://blog.vnaik.com/posts/web-attacks.html

https/SLL#

certbot cron#

1  0 2 * * 1 certbot certonly --agree-tos -m nemecle@riseup.net -n --webroot -w /var/www/txt.nemecl.eu -d txt.nemecl.eu && service nginx reload

CSP for simple static website#

1  add_header Content-Security-Policy "default-src self https://rsc.aligot-death.space; child-src 'none'; object-src 'none'; require-trusted-types-for 'script';";

CORS#

if CORS "was blocked because of a disallowed MIME type (“text/html”)." for a js file, might 404/40*

Performance#

https://web.dev/measure/

Accessibility#

log in: two steps is bad: let enter email&passwd, and if no account expand second passwd field etc

accessibility test: ctrl+win+enter for windows narrator

https://www.matuzo.at/blog/i-totally-forgot-about-print-style-sheets/ Testing print style: https://www.matuzo.at/blog/i-totally-forgot-about-print-style-sheets/

tota11y, accessiblity tool in the browser

https://webaim.org/resources/contrastchecker/

Simple speech synthesis

SEO#

Test twitter integration: https://cards-dev.twitter.com/validator