tillbaka till startsidan

4. draw.wtf

Lyssna på Spotify lyssna! Lyssna på iTunes

Anton har släppt sitt hobbyprojekt draw.wtf vilket leder in på diskussioner kring programmering som kreativt utlopp, att släppa saker innan det är “perfekt” och hur det är att jobba med TypeScript på både frontend och backend. Dessutom en hel del om Therése ångestdrivna utveckling och liten historia om en minnesläcka.

Om du gillar podden blir vi väldigt glada för en liten recension i iTunes eller en prenumeration på Spotify. Följ oss och säg hej på @asdfpodden på Instagram eller Twitter (Anton, Therése) <3

Länkar

Transkribering
Transkriberingen är gjord av nån "AI-grej". Du kan förbättra den genom att klicka precis här :)
00:00:00
Du får börja idag.
00:00:02
Ja.
00:00:04
Hej och välkomna till ASDF, vår podd idag.
00:00:09
Jag vet inte hur man gör. Är du bra på att rita, Anton?
00:00:14
Jag är väl leds på att rita.
00:00:16
Men jag gissar på att du frågar för att jag typ släppte mitt ritaspel igår.
00:00:21
Ah, du gjorde ändå din koppling.
00:00:24
Ja, faktiskt.
00:00:26
Så nej, jag är faktiskt helt väl leds på att rita.
00:00:28
Jag har däremot ett TED-talk, tror jag att det är,
00:00:31
sparat som en flik där det är typ så här
00:00:34
"Alla kan rita".
00:00:36
För att jag har någon typ av ambition
00:00:38
att jag ska lära mig rita någon gång i livet.
00:00:40
Så den där fliken som levt där gick kanske två månader.
00:00:43
Och tydligen ska den vara skitbra.
00:00:45
Alla så här, folk som har tittat på den har sagt liksom att
00:00:48
"Ja, nu kan jag ändå rita lite grann".
00:00:50
Och det blir ändå rätt snyggt.
00:00:52
Men jag har skjutit upp det.
00:00:54
Så att, ja nej jag kan inte rita så bra.
00:00:56
Jag tänker att du är duktig på att rita. Du har ju en bra ritar-aura.
00:01:00
Jag är värdelös på att rita. Jag är så fruktansvärt dålig på att rita.
00:01:04
Jag har inga vinklar, jag kan inte rita av saker, ingen perception överhuvudtaget.
00:01:11
Jag skiljer allt på avrytningsfel.
00:01:14
Det ska jag också börja göra, helt enkelt.
00:01:18
Precis, jag kan inte göra raka sträck, ingenting.
00:01:21
Men det blir en sån... man kan ju träna på det.
00:01:25
Jag vet att det är många som är väldigt duktiga på att rita som kan bli lite för närvarande av att man säger "men du kan ju rita, du är så bra på det".
00:01:32
Det ligger ju ofta ganska många timmars träning bakom att kunna rita.
00:01:37
Ja, alltså svaret är verkligen, det är lite som med mycket tänker jag.
00:01:41
Du kan ju sjunga, visst att man kan vara bättre med sångröst men det är också väldigt mycket träning.
00:01:46
Ja, du kan ju bättre förutsättningar för någonting, absolut.
00:01:50
men att bara säga att du bara kunde det en dag.
00:01:53
Det är ju lite som spottar dem i ansiktet.
00:01:56
Ja, lite så.
00:01:57
Det tar vi också i luft.
00:01:59
Du bara kan ju programmera.
00:02:01
Ja.
00:02:02
Om folk visste hur många timmar.
00:02:04
Ångest.
00:02:05
Det ligger bakom mina programmeringskunskaper.
00:02:08
Vad jävlar.
00:02:09
Varje for loop.
00:02:11
Varje for loop.
00:02:12
Hela logikprocessen innan jag fattar den.
00:02:15
Det var mycket hat mot en labba
00:02:18
som alltid var klädd i brunt på universitetet.
00:02:21
Alltså det var...
00:02:22
Undrar om han lyssnar på podden nu,
00:02:24
känner han till sig själv som personen som alltid klädde i brunt då?
00:02:27
Jag vet inte.
00:02:29
Tänk om någon aldrig tänker på att de alltid har samma färg på sig.
00:02:32
Nej.
00:02:34
Alltså jag skulle ju kunna vara en sån person, tänker jag.
00:02:36
Men jag kör ju mycket svart.
00:02:39
Precis, men jag kör ju också mycket svart.
00:02:40
Men svart är mer så här, det händer.
00:02:42
Men brun, det är ändå liksom, det är inte en färg som bara finns där alltid
00:02:47
Nej, det känns mer som att man sökt upp den färgen.
00:02:51
Precis. Det är inte så att du hittar bruna Manchesterbyxor på alla ställen.
00:02:55
Kanske på Söder, jag vet inte.
00:02:58
Nej, inte omöjligt.
00:03:00
Men jag håller med. Det ligger så sjukt mycket tanke,
00:03:04
eller tanke, sjukt mycket ångest, som du uttryckte det,
00:03:08
bakom allt man kan egentligen.
00:03:11
Och sen ändå landar man i det, när vi pratade om våra mentala modeller, eller vi löste problemen för något avsnitt sen.
00:03:20
Och du drar dig i snören. Det är där man landar i slut. År av ångest, sen drar man i snören.
00:03:28
Ja, men det är också kul. För jag vet att vi har ju pratat tidigare om vad som driver oss att koda.
00:03:36
För mig är det fortfarande mycket ångest och rädslan att misslyckas och att inte klara av det.
00:03:42
Jag finner kanske inte riktigt glädjen i det på samma sätt.
00:03:46
För din motivation är ju snarare att du tycker det är så jävla kul.
00:03:53
Ja, så är det definitivt. Jag tycker att det är väldigt kreativt.
00:03:57
Det är ju det kreativa utloppet jag har, skulle jag säga.
00:04:02
Jag tror att jag är en ganska kreativ person, trots att jag inte kan rita.
00:04:05
Det har liksom blivit att programmeringen är min kreativa utlopp.
00:04:11
Det är därför jag bygger HV-projekt och tycker att det är kul att göra det på fritiden fast jag är goda på jobbet.
00:04:17
På jobbet tycker jag inte alls att det är samma kreativa utlopp som när man gör det privat.
00:04:21
Jag pratade med min terapeuta om det.
00:04:25
Om man inte får prata om sin terapeuti-podd så måste du klippa bort det.
00:04:30
Jag pratade med min terapeuta om det och han sa "Jag tror egentligen att du är en väldigt kreativ människa men du är för trött så det blir inget."
00:04:36
Det är ju intressant ändå.
00:04:41
Ja.
00:04:41
Kreativitet är nog ändå, jag tror att programmering är nog ganska kreativt när man bygger saker.
00:04:48
Kanske inte liksom hur skriver jag den här for loopen bäst.
00:04:52
Alltså på den makronivån men på en liten högre nivå eller på en liten större nivå.
00:04:56
Då tror jag att det är väldigt mycket mer kreativt än vad många tänker.
00:05:01
Ja, men det tror jag också. Absolut.
00:05:03
Speciellt om man kommer på någonting och vill bygga någonting som bara är roligt.
00:05:07
För att se om någonting funkar. Det behöver inte ens funka bra.
00:05:10
Det är bara att få ut någonting och se vad som händer.
00:05:13
Mitt problem ofta i det där när jag försöker göra det är att jag fastnar i att det måste vara perfekt.
00:05:18
Ja, men exakt.
00:05:19
Jag måste använda den här tekniken korrekt.
00:05:21
Och jag måste göra det. Återigen att man fastnar i den här att allting måste vara så jävla smart.
00:05:26
För att jag vill inte skämmas för det eller få skit för att jag är en dålig utvecklare.
00:05:31
Så då fastnar jag i det och då tar jag ändå själv och suger ur glädjen ur att göra det.
00:05:37
Så kreativiteten dör tror jag.
00:05:39
Ja, där har jag nog också varit ganska mycket.
00:05:42
Men jag tror att jag blir mycket bättre på att släppa det.
00:05:45
Och då även släppa saker.
00:05:47
Och det vi pratar om senast nu är mitt drita spel som jag släppte i går, typ, föregår eller något.
00:05:54
Vad bra du har hört koll på dagarna nu.
00:05:58
Nej, det är totalt kaos i dess tider. Alltså jag vet inte ens om det är dag eller natt för nu i tiden.
00:06:02
Men jag tänker, vi kan ju prata lite grann om det här kanske. Jag tänker att det är ganska ointressant.
00:06:09
Jag tänker att det är ganska intressant.
00:06:10
Ja, och innan det här så ska jag bara se till att min dator inte exploderar av att det är massa saker som kör i bakgrunden.
00:06:16
- Jo, men vi kan väl snacka lite grann då, återfack.
00:06:20
- Mm. - Som sagt, kanske lite ointressant.
00:06:23
Men vi märker vart vi landar.
00:06:25
Och jag tror jag förklarade i förra avsnitt vad det är,
00:06:28
men i korthet är det väl typ "Rita, gissa".
00:06:30
Alltså det spelet, fast alla ritar,
00:06:33
och den som gissar är liksom en maskininlärningsmodell istället.
00:06:37
Som då ger en poäng baserad på hur väl den känner igen det man ska rita.
00:06:42
Så man får typ en "Rita en delfin", och sen ritar alla,
00:06:45
och samma 20 sekunder på sig tror jag, det är inställt på.
00:06:47
Och sen när det är klart så skickar jag till maskinen i lägetmodellen
00:06:51
som spottar ut sig en procentsats
00:06:53
och då får man en poäng som är baserad på den procentsatsen.
00:06:57
Och här pratar du ju också då om frustrationen hos personer som faktiskt kan rita bra
00:07:02
men som alltid får dåliga poäng.
00:07:04
Ja, vi kan börja med liksom maskinen i lägetmodellen.
00:07:07
Alltså den är ju, jag började bygga det här för, undrar om det är exakt ett år sedan idag.
00:07:14
exakt ett år sedan idag. Jag kollade första committen i repot häromdagen. Jag tror att det var exakt ett år sedan idag som jag skrev det som första
00:07:23
committen. Och då byggde jag det väldigt ihophackat så att säga. Jag hade inte alls tänkt att vara långsiktig eller någonting utan bara testade lite olika saker.
00:07:31
Och jag kan ingenting om maskininlärning överhuvudtaget. Så jag testade först och så här, okej men hur svårt är det? Det kan inte vara så svårt.
00:07:44
Jag tänker att alla som håller på med maskinlärning, de kan ju bara det, så att säga.
00:07:49
Jag googlade lite grann och hittade lite guider på hur man gör.
00:07:54
Testade och görade det. Det blev helt värdelöst.
00:07:57
Riktigt, riktigt dåligt. Det fick liksom inga resultat överhuvudtaget i stort sett.
00:08:02
Det svårt kan det vara.
00:08:03
Exakt.
00:08:05
Datasättet jag hittade var också på, det är ett open source-datasätt som någon forskningsrapport var gjord på.
00:08:13
där de gjorde att man ritade någonting och sen fick man se en bild på det man ritade.
00:08:20
Alltså, du fick en riktig bild på det du hade ritat.
00:08:24
Och det de hade då var att de hade ritat av en massa bilder och sen så spottade de ur den bild som var mest lik den du ritade.
00:08:30
Men det datasättet fanns och hade ganska mycket bra bilder att träna på.
00:08:38
Så det var liksom delfiner och elefanter och bilar och vad fan det mer kan vara.
00:08:43
Men väldigt mycket enkla streckbilder.
00:08:46
Och sen slutade med att jag använde Azure's Custom Vision,
00:08:52
som är en tjänst de har för just att träna maskininlärning mot bilder, typ.
00:08:58
Och då kan det vara att man liksom tränar att man ska känna igen någonting eller liknande.
00:09:02
Och det är väl det jag gör också, fast jag tänger lite på det, så att säga.
00:09:07
Okej, men för jag då som har ännu sämre koll på maskininneheter,
00:09:12
men du har ditt projekt och där du integrerar den här Azure Vision.
00:09:18
Mm.
00:09:18
Sa vi det?
00:09:20
Azure Custom Vision.
00:09:21
Ja, alltså jag och namn är liksom det kört.
00:09:24
Och sen så har du den här bilddatabasen som du tog med,
00:09:28
la in den i Azure Custom Vision och låta den träna
00:09:31
och det kommer spotta ut sig i ditt projekt eller funkar liksom?
00:09:34
Ja, alltså i den första varianten, den som jag byggde för typ i år sedan då.
00:09:36
Då funkar det så att jag laddar ner alla de här bilderna.
00:09:40
Så jag har liksom flera gigabyte med ritade bilder på min dator.
00:09:43
Som jag fortfarande inte har tagit bort, upptäckt det häromdagen.
00:09:45
Sen gjorde jag så att jag skrev ett litet Node-skript
00:09:49
som laddar upp de här bilderna och taggade dem mot då Azure's Custom Vision API.
00:09:55
Så att den laddar upp bilderna och taggar dem med vad det är för något.
00:09:58
För jag hade liksom namnet, eller de kommer ju taggade från det datasättet jag laddade ner.
00:10:02
Men sen gjorde jag om det till API-anrop.
00:10:04
Så den laddar upp allting och då får jag upp ett GUI där man helt enkelt ser alla bilder, vad de är taggade som och sen kan man då klicka på typ "train".
00:10:14
Och sen finns det lite inställningar, typ om den ska vara kompakt för att man ska kunna exportera den eller inte, eller om det är flera taggar per bild eller en tagg per bild.
00:10:21
Så det är väldigt användarvänligt, väldigt straightforward.
00:10:25
Och sen är det typ som du säger att den spottar ut sig i en modell.
00:10:31
Och sen så spottar den då ut sig i ett API som du kan testa det här mot.
00:10:34
Så att första varianten gick direkt mot det API-et.
00:10:37
Så att när man spelade så gick jag mot API-et, jag laddade upp bilden som man hade ritat.
00:10:41
Och sen liksom svarade API-et med en procentsats.
00:10:47
Så det är ju extremt enkelt att använda.
00:10:49
API-et är inte supersnabbt, vilket jag märkte när jag gjorde det här, för att det tog ganska lång tid när jag skulle räkna ut alla bilder.
00:10:57
Och sen var det inte så stabilt byggt heller, vilket inte hjälpte direkt.
00:11:00
Och sen finns det lite rate limit på den och grejer, vilket gjorde att var man 10-pash så tog det typ 20 sekunder att räkna ut alla grejer, vilket var lite segt.
00:11:08
Men det funkar ändå. Och den här varianten körde jag ändå. Den var skriven i ett väldigt, väldigt basic Node-skript.
00:11:17
och sen React och sånt.
00:11:20
Men det var typ en engångsjobb?
00:11:25
Hur menar du?
00:11:27
Jag menar du tog de här bilderna och laddade upp dem och fick en modell och sedan var modellen klar.
00:11:31
Det som ändras är om du vill ha ett annat datasätt av bilder eller utöka det.
00:11:35
Exakt, exakt. Så det engångsjobbet var att jag körde skripten och laddade upp allting och sedan tränade modellen.
00:11:40
Hur lång tid tog det att träna?
00:11:42
Nej, det tar inte så lång tid att träna. Alltså nu laddar jag inte upp jättemycket bilder.
00:11:46
Säg att jag laddade upp kanske 3000 bilder, fördelade på 50 olika motiv.
00:11:53
Så det är också lite därför modellen inte är så bra.
00:11:57
Vilket gör det lite svårt själv.
00:12:01
För ju fler bilder man har desto mer träffsäker blir modellen såklart.
00:12:06
Korv eller ben?
00:12:07
Korv eller ben? Ah, nu är jag med.
00:12:09
Ja, med den här grejen när man hade två varmkorvar eller två ben på stranden typ.
00:12:16
Exakt.
00:12:17
Och så skulle maskininlärningsmodeller veta om det var korv eller ben.
00:12:19
Ja, det finns ju väldigt mycket roliga sådana här.
00:12:21
Silicon Valley-serien, alltså tv-serien, de släppte ju någonting som hette typ "Hot Dog or Not".
00:12:26
Mm.
00:12:27
Som bedömde om någonting var en hot dog eller inte.
00:12:29
Ja, precis.
00:12:29
Vilket är väldigt, väldigt kul.
00:12:31
Men precis som du säger så liksom modellen, den levde där liksom.
00:12:36
Sen jag tror att jag valde just 3000 tror jag var för att gratisgränsen går där.
00:12:42
Och jag kände, jag tänker inte betala för det här.
00:12:45
Så att den landade liksom där.
00:12:48
Och sen så, om man gick upp en nivå då blev det liksom att API-ropen började kosta och grejer och sånt där.
00:12:52
Och det orkar man liksom inte riktigt med.
00:12:54
Och den här versionen av spelet var också så att det fanns bara ett rum, eller hur man ska förklara.
00:13:01
Alltså man kunde liksom bara spela en grupp samtidigt.
00:13:03
Man gick in på en URL för att se vad alla ritade och en annan URL för att rita.
00:13:07
Och sen låg den och snurrade när det här spelet var igång hela tiden i bakgrunden.
00:13:11
Så man behövde aldrig göra något själv utan den låg och snurrade.
00:13:13
Men som sagt, den var inte så stabil.
00:13:15
Så då och då var jag tvungen att gå in på Heroku, det är hostar-servern.
00:13:20
Eller backenden.
00:13:22
Och starta om den, för att den hade hängt sig på några vänster.
00:13:25
Klienten ligger på Netlify också.
00:13:29
Vilket är väldigt, väldigt trevligt.
00:13:31
typ favorittjänst jag känner till för tillfället.
00:13:34
Fungerar så jävla bra.
00:13:35
- Ja, jag har faktiskt inte använt Netlify, tror jag.
00:13:40
- Nej, det är alltså för att hosta statiska sidor,
00:13:43
plus att de har en massa grejer som typ så här,
00:13:46
serverlösta funktioner och typ,
00:13:49
om du vill ha ett formulär som skickar data,
00:13:52
då lägger du bara på ett attribut på det formuläret i HTMLn
00:13:55
och så löser Netlify det.
00:13:56
- Ja.
00:13:57
- Typ.
00:13:58
- Släppte inte de något nyligen om att de
00:14:01
Gjorde du massa bra saker gratis eller lade till saker?
00:14:07
Vet inte, de har ju väldigt generösa gratisalternativ.
00:14:13
Så jag betalar ju ingenting, jag kan köra tio sajter på Netlify, betalar ingenting.
00:14:17
Jag gillar också det där avsnittet börjar bli lite så här, hur kan man komma undan gratis på alla tjänsterna?
00:14:23
För betala vill vi inte göra.
00:14:25
Jag kan också säga att jag körde gratisvarianten på Heroku.
00:14:28
Vilket då är att den går ner i så här viloläge, typ, efter en halvtimme i sin aktivitet.
00:14:34
Så att när man skulle spela den här så var man tvungen att vänta en minut innan servern startade upp.
00:14:38
Vilket också var lite drygt.
00:14:40
Men sen då, för...
00:14:44
Kan det vara en tre månad sen eller nåt, typ.
00:14:47
Så tittade jag på FunFunFunctions stream på Twitch.
00:14:52
Han har väl en stor YouTube-kanal, men han har också bostad över att streama live på Twitch.
00:14:57
Och då frågade han folk om vilka hobbyprojekt man hade. Jag bara "Äh, vafan, jag kan ju länka mitt!"
00:15:02
Oerhört fula rita-gissa-spel.
00:15:05
Och sen spelade han det på stream, vilket var
00:15:09
rätt kul. Bra för bekräftelsebehovet, så att man fick se beskärda delar. Man bara "Oh, nice! Folk tycker det är kul!"
00:15:15
Vilket då gjorde att jag tänkte att "Fan, jag kanske ska testa att skriva om det, för jag tycker att det är ett roligt projekt."
00:15:22
Alltså det är liksom en rolig grej att bygga.
00:15:24
Så då beslöt jag mig för att, okej, jag bygger om hela skiten från grunden.
00:15:27
- Såklart. - För det tycker jag är vettigt att göra.
00:15:29
Jag tänkte så här, maskinilärningen kan jag ju låta vara. Den spar väl liksom.
00:15:33
Men back-end och front-end skulle bygga om.
00:15:36
Så att, sagt och gjort så byggde jag om allting så att back-enden är i nestjs nu.
00:15:43
Inte att blanda ihop med nextjs.
00:15:46
- Det här har vi varit inne på förut. - Det här har vi varit inne på förut.
00:15:49
Men det är alltså Nest som är ett...
00:15:52
-Ett näste. -Ett näste, ja. Och inte nästa.
00:15:56
-Solklart. -Oerhört solklart.
00:16:00
Vi länkar såklart i beskrivningen också, om man vill gå in och titta.
00:16:05
Och det är liksom ett Node-ramverk för att skriva typ "The Wrapper Express".
00:16:10
Eller man kan wrappa fler grejer, men by default så "Wrapper Express".
00:16:13
Och kör med TypeScript. Och jag tycker det är sjukt nice för att skriva websocketgrejer
00:16:19
och API-prylar och så här.
00:16:22
Det ger väldigt mycket boilerplate och en struktur som är väldigt enkel att utveckla saker i.
00:16:26
Så jag tänkte att okej, jag skriver backen i det.
00:16:29
Och sen så tänker jag att om jag skriver fronten i React,
00:16:32
tänker att det kan ju inte bara vara React, så tänker jag att vi testar TypeScript också.
00:16:36
Ja, såklart.
00:16:38
Och även Overmind.
00:16:41
Oj, titta! Vilket uttal!
00:16:45
Oerhört bra uttal. Förstår man inte den referensen kan man lyssna på.
00:16:48
Var det typ förra avsnittet? Nej, förra förra avsnittet. Avsnitt två tror jag.
00:16:51
Ja.
00:16:52
Det kommer nog följa med oss ett tag.
00:16:54
Det kommer nog följa med oss ett tag.
00:16:56
Det kan jag få känna.
00:16:57
Och Overmind, nej jag ska fan säga, Overmind.
00:17:00
Overmind är då för statehantering.
00:17:03
Och är man nyfiken på hur den funkar så har vi ett helt avsnitt där jag typ pratar om det, nästan.
00:17:08
Men jag tänkte att i alla fall React i fronten.
00:17:11
Jag tänkte att det är ganska nice att kunna dela TypeScript interfaces och enums och allt vad det heter, typer heter det kanske, mellan backend och frontend.
00:17:24
Och det fungerade faktiskt jäkligt bra. Så alla typer som jag hade i backenden importerade jag till frontenden genom att sätta upp en project reference som det heter i TypeScript.
00:17:37
som är ganska nytt tydligen.
00:17:39
Så att den kan importera det och det blir inget strul.
00:17:42
Förutom då som jag märkte sen när jag deployar det här.
00:17:45
Då stödjer inte Create React App, Project References,
00:17:50
när man deployar, endast av någon anledning.
00:17:54
Fråga mig inte varför, det finns GitHub issues som jag har varit och lagt mig i.
00:17:59
Eller snarare, snarare liksom typ, ventilerat min frustration i.
00:18:03
Lagt lite ved på.
00:18:05
Jag vet inte exakt varför det inte funkar, men det är någonting. Det funkar lokalt, men det funkar inte när det är deployad.
00:18:12
Så har du löst det då? Har du bara dödat det för deploy?
00:18:16
Jag kopierade över alla filer, helt enkelt. Det var lösningen.
00:18:22
Just nu så ligger allt dubbliserat, vilket är mycket, mycket sämre.
00:18:28
För då kan jag göra något i backen, så glömmer jag ändra ifrån den, så bla bla bla.
00:18:31
Såklart.
00:18:32
Men i övrigt så tycker jag fan, efter det här projektet så är jag ändå lite typeskrift frälst för fronten.
00:18:40
Du är ju inte övertygad. Jag tror att vi kanske touchade på det här förut också, men du är ju en typeskrift hatare.
00:18:48
Jag skulle inte kalla dig en hatare. Jag skulle fortfarande säga att jag förstår absolut att det har sin plats och varför det är bra.
00:18:55
Däremot ger det mig mest glädje att koda det. Kanske inte.
00:19:01
Du skulle aldrig lägga in det i ett hobbyprojekt?
00:19:04
Jo, för jag har ju hobbyprojekt för att av ångest lära mig saker, så det skulle jag absolut göra.
00:19:11
Men man hamnar ju i många konstiga situationer, det här funkar inte för det här, det här funkar inte för det här,
00:19:20
och här måste du sätta typ en unknown.
00:19:22
Och om man skulle börja rota i det här så skulle man säkert förstå varför.
00:19:27
förstå varför. Mitt största problem är att jag inte har orkat rota i det, för då kommer man till ett väldigt specifikt problem
00:19:33
och då säger jag så här "ha, shit, okej" då googlar jag på det och så kommer det upp liksom tio bloggartiklar på varför det funkar så
00:19:40
men jag vet ju fortfarande inte riktigt hur typescript fungerar så de här bloggposterna hjälper mig ju inte hela vägen.
00:19:46
Nej, jag förstår, jag förstår.
00:19:48
Så att det handlar väl snarare om att jag borde ta tag i att faktiskt lära mig det men det har jag inte orkat göra än.
00:19:53
Men jag ser ju poängen med typning.
00:19:57
Jag tror att det som jag inte gillar med typningen är att jag
00:20:01
började med JavaScript, jag kom ju från C++ Java och började med JavaScript och bara
00:20:08
"Det här är ju nice, allt är kaos, jag älskar kaos!"
00:20:12
Och då tror jag att TypeScript strukturerar upp saker igen och det är ju skitbra men det är inte riktigt lika skönt.
00:20:19
Vi återkommer alltid till att JavaScript matchar kanske din mentala modell lite bättre.
00:20:22
Vad sa du nu?
00:20:24
JavaScript matchar kanske din mentala modell lite bättre.
00:20:26
Precis så är det ju.
00:20:28
Det här med att dra i trådar och se vad som kommer ut.
00:20:30
Exakt.
00:20:32
Helt plötsligt kommer ett jävla undefined och så allting går sönder.
00:20:34
Det är det som alla får ta, tänker jag.
00:20:38
Ja, men sen så att jag tycker faktiskt att Type-C funkar väldigt bra, till skillnad mot andra.
00:20:46
Men jag tycker ju om den här biten speciellt. Säg att du skapar någonting som jag gjorde nyligen
00:20:52
var att man skapar utifunktioner till exempel. Då har du en väldigt specifik utifunktion
00:20:58
som kräver en väldigt specifik typ in. Det är skitbra att i sådana fall definiera och säga
00:21:04
att jag vill ha in det här för då kommer det här hända. Men får inte jag det här interfacet eller typen
00:21:10
då kommer det gå sönder. Det är ett jättebra sätt att dokumentera saker på.
00:21:14
Så det ser absolut fördelar.
00:21:15
Ja, exakt. Tittar man på backen till exempel, för WebSocket-delen så kör jag Socket.io, vilket funkar väldigt bra.
00:21:23
Socket.io är egentligen bara en wrapper kring native WebSocket som gör väldigt mycket grejer enklare.
00:21:29
Men där skickar man ju meddelanden genom att köra en metod som heter emit till exempel.
00:21:33
Och den metoden har jag liksom "wrappat"
00:21:37
Jag har liksom "wrappat" den metoden
00:21:41
i en annan metod som jag har skrivit en signatur på som är att
00:21:44
Okej, jag måste skicka in
00:21:46
min typade
00:21:48
meddelande typ
00:21:49
Så att jag har liksom spesat att det här är de meddelande jag skickar
00:21:53
för att kunna liksom sen plocka upp dem på y-fronten
00:21:55
Så då kan jag liksom bara använda den metoden och så länge jag använder den då vet jag att jag alltid kommer ha med
00:22:00
den här typade
00:22:02
Vilken meddelande som skickas liksom.
00:22:04
Ja, du vet vad du får in och det är superpraktiskt. Jag ser det ju liksom, absolut.
00:22:11
Så jag tycker det funkar extremt bra. Men jag är ju också sån dig, ibland hamnar man där, man ska göra någonting lite konstigt och man bara "Vad fan är det som händer?"
00:22:18
Och så spottar typeskrifter ut någon felmedia som man inte fattar någonting av.
00:22:22
Ja, och det är så långt och man bara "Vart börjar det än?"
00:22:26
Det landade i att om jag säger att den här funktionen ska returnera det här, då är den helt plötsligt nöjd.
00:22:33
Den gick från femte error-meddelande till att jag får tillbaka en Annie.
00:22:39
Den bara "Okej".
00:22:41
Ja, men det är så det är lite.
00:22:43
Jag har ju påslagit nu att by default, jag tror att det heter strict mode om jag minns rätt,
00:22:48
som gör att den defaultar inte till Annie, utan den defaultar till error.
00:22:53
Vilket har varit ganska skönt, eftersom jag inte är så van med typescript.
00:22:57
Jag sätter inte "an" överallt.
00:23:01
Jag glömmer inte bort att typa för att den kommer klaga.
00:23:05
Så länge den inte kan "införa" på svenska.
00:23:09
Så länge den inte kan "införa" vilken typ det är, då måste den sätta en typ.
00:23:19
Härleda. Härleda, skitbra. Där kom det.
00:23:23
Oj, det satt lång tid.
00:23:25
Jag tycker ändå att det är ganska nice att göra saker ordentligt när jag sitter med TypeScript.
00:23:30
Jag gillar så här, den här parametern in vill jag ha den här typen, de här.
00:23:34
Så jag vill inte heller sätta any överallt, för då ser jag verkligen ingen poäng med att ha TypeScript.
00:23:38
För ska jag ha det, då måste du fylla en funktion.
00:23:41
Men sen så kommer man ibland till sådana här när,
00:23:43
okej, den här funktionen returnerar en array
00:23:47
med två saker i sig.
00:23:49
Det första är en typ av någonting
00:23:52
och det andra är en array av de typerna.
00:23:54
Och hur definierar jag vad den ger tillbaka då?
00:23:58
Det har jag ingen aning om.
00:24:00
Och om TypeScript inte klagar då,
00:24:02
då låtsas jag bara som att jag inte har märkt det
00:24:05
och går vidare med livet.
00:24:07
Ja, jag förstår. Jag tycker det är helt rätt.
00:24:10
Man ska inte, när man tänker att det här kan vara ett jättejobbigt problem, då går man vidare.
00:24:16
Men det funkar så länge.
00:24:18
Det funkar, ingen har sagt någonting. Så då behöver vi inte öppna den på andorras ask.
00:24:24
Exakt, exakt. Sen, jag hostar fortfarande på Heroku, jag hostar fortfarande på Netlify.
00:24:31
Nu har jag bumpat upp till Herokus betalvariant, så jag betalar den 7 dollar i månaden tror jag,
00:24:36
-Är det nåt? -Jävlar!
00:24:38
-Det splurgar ordentligt. -Karantäntiderna.
00:24:42
Exakt! Karantänhoppningen går ut över en tjänster i stället.
00:24:47
När jag släppte första versionen av det här, när jag började testa med kompisar-
00:24:55
-då märkte jag att minnesavändningen steg ganska snabbt.
00:25:03
Ganska snabbt upp i över 512 MB
00:25:06
Som var
00:25:07
gränsen på den här gratisvarianten eller på betalvarianten jag körde liksom
00:25:10
Och då började jag ju swappa grejer så här råkar det ju bra på det här, den dödar inte tjänsten eller den cappar det inte utan den går ner på swap istället
00:25:18
Så att den kan liksom fortsätta men det går mycket mycket långsammare
00:25:20
Swappar betyder att den skriver disk
00:25:23
Istället för
00:25:24
RAM-minnet
00:25:25
tror jag
00:25:26
Om jag inte är helt ute och cyklar
00:25:28
Nej, jag killisar
00:25:31
Men jag bara "Vad fan är det för levet?"
00:25:38
Och så tänkte jag, just det, jag har ju faktiskt ingen databas, utan jag har ju allting i en memory.
00:25:42
Så hela min state-hantering i backen var i stort sett att jag hade ett objekt som heter games.
00:25:50
Där jag så fort det kom in ett nytt spel, då lade jag till grejer i den.
00:25:54
Och så fort jag skulle rita linjer, då lade jag till dem i det och så vidare.
00:25:59
Ja, och det har du ju sagt att du trodde som sagt att det var minnesproblemet, men var det minnesläckarna då?
00:26:06
Nej, alltså jag skrev ju om det så att jag har en databas nu. Så nu kör jag liksom MongoDB för databasen.
00:26:15
Det är ganska vettigt att jag har en databas. Det är ganska vettigt att kunna gå in och titta och det är lite kul för jag vill kunna liksom att dra lite statistik och grejer.
00:26:24
Alltså typ visa såhär att de är samma gånger när du spelat eller samma gånger när ert snitt och lite sådana grejer.
00:26:29
Och det är lite enklare att ha det i databasen bara.
00:26:31
Men sen släppte jag det och när jag releasade i fredags, söndag eller vad då, då slutade,
00:26:41
också att jag fixade databasen, testade aldrig, av minnskullighet men jag var fixade.
00:26:45
Utan jag bara, ja, nu är det löst.
00:26:48
Testing in production.
00:26:51
Väldigt, väldigt mycket testing in production.
00:26:53
Så jag vet inte riktigt hur jag tänkte. Jag tänkte bara att det är uppenbart att det är det där.
00:26:58
Det var det inte.
00:26:59
Så när jag släppte det och skrev lite på Twitter och lite här och där
00:27:04
så var det faktiskt folk som gick in och skapade spel och spelade och den stack ju iväg i taket ganska snabbt.
00:27:12
Så jag har liksom gått in lite då och då och bara "restart".
00:27:16
"Restart lite då och då för att liksom bara sätta ner den igen"
00:27:19
Det gick liksom ändå, det tog ändå kanske två timmar eller något när folk spelade
00:27:23
För att den skulle gå ut i taket
00:27:24
Och jag bara "Okej men det är inte så poppis"
00:27:27
Så jag gick in och restart lite då och då
00:27:29
Och funderade såhär, vad fan är problemet?
00:27:32
Sen igår tänkte jag att okej, men nu tar jag tag i det
00:27:35
Nu måste jag lösa den här skiten
00:27:37
Så jag började googla hur man löser minnesläckor i Node, bla bla bla
00:27:41
Hittade ett npm-paket som heter Node/Memwatch tror jag
00:27:45
som var skitgammalt, typ sista Comitten från åtta år sedan.
00:27:51
Jävlar!
00:27:53
Ja, exakt. Men det var väldigt, väldigt mycket forkat.
00:27:57
Och det fanns en ny variant som Airbnb hade, som var liksom samma, fast den var den senaste Comitten för kanske en månad sedan.
00:28:04
Och jag bara "ah, score".
00:28:05
Så körde ner det, testade lite grann och så där. Man kunde få ut liksom totala heap-användningen.
00:28:11
Heapen är väl då, alltså hur mycket min är du använder.
00:28:15
och loggade den lite grann när jag baserade så här, när jag spelade så går det upp.
00:28:18
Och jag bara, vad fan är det som händer?
00:28:20
Sen hittade jag en till metod där man kunde mäta mellan olika punkter,
00:28:25
som var skitnice. Då fick du se så här, du satte en start och så satte du en end-funktion så här ihop.
00:28:29
Och vi startade började med att mäta och sen vi end-slutade med att mäta,
00:28:33
och så fick du ut ett resultatobjekt och då kunde man logga liksom där, och så hade den en så här
00:28:37
before 45 MB, after 53 MB.
00:28:42
Och då såg jag att den steg ju då fortfarande för varje steg jag tog, eller för varje spel som spelades.
00:28:48
Så att det var ju väldigt mycket, det är lite så här console log debugging på det här.
00:28:54
Men jag har liksom inga bättre alternativ.
00:28:57
Det slutade med att jag tog den här, stoppade start och endanropen på olika ställen i min applikation.
00:29:05
Alltså där jag gjorde olika saker.
00:29:06
Och såg vart erroren ökar.
00:29:09
Du sparar någonting som du inte borde spara.
00:29:13
Exakt.
00:29:14
Och först tänkte jag så här, okej, men det kanske har någonting att göra med alla sträck som folk ritar.
00:29:19
Det var det inte.
00:29:20
För de kastade jag bort.
00:29:21
Så det var nice.
00:29:23
Men sen visade det sig att det var på ett specifikt ställe som det hände.
00:29:28
Och det var när man räknade ut poängen.
00:29:30
Och här är också en skillnad från den första varianten jag byggde.
00:29:37
För det jag upptäckte var att det här Azure Custom Vision tillåter dig att exportera hela din modell.
00:29:43
Så det jag gjorde var att jag laddade ner hela den modellen och sedan körde jag TensorFlow.js.
00:29:49
TensorFlow är ju då ett bibliotek för maskininlärning.
00:29:53
Och den kunde då ladda in den här modellen så att jag kör modellen lokalt istället.
00:29:58
Istället för att göra API-anropen till Azure Custom Vision.
00:30:00
För det första så går det ju hundra gånger snabbare.
00:30:04
Tidigare hade jag ett state i fronten där det stod "calculating"
00:30:08
Då man väntade ofta 20 sekunder på att den kalkylatade
00:30:10
Statet finns kvar, men det syns aldrig längre
00:30:13
För att det går så jävla snabbt att räkna ut nu
00:30:14
Men då visade det sig också väldigt mycket så här att
00:30:19
Det här var väldigt mycket stack overflow, copy/paste, programmering i hur jag fick den här att funka
00:30:23
Vi har en klass som helt enkelt
00:30:25
Tar in indatat som jag får och sen så gör den om det till
00:30:30
Den typ ritar ut det på en fake canvas-objekt, för man ritar på canvas i frontenden.
00:30:35
Så då ritar jag ut det på en fake canvas i backenden för att få till en till bild, istället för bara att ha massa data.
00:30:41
Och sen så från den canvasen exporterar jag ut det till någon annan datatyp, kommer inte ihåg exakt var det är just nu.
00:30:48
Kanske dat64 heter det.
00:30:50
Ja, jag är lite borta nu känner jag.
00:30:52
Ja, men det är så här då.
00:30:54
Vi börjar om.
00:30:55
Du tar det från fronten, plockar bak dig backen,
00:30:59
som också ritar upp det på en canvas för att du ska se vad du håller på med,
00:31:02
för att du ska kunna få en bild du kan spara som data.
00:31:05
I stort sett. I fronten har jag ett litet bibliotek
00:31:09
som "wrappar" canvasen för att kunna rita.
00:31:11
Så det som den spottar ut är att vi ritade ett streck
00:31:14
från den här punkten till den här punkten,
00:31:17
som var så här brett i den här färgen.
00:31:19
Nu finns det bara en bredd och en färg, men det är stödigt för att göra med fler grejer.
00:31:23
Och den datan som jag får ut är ju bara liksom, den kan jag bara återanvända för att rita ut det
00:31:31
genom biblioteket igen så att säga.
00:31:33
Det är inte bilddata, rådata som jag skickar.
00:31:35
Men det är typ linjer, algebra?
00:31:37
Ja, precis. Jag sparar ner varje streck man ritar av för sig.
00:31:41
Och det är just för att jag ska kunna skicka det till, via backenden, skicka ut det till en
00:31:48
en dashboard eller en rumsbild där man ser allas ritningar så att man kan se alla sträck i realtid när de ritas.
00:31:54
Så eftersom jag gör det här så har jag inte bilddatat i backenden, men det jag gör är att jag kör upp en låtsas canvas i backenden
00:32:04
som jag sedan använder sambibliotek på för att rita ut den här bilden.
00:32:07
Och sedan från canvasen exporterar jag bilddatat.
00:32:10
Och bilddatat stoppar jag då in i något som i TensorFlow kallas för en tensor.
00:32:17
Nu är vi väldigt på tunn is för mig, för jag har ingen aning.
00:32:21
Det här är kanske en stor anledning, jag hade min släckan.
00:32:23
Så det man gör är att jag stoppar in den här bilddatan i något som heter en tensor.
00:32:30
Tensor är typ någon typ av Lego-block, Lego-grej i TensorFlow som man bygger saker med.
00:32:36
Matar in den i en modell som jag då har laddat från den exporterade modellen från Azure Custom Vision
00:32:44
och utspottar den sig sannolikheter på att det här är olika saker då.
00:32:50
Vilket blir ett poäng i min typ.
00:32:54
Ja, saker.
00:32:56
Det var väldigt mycket saker där.
00:32:58
För mig är TensorFlow väldigt mycket saker.
00:33:02
Det är liksom den abstraktionsnivån jag ligger på.
00:33:04
Jag har inte ens en abstraction, det är sådär. TensorFlow, det är sådär machine learning och data och grejer, jag fattar ingenting, det får vara där borta.
00:33:15
Så jag är med.
00:33:17
Det är bra, och det är också ganska intressant egentligen.
00:33:19
Inte vad maskininlärning säger, men att det är exakt vad jag gör.
00:33:23
Men det visar sig att där, när jag gör uträkningen så växer det med ungefär två megabyte.
00:33:29
För varje bild jag betygsätter.
00:33:33
Som det typ 10 personer spelar.
00:33:38
Ja, då växer det med 20 MB i ramanvändning varje gång jag kör.
00:33:43
Så ja, det var inte jättebra.
00:33:47
Så då började jag googla lite grann.
00:33:49
Och det visade sig att så är det.
00:33:52
För att den här Tensorn, en anledning till att jag tog upp den är för att
00:33:56
den hanteras inte av Tensorflowjs.
00:34:02
av sig själv. Så att om jag inte gör någonting med den, då kommer den leva för evigt.
00:34:07
Ah, så du måste däda den?
00:34:09
Exakt. Och det man gör är att man anropar en metod som heter dispose, som i alla minneshanteringsspråk.
00:34:16
Men sen finns det även en, för att slippa göra det här manuellt, så finns det en metod som heter tf, som är TensorFlow, som är ramverket, punkt tidy.
00:34:25
Och sen skickar man in en funktion där som man vill köra.
00:34:29
Och alla tensor som man skapar där i, i Tidy, det minneshanteras.
00:34:34
Så en vanlig hederlig städning helt enkelt.
00:34:38
Exakt. Så nu gör jag en liten blandning.
00:34:41
För det gick inte riktigt att bara köra Tidy, för den klarar inte av async-grejer.
00:34:45
Så i Tidy gör jag lite grejer, och sen utanför den,
00:34:49
utanför den, så det enda jag gör där är att plocka ut den sista
00:34:52
sannolikheten som jag får ut av procentsatsen.
00:34:55
Och sen dör jag det manuellt, den tensor som jag plockar ut
00:34:59
av den datan ur.
00:35:00
Shit alltså, man är så bortskämd med att inte behöva städa
00:35:05
efter sig själv.
00:35:06
Ja, gud. Jag har inte minneshanterat på flera år.
00:35:09
Nej, inte jag heller. Det är så här, när man satt i minnesträsket
00:35:13
i C++, det var då jag bara så här, "Nej, det här är inte för mig."
00:35:17
Så det har den nog släppt. Vilken resa.
00:35:23
Ja, det var lite spännande faktiskt. Det var intensiva timmar igår kväll, över typ tre öl tror jag innan jag lyckades hitta det här.
00:35:30
Men fan vad glad jag var när jag lyckades lösa det.
00:35:34
Ja, det förstår jag. Satan vilka jävla slut på resan. Slutar lyckligt liksom.
00:35:42
Ja, det slutade väldigt lyckligt.
00:35:44
Så nu ligger den uppe, och nu tror jag...
00:35:46
Min svändning, jag har kollat lite grann nu.
00:35:47
Ser ganska bra ut.
00:35:49
Du har inte behövt starta om.
00:35:50
Jag har inte behövt starta om någonting, det har inte gått upp någonting.
00:35:52
Nej.
00:35:52
Så att den lever.
00:35:54
Och funkar och mår bra, liksom.
00:35:56
Så ja, jag tror typ att jag stannar där.
00:36:01
Det finns inte jättemycket mer att säga.
00:36:02
Vill man veta mer så pingar ni på Twitter så kan jag...
00:36:05
...prata väldigt, väldigt länge om saker.
00:36:08
Särskilt om Overmind.
00:36:11
Overmind, ja. Härligt.
00:36:13
Men om inte du känner att du har någon mer fråga, eller vill gräva ner dig i Draw.wtf, som spelet heter. Jag är nog i Sarens.
00:36:22
Nej, det är ju Urlend du har också.
00:36:25
Ja, precis. Vill man spela det så finns det på Draw.wtf.
00:36:28
Och det ligger uppe.
00:36:31
Jag tänker att jag håller uppe.
00:36:32
Jag tycker att det är fan ett av de roligaste projektet jag byggt, tror jag.
00:36:35
Så att det får leva. Jag betalar som sagt 7 dollar i månaden för att ha det igång, och det får du fan leva.
00:36:40
Det kan jag stå isär.
00:36:42
Han startar snart också en Patreon.
00:36:44
Nej, men från mitt perspektiv är det ett skitkul spel att spela.
00:36:50
Så det tycker jag absolut att ni ska testa och köra.
00:36:54
Här skulle jag också vilja slänga in en bild på Anton som har försökt att rita en delfin en gång.
00:37:00
Jag ska se om jag hittar den och kan lägga upp den.
00:37:02
Men för att det är ändå mycket glädje skulle jag säga.
00:37:06
Det är väldigt mycket glädje, det är det.
00:37:08
Det är roligt för att man inte hinner rita så bra på 20 sekunder.
00:37:12
För det andra så är det ganska svårt att rita på dator eller touch på telefonen.
00:37:17
Ja, och sen kan man också se skillnaden. Jag ritar på trackpad och en annan på en touchtelefon.
00:37:26
Det kan göra ganska stor skillnad. Rita med mus vet jag inte om det ganska går.
00:37:31
Det är jävligt svårt. Och sen som sagt, inte den bästa maskininlärarmodellen.
00:37:36
Nej.
00:37:37
Vilket hjälper inte heller.
00:37:38
Vi kan avsluta med att lite grejer jag funderar på att göra i framtiden.
00:37:43
För jag tänker att jag ska försöka bygga vidare på det.
00:37:46
Det jag skulle vilja göra är typ att man kan göra lite inställningar själv
00:37:50
om man skulle vilja spela längre omgångar.
00:37:52
Så att du får rita i en minut.
00:37:54
Så att man kan ställa in de där grejerna själv.
00:37:56
Det finns typ stöd för att skicka in egna inställningar nu
00:37:59
men det går inte via fronten.
00:38:01
Men sen funderar jag också på att testa att bygga ut det.
00:38:04
Jag funderar på att testa att bygga en pro-variant som kostar typ en dollar.
00:38:09
Som låser upp någonting. Jag har ingen aning vad.
00:38:12
Men mycket för att lära mig saker så behöver jag ofta projekt.
00:38:17
Så nu skulle jag kanske vilja lära mig att integrera Stripe som är en betallösning.
00:38:22
Eller liksom integrera någon betallösning.
00:38:24
Eller liksom bygga och använda hantering själv från grunden.
00:38:27
Med ett API-överklänt.
00:38:30
Absolut, jag förstår den grejen. Jag bara gillar det omvända i att...
00:38:34
För att man ska kunna betala för något.
00:38:36
Ehh... som vi kommer på sen.
00:38:39
Ja, jag vet inte. Jag kan väl träna lite fler bilder.
00:38:43
Så istället för 50 olika motiv får man 100 motiv.
00:38:45
Om man betalar en dollar.
00:38:47
Eller så kanske man får ut motiv som du har ritat.
00:38:49
Ja, exakt.
00:38:52
Man kanske kan få...
00:38:54
Vi kan ju bygga någon tjänst där man liksom kan skicka de ritade bilderna som vikort till kompisar.
00:38:59
Nu hörde jag det. Jag älskar sådana här idiotiska grejer.
00:39:03
Och sen får man betala en dollar för det. Det är perfekt.
00:39:07
Ja, annars om ni har idéer så kan ni tagga eller twitta Anton.
00:39:13
Ja, gör det. Jag finns på @Avnton med ett W efter A1.
00:39:18
Ja, jag finns fortfarande på @tcomstadius.
00:39:21
Men jag är ju, alltså vår skillnaden i vår aktivitet på Twitter är enorm.
00:39:28
För mig går det väldigt mycket i vågor. Nu är jag inne i en Twitter-period.
00:39:32
Och sen kan jag vara dött i tre månader också.
00:39:36
Jag är mer en sån... Vad säger man i så här spel? Jag campar mycket.
00:39:41
Ja, du är en lurker.
00:39:45
Nej, men så ibland så får jag feeling och så drar jag en tweet om något dåligt programmeringsskämt eller ångest på jobbet.
00:39:52
Ja, men det är ju kvalitet.
00:39:56
Nu tycker jag inte att vi ska dra ut på det så mycket mer.
00:39:59
Nej det ska vi inte.
00:40:00
Vi blir superglada om man ger oss en liten betyg i iTunes eller recension.
00:40:07
Och annars säger vi vad som.
00:40:09
Okej, tack så mycket. Hej!
00:40:11
Bye bye!
00:40:12
[Outromusik]
Tillbaka upp