Het oplossen van de Problemen van het Leven met CSS

0
36

Of: Wanneer alles wat je hebt is een CSS hamer, de wereld ziet eruit als een CSS nagel.

Als ik hoor een perfect mooi opmerkingen als “Ja, het vertegenwoordigen van de tech veld!” in antwoord op mijn pure-CSS-art, krijg ik een scherp gevoel van paniek.

Zoals veel mensen die werken op UIs voor een woon, heb ik moeite met het toepassen van de “tech” term voor mezelf, zonder het gevoel van een fraude. Impostor syndrome is een moeilijk ding om te schudden. Een front-end specialist? Oh, bedoel je de dingen die niet echt code? Die versterkers van het gevoel van de bedrieger aan schurk.

Hoewel 90% van mijn dagelijks werk draait rond JavaScript, ik heb het gevoel alsof de “tech” – label is een glimmende trofee die ik gretig greep van iemand meer verdient. Als er zijn naamloos, honger computer science gradiënten die er zijn en ik ben het stelen van de ramen uit hun mond.

Neem bijvoorbeeld dit scenario dat computer-wetenschappelijk geschoolde mensen zijn waarschijnlijk bekend met:

CS Cursus Probleem: het Schrijven van een script dat sorteert dan een willekeurige volgorde deze dataset N keer, maar voor elke 8e Q druk 12 bomen, stapels, wachtrijen void flip-flop en u don ‘t stop rockin’ tot het retourneren van de som van de resultaten 4x + 3y.

Mijn voorstel: (12 uur en acht liter koffie later) Gedaan! Hier zijn 1.200 lijnen van mooi opgemaakte code! Er zijn veertig-drie lussen, twee en dertig if/else-voorwaarden, en eighty-three lines of opmerkingen, omdat ik blijf verdwalen in het bestand, maar wat ik heb bereikt, de exacte gewenste resultaat!

CS Cursus Antwoord: Gebruik drie lijnen van recursie.

Mijn reactie: … % # @ & .

Een overdrijving, maar het is handig om regelmatig vernederd als dat. Het helpt je groeien als een programmeur, probleem-oplosser, en een mens. Plus, het bereidt je voor op de echte wereld scenario ‘ s in je carrière waar je regelmatig over interessante uitdagingen die vragen om een beetje creatief te denken.

Als het gaat om de CSS-kant van de dingen, geen werkgever ooit zal u vragen om een gedetailleerde schilderkunstige CSS kunstwerk. Als ze dat doen, moet je onmiddellijk melden dat intimidatie HR. Maar het is heel gebruikelijk om een klein en soms ongebruikelijke verzoeken. Een die misschien niet een voor de hand liggende oplossing meteen.

De “tech-gratis” CSS — met zijn opvallende gebrek van de programmering, functies — misschien niet onmiddellijk voor de geest komen wanneer een dergelijke uitdaging. Maar vergis je niet, het kan een van de meest waardevolle instrumenten in uw algoritme arsenaal! Bijvoorbeeld:

CSS Cursus Probleem: Een disclaimer boodschap moet pop-up in beeld als een waarschuwing wanneer een gebruiker op een bepaalde input veld.

Voorstel: Fluitje van een cent! We maken gebruik van onze trouwe vriend JavaScript te activeren klik op of focus evenement op het input element. Dan laden we de disclaimer sjabloon. Vervolgens maken we een Ajax-call voor de inhoud. Zodra onze Belofte() is opgelost, we toevoegen van het element op de pagina en zoek de plaats waar het door de manier van het vinden van het evenement.doel van het bovenliggende element. Na de disclaimer is geladen, moeten we ervoor zorgen dat we hebben behandeld een andere gebeurtenis click op de werkelijke disclaimer te schakelen. Hebben we eenmaal uitgeschakeld, dan vernietigen we het element. Als de input wordt geklikt weer, we herhalen dit proces.

CSS Cursus Oplossing: input:focus + .disclaimer { display: block; }

Reactie: …%#@& uit.

Nogmaals, het is een overdrijving (en de wereld van de minst efficiënte JavaScript-oplossing), maar het is slechts een lichte overdrijving. Ik zie dat soort voorstellen wordt in gebruik genomen manier vaker dan je zou verwachten. Het kunnen aanbieden van een belachelijk snelle oplossingen tot wat lang is gedacht als lange JavaScript problemen? Dat is één van de manieren waarop CSS stelt me in staat om te voelen als een meester van de tech.

Dit is slechts één van de vele dingen die ik leuk vind over CSS. De beperkte set van regels is precies wat maakt het zo leuk. Je verwacht niet dat CSS te voldoen aan al uw wensen, dat is wat maakt het nog meer de moeite waard als je uiteindelijk het vinden van een manier dat het kan.

