WordCamp Warszawa 2022, tilbake til offline-møter

WordCamp Warszawa 2022 var et spesielt arrangement på alle måter. Etter år med pandemipause ga webinarer og endeløse videosamtaler endelig plass til håndtrykk, samtaler i korridorene over en kopp kaffe og direkte faglig utveksling i den virkelige verden.

Energien blant de 200 deltakerne i Warszawa var tydelig. Det var lett å se hvor mye WordPress-fellesskapet, både veteraner og nye fagfolk, trengte fysisk kontakt og muligheten til å teste kunnskap mot praksis.

Hvis du planlegger en ny arkitektur eller trenger erfaren hjelp med blokkbaserte løsninger, kan du lese mer om tjenestene våre som WordPress-utvikler hos WPPoland.

#WordCamp Warszawa 2022: dato, sted og deltakertall

Konferansen ble holdt 11. og 12. juni 2022 i CIC (Cambridge Innovation Center) i Chmielna 73 i Warszawa, rett ved Warszawa Centralna stasjon, ifølge WordCamps side om stedet. På forsiden til arrangementet beskrev arrangørene det som WordCamps retur til den polske scenen etter tre lange år med fravær, og oppga tallene: 200 deltakere, 35 foredragsholdere, 10 frivillige.

Arrangørene var Arek Stęplowski, Kamil Kawałko og Michał Strześniewski, sammen med fellesskapet WordUp Warszawa og stiftelsen Fundacja WWW (arrangørsiden). Kamil Kawałko sto også for konferansens grafiske profil.

Oppsettet for de to dagene ifølge det offisielle programmet:

Ett spor på lørdag betydde at hele salen hørte de samme foredragene. Det gjorde samtalene i pausene enklere, fordi alle hadde det samme utgangspunktet.

#Container queries og theme.json i WordPress-temaer

Jeg snakket lørdag kl. 11:15 med foredraget Ko-do-ma-so-chizm. Dlaczego robisz to naokoło? (omtrent: kodemasochisme, hvorfor gjør du det så tungvint). Ifølge sesjonsbeskrivelsen i programmet var det en gjennomgang av lite brukte frontend-metoder for bedre UX og tilgjengelighet: native tagger, stiler, snarveier og funksjoner, pluss refaktorering. Foredraget lå i skjæringspunktet mellom design og utvikling, med vekt på native nettleserverktøy for temaer i blokkredigereren Gutenberg.

Opptaket er en del av strømmen fra dag én på YouTube-kanalen til Fundacja WWW. Ifølge kapittellisten i videobeskrivelsen varer foredraget fra 1:37:50 til 2:14:36:

#Hvordan bruke CSS Grid, container queries og theme.json

UTVIKLINGEN AV LAYOUT-ARKITEKTUR I WORDPRESS:
+-------------------------------------------------------------+
| Legacy-æra (2010-2018):                                     |
| Floats, clearfix-hacks, 12-kolonners Bootstrap, !important  |
+-------------------------------------------------------------+
                              v
+-------------------------------------------------------------+
| Flexbox & CSS Grid-æra (2018-2022):                         |
| Todimensjonale grid-template-areas, auto-fit, minmax()      |
+-------------------------------------------------------------+
                              v
+-------------------------------------------------------------+
| Komponentbasert æra (2022+):                                |
| Container Queries (@container), theme.json og CSS-variabler |
+-------------------------------------------------------------+

1. Flexbox og CSS Grid er standard i produksjon: I profesjonelle prosjekter finnes det ingen teknisk grunn lenger til å bruke floats eller CSS-biblioteker som laster tusenvis av ubrukte regler. Todimensjonalt CSS Grid bygger redaksjonelle oppsett med noen få deklarasjoner, som holder stilarket lite og DOM-en enkel.

/* Tradisjonelt oppsett med floats og clearfix (utdatert mønster) */
.legacy-archive-grid::after {
  content: "";
  display: table;
  clear: both;
}
.legacy-archive-card {
  float: left;
  width: 33.333%;
  padding: 15px;
  box-sizing: border-box;
}

/* Moderne, responsivt CSS Grid uten ekstra @media-regler */
.modern-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--wp--preset--spacing--40, 2rem);
  align-items: stretch;
}

2. Container queries (@container) som utviklingsretning: Vanlige @media-spørringer ser bare på bredden til viewporten. I Gutenbergs blokkmodell kan det samme artikkelkortet stå i en smal sidekolonne, i et rutenett med tre kolonner på forsiden eller som et banner i full bredde. Container queries lar en blokk tilpasse oppsettet til bredden på forelderbeholderen i stedet for skjermen.

