Spring til indhold

Kolofon

Al teknologien bag engineer.company — hvad der når din browser, hvad der bygger siderne, og hvad der beviser dem.

Næsten alt her er lavet af andre og foræret væk. Denne side siger hvad, for et konsulenthus, der ikke vil fortælle, hvad det kører, beder om en tillid, det ikke selv har tilbudt.

Det er samtidig det korteste ærlige svar på “hvad arbejder I egentlig med”. Listen nedenfor er ikke en brochure — det er sitets egen stykliste, og du kan efterprøve hver eneste linje fra din egen browser.

Hvad der når din browser

Fem ting, og ikke andet: HTML, ét stylesheet, to webfonte, billeder og ét lille script, vi selv har skrevet.

  • HTML, skrevet færdigt, før du bad om det. Hver side er en fil på disken, ikke en skabelon, der samles per forespørgsel.
  • Ét CSS-bundt, samlet og fingeraftrykt ved bygning og leveret med en Subresource Integrity-hash, så din browser kan bekræfte, at det kom uændret frem. Med i bundtet er neat-annotations af Max Syabro (MIT) — de håndtegnede pile og marginnoter, tegnet i ren CSS.
  • Skrifttypen Ubuntu, af Dalton Maag for Canonical, under Ubuntu Font Licence. Serveret fra vores egen maskine — en webfont fra en andens CDN er en tredjepart, der ser dig læse.
  • Skrifttypen Shantell Sans, baseret på kunstneren Shantell Martins tuschhåndskrift, af Arrow Type / Stephen Nixon, under SIL Open Font License. Den skriver marginnoterne, serveres på samme måde og indlæses kun på de sider, der bærer en.
  • WebP- og PNG-billeder, skaleret ved bygning. Væggene, siderne her er bygget på, er fotografier. To er fra Unsplash: Tim Mossholder har taget den mørke puds, Joe Woods den hvide murstensvæg. Tre mere er John Snows, taget med en Galaxy S22 Ultra og givet til dette site: den lyse puds, den malede mursten og flisevæggen. Det lyse tema bærer én af sine fire vægge, trukket mens siden bygges, så sitet får ny beklædning, hver gang det udgives. Licensen kræver ingen kreditering — men en side, der navngiver en skrifttypes designer, bør ikke vente på at blive bedt. Mærket, tandhjulet, maskotten i hver eneste positur, du møder den i, portrættet og de to overlappende fotografier af vores eget kontor i København på om-siden er vores, taget eller tegnet her og renset for metadata, før de blev committet.
  • Ét lånt ikon. Mastodon-mærket i kolofonen kommer fra Font Awesome Free af Fonticons, under CC BY 4.0. Alle andre mærker her er tegnet til dette site, og dette er undtagelsen med vilje: et varemærke står for en andens tjeneste, så en tilnærmelse, tegnet om for at passe til vores eget sæt, ville være værre end et nøjagtigt lånt et. Krediten står på denne side og ikke i filen, fordi bygget minificerer dens HTML og fjerner den kommentar, ikonet bærer sin kreditering i.

Der kører ét script på dette site: vores eget, omkring en kilobyte, kun på porteføljesiden, hvor det filtrerer listen, mens du skriver. Det taler ikke med nogen og husker intet. Der sættes ingen cookies. Der hentes intet fra en anden virksomheds server — ingen analytics, ingen skrifttyper, ingen indlejret video, intet samtykkebanner, for der er intet at samtykke til. Åbn browserens netværkspanel og tæl værterne: der er én.

Hvordan siderne bliver til

  • Hugo — den statiske sitegenerator, skrevet i Go. Skabeloner, taksonomier, alle sprog og feeds er dens arbejde.
  • Markdown og Go-skabeloner til de håndskrevne sider og layoutene.
  • SQLite — porteføljen skrives ikke her. Den ligger i en flersproget CV-database og eksporteres ind i sitet af et Python-script, så en oplysning skrives ét sted og dukker op, hvor den hører hjemme.
  • Python til den eksport, og til at generere ikonsættet med ImageMagick ud fra én tegning af mærket.

Hvordan det bliver bevist