Nu, dat er een design challenge. U wordt gevraagd om de uitvoering van deze vorm in de browser:

Voorstel 1: “Er is geen “reverse-border-radius” eigendom te maken dat vorm in CSS, dus dat is niet mogelijk. Slechts een afbeelding insluiten. Duh.”

Antwoord 1: Okay fine, niet leren CSS for all I care.

Nee alsjeblieft, kom terug! Ik wil dat je om te leren.

Het is waar dat niemand zal je straffen voor het gebruik van een afbeelding. Er zijn geen CSS politie de handhaving van deze regel. De hel is er niet eens een computer science politie houdt je van het gebruik van een verschrikkelijke miljard-line algoritme in plaats van een eenvoudige recursieve. Maar als er een concept worden gedeeld tussen CSS en CS het is “niet mogelijk” is bijna nooit het antwoord.

Dus laten we proberen om een brute-force methode, zullen we?

Voorstel 2: Start met een zwarte rechthoek, dan notch uit de zijkanten met twee border-afgeronde <div> – elementen die overeenkomen met de witte kleur van de achtergrond, zoals:

Antwoord 2: In Orde! Nu krijgen we ergens. De vorm is samen te komen. Maar wat als de achtergrond variërend? Of een verloop? Of een beeld? Hoe zou die eruit zien?

Hm. Niet langer ziet er zo mooi uit. Dus hoe doen we dat onze natuurlijke achtergrond te schijnen, terwijl het toch een aflopende-actieve vorm — iets dat CSS niet native gebouwd te ondersteunen?

Voorstel 3: Houd de rechthoek. Houd de gebogen divs. Maar niet de rechthoek vullen met kleur, en geef niet de gebogen divs met kleur. In plaats daarvan, verspreiding van de zwarte kleur buitenkant van de gebogen divs, box-shadow. De rechthoek zal moeten gewoon een overflow: hidden; box-shadow-color opgenomen binnen haar grenzen.

Antwoord 3: Goed gedaan! Mooi!

De bovenstaande techniek is beschreven in nog meer detail in Ana Tudor is een uitstekende post op geschept hoeken. En is het een uitstekend concept om in gedachten te houden wanneer gepresenteerd met “niet mogelijk met CSS” problemen. Het is er één die ik graag gebruik van maken bij het maken van kunst.

Neem bijvoorbeeld dit gedeelte van één van mijn CSS schilderijen:

De menselijke nek helaas komt meestal niet handig verpakt in een mooie rechthoekige vorm. Maar HTML is, dus dat is wat we hebben om mee te werken.

Maar wacht, is dat niet de nek-vorm vrij vergelijkbaar met de ronde zwarte vorm die we hierboven beschreven?

Yep, het begon allemaal met een grote rechthoek. In dit geval, ons naar buiten gebogen divs slechts gebruik gemaakt van een zachter mengen op hun box-shadow.

Buiten het werk, ik blijf terug komen naar CSS voor de artistieke inspiratie.

Omdat iets over die beperkingen alleen oproepen naar mij. Ik weet dat ik niet alleen ben als ik zeg dat een rigide set van beperkingen is de beste katalysator voor creativiteit. De totale artistieke vrijheid kan een verlammende concept.

Dat kan soms het geval zijn met programmeren. Als u beschikt over de meest krachtige programmering talen in de wereld tot uw beschikking, het begint er op te lijken dat natuurlijk dat je dan moet hebben geen moeite met het oplossen van eventuele programmering probleem. Met al deze geweldige tools te bieden talloze oplossingen voor hetzelfde probleem, het is geen wonder dat we soms bevriezen met een overaanbod aan informatie.

Zeker, CSS kan worden beschouwd als niet zijnde een “echte” onderdeel van de tech-stack. Ik zou niet eens betogen tegen dat. Let ‘ s face it, pure CSS is niet over recursie of opslag van gegevens of database-query. Het primaire doel is inderdaad voor prettification — die niet precies te helpen het stigma van front-enders niet “echt” techneuten of programmeurs.

CSS nooit een vet claims of beloften. Het heeft alleen aangeboden hulp, en het blijkt dat de bijstand kan worden ronduit heroïsche.

Als je een front-ender die heeft te maken met een stelletje van DevOps mensen spotten met hun CSS, gewoon wachten en zien wat de reactie is als je stiekem een body { display: none; } op de productie. We zullen zien wie het lachen!*

* Ze zullen nog steeds degenen zijn die lachen omdat u zal worden ontslagen. Alsjeblieft doe dit niet.