Ich hatte so viel Spaß bei An Event Apart Seattle! Es ist schön, sich zurückzulehnen und die Botschaften einer Vielzahl solch super schlauer Leute aufzusaugen.
Ich habe keine umfassenden Notizen zu jedem Vortrag gemacht, aber ich habe kleine Momente notiert, die mein Gehirn zum Flimmern brachten. Ich werde sie hier posten! Bloggen macht Spaß! Nochmals, beachte, dass **diese Momente nicht unbedingt der Hauptpunkt der Präsentation des Sprechers oder eine Reflexion der gesamten Reise** des Themas waren – es sind kleine, mikro-gedächtniswürdige Momente, die mir aufgefallen sind.
Jeffrey Zeldman erwähnte die Lese-Apps Instapaper (immer noch vorhanden!) und Readability (nicht mehr vorhanden… aber die Technologie ist in die native Browsertechnologie eingeflossen). Er nannte sie eine Vorhut (cooles Wort!), was bedeutet, dass sie uns warnten, dass unsere Praktiken die Nutzer vergraulten. Das erwies sich als ziemlich wahr, da sie immer noch existieren und nun von neuen Technologien wie AMP und nativem Lesemodus begleitet werden, die gegen dieselben Probleme kämpfen.
Margot Bloomstein machte einen Punkt über Inkonsistenz, die unsere Fähigkeit zur Bewertung und zum Aufbau von Vertrauen untergräbt. Sicherlich anwendbar auf Websites, aber auch auf einen bestimmten Präsidenten der Vereinigten Staaten.
Sarah Parmenter teilte einen eindrucksvollen Moment, in dem sie durch die Macht der E-Mail Bloom and Wild, einen Blumenversandservice, kontaktierte, um ihnen mitzuteilen, dass eine bestimmte Art von E-Mail, die sie versendeten, ihrer Meinung nach, wenn auch unbeabsichtigt, sehr unsensibel sei. Sarah wollte dies ohnehin als Beispiel anführen, aber am Tag zuvor hat Bloom and Wild tatsächlich ihren Rat befolgt und ein spezialisiertes Opt-out-System implementiert.
Das machte nicht nur Sarah glücklich, dass ein Unternehmen seine Systeme tatsächlich ändern konnte, um sensibler auf seine Kunden einzugehen, sondern es machte eine ganze Menge Leute glücklich, wie eine Flut von positiven Tweets danach zeigte. Es stellt sich heraus, dass deine Kunden es mögen, wenn du, weißt du, an sie denkst.
Eric Meyer behandelte eine der unerklärlichsten Dinge an Pseudo-Elementen: Wenn du content: url(/icons/icon.png); setzt, kannst du die width/height buchstäblich nicht steuern. Es gibt Umgehungsmöglichkeiten, insbesondere durch die Verwendung eines Hintergrundbildes anstelle dessen, aber es ist etwas verwirrend, dass es eine Möglichkeit gibt, ein Bild zu einer Seite hinzuzufügen, ohne die Größe ändern zu können.
Buchstäblich der gesamte Vortrag handelte von Pseudo-Elementen, was ich irgendwie großartig fand, da ich dasselbe vor acht Jahren gemacht habe. Wenn du auf der Suche nach Nostalgie bist (und mit ein paar peinlichen Momenten einverstanden bist), hier ist das PDF.
Eric zeigte auch eine Demo, die einen wirklich coolen Effekt beinhaltete, der aussieht wie ein Rand, der von dick zu dünn und wieder zu dick geht, was im Web nicht wirklich einfach zu machen ist. Er benutzte ein Pseudo-Element, aber hier ist es als <hr>-Element
Siehe den Pen
CSS Thick-Thin-Thick Line von Chris Coyier (@chriscoyier)
auf CodePen.
Rachel Andrew hatte eine interessante Art, über Flexbox zu sprechen. Um es zu paraphrasieren
Flexbox ist nicht die Layout-Methode, die du denkst. Flexbox betrachtet einige unterschiedliche Dinge und liefert eine Art vernünftiges Layout. Jetzt, da Grid da ist, ist es viel üblicher, dieses zu verwenden, um viel expliziter zu sein, was wir mit dem Layout machen. Nicht, dass Flexbox nicht extrem nützlich wäre.
Rachel wies regelmäßig darauf hin, dass wir in der Webentwicklung nicht wissen, wie hoch die Dinge sind, was einfach so, so wahr ist. Es war schon immer so. Je früher wir das akzeptieren, desto besser werden wir dran sein. Ein Großteil unserer Arbeit beschäftigt sich mit Überlauf.
Rachel brachte ein Konzept auf, das für mich neu war, in dem Sinne, dass es einen offiziellen Namen hat. Das Konzept ist "Datenverlust" durch CSS. Zum Beispiel kann das Ausrichten von etwas auf eine bestimmte Weise dazu führen, dass einige Inhalte visuell verborgen und völlig unerreichbar werden. Stellen Sie sich einige Kästen wie diese vor, die in Flexbox mit Zentrierung eingestellt sind
Kein "Datenverlust" dort, weil wir alles lesen können. Aber nehmen wir an, wir haben mehr Inhalt in einigen von ihnen. Wir können niemals Höhen kennen!
Wenn dieses Element zum Beispiel oben auf einer Seite wäre, würde keine Scrollleiste ausgelöst werden, da es sich gegenüber der Scrollrichtung befindet. Wir hätten "Datenverlust" dieses Textes
Wir haben jetzt Ausrichtungsschlüsselwörter, die dabei helfen. Zum Beispiel können wir immer noch versuchen, zu center, aber wir können uns selbst retten, indem wir safe center verwenden (unsafe center ist der Standard)
Rachel erwähnte auch, dass Überlappung etwas ist, das Grid besser kann. Hier ist eine ziemlich schlechte Nachbildung dessen, was sie gezeigt hat
Siehe den Pen
Overlapping Figure with CSS Grid von Chris Coyier (@chriscoyier)
auf CodePen.
Ich hatte irgendwie gehofft, das tun zu können, ohne so explizit zu sein, wie ich es dort bin, aber das ist so nah, wie ich herankam.
Jen Simmons zeigte uns eine Menge verschiedener Szenarien, die sowohl Grid als auch Flexbox beinhalten. Sie machte einen sehr klaren Punkt daraus, dass ein Grid-Element ein Flexbox-Container sein kann (und umgekehrt).
Vielleicht der denkwürdigste Teil ist, wie ehrlich Jen darüber war, wie wir zu den Layouts kommen, die wir anstreben. Es ist eine Menge des Spielens mit den möglichen Werten und etwas Ausprobieren und Fehler. Glückliche Zufälle im Überfluss! Aber es gibt viel über die verschiedenen Größenwerte und Platzierungsmöglichkeiten von Grid zu wissen, also je mehr du weißt, desto mehr kannst du spielen. Beim Spielen sind die Layout-Tools in Firefox DevTools deine beste Wahl.
gap wird großartig sein.Es gab einen lustigen Moment in Una Kravets' Vortrag über das Brainstorming der schlechtesten möglichen Ideen.
Die Idee ist, dass, obwohl Brainstorming-Sitzungen urteilsfrei sein sollen, sie es nie sind. Schlechte Ideen sollen schlecht sein, also ist das Schlimmste, was du tun kannst, eine gute Idee zu haben. Noch besser, mit guten Ideen anzufangen, ist problematisch, da es leicht ist, sich zu früh an eine Idee zu binden, während schlechte Ideen mehr Freiheit bieten, durch den Ideenraum zu springen und auf bessere Ideen zu landen.
Scott Jehl erwähnte eine faszinierende Idee, bei der man die Vorteile des Inline-Codes und des Cachings von Dateien gleichzeitig erzielen kann. Das ist nützlich für Dinge, die wir gewohnt sind, inline zu sehen, wie z. B. Critical CSS. Aber weißt du, was auch großartig zum Inline-Einbinden ist? SVG-Iconsysteme. Scott behandelte die Idee in seinem Vortrag, aber ich wollte sehen, ob ich sie selbst ausprobieren könnte.
Die Idee ist, dass ein frischer Seitenbesuch die Icons inline einbindet, sie aber auch in den Cache legt. Dann können andere Seiten sie aus dem Cache per <svg><use> abrufen.
Hier ist meine Demo-Seite. Sie ist nicht wirklich produktionsreif. Zum Beispiel würdest du wahrscheinlich eine weitere Runde machen, bei der du die Icons per Ajax abrufst und sie einfügst, indem du die <use> ersetzt, damit überall tatsächlich inline <svg> auf dieselbe Weise verwendet wird. Außerdem wäre ein serverseitiges System ideal, um sie entweder oder je nachdem, ob der Cache vorhanden ist oder nicht, anzuzeigen.
Jeremy Keith erwähnte den unglaublichen Prime Number Shitting Bear, der, wie du vielleicht vermutest, rechenintensiv ist. Er erwähnte ihn im Zusammenhang mit Web Workers, was im Wesentlichen JavaScript ist, das in einem separaten Thread läuft, so dass es die Ausführung der aktuellen Seite nicht verlangsamen wird/kann. Ich sehe, dass dieselben Idee auch andere Leute beschäftigt hat.
Ich bin traurig, dass ich nicht jeden einzelnen Vortrag sehen konnte, denn ich weiß, dass sie alle großartig waren. Es gibt viele kommende Shows mit einigen der gleichen Leute!