Der er ingen hostet byggetjeneste; kvalitetsporten kører på den maskine, sitet skrives på, og hver eneste advarsel er en fejl frem for en bemærkning.

  • vnu validerer HTML, Stylelint CSS.
  • axe-core gennemgår hver bygget side mod WCAG 2.2 A og AA, i begge farvetemaer — og den ligger i porten, ikke ved siden af den.
  • Puppeteer styrer headless Chromium til det, en validator ikke kan afgøre: målt kontrast, fokusrækkefølge, klikmålets størrelse, læsebredde, overløb, sideskift på tryk, og en pixelnøjagtig visuel regression via pixelmatch. Den tager også det billede, andre sider viser, når et link herfra bliver delt, så det kort er denne sides egen stilart og skrift frem for en tegning af dem.
  • Lighthouse holder performancebudgetterne; lychee tjekker, at hvert link stadig virker.
  • Prettier, markdownlint, ESLint, Ruff, basedpyright, yamllint, ShellCheck og codespell holder kilden ærlig; gitleaks sikrer, at ingen hemmelighed nogensinde bliver committet.
  • Task kører det hele under ét navn per opgave, og pre-commit kører den fil-nære halvdel igen ved hver commit, så gaten ikke er noget, nogen skal huske.

Hvor det kører

Én lille maskine klarer det hele: en DigitalOcean-server med én kerne, 512 MB hukommelse og en disk på 10 GB, placeret i Toronto i Canada og med adressen 165.227.39.206. Den adresse udleverer DNS alligevel til enhver, der spørger, så det at skrive den her sparer dig et opslag frem for at fortælle dig noget nyt. Hvad maskinen registrerer undervejs, står på privatlivssiden.

  • Debian er styresystemet.
  • Caddy besvarer hver webforespørgsel og forny HTTPS-certifikatet selv, fra Let’s Encrypt.
  • Agate, Gophernicus og Tor besvarer de tre andre: dette site er også en Gemini-kapsel på gemini://engineer.company, et Gopher-hul på gopher://engineer.company og en onion-tjeneste på http://engineer2ezpeji52ipphljcflzyhetvy5r6tnqubtq45nzlxxv6rsqd.onion/. Alle fire læser den samme mappe med filer, så én udrulning opdaterer dem alle, og ingen af dem kan komme ud af trit med de andre. Onion-tjenesten er den eneste indgang, vi kunne tilføje uden at åbne en port: tor ringer ud til introduktionspunkter, så maskinens åbne porte forbliver præcis, som de var. Webudgaven sender også en Onion-Location-header, så Tor Browser tilbyder den af sig selv. Adressen begynder med engineer, fordi vi brugte CPU-timerne på at gøre den læsbar — en bekvemmelighed, ikke et bevis. Det samme præfiks kan enhver få for de samme timer, så sammenlign hele adressen frem for begyndelsen af den.
  • Ansible beskriver serveren som kode, så den kan bygges igen frem for at skulle huskes.
  • Soft Serve er git-serveren bag Git Hub på git.engineer.company. Sitets egen kildekode ligger der.
  • restic tager backupperne væk fra maskinen.
  • Cloudflare besvarer DNS — og kun DNS. Sitet er bevidst ikke proxyet: åbenhed er mere værd for os end beskyttelsen, og en proxy ville sætte endnu en virksomhed mellem dig og os.
  • Post er Apple iCloud, og derfor lander adressen på kontaktsiden i en postkasse og ikke på en marketingplatform.

Standarder, det følger

  • WCAG 2.2 niveau AA, bevogtet frem for påstået.
  • schema.org-strukturerede data, der kun markerer det, som er sandt og synligt på siden.
  • Web App Manifest, så sitet kan installeres som app.
  • RSS, Atom og JSON Feed — alle tre med den fulde tekst. To XML-feeds frem for ét, fordi nogle læsere kun tager det ene af de to, og det er ikke til at forudsige hvilket.
  • RFC 9309 robots.txt, som tillader alt — søgemaskiner og AI-systemer på lige fod, for det, der står her, er skrevet for at blive læst. Den peger samtidig på det sitemap, begge slags følger. Der findes også et læsbart indeks over de samme sider, hvis man hellere vil bladre end at parse.
  • RFC 9116 security.txt, plus humans.txt, llms.txt, agents.txt og ai.txt til de maskiner, der kommer forbi — og ads.txt, der ikke godkender nogen, for her sælges der ingen annoncer.
  • Gemini, RFC 1436 Gopher og Tors onion-tjenester: de samme sider, serveret over alle tre på gemini://engineer.company, gopher://engineer.company og http://engineer2ezpeji52ipphljcflzyhetvy5r6tnqubtq45nzlxxv6rsqd.onion/, fra den samme mappe med filer som denne side — én udrulning opdaterer alle fire. Gemini og Gopher vil hver have sin egen klient frem for en browser; onion-tjenesten vil have en Tor-klient, og Tor Browser er den almindelige. Gopher har slet intet krypteringslag, så den bærer i klartekst, hvilken side du læste; Gemini krypterer det, men det netværk, du læser fra, ser stadig, hvilken adresse du bad om. Over onion-tjenesten ser netværket ingen af delene — af de fire gælder det kun der. Adressen er i sig selv tjenestens offentlige nøgle, så forbindelsen er autentificeret og krypteret, før der overhovedet tales HTTP: http:// er rigtigt og ikke sjusk, og et certifikat ville kun bevise et navn, som adressen allerede beviser matematisk.

