Om Code Snippets og AI - Små stykker kode, store forbedringer

Små stykker kode, store forbedringer – om Code Snippets og AI

Det, der gør et WordPress-site rigtig godt, er sjældent de store ting, men de små detaljer, der passer præcis til den måde, man arbejder på. Og løsningen på dem er sjældent endnu et plugin.

Jeg har bygget WordPress-sites i mange år, og det meste af det, jeg savner, er små ting: en advarsel på Dashboardet, en farve i en liste, en genvej i Elementor. Det er for småt til et plugin, men for irriterende at leve uden. Her kommer snippets ind i billedet: små stykker kode, der hver løser én bestemt ting.
 

Hvorfor snippets frem for små plugins

En snippet gør præcis det, du har brug for, og intet andet. Et plugin kommer ofte med indstillingssider, reklamer og funktioner, du aldrig bruger.

• Færre plugins. Hvert plugin er noget, der skal opdateres, og en mulig sikkerhedsrisiko. Ti små tilpasninger behøver ikke være ti plugins.
• Et lettere site. En snippet indlæser kun sin egen kode, og kun der hvor den skal bruges, fx kun i admin.
• Fuld kontrol. Du kan se hver linje, rette den og forstå den. Intet sker bag din ryg.
• Uafhængig af temaet. Kode i temaets functions.php forsvinder, når du skifter tema eller opdaterer det. En snippet bliver liggende.
• Let at slå til og fra. Driller noget, kan du deaktivere én snippet ad gangen og hurtigt finde synderen.
   

Pluginet Code Snippets gør det nemt

Code Snippets er det plugin, der samler alle dine snippets ét sted i WordPress’ admin. Det er gratis, har over 900.000 aktive installationer og er bedømt 4,8 ud af 5 (WP Hive).

Det, jeg sætter mest pris på:

• Hver snippet har sin egen kontakt. Slå til, slå fra, uden at røre ved en eneste fil.
• Du bestemmer, hvor koden kører: overalt, kun i admin, kun på selve hjemmesiden eller kun én gang.
• Sikkerhedsnet. Har en snippet en fejl, der ville lægge sitet ned, slår Code Snippets den typisk fra af sig selv. Og er uheldet ude, findes der en “safe mode”, der slår alle snippets fra på én gang.
• Orden i tingene med navn, beskrivelse og tags – og eksport og import, så de samme snippets kan genbruges på flere sites.
• Code Snippets Cloud, hvor man kan gemme, dele og finde andres snippets.

Pro-versionen tilføjer bl.a. CSS- og JavaScript-snippets, AI-værktøjer og synkronisering med skyen. Prisen starter ved ca. 40 dollar om året for ét site.
 

AI som medhjælper: fra idé til færdig snippet

AI har ændret, hvem der kan lave snippets. Man behøver ikke længere kunne skrive PHP selv, men man skal kunne beskrive sit behov præcist og teste resultatet grundigt.

Sådan arbejder jeg:

1. Beskriv problemet, ikke løsningen. “Mine snippets er svære at overskue, når der er mange” giver bedre forslag end “lav noget CSS”.
2. Giv den sammenhængen: hvilket tema, om sitet bruger Elementor, hvilket cache-plugin. Et screenshot hjælper ofte mere end mange ord.
3. Afprøv på et testsite først, aldrig direkte på en kundes site.
4. Fortæl præcist, hvad der går galt, med screenshots og fejlbeskeder. Det er her, det rigtige arbejde sker: de fleste af mine snippets er blevet til over mange runder.
5. Bed om indstillinger øverst i koden, så du selv kan rette farver, afstande og tekster uden at røre resten.

Hvad man skal passe på:

• AI kan tage fejl og lyde sikker. Test altid, og vær ekstra varsom med kode, der rører ved sikkerhed, brugere eller databasen.
• Spørg, om der findes et plugin. Til nogle opgaver (fx duplikering af sider eller beskyttelse af e-mailadresser) er et vedligeholdt plugin bedre end en snippet, du selv skal holde ved lige.
• Forstå nogenlunde, hvad koden gør. Bed AI forklare den på almindeligt dansk, og skriv forklaringen ind i snippettens beskrivelse.
   