/* Registrering av kontekstbeholder på blokkens wrapper */
.wp-block-custom-card-wrapper {
  container-type: inline-size;
  container-name: post-card-container;
}

/* Standard vertikalt oppsett for smale områder (f.eks. sidekolonne) */
.wp-block-custom-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Over 520px beholderbredde bytter kortet til horisontalt oppsett */
@container post-card-container (min-width: 520px) {
  .wp-block-custom-card {
    flex-direction: row;
    align-items: center;
  }
  .wp-block-custom-card__image {
    width: 38%;
    flex-shrink: 0;
  }
  .wp-block-custom-card__body {
    width: 62%;
  }
}

3. theme.json som eneste sannhetskilde: Med Full Site Editing (FSE) betyr lange style.css-filer mindre. En deklarativ theme.json definerer designtokens som fargepaletter, typografi og avstander. WordPress gjør dem om til CSS-variabler (--wp--preset--*), slik at redigereren og forsiden bruker de samme verdiene.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "name": "Medium",
          "size": "clamp(1.125rem, 1rem + 0.5vw, 1.35rem)",
          "slug": "medium"
        },
        {
          "name": "Large",
          "size": "clamp(1.5rem, 1.25rem + 1vw, 2.25rem)",
          "slug": "large"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        { "name": "Small", "size": "1rem", "slug": "30" },
        { "name": "Medium", "size": "2rem", "slug": "40" },
        { "name": "Large", "size": "3.5rem", "slug": "50" }
      ]
    }
  }
}

#Når nettleserne fikk støtte for container queries

I juni 2022 var container queries en forhåndsvisning, ikke et produksjonsverktøy. Ingen stabil nettleser støttet dem ennå. Rekkefølgen ifølge produsentenes utgivelsesnotater:

Først fra februar 2023 støttet alle tre motorene størrelsesspørringer mot beholdere. Safari 16 la i tillegg til beholderenheter (cqi, cqw og lignende). For et tema som må fungere for alle besøkende, er 2023 den trygge grensen, ikke konferansedatoen. Korteksempelet over fungerer i dag uten reserveløsning i gjeldende versjoner av alle tre motorene.

#Hvordan theme.json har endret seg siden 2022

Eksempelet bruker "version": 2. Den skjemaversjonen kom med WordPress 5.9, et halvt år før konferansen, slik utviklernotatet fra 8. januar 2022 beskriver. Filer i versjon 1 fra WordPress 5.8 fungerer fortsatt, fordi WordPress gjør dem om til versjon 2 under kjøring.

To senere endringer påvirker eksempelet direkte:

• Flytende typografi ("fluid": true) kom med WordPress 6.1, ifølge utviklernotatet fra 3. oktober 2022. I juni 2022 hadde innstillingen ingen effekt i stabil WordPress, så clamp()-verdiene måtte skrives for hånd, som i eksempelet.
• Skjemaversjon 3 kom med WordPress 6.6. Utviklernotatet fra 19. juni 2024 anbefaler å bytte først når temaets laveste støttede WordPress-versjon er 6.6. Eldre skjemaversjoner støttes fortsatt.

#Sidebyggere eller Gutenberg og sikkerhet i utvidelser

Programmet viste godt hva det polske WordPress-fellesskapet var opptatt av i 2022.

#Hvorfor byråer går bort fra sidebyggere

Søndag viste Izabela Karkocha at det går an å lage et interessant nettsted på standardtemaet, uten ekstra utvidelser og uten sidebyggere, og når den tilnærmingen lønner seg. Piotr Całka drøftet fra et programvarehus sitt perspektiv om ferdige temaer er verdt å bruke. Begge foredragene passet inn i bevegelsen bort fra tunge visuelle sidebyggere (som Elementor, Divi og WPBakery) i prosjekter der ytelse teller. Det er dyrt å optimalisere sidebygger-baserte nettsteder for Core Web Vitals, så flere team bygger egne Gutenberg-blokker og lette blokktemaer. I 2022 var Core Web Vitals LCP, FID og CLS. 12. mars 2024 erstattet INP FID, så responsen på interaksjoner måles annerledes i dag enn da konferansen ble holdt.

#WordPress-sikkerhet på WordCamp Warszawa 2022