Tjek det selv

Alt ovenfor er en påstand, og afsnittet før det nævner de værktøjer, vi selv kører på vores egen maskine — altså os, der retter vores egne opgaver. Herunder stilles de samme spørgsmål af nogen, der aldrig har hørt om os. Hvert link kører en live-test mod denne side eller mod adressen på den, du står på; ingen af dem tager vores ord for noget, og ingen af dem er vores.

  • W3C’s markup-validator læser sidens HTML op mod den levende standard. Det er samme motor som vnu ovenfor, kørt af W3C i stedet for af os.
  • W3C’s CSS-validator læser det stilark, siden her har på. Regn med, at den melder fejl, og læs dem, før du tror på dem: i august 2026 validerer den mod en profil, der stopper før system-ui, @property, clamp() i en font-size og scroll-drevne animationer — alle fire findes i browserne, og alle fire bruges her. Hver eneste indvending handler om en funktion, der er nyere end validatoren selv, og derfor er det Stylelint, vi rent faktisk holder stilarket op mod.
  • W3C’s feed-validator tjekker Atom-feedet, og samme tjeneste tjekker RSS-feedet. Den advarer om, at de fleste indslag deler ændringsdato, og den advarsel er rigtig: datoerne kommer fra git-historikken, og de fleste af siderne her blev faktisk skrevet i de samme få commits. Vi viser hellere en advarsel end at finde på en dato.
  • JSON Feed-validatoren tjekker det tredje feed, som W3C’s tjeneste ikke dækker — den er ældre end formatet.
  • PWABuilder læser manifestet og resten af det, der gør siden installerbar, fra Microsofts maskiner frem for vores.
  • W3C’s internationaliseringstjek læser de sprog- og tegnsætsangivelser, der gør den danske og den engelske udgave læselige for den rette læser.
  • Schema Markup Validator læser de strukturerede data, og Googles Rich Results Test fortæller, hvad en søgemaskine stiller op med dem.
  • PageSpeed Insights kører Lighthouse fra Googles maskiner frem for vores — ydelse, tilgængelighed, god skik og SEO.
  • Mozillas HTTP Observatory giver karakter for sikkerhedsheaderne, og Qualys SSL Labs for den HTTPS-opsætning, der ligger bag dem.
  • Security Headers er en second opinion på den første af de to, fra nogen helt tredje.

Det, ingen af dem kan tjekke, er påstanden om tilgængelighed, og det siger vi hellere selv end at lade et grønt mærke antyde noget andet. Intet automatisk værktøj finder mere end omkring en tredjedel af WCAG-fejlene — resten er vurderinger af, om en overskrift beskriver sit afsnit, eller om en alt-tekst siger det nødvendige, og dem kan en maskine ikke træffe. Testene ovenfor er gulvet, ikke beviset. Bruger du en skærmlæser her, og læses noget forkert op, så sig til — det er den rapport, vi ikke selv kan frembringe.

Tak

Hvert projekt ovenfor vedligeholdes af folk, der ikke var forpligtet til at dele noget som helst. Bygger du også på den stak, er det der, dine penge og dine fejlrapporter gør mest gavn.

Og hvis denne stak ligner din slags engineering, så sæt vores i arbejde.

Engineer-maskotten: en venlig blå og hvid robot i en kappe med printbaner, der flyver forlæns med den ene knytnæve fremme og kappen efter sig