v0.01 — stardate

Design for survival

Elon Musk, CEO van Tesla presenteerde vorige week een (soort van) kogelwerende, grijze kolos die doet denken aan vervoersmiddelen uit dystopische sci-fi films als Back to the Future en Blade Runner 2049: de Cybertruck.

Bij de website Vice zagen ze een auto ontworpen voor een selecte groep vermogenden, die ervan uitgaan dat er een kans is dat hun geciviliceerde wereld op een dag veranderd in oorlogsgebied (linkje).

“bashing the truck and chucking items at it on stage felt like Musk trying to prove that it can withstand the proletariat's molotovs when the revolution comes.”

Nu is van Elon Musk is bekend dat een sombere blik op de toekomst de drijfveer is achter veel van zijn projecten: Space X om naar Mars te kunnen vertrekken als het hier echt fout gaat, duurzame Tesla’s om wat tijd te rekken en mocht Mars niet lukken een Powerwall en Solarglass roofs om ‘off te grid’ lekker nog even te kunnen ‘surviven’. Dus dat de Cybertruck er uit ziet als een Hummer voor Star Trek fans verbaast niet heel erg. Elon Musk is trouwens niet de enige: volgens Vox.com is het bouwen van ondergrondse bunkers het nieuwe ding onder Silicon Valley miljardairs - linkje).

Maar wat mij vooral opviel, is het grote contrast met de zelfrijdende auto van Google. Het ontwerp van de Google Car was vriendelijk, aaibaar en vooral onschadelijk. Logisch als je het publiek wilt laten wennen aan onbekende en voor veel mensen wat enge techniek.

De ontwerpers van de Cybertruck pakken het wat minder subtiel aan: hun ontwerp is een radicale breuk met de gewoonte technologie te verpakken in een onschuldig uitziend jasje. Kennelijk leven we in andere tijden.

Het zal me benieuwen of hiermee een design trend gezet is, en de komende jaren meer bedrijven producten met zo'n *dystopisch design* op de markt gaan brengen. Tesla claimt dat er inmiddels 250.000 pre-orders zijn gevraagd, dus er lijkt wel een markt voor te zijn.

Captains log

Date
Done
Learned
Hr
22-05-2021
Layout en animatie changelog
Breedte en positie changelog geanimeerd obv vw
In gsap zelfde positionering systematiek hanteren als in je stijlsheet, anders onverwachte effecten. Dus niet in stylesheet: left: 100vw, en dan in gsap x: 300.
1
Scrolling changelog layover fix codepen) met behulp van GSAP DrawSVG plugin
Bij layover niet handig om main content alleen opacity te geven omdat deze klikbaar blijft wanneer er geen DOM element overheen ligt.
2
Ontwerp scribbles homepage.
Kleuren zijn moeilijk.
1
27-03-2021
SVG animaties homepage
Geprobeerd svg animaties te implementeren in eleventy
Fail. Lijkt erop dat 11ty bij build svg opbouw veranderd. Wordt vervolgd.
2
'Scribbles' svg's geanimeerd codepen) met behulp van GSAP DrawSVG plugin
DrawSVG kan geen externe svg's animeren. Inline svg's kunnen niet gebruikt worden als background en dus niet als pseudo element.
2
Ontwerp scribbles homepage.
Kleuren zijn moeilijk.
1
22-03-2021
CSS Grid
Stylen changelog table gebruikmakend van CSS Grid
Positionering met CSS Grid.
2
Ontwerp changelog table.
Wat in ontwerp eenvoudig is, is in techniek soms moeilijk.
1
11-03-2021
Templating
Implementatie van nunjucks templates en partials voor footer, header, content en changelog.
Dat foutmeldingen in terminal een boel tijd besparen als je ze tenminste ziet. Hoe je zowel .md als .html bestanden kunt gebruiken als basis. Wat frontmatter is.
3
Verdiept in templating languages.
Hoe templating languages (in dit geval nunjucks en liquid) werken en hoe je een basisstructuur opzet.
1
25-02-2021
Motion!
Menu, cahngelog en links geanimeerd.
GSAP x:0 is not x:0 maar x:0 vanaf startpositie element in de DOM.
4
18-02-2021
Opzetten typografische basis
Implementatie fonts en styling responsive typografie.
Niets
2
Een 'Fluid typography' systeem opzetten. Tekst gewrongen en styling homepage.
Typografie laten schalen tussen breakpoints gebruikmakend van 'clamp' in css.
4
17-02-2021
Opzetten framework personal site
Eleventy opgezet als static site generator.
Hoe je je eleventy inricht mbv terminal.
4
Gitlab setup
Wat een SSH key is en waarom je deze nodig hebt. Hoe rechtstreeks te committen vanuit VS Code.
2