Ingen avhengigheter
Ikke noe rammeverk, ikke noe byggesteg, ingen pakke å installere. Førti HTML-filer, ett stilark, 216 linjer ren JavaScript. Repoet er utrullingen.
- Uten byggesteg
- 8,2 KB JS
- Leselig i vis kilde
S3V
EN
S3V
EN
Ti verdener, bygget uten brief og uten frist. Hver teknikk på de sidene er en vi fakturerer for andre steder - så i stedet for å be deg stole på en case-studie, la vi arbeidet ligge åpent der du kan åpne kildekoden og sjekke.
Se de ti sideneEn tjenesteside er en påstand. Hvem som helst kan skrive "ytelse først" på en. Disse ti sidene er den samme påstanden, brukt opp - og hvis vi tok en snarvei, ligger den i kildekoden så du kan finne den.
Ikke noe rammeverk, ikke noe byggesteg, ingen pakke å installere. Førti HTML-filer, ett stilark, 216 linjer ren JavaScript. Repoet er utrullingen.
Fire diagrammer er skrevet i SVG ut fra tallene de beskriver, heller enn kalkert fra en illustrasjon, så geometrien må faktisk gå opp.
Hver scroll-innfelling, tellende tall, bildefylt kapittelnummer og animert bue går på én enkelt IntersectionObserver. Ikke noe scroll-bibliotek, ikke noe animasjonsbibliotek.
Forsiden laster 0,03 MB bilder på en skjermbredde på 393 px, ned fra 5,74 MB. Målt, fikset, målt igjen - inkludert feilen der forhåndslasting av kapittelnummerfyllene stille satte hver eneste lazy-attributt på siden ut av spill. Hovedbildet er en video, regissert heller enn stengt av: 1,9 MB bredformat på en PC, et portrettutsnitt på 0,6 MB på en telefon, og ingen av delene på 2G, på kvotert data, eller for noen som har bedt om redusert bevegelse - de får plakatbildet.
Hver verden får en komposisjon bygget for den verdenen. Uranus er en liten skive i mye tomrom fordi det beste nærbildet som noen gang er tatt av den er en blank sirkel - siden sier det heller enn å skjule det.
Hvert bilde er fritt tilgjengelig, verifisert før nedlasting. Speedmaster- fotografiet slo tre skarpere kandidater fordi de var CC BY og ville tvunget en kredittlinje inn i en bunntekst vi holdt på å slette.
Elleve sider, elleve forskjellige problemer å løse. Hva hver av dem faktisk var til for.
Den eneste siden her som regner ut det den viser. Keplerelementene fra JPL løses for hver frame, så de ti klodene står der de faktisk står, og ingen av overflatene er et fotografi: 89 KB WebGL2 skrevet for hånd, uten bibliotek og uten teksturer.
Se siden →Det eneste hovedbildet som deler seg vannrett, bilde over og tekst under. Én SVG tegner solranden, Jupiter og jorden i samme målestokk: en skive på 231 px ved siden av en prikk på 21 px.
Se siden →Hovedbildet speilvendt, planet til venstre og tekst til høyre. 3:2-resonansdiagrammet utleder seg selv - hvert overflatemerke ligger på banevinkelen ganger 1,5, så mønsteret er beregnet heller enn illustrert.
Se siden →En klode som puster på en CSS-animasjon på 20 sekunder, og nedstigningen fortalt som en klebrig kolonne: høyden blir stående fast mens atmosfæren beveger seg forbi.
Se siden →En atmosfære tegnet i riktig målestokk mot planetens radius, der Everest og et rutefly i marsjhøyde havner på samme hårstrek, pluss en sekvens som krymper planeten fem ganger ned til én piksel.
Se siden →Et fotografi av Speedmasteren heller enn en illustrasjon av en, en landings- logg, og en spesifikasjonsblokk som holder seg leselig på 393 px uten et andre oppsett.
Se siden →Den opprinnelige malen: kapittelnummer klippet mot et fotografi, en kortstokk med scroll-snap uten karusellbibliotek, og måner i bane på ett keyframe med negative forsinkelser slik at de ikke alle starter klokken tolv.
Se siden →Sammensetningsdiagrammet er tegnet ut fra det samme tallet telleren viser, så 90 prosent hydrogen trenger ingen andre verdi hardkodet inn i stilarket.
Se siden →Ringgeometri som en rotert ellipse med ramme i CSS heller enn et bilde, som er derfor navigasjonsskinnen på hver side ikke koster noe å laste.
Se siden →Helningsdiagrammet setter jorden på 23,4 grader ved siden av Uranus på 97,8, med ringene vinkelrett på aksen og etikettene løftet ut av rotasjonsgruppen så de ikke står på skrå.
Se siden →Skive nede til høyre, tekst oppe til venstre. Vindhastighetene animeres når diagrammet ruller inn i bildet, og historien om oppdagelsen med matematikk går som en nummerert kronologi.
Se siden →Fire krav, holdt for alle ti sidene. De er de samme fire vi holder på arbeid noen betaler for.
Klon repoet og åpne mappen - det er nettstedet. Ingenting å kompilere betyr ingenting som kan ryke mellom kilden og det en besøkende får.
Kortstokk, tellere, innfellinger, framdriftslinje: alt rent. Hver pakke som legges til er en vedlikeholdsregning som kommer senere, som regel på verst tenkelige tidspunkt.
Hver lisens sjekket før filen ble lastet ned, så ingenting skyldes noen og ingen bilder kan trekkes bort under siden senere.
Hvert tall på denne siden kom fra en ekte rendring på 1440 og 393 px, med en sjekk som flagger hvert bilde der den viste formen driver fra den naturlige.
