Kategorien
Projekte Webentwicklung

Astro, Netlify und falsche Annahmen

Gestern habe ich endlich herausgefunden, warum Netlify in meinem Preview-Build keine Bilder in bestimmten Seiten anzeigt. In meinem Fall war das eine Gallery, die einen Ordner übergeben bekommt.

Danach habe ich alle Bilder, die in Astro gefunden werden über diesen Filter gejagt. Lokal und im statischen Build war alles wunderbar.

Erster Gedanke war, dass bei Netlify die Bilder-Ausgabe einen Timeout hat, da ich am Anfang noch recht große Bilder verwendet habe. Allerdings hat der Resize der Bilder nichts bewirkt. Das war’s dann nicht.

Dann war die nächste Vermutung es läge an der fehlenden Netlify Integration, aber die ist für den static Build völlig unerheblich, wichtig ist die hauptsächlich für den Betrieb einer SSR Anwendung. Das Image-CDN und die Bearbeitung der Bilder ist davon (im static Build) nicht betroffen.

Am Ende habe ich in meiner Verzweiflung angefangen, in der Anwendung an verschiedenen Stellen zu debuggen, unter anderem an dem Mechanismus, mit dem ich die Bilder zusammensuche. Tatsächlich war das nur als Übergang gedacht, da ich damit ja den Bildern auch keine alt-Texte und Co. übergeben konnte, aber die Galeriemodule funktional schon mal testen konnte.

Spannenderweise hat die obige Debug-Ausgabe lokal das erwartete Ergebnis gezeigt.

Im Netlify-Build-Log war allerdings trotz gefundenen Images das filteredImages-Log leer, bzw. ein leeres Array:

Und wie man sieht: Netlify findet Bilder scheinbar nur – in schon bearbeiteter Form – in dem _astro-Ordner, wenn die Components gebaut werden. Blöd, aber genau der Grund, warum der Filter nicht funktioniert und damit keine Bilder zurückgegeben werden. Leider unterscheided sich das von der Lokalen Bauweise, wo die Bilder noch in den korrekten Ordnern liegen.

Verlinkt man die Bilder normal, z.B. aus der Content-Collection, dann geht natürlich alles korrekt und auch der Preview Build bei Netlify funktioniert korrekt. Jetzt sogar schon mit Alt-Texten, zumindest bei den Contents, in denen ich das ganze schon gepflegt habe. Wird der nächste Schritt mit SEO-und Accessibility-Screening halt schon etwas schneller möglich.

Kategorien
Wochenbericht

Wochenbericht 2022.16

Nach Ostern kehrt so langsam wieder Normalität ein…

  1. URL, URI, URN: What’s the Difference?
  2. What CTOs Say vs. What Their Developers Hear w/ DataStax’s Shankar Ramaswamy
  3. Web scraping is legal, US appeals court reaffirms
  4. CSS tip – the :is() pseudo-class can help keep your code clean, and has surprisingly good browser support
  5. A blind woman’s message to web developers about internet inaccessibility. source: shorturl.at/nvRU7
  6. Tabler Icons: over 1900 vector icons for web design
Kategorien
Wochenbericht

Wochenbericht 2020.37

  1. Tailwind Studio empowers you to build professional, custom designs, in a completely visual canvas
  2. Visual Studio Code August 2020
  3. Kongress des CCC findet online und in kleinen lokalen Veranstaltungen statt
  4. Annoying website features I face as a blind person
  5. Knowing What To Test – Vue Component Unit Testing

Was zum lachen: Adjustment

Kategorien
Wochenbericht

Wochenbericht 2019.25

  1. The Anatomy of Accessible Forms: The Problem with Placeholders
  2. Perl Out Loud: Programming with Voice Dictation
  3. Micro Frontends – an example of a micro front end application
  4. Zoff im Vue.js-Universum
  5. jExcel the javascript spreadsheet component

Was zum Lachen: Last Sprint Day

Kategorien
Wochenbericht

Wochenbericht 2018.30

  1. Das placeholder-Attribut ist kein Allheilmittel und kann Accessibility beeinträchtigen: “Don’t Use The Placeholder Attribute
  2. Von 0 auf Rockstar-Entwickler: Rockstar: a programming language where code is also 1980s song lyrics.
  3. Vue compents ohne sichtbares Rendering: Building “Renderless” Vue Components
  4. Easy patterns: Adapter
  5. KI und Spracherkennung? Ohne Cloud und zwielichte Dritte? Das verspricht Almond – The Open Virtual Assistant

Was zum Lachen: Keep them on their toes…