22 Mar 2021 (updated) — webdev web development network nginx pelican https UX UI design

Web development

web development tips and notes.

Content

Writing
Colours
Design
- Typography
- html5
- CSS
Serving
- Default "catch all" nginx server block
Test
Security
- https/SLL
- CORS
Performance
Accessibility
SEO
- link sharing

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

better typography CSS https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/ web typography https://css-tricks.com/typography-for-developers/ webfont guide https://www.freecodecamp.org/news/web-fonts-in-2018-f191a48367e8/

vertical rythm https://www.gridlover.net/try

@font-face CSS rules and various format generator (woff woff2 ttf) https://transfonter.org/ typeface/font downloader ttf woff woff2 https://google-webfonts-helper.herokuapp.com/fonts/zilla-slab?subsets=latin,latin-ext

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

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://cd.nemecl.eu/images/favicon.png" />
12 
13      <link rel="preload" href="main.css" as="style">
14      <link rel="preload" href="https://cd.nemecl.eu/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://cd.nemecl.eu/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://cd.nemecl.eu/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://cd.nemecl.eu/images/favicon.png">
34      <!--<base href = "https://nemecl.eu"/>-->
35 
36      <meta name="theme-color" content="#eaeaea">
37 
38      <script src="https://cd.nemecl.eu/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

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://cd.nemecl.eu; child-src 'none'; object-src 'none'; require-trusted-types-for 'script';";