Tre foredrag handlet om sikkerhet. Bartek Nowak viste File Locker, tilgangskontroll for sensitive filer når de grunnleggende rettighetene i WordPress ikke strekker til. Artur Pajkert snakket om phishing, typosquatting, homografiske angrep, SSL-sertifikater og truslene en WAF blokkerer før WordPress i det hele tatt kjører. Søndag gikk Krzysztof Dróżdż gjennom tilfellet der et nettsted gjenopprettes fra sikkerhetskopi, renses og kort etter er infisert igjen.

Av dette følger rutiner som hører hjemme i alle prosjekter: blokkering av direkte filendringer i produksjon (DISALLOW_FILE_MODS), automatisk skanning av avhengigheter i CI/CD og kontroll av sjekksummer for WordPress-filer med WP-CLI. Etter en ny infeksjon er det nettopp sjekksummene som viser hvilke kjerne- og utvidelsesfiler som avviker fra originalen:

# Automatisk integritetskontroll av WordPress-kjernen og utvidelser
wp core verify-checksums
wp plugin verify-checksums --all

#Treg WooCommerce og autoload i wp_options

Samtalene i sponsorsonen ga meg mer innsikt i hostingmarkedet enn hundrevis av leste artikler. Blant sponsorene var hostingleverandører: cyber_Folks, Bluehost og Nexcess (platina) samt SmartHost og LH.pl (gull), ifølge forsiden til arrangementet. Tabellen oppsummerer typiske forskjeller mellom eldre og nyere infrastruktur:

PHP-raden bør leses med dagens datoer. Ifølge EOL-tabellen på php.net mistet PHP 7.4 støtte 28. november 2022, PHP 8.0 26. november 2023 og PHP 8.1 31. desember 2025. Versjonene som var målet i 2022, trenger nå selv en oppgradering.

En vanlig flaskehals i store WooCommerce-butikker er ikke prosessorkraft, men ukontrollert vekst i wp_options (særlig transients med autoload = yes) og manglende skille mellom lese- og skriveoperasjoner i databasen. Denne SQL-spørringen finner de verste postene:

-- Finn de tyngste automatisk lastede opsjonene ved oppstart av WordPress
SELECT option_name, length(option_value) AS byte_size
FROM wp_options
WHERE autoload = 'yes'
ORDER BY byte_size DESC
LIMIT 15;

#Programmet første dag på WordCamp Warszawa 2022

Lørdagen hadde ett spor. Etter åpningen fortalte Kasia Aleszczyk om fellesskapsprosjekter man kan bli med i. Resten av dagen, i rekkefølgen fra den offisielle timeplanen, fordelte seg på flere blokker:

• Typografi og tilgjengelighet: Dr. Mateusz Machalski om typografiens rolle i kommunikasjon, Jacek Zadrożny om ti måter å ødelegge tilgjengeligheten på et nettsted, og et panel om tilgjengelighet i WordPress med Marcin Andrzejewski, Jacek Zadrożny, Arek Stęplowski og Marcin Pietrzak.
• Frontend: foredraget mitt Ko-do-ma-so-chizm, beskrevet over.
• Sikkerhet: Bartek Nowak (File Locker) og Artur Pajkert (et WordPress som tåler et atomangrep).
• SEO: Paweł Gontarek om hva SEO ikke liker i WordPress, og Roman Rozenberger om de vanligste SEO-feilene i netthandel på WordPress, basert på en casestudie.
• Testing: Jakub Rosiński om hvor mye verdi tester gir før produksjon, og Oskar Sajdak om de fem testtypene i prosjektet hans: enhets-, integrasjons-, funksjons-, akseptanse- og visuelle regresjonstester.
• Utviklerhåndverk: Piotr Niewiadomski om automatiserte utrullinger og oppdateringer med Composer, Maciej Kuchnik om native WordPress-funksjoner i stedet for hundrevis av linjer egen kode.
• Karriere: Sebastian Kurzynowski om frilanserlønn og hvordan den påvirker kvaliteten på arbeidet.

To blokker om tilgjengelighet og testing samme dag viste at samtalen i fellesskapet hadde flyttet seg fra å bygge til å drifte. Foredraget mitt om native tagger og stiler lå mellom foredraget om ødelagt tilgjengelighet og WCAG-panelet, noe som passet godt til innholdet.

#Workshops og foredrag andre dag på WordCamp Warszawa 2022

Søndag gikk tre spor samtidig, med Contributor Day parallelt. Workshopene ifølge programbeskrivelsene:

Hovedsporet søndag var mer forretningsrettet. Tomasz Lach beskrev to års arbeid med et eget WordPress-produkt som ennå ikke tjente penger. Łukasz Zegarek snakket om WordPress-nettsteder i tråd med GDPR. Tomasz Kołkiewicz tok for seg kontrakter, kundeservice, fakturering og risikoen for manglende betaling, og Aneta Rutkowska opplæring av kunden før budsjettet settes. Roman Maria Koidl presenterte mva og toll i grensekryssende netthandel. Piotr Jabłonowski fortalte hvordan en enkel utvidelse ble til en global virksomhet. Michał Kaźmierczak så tilbake på år med oppbygging av et selskap spesialisert på WordPress. Et panel om WordCamps retur til Polen etter pandemien, med Michał Strześniewski, Piotr Całka og Kamil Kawałko, avsluttet dagen.

#Nettverksbygging på WordCamp etter pandemien

To år med møter bare via skjerm hadde slitt ut hele IT-bransjen. WordCamp Warszawa viste at en samtale ansikt til ansikt ikke kan gjenskapes i et chatvindu.

#Møter med folk man bare kjente på avstand

I korridorene møtte jeg folk jeg hadde jobbet med på avstand i fem år, men aldri sett personlig. Ett spor på lørdag med felles pauser gjorde slike møter enkle, fordi alle var på samme sted til samme tid.

#Timepriser og kontrakter hos WordPress-byråer

Temaer det sjelden skrives om offentlig, sto rett i programmet. Sebastian Kurzynowski snakket om lønnsforhandlinger og hvordan man kjenner igjen et godt jobbtilbud, og Tomasz Kołkiewicz om kontraktsutforming, betaling i tide og risikoen for å ikke få betalt. Etter slike foredrag handlet samtalene i pausene om konkret praksis.

#Fire trinn for trygg migrering til blokktemaer

Et av de vanligste spørsmålene etter foredraget mitt var hvordan man trygt flytter et nettsted med lang historikk fra et klassisk tema til blokker uten nedetid og uten å miste plasseringer i søk. Den praktiske siden ble dekket søndag av workshopen til Magdalena Paciorek om blokkredigereren i et skreddersydd tema. Min fremgangsmåte:

1. Kartlegg og trekk ut designtokens: I stedet for å skrive stilarket på nytt kartlegger man farger, typografi og avstander fra eksisterende CSS og flytter dem til theme.json. Det samordner variablene i hele systemet.
2. Hybridtema som overgangsmodell: Full Site Editing trenger ikke innføres på én dag. Klassisk PHP-header og -footer kan beholdes mens innholdet i innlegg og sider flyttes over til blokker.
3. Erstatt gamle kortkoder med dynamiske blokker: Gamle kortkoder skaper teknisk gjeld og gjør forhåndsvisning i redigereren vanskelig. Å gjøre dem om til native blokker (for eksempel med register_block_type og en render-mal) gjør arbeidet enklere for redaksjonen.
4. Ytelsestester i staging: Før produksjonen byttes, testes Core Web Vitals i staging, og LCP, CLS og INP følges med verktøy som Lighthouse CI.

#Hvor man ser opptakene fra WordCamp Warszawa 2022

På forsiden til WordCamp skrev arrangørene at foredragene ligger på YouTube-kanalen til Fundacja WWW og at videoene også skulle publiseres på WordPress.tv. Jeg fant ingen opptak fra denne utgaven på WordPress.tv, så YouTube er fortsatt referansen.

Strømmen fra dag én varer nesten ni timer (8:56:16). Videobeskrivelsen har en kapittelliste med tidsstempler for hvert foredrag, fra Kasia Aleszczyk (20:35) til Sebastian Kurzynowski (8:13:20). Foredraget mitt starter på 1:37:50, og det er der den innebygde spilleren over begynner. Hele programmet med sesjonsbeskrivelser finnes på warsaw.wordcamp.org/2022/program.

#Konklusjon

WordCamp Warszawa 2022 avsluttet et treårig opphold for polske WordCamps. 35 foredragsholdere, en foredragsdag med ett spor og en workshopdag med Contributor Day ga fellesskapet et kraftig løft, og temaer som tilgjengelighet, testing og native frontend-teknikker er fortsatt aktuelle.

Noen teknikker fra foredraget mitt modnet først etter konferansen: container queries fungerer i alle motorer siden februar 2023, og flytende typografi i theme.json siden WordPress 6.1. Hvis du lurer på om du skal kjøpe billett til neste WordCamp, så kjøp den. Deltakelse er en sjanse til å teste egne kvalitetsstandarder og bygge relasjoner som lønner seg i mange år.

Hvis du planlegger å modernisere nettstedet, gå over til blokktemaer eller trenger hjelp med Core Web Vitals, kan du lese mer om våre WordPress-utviklingstjenester.