Lösen die Probleme des Lebens mit CSS

0
13

Oder: Wenn alles, was Sie haben, ist ein CSS-hammer, die Welt sieht aus wie ein CSS-Nagel.

Immer, wenn ich höre, ein perfekt schöne Kommentar wie, “Ja, die die tech – Bereich!” in der Antwort auf meine pure-CSS-art, bekomme ich ein scharfes Gefühl der Panik.

Wie viele Menschen arbeiten an UIs für ein Leben, ich habe Schwierigkeiten die Anwendung der “tech” – Begriff selbst, ohne das Gefühl wie ein Betrüger. Hochstapler-Syndrom ist eine harte Sache zu schütteln. Ein front-end-Spezialist? Oh, du meinst das Zeug, das ist nicht wirklich code? Dass amps bis das Gefühl vom Hochstapler zum Bösewicht.

Obwohl 90% meiner täglichen Arbeit dreht sich um JavaScript, habe ich das Gefühl, als wenn die “tech” – label ist eine glänzende Pokal, den ich gierig entrissen jemand mehr verdient. Als ob es namenlose, hungern informatik-Absolventen gibt, und ich bin der Diebstahl-ramen aus dem Mund.

Nehmen Sie zum Beispiel das Szenario, dass die computer-Wissenschaft geschulte Menschen sind wahrscheinlich vertraut mit:

CS Kurs Problem: ein Skript Schreiben, das sortiert dann randomisiert diesem Datensatz N-mal, aber für alle 8. Q print 12 Bäume, stacks, queues void flip-flop, und Sie don ‘T stop rockin’ till Rücksendung der Summe der Ergebnisse 4x + 3y.

Mein Vorschlag: (12 Stunden und acht Liter Kaffee später) Fertig! Hier werden 1.200 Linien der schön formatierten code! Es sind vierzig-drei Schleifen -, dreißig-zwei if – /else-Bedingungen, und achtzig-drei Zeilen Kommentare, weil ich immer verloren in der Datei, aber ich habe erreicht exakt die gewünschte Ergebnis!

CS Natürlich auch zu Beantworten: drei Zeilen der Rekursion.

Meine Antwort: …%#@& Sie.

Eine übertreibung, aber es ist hilfreich, regelmäßig gedemütigt ähnlich. Es hilft Ihnen, zu wachsen wie ein Programmierer, Problemlöser und Menschen. Plus, es bereitet Sie für real-world-Szenarien, in Ihrer Karriere, wo Sie regelmäßig über interessante Herausforderungen, die erfordern ein wenig kreatives denken.

Wenn es um die CSS-Seite der Dinge, kein Arbeitgeber wird jemals Fragen Sie in der Erstellung eines detaillierten malerischen CSS-Kunstwerk. Wenn Sie das tun, sollten Sie wirklich sofort melden, dass als Belästigung zu HR. Aber es ist sehr üblich, um eine kleine und manchmal ungewöhnliche Anfrage. Einer, der möglicherweise nicht haben eine offensichtliche Lösung sofort.

Die “tech-free” CSS — mit seinem eklatanten Mangel an Programmier-Funktionen möglicherweise nicht sofort in den Sinn kommen, wenn Sie angesichts einer solchen Herausforderung. Aber keinen Fehler machen, kann es eines der wertvollsten Werkzeuge in Ihrem Algorithmus arsenal! Zum Beispiel:

CSS Problem Natürlich: Ein Haftungsausschluss Nachricht benötigt, um pop-up in den Blick, als eine Warnung, wenn ein Benutzer klickt auf einen bestimmten input Feld.

Vorschlag: Stück Kuchen! Wir nutzen unser treuer Freund von JavaScript-trigger ein Klick-oder Fokus-event auf dem input-element. Dann laden wir die Haftungsausschluss Vorlage. Dann machen wir einen Ajax-Aufruf für den Inhalt. Sobald unser Versprechen() behoben ist, werden wir Anhängen, das element auf der Seite und finden Sie, wo stecken Sie es durch die Suche nach der Veranstaltung.target parent-Elements. Nach dem disclaimer geladen wird, müssen wir sicherstellen, dass wir haben, behandelt ein weiteres click-Ereignis auf die tatsächliche Haftungsausschluss selbst zu wechseln aus. Haben wir einmal ein-und ausgeschaltet aus, zerstören wir das element. Wenn der Eingang wieder geklickt, wir wiederholen diesen Prozess.

CSS-Lösung Natürlich: input:focus + .Haftungsausschluss { display: block; }

Antwort: …%#@& ab.

Wieder, es ist eine übertreibung (und den am wenigsten effizienten JavaScript-Lösung), aber es ist nur eine leichte übertreibung. Ich sehe diese Art von Vorschlägen zum Einsatz Weise oft mehr, als Sie erwarten würden. Sorgen zu können, lächerlich schnelle Lösungen, um das, was schon lange gedacht, wie lange, JavaScript-Probleme? Das ist eine der Möglichkeiten, in denen CSS ermöglicht es mir, mich zu fühlen wie ein master of tech.

Dies ist nur eines der vielen Dinge, die ich Liebe CSS. Die begrenzten Satz von Regeln ist genau das, was macht es so Spaß. Sie nicht erwarten, dass CSS zu erfüllen alle Ihre Bedürfnisse, das ist, was macht es umso mehr lohnend, wenn Sie am Ende einen Weg zu finden, der es kann.

