Multimusen.dk

Category: Multimedia Design

Tutorials for multimedia designers.

  • 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:

    Install Git

    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.

  • 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:

    A few samle Dall-e image productions

    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!

    Dall-e Illustration Prompt
  • 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.

    Præsentation
    Kode på Github
    Startlearning.dk
  • 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

    Video: Collaboration

    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)

    Video: Clone Repo

    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)

    Video: Branch

    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

    Video: 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)
  • 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.

    Try on Figma
  • Rubric on Canvas

    Rubric on Canvas

    How to use Rubric as a feedback method on the Canvas LMS.

    Video by the makers of Canvas.

    How to add a Rubric

    There’s more in depth info in the article, click the button:

    Read article
  • Github – how to syncronize a fork

    Github – how to syncronize a fork

    On Github

    On the webpage you’ll see that your fork is behind what’s happening on the original branch:

    Now click “Sync fork”.

    Then click on “Update branch”. After a while your repo is updated.

    Open Github Desktop

    However, you still need to sync your local files. Here you have to “Fetch origin” in Github Desktop (or a similar app).

    Now you’ll see this:

    Then click “Pull origin”.

    Then your local files will be updated, after a while.

    Related video: Solve Merge Conflict

    How to solve a merge conflict by Github Deskop.
  • Guitar

    Guitar

    Musik og guitar tabs …

    Spids Nøgenhats psykedeliske version af Gasolin’s klassiker “Langebro”

    Langebro: Tabs.

    Jimi Henrix “The Wind Cries Mary”

    Tabs: “The Wind Cries Mary”

    John Mayer: Slow Dancing in a Burning Room.

    Gutar tab

    JustinGuitar – Slow Dancing in a Burning Room
    Bob Marley solo.
    Redemption Song m. band.

    Tabs: Redemption Song.

    Johhny Cash: Hurt

    Tabs: Hurt
  • wp-now

    wp-now

    “wp-now streamlines the process of setting up a local WordPress environment.”

    https://www.npmjs.com/package/@wp-now/wp-now

    If you want to host and run a WordPress Playgroundyou can install it via Node.js. First install node.js – if you don’t have it yet, follow the guide on the node.js webpage.

    Node.js works on Linux, Mac and Windows.

    Then install the package wp-now by npm, like this_

    
sudo npm install -g @wp-now/wp-now
cd my-plugin-or-theme-directory
npx @wp-now/wp-now start
    • First line: on Linux and Mac use sudo, but probably not on windows.
    • Second line: you change to the directory with the theme or plugin to be tested.
    • Third line: now this will install WordPress in a hidden directort, and open a browser after a few seconds.

    Then you’re ready to develop or test.

    Reset

    When you restart the site will appear as when you left it. However, sometimes you may need a new version. You can reset your site like this, and then you’ll get a new WP for your experiments:

    npx @wp-now/wp-now start --reset

    Start in a Theme Directory

    A fast way to test a theme is to start wp-now up in the theme directory or in a plugin directory. Wp-now will then open WordPress in that theme. This is supereasy:

    cd /localhost/wordpress/wp-content/themes/your-theme/
npx @wp-now/wp-now start
    wp-now started my homemade theme from the theme directory. In this way wp-now is a great tool when you need to test either a theme or a plugin.

    Blueprint

    A blueprint is a JSON file, that will define settings like the version of PHP or WordPress. You can install plugins and themes via blueprints too. You can load the blueprint like this:

    npx @wp-now/wp-now start --blueprint=path/to/blueprint.json

    The content of blueprint.json could be something along these lines:

    {
    "landingPage": "/wp-admin/",
    "preferredVersions": {
        "php": "7.4",
        "wp": "5.9"
    },
    "phpExtensionBundles": [
        "kitchen-sink"
    ],
    "steps": [
        {
            "step": "login",
            "username": "admin",
            "password": "password"
        },
        {
            "step": "installPlugin",
            "pluginZipFile": {
                "resource": "wordpress.org\/plugins",
                "slug": "instant-images"
            },
            "options": {
                "activate": true
            }
        },
        {
            "step": "installPlugin",
            "pluginZipFile": {
                "resource": "wordpress.org\/plugins",
                "slug": "w3-total-cache"
            },
            "options": {
                "activate": true
            }
        },
        {
            "step": "installPlugin",
            "pluginZipFile": {
                "resource": "wordpress.org\/plugins",
                "slug": "wordpress-seo"
            },
            "options": {
                "activate": false
            }
        },
        {
            "step": "installPlugin",
            "pluginZipFile": {
                "resource": "wordpress.org\/plugins",
                "slug": "ewww-image-optimizer"
            },
            "options": {
                "activate": true
            }
        },
        {
            "step": "installPlugin",
            "pluginZipFile": {
                "resource": "wordpress.org\/plugins",
                "slug": "blocks-animation"
            },
            "options": {
                "activate": true
            }
        },
        {
            "step": "installPlugin",
            "pluginZipFile": {
                "resource": "wordpress.org\/plugins",
                "slug": "font-awesome"
            },
            "options": {
                "activate": true
            }
        }       
    ]
}

    “Man” wp-now start — help

    Here are the options from the man page:

    Options:
    –version Show version number [boolean]
    –path Path to the PHP or WordPress project. Defaults to the current working directory. [string]
    –php PHP version to use. [string]
    –wp WordPress version to use: e.g. ‘–wp=6.2’ [string]
    –port Server port [number]
    –blueprint Path to a blueprint file to be executed [string]
    –reset Create a new project environment, destroying the old project environment. [boolean]
    –skip-browser Do not launch the default browser
    [boolean] [default: false]
    –inspect Use Node debugging client. [number]
    –inspect-brk Use Node debugging client. Break immediately on script execution start. [number]
    –trace-exit Prints a stack trace whenever an environment is exited proactively, i.e. invoking process.exit(). [number]
    –trace-uncaught Print stack traces for uncaught exceptions; usually, the stack trace associated with the creation of an Error is
    printed, whereas this makes Node.js also print the stack trace associated with throwing the value (which does not need to be an Error instance). [number]
    –trace-warnings Print stack traces for process warnings (including deprecations). [number]
    -h, –help Show help [boolean]

    For more information, see:

    @wp-now/wp-now
  • WordPress Blueprints

    WordPress Blueprints

    Gallery of Blueprints

    Blueprints for a range of projects, watch the gallery on Github:

    Blueprint Gallery

    Developer Resources

    Settings
    Playground Documentation

    Networking and Storage

    Storage: Device
    Storage: Browser
  • [Workaround] WP Playground – menu does not work

    [Workaround] WP Playground – menu does not work

    The Problem

    When you create a menu in WP Playground and try to click a link to a page it does not work. So how can we fix this?

    Workaround

    The reason for the problem is the URL. The playground is not online, som the URL is a bit strange. If you want a working menu in the sandbox do thus:

    1. Go to Posts in the Dashboard.
    2. Right click on “View”
      Or: open the page.
    3. Copy the URL

    In the menu insert the link to the page as a custom link.

    New Problem …

    Well … if you export the Playground, it’s probably best to enter the pages / posts in the menu in the normal way. So it’s just a temporary workaround.

    “It’s just a temporary thing“
    (Lou Reed)

  • Random Colors

    Random Colors

    Random Colors
    Try it

    We Need Colors

    More tham often randoms colors would be nice. Here’s a cool site – and as an extra you even get an explanation of the code behind it. So here’s cool tool for everyone who need a color or two.

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