Jeg vet ikke hvordan din arbeidshverdag er, men her i kode24 har skjermbilder nesten blitt en slags egen kommunikasjonsform, litt som emojier.
I løpet av en arbeidsdag sender jeg fort et par skjermbilder av bugs til Slack-kanalen #utv-bugs, knipser noen bilder av rare ting venner skriver på Facebook og sender til de u-rare vennene mine, og tar skjermdumper av designendringer som jeg sender til kode24-gjengen.
Men de blir sjelden særlig pene. Det er nemlig en egen kunst å ta fine skjermbilder, gjerne forbeholdt Photoshop-ekspertene.
Det synes ikke 32 år gamle Mikael Åsbjørnsson-Stensland noe særlig om.
Til daglig jobber han som seniorkonsulent i Webstep, men på kvelden snekrer han sammen Screenstab - en webapplikasjon som lar hvermannsen lage kule skjermbilder.
Klossete resultater
- Jeg var irritert over hvor uelegant det føltes å bruke skjermdumper i jobb-kommunikasjon. Jeg jobber til daglig med webløsninger, og trenger for eksempel å dele oppdateringer på Workplace, forteller Stensland til kode24.
Workplace, som er Facebooks samarbeidsverktøy for bedrifter, vil nemlig ha et bilde med hver oppdatering - som fort blir et skjermbilde. Problemet er bare at når man tar et skjermbilde av en applikasjonen omringet av andre applikasjoner, blir det fort litt, tja, kjipt.
Og når det kommer mange av dem etter hverandre, blir det fort til at man skroller forbi.
- Jeg tror mange, som meg, noen ganger trenger å ha med et skjermbilde i innlegget, presentasjonen eller nettstedet sitt, men synes det er vanskelig å integrere dette, og opplever at resultatet blir klossete. For eksempel at man får bilde-inni-bilde, ikke klarer å skille hvor omgivelsene slutter og hvor skjermbildet begynner, ikke oppfatter skjermbildet som et faktisk bilde og så videre, forklarer Stensland.
Trodde idéen var tatt
Løsningen ble Screenstab, et verktøy i nettleseren som lar deg laste opp et bilde, for eksempel et skjermbilde, og rotere det i 3D. Omtrent som om du holder et kamera og tar et skråbilde av skjermen din.
- Det er i utgangspunktet en "beautifier" for skjermbilder, og skal emulere effekten en får av å ta et profesjonelt og estetisk tilfredsstillende fotografi av skjermen, forklarer Stensland.
«- Jeg hadde egentlig belaget meg på at noen andre kom til å få samme idé.»
Han forteller at han kom på idéen allerede i 2018, men ikke hadde tid til å realisere den. Når han først fikk tid, var han skråsikker på at idéen allerede var tatt, men så begynte han å lete, uten å finne noen verdens ting.
- Jeg hadde egentlig belaget meg på at noen andre kom til å få samme idé og komme meg i forkjøpet. Da dette ikke skjedde, gikk jeg så smått i gang i fjor sommer, og har puslet med det sporadisk på kveldstid siden da.
Slik ble webapplikasjonen Screenstab født, som Stensland forklarer er en vri på ordet "screenshot".
- Skudd har blitt til stikk - fordi skjermbilder burde stikke seg ut. Jeg liker ordspill, og har lurt inn flere referanser til sverd og stikking i teksten på hjemmesiden, humrer han.
Se hvordan Max koda 3D-grafikk for Karpe
Vanskelig å kode 3D
Screenstab er en ren frontend-applikasjon, bygget med noe så uvanlig som vanilla ES6 JavaScript.
- Siden appen er så liten bruker jeg ikke noe rammeverk, men benytter i stedet et lite bibliotek som jeg selv har laget som abstraksjonslag for ting som dataflyt og event-håndtering, forteller Stensland.
Han bruker riktignok to biblioteker til; Three.js til 3D-håndtering av bildene, og Jimp til selve bildebehandlingen. De tunge asynkrone operasjonene er delegert til en webworker-tråd.
- Det vanskeligste å kode var nok selve 3D-visningen av skjermdumpen, forteller Stensland.
- Det omfattet ting som adaptiv lyssetting og simulering av dybdeskarphet, tredimensjonal brukerinteraksjon, ytelse og optimalisering, samt dypdykk i shader-kode.
Stensland forteller at han i tillegg har jobbet hardt for å redusere mengden valg brukere trenger å ta til et minimum, og at han er spesielt fornøyd med den minimalistiske tilnærmingen.
«Med å ha en betalt variant antyder jeg at løsningen er ment å skape verdi eller eliminere en kostnad.»
Viktig med betaling
I tillegg har appen en liten WordPress-installasjonen i bakkant for håndtering av betaling og autentisering.
For ja, det finnes en pro-versjon som gir deg bilder uten vannmerker, og mulighet til å laste opp større skjermdumper.
Stensland mener det er viktig å ta betalt for hobbyprosjektet.
- Med å ha en betalt variant antyder jeg at løsningen er ment å skape verdi eller eliminere en kostnad. Screenstab tar det som ellers ville vært et manuelt stykke designarbeid og reduserer det til et enkelt klikk. Samtidig gir den formodentlig en verdi i form av mer effektiv visuell kommunikasjon, forklarer han.
Sånn skal Lars lage 12 startups på 12 måneder
Videre til nytt format
Selv om et hobbyprosjekt kan bli ganske altoppslukende ved siden av fast arbeid, har ikke Stensland merket noe til dette. Tvert i mot.
- Arbeidsgiveren min har uttrykt seg positivt til prosjektene jeg pusler med ved siden av jobb, og jeg hadde gleden av å bli invitert til å holde et lite foredrag om mitt forrige produkt, Beadifier, som lager perlemønster ut av bilder, under en fagkveld som ble arrangert av Webstep Stavanger i fjor, sier han til kode24.
Men nå er det Screenstab som gjelder, og Stensland forteller at han skal videreutvikle det, forhåpentligvis med god støtte fra brukere:
- En av de store funksjonene jeg planlegger, er støtte for video.
Slik lagde NRK valg-grafikken
"Slik stemte vi" oppsummerte valget med prikker i pixi.js. - Men vi fikk det ikke til å fungere i Internet Explorer 11.