lejonmanen

Skriv i terminalen

# Skapa projekt och gå in i dess mapp
npm create vite@latest
cd awesome/

# Skapa mapp för kod och fil för serverkoden
mkdir backendSrc
echo "console.log('Hello from server')" > backendSrc/server.ts

lejonmanen

// Exempel på en datatyp
type Account = {
    id: string;
    balance: number;
}

// "mystery is Account" kallas "type predicate"
// Returtypen är boolean, fast den används för att intyga att datatypen är "Account"
// "if this function returns true, treat the argument as an Account"
function isAccount(mystery: unknown): mystery is Account {

lejonmanen

Skriv i terminalen:

# Skapa projektmapp och gå in i den
mkdir awesome-server/
cd awesome-server/

# Skapa mapp för kod och fil för serverkoden
mkdir src
echo "console.log('Hello from server')" > src/server.ts

lejonmanen

type ApiState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; pokemonList: string[] }
  | { status: "error"; error: string };

const [state, setState] = useState<ApiState>({ status: "idle" });

async function fetchPokemon() {
  setState({ status: "loading" });

lejonmanen

from playwright.sync_api import sync_playwright

# Runs before any scenarios
def before_all(context):
    # Start Playwright and the browser - close it in after_all
    context.playwright = sync_playwright().start()
    context.browser_type = context.playwright.chromium
    context.browser = context.browser_type.launch(headless=True)

# Runs at the start of each scenario

lejonmanen

# Gör en Feature-fil för varje större feature i appen.
# Varje feature testas med ett eller flera scenarion.
# Varje scenario beskrivs med flera steg, som definieras i en separat step-fil.
# 
# Även icke-tekniska personer ska kunna läsa och förstå vad dessa testscenarier går ut på.
#

Feature: Enkel kalkylator

  Scenario: Addera två tal

lejonmanen

/*
Exempel på validering av formulär
Förbättringar:

+ Flytta valideringslogik till en separat hook för återanvändbarhet.
+ Lägg till fokus på första fel för bättre tillgänglighet: inputRef.current.focus()
+ Lägg till visuell feedback på input (t.ex. border-färg) för bättre UX. Återkoppla med mer än färg.

*/
import { useState } from "react";

lejonmanen

// App.jsx
import { Suspense } from 'react'
import './App.css'
import Loading from './Loading'
import Consumer from './Consumer'

const App = () => (
	<div>
		<Suspense fallback={<Loading />}>
			<Consumer />

lejonmanen

name: Python CI/CD

# Talar om när jobben ska köras. Denna inställning bevakar när man gör push eller pull request mot branchen "main".
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:

lejonmanen

SVG är ett bildformat, som man kan skriva med HTML-syntax. Eftersom den består av HTML-element kan man välja ut de ingående delarna med hjälp av JavaScript.

Exempel
Filen innehåller:
<path id="scaffold" ...>

Skriv i JS:
const part1 = document.querySelector('#scaffold')
part1.classList.add('css-klass som gör elementet osynligt')