Bæredygtig webudvikling

New links

• https://codecarbon.io/

• https://github.com/social-impact/focus-areas/environmental-sustainability/climate-action-plan-for-developers

Overview

• Fedt API: https://www.smk.dk/en/article/smk-api/

• Feedback på generative ai hjemmeside

  • Jeg ser mange flere funktioner, det er skide godt

    • function addMessage(newPrompt) {
          const add = {role: 'user', content: newPrompt}
          messages.push(add)
      }
      
      function renderNewMessage(newPrompt) {
          const lastMessage = section.querySelector(':last-child');
          const newMessage = `<p class="person">${newPrompt}</p>`;
          lastMessage.insertAdjacentHTML("afterend", newMessage);
      }

  • Ikke <button onclick="searchHelp()">Find hjælp</button> i html

  • Vælg den rigtige datatype

    const tips = {
            "dark souls boss": "Prøv at lære bossens angrebsmønstre og brug skjold til at blokere.",
            "minecraft diamonds": "Grav mellem lag 5-12 for at finde diamanter til armor og våben.",
            "nba 2k26": "Gå efter det mest nyttige skills i både forsvar og angreb.",
            "cs2": "Lav en opvarmningsrutine og øv dit utility i mellem dine games."
        };
    
    const tips = [{
        name: "dark souls boss",
      	tip: "Prøv at lære bossens angrebsmønstre og brug skjold til at blokere."
    },{
        name: "minecraft diamonds",
      	tip: "Grav mellem lag 5-12 for at finde diamanter til armor og våben."
    }];
    
    

  • <input class="mistralcode"> -> <input class="mistral-code">

  • Tænk over hvad en funktion gør

    async function getMistralResponse(msgs,code) {
        console.log(prompt)
        const response = await fetch("https://api.mistral.ai/v1/chat/completions", {
            method: "POST",
            headers: {
                "Authorization": "Bearer " + code,
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                model: "ministral-8b-2410",
                messages: msgs,
                temperature: 0.7,
                max_tokens: 512
            })
        })
        const data = await response.json()
        console.log(data.choices[0].message.content)
        return data.choices[0].message.content
    
    }

  • const yourApiKey = document.querySelector("#apiKey")
    const ingredients = document.querySelector("#ingredients")
    const foodMood = document.querySelector("#foodMood")
    const result = document.querySelector(".submit")
    const recipeOutput = document.querySelector("#recipe-output")
    let output = document.querySelector(".output").style.display = "none"
    let loader = document.querySelector(".loader").style.display = "flex"

  • I er blevet skarpe til at rendere! recipeOutput.innerText = dataChoices

  • Det her kan optimeres:

    document.querySelector("#generateBtn").addEventListener("click", generatePlan);
    
    async function generatePlan() {
    
        const key = document.querySelector("#mistralKey").value;
        const currentKm = document.querySelector("#currentKm").value;
        const targetKm = document.querySelector("#targetKm").value;
        const days = document.querySelector("#daysPerWeek").value;
        const weeks = document.querySelector("#planWeeks").value;

  • Funktioner

    /* RESET-KNAP */
    const resetBtn = document.querySelector("#resetBtn");
    
    resetBtn.addEventListener("click", function () {
        document.querySelector("#country").value = "";
        document.querySelector("#budget").value = "";
        document.querySelector("#nDays").value = "";
        document.querySelector("#output").textContent = "";
    });

Leveraging tools to assess performance and impact

• https://www.webpagetest.org/

• https://pagespeed.web.dev/

• https://www.webpagetest.org/carbon-control/

• https://www.websitecarbon.com/

Concrete tips

• Collaborating with the community for web sustainability

  • ClimateAction.tech is a community of tech workers working together to seed climate action in companies, organizations and industries. It's a great place to have conversations with like-minded people and get inspired to take action.

  • The Sustainable Web Design Community Group is working to define a set of guidelines for building sustainable websites. Join the group, or contribute via Github.

From here: https://developer.mozilla.org/en-US/blog/introduction-to-web-sustainability/

Introduction - why even care

• How much energy do the web use

• Terms

  • Sustainability

  • Carbon footprint

Measuring impact - Where are we now?

Design

• Simplify user experience

• Lightweight imagery

  • Cutting down image size: https://tinypng.com/

• Avoid large images, self playing

• Avoid gifs, use webp format instead - source: Sustainable Web Design

• Efficient web typography

  • Limiting the number of web fonts we use

  • Consider using a variable font if multiple weights and styles of a particular typeface are needed

  • Self-hosting your fonts will save on network requests and give you more control.

• Making greener design choices

  • A greener design might involve using less energy-intensive colors. Blue colors use more energy than red or green do, and on Organic Light-Emitting Diode (OLED) screens, a dark color scheme can save energy because black pixels are "off".

  • Websites can be designed to minimize the use of video and large images, especially by avoiding autoplaying videos or by using SVGs instead of photos where possible.

  • The user journey also plays an important part: How much time are users spending clicking around on your site, loading more resources than they need because they can't find what they're looking for?

Accessibility

Hosting

• Choosing a green web host

  • Ensuring that our web hosts use renewable energy is an important step towards reducing our sites' carbon emissions. Unfortunately, it's not always easy to distinguish genuine green credentials from greenwashing and marketing claims. The Green Web Foundation's hosting directory lists companies that provide proof of their "green" credentials.

  • https://aremythirdpartiesgreen.com/

Sustainable web development

• Choosing efficient programming language - source: Sustainable Web Design

• Static web pages - source: Sustainable Web Design

• Handling third-party embeds

  • Third-party code such as chat widgets, analytics scripts, and social media embeds are often the worst offenders when it comes to page weight and data transfer

  • Consider using the import-on-interaction pattern, where loading is deferred until a user interacts with the widget.

  • Trackers

• Reducing JavaScript usage

  • Do you have to use js? http://youmightnotneedjs.com/

  • https://bundlephobia.com/

• Dynamic imports can help reduce the upfront JavaScript bundle size and prevent users from downloading code that won't be needed until much later.

• Block the Bots - source: Sustainable Web Design

• General optimization

  • Minifying, compressing, and tree-shaking your code, in addition to compressing images, will all contribute to reducing data transfer.

  • Image, video, font, html, css and javascript - Source: https://sustainablewww.gumroad.com/l/sustainable-web-design-in-20-lessons

• Cache - Additionally, we can make sure we cache as much as possible. Harry Roberts provides a great guide to cache-control for civilians

• Optimizing energy use with carbon-aware computing

  • The Green Software Foundation offers some great resources on this topic.

  • We can reduce our reliance on electricity generated from fossil fuels by looking at where and when we run energy-intensive processes:

    • By utilizing servers in locations where a higher proportion of electricity comes from renewable sources (spatial shifting).

    • By running processes at times of the day when demand on the electrical grid is low, or when more electricity is being produced by intermittent solar or wind power (temporal shifting).

    • https://solar.lowtechmagazine.com/

    

    alt_text
• CDN's

Links

• https://greensoftware.foundation/

Books

• https://abookapart.com/products/responsible-javascript

• https://abookapart.com/products/sustainable-web-design.html

Sources used:

• https://sustainablewww.gumroad.com/l/sustainable-web-design-in-20-lessons

• https://developer.mozilla.org/en-US/blog/introduction-to-web-sustainability/

• Tom Greenwood - Sustainable Web Design - På KEA biblioteket

Opgaver