
Currently I am in love with the old film styles, and I am trying to capture the moments "as is". Perfect focus and perfect pictures have become boring to me, so I am currently just trying to break as many "rules of photography" as possible to see what works, what makes the images feel like a story, or how to incorporate feelings into the images.

Street photography is by nature grungy and "ugly", but that is the way I like it.

![](https://cdn.sanity.io/images/j26i5482/production/d30b15d92a61a9811be5d7962bc79ddeabc1c221-2048x1365.jpg?w=650)

![](https://cdn.sanity.io/images/j26i5482/production/9a6cffa9cbbe14d1bdc6cae46b98ca9bb3b9392c-1365x2048.jpg?w=650)

![](https://cdn.sanity.io/images/j26i5482/production/d1b57a78e16f888a537ea6694cca4d623b019d0a-2048x1521.jpg?w=650)

![](https://cdn.sanity.io/images/j26i5482/production/ebd76159eb0b10e5a0ae73b2e357748b0783a018-2048x1987.jpg?w=650)

![](https://cdn.sanity.io/images/j26i5482/production/3071fcf592adcc74e2c3caaaa5e5d8350e05f2ca-1365x2048.jpg?w=650)

Just got a new camera, sparking my interest in photography again. The weather hasn't been great lately, but I've still managed to get a couple of pictures taken.


Bergen street photography

For a long time I have liked the [Hyperpower extension](https://github.com/vercel/hyperpower) for the Hyper terminal. Although I am not using the terminal myself, I look at it as a "fun" terminal.

In this blog post, Ill try to explain my implementation of it. The code is written in TypeScript and uses React hooks. And to top it all of, it is built into a small project, a Haiku verification prototype.

## Introduction

The application consists of two main components:

1. `AnimatedTextAreaWrapper`: Manages the animated text area.
2. `Home`: Validates the Haiku and renders the `AnimatedTextAreaWrapper`.

<iframe width="100%" height="700"  src="https://75m3n8-3000.csb.app/?haiku=An+old+silent+pond%0AA+frog+jumps+into+the+pond%E2%80%94%0ASplash%21+Silence+again" allowfullscreen></iframe>

You can play around with it [here](https://codesandbox.io/p/sandbox/hyperpower-textarea-75m3n8?file=%2Fapp%2Flib%2FverifyHaiku.ts%3A1%2C1)

<CH.Code>

```tsx app/components/AnimatedTextAreaWrapper
"use client"
import React, {useEffect, useRef, useState} from "react";

interface Particle {
  x: number;
  y: number;
  alpha: number;
  color: number[];
  velocity: {
    x: number;
    y: number;
  };
}

const MAX_PARTICLES = 50;
const PARTICLE_ALPHA_FADEOUT = 0.99;
const PARTICLE_VELOCITY_RANGE = {
  x: [0, 3], // controls the x direction particle velocity range
  y: [-3.5, -1.5], // controls the y direction particle velocity range
};

interface AnimatedTextAreaProps {
  haiku: string;
  onChange: (event: any) => void;
}

export const AnimatedTextAreaWrapper = ({
  haiku,
  onChange,
}: AnimatedTextAreaProps) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const particles = useRef<Particle[]>([]);
  const [needsRedraw, setNeedsRedraw] = useState(false);
  const [safeToRender, setSafeToRender] = useState(false);

  useEffect(() => {
    setSafeToRender(true);
  }, []);

  useEffect(() => {
    if (typeof window === "undefined") return;

    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const drawFrame = () => {
      if (particles.current.length) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.current.forEach((particle) => {
          particle.velocity.y += 0.075; // Gravity
          particle.x += particle.velocity.x;
          particle.y += particle.velocity.y;
          particle.alpha *= PARTICLE_ALPHA_FADEOUT;

          if (particle.alpha > 0.1) {
            ctx.fillStyle = `rgba(${particle.color.join(",")}, ${
              particle.alpha
            })`;
            ctx.fillRect(
              Math.round(particle.x - 1),
              Math.round(particle.y - 1),
              3,
              3,
            );
          }
        });

        particles.current = particles.current.filter(
          (particle) => particle.alpha > 0.1,
        );
      }

      if (particles.current.length > 0 || needsRedraw) {
        requestAnimationFrame(drawFrame);
      }
    };

    requestAnimationFrame(drawFrame);
  }, [needsRedraw]);

  const spawnParticles = (x: number, y: number) => {
    const numParticles = 5 + Math.round(Math.random() * 5);
    for (let i = 0; i < numParticles; i++) {
      const color = [Math.random() * 155, Math.random() * 155 + 100, 255];
      particles.current.push(createParticle(x, y, color));
    }

    if (!needsRedraw) {
      setNeedsRedraw(true);
    }
  };

  const createParticle = (x: number, y: number, color: number[]): Particle => {
    return {
      x,
      y,
      alpha: 1,
      color,
      velocity: {
        x:
          PARTICLE_VELOCITY_RANGE.x[0] +
          Math.random() *
            (PARTICLE_VELOCITY_RANGE.x[1] - PARTICLE_VELOCITY_RANGE.x[0]),
        y:
          PARTICLE_VELOCITY_RANGE.y[0] +
          Math.random() *
            (PARTICLE_VELOCITY_RANGE.y[1] - PARTICLE_VELOCITY_RANGE.y[0]),
      },
    };
  };

  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
    const textarea = e.currentTarget;
    const { left, top } = textarea.getBoundingClientRect();
    const cursorPos = textarea.selectionStart;
    const lines = textarea.value.substring(0, cursorPos).split("\n");

    const lineNum = lines.length;
    const colNum = lines[lines.length - 1].length;

    // You may need to adjust these based on your specific styling
    const charWidth = 9.65; // Approximate width of a character in pixels
    const lineHeight = 20; // Approximate line height in pixels

    const x = left + colNum * charWidth;
    const y = top + (lineNum - 1) * lineHeight;

    spawnParticles(x, y);
  };

    return (
      <div
        className={
          "rounded-[calc(1.5rem-1px)] p-px bg-gradient-to-tr from-blue-400 to-cyan-500"
        }
      >
        <div
          className={
            "rounded-[calc(1.5rem-1px)] p-10 bg-gradient-to-tr from-blue-900 to-cyan-900"
          }
        >
          <textarea
            onInput={handleInput}
            id={"haikuWindow"}
            value={haiku}
            onChange={onChange}
            rows={5}
            cols={50}
            className={
              "font-mono h-32 leading-5 w-full z-index-10 border-none outline-none resize-none bg-transparent text-white"
            }
          />
          {safeToRender && (
          <canvas
            ref={canvasRef}
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              pointerEvents: "none",
            }}
            width={window.innerWidth}
            height={window.innerHeight}
          />)}
        </div>
      </div>
    )
};

```

```jsx haikuValidator.ts
const handleChange = (event: any) => {
  const { value } = event.target;
  setHaiku(value);
};
```

</CH.Code>



I tried emulating the hyperpower extension for the hyper terminal.

More particles in canvas

# Eit utanfrå perspektiv på Stryn, frå en stryning.

Stryn, der eg føler meg heime, der eg høyrer til. Bygda som alle over 30 har høyrt om. 

>"Den fagre bygda mellom fjella" 

blir den omtalt om når eg snakkar med andre på min alder og oppover. Eg er 28 år og har mykje godt å seie om bygda mi og folka som bur der, men eg har lyst til å sette litt lys på kva som held på å skje no.

Ein kan nok takke koronaen litt for det at mange folk under 30 ikkje lenger veit kvar Stryn er lenger, det er nok ikkje den yngre generasjonen som har vert fokuset til oss Stryningar, heller ikkje turismen frå eige land. Der var eit par år som kom og gjekk, kanskje eit par år som ingen vil hugse eller kanskje ikkje tenkjer på. Det var det året då mange i Stryn fortvilte over alle dei norske turistane som gjekk turar og telta langs, og i alle vegane våre.

Dei turistane var nok med på å redde mange av våre flotte turistatraksjonar og bedrifter i heile kommunen. Eg trur også det var mange som var glade for å sjå at så mange tok turen til oss i den vesle bygda og kommunen vår. Det var i alle fall det eg tenkte.

Stryn sentrum fekk eit lite problem i denne perioden. Folk kom til kommunen vår frå alle krikar og krokar, og som Asbjørnsen og Moe, gjekk dei rundt og leita etter nye eventyr, spurte seg fram til ting verdt å høyre og sjå. Det første steget var ofte det vanskelegaste i Stryn, kvar i alle dager finn ein turistinformasjonen, dette er eit spørsmål eg vart stilt fleire gangar den tida eg var heime sommaren, både frå bekjente og ukjende.

Du lurer kanskje på kvar turistane blir peika hen? Jo, ut av Stryn sentrum, til Lodalen, Olden, Oldedalen, Rakje, Hoven og så vidare. Vi har jo sjølvsagt litt i sentrum også, men det er ikkje det som er fokus for den vesle bygda vår. Vi er stolte av kommunen vår, vi er stolte av fjella våre, men der er liten grunn for ein turist å stoppe igjen i sjølve Stryn sentrum, i alle fall i følge turistinformasjonen (men vi kan ikkje legge skulda på dei som jobbar der, det er eit kommunalt ansvar å velge kva som er i fokus).

Når eg møter nye folk som er litt yngre enn meg og fortel kvar eg er ifrå, er det få som veit kvar Stryn ligg i landet lenger. Så eg har blitt vandt med å seie at det er rett ved Loen, der alle instagram bileta er frå. Då veit dei med ein gong kvar det er, svaret eg ofte får då er at dei har køyrt gjennom rundkøyringa vår.

Stryn, ikkje lenger kjend for naturen, plassen å vere, der iddrettsstjernene er frå, der Moods starta, der Skogstad og Riccovero har henta inspirasjon frå, navlen i Sogn og Fjordane, rosina i pølsa om ein vil. I alle fall ikkje blandt den yngre generasjonen.

Dette er ikkje skreve for å få folk til å slutte å anbefale Loen, Lodalen, Olden og Oldedalen, det er jo Stryn kommune. Men dei har gjort ein betre jobb enn oss Stryningar frå sentrum for å plassere seg på kartet, og behalde den. Dei fortjena all ære og turisme dei får.

Dette er skreve for å sette fokus på at Stryn må heve seg nokre nivå, der må vere ein grunn for turistar å stogge igjen i sentrum, noko som drar folk inn og interesserar, og ikkje berre i festivaltidene, men også utanfor.

## Stryn, eller New York?

New York, kjent som ein "concrete jungle", eller på godt norsk "betong skog". Definert av mykje asfalt, betong, grått og trist med lite natur. Stryn sentrum er på veg i denne retninga. Har du nokon gong sett eit luftfoto av Stryn sentrum? Det er grått og asfaltert.

![](https://cdn.sanity.io/images/j26i5482/production/fa02d434be2147daa542e68dd2f41305bd234606-2436x1272.png?w=650)
(https://www.norgeibilder.no/)

Stryn sentrum viser ikkje at vi ligg i vakker natur eller at vi tar vare på naturen vår. Naturen og fjella har sjølvsagt endå magi, og er verdt å skryte av. Men det er kanskje ikkje nok for å få folk til å bli i sentrum, du får tross alt same opplevinga i heile kommunen. Det er fleire av oss som har ønskjer å reise heim, heim til ei bygd med moglegheiter, ikkje berre for karriere, men også for familie. Stryn har utvikla seg for å legge til rette for den stigande snittalderen, skal ein trekke folk tilbake til Stryn så er ein nøydde å gjere det attraktivt å kome heim, også for dei som er neste generasjon.

I sentrum kunne ein ha satt opp boligblokker, kontorbygg, parkar, attraksjonar, badeland (var det vel snakk om ei stund), sentrumsnære turløyper som er eigna eldre, det er eigentleg kun fantasien som setter grensene. Sentrum i Stryn er relativt lite i areal, men det er fullt mogleg å bygge i høgda. Det at industrien også har fått eit så stort stykke av arealet i eit relativt lite sentrum er ikkje nødvendigvis ein god ting. Industrien burde ha vore flytta opp ut av sentrum. Dette hadde åpna dørene for å utvikle sentrum og den lokale handelen.

Vi er heldige i Stryn som kan leve av både handel, industri og turisme. Men industrien har ikkje nødvendigvis eit behov for å ligge i midten av sentrum. Bedriftene i sentrum har gjort ein god jobb når det kjem til å passe på at bygda er innbydande når du kjem køyrande. På begge sider står lastebilane parkert fint og strukturert, men det er fortsatt mykje potensiale for forbetring, det kunne for eksempel ha vore, park eller aktivitetsområde.

Det er sjølvsagt ikkje "berre" å flytte industrien ut, det måtte ha skjedd gradvis og i takt med at ein skapar ny aktivitet. Ein kan ikkje berre sette opp ei boligblokk som står tom i håp om at ein får mykje tilflytning, men å snakke om dette og legge planar ein kan sjå fram til og jobbe mot, er ein god start for å gjere Stryn til ein attraktiv plass å flytte heim til. Eg meinar ein kan sjå til Sandnes for inspirasjon, Sandnes er sjølvsagt ein plass med meir folk og meir midlar og fin natur (vi slår dei fortsatt på natur), men kjenner eg oss Stryningar rett så får vi til det om vi vil.

![](https://cdn.sanity.io/images/j26i5482/production/b3d357ef1d22223dc666d8ce0574c71aeedfc5de-1450x782.png?w=650)
![](https://cdn.sanity.io/images/j26i5482/production/df70cd35b3e747da922d0bfff85dbcdee90193af-1444x1012.png?w=650)
![](https://cdn.sanity.io/images/j26i5482/production/f6a5335cc6fe1b6a66e21f21431ce17458ab202e-1448x766.png?w=650)
https://www.isandnes.no/aktuelt?lid=535458895&category=Byutvikling&sort=-1&sortorder=-1#xpm804702999

Legg merke til korleis det som er planlagt tar med seg naturen, alt blir ikkje berre asfaltert over, men ein lagar kunst av framgang. Her i Stryn er vi så vekkskjemde med natur at vi ikkje ser verdien i han, men i staden asfalterar naturen vekk.

Eit sitat frå ein kamerat av meg for rundt seks år sidan:
> Eg skal i alle fall ikkje flytte heim til Sandnes, det er ikkje for meg, og ser ikkje framtida mi der.

Eit sitat frå same person no:
> Eg ser framtida mi i Sandnes no og har lyst til å flytte tilbake, dei har klart så mykje på kort tid og eg har lyst til å vere med på utviklinga.

Det er sjølvsagt berre ei oppleving frå mi side, der er sikkert andre som seier det motsatte, men det er denne kommentaren som har fått meg til å skrive dette litt kritiske innlegget.

Stryn kommune sine planar for stryn og omegn er som regel ganske grå. Eg er blandt anna ikkje særleg imponert over planane for kaia i Olden, og er bekymra for at vi kanskje får same stilen i Stryn sentrum.

![](https://cdn.sanity.io/images/j26i5482/production/918aab04a918d1c7dc6c1b4231191ab74cd9b07a-1977x1051.png?w=650)

Kaia i olden er enda eit eksempel på at naturen blir asfaltert vekk. Vi er nøydde å skjerpe oss. Vi treng ikkje konkurrere med Førde for gråaste sentrum/kommune. Få fram fargar, bruk annaleis materiale. Vi fekk ny vidaregåande for mange år sidan, denne er no blitt grå, slik som planen var. Det er på tide med fargar og natur.

Handelsstanden skal ha, ære for at vi har turistar gåande i gatene i Stryn om sommaren, dei held liv i gatene våre. Det same gjer dei rånerane våre, når det er kveldstid og folk er på puben, vertshuset eller gastroen, så får turistane med seg eit yrande liv utanfor, noko som får dei til å snakke med sine, om den Volvoen som køyrde forbi med duska i ruta, augevippe på lyktene eller treski på taket. Det går rykte om rånerane i Stryn heilt til Bergen og Oslo. Eg har bekjente som har lyst til å vere med til Stryn kun for å kunne observere denne kulturen og miljøet.

Så kjem vi til idretten vår, idretten vår gjer det bra, men der er heilt klart mangel på åpne tilbod utanfor det organiserte. Dette er dei åpne og gratis tilboda eg kjem på som vi har i Stryn sentrum i dag:
ein skatepark, 3(!) fotballbaner med tilhøyrande anlegg, to gode volleyballbaner (forhåpentligvis ikkje asfaltert når eg flyttar heim), leikeplass ved Tonning skule, og eit stengt klatretårn utanfor kulturhuset.
Om ein er villige til å gå ut av sentrum eller bruke pengar så har vi turløyper der du kan velge sjølv om du vil ha tilskuera frå hyttene eller ikkje, splitter ny fleirbrukshall, symjehall og treningssenter.

Eg får inntrykk av at folk i og frå Stryn er stolte av å både bu her og å vere Stryning. Folk i heile landet har fortsatt respekt for oss Nordfjordingane og Stryningar, la oss jobbe for å behalde det gode ryktet og samholdet som bygda, og bygdene rundt oss, har jobba oss opp.

Det eg ynskjer meg som ein som ynskjer å flytte heim er planar, teikningar og offentleg informasjon om kva som skjer. Eg høyrt om at der er nye planar og ynskje om innspel til kva som skal vere fokus framover og kva vi som kjem tilbake vil ha som tilbud. Det første på lista mi er i alle fall enkelt tilgjengeleg informasjon, slik som Sandnes har lagt opp til, skap blest om planane våre, markedsfør bygda og Sentrum.

### Til slutt vil eg legge til mine ynskjer for sentrum.

Sjå for deg eit eldresenter med utsikt mot ein åpen park eller aktivitetsområde, der borna har lyst til å vere, der du kan sitte å sjå på barnebarna leike og mimre om gamledager. I denne parken er der fleire tilbud som frisbeegolf, leikestativ og piknikbord for familiar. Kanskje eit par offentlege grillar, der innbyggjera i sentrum kan samlast og kose seg. Ein sykkelsti som går rundt i parken med trafikklys som faktisk fungerar, slik at born kan øve på å vere trygge i trafikken. Kanskje ei utandørs padelbane for litt eldre ungommar og eit lite utandørs treningssenter eller tuftepark. Eit par nedfelte trampoliner og ei balanseline slik at born lærer seg det grunnleggande med å beherske kropp.
Ein nettcafe i sentrum, der dei som likar å sitte framføre PCen kan samlast å game på dag/kveldstid med innspel frå bedriftene på kveldstid som kan vere med på å vekke ei teknologisk interesse hos dei som er der.

Dette kan vere hårete mål, mål som ikkje kan realiserast på ein del år enda, men vi må starte å planlegge mot eit betre sentrum, eit fint sentrum, med naturen og ikkje i mot. Eg ynskjer å flytte heim, men eg ynskjer å vete kva som ventar meg og framtida mi om eg flyttar tilbake, det å flytte tilbake til ein parkeringsplass eller asfaltjungel fristar ikkje så veldig.

>Vær vennleg å lag blest om bygda mi, markedsfør den, leg planane ut offentleg, inspirer meg.
>\- Mathias Bøe

Eg stiller meg kritisk til Stryn sentrum og planane som er lagt i dag. I dette innlegget prøvar eg å komme med konstruktiv kritikk til Stryn og mine ønsker for et beitre sentrum.

Mine meiningar om Stryn sentrum

This is how I made a particle system for images. It's up for debate wether or not this is a practical or efficient way to do this, but it ran decently on my M1 macbook.

This article will go through some of the code, and outline some difficulties of implementing it in react/next.

Having fun with particles in HTML canvas and JavaScript

2022 Was a good year for concerts. Here are most of the concerts I attended in 2022, the highlight being Lime Cordiale personally, considering I'm a big fan. Tøfl on a close second. Rammstein I would argue is not a concert and more a show, and in that regard its clearly the best show I went to the whole year.

## Mods - 11. June

Starting this year off with a bang, Mods brought evereyone that is something in Rogaland together for this concert.
![](https://cdn.sanity.io/images/j26i5482/production/31e9b5525bdf6b38466f230eb4c935d960f321fd-1364x1818.png?w=750)

The concert started at 17:00 and lasted until midnight, the warmup show was excellent, consisting of many different artists such as Tøfl, Vestlands Fanden, Kriminell Kunst, elle melle, Froddi og Compagniet, Stavangerkameratene, and people like [Camilla Herrem](https://en.wikipedia.org/wiki/Camilla_Herrem) and [Bent Høie](https://en.wikipedia.org/wiki/Bent_H%C3%B8ie). 

Before kicking it off with an amazing live performance that made everyone in the SR Bank Arena sing.

![](https://cdn.sanity.io/images/j26i5482/production/076f1cfb7e9d5be5d60eed8aa2dfccd53e72525f-2424x1818.png?w=750)
![](https://cdn.sanity.io/images/j26i5482/production/984a574cb0dcfd88f11a4033e35434a429502ebd-2424x1818.png?w=650)

And just when you thought this concert was about to end they sing their song "meg må du hilsa på", which is a banger by itself, but singing it along with the rest of a stadium was a pleasure.

<Video url="https://youtu.be/UqCZ5ruhI7A?t=120" />

Concert: 6/6

Show: 6/6

## Rammstein - 24. July

<Video url="https://youtu.be/W8-02N9xxLs?t=604" />

![](https://cdn.sanity.io/images/j26i5482/production/76b9ce0b5c067d1df3d9f341c0adfbf6ca031dc8-3672x2066.jpg?w=750)

![](https://cdn.sanity.io/images/j26i5482/production/f32d2d2ca405163741ec09d04590b2cd381478f5-3672x2066.jpg?w=750)

![](https://cdn.sanity.io/images/j26i5482/production/dc4c548a52c247634085720f8dc88e955f6b236a-4032x3024.jpg?w=750)

Show: Can't be scored, its just the best show out there.
Concert: 5/6, as a concert it might not be the best concert ever, but the show is insane and worth watching whether or not you like the music.

## Oktoberfest in Stryn 16-17. September

Like always one of the highlights of this year. Its a two day festival where everyone in [Stryn](https://en.wikipedia.org/wiki/Stryn) comes together to drink, sing, and dance.

### Oslo blåseorkester

![](https://cdn.sanity.io/images/j26i5482/production/a7c2dcd74b53a5a382ffd725278614b1c605f92f-1364x1818.png?w=750)

Oslo blåseorkester is one of the most fun bands to see, they are a cover band, but cover every song with a ompa-twist.

Concert: 5/6

Show: 5/6

### Vassendgutane

Vassendgutane brings in the crowd, and for some unexplainable reason, even if you do not know the songs they play, you are able to sing them perfectly after a couple of beers. It seems like their songs and lyrics are locked behind the veil, which you are able to pierce with alcohol.

If you like to be deaf and have a lot of fun, Vassendgutane is worth watching. They play waay too loud, but that is just part of their schtick. Just remember to bring something to protect your ears if you are seeing them.

Concert: 5/6

Show: 4/6

### Staysman

I am not a fan of his music at all, but that being said, it was a really fun stage show, and made everyone else sing. It was a fun experience.

Concert: 4/6

Show: 5/6

## Lime Cordiale - 24. October

<Video url="https://youtu.be/TIufoOOz6VU?t=180" />

![](https://cdn.sanity.io/images/j26i5482/production/d1dbfa4e2f215f10484f650ed0c848b27d9eb7fb-2424x1818.png?w=750)

![](https://cdn.sanity.io/images/j26i5482/production/d8558f473af9e0c75bb62c29bd30a0257cb096fb-1416x1770.png?w=750)

Finally Australian music is coming to Norway, it's been a long time coming, as they have, in my opinion, the best music scene at the moment. One of the bands with the best vibes from down under is Lime Cordiale.

The warmup show by Annie Hamilton was also fantastic and a raw musical experience. It was just her and her guitar on stage, making it an intimate and special experience.

It was also fun meeting the band before the concert where we got to exchange some words and talk.

Concert: 6/6

Show: 5/6

## Ka2 - 10. November

<Video url="https://youtu.be/SvzSRTshYyU" />

Ka2 is probably my favourite band from Bergen at the moment, their stage presence and visuals are fun, their songs hit hard and go all the way from lounge edm to hard club music.

Concert: 5/6

Show: 6/6

## Hjerteslag - 17. November

<Video url="https://youtu.be/rpklaNm7464" />

Hjerteslag was a huge disappointment. I left the concert early after hearing the songs I wanted to hear.

Concert: N/A

Show: Boring

## Tøfl - 18. November

<Video url="https://youtu.be/ahsTK-I6hi0?t=28" />

After the Mods concert earlier this year I was listening to Tøfl probably every day since, they really engrained themselves into a part of my brain. Their songs are relatable and upbeat, their show is energetic and fun. If you have a chance to see these guys, it's a very underrated band at the moment. Getting tickets should not too hard, but I predict that it will be much harder in the future to get them.

I would like to see more stage effects when they get larger, but their music and sound doesn't really need it.

Concert: 6/6

Show: 5/6

An overview with pictures and videos from the concerts I went to in 2022.

2022 in concerts

Watch me break all my own rules on my website for the purpose of learning.

Anyways, here are some good points on when and why you should use animations to make the user interact with your content.

As a web designer or digital marketer, you know the importance of creating a user-friendly and visually appealing website. One way to achieve this and encourage users to take a desired action on your site is through the use of animations.

But why are animations an effective tool for calls to action (CTA)? Here are a few reasons:

1. Animations grab attention. A well-designed animation can catch a user's eye and draw them towards the CTA. This is especially useful on websites with a lot of text or other elements that could distract the user.
2. Animations add personality. A CTA button with a simple hover effect can be effective, but adding an animation can make the button feel more alive and add character to your website. This can help create a more memorable and enjoyable user experience.
3. Animations can convey information. Instead of using text or static graphics to explain a product or service, an animation can clearly demonstrate how it works. This can be especially useful for complex concepts that may be difficult to understand through other means.
4. Animations can increase conversions. By making the CTA more noticeable and engaging, an animation can increase the likelihood that a user will take the desired action.

It's important to use animations sparingly and with purpose, as overuse can be distracting or annoying to users. But when used effectively, animations can be a powerful tool to encourage users to take action on your website.

Just a short writeup that contradicts some of the design methodologies used on this website. Its just a short post about why and when to use animations on your website. Its nothing groundbreaking, just a couple of general rules that is nice to keep in mind.

Animations and Call to action (CTA)

Just a collection of some of the videos ive edited and shot through the years. Some are good, others are just here to serve as a memory of good old days.

Some of my videos from way back when

<Video url="https://vimeo.com/booen/glittertind" />

Every semester, Gnist, a subgroup of echo, organizes a competition where you earn points for hiking and working out outdoors. The main point of the competition is to activate the students as we move into the exam period, and the threshold for participation should be very low. Different scores are given for the different mountain peaks, depending on the height, length, and the terrain you have to walk through. Even if there are only two winners in the competition, one in the men's class and one in the women's class, it is still possible to win a number of prizes that are raffled off when the competition is over, and each point earned is converted into a lottery ticket. This helps the motivation of everyone, even those who do not have time to go extreme amounts of hiking.

## Motivation

Currently, the entire competition is run through a Facebook group where you have to upload tracking maps with time stamps and an overview of where you have hiked, in addition to a photo you have taken on the mountain top to get the most points. Countless different apps have been used to track this information, ranging from Strava to Fitbit or Samsung Health, and the quality of tracking and the information you get from the various apps varies greatly. Therefore we will create one app for everything from tracking to scoring and taking photos, to gather everything in one place. We also want the points to be awarded automatically based on what has been tracked, so that the points earned are the same for everyone. In the Facebook group, some have tried to circumvent the rules to get as many points as possible for the shortest possible hike, and sometimes they have even succeeded because of a vague set of rules. Therefore, it is important that the points earned are the same for all participants, and that the rules are set by the organizers of the competition.

## How

### Technologies

**Flutter**
We have decided to use Flutter to be able to build the application for both Android and iOS at the same time. Our user base is the students already participating in the challenge and they have a variety of devices and it’s important that we cover the main ones.

**Firebase**
We use firebase for our database as it has a good free option to start with and offers excellent scalability if we want to go further with the application in the future.

**Github**
We decided to use Github as our version control and issue tracker. We are both familiar with github and will provide us with the easiest workflow. We have tried other issue trackers on other projects, but these pages often get neglected in favour of actually working on the project, having both version control and issue tracking on the same website is something we do to try to mitigate that problem.

**Figma**
We use figma for our design documents to make sure we are on the same page when it comes to the design of the app.

## Methodology

Figuring out what technologies we wanted to use was not an easy task. There are many different ways of developing apps today. Some are cross platform, others are native. In our app we need as much performance as we can get as we are rendering maps and collecting user position. Especially collecting user position can be power hungry, but so far in our tests the app isn't very power hungry compared to other apps such as the Norwegian Institute of Public Health's "Smittestopp" app. To get a real metric on this further testing is needed as our tests are just done on our iPhones so far.

We ended up with going for Flutter as it builds down to C/C++ and will in theory be more performant than other cross platform solutions such as React Native. Coding in Flutter also leads to cleaner code as we don't need to mix `html` and `javascript` in the same file.

### React Native vs. Flutter

Example of hello world in react native:

```js
import React from "react";
import { Text, View } from "react-native";

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Hello, world!</Text>
    </View>
  );
};
export default HelloWorldApp;
```

As you can see it looks like react code, which is nice when developing websites, but working with both react native and react at the same time is really confusing and leads to language confusion. In general its more a question of taste as both frameworks offer much of the same capabilities.

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
```

As you can see the code for flutter (dart) is pretty similar, so the difference is mostly based on taste and what you are most familiar with. You either go the route of developing the app as a `html` app. Or you go the route of flutter where you have different components with properties. It works the same and looks the same, but using components such as `card` which can have children as a prop, makes more sense to us than using `div` tags with the `className="card"` property just makes more sense to us. We can also just use googles material-ui to a develop fast and working app with app-bars (header) and layouts that makes sense.

We landed on flutter as having a strongly typed language and the ability to have null safety will lead to easier testing and hopefully more stability since it gives us compile errors if things are going wrong.

### Choosing the map provider

At first we used open street maps for our maps as it has community maps that are constantly being updated. But implementing them and customizing the visual elements are really hard compared to mapbox. Especially when adding support for multiple map tiles such as performance maps and dark mode.

So we ended with mapbox as our provider for maps as the ease of use made for a smoother and faster development cycle.

This also makes it easy to implement visualizations to these maps in the future. Mapbox is supported by a big company as well, so scalability has already been tested making our app able to scale well into the future.

### Choosing the database

Choosing the correct database for the data gathered can be hard, but for this project it was pretty self explanatory. Firebase excells in speed and the ability to scale it up as much as you want/can afford in an easy way. You could do this with a PostgreSQL database, but setting up volumes, managing the database and ensuring scalability quickly leads to increased development time for a team of two. Firebase also gives you crash reports in their console which is really helpful for diagnosing crashes or issues that the users experience without them having to actually report the issue. With all these features there aren't many good arguments for going with something else. There is an open source version of firebase available, but it is important for projects like this to have long time support, and that is not always the case with open source solutions.

## MVP

The current MVP for us is that we want an app to be working on both iOS and Android. The users should also be able to score points and see themselves on the leaderboard. This in turn requires map integration.

- App runs on Android.
- App runs on iOS.
- Firebase integration allows points to be earned.
- Simple leaderboard.
- Map integration.
- Allowing admins to administer bonus points to certain geofenced areas.

## Roadmap

[view roadmap here.](https://app.startinfinity.com/b/JtAkLMWyUct)

#### Echo

Need to keep track of points from participants ➡️ Solved by Leaderboard.

Need a way to give points to users for hiking ➡️ Solved with an interactive map with points system for different hikes and elevations.

#### Participants

I need a way to show echo proof of my hike ➡️ Solved with smart visualization of current hike.

I want to know how much further I have to go to get more points ➡️ Solved with an interactive map

#### TODO Features

These are some of the features that we want to implement or have thought about implementing. Some of these features are far into the future, while others we deem to be feasible to do within the course timeframe.

- ~~**Leaderboard**: A leaderboard with a points system, where users can get bonus points for certain hikes and regular points for hikes. Normal hikes should give points based on distance and elevation.~~
  **Leaderboard**: Implemented.
  - **Anonymity**: Allow users to display their score but be anonymous to the rest of the participants.
- **Interactive map**: The map should be interactive in a way that lets you zoom around the map to find different mountaintops to hike to.
  - **Geofencing**: Geofencing certain mountaintops to give bonus points.
  - **Search**: Being able to search for specific hikes.
  - **Route calculation**: Being able to look up routes and calculate an aproximation of the hike distance as well as time to complete.
- **Adding pictures of hike**: Allow users to post pictures of their hike that will expire over time.
- **This year in hiking**: Create a spotify style this year in hiking where we display some information about your hiking habits over the last year.
- **Some simple visualizations**: We want to display some information of the hike you just performed, maybe with some highscores etc. As well as displaying different graphs containing information about how far you hiked, elevation, speed etc.

##### Features status

- iOS app ✅
- android app ✅
- Zoom and panning on map ✅
- Geofencing ✅
- Leaderboard ✅
- Distance calculation ✅
- Simple visualizations ✅
- Search ⛔
- Route calculation ⛔
- Adding pictures of hike ⛔
- Year overview ⛔

## Design

First we designed our app with figma sketches, this early design is not representative for what the app looks like at the moment, but it's nice to look back at it for future refrence.

![figma](https://cdn.sanity.io/images/j26i5482/production/1473d9d17b35c5a515ba0b682228d998d05cdd85-1248x876.png?w=450)

After meetings with our supervisor Eric, we came to the conclusion that we want the map to be the main view of our application. This means that when you open the app now you will be greeted with a login screen if you are not signed in, and if you are signed in you get straight into the map view, allowing you to start the hike as fast as possible without much hassle.

We have also opted for the simple solution of hikes, you just start the tracking and points get calculated after finishing a hike. There are no routes being drawn as of now (this is a plan for the future, but not relevant as of now), this is because we are not aiming to be a "find places to hike app" but rather a "get points for hiking" app. This might change sometime in the future, but as of now there is no point to change it.

We looked further into creating colors for our app and have used the Echo color palette as the app is aimed towards UiB and the hiking challenge that Echo organizes.
Therefore our app consists of these colors:


![image](https://cdn.sanity.io/images/j26i5482/production/1e1d9b946fefe0506fde153645d13b39fb0dbb0b-119x120.png?w=30)
EchoYellow: `#F9C002`

![image](https://cdn.sanity.io/images/j26i5482/production/9842b7b532e74fc2cc47a721c594c570c91d3e0b-119x119.png?w=30)
EchoBlue: `#238194`

![image](https://cdn.sanity.io/images/j26i5482/production/a1970e2ce71a9ecd02ec3c62f3a6a2222735e52a-119x119.png?w=30)
EchoLightBlue: `#55AEC2`


### Logo

Getting a logo right is always a hard task. Here are some of the logos we explored while trying to find something we were satisfied with. In the image below you can see some of the process involved when it came to figure out the basic shapes and colors to convey the message we wanted to. As well as making it as modern looking as possible.

![image](https://cdn.sanity.io/images/j26i5482/production/692571e590fa0dbc23b66e07f4daaf9b8fe44d25-2481x3508.png?w=450)

Further here are some examples on how it looks in icon form. The further down you go the closer you get to the final logo.

![image](https://cdn.sanity.io/images/j26i5482/production/55324da800cb496c2e81b56ff42b5a4c828b4e28-3000x1274.png?w=450)

The image below is how the icon could have looked in dark mode, but it doesn't have enough contrast to be a viable option as of now.

![image](https://cdn.sanity.io/images/j26i5482/production/7526f6ea5c0c116da423046465a89547253b41d5-3000x1274.png?w=450)

### Current design

![image](https://cdn.sanity.io/images/j26i5482/production/2d3d2c05c2e226c04e5ebb80fd5205f09dc0d18b-6500x4500.png?w=450)

With the current implementation our app looks like this:

![image](https://cdn.sanity.io/images/j26i5482/production/22e44c82f03ba0ed2ba78c2d3c3fb0c422e50169-1200x900.png?w=450)

We switched from dark mode to light mode since viewing dark maps and UI elements when hiking out in the sun is suboptimal. Darkmode might be nice on the eyes during night time, but in daylight it makes the app unusable, at least on displays with low brightness or contrast ratio. It is not a problem for higher end phones, but not everyone can afford such devices and accessibility is something we have to think about when developing an app.

### Data gathering and user information

We don't want this app to gather all user information in the world. Currently we gather some data from the user such as the name and email. Only the username defined in your google account will be saved for use on the leaderboard. You can read more about the plans for the leaderboard above in the features section.

Email is not stored in our firebase, same goes for all other information that we do not generate ourselves for the user.

A users data is saved like this:

```
UID "PasdgPWE23MFnmaSDOgpo2j6gNA51SD"
admin true
displaytruename true
hikes array[hikes/OUTtQK3yPWLf1bW72Wiw]
points 15.5
randomname Synlig Joggesko
registered true
username "Ola Nordmann"
```

And this is all the data we save in the database. We currently do not track current total distance, but it is something we are looking into doing as it might be fun to look back at after the challenge is over for the semester.

Also notice how the hikes are stored, they are only stored one way, so if you delete your user we can keep the hike data (maybe add a checkbox to delete this data as well) for visualizations without infringing on GDPR issues.

None of the data we gather is shared to any third parties. But due to the login format we can not guarantee or say what google tracks in this app. They do not get any information from us, but we have no way of telling if google has access any of the data due to the google sign in.

A simple app to track the progress of the hiking challenge at UiB

Writing on software, design, photography and fun stuff that I want to write about.