Mine snippets – til fri afbenyttelse

Jeg deler mine snippets gratis på Code Snippets Cloud: codesnippets.cloud/codevault/LarsBro. Lige nu ligger der otte, og de kan hentes direkte ind i Code Snippets.
 

Til Elementor

Custom CSS-indikatorer i Navigatoren

På en stor Elementor-side er det svært at huske, hvor man har lagt egen CSS. Snippetten sætter en lille blå prik ved hvert element med egen CSS i Navigatoren, og et lilla »+« ved containere, hvor et af underelementerne har det. Den bygger videre på en idé af Stefan Radu og kræver Elementor Pro, fordi det er der, man kan skrive egen CSS.

Farvede mærker i Navigatoren

Store sider bliver hurtigt til en lang, grå liste i Navigatoren. Skriv et lille tegn som << eller ## i et elements navn, så får rækken sin egen farve. Det gør det let at finde sektioner, man ofte retter i, eller markere noget, der mangler.

Exit-knap og et smartere widget-panel

En knap i Elementor, der gemmer og viser siden på hjemmesiden med ét klik – eller med Ctrl+Enter. Knappen skifter farve, når der er ændringer, der ikke er gemt. Samtidig får widget-panelet flere kolonner, når man trækker det bredere. Alt indstilles under Elementors egne brugerindstillinger.
 

Til Dashboardet

Senest redigerede sider

En boks på Dashboardet med de ti sider, der senest er rettet i – med status, dato og forfatterens initialer. Sider bygget med Elementor får et ekstra link, der åbner dem direkte i Elementor. Så er man tilbage i arbejdet med ét klik.

Advarsel om søgemaskiner

Under udviklingen slår man ofte søgemaskinerne fra, og det er let at glemme at slå dem til igen ved lancering. Snippetten viser en tydelig advarsel på Dashboardet, så længe Google er holdt ude, med en knap direkte til indstillingen.
 

Til sikkerheden

Stærke passwords for alle brugere

Kræver stærke passwords, når brugere oprettes, skifter password eller nulstiller det. Man kan selv bestemme længde og krav, og passwordet må ikke indeholde brugernavn, e-mail, navn eller sitets domæne. En tjekliste viser undervejs, hvilke krav der er opfyldt, og reglerne tjekkes også på serveren.
 

Til Code Snippets selv

Kategorifarver i snippet-listen

Start en snippets navn med en kategori som »Backend –« eller »Elementor:«, så får den sit eget farvemærke og en farvet række i listen. Listen sorteres alfabetisk, så snippets i samme kategori samles. Navnene i databasen ændres ikke – det er kun visningen.

Blød linjeombrydning i kode-editoren

Lange kodelinjer ombrydes på skærmen, så man ikke skal scrolle vandret, og editoren vokser med koden i stedet for at være en lille kasse. Koden selv ændres ikke – der indsættes ingen linjeskift.

Fem af dem er markeret “AI Verified” på Code Snippets Cloud.
 

Kom i gang

Start med én lille irritation, og løs den med én snippet. Så kommer resten af sig selv.

• Navngiv dine snippets med en kategori foran, fx “Backend – …” eller “Elementor: …”. Det gør listen til at overskue, når den vokser.
• Skriv i beskrivelsen, hvad snippetten gør og hvorfor. Om et år har du glemt det.
• Sæt versionsnummer i navnet, så du kan se, hvilken udgave der kører.
• Ryd op: slet det, du ikke bruger, og tøm papirkurven. Jeg fandt engang 75 slettede snippets, der gjorde listen mærkbart langsommere.
   

Og kig endelig forbi min samling på Code Snippets Cloud – måske ligger din løsning der allerede.