Nun, sagen, es ist eine design-Herausforderung. Sie sind gebeten, die Umsetzung dieser Form im browser:

Vorschlag 1: “Es gibt kein “reverse-border-radius” – Eigenschaft zu erstellen, die Form in CSS, also ist das nicht möglich. Nur ein Bild einbetten. Duh.”

Antwort 1: Okay, in Ordnung, nicht CSS zu lernen für alle, die ich Pflege.

Nein, bitte komm zurück! Ich möchte, dass Sie lernen.

Es ist wahr, dass niemand Sie zu bestrafen, für die Verwendung eines Bildes. Es gibt keine CSS-Polizei für die Durchsetzung dieser Regel. Hölle, es gibt nicht einmal eine informatik-Polizei hindert Sie mit einem schrecklichen Milliarden-line-Algorithmus statt einer schön einfachen rekursiven. Aber wenn es ein Konzept geteilt werden zwischen CSS und CS es ist “nicht möglich” ist kaum jemals die Antwort.

Versuchen wir also, uns ein brute-force-Methode, sollen wir?

Vorschlag 2: Beginnen Sie mit einem schwarzen Rechteck, dann notch aus den Seiten mit zwei border-gerundete <div> – Elemente, die mit der weißen Hintergrundfarbe, etwa so:

Antwort 2: In Ordnung! Jetzt bekommen wir irgendwo. Die Form kommt zusammen. Was aber, wenn der hintergrund variiert? Oder einen Farbverlauf? Oder ein Bild? Wie würde das Aussehen?

Hm. Sieht nicht mehr ganz so schön. Also, wie machen wir es zulassen, dass unsere natürlichen hintergrund durchscheinen, während immer noch ein schräg-nach innen in Form — etwas, das CSS ist nicht nativ eingebaut?

Vorschlag 3: Halten Sie das Rechteck. Halten Sie die gebogene divs. Aber nicht füllen Sie das Rechteck mit Farbe, und nicht das füllen der gekrümmten divs mit Farbe. Stattdessen verteilt die schwarze Farbe, die außerhalb des gekrümmten divs, mit box-shadow. Das Rechteck muss einfach ein overflow: hidden; zu halten, die box-shadow-color enthalten, innerhalb seiner Grenzen.

Antwort 3: Gut gemacht! Schön!

Die oben genannten Technik beschrieben wurde, auch in noch mehr detail in die Ana Tudor ausgezeichnete post auf scooped Ecken. Und es ist ein ausgezeichnetes Konzept im Auge zu behalten, wenn Sie mit vorgestellt “nicht möglich mit CSS” Probleme. Es ist eine, die ich Liebe, zu verwenden beim erstellen von Kunst.

Nehmen Sie zum Beispiel dieses Angebot von einer meiner CSS-Gemälde:

Der menschliche Hals ist leider in der Regel nicht kommen praktisch verpackt in eine perfekte rechteckige Form. Aber HTML macht, so das ist, was wir haben, mit zu arbeiten.

Aber warten Sie, ist nicht, dass die Hals-Form, die ziemlich ähnlich wie die kurvige schwarze Form, die wir oben beschrieben?

Ja, es begann alles mit einem großen Rechteck. In diesem Fall ist der nach außen Gebogenen divs nur ein weicher überblendung auf Ihre box-shadow.

Außerhalb der Arbeit, ich komme immer wieder zu CSS für die Künstlerische inspiration.

Weil etwas über diese Einschränkungen nur Anrufe zu mir. Ich weiß, ich bin nicht alleine wenn ich sage, dass eine starre Reihe von Einschränkungen, ist der beste Katalysator für Kreativität. Totale Künstlerische Freiheit, kann eine lähmende Konzept.

Das kann manchmal der Fall sein, die mit der Programmierung. Wenn Sie der mächtigsten Programmiersprachen der Welt zur Verfügung, es beginnt zu scheinen, natürlich, dass sollte man dann keine Schwierigkeiten haben, die Lösung Programmier-problem. Mit all diesen erstaunlichen Werkzeuge bietet unzählige Lösungen, um dasselbe problem zu lösen, ist es kein Wunder, dass wir manchmal frieren Sie mit Informationen überladen.

Sicher, CSS gedacht werden kann, nicht als ein “echter” Bestandteil des tech-stack. Ich würde auch nicht argumentieren gegen das,. Let ‘ s face it, reinem CSS nicht über Rekursion oder Daten-storage-oder Datenbank-Abfragen. Sein Hauptzweck ist in der Tat für prettification — was nicht genau helfen, das stigma der front-enders nicht als “echte” Technik-Freaks oder Programmierer.

CSS noch nie einen gewagten Behauptungen oder Versprechungen. Es hat lediglich Unterstützung angeboten, und es stellt sich nur heraus, dass seine Hilfe kann geradezu Heroisch.

Wenn Sie einen front-ender, der muss sich mit einem Bündel von DevOps Leute Spott, Ihre CSS, nur warten und sehen, was die Reaktion ist, wenn Sie schleichen einen body { display: none; } auf die Produktion. Wir werden sehen, wer lacht dann!!!*

* Werden Sie immer noch werden die, die lachen, weil Sie gefeuert wird. Bitte tun Sie das nicht.