Att lösa Livets Problem med CSS

0
11

Eller: När allt du behöver är en CSS-hammare ser världen som en CSS-spik.

När jag hör en mycket snäll kommentar som, “Ja, som representerar tech området!” som svar på min ren CSS art, får jag en skarp känsla av panik.

Som att många människor som arbetar på UIs för en levande, jag har svårt att tillämpa den “tech” – term till mig själv utan att känna sig som ett bedrägeri. Impostor syndrome är en svår sak att skaka. En front-end-specialist? Åh, du menar att saker som egentligen inte koden? Som förstärkare upp känslan från bedragare till skurk.

Även om 90% av mitt dagliga arbete kretsar kring JavaScript, jag känner det som om de “tech” – märke är en glänsande pokal som jag girigt ryckte någon mer förtjänta. Som om det är namnlös, svältande datavetenskap grads ute och jag stjäla ramen till höger ut ur deras munnar.

Ta till exempel det här fallet att dator-vetenskapligt skolade människor är förmodligen bekant med:

CS Naturligtvis Problem: Skriv ett manus som sorterar sedan slumpmässig detta dataset N gånger, men för varje 8: e Q tryck på 12 träd som stackar, köer void flip flop och du don ‘t stop rockin’ tills returnerar summan av resultaten 4x + 3y.

Mitt förslag: (12 timmar och åtta liter kaffe senare) Gjort! Här är 1.200 linjer och vackert formaterad kod! Det är fyrtio-tre loopar, trettio-två if/else villkor, och åttio-tre rader av kommentarer eftersom jag hålla att gå vilse i den filen — men jag har uppnått den exakta önskat resultat!

CS Naturligtvis Svara: kan du Använda tre linjer av rekursion.

Mitt svar: …%#@& du.

En överdrift, men det är bra att regelbundet ödmjuk som. Det hjälper dig att växa som programmerare, problemlösare, och mänskliga. Plus, det förbereder dig för verkliga scenarion i din karriär där du regelbundet kommer att stöta på intressanta utmaningar som kräver lite kreativt tänkande.

När det kommer till CSS sidan av saker och ting, ingen arbetsgivare någonsin kommer att be er att ta fram en detaljerad måleriska CSS konstverk. Om de gör det, bör du omedelbart rapportera det som trakasserier till HR. Men det är väldigt vanligt att man har en liten och ibland ovanliga begäran. En som kanske inte har en självklar lösning direkt.

“Tech-free CSS — med sin uppenbara brist på programmering funktioner — kan inte omedelbart kommer att tänka på när det ges en sådan utmaning. Men gör inga misstag, det kan vara en av de mest värdefulla verktygen i din algoritm arsenal! Till exempel:

CSS-Kursen Problem: En ansvarsfriskrivning meddelande behöver dyka upp i bild som en varning när en användare klickar på en viss inmatningsfältet.

Förslag: Piece of cake! Vi använder vår trogna vän JavaScript för att utlösa ett klick eller fokusera händelse på input-elementet. Då vi laddar disclaimer mall. Då vi gör ett Ajax-anrop för innehållet. När vårt Löfte() är löst kan vi lägga till elementet på sidan och hitta där du vill infoga det genom att hitta händelsen.målet är överordnat element. Efter ansvarsfriskrivning är laddade, vi måste se till att vi har behandlat en annan klicka på händelsen på den faktiska disclaimer sig att växla ut av det. När vi har växlas ut av det, vi förstöra elementet. Om ingången är klickade igen, vi upprepa denna process.

CSS-Kursen Lösning: ingång:focus + .ansvarsfriskrivning { display: block; }

Svar: …%#@& off.

Igen, det är en överdrift (och världens minst effektiva JavaScript-lösning), men det är bara en liten överdrift. Jag ser dessa typer av förslag som läggs sätt mer ofta än du förväntar dig. Att kunna ge löjligt snabba lösningar för att vad har länge varit ansett som ett av långvariga problem med JavaScript? Det är ett av de sätt på vilka CSS-tillåter mig att känna mig som en master of tech.

Detta är bara en av många saker som jag älskar med CSS. Den begränsade uppsättning regler är exakt vad som gör det så kul. Du inte förväntar dig CSS för att uppfylla alla dina behov, vilket är vad som gör det hela mer givande när du till slut hitta ett sätt som kan det.

