openmindculture / kleiderordnung-berlin Goto Github PK

reactivate licensed font file loading:

• defered to prevent blocking request to external domain
• keep using cached same domain font file
• prevent re-rendering font style flash layout shift or anything:
• prefer and keep the cached same domain font files
• while still making a request to the external third party font server so that they can count if the usage is within the purchased plan restrictions

Konzeption / Design-Phase

• erledigt (done)

Exploration Phase

• Durchstich(e) und Sichtung von Inas Material um eventuelle Rückfragen zeitnah zu stellen!
  • Domain- und Font-Setup etc. dto.
  • Lottie Animations
  • Theme ist formal fehlerfrei und kann auf Testseite aktiviert werden
  • Kontaktformular mit Markup wie von WPCF 7 emittiert
• daher erstes Demo mit Hero Banner noch ohne finale CSS Struktur

Architecture / Strukturierung

• modulares CSS mit PostCSS bauen
• Strukturierung und Benennung:
  • Konzeption der Pages / Templates / Custom Post Types / Custom Fields
  • CSS Class Names; Properties / Variables (Design Tokens / Settings)
  • WordPress (block) class names
    • bei Bildern (Markup und Konfiguration aus Media Library / Upload)
    • Plugin generated content: Contact Form WPCF7
    • Plugin generated content: Complianz Datenschutz / Cookie Banner
    • Plugin generated content: Polylang
    • Header / Footer widgets, mobile menu
  • Tests erweitern, ebenfalls möglichst modular
  • Dokumentation parallel pflegen
• Mehrsprachigkeit mit Polylang (bzw. ggf. Alternative?)
• Formular

Dynamisierung

• Pflegbarkeit als WordPress Theme ist nicht dringend für Demo und ggf. Design-Rückfragen.
• Vorliegenden Content in WordPress einpflegen (Produktiv, Stage, localhost Development)
• Bidirektionalen Flow verifizieren:
  • Design (Theme, Plugin, Assets): Source Code -> Development -> Stage / Produktiv
  • Content (Text, Markup, Uploads, Plugin Configuration): Produktiv -> Stage / Development
• Umbau des statischen Prototypen in dynamische WordPress-Instanzen

Optimierung, Korrekturen und Anpassungen

• Testen/Validieren:
  • Stimmt das Aussehen mit dem Screenshot aus Figma überein?
  • Performance-, Best-Practice-, Sustainability Audits befriedigend?
  • A11y Barrierefreiheit in Ordnung?
• Test und Abnahme:
  • gefällt die Seite? Wie ist das Feedback? soll ggf. noch etwas geändert werden?

Broken Insta-Preview: Race Condition?

Sometimes, there is no social media content at all, no static preview anymore, no juicer Instagram feed yet.

This happens when juicer element starts loading but does not finish.

Adding a min height to the wrapper div reveals Juicer's loading animation:

That's a "Juicer Problem" caused by

net::ERR_CONNECTION_RESET in embed.js:17 which is juicer code, not our project code.
So I should

• report and issue and/or
• try to work around in our project code, like
  • don't hide the placeholder until juicer has really completed loading and showing instagram data
  • schedule a retry timeout and cancel it on completion

Mobil Pixel Vivaldi

• Überlappung der Bilder bei Angeboten
• zu frühe Umschaltung auf mobile 100%-Breite anstelle kleinerer Zweispaltigkeit
• Single News Min/Max Bildgrößen und Platzierung (auch bei Desktop-Breite)
• retest all audits
• retest everything cross-browser using BrowserStack
• regenerate base screenshots for automated testing

Localhost fails to load timely when there is no internet and when opened as bs-local.com.
There should be no external resource blocking local resource loading!
But there is.
fastly-cloud.typenetwork is an official font server but not actually needed when we host the licensed fonts locally.
Maybe bs-local.com takes a DNS lookup, but that should have been cached.
The other generic domains seen in the network tab are browser extensions.

• Contact form inbox shows incorrect titles with placeholders instead of content:

Localhost fails to load timely when there is no internet and when opened as bs-local.com.
There should be no external resource blocking local resource loading!
But there is.
fastly-cloud.typenetwork is an official font server but not actually needed when we host the licensed fonts locally.
Maybe bs-local.com takes a DNS lookup, but that should have been cached.
The other generic domains seen in the network tab are browser extensions.

• erst später neue Stage Instanz erstellen,
  • diese soll nicht die bisherige preview URL übernehmen (die evtl. schon an Betatester gegeben wurde)

• Adjust typography according to latest feedback.
• try and increase legibility (on Microsoft systems)
• adjust fallback font size to reduce flash of unstyled font layout shift.

https://kleiderordnung.berlin/en/#intro-keyvisual-mousetrap
https://kleiderordnung.berlin/#intro-keyvisual-mousetrap
must not contain the location hash part!

Hover color should rather not be applied to active state, like it is currently, causing external links like "on Instagram" to still be colored after returning from the external frame to the website. It should not look active/hovered anymore then.

Are there any disadvantages if we never apply the hover color to the active state for any link?

Visitenkarten refine

• Hier ist der badge bisschen sehr rechts oben in der Ecke...
• Und Tina Steinke wäre mir lieber.
• QR Code für Homepage?
• (blaue Sonderfarbe vielleicht gar nicht nötig?)

Die Seite ist echt schön geworden :)
Bzgl. a11y fallen mir noch ein paar Dinge auf (z.B. Skip to Content Button, oder Aria Labels bei den Termin Buchen Buttons, oder die doppelten Links bei den Blogbeiträgen).

• Skip to Content Button
• contact form checkboxes not visibly focused during tab navigation
• Aria Labels bei den Termin Buchen Buttons
• doppelten Links bei den Blogbeiträgen (fixed with news hover improvement #57)

• reduce vertical spacing between some sections, e.g. around CTA text and Instagram feed
• prevent CTA text too broad without horizontal padding
• CTA text might look better with slightly larger text

• DE All News: Top Nav "EN" should lead to https://kleiderordnung.berlin/en/news/
  not to the english home page

Theme Colors

The theme-color value suggests a color browsers should use to customize their display while navigating the site. This means adapting the browser colors to match the specified theme color. For example, change the address bar color in a mobile browser or the default background color in a desktop browser.

This is more of a mobile feature, although it's coming to desktops, too. Currently, it is supported by Safari and Chromium browsers on mobile and Safari on desktop (with Chrome behind a flag). And it is super easy to implement using a tag:

I already demoed this trick when creating a clone of a McDonald's app. Then, I needed the top bar to be dark because the game was supposed to be used in a dimly lit room.

https://dev.to/alvaromontoro/small-details-to-improve-your-websites-experience-hio

Accent Colors

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

With accent-color you can specify the predominant color for checkboxes, radio buttons, ranges, and even progress bars.

accent-color: red;

https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

• no autoplay
• respect pause/stop/hide
• self-hosted .webm
• fallback = no video at all? or YouTube behind poster image facade as a fallback?
• layout according to original designs

• Domains vorbereiten bzw. verifizieren, dass sie bei goneo erreichbar sind

  • http://kleiderordnung.berlin/
  • https://kleiderordnung.berlin/
  • http://www.kleiderordnung.berlin/
  • https://www.kleiderordnung.berlin/
  • http://kleiderordnung-berlin.de/
  • https://kleiderordnung-berlin.de/
  • http://www.kleiderordnung-berlin.de/
  • https://www.kleiderordnung-berlin.de/

• Preview Instanz wird später Produktivserver auf canonical URL

  • Coming Soon entfernen = Server-Konfiguration (Verzeichnisse zu Domainnamen)
  • WordPress-Konfiguration ändern (Settings URL von preview... auf canonical URL)
  • Inhalt verifizieren (und ggf. reparieren z.B. Mediathek)

• Caching vorab konfigurieren und verifizieren

  • Weitere Settings, Fine Tuning, Performance Plugins (W3C, Tinify) konfigurieren
    • Tinify Bildoptimierung am besten direkt beim Hochladen
    • W3 Total Cache Konfiguration auf localhost verifizieren
    • (später: W3 Total Cache erst nach Livegang um Caching unerwünschter/veralteter Inhalte zu vermeiden) - und dann passend zum Webserver konfigurieren mit DB Cache, Minify, ggf. minify+combine CSS, aber kein zusätzliches lazy loading, usw.
  • Performance Test mit und ohne offizielles externes Webfonts CSS
    • externes CSS zunächst drin lassen damit die Font Server auch mal aufgerufen werden
    • später komplett entfernen (im Rahmen zusätzlicher Performance-Optimierung)

• Datensicherung, Vorbereitung Stage-Server und Livegang, siehe GitHub/Notizen:

  • Preview Instanz wird später Produktivserver auf canonical URL
    • bisherige Preview URL wird weiterleitung auf neue canonical URL (.htaccess)
    • alternative URLs werden Weiterleitung auf neue canonical URL (.htaccess)
  • Konfiguration ändern
  • Inhalt verifizieren (und ggf. reparieren z.B. Mediathek)
  • Coming Soon entfernen
  • erst später neue Stage Instanz erstellen,
    • diese soll nicht die bisherige preview URL übernehmen (die evtl. schon an Betatester gegeben wurde)
  • wäre Updraft Plugin hilfreich oder verkehrt? Ist bereits installiert, Backups erstellen schadet ja nicht.

• Kontaktformular und Spamschutz

  • vorab trainierbar? ja, gleiches Setup läuft bei OMC als Spamtrap und sollte Spam an Akismet melden
  • optimierbar?

• Ecograder Score im Footer aktualisieren ("share" -> report result link)

• Green Software Score im Footer aktualisieren

• Live-Version allen Audits unterziehen

  • Lighthouse
  • axe
  • WAVE
  • pagespeed.web.dev
  • WebPageTest
  • GTMetrix
  • Ecograder
  • Website Carbon
  • Greener Software

• Feedback nach Livegang / Public Beta abwarten,

• ggf. Hotfixes durchführen, Caches leeren und obige Verifikationen wiederholen,

• erst nach Hotfix-Runde als "3.0.0" taggen und release erstellen ...

• ... und mit allen Unterseiten bei web.archive.org archivieren ...

• ... und erst noch später mit Posts und zusätzlichen off-page SEO-Maßnahmen begleiten.

• CTA text not really centered (left vs. right page margin?)

• Instagram section not always visible (D.G. feedback on Mac)

• contact links invisible on hover in "mobile" viewport width:
  

• Footer: better center everything on mobile?

• The current footer does not match Figma anymore anyway for multiple reasons, mostly to ensure tappable / clickable links not too close together on mobile. Centering the links to imprint, TOS, privacy probably makes it more consistent with what follows below:
  

• blue dots vs. text readability issue: dots meet text at specific scroll positions (won't fix if website owner likes it)

Kleiderordnung mobile Testimonials sind auf meinem Pixel weder angeschnitten, noch haben sie Pfeile. Kollegen im Pub hätten Pfeile oder Punkte direkt auf den Bildern erwartet.

Conversation and ideas:

• Piccia Neri: pause, stop, hide (WCAG guideline)

• Manuel Matuzovic geht das wohl mit <img srcset media query
  https://css-tricks.com/gifs-and-prefers-reduced-motion/

• Wo aber soll das alternative Bild herkommen?

• Eventuell ein leeres Platzhalterbild als Fallback coden.

• Zusätzlich einen CSS Class Name adden um ggf. darüber zu stylen oder auszublenden.

• Gibt es dazu ein bestehendes WordPress-Plugin, dass sich zudem nicht mit TinyPNG stören darf?

function wpdocs_addTitleToThumbnail( $html ) {
    $id = get_post_thumbnail_id();
    $alt_text = get_post_meta( $id, '_wp_attachment_image_alt', true );

    $html = str_replace( 'alt=', 'title="' . esc_attr( $alt_text ) . '" alt=', $html );

    return $html;
}
add_filter( 'post_thumbnail_html', '

https://developer.wordpress.org/reference/hooks/post_thumbnail_html/

Page moves slightly up and down after loading or scrolling to a target like contact.
Possible undesired side effect of on of the new animation / transition effects.

          - [ ] N.: Text ist unscharf (nachgefragt: welches Gerät?)

Unschärfe auch im Local Preview in Chrome/Vivaldi, wenn es dort skaliert angezeigt wird.

Bei 100% Zoom sieht das nicht so komisch aus.

Originally posted by @openmindculture in #59 (comment)

• try overflow-x visible on mega wide screens without breaking parallax

trying to achieve with minmal, modern tooling, without webpack:

• insert version to cache busters in HTML markup dynamically
• generate and insert critical CSS into HTML dynamically
• inline imported CSS files (no, why?)
• split existing code into more modular CSS
• use postCSS to allow writing native CSS nesting
• fix stylelint linting (currently hangs)
• add more automated test cases
• automate image optimization (obsoleted by tinify WordPress plugin)
• split JS code into modules and add unit tests, after learning best practice to unit test DOM functionality

• Kontaktformular und Spamschutz
  • setup sicherstellen: 'akismet'* Tags sind bereits eingebaut, analog zum Vorab-Test auf Open-Mind-Culture.org, wo dennoch kein Spam erkannt wurde, siehe
    https://wordpress.org/support/topic/100-false-negative-spam-not-filtered-by-cf7-and-aksimet/#post-17037168
  • vorab trainierbar? ja, gleiches Setup läuft bei OMC als Spamtrap und sollte Spam an Akismet melden
  • optimierbar?

Zwischenstand Akismet Integration in Contact Form 7, sowohl bei KleiderOrdnung.Berlin, als auch vorab bei den Honeypot-Testformularen auf Open-Mind-Culture.org:

Final feedback: now that everything seems to be set up correctly, Akismet still did not recognize any of the new spam arrival, but hopefully it will learn and improve in the future.

• Moritz L.: add an overline as H1 instead of the verbose intro text
• make it editable
• adjust visual styling if necessary
• probably further improve headlines etc.

• fix animaton replay on hover,
• remove console.log

Was cool wäre wenn die Transparenz nur beim scrollen da ist und wenn alle Still steht opaker wird..contrast und so. Wenn du slightly transparent backgrounds colors oder blend modes würde man das auch auf mobile sehen. Wenn du das schaffst, ( geht nur mit JS vermutlich in Moment) wäre das ein alleinstehend Merkmal.

• AGB (TOS) will be translated to English by Mike
• Testimonials / Stories: review, update and add images and texts
• add more recent news items
• add new photography

• Verify form and all options
• Send messages to Tina
• How to handle false positive "spam"? See Contact Form vs. Spam Protection issue #35

KleiderOrdnung:

• Sticky Header mit Navi
• rechtsbündige breite Layoutvariante entfernen
• juicer insta feed Stapelbilder Pfeile schwer bzw. gar nicht bedienbar?
  • funktionieren, aber der Bildwechsel kommt spät, und es gibt kein Feedback auf den Klick/tap
• juicer insta feed max width
• placeholder for unloaded insta feed
• refactor consent without default klaro cookie library
• ensure insta feed only loaded on visibility even when cookie consented
• Testimonials verständlicher anordnen
• Refactoring
• Follow-Up nach Feedback von Designer:in, Texter:in, Social Media Coaching

New reason preventing your pages from being indexed.

Search Console has identified that some pages on your site are not being indexed due to the following new reason:

Page with redirect

If this reason is not intentional, we recommend that you fix it in order to get affected pages indexed and appearing on Google.

Offline funktioniert die Seite nicht! Würde ein Caching-Manifest immer noch funktionieren?

• Button Hover color should transition between blue and coral (D.G.)
• semi transparency while scrolling appears buggy rather than intended? (D.G.)

• unregister external resources loading like Google fonts
  • use local fonts instead, optimized for intended glyph ranges (Latin / Western Europe)
  • reduce icon fonts etc. (font awesome, wp-emoji)
  • ^ this would be OK to be specific for the chosen font(s) for Kleiderordnung, see kleiderordnung/issues/15
• configure additional performance and security headers using .htaccess only if necessary
• configure colors that provide necessary contrast to comply with WCAG 2.0 (might as well customize theme for the client?)
  • ^ this would be OK to be specific for the chosen font(s) for Kleiderordnung

Assumptions:

• we don't need comments
• we only have local content in German or English
• we probably don't need an emoji font, or do we?
• we can probably disable some more JS and extra add-ons
• and what about font awesome?

Dynamisierung

• Critical CSS automatisch extrahieren lassen?
• insert version to cache busters in HTML markup dynamically
• inline imported CSS files -> W3 Total Cache plugin feature
• Platzhalterbild(er) für Instagram Feed
• Backend-Tool mit Image Capture Screen Capture UI klingt nach einer eleganten Lösung!

Optimierung, Korrekturen und Anpassungen

• Footer Links generischer realisierbar zu AGB, Datenschutz, Impressum,
  vielleicht ähnlich wie die Suche nach aktiven Kontaktformularen?

• Testabdeckung erhöhen und automatisieren

  • split JS code into modules and add unit tests
  • behavioral front-end tests
  • modular tests of page parts
  • visual tests using screenshots
  • audits: performance, accessibility
  • printable version

Cleanup / Code Style / Documentation

• Dokumentation möglicherweise unvollständig oder veraltetet
• Repository bereinigen,
  • veraltete oder unerwünschte Inhalte entfernen
  • dabei sicherstellen, dass keine personenbezogenen oder gar Zugangsdaten committed wurden!
  • erledigte TODO-Hinweise entfernen oder in gute Kommentare umwandeln

A partial screenshot including the intro animation would be useful.

Browsers suggest to send form data again when hitting reload after the form has been submitted.

Enlarge whole card instead of highlighting link text?

mobile vs. figma vs. Andy feedback:

• current implementation even matches Figma design?
• arrows places suboptimal
• swipeability not obvious, illusion of completeness

Ideen und Conversation mit Andy about the issue:

evtl könnte ich 10px Rand vom 2. Bild rechts zeigen.

das könnte ich mit den arrows machen

oder wie ich bei site 2 mobile ein hand scroll X icon animiert kurz zeigen ..

Ich muss noch mal schauen ob mein mobile überhaupt Figma Design entspricht, evtl. müssten die arrows auf touch device ausgeblendet.

https://kleiderordnung.berlin/#stories

Custom post type 'offer' is defined in a 'mu-plugin' using ACF syntax including featured image support. Theme functions also explicitly declare featured image support for this custom post type.

When invoked from main wp-admin sidebar menu, the media library shows multiple image items. But when invoked from custom post type set featured image button the library either claims that it's empty or it contains exactly 1 image, the one uploaded for this post.

After uploading a new image into a seemingly empty library invoked from a custom post, this image shows in that media library view, but also in the full list when invoked from the wp-admin sidebar menu.

This happens with or without using image optimization plugin like TinyPNG.

WordPress version: 6.3
Advanced Custom Fields version: 6.2.0

• MOEON
• Loveco

Follow-up of Livegang Issue #20

• Feedback nach Livegang / Public Beta abwarten,

• ggf. Hotfixes durchführen #54 , Caches leeren und alle Verifikationen wiederholen, also die Live-Version (production) erneut allen Audits unterziehen

  • Lighthouse
  • axe
  • WAVE
  • pagespeed.web.dev
  • WebPageTest
  • GTMetrix
  • Ecograder => ggf. die CO2e-Werte und Badge-Links im Footer aktualisieren
  • Website Carbon => ggf. die CO2e-Werte und Badge-Links im Footer aktualisieren
  • Greener Software

• Verify compliance with Web Sustainability Guidelines (WSG) 1.0 https://w3c.github.io/sustyweb/

• ggf. Öko-Test Badges, Werte und Links aktualisieren:

  • Ecograder Score im Footer aktualisieren ("share" -> report result link)
  • Green Software Score im Footer aktualisieren

• erst nach Hotfix-Runde als "3.0.0" taggen und release erstellen ...

• ... und mit allen Unterseiten bei web.archive.org archivieren, ebenso GitHub page und Artikel, ...

• ... content.xml und Updraft Backup erstellen,

• auf localhost einspielen (bzw. localhost neu erstellen),

• Base Screenshots für visuelle Codecept Tests aktualisieren.

It happens again: the phantom rectangle is back :(

see https://dev.to/ingosteinke/inspecting-the-wrong-elements-in-the-browser--3jce

• inspired by preview "barber shop" WordPress theme
• using animate.css, fix slow animation duration
• box fade in direction based on flex wrap layout position
• animate on visibility using intersection observer
• postCSS build process
• sticky header reusing existing kleiderordnung logo
• change header subline font ("ORDNUNG") vectorized to SVG shapes
• sticky header position and behaviour
  • sized so that heart part might overflow outside viewport on the left,
  • unless minimum width of main content area allows for more space around
  • always centered
  • getting smaller when page scrolled down,
  • possibly using a variation when scrolled down, or make overflowing thread/heart parts disappear below content box
• setup frontend testing with screenshot diff using codecept
• add styles, effects, and animations from customized Colorway Barber Shop Template
• technical SEO and content SEM:
  • meaningful, unique heading content (not just "about me" or "imprint")
  • printable as pdf
  • mobile-friendly
  • accessible / screen reader friendly / tab navigateable
  • vcard download option?
  • ...
• Performance and Accessibility issues follow-up from #1
  • configure additional performance and security headers using .htaccess only if necessary
  • configure colors that provide necessary contrast to comply with WCAG 2.0 (might as well customize theme for the client?)
  • ^ this would be OK to be specific for the chosen font(s) for Kleiderordnung

• intro: Lottie player and static fallbacks,
• offers: parallax perspective scrolling effect (WIP)
• links and buttons on mouse over and active states
• micro animated arrow above call to action

• ... und erst noch später mit Posts und zusätzlichen off-page SEO-Maßnahmen begleiten.

As a website owner, I want to be able to edit my site content without requiring help or technical changes.
As a technical webmaster, I want to ensure that the website owner can only edit their site without risking destroying the intended design and performance.
As a WordPress developer, I want to conceive, publish, maintain, and showcase an actual WordPress site using a modern, minimalist, classic theme setup to prove that many annoying details of other WordPress projects can be avoided.

See wp_template issue: Configuration Variations: Technological Minimalism

Plugins: advanced-custom-fields matomo complianz incompatibility-status tiny-compress-images svg-supportadvanced-custom-fields matomo complianz incompatibility-status tiny-compress-images svg-support ...

Before merging, make sure not to trigger automatic deployment on Netlify overriding the placeholder page.
Before using and testing the theme, remove any leftover Elementor stufff.