learning-website-framework1-4  Exercise 1: Find the Palette Hiding in the Fragments
=================================================================================

Write palette.py. For each folder of fragments it should report how many files
there are, how many distinct colours appear in their <style> blocks, how much of
the files is CSS, and the most common colours.

Save as palette.py:

import os, re, sys
from collections import Counter

STYLE = re.compile(r"<style[^>]*>(.*?)</style>", re.S | re.I)
HEX = re.compile(r"#[0-9a-fA-F]{6}\b|#[0-9a-fA-F]{3}\b")

def fragments(folder):
    for name in sorted(os.listdir(folder)):
        if name.endswith(".html") and not name.endswith("_print.html"):
            yield name, open(os.path.join(folder, name), encoding="utf-8").read()

def analyse(folder):
    colours, style_bytes, total_bytes, n = Counter(), 0, 0, 0
    for name, text in fragments(folder):
        n += 1
        total_bytes += len(text.encode("utf-8"))
        for css in STYLE.findall(text):
            style_bytes += len(css.encode("utf-8"))
            colours.update(c.lower() for c in HEX.findall(css))
    return n, total_bytes, style_bytes, colours

if __name__ == "__main__":
    for folder in sys.argv[1:]:
        n, total, style, colours = analyse(folder)
        print(f"{os.path.basename(folder)}: {n} files, {len(colours)} distinct colours")
        print(f"  style blocks: {style:,} of {total:,} bytes ({100*style/total:.0f}%), "
              f"about {style//n:,} bytes of CSS per file")
        print("  top colours: " + ", ".join(f"{c} x{k}" for c, k in colours.most_common(8)))

Run it on several course folders:

  python palette.py <folder> <folder> ...

Output (checked by running it on the real content folders):

hungarian-basic-3: 12 files, 14 distinct colours
  style blocks: 58,068 of 430,341 bytes (13%), about 4,839 bytes of CSS per file
  top colours: #5aa469 x108, #2a2d3a x72, #1a1d27 x60, #a0a4b8 x60, #7a7f96 x48, #e2e4ec x36, #fff x36, #7c5cbf x36
german-basic-1: 12 files, 14 distinct colours
  style blocks: 56,455 of 323,808 bytes (17%), about 4,704 bytes of CSS per file
  top colours: #e0a82e x115, #2a2d3a x68, #1a1d27 x57, #7a7f96 x52, #e2e4ec x40, #a0a4b8 x38, #7c5cbf x36, #fff x24
japanese-basic-1: 12 files, 14 distinct colours
  style blocks: 58,008 of 344,566 bytes (17%), about 4,834 bytes of CSS per file
  top colours: #d64550 x108, #2a2d3a x72, #1a1d27 x60, #a0a4b8 x60, #7a7f96 x48, #e2e4ec x36, #fff x36, #7c5cbf x36
apache-in-depth: 10 files, 19 distinct colours
  style blocks: 46,727 of 157,334 bytes (30%), about 4,672 bytes of CSS per file
  top colours: #f0938a x80, #c9d1d9 x71, #30363d x70, #7a2118 x41, #2a1210 x31, #8b949e x30, #ffffff x30, #d22128 x21
programming: 30 files, 16 distinct colours
  style blocks: 63,406 of 548,869 bytes (12%), about 2,113 bytes of CSS per file
  top colours: #6ee7b7 x116, #c9d1d9 x89, #30363d x87, #8b949e x60, #059669 x58, #161b22 x29, #21262d x29, #0d1117 x29
django-rebuild: 12 files, 21 distinct colours
  style blocks: 61,801 of 191,134 bytes (32%), about 5,150 bytes of CSS per file
  top colours: #44b78b x120, #c9d1d9 x108, #30363d x73, #14523f x48, #ffffff x37, #0c4b33 x37, #161b22 x37, #0a1f14 x36

What the numbers show
---------------------
1. The three language courses (Hungarian, German, Japanese) use the SAME
   colours except one. #2a2d3a, #1a1d27, #a0a4b8, #7a7f96, #e2e4ec and #7c5cbf
   appear in all three, and the accent differs: #5aa469 (Hungarian), #e0a82e
   (German), #d64550 (Japanese). A shared design system would turn that one
   difference into a single variable.
2. The technical courses use a different neutral palette (#30363d borders,
   #c9d1d9 text, #8b949e muted) with their own accents (#f0938a for Apache,
   #44b78b for the Django rebuild, #6ee7b7 for sidebar cheat sheets). So there
   are two neutral families on the site, not one.
3. Colours appear in multiples of the file count (108 = 9 x 12 in the Hungarian
   course): the same CSS is copied into every chapter.
4. Between 12% and 32% of each file's bytes are CSS, and every visitor
   downloads that CSS again on every chapter.

WHY THIS WORKS AS AN ANSWER
---------------------------
You cannot design a shared system until you know what is actually shared. The
script measures it instead of guessing, and the result gives the design system
its two first decisions: one accent variable, and a choice between the two
neutral families.