Nu, säga att det är en tuff utmaning. Du blir ombedd att genomföra denna form i webbläsaren:

Förslag 1: “Det finns ingen “omvänd-border-radius” egendom för att skapa denna form i CSS, så det är inte möjligt. Bara bädda in en bild. Duh.”

Svar 1: Okej bra, inte lära sig CSS för alla jag bryr mig.

Ingen kom tillbaka! Jag vill att du ska lära dig.

Det är sant att ingen kommer att straffa dig för att använda en bild. Det finns inga CSS polisen tillämpa denna regel. Fan, det finns inte ens någon datavetenskap polisen stoppar dig från att använda en fruktansvärd miljarder-line algoritm istället för ett vackert enkel rekursiv. Men om det är någon idé till att vara delad mellan CSS och CS det är att “inte möjligt” är knappast svaret.

Så låt oss prova en brute-force-metoden, ska vi?

Förslag 2: Börja med en svart rektangel, då notch ut sidorna med två gränsen-radiused <div> – element som matchar den vita bakgrundsfärgen, som så:

Svar 2: Okej! Nu har vi kommit någonstans. Formen är på väg tillsammans. Men vad händer om bakgrunden är varierande? Eller en lutning? Eller en bild? Hur skulle det se ut?

Hm. Inte längre ser ganska så trevlig. Så hur vi tillåter vår naturliga bakgrunden till att lysa igenom, men ändå behålla en snett-inåt-form — något som CSS är inte direkt byggda för att stödja?

Förslag 3: Håll rektangeln. Hålla böjda divar. Men inte fylla rektangeln med färg, och fyller inte den böjda divs med färg heller. I stället sprida den svarta färgen utanför den böjda divs, med hjälp av box-shadow. Rektangeln kommer helt enkelt behöver en overflow: hidden; att hålla box-shadow färg som finns inom dess gränser.

Svar 3: Bra gjort! Vackra!

Ovanstående teknik som har beskrivits i den ännu bättre i detalj Ana Tudor utmärkt inlägg på öste hörn. Och det är ett utmärkt koncept för att hålla i åtanke när du presenteras med “inte möjligt med CSS” problem. Det är en som jag älskar att använda när man skapar konst.

Ta till exempel denna del av en av mina CSS-målningar:

Den mänskliga hals tyvärr inte brukar komma ett bekvämt förpackad i en perfekt rektangulär form. Men HTML gör, så det är vad vi har att arbeta med.

Men vänta, är inte det neck-formen är ganska lik den kurviga svart form som vi beskrivit ovan?

Japp, det hela började med att en stor rektangel. I detta fall, vårt yttre-böjda divs bara användas för en mjukare blandning på deras box-shadow.

Utanför jobbet, jag fortsätter att komma tillbaka till CSS för konstnärlig inspiration.

Eftersom något om dessa begränsningar bara samtal till mig. Jag vet att jag inte är ensam när jag säger att en rigid uppsättning restriktioner är den bästa katalysator för kreativitet. Total konstnärlig frihet kan vara förlamande koncept.

Som ibland kan vara fallet med programmering. Om du har den mest kraftfulla programmeringsspråk i världen till ditt förfogande, det börjar kännas naturligt att du bör ha några svårigheter att någon programmering för att lösa problem. Med alla dessa fantastiska verktyg erbjuder otaliga lösningar för att lösa samma problem, är det inte konstigt att vi ibland att frysa, med ett överflöd av information.

Visst, CSS kan ses som att inte vara en “riktig” del av tech stack. Jag skulle inte ens argumentera mot det. Let ‘ s face it, ren CSS är inte om rekursion eller lagring av data eller databas-sökning. Dess primära syfte är verkligen för prettification — som inte precis hjälper stigmatisering av front-enders att inte vara “riktiga” tekniker eller programmerare.

CSS har aldrig gjort någon fet krav eller löften. Det har bara erbjöd hjälp, och det bara visar sig att dess hjälp kan vara rent heroiska.

Om du är en front-ender som har att ta itu med ett gäng av DevOps folk hånar deras CSS, bara vänta och se vad svaret är när du smyger en body { display: none; } på produktion. Vi får se vem som skrattar då!*

* De kommer fortfarande att vara de skrattar, eftersom du kommer att bli avskedad. Du behöver inte göra detta.