Author: Per Thykjaer Jensen

  • Solution: Git disallow error

    Solution: Git disallow error

    If you can’t push to git you can try to increase the git buffer like this in your terminal, and press enter:

    git config --global http.postBuffer 157286400

    If this does not work, test whether git is installed on your system. Try this in the terminal, and press enter:

    git -v

    If you get an answer like this:

    git version 2.38.1

    If you get an error, saying that the program git is not installed, you’ll have to install it. In that case use these instructions on Mac, Linux og Windows:

    Probably you’ll have to allow the system to install the package, if it’s not trusted. At least one of my students had such an issue.

  • Tutorial Block Patterns

    Tutorial Block Patterns

    WP Engine Builders viser hvordan du bygger “ptterns” eller på dansk “blokgrupper”

    Denne tutorial viser, hvordan du kan oprette blokgrupper (dvs. “patterns”), som kan genbruges overalt på dit site. Blokgrupperne minder lidt om CCS-variabler, hvor du genbruger nogen settings og redigerer dem fra ét sted.

  • WordPress 6.7 er klar

    WordPress 6.7 er klar

    To videoer om den nye version af WP 6.7:

    Den nye version af WP kommer selvfølgelig med en ny version af standardtemaet, som præsenterer de nyeste muligheder med WP. Uanset om du bruger standardtemaet eller noget andet, så er det altid en god ide at sætte sig ind i nyhederne.

    Officiel video for udgaven
    Som altid har Jamie Marsland en introduktion til de nye muligheder.
  • Vis produkt med shortcode

    Vis produkt med shortcode

    Sådan viser du et produkt med en shortcode.

    [products limit=”9″ columns=”3″ orderby=”popularity” class=”quick-sale”]

    Indsæt shortcoden ved hjælp af den særlige shortcode blok, hvor du fx kan skrive:

    [products limit="9" columns="3" orderby="popularity" class="quick-sale"]

    Læg mærke til, at du med parametrene kan definere, hvordan produktet skal vises på din side:

    • Limit: hvor mange produkter vil du vise?
    • Columns: hvor mange kolonner skal vises?
    • Orderby: sorterer ved hjælp af parametre, som popularity, asc, desc etc.
    • Class: har i dette tilfælde ikke noget at gøre med CSS; men derimod en grupering (her: Quicksale)

    Woo skriver i dokumentationen, at du kan filtrere:

    The [products] shortcode allows you to display products by post ID, SKU, categories, attributes, with support for pagination, random sorting, and product tags, replacing the need for multiples shortcodes such as  [featured_products][sale_products][best_selling_products][recent_products][product_attribute], and [top_rated_products], which were needed previously.

    Læs mere om Woo shortcodes her:

  • Design af produktside

    Design af produktside

    Denne side viser, at du kan specialdesigne enkelte produkter og sætte dem ind på sider og indlæg. Brug blokken “Enkel vare” og tilføj dine egne tekstblokke. Her er et eksempel:

    Leonardo d'Alee: Mona

    Design af produktside

    Se vores nye hoodie!

    Denne side viser, at du kan specialdesigne enkelte produkter og sætte dem ind på sider og indlæg. Brug blokken “Enkel vare” og tilføj dine egne tekstblokke. Her er et eksempel:

  • Should Designers Fear AI? No!

    Should Designers Fear AI? No!

    I tried to create a danish vignet for a multimedia designer project at Business Academy Aarhus. It was something of a challenge, because the AI introduced a lot of gibberish and strange spelling errors. The AI clearly wanted to use english words to the image, even though I wanted the illustration to be in danish.

    Here are a few samples:

    Here’re my prompt attemps – of course my text is in danish, but the AI insist on writing certain words in english. Some of the words don’t even exist at all in Danish and English!

  • Multilevel Menu

    Multilevel Menu

    Murat Kilic har denne vejledning til kodning af en multilevel menu i ren CSS / HTML. Med denne teknik behøver du ikke at bruge JavaScript i menuerne.

  • Sådan bruger du Github

    Sådan bruger du Github

    Github Desktop

    Github er et sted, hvor du og din gruppe kan gemme sikkerhedskopier af jeres kode. Hvis din computer bryder sammen eller bliver væk, så kan du altid hente en klon af jeres kode til en ny computer.

    Denne video viser på 20 minutter, hvordan du laver et repo, tilføjer dine gruppemedlemmer så de også kan redigere jeres fælles kode, hvordan du laver forgreninger og til sidst, hvordan du løser en “merge conflict” (sammenblandingskonflikt).

    Filstruktur

    På Github er det vigtigt, jeres filer ligges med præcis den samme struktur, som i mapperne på din egen computer. At gøre dette ved at uploade filerne manuelt en for en, det er altså ret bøvlet og tager lang tid. Derfor er Github Desktop en god løsning.

    ├── css
    │   └── css.css
    ├── images
    │   └── README.md
    ├── index.html
    └── js
        └── js.js

    Nyt Repository
    I Giithub Desktop kan du lave et nyt repository via File > New Repository. Local Path skal pege på mappen, hvor du har dine filer:

    Formularen til nyt repository på Github. Local Path skal pege på din projektmappe.

    Derefter skal du offentliggøre (publish) dit repository.

    Og så er dit repository ellers klar til brug.

    Repositoryet er klar til brug.

    Hvis du klikker på “Show in Finder” vil du se mappen, der nu bruges sammen med dit repository.

    Filerne i Finder

    Hvis du klikker på “View on Github” kan du se de gemte filer på Github.

    De samme filer er på Github.

    Du kan også åbne dine filer i Visual Studio Code ved at klikke på “Open in Visual Studio Code”.

    Visual Studio Code – åbnes i mappen. Nu kan du redigere dine filer.

    Inviter gruppemedlemmer til at redigere den fælles kode

    Hvis flere i en gruppe vil bruge det samme repo, skal du sende en invitation til gruppen. Du kan invitere ved at skrive de andre brugeres github brugernavne her:

    Inviter andre til dit repo.
    I Settings > Collaborate kan du invitere medforfattere til dit repo
    Her tilføjes brugernavnet.

    Kloner (Clone)

    Når invitationen er accepteret skal den nye bruger selv klone en kopi af dit repository til sin computer (klon betyder som bekendt: kopi af noget). Du kan også bruge en klon af din kode, fx hvis du vil redigere koden på en anden PC, når du kommer hjem.

    En nem måde at klone på er at klikke på knappen “code” i Github. Så kan du kopiere URL’en til dette repo:

    Kopier linet i “Clone using the web URL”

    Når du har dette link til repoet, så skal du bruge det til Github Desktop.

    Fortsæt i Github Desktop

    Klik på Fil “Clone Repository” (eller brug genvejen)

    Så åbnes denne dialog:

    Klon et online repo til en mappe på din PC. Læg mærke til at der er klikket på fanebladet URL.

    1:2 URL
    Klik på fanebladet URL, og indsæt det link du kopiede for et øjeblik siden.

    2:2 Local Path
    Betyder en lokal sti. Det er den mappe, hvor klonens filer bliver gemt på din computer.

    Klik nu på Clone

    Hva’ Så?

    Herefter vil Github Desktop placere filerne i den mappe du pegede på med Local Path. I eksemplet her vil mappen ligge på min Desktop. Placer dine Github filer et mere praktisk sted, det behøver ikke at være Desktoppen!

    I Github Desktop ser du nu denne dialog:

    No local changes

    Hvis der står no local Changes, så kan du:

    • Åbne mappen i Visual Studio Code (eller en anden editor).
    • Show in Finder (Mac) / Explorer (Windows).
    • View on Github – åbner din browser i repositoriet online.

    VSC – koden redigeres

    Prøv nu at klikke på “Open in Visual Studio Code“.

    VSC åbnet i “klon-mappen”

    Prøv at redigere en af filerne, tilføj fx et et par linjer til README.md filen. På billedet kan du se, der er tilføjet noget nyt:

    Husk at gemme! Når du har gemt, så skift til “Github Desktop“, der vil se omtrent sådan ud:

    Her har Github Desktop registreret ændringerne, der er lavet i kodefilerne. Det som er markeret med grønt er nyt, og det som markeres med rødt er kode, som er fjernet.

    Hvordan du skubber dine ændringer ind i Github (Push)

    Når du er tilfreds med din kode, skal den skubbes (pushes) til jeres repository på Github – således at din gruppe får nytte af dit arbejde. Gør sådan:

    Først skrives en besked til de andre (eller dig selv) om hvad du har lavet.

    Klik derefter på den blå knap “Commit to main“.

    Nu er din ændring klar til upload.

    Nu skal du klikke på den blå knap “Push Origin”. Og så uploades dine ændringer på Guthub websiden.

    Hvis du vil tjekke om din kode er tilføjet, så kan du klikke på “View on Github”. Her ser du resultatet:

    Læg mærke til den sidste linje, her kan du se “Commit beskeden” ved den fil som er ændret af dig.

    Når andre ændrer noget

    Når et af de andre gruppemedlemmer ændrer noget i jeres repo, så kan du hente deres kode i Github desktop. Klik på “Fetch Origin” (= hent fra originalen).

    Klik på “Fetch Origin”

    Nu opdager “Github Desktop”, at der er ny kode tilgængelig. Du henter den ved at klikke “Pull Origin”.

    Klik på “Pull Origin”

    Næste billede viser, at koden er opdateret:

    Og nu hvor du har den opaterede kode kan arbejdet fortsætte.

    Branch (Gren)

    Hvis du vil eksperimentere lidt med koden – uden at påvirke de andres arbejde, så kan du lave en forgrening (branch). Hvis dit eksperiment lykkes, så kan din forgrening blandes sammen med den øvrige kode.

    Her forgrenes koden

    I Github Desktop kan du oprette grene sådan:

    Her kan du selv lave en forgrening til eksperimenter.

    I den øverste linje kan du se, hvilken forgrening du arbejder på:

    I branchen kan du igen åbne ændre din kode, og pushe til dit repo som før. Her ses ændringerne:

    Ædringer ses i Github Desktop

    Nu kan du lave en “commit mesage” og pushe … som før.

    Klar til at pushe på grenen “eksperiment”.

    Pull Request

    Pull Request

    Den blå knap sender dig ind på Githubs webside, hvor du kan “merge” (= blande) den nye kode med den originale.

    Det gør man selvfølgelig kun hvis det er nyttigt.

    Hvis eksperimentet lykkes kan du lave en såkaldt “Pull Request”. Websiden på Github ser sådan ud:

    Github er klar til en pull request, hvor to grene blandes sammen.

    Så ånbes denne dialog:

    Nu kan grenene blandes (merge)

    Hvis du mener, at det er nyttigt at blande de to grene, så kan du vælge “Merge Pull Request”. Nu er grenene blandet sammen:

    Sammenblandingen af grenene er ok.

    I Network Graph kan du se, at de to grene “Main” og “Eksperiment” er blandet sammen:

    Tilbage til Main
    Samme sted kan du skifte fra en gren til en anden, så hvis du vil tilbage til main, da klik på Current Branch og vælg main.

    Branch er nu main

    Merge Conflict

    Hvad er en “merge conflict” for noget?

    En blandingskonflikt (merge conflict) opstår, når Github opdager, at den samme fil findes i to eller flere versioner. Det sker ofte, når to gruppemedlemmer arbejdeer med den samme fil, fx hvis flere har redigeret ./css/style.css.

    Blandingskonflikter kan også ske, når en forgrening giver flere varianter af den samme fil.

    Når konflikter optræder, kan de løses i Github Desktop. Her vil Github Desktop åbne Visual Studio Code i en visning, hvor du kan sammenligne kodelinjer – og markere, hvad der kan eller ikke kan bruges.

    Her kan du se, hvordan man løser en merge conflict i Visual Studio Code.

    Kilder

    Denne artikel og videoen er fremstillet ved hjælp af Open Sourde produkter:

    • Screen Capture: Open Broadcast Studio (OBS)
    • Video editor: Open Video Shot
    • Lyd: Audacity
    • Github Desktop
    • Github.com
    • Visual Studio Code (VSC)
  • Woo: Sådan tilpasses billedstørrelser

    Woo: Sådan tilpasses billedstørrelser

    Flere har spurgt, hvordan man kan tilpasse billedernes størrelser. WooCommerce har en mulighed, der gemmer sig i administrators menulinje.

    1. Klik på Tilpas i menulinjen.
    2. Åbn WooCommerce fanebladet.
    3. Tilpas billederne – videoen viser de fleste muligheder

    Det er stadig vigtigt, at du og din gruppe overvejer, hvordan billederne skal se ud, således at din netbutik får en ensartet designlinje. Det som defineres er hvordan alle jeres produktbilleder skal se ud i “grids”.

    Men nu kan du vælge andre formater end kvadrater.

  • Hvorfor anbefaler Woo kvadratiske billeder?

    Hvorfor anbefaler Woo kvadratiske billeder?

    Et andet sted har jeg vist, hvordan du kan ændre billedernes proportioner så de ikke behøver at være kvadratiske; men hvorfor anbefaler Woo at du i begyndelsen anvender billeder det kvadratiske format 800×800?

    Det er simpelt hen fordi, at Woo har lavet grids mv. efter at billederne er kvadrater. Men det behøver du ikke at rette dig efter.

    Hvorfor 800x800px
    Verden ville være mere kedelig, hvis alle billeder var kvadratiske. Så hvorfor anbefaler Woo, at billeder på shoppen formatet 800 x 800 px?

    Woo har et grid, der antager, at billederne er kvadratiske. Så når du bruger grid-baserede visninger (“views”) så skal visningen ændres til fx fuld størrelse.

    Man kommer umiddelbart til at tænke på ældgamle reklamer for Ritter Sport chokolade. Men, hvad nu hvis du ønsker et design, hvor billederne enten har portræt- eller landskabs-format?

    Alternative formater
    Du kan sådan set godt lægge produktbilleder ind, der har andre formater.

    Woo cropper tilfældigt
    Det er endnu ikke muligt at styre, hvor billedets skal være i beskæringen. Så de beskæres noget tilfældigt. Billedet bliver ikke forvrænget; men det betyder, at du ikke kan styre produktvisningen 100%.

    Rediger den rigtige skabelon
    I Twenty twenty-four – og sikkert også de foregående blokbaserede temaer – kan du redigere WooCommerce skabeloner, der styrer, hvordan dine varer vises.

    I disse skabeloner kan du sætte billedernes proportioner til fx fuld størrelse.

  • How to embed a Figma animation

    How to embed a Figma animation


    Recipe

    Screenshop: in Figma.

    1. Click on the “Share Prototype Button
    2. Copy the iframe code, under “Get Embed Code”
    3. Paste the content in a “Custom HTML Block

    I hope that it’s somehow possible to add the animation without the computer screen.

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close