Snow peaks at dawn, lit pink from the side, rising out of a sea of cloud under a violet sky.

Pls make website

Human asked twelve years ago. Machine has now made it.

The brief, as received

Posted to r/ProgrammerHumor twelve years ago, with one amendment from Human this week.

Every line below is treated as a requirement. Follow one to see it working.

  1. Machine,That is me
  2. Pls make website,You are on it
  3. all responsive like,Done
  4. w/ BIG pictures ooo,Done
  5. use my fav fonts,Done

    Amendment: “I don’t know what my fav fonts would be. Probably like OpenSans.”

  6. also fancy menus with wooosh on,Done
  7. load fast plsDone
  8. Thanks,You are welcome
  9. HumanHello
  10. PS no bugs :)Tested

Brief, line 3

all responsive like,

Your window is being measured.

This page works at any width. It changes shape at these points. The one you are in now is filled in, and it moves if you resize the window.

  • Under 720 pxOne column. Phones get pictures no wider than 2560 px.
  • 720 to 899 pxThe letter gets its side column.
  • 900 px and upWords and demos sit side by side.
WebsiteHomePicturesFontsMenu
BIG picture

Words about the website.

More words about it.

Words stack when squished.

Brief, line 4

w/ BIG pictures ooo,

Human did not say pictures of what. Machine checked what big-picture websites used twelve years ago. It was mountains.

No mountain here is real and nobody’s photo was used. Machine rendered each one out of noise, then simulated rain to cut the valleys. The largest copy is 3840 pixels wide.

A jagged wall of snow-streaked peaks in hard midday light against a deep blue sky, with cloud at their feet.
Bigger mountain. Picture 2 of 3.

Brief, line 5

use my fav fonts,

Human does not know the fav fonts. Human said “Probably like OpenSans.” Machine accepted that as a signature.

Every letter on this page is Open Sans. The brief says fonts, plural, so this one file does the work of many. Weight and width are both adjustable. Try them, and type whatever you like.

800
75%
  • Fav font number oneLight 300
  • Fav font number twoRegular 400
  • Fav font number threeSemiBold 600
  • Fav font number fourExtraBold 800
  • Fav font number fiveCondensed 75%

Brief, line 7

load fast pls

These numbers are measured in your browser, on this visit. They keep counting as you scroll, because pictures only download when you get close to them.

Each picture exists in five sizes and two formats, and your browser takes the smallest that looks sharp. Each one has a tiny blurred stand-in built into the page, so no gap appears while it arrives.

  • First words on screen–
  • Page finished loading–
  • Downloaded so far–
  • Files fetched so far–
  • This page’s code, compressedHTML, CSS, JavaScript and stand-in pictures, all in one file14 KB
  • Frameworks, libraries and trackers0

Brief, line 10

PS no bugs :)

Testing

The page tests itself in your browser, right now, at your window size. If something fails here, the failure is shown and not hidden.

Machine can only test for the bugs it thought of. That is what the :) is for.

    Moonlit snow ridges under a dark sky full of stars, with a full moon high on the left.

    Human,

    Website made.

    Responsive like. Pictures BIG. Fonts Open Sans, probably. Wooosh on. Loads fast. Mountains imaginary.

    Thanks,

    Machine

    PS no bugs found :)

    Pls make website