tillbaka till startsidan

101. Redigera hela hemsidor

Lyssna på Spotify lyssna! Lyssna på iTunes

Frustrationen går nästan att ta på när Anton pratar om sina senaste äventyr inom att rik textredigering. Allt om trollkarlsinstallationer, låg energi, pollen, huvudlösa komponenter, räddaren i nöden, skuggarbete, att fulhacka bort säkerhetsvarningar och hatet mot tabeller i e-post. Dessutom en hel del om att redigera recept, smygreklam, applicera Regex på HTML, lyxen att inte bry sig om webbläsarversioner och mycket mycket annat.

Hör av er till oss på vår röstbrevlåda! Berätta ett skämt, ställ en fråga eller vad som: 0766 86 05 07

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 <3

Länkar

Avsnittets skämt:

Hur vet trampolinhallen hur många besökare dem har?
De kollar bounce rate
Skrapa här!!
Transkribering
Transkriberingen är gjord av nån "AI-grej". Du kan förbättra den genom att klicka precis här :)
00:00:00
"Hur vet trampolinhallen hur många besökare de har?"
00:00:05
"Mmm... Jag vet inte."
00:00:10
"De kollar ""bounce rate""."
00:00:13
"Ja, fan, jag tänkte ändå nånting med ""bounce""."
00:00:17
"Men jag kommer liksom inte på någon teknikterm som hade med det att göra."
00:00:22
"Det kanske inte är en teknikterm, vad vet jag?"
00:00:25
"Jag ska bara hitta på termer, tror jag, för att jag slår ut på skämt."
00:00:28
"Ja, men jag tror att det är en teknikterm."
00:00:30
"Men det är lugnt, jag har jättemånga lyssna-skämt kvar som jag kan börja dra."
00:00:35
"Det är väl klart en teknikgrej. Du kollar väl ""bounce rate"" på om folk lämnar din sida?"
00:00:39
"Ja, ja, ja, jo, men det gör man."
00:00:42
"Vad var det jag tänkte prata om idag?"
00:00:46
"Det första jag tänkte säga, fy fan, jag är redan leds på pollen."
00:00:50
"Ja, mitt har inte riktigt satt igång än."
00:00:53
"Mitt satt igång igår, typ."
00:00:56
"Ja, men vad i helvete?"
00:00:59
"Vad slår du på, då?"
00:01:01
"Jag har ingen aning, jag orkar inte ens bry mig om vad det är för något."
00:01:04
"För det kommer bara varje år, och man kan inte göra nånting åt det."
00:01:07
"Jag tror att jag var sjuk över Kristinehemsvärld."
00:01:11
"För det är kul, jag hade tagit en semester avskola långledigt, och jag var sjuk."
00:01:15
"Men jag vet inte om jag var sjuk, eller om det var att min kropp bara sa ""just det, det är pollensäsong""."
00:01:20
"Jag måste gå sönder och dö ett varv för att akklimatisera sig."
00:01:27
"Ja, jag vet inte. Jag känner mig trött, jag känner mig snorig, jag känner att det klirr i halsen och rinner från ögonen ibland."
00:01:36
"Men det kommer också i omgångar, så ibland tänker jag ""nu, det kanske är lugnt""."
00:01:40
"Så går man ut i två sekunder och dör man, typ."
00:01:43
"Nej, det är jag trött på."
00:01:46
"Ja, det är deppigt, för mitt värsta är ju gräs, och det kommer ju snart att hålla på hela sommaren."
00:01:54
"Jajamän."
00:01:56
"Och också att min kompis, som jag har känt väldigt, väldigt länge, hörde av sig till mig senast."
00:02:02
"""Shit, jag tror att jag har blivit pollenallergisk, nu förstår jag hur du har haft det i alla år""."
00:02:07
"Och en vecka senare, hon bara ""Nej, det var nog bara en förkylning""."
00:02:10
"Jag bara ""Vem fan?""."
00:02:12
"Alla jävla icka-allergiker, alla kommer ju att bli allergiker till slut, och då kommer de att ha klagat på pollenallergikerna."
00:02:19
"Höga hästen, det kommer att vara ett högt fall, alltså."
00:02:22
"Ja, verkligen."
00:02:25
"Nej, alltså det är inte så najs."
00:02:28
"Det kanske är därför jag sitter och jäspar under avsnittet."
00:02:30
"Det är inte den här klassiskt låga energin, nu är det en inducerad låg energi från pollen."
00:02:37
"Vad är en klassisk låg energi då?"
00:02:41
"Den brukar ju dyka upp på sommaren, i ASD-avsnittet, när det börjar bli lite varmt ute."
00:02:48
"För mig var det för att jag var utbränd, du bara klarar inte av värme."
00:02:52
"Så att din låg energi, inte min låg energi, hoppas jag."
00:02:57
"Men du kanske också inte har toppen energi för att du ska prata Rich Text Editor, jag vet inte."
00:03:02
"Ja, just det. Det var det jag tänkte säga."
00:03:04
"Men jag skulle också vilja säga, såg du det här lilla spelet jag gjorde?"
00:03:09
"Ja, det med andel procent som är markerat."
00:03:13
"Exakt, där man skulle gissa relativa ytor, typ."
00:03:17
"Eller hur stor del av den här fyrkanten är fylld."
00:03:20
"Det var ganska kul ändå."
00:03:23
"Ja, jag testade det lite grann, men sen hade jag fel på en synvilla och då blev jag arg."
00:03:28
"Ja, det är ju typ cirklar, man blir lite mindfuckad."
00:03:33
"Det ser verkligen ut som att det är typ 50% fylld och då är det en 25% fylld."
00:03:39
"Ja, helt orimligt av mig, men jag blev liksom såhär ""Nej!"" och så stängde jag ner det."
00:03:48
"Då missade du alla mina fina animationer och ljud och grejer som jag hade gjort."
00:03:52
"Det var jättebra."
00:03:54
"Jag är ledsen."
00:03:56
"Om man har missat en, jag tror att de flesta har sett den."
00:03:59
"Den finns i beskrivningen."
00:04:03
"Men absolut, Rich Text Editors var det jag tänkte prata om."
00:04:07
"Jag vet inte om det finns någonting, jag har varit så less på jobbmässigt på länge som Rich Text Editors."
00:04:19
"Det beror lite på att vi har väldigt specifika krav på vad vi ska göra."
00:04:29
"Det det satt och byggde var att man ska kunna skicka mejl från vårt system."
00:04:34
"Då finns det massa mejlmallar."
00:04:39
"Allt det här sker via MailChimp eller Mandrill."
00:04:45
"MailChimp håller templatesen och Mandrill är den som skickar."
00:04:49
"Ja, exakt. Det var ju två olika bolag från början och sen så köpte det en eller andra."
00:04:54
"Mandrill är en typ av apa."
00:04:56
"Ja."
00:04:58
"[Skratt]"
00:05:02
"Gud."
00:05:04
"Nej, men det är så att set upen är såhär. Det lever mejlmallar i MailChimp."
00:05:13
"Innan man skickar dem ska man kunna redigera dem i vårt system."
00:05:17
"Sen skickas de ut via Mandrill. Det spelar inte så stor roll, men det är det här redigerandet av dem som är piss."
00:05:24
"Vet du vad det jobbigare är?"
00:05:26
"När man läser in en jävla mejlmall från MailChimp, så ska man få med all styling och allt sånt."
00:05:32
"För att göra det är det såklart att du får med det som ett helt HTML-dokument."
00:05:36
"Det är ju det som skickas i mejlet."
00:05:39
"Om man kollar på hur ett mejl ser ut så är det ett HTML-dokument oftast."
00:05:43
"Så mejlmallarna från MailChimp är ett helt fullt html-dokument med en head och en body och bla bla bla."
00:05:50
"Massa style-taggar och det är inline-styles hit och dit och det är klassnamn och det är allt och hans moster."
00:05:58
"Men då kommer problemet då."
00:06:02
"Att när man ska hitta en rich text editor för att redigera det här så tänker man att det borde inte vara så svårt."
00:06:08
"Sen börjar man titta på det här och så ser man att det finns väldigt få rich text editors som stöder fulla html-dokument."
00:06:18
"Alltså att man kan redigera ett html-dokument som även är en body och head och alltihopa."
00:06:24
"Det kan man ju förstå för att det blir lite mer komplext för att du måste på något sätt skopa det där till"
00:06:33
"att style-taggarna som ligger i head måste skopas till bara mejlmallen så att de inte appliceras på hela sidan."
00:06:40
"Jag fattar att det blir mer komplext."
00:06:45
"Det finns några stycken som gör det, typ TinyMCE är en men det blev inte där på grund av lite olika anledningar."
00:06:56
"Kanske att det var att man var tvungen att betala för det där och det ville vi inte göra riktigt."
00:07:00
"Det tycker jag inte om."
00:07:03
"Nej, nej, nej, saker ska vara gratis."
00:07:06
"Speciellt för företag att använda."
00:07:09
"Gud ja, vi borde bara kunna betalat oss ur det här."
00:07:13
"Det hade vi förmodligen tjänat på det även om vi hade betalat i flera år framöver för det."
00:07:18
"Men sen i det gamla systemet som vi bygger om så använder de en rich text editor för att göra exakt den här redigeringen."
00:07:27
"Alltså att de redigerar hela HTML-dokumentet som kommer från Mailchimp och så vidare."
00:07:31
"Som heter CK Editor. Jag vet inte om du har hört talas om det någon gång."
00:07:34
"Eller du har ju sett det kanske för att du har ju suttit på samma ställe som jag."
00:07:39
"Kanske, kanske sett och förträngt. Vem vet."
00:07:44
"Men CK Editor finns något som heter. Jag hade aldrig hört talas om det förrän jag började här."
00:07:51
"Det är den sämsta rich text editor jag jobbat med i hela mitt liv."
00:08:00
"Härligt. Vad gör den absolut sämst?"
00:08:06
"Alltså API är svinmäcket."
00:08:10
"Alltså de har mediokert stöd för det första. För att köra typ, för sitt React stöd och allting sånt."
00:08:19
"Och det som gör den absolut sämst. Om man ska ta pinpont en grej."
00:08:23
"Då är det typ att ibland så är det typ så här. Ja men jag vill ha stöd för full pages. Alltså med HTML."
00:08:29
"Då är det ett plugin. Då tänker man. Ja men perfekt. Jag mpm installerar det pluginet och så drar jag in det i min editor som jag har här."
00:08:36
"Nej, nej, nej. Det går inte. Du kan mpm installera det. Du kan lägga in det. Men det funkar inte."
00:08:42
"Googla om det här. Hitta deras dokumentation som finns på någon jävla forum någonstans."
00:08:47
"Och läs det där. Och då skriver de. Ja men så funkar det inte att göra."
00:08:52
"Utan du får använda den här jävla online wizarden på vår hemsida."
00:08:58
"Där du typ klickar i vilka plugins ska jag ha i min editor."
00:09:05
"Drag and droppar den här jävla toolbaren. Vilka knappar ska jag ha? Hur ska de se ut? Vart ska de finnas?"
00:09:11
"Hur ska det göra? Och sen klickar man på generera. Och så tar det på riktigt fem minuter."
00:09:17
"Och sen får man en zip-fil som innehåller en massa javascript, HTML och CSS."
00:09:22
"Wow, alltså det är som att koda på universitetet. Ja."
00:09:28
"När man inte riktigt kunde git."
00:09:33
"Och jag blev så här. Vad är det för år?"
00:09:43
"Det är så jävla sjukt. De har majsat för det ändå."
00:09:48
"The WYSIWYG editor of tomorrow. Available today."
00:09:53
"Men är det inte helt sjukt överhuvudtaget med rich text editors? Alltså det finns typ inga."
00:10:03
"Alla är typ svingamla. Jag byggde ju en gång. Eller inte, men interface."
00:10:10
"Du implementerade den?"
00:10:13
"Ja, fast typ ett STK så gjorde man egna knappar och sådana grejer."
00:10:19
"Ja, alltså det var lite mer headless."
00:10:23
"Ja, precis. För det kanske du har sett? Ja, absolut."
00:10:28
"Min implementation av det? Den var ju på där du är nu. Den lever kvar."
00:10:34
"Det är en sorg i sig som vi inte har hört av."
00:10:38
"Men när jag googlade runt på det där, jag var så chockad över att det inte är bättre löst."
00:10:44
"Jag använde den för fem år sedan, som nu är sju år sedan."
00:10:49
"Men den bara maintainas. Det händer ingenting med den."
00:10:54
"Nej, alltså den som du implementerade här heter väl Draft Geass."
00:10:59
"Var det i Facebooks?"
00:11:01
"Jag kommer inte ihåg vilka som byggdes från början, men det kan mycket väl stämma."
00:11:05
"Den är väl en av de stora, populära."
00:11:08
"Det är väl helt okej, men det känns aldrig som att det blir en bra implementation av den."
00:11:14
"Och sen finns det ju..."
00:11:16
"Nej, men jag har slagits med den där tillräckligt mycket för att få dissa den nu."
00:11:21
"Ja, fast jag byggde den på sidan av en annan implementation av den."
00:11:27
"Var det inte att det fanns en annan implementation och sen så satt vi och smygbyggde den här?"
00:11:35
"Och sen sa du ""Jag har byggt av den här nu""."
00:11:37
"Ja, men den implementationen var eventuellt lite extra komplex och lite svårläst."
00:11:45
"Så jag vill minnas att Vimkillen satt och försökte implementera vårt ljuscase i den."
00:11:50
"Och jag övergav honom lite i mobben, för jag satt på skuggen, som vi brukar kalla det,"
00:11:55
"och bara gjorde en egen implementation som var förenklad."
00:11:59
"För jag förstod inte varför den behövde vara så komplex."
00:12:02
"Och då kändes det som att jag hade missat något, så då testade jag och så byggde jag."
00:12:06
"Och så gick det jättebra."
00:12:08
"Ja, typ."
00:12:10
"Men den hade ju inte då HTML-stöd."
00:12:13
"Nej, precis."
00:12:15
"Och sen så har de också släppt någon ny version av den som heter CK Editor 5,"
00:12:23
"som de har ändrat hela API på och de har betalt, och det vill vi inte."
00:12:27
"Så då levde vi kvar på CK Editor 4."
00:12:31
"Åh, gud, betala bara!"
00:12:33
"Ja, jag vet. Vi hade löst så jävla mycket genom att betala det här."
00:12:37
"Och sen så använde vi CK Editor bara för mail-templet."
00:12:42
"Och sen hade vi fortfarande din implementation, den har vi fortfarande,"
00:12:46
"för allt annan rich text, alltså den vi redigerar i alla vanliga fält i appen."
00:12:52
"Så vi har två stycken rich text-editor som implementeras samtidigt, som använder sig av olika saker."
00:12:58
"Och sen så kom det väl till något steg där de gjorde någon minor release av CK Editor 4."
00:13:08
"Så den gjorde ett anrop och skrev ut en stor gul varningsbox där det stod"
00:13:15
"""Du använder en osäker version av CK Editor 4, du borde uppgradera""."
00:13:19
"Och vi lyckades inte ens få bort den när vi nedgraderade."
00:13:23
"Vi satt och bara ""Vad är det som händer? Vi har ju tagit bort versionen som den implementerades i,"
00:13:30
"men ändå poppade upp någon ful jävla gul box här""."
00:13:34
"Så då slutade med att vi, eller vi och vi, det var väl jag kanske,"
00:13:38
"som bara skrev lite global CSS för att dölja den gula boxen."
00:13:44
"[Skratt]"
00:13:48
"Är det här ditt stoltaste av att du ska ta fram ett arbetsprov?"
00:13:55
"Vad har du gjort? Jag dölde en gul box i CK Editor 4."
00:14:02
"Du har jobbat mycket med CK Editor 4, främst på Cv1."
00:14:06
"Ja, men vi försökte uppdatera CK Editor 5 ett tag,"
00:14:10
"för jag tror att det finns någon halv, gratis variant på den också,"
00:14:14
"eller den var det vi tänkte vi skulle betala."
00:14:17
"Men då gick det liksom inte, för att alla templates från Mailchimp"
00:14:22
"är implementerade med tabeller."
00:14:25
"För att det är typ så man brukar göra med mail."
00:14:30
"Och problemet var att de behöver lägga in ett tabellstöd i Editon."
00:14:34
"Och det kan man ju göra, det är inga problem."
00:14:36
"Problemet var att det här tabellstödet, det la till en massa styling"
00:14:40
"som var helt jävla omöjlig att få bort."
00:14:42
"Och styling som styrdes med JavaScript, så det var nästan omöjligt"
00:14:45
"att overrida det med CSS, hur många ""important"" jag slängde på."
00:14:49
"Tänk dig att du har en vanlig tabell, och så ska du ha RichTextEditor stöd i den."
00:14:56
"Då är det ganska nice att du kanske får den aktiva cellen"
00:15:00
"vid att få en blå border, eller du kan få lite handlars,"
00:15:05
"alltså lite handtag här och där som du kan dra i för att ändra storleken"
00:15:08
"och sådana saker."
00:15:10
"Eller att kunna flytta ur saker ur tabellen."
00:15:13
"Det är vettigt, bara att för vårt use case så gjorde det allting mycket sämre."
00:15:17
"Mailchimp-templeten var också implementerad så att det var sju nästlade tabeller."
00:15:24
"Så tänk dig att jag fick sju jävla blåa boxar som innehöll en ny jävla blå box"
00:15:28
"och en ny blå box och en ny blå box innan den faktiskt kom ner till texten."
00:15:32
"Jag var så arg."
00:15:35
"Känner du ändå att du fick upp lite energi genom det här ämnet?"
00:15:41
"Absolut, det känner jag också."
00:15:44
"Den drar igång några känslor i kroppen."
00:15:48
"Och till slut så blev jag så jävla trött, så jag tänkte att"
00:15:55
"jag ska ta bort CK-editor bara för att ta bort CK-editor."
00:15:59
"Jag bryr mig inte om vad jag byter till, jag ska bara bort från CK-editor."
00:16:03
"Riktigt professionellt låter det som."
00:16:05
"Men jag ska bara bort från CK-editor."
00:16:08
"Då gick jag till det som är den enda bra Rich Text Editor-implementationen som finns."
00:16:15
"Oj, det är mycket lovat nu."
00:16:19
"Ja, det är mycket lovat nu. Det finns ju en Rich Text Editor-lösning som heter"
00:16:23
"Rose Mirror. Som är ganska gammal, superkomplex."
00:16:29
"Det är ett väldigt stort API. Du kan i stort sett lösa allt som finns i den."
00:16:34
"Men den är ganska svårhanterlig och det är mycket som"
00:16:39
"man måste lära sig ganska mycket för att kunna göra bra saker i den."
00:16:43
"Och då är det ett gäng, det börjar väl bli lite gamla i GM-et nu i det här laget,"
00:16:50
"en lösning som heter ""Uberdosis"" tror jag de kallar sig."
00:16:54
"Som har byggt en editor som heter TipTap."
00:16:58
"Och den är så jävla bra."
00:17:02
"Och den bygger på det här då? Den stora komplexen?"
00:17:05
"Den bygger på Rose Mirror, precis."
00:17:07
"Så de har ""rappat"" Rose Mirror och byggt ett enklare API ovanpå det."
00:17:13
"Och gjort då en editor som heter TipTap."
00:17:15
"Som är språkfristående, eller ramverksfristående."
00:17:22
"Så det finns till React och Vue och alltihopa tror jag."
00:17:25
"Och den är också pluginbaserad och allting är i stort sett plugins."
00:17:30
"Paragrafer är ett plugin, fetmarkering är ett plugin."
00:17:34
"Och allting är plugins och man lägger bara till det man behöver."
00:17:38
"Man kan npm-inståla allting, man behöver ingen online wizard."
00:17:42
"Bara en sådan grej."
00:17:45
"Men att du inte får göra hela den här grejen nu, drag och droppa lite."
00:17:48
"Jag vill ha det här. Det är som att shoppa lite."
00:17:51
"Den är också helt headless, som du pratade om."
00:17:53
"Det följer inte med någon styling, utan det är bara implementationen som följer med."
00:17:59
"Och den är fruktansvärt trevlig att jobba med."
00:18:04
"Jag har ju i den här lilla recept-sajten som jag håller på med, så använder jag också TipTap."
00:18:09
"Och där har jag till exempel börjat skriva lite egna plugins."
00:18:13
"För att just nu i den så är det byggt så att man"
00:18:18
"när man lägger till ingredienser, du har ju testat till exempel."
00:18:23
"Så när man lägger till ingredienser så är det liksom en typ, jag vet inte."
00:18:27
"Det är liksom ett avancerat formulär. Du kan klicka på ""lägg till ingrediens"""
00:18:31
"och så kan du skriva ""här är namnet"", du kan välja vilken mängd det är."
00:18:36
"Och ur en dropdown väljer man vilket mått, om det är deciliter eller vad fan det kan vara."
00:18:42
"Och så kan man klicka på ""lägg till fler"", man kan gruppera dem genom att klicka på ""lägg till grupp"""
00:18:47
"och så kan man drag-n-droppa runt de här raderna."
00:18:50
"Och det funkar ju, men jag har känt att det är lite jobbigt, särskilt på mobilen."
00:18:59
"Är det ju mecket att göra där."
00:19:02
"Så nu har jag börjat experimentera med att bygga en Rich Text Editor för just ingredienser istället."
00:19:09
"Och då har jag gjort så att jag har gjort ett plugin som blir egentligen att varje rad blir en ingrediens."
00:19:15
"Och sen i bakgrunden så parsar den det där till, alltså att namnet blir ett namn,"
00:19:19
"mängden blir en mängd och måttet blir ett mått."
00:19:24
"Och sen kan den liksom, samtidigt som man skriver kan man få indikationer på att"
00:19:27
"""ja men nu har du skrivit en godkänd ingrediens"" eller ""den har lyckats parsa den typen"""
00:19:31
"""och den visar det inline i editorn"" och allting sånt."
00:19:35
"Och den fungerar då som att det är ett fritextfält."
00:19:39
"Så att du kan redigera det på mobilen som att det är vanligt och du kan kopiera därifrån som vanligt."
00:19:43
"Du kan klistra in om du vill kopiera från annanstans och så där."
00:19:47
"Jag tror att det kan bli väldigt bra, just ur Recept-sajtens perspektiv."
00:19:52
"Men det var också väldigt kul att sitta och testa, tipp-tapp, lite mer under huven."
00:19:57
"Och det var väldigt, väldigt enkelt."
00:19:59
"Och min reputation är svinbra."
00:20:02
"API-tjänst var väldigt naturligt. Det var liksom inga konstigheter."
00:20:06
"Och det gjorde också att jag blev ännu mer såld på tipp-tapp."
00:20:10
"Här skulle jag bara vilja ta ett ögonblick och ändå hylla"
00:20:15
"din förmåga att ändå ta varje ämne för en skamlös plugg för dina egna produkter."
00:20:24
"Jag tänkte inte länka till Recept-sajten, men nu gör jag det."
00:20:29
"Det går ju inte ens att registrera sig på Recept-sajten än."
00:20:36
"Det är liksom inte ens öppet."
00:20:39
"Men om man vill ha en inbjudan så kan man ju höra av sig."
00:20:44
"Lämna ett meddelande på Telefonförhören."
00:20:47
"Jag har inte ens pratat om vad det är för Recept-sajt, så jag tror inte att så många är intresserade."
00:20:51
"Men absolut, jag smyger in det där jag kan."
00:20:55
"Jag är så jävla dålig på att göra reklam i vanliga fall, så jag gör det bara på mina egna kanaler."
00:21:00
"Ja, men absolut."
00:21:05
"Det är..."
00:21:09
"Jag kan inte sluta tänka på någonsin någon Marvel-film där någon börjar snacka Fenty."
00:21:16
"""Do you have the correct foundation? Are you using Fenty Discolor?"""
00:21:21
"När de är så uppenbara, men de ändå ska in det som ett skämt i filmen."
00:21:27
"Det kanske är där jag ska göra det här. Alla skämt jag drar kommer att handla om saker jag har byggt."
00:21:33
"Ja, jag tycker du ska ta det som en utmaning. Det kommer bli toppen."
00:21:38
"Fy fan."
00:21:43
"Okej, så nu i och med den här TipTap, är dina Rich Text Editor problemlösta?"
00:21:49
"Ja, alltså, det är ett problem då med TipTap."
00:21:54
"Eller ett problem och problem, det är väl ett val."
00:21:58
"Det är att den stödjer ju inte hela HTML-dokument."
00:22:03
"Var det inte hela grundpremissen?"
00:22:06
"Jo, absolut. Det var hela grundpremissen som gjorde att det här var ett stort problem från början."
00:22:18
"Men jag tänkte att..."
00:22:21
"Du ska bygga en plugin?"
00:22:23
"Nej, det skulle säkert gå att göra det där. Jag kanske borde testa att bygga ett plugin egentligen."
00:22:29
"Det här skedde innan jag började testa att bygga plugins, så jag insåg hur lätt det var."
00:22:34
"Men då tänkte jag att det är ju bara HTML och CSS egentligen."
00:22:41
"Alltså, det här lilla mailmallen som kommer."
00:22:47
"Så då... Kanske det här är det jag ska skryta om om man frågar på en intervju."
00:22:53
"Beskriv något bra du har gjort någon gång."
00:22:55
"Då gjorde jag så att jag... Det kommer in som en sträng, den här mailmallen, som innehåller hela HTML-dokumentet."
00:23:02
"Jag regexar ut alla style-taggar som ligger i head, i den här strängen."
00:23:15
"Jag regexar ut hela bodyn, så att jag får allt innehåll i bodyn."
00:23:21
"Skickar in det som innehållet i tip-till-tip-tap."
00:23:28
"Med de här style-taggarna så ""rappar"" jag dem i en CSS-klass."
00:23:37
"Det finns ju stöd i browsers nu för nästlad CSS. Det kanske folk inte vet i och för sig."
00:23:43
"Alltså, du kan utan att köra Sass, Style Components, Less eller allt vad det nu kan vara."
00:23:50
"Så kan du nästla CSS i browser native."
00:23:54
"Ja, det beror på vilken browser."
00:23:58
"Just nu tror jag att stödet är väldigt bra. Vi kan väl kolla här, om mitt händpår du vill vakna och ta liv."
00:24:04
"CSS, Nesting, Can I Use?"
00:24:08
"Ja, alla browsers utom IE och Opera Mini."
00:24:14
"Alltså, Opera Mini?"
00:24:17
"Och UC Browser for Android, jag vet inte vad det är för något riktigt."
00:24:21
"Men alla versioner?"
00:24:26
"Alla versioner, Chrome stödjer det sen, vi kan se här, sen december 2023."
00:24:34
"Åh, det är inte alla versioner."
00:24:37
"Nej, nej, nej. Opera sen december 2023, Firefox augusti 2023, Safari december 2023 och Edge december 2023."
00:24:49
"Så absolut, procentuellt kanske inte."
00:24:54
"Låt mig bara säga, sitt inte där på din höga interna systemhäst och liksom, sitt, det är allt jag vill säga."
00:25:02
"Nej, men vadå, 85% står det här, stödjer det där."
00:25:07
"Absolut, absolut, okej."
00:25:10
"Men absolut, jag har ju fördelen att jag bygger ett internt system där jag vet att alla kör senaste Chrome för att det tvingas av organisationen."
00:25:17
"Så det är ganska nice."
00:25:20
"Så det jag gjorde då var att jag som en sträng, tog alla style-taggar och inuti varje style-tagg så nästlade jag all CSS i en klass."
00:25:34
"Som jag då sen satte på contentet för E-Rich Text eller i TipTappen."
00:25:40
"Och sen injektade jag alla de här style-taggarna bara brevid, som rätt in i HTML bara."
00:25:46
"Alltså inte in i TipTapp utan jag renderade ut dem med Dangerously Set HTML."
00:25:50
"För att de skulle applicera på."
00:25:53
"Vart injektade du dem? På varje ställe där den skulle vara?"
00:25:57
"Nej, alltså det här är ju de som ligger i head från början."
00:26:00
"Så det är liksom style."
00:26:01
"Jaha, du injektade in style-taggarna i bodyn?"
00:26:04
"Nej, alltså så här, jag har ju TipTapp, jag säger att TipTapp har en div."
00:26:10
"Den kommer ju rendera ut allting som låg i body, i mallen."
00:26:14
"Jaja, du injektar in den i E-Rich Text Editorn?"
00:26:17
"Ja, eller jag lägger den brevid tror jag."
00:26:19
"Ja, jag lägger den brevid just nu."
00:26:21
"Och sen så ser jag till att den bara applicerar på E-Rich Text Editorn genom att wrappa den med nästlad CSS."
00:26:27
"Ja, med klass. Okej, du skapar den så."
00:26:30
"Exakt."
00:26:32
"Och sen då, när TipTapp säger att nu har jag uppdaterat något här."
00:26:39
"Då tar jag bara den där HTML som jag fick från början och så byter jag ut bodyn från den."
00:26:43
"Och skickar vidare det. Så det skickas fortfarande ett helt HTML-dokument."
00:26:47
"Som det såg ut från början, men jag har liksom bara redigerat bodyn nu."
00:26:52
"Och allt styling ser bra ut. Det är inga problem med någonting."
00:26:55
"Och allt funkar så jävla bra."
00:26:58
"Fan, vilken jävla hack ändå alltså."
00:27:01
"Fan alltså, ibland."
00:27:04
"Som jag har sagt förut, du är så himla mycket utanför lådan."
00:27:09
"Ja, fast det här känns ju också som att de flesta hade kunnat komma på den här idén."
00:27:13
"Och sen hade de tänkt, nej det är ingen bra idé, vi låter bli."
00:27:17
"Medan jag kände att, nej, nu kör vi."
00:27:21
"Ja, absolut. Men då har de inte jobbat med E-Rich Text Editor, vill jag säga."
00:27:27
"Nej, så kan det ju verkligen vara."
00:27:29
"Men allting som ställer till det egentligen är ju att det är ett helt HTML-dokument."
00:27:34
"Men hade man inte kunnat göra någon typ av iframe eller någonting?"
00:27:38
"Eller liksom en canvas?"
00:27:41
"Ja, typ CQ-editor och andra editor som har det här full HTML-stödet."
00:27:46
"De kör väl iframes just på grund av det, tror jag."
00:27:50
"Ja, okej. Just det."
00:27:52
"Men TipTap gör inte det."
00:27:56
"Många E-Rich Text Editor är implementerade så att det du redigerar är faktiska HTML-dokument."
00:28:03
"Bara att de har satt ""content editable"" till ""true"" väl."
00:28:08
"Ja, men låt mig göra en på skuggen. Nej, skoja bara."
00:28:12
"Det kan jag absolut inte göra."
00:28:14
"Det är ganska kul, förresten, det här ""content editable""-attributet."
00:28:18
"Jag har gjort det några gånger när man har suttit med en UX-are eller någon som ska skriva copy."
00:28:26
"Att bara gå in i utvecklareverktygen och så sätter du ""content editable"" på allt."
00:28:32
"Alltså stjärna ""content editable"" på alltihopa."
00:28:36
"Sen kan man sitta och redigera sidan som att det är någon viss-fygg-editor i browsern."
00:28:43
"Bara för att testa olika saker, hur de ser ut och hur de anpassar sig."
00:28:48
"Jag fattar inte ens, var sätter du det här? På vanliga hemsidor?"
00:28:51
"Ja, du kan gå in på vilken hemsida som helst."
00:28:55
"Det finns ju här. ""Content editable"" är ett attribut."
00:28:59
"Om du sätter ""content editable"" till ""true"" kan du redigera innehållet i det elementet i browsern direkt."
00:29:11
"Sätter du det på ""dom"" elementet eller som ett CSS-attribut?"
00:29:15
"Som på ""dom"" elementet."
00:29:18
"Det kanske går att sätta på CSS också, men jag tror att det vanliga är att sätta det på elementet."
00:29:25
"Det här är nyheter för mig."
00:29:28
"Vad kan jag?"
00:29:30
"Jag vet inte om det räcker med att man sätter det på ""body""."
00:29:37
"Låt mig bara säga att nu börjar det bli ett så här långt avsnitt som du alltid är upprörd över."
00:29:43
"Jävlar vad vi har snackat på här."
00:29:46
"Vi och vi."
00:29:48
"Det är faktiskt väldigt mycket mest jag idag va?"
00:29:53
"Din frustration har hållit låda."
00:29:57
"Ja, precis. Jag sätter det här på ""body"" bara."
00:30:00
"Sätter du ""content editable"" till ""true"" kan du redigera allt på hela sidan."
00:30:07
"Gud, okej. Jag fattar nu."
00:30:13
"Jag såg framför mig, eftersom vi pratar ""rich text editor"""
00:30:19
"och såg framför mig också någon gång när jag gjorde en Storyblock-implementation,"
00:30:23
"att jag skulle kunna dra i knappar, om den är så här tjock."
00:30:28
"Ja, jag fattar."
00:30:30
"Men ja, ""content editable"". Så dumt."
00:30:33
"Nej, det tycker jag inte. Men vi måste verkligen avsluta, för helvete vad det drar ut på tiden nu."
00:30:38
"Jag tror inte jag hade så mycket mer att säga. Jag tycker bara att TipTap är en fantastisk ""rich text editor"" och CK-editor är inte det."
00:30:45
"Jag vill bara säga att jag blev alltid lite konfunderad över att jag inte kunde lägga till underskrikning i ""rich text editor"""
00:30:52
"tills jag läste att ""men det är ju för att underskrikning är hyperlinkar, så man använder inte den typen av editering i ""rich text editor"" på internet""."
00:31:02
"Det går garanterat att göra i TipTap."
00:31:07
"Okej hörni, tack för att ni lyssnade."
00:31:10
"Ha det bra, så hörs vi."
00:31:13
"Vi hörs. Bye bye!"
00:31:15
"Hej!"
00:31:17
"[Outromusik]"
00:31:23
"Ett tack till er som tittade på den här filmen!"
Tillbaka upp