tillbaka till startsidan

19. CSS, eller, "Det är dags för IE 11 att dö"

Lyssna på Spotify lyssna! Lyssna på iTunes

Efter den långsammaste inledningen någonsin pratar vi om allt kring CSS i kanske det ospretigaste avsnittet hittills. Vi snackar grundläggande CSS såsom flex vs block, px vs em, att använda CSS Grid i produktion och att det verkligen är dags för IE 11 att dö. Dessutom fotorealistisk CSS, animerade SVGer och frustrationen bakom en konfettikanon.

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

Avsnittets skämt:

Varför blir jag så trött när tittar på 16 pixlar?
1 REM
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
-Håll i hatten nu. -Jag skrattar redan.
00:00:04
Det kommer du inte göra snart.
00:00:06
Varför blir jag så trött när jag tittar på 16 pixlar?
00:00:10
-Jag vet inte. -En rem.
00:00:14
-Jag stänger av inspelningen nu. -Jag måste gå nu tyvärr.
00:00:21
Det här var det sämsta skämtet.
00:00:27
Ja, tydligt nödskämt skulle jag säga.
00:00:30
Tydligt nödskämt, absolut.
00:00:31
Det är så här vi är när man så här, vi spelar in två avsnitt efter varann.
00:00:34
Ja.
00:00:35
Då blir det andra ett nödskämt.
00:00:38
Ja, okej.
00:00:39
[Skratt]
00:00:43
Hej.
00:00:44
Hej.
00:00:45
Välkomna.
00:00:46
Till ett nytt avsnitt av Stef.
00:00:48
Ja.
00:00:49
Jag håller på att återhämta mig med det där skämtet.
00:00:55
Vi tänkte prata lite CSS.
00:00:57
Mycket för att jag... Det var ett drama på Twitter idag, igår.
00:01:02
Kanske var det förrgår, jag vet inte.
00:01:04
Där var det någon som tweetade i stil med typ...
00:01:08
"CSS, I'm so sick of your shit. Sincerely, everyone."
00:01:14
Är det något sånt?
00:01:15
Och det låter ganska oskyldigt såklart.
00:01:18
Men drama breder för att det är ett spärr på det dåliga ryktet som CSS har.
00:01:24
som CSS har och alla hatar inte CSS.
00:01:27
- Nej.
00:01:28
- Och du är ju ändå en CSS-älskare av rang.
00:01:32
- Oj, vilket epitet.
00:01:35
Det vet jag inte om jag håller med om riktigt.
00:01:41
Jag har en liten hatkärlek för CSS.
00:01:46
Inte så mycket för att jag tycker att CSS är värdelöst
00:01:50
eller dåligt eller på något sätt så,
00:01:52
utan jag tror att jag inte förstår det ordentligt.
00:01:55
Jag tror att det är mycket av problemet,
00:01:59
att folk förstår det inte ordentligt.
00:02:01
Och så blir det knörligt.
00:02:03
Om man tittar på CSS och också JavaScript till exempel,
00:02:08
det finns så mycket JavaScript som är jättekonstigt
00:02:13
i början av implementationen.
00:02:15
Det har vi pratat om, det pratar folk om jättemycket,
00:02:17
det hålls snack, det finns kommerspråk som "JSFuck"
00:02:21
som tar allt som är jättekonstigt med JavaScript och använder det som ett eget språk för att bygga saker för att det är kul.
00:02:27
Man skämtar jättemycket om det här, när får du not a number, när får du undefined och sådana saker,
00:02:33
för att JavaScript inte var perfekt och supergenomtänkt kanske när det kom.
00:02:40
Men det har under åren fått en working group, den ska årligen släppas, det är standarder som uppdateras
00:02:48
och har blivit någonting att räkna med och som vi jobbar med på ett speciellt sätt.
00:02:54
Och jag tror egentligen att det är samma sak för CSS.
00:02:57
Jag menar, det var ju också, när det kom, då såg ju webben också helt annorlunda ut.
00:03:04
Och vad du kunde göra med webben. Så är det inte idag, liksom.
00:03:08
Idag är ju CSS, det filas ju också jättemycket på.
00:03:12
Det finns ju working groups och standarder för det med, liksom.
00:03:15
Men det känns som att det bara blivit någon grej att folk är så här "CSS suger"
00:03:20
och det är den sanningen jag tänker hålla fast vid för att jag orkar inte fatta vad fan som händer.
00:03:24
Vilket litet orerande det här blev.
00:03:28
- Det har varit ett försvarstal för CSS. Jag håller verkligen med dig.
00:03:33
Vi var inne på det här för något avsnitt sedan, att det här med utvecklare som hatar möten,
00:03:39
att det blir en kulturgrej.
00:03:42
Jag tycker att det är lite samma sak med CSS, att utvecklare hatar CSS mer av princip än av annat.
00:03:48
Sen tror jag att det är mer verkligt värde i det här, det vill säga att utvecklare inte har förstått CSS.
00:03:54
Utvecklare lägger väldigt sällan tid på att förstå hur CSS funkar.
00:03:58
Det finns väldigt mycket grundläggande saker, jag kan inte rabbla upp dem här och nu,
00:04:05
men jag har ändå försökt plugga på dem, med hur hela boxmodellen funkar till exempel.
00:04:11
Vi såg ett talk på Nordhys förra året av Rachel Adams, tror jag.
00:04:23
Jag tror att hon är med i working-gruppen för CSS.
00:04:27
Eller i alla fall har varit inblandad där.
00:04:29
Hon pratade just om väldigt grundläggande CSS.
00:04:33
Alltså grunderna av CSS. Det är på nivån variabler i programmering.
00:04:39
Och jag tyckte den var skitbra.
00:04:41
Inte den mest underhållande presentationen, humormässigt.
00:04:48
Men innehållsmässigt tyckte jag att den var jättevettig.
00:04:53
För man fick veta att om vi ändrar flex direction så ändrar vi hur...
00:05:00
Nu kommer jag inte ihåg vad de här sidorna heter, eller riktningarna heter.
00:05:05
Men det är därför till exempel att om vi vänder flexdirection till column så ändras även justifycontent och alignitems.
00:05:11
Jag hade skit svårt att fatta det i början när jag började med flex.
00:05:15
Men när jag hörde hennes presentation så kände jag att det är ganska vettigt ändå.
00:05:20
Alltid blir så här.
00:05:22
Ja, alltså jag tyckte hennes presentation var svinbra.
00:05:25
För jag har väl någon grundläggande förståelse för det.
00:05:29
Men jag igen måste kolla över det flera gånger.
00:05:32
Däremot har jag av någon anledning, tror jag, lärt mig flex allting utan till.
00:05:37
Så det bara sitter. Jag har väl jobbat för mycket med det helt enkelt.
00:05:41
Men det var så intressant också för att hon pratade ganska mycket om
00:05:46
vad de vill uppnå framåt och hur de jobbar med display framåt.
00:05:52
För att man pratar mycket om...
00:05:53
Ja, men så här, det är skillnad på att till exempel displayblock pratar om hur du ska displaya dig själv.
00:06:00
medan Display Flex pratar om hur du ska displaya dina barn.
00:06:04
Exakt.
00:06:05
Så det blir två olika definitioner. Det jobbar de väl på för att få en bättre bild också.
00:06:09
Eller mer sammanhängande implementation är väl snarare det jag försöker säga.
00:06:13
Och sådana bitar. Så det är jätteintressant.
00:06:16
Och det var ju som när CSS Grid kom.
00:06:18
Då tror jag folk bara så här, ja det är väl en bättre Flex typ.
00:06:21
Men det var så stort.
00:06:23
Ja verkligen.
00:06:24
Men det har liksom ingen...
00:06:26
Jag har ju knappt använt CSS Grid egentligen.
00:06:28
egentligen. För det är ofta så här, du måste stödja IE11. Så det är inte produktionsvettigt.
00:06:35
Nej, precis. Vi ska gå live med CSS Grid nu. Det kommer räckan på kunderna att göra oss nu.
00:06:44
Jag tror att det är första grid-implementationen. För tidigare har vi supportat IE11 också.
00:06:49
Men IE11 är ju i stort sett dött nu. Alltså även Microsoft. Det är ju liksom end of life totalt.
00:06:55
Och väldigt många Microsoft-produkter, bland annat Microsoft Teams till exempel, droppade sin support för IE11.
00:07:03
Så att IE11, lägg ner skiten bara. Sluta använda det. Droppa supporten för det. Det kommer bara gå bättre, snabbare och smidigare övergång för alla.
00:07:15
Ja, fan vad skönt. Släpp det.
00:07:18
Jag satt verkligen på förra uppdraget och försökte argumentera för att det kostar jättemycket att försöka hålla vid liv CSS-implementationen.
00:07:28
Det är ju ingenting som funkar bra ändå, så det är inte bra att använda upplevelser.
00:07:31
Men det skulle absolut från en annan utvecklares håll hållas fast vid.
00:07:35
Modern CSS tycker jag är så jävla bra.
00:07:40
Man kan bara name droppa flaket som Flex och CSS Grid och allt möjligt.
00:07:45
Men det är också att de är ganska genomtänkta, även om API-et i sig ofta inte är supersimpelt.
00:07:53
Jag säger inte att det är svårt, utan mer bara att det inte är simpelt.
00:07:57
Det är ofta väldigt mycket man måste ta koll på.
00:08:00
Det finns många Flexbox-cheats där ute som man ofta googlar fram.
00:08:06
Bara för att jag känner, just det, hur var det med den här nu då?
00:08:09
Om man satte Flex Grow på det här sättet och hade den här propertyn också.
00:08:13
Hur var det det hängde ihop?
00:08:15
Och sen tror jag att det är inget som hindrar mig från att plugga in det där och lära mig det.
00:08:21
För att jag kan ju väldigt mycket annan programmering.
00:08:23
Alltså kollar man JavaScript så är det en ännu större API-yta.
00:08:27
Vilket gör det ännu svårare att kanske plugga in allting.
00:08:32
Men där tycker jag att jag har lärt mig mer, men det är också för att jag har lagt mer tid på det.
00:08:36
Ja, men det är ju som du säger, det går verkligen att plugga in i mer saker.
00:08:42
Men ibland, liksom det finns i JavaScript så finns det verkligen saker i CSS som jag har läst hundra gånger,
00:08:51
jag har använt det, men jag fattar fortfarande inte riktigt vad som händer.
00:08:55
Senast jag satt med något sånt var när jag började använda det här med "endchild".
00:09:01
Just det.
00:09:02
För att strikt använda CSS för att sätta styling beroende på hur många barn totalt jag hade i en container.
00:09:09
Och om det skulle vara på en rad eller två rader och sådana här.
00:09:13
Och jag är så här, jag satt och läste och läste och läste och grundläste liksom vad de här olika sakerna gör.
00:09:18
Sen använde jag det, jag drog in det i min komponent.
00:09:21
Funkar svinbra.
00:09:23
Men om du frågar mig vad fan som hände så kommer inte jag kunna svara på det.
00:09:28
Jag förstår det helt och hållet. Jag har också suttit med väldigt mycket i sådana här pseudo-selektors.
00:09:34
När man bara, hur var det, hur funkar det nu? Och så ska man göra någonting med två, en, plus ett.
00:09:40
Och man bara, vad var det de här betyder nu då? Vilken ordning har jag valt här nu?
00:09:46
Och det är alltid Google för mig. Alltså varenda gång. Det går inte att få in det där, för jag fastnar inte.
00:09:54
Nej, men jag tycker verkligen det är, men det är så konstigt för att det är, folk väljer att fokusera på olika saker, för olika saker är olika kul kanske, eller man kanske har olika lätt för olika saker.
00:10:09
Om man tänker på just CSS, en sådan sak, så kan det ha en sån enorm påverkan för en användare.
00:10:16
Alltså en rad CSS, eller ett värde, kan ha en enorm påverkan på ett sätt som kanske andra saker inte har en sån direkt påverkan.
00:10:24
Såklart du kan inte ha ett crappy system och rädda det med CSS, det är inte det jag säger, men allting måste ju funka.
00:10:31
Det är inte så att du kan inte bygga världens bästa system och sen bara lägga på en table och förvänta dig att du växer bra bara för att tekniken är bra.
00:10:40
- Nej, men exakt. CSS förtjänar mycket mer kärlek än vad det får, tycker jag ändå.
00:10:49
Det är ofta också att folk borde försöka lära sig det lite mer.
00:10:54
Ett exempel är att CSS kan ofta lösa saker mycket bättre än JavaScript kan.
00:11:02
Alla utvecklare borde ha approachen att bygga det här så bra som möjligt.
00:11:08
Det ska vara så underhållsbart som möjligt. Det ska vara så enkel och simpel lösning som möjligt.
00:11:12
För att lösa problemet som vi håller på med.
00:11:14
Ofta finns det CSS-grejer man kan göra istället för att göra en massa komplicerat JavaScript.
00:11:18
För till exempel den här färggrejen som du sa, det är väldigt lite i CSS
00:11:24
för att få varannan rad olika till exempel.
00:11:29
Medan om du skulle göra JavaScript, det är inte så mycket mer komplicerat.
00:11:33
Men där måste du lägga in logik för att kolla, är det här varannan rad?
00:11:37
Då måste du lägga på en ny klass för att det ska stylas olika.
00:11:40
Eller kör man CSS i JavaScript så kan man göra det i den.
00:11:44
Men det känns ju som att då blandar man också väldigt mycket mer ansvar igen.
00:11:50
Okej, hur på plats ska CSS eller JavaScript hålla koll på hur stylingen ska vara mer än vad den behöver?
00:11:56
Ja, för att jag tror diskussionen är ju egentligen inte CSS in JavaScript eller vart man nu vill ha det.
00:12:07
Det är verkligen bara så här att CSS också kan göra saker oavsett vart den ligger.
00:12:15
Men det är så sant det här, man får väl försöka nå något som är konsekvent.
00:12:20
Men jag tänker så mycket på att till exempel ha ett stort bokstav i början av ett ord.
00:12:26
Det är jättelätt att göra det i JavaScript.
00:12:29
Det är någon typ av JavaScript, first, capitalize, eller to upper.
00:12:34
Och sen så bygger ihop det där igen.
00:12:38
Ja, men om det är undefined då? Eller det kommer något konstigt där?
00:12:42
Då måste du nullchecka, eller måste du göra det?
00:12:44
CSS är typ så här, text transform capitalize.
00:12:48
Ja, exakt.
00:12:49
Och sen är du klar.
00:12:50
Sen exakt vart det ligger i själva den här uppritningscykeln och lopen.
00:12:55
Jag är inte hundrad på vad som är bäst performance här nu.
00:12:59
Men det beror kanske också på vad man siktar på.
00:13:03
Och sen också problem som till och med är omöjliga att lösa, jag har skrivit nästan, går ju att lösa i CSS.
00:13:11
Ett tydligt exempel är på min egen sajt så har jag light mode och dark mode som man kan toggla mellan.
00:13:17
Och den går även efter användarens den här prefers dark mode-flaggan som man får in som user agent.
00:13:25
Och all cred för det här ska gå till en... Jag tror vi kanske nämnt honom förut som heter Josh Comow
00:13:32
Jag kan inte uttala hans efternamn, det är liksom franskt. Eller han är kanadensare tror jag. Eller något.
00:13:37
Josh W. Comow. Skitsam. Typ en av de mest inspirerande React-människorna jag vet om skulle jag vilja påstå.
00:13:48
Men han har i alla fall skrivit en guide om det här. Och då istället för att allt det här sätts via javaskript
00:13:53
avskrift så använder han CSS-variabler som också är en jävligt cool grej
00:13:59
som man borde använda mycket mer när man har möjligheten.
00:14:03
För just i och med att CSS-en läses in direkt medan avskriften måste exekveras
00:14:09
så om man hade löst det här problemet i bara avskrift då blinkar allt i sidan till om man hade ändrat.
00:14:13
Säg att du kom in med "prefers dark mode" men hade ändrat till "light mode" då blinkade den från svart till vitt.
00:14:18
Tvärtom om du kom in och ville ha mörkt.
00:14:22
Men om man gör det här i CSS-variabler istället, så att du sparar ner dina färger där,
00:14:29
och så kan du sätta preferensen där, och sen gör man ett litet javascript som läses in innan själva
00:14:34
din stora band, eller din vanliga main javascript, som bara sätter de här CSS-variablerna,
00:14:39
då får du inget blinkande.
00:14:42
Och det är typ omöjligt att läsa utan CSS-variabler.
00:14:46
Det är jävligt nice. Och CSS-variabler i sig är också en grej man borde använda mycket mer.
00:14:54
Jävla kraftfullt det är alltså. Jag använder det väldigt lite för jag sitter ju mest i preprocessors.
00:15:01
Alltså mest SAS egentligen. Men jag blev faktiskt, jag vet inte vad som hände förra veckan,
00:15:08
jag blev väldigt sugen på att testa någonting. Det dog rätt fort.
00:15:11
Just att jag blir så otroligt fascinerad av alla människor som gör, vad kallar man det, bilder i CSS.
00:15:22
Det är så häftigt. Så jag satte och grävde lite i det där och att allting grundar sig på cuboids, alltså 3D-kuber.
00:15:32
Och hur man bygger upp dem i CSS. Så jag gick igenom just den här, hur bygger jag upp en kub egentligen?
00:15:38
så här många divar, och så var det sex stycken sidor.
00:15:43
Och sen så använde jag bara CSS-variabler för att transformera dem,
00:15:47
liksom, och få ut dem på rätt sida.
00:15:49
Och sen så om jag ändrar "width", "height", "depth",
00:15:52
då kommer min cuboid fortfarande sitta ihop.
00:15:55
- Ja, exakt. - För att det är kaskadar.
00:15:57
Det är det det är. Det är cascading. Så att du sätter om det i rätt,
00:16:00
alltså i rätt turordning bara. Och det är också den här att,
00:16:05
- "CSS inte kodning? Okej, men om vi går in på den här när de börjar generera upp flera kubojs så är det ofta en typ. Jag drar in SAS och så gör jag ganska intensiva SAS-funktioner för att generera fram och bygga ut saker.
00:16:21
SAS-funktioner kan ju vara bland de mest svårlärsta någonsin. - Ja, det håller jag med om.
00:16:27
- Kan jag tycka, om man ska vara sån, så att om man vill ha svår kod, då går det ju faktiskt det här i CSS också.
00:16:34
Jag kan bli så jävla imponerad. De som ritar upp både 3D-grejer, men också de som försöker göra verklighetstrogna grejer.
00:16:43
Jag såg någon på en skyline på någon stad, jag vet inte om det var San Diego eller något.
00:16:49
Det var vatten och en solnedgång, och en stadsbild.
00:16:53
Då kunde man ändra färgen på solen.
00:16:56
Och det påverkade spegelbilden i vattnet och hur husen ljussattes.
00:17:03
Det var så jävla skönt. Och det var bara CSS.
00:17:06
Det är helt sinnessjukt.
00:17:08
Jag kommer ihåg från några år, typ fem år sedan,
00:17:11
det var någon som hade byggt en CSS-bana i bara HTML-CSS.
00:17:15
Det är jäkla sjukt, alltså.
00:17:17
Ja, och det talar väl en del för att CSS är så mycket kraftfullare än vad man tänker från början.
00:17:23
Man tänker ju så här, vi sätter lite färger, lite avstånd.
00:17:27
Ja, nu måste pixelpusha padding.
00:17:29
Jag har absolut inga ganska viktiga saker för ögat.
00:17:32
Men fan vad du kan göra grejer om du kan det.
00:17:36
Ja, exakt.
00:17:37
Jag kan det absolut inte.
00:17:38
Nej, Gud, inte jag heller.
00:17:40
Och det är väl, vad heter hon?
00:17:42
Hon heter Lynn någonting tror jag.
00:17:44
Som har en sida som heter A Single Div.
00:17:46
Där hon har en div och så stylar hon den så att det blir väldigt, väldigt snygga bilder.
00:17:52
på olika saker.
00:17:54
Var inte det en grej förra året också?
00:17:58
Hade de inte en månad eller något?
00:18:00
Jo, det var typ en så här...
00:18:02
På Twitter.
00:18:04
Ja, exakt. Om det var typ en julkalender eller något.
00:18:08
Ja, men då var i alla fall den här singlediv med.
00:18:12
Om det var hela grejen, att du skulle se vad du kunde göra med en div.
00:18:16
Ja, exakt. Nu gick jag in på den senaste webben.
00:18:18
www.a.singlediv.com
00:18:20
Och det är så jävla coola bilder. Här är typ en lightning-kontakt som ser realistisk ut.
00:18:27
Här är det en massa... vad heter det? Snö... vad heter det? Björnar.
00:18:34
Vad heter det? Isbjörnar.
00:18:36
- Ja, isbjörnar.
00:18:39
- Här är det en lampa som blinkar.
00:18:44
Det är sinnessjukt hur mycket coola grejer hon gör på den här sajten faktiskt.
00:18:49
Här är en bokhylla där det åker en liten ficklampa, alltså ljuset från en ficklampa över.
00:18:54
Och sen åker den ner och så ser man ett par ögon i mörkret.
00:18:56
Just det, den där såg jag på Twitter. Den var så jävla cool.
00:19:01
Ja.
00:19:01
Det är oerhört imponerande. Länken ligger såklart i beskrivningen.
00:19:04
Så gå in och kolla på den för den är...
00:19:06
Man blir så jävla imponerad.
00:19:08
Ja, satan.
00:19:09
Men det är också så där, ibland tänker jag att...
00:19:11
Ja, vi alla vet att jag älskar tutorials, så då tänker jag så här "men det här kanske går att bygga?"
00:19:15
Och så går man in och så bara...
00:19:16
Nej...
00:19:18
Nej, nej, det här förstår jag inte. Hejdå!
00:19:23
Det är lite som den här klassiska mimen med "how to draw an owl".
00:19:28
Hur man ritar en uggla.
00:19:30
Och så är det typ "rita två cirklar, en för huvudet och en för kroppen".
00:19:33
Det är steg ett.
00:19:34
Steg två är "rita resten av ugglan".
00:19:37
Och det är också så här...
00:19:40
Då är det liksom så här... Det är tutorialen som har misslyckats.
00:19:43
Om du inte förstår.
00:19:45
Ja, men det är nog inte tutorials, utan det är väl snarare att jag bara går in på CodePens eller sådana grejer och bara blir överväldigad, lite stressad och drar igen helt enkelt.
00:19:57
Stänger ner. Går ut där med livet.
00:19:59
Ja, nämen exakt.
00:20:01
Nej, så jag tycker ändå att, alltså så här, fan vi borde lägga mer tid på CSS.
00:20:07
Jag vet också att han, Josh, som har gjort den där guidance vi pratade om, håller på och gör en CSS-kurs, tror jag.
00:20:15
Som också ser jävligt cool ut, för den verkar vara väldigt interaktiv.
00:20:19
Alltså det vill säga att du typ så här drar i saker för att ändra världen och så kan du liksom säga att okej, men nu är den rätt.
00:20:26
Eller så ändrar du världen så ser du saker som ändras liksom live på skärmen och grejer.
00:20:30
Så den, jag tror jag vill länka redan också i beskrivningen, jag tror inte den har kommit ut än.
00:20:35
Men den ser extremt bra ut för att lära sig grunderna.
00:20:38
För det är där den är ute efter.
00:20:39
Att man ska verkligen förstå grunderna i CSS jämfört med att man slängas in och
00:20:45
sprinklar runt lite flex överallt.
00:20:48
Ja, som du säger, de här grunderna är så coola.
00:20:55
För att jag vet att 2015 så köpte jag Leah Verouws bok, CSS Secrets.
00:21:03
Sen vet jag inte om jag någonsin tog mig igenom hela, men det är väldigt små saker som ibland bara kan generera bråk eller som folk inte orkar fatta, som man bara skiter i det, men som kan ha väldigt stor påverkan.
00:21:21
Jag kommer ihåg specifikt när hon skrev om att "pixlar" eller "m".
00:21:27
Just det.
00:21:28
Och då är det så här, om du har till exempel en knapp som du kan ändra size på,
00:21:34
och du har text på den, då borde du göra så att allt det kan ändras i storlek tillsammans med texten.
00:21:44
Så ändrar du texten så ändrar du storleken på hela knappen,
00:21:47
och inte bara på att ändra texten och då måste du bygga om hela knappen för att få den att passa.
00:21:53
- Ja, exakt.
00:21:54
- Och sådana här små detaljer som man inte alltid tänker på när man sitter där.
00:21:57
"Ska jag använda M, ska jag använda pixlar? Ja, jag sätter pixlar för det är lätt för mig nu."
00:22:02
Men du skulle kunna känna in så mycket på om du bygger bra CSS.
00:22:07
- Ja, verkligen. För det är ju väldigt lätt att man hamnar i.
00:22:09
Typ det vi sitter i nu så har vi inte ett designsystem men vi har ändå satta guidelines.
00:22:14
Allt ska vara på en faktor av åtta, till exempel.
00:22:19
Då löser vi det här problemet med JavaScript egentligen.
00:22:25
Vi använder inte CSS-variabler för det här, utan det här är JavaScript-objekt som vi drar in
00:22:29
till vår palett och vår spacing och allt sånt.
00:22:33
I och med att vi kör CSS in JS med style components också.
00:22:39
Och det gör ju också liksom att det är svårare att göra sådana grejer som du beskriver nu, när man har den satt redan.
00:22:46
Men det är också för att man kanske inte har det tänket från början, att okej, om vi gör en knapp så vill vi att den ska anpassa sig.
00:22:51
Nej, alltså om man verkligen gjorde saker bra av sådana grunder så tror jag man skulle, åh gud vad mycket saker man skulle kunna ha räddat sig själv ifrån.
00:23:02
Men en annan grej som är lite intressant är ju svg-er.
00:23:08
Och jag har suttit och pluggat svg-er och viewports med svg-er i en div och jag löser det fortfarande inte ordentligt.
00:23:23
Men de som kan det kan ju också bli så satans kraftfullt.
00:23:29
Gud ja, jag har också följt lite folk på Twitter.
00:23:32
Typ Sarah Dresner har ju jättemånga bra snack om det.
00:23:36
Exakt. Nej, för det är så jävla coolt.
00:23:39
Och själv fattar jag typ ingenting.
00:23:41
Jag förstår ju idén.
00:23:44
Att om jag gör det här så blir det en liten kurva, och så sätter man ut lite koordinater, och så gör man det.
00:23:49
Men ändå så jävla förvirrad.
00:23:51
Jag byggde ju en konfetti-kanon till min hemsida.
00:23:54
Den är ju SVG.
00:23:56
Och sen animerar jag den med React Spring.
00:23:58
Och det jag gör då är att ändra de här SVG-värdena.
00:24:00
Men det tog så jävla mycket frustration och lång tid.
00:24:05
För att jag fattade inte vad jag gjorde.
00:24:07
Nej.
00:24:08
Alltså jag följde en tutorial för att skapa confetti faktiskt.
00:24:15
I avskrift med bara SVG utan att
00:24:17
ha någon satt från början.
00:24:19
Jag hängde väl med, det var väldigt grundläggande.
00:24:23
Alltså, performance var ju vedervärdig. Det laggade ju med typ 30 konfetti-bitar i min stackars browser.
00:24:30
Någonting var ju fel, helt klart.
00:24:32
Ja, men det blev ändå konfetti.
00:24:34
Ja, jag älskar ju konfetti. Det är det roligaste jag vet.
00:24:38
Det bästa man kan lägga in på alla sidor borde vara konfetti.
00:24:41
Spelar ingen roll om det är en privatsida som min eller om det är arbetsmedlen.
00:24:46
Varum söker efter ett jobb, sprut lite konfetti. Det är perfekt.
00:24:50
Eller?
00:24:51
Jo, grattis, du är ansökt. Jävla sidospår.
00:24:57
Men det känns som att man kan gräva ner sig i CSS ännu mer.
00:25:03
Kanske blir det en CSS del två från oss någon gång framöver.
00:25:07
För det finns ju jävla mycket runt omkring CSS.
00:25:09
Hela den här CSS i "Jag skrev diskussionen" till exempel.
00:25:13
Alla preprocesser som finns, som SAS och LES och allt runt omkring där.
00:25:18
Men det är så oerhört stort.
00:25:20
Men bara att lära sig det grundläggande hjälper ju oavsett hur man implementerar det.
00:25:24
Ja.
00:25:26
Ja, även om du inte lyckats lösa alla tricks och så,
00:25:30
men din mentala bild tror jag bara blir mycket lättare än när du väl sitter där och ska bygga upp det.
00:25:35
Du skulle säkert kunna rensa bort ett par divvar också när du är igång och kan skriva tydligt.
00:25:42
Ja, ja men exakt.
00:25:44
Och sen finns det en diskussion som är semirelevant, hur man ska bli semantisk åt det.
00:25:51
För det är ju också enklare att styla, oftast.
00:25:56
Men vi har ju ett avsnitt där vi pratar accessability, så det kan man ju också gå och lyssna på.
00:26:02
Men allting hänger ju ihop såklart.
00:26:05
Men fortfarande bara lära sig, som du säger, modellerna av hur CSS funkar.
00:26:10
Ja, och sen så blir det väl den här, okej då går man in på det här, sen ska man kanske lära sig de här grundläggande sakerna också kring performance och CSS.
00:26:20
För det är också en ganska stor grej. Det var ett snack på Nordic IS för ytterligare nog mer år sedan, var det typ två, tre år sedan eller någonting, där det var en presentation på när saker i CSS faktiskt gör i den här upprättsningstyckeln.
00:26:37
Till exempel att 2D-transformationer kanske browsern försöker ta hand om, och det är inte alls lika effektivt som om du kör 3D-transformationer, för då trycker du ner det på GPUn tror jag.
00:26:47
Och om du gör saker innan paint så kommer det att vara mycket tyngre än om du gör det efter.
00:26:53
Så det finns så mycket teknik där bakom också.
00:26:57
Vilket också är spännande, för de här C++-byggfelen man kan få ibland om en SAS ligger fel indikerar väl också på att det inte bara är slit och släng, ingen riktig kod.
00:27:11
Det är tung performance-kod bakom det.
00:27:16
Ja, men exakt.
00:27:17
Jag vet inte varför jag brinner så mycket för att försvara CSS.
00:27:22
Jag tycker det är superhärligt.
00:27:24
Jag har liksom inte ens en sån kärleksfull relation till CSS.
00:27:28
I början av snittet sa jag att du var verkligen en, jag kommer inte ihåg exakt vad jag sa, men en förkämpare för CSS.
00:27:33
Och du bara "Äh, det är jag väl inte".
00:27:37
Det har varit ganska många brinnande tal här för CSS.
00:27:42
Ja, jag tror inte så mycket att jag brinner för CSS som att jag brinner för att jag tycker att attityden är tråkig och kanske lite skadlig, tror jag.
00:27:49
Ja, verkligen. Det kan vi verkligen avrunda på. Om man lyssnar på det här och känner med sig att man själv bara, ja, jag kanske hatar lite mycket på CSS.
00:27:58
Vilket, alltså, erkänna att det har jag också gjort. Bara tänka ett varv till att det kanske inte är så illa som man tänker.
00:28:08
Det är bara en kulturgrej att man har lärt sig att det är dåligt.
00:28:14
Så med det...
00:28:18
Får vi tacka för oss?
00:28:20
Får vi det vi hade den här gången?
00:28:23
Tror du det är ett nytt år nu?
00:28:25
Kan vara så att den här kommer innan nyår, vi får se.
00:28:28
Det är inte omöjligt.
00:28:30
Det gick jättedåligt då.
00:28:32
Men i alla fall, tack så mycket för att ni lyssnade.
00:28:34
Vill ni något som vanligt så finns vi på Twitter.
00:28:36
Framförallt Anton hon hänger där mitt i all drama.
00:28:39
Reception på iTunes, säger jag ju. Ni vet, sådana saker.
00:28:43
Så hörs vi nästa avsnitt.
00:28:45
Det gör vi.
00:28:46
Hej!
00:28:47
Bye bye!
00:28:48
[Musik spelas]
Tillbaka upp