Michelle Barker mit ihrem Lieblings-Blogpost in dieser Art: kurz, praktisch und hinterlässt einen wertvollen Wissensschatz für Ihre Zeit. Hier geht sie auf logische Kurzschreibweisen in CSS ein, insbesondere auf solche, die Längen nur auf einer einzigen Achse setzen, sagen wir, nur auf der Block-(vertikalen) Achse oder nur auf der Inline-(horizontalen) Achse.

Ich sage "Block" und "Inline", weil die x-Achse, was logische Eigenschaften betrifft, je nach dem aktuellen writing-mode genauso gut wie eine vertikale Achse funktionieren könnte.

Wo wir also immer padding, margin und border Kurzschreibweisen hatten, die eine Mehrfachwert-Syntax unterstützen können, erlaubt uns keine davon, Längen auf einer bestimmten Achse zu deklarieren, ohne auch eine Länge auf der anderen Achse zu setzen.

Unser lieber Freund Robin hat einen neuen Essay namens In Praise of Shadows. Bevor Sie nun dorthin springen und nach Anhaltspunkten zu CSS-Box-Schatten, Textschatten und Schattenfiltern suchen... das ist es *nicht*. Es ist ein Essay über Fotografie und was Robin über den Umgang mit Schatten mit einer Kamera gelernt hat.

Warum also teilen? Weil es unglaublich ist, dass er eine spezielle Seite für einen einzigen Essay erstellt hat. Und Sie werden viel über CSS lernen, wenn Sie die DevTools dafür öffnen.

Melanie Sumner hat diese super-spezifische Sammlung von Web-bezogenen Substantiven, um eine Gruppe oder Menge von etwas zu beschreiben. Wissen Sie, wie es eine *Schule* Fische oder eine *Herde* Kühe gibt? Die gleiche Art von Sache, aber für lustigen Web-Jargon.

Bunny Fonts bezeichnet sich selbst als die "Datenschutz-freundliche Web-Schriftplattform, die entwickelt wurde, um den Datenschutz ins Internet zurückzubringen". Laut seiner FAQ

Mit einer Null-Tracking- und Keine-Protokollierungspolitik hilft Bunny Fonts Ihnen, vollständig DSGVO-konform zu bleiben und legt die persönlichen Daten Ihrer Nutzer in ihre eigenen Hände.

Es fällt mir schwer, nicht sofort an Google Fonts zu denken. Bunny Fonts sagt sogar, dass sie ein Drop-in-Ersatz für Google Fonts sind. Sie bieten die gleichen Open-Source-Schriften und haben die gleiche API-Struktur wie Google Fonts.

Eric Eggert:

Für diese Technik gibt es einige legitime Anwendungsfälle. Sie könnten zum Beispiel eine Tabelle mit Titeln und Beschreibungen haben. Um mehr Platz für den Titel zu schaffen, schränken Sie die Beschreibung auf kleinen Ansichtsfenstern auf eine Zeile ein und wiederholen die Beschreibung auf der Detailseite für diesen Artikel.

Ich sehe es jedoch oft bei Elementen wie Schaltflächen oder sogar Formularbeschriftungen verwendet, um sie schöner (?) aussehen zu lassen oder um sie vertikal auszurichten. Aber sobald Sie das Ansichtsfenster ändern oder den Text in der Größe ändern, verschwindet das Ende des Textes.

Ich denke, "...wenn in bestimmten Situationen verwendet" gehört dorthin, aber ohne macht es sicherlich einen besseren Blogpost-Titel. Wie Eric sagt, gibt es legitime Anwendungsfälle für das Abschneiden von Text. Vielleicht nur wenige, aber dennoch legitim.

Ich kann nicht genug auf den "Gefällt mir"-Button schlagen für das, was Miriam Suzanne über die herausfordernden technischen Hürden bei der Implementierung von Webmentions zu sagen hat.

Die erste Runde erforderte mehrere Online-Dienste zusammen mit HTML & JS-Änderungen an meiner statischen Website, nur um meine Indieweb-Identität zu überprüfen. Dann weitere Änderungen an der Website und mehr Online-Dienste, um Erwähnungen abzurufen (bisher gibt es nichts zu sehen, aber das ist wahrscheinlich zu erwarten). Es scheint, dass der einzige Weg, die Einrichtung zu testen, darin besteht, all diese Änderungen öffentlich zu veröffentlichen und dann andere Entwickler zu bitten, Ihnen Erwähnungen zu senden.

[…]

Ich bin ein erfahrener Webentwickler und kann das herausfinden. Aber die Schritte sind nicht einfach, und die meisten meiner Freunde sind keine Webentwickler. Daher fühlt sich das für mich wie der Prototyp einer Idee an – ein Proof of Concept.

Sicherlich ein Proof of Concept. Und einer, der schon eine ganze Weile existiert. Die IndieWeb-Idee, seine eigenen Daten zu besitzen und seine Website als sozialen Hub zu nutzen, ist genau mein Ding – und wahrscheinlich auch Ihres, als jemand, der im Front-End arbeitet.

Es ist noch gar nicht lange her, da hat uns Nick Sypteras gezeigt, wie man benutzerdefinierte Abzeichen für ein GitHub-Repository erstellt. Nun hat Reza Shakeri Beautify GitHub Profile zusammengestellt, und es ist ein riesiges Repository mit verschiedenen Abzeichen, das viele Beispiele mit direkten Links zu den Repositories zusammenfasst, die Sie zur Erstellung verwenden können.

Und damit nicht genug! Wenn Sie nach einer Art einbettbaren Widgets suchen, gibt es alles von GitHub-Repository-Statistiken und Beitragsvisualisierungen bis hin zu eingebetteten PageSpeed Insights und Spotify-Playlists. Im Grunde ein großer Ort, um Inspiration zu finden.

Myles C. Maxfield hat im WebKit Blog eine nette Anleitung für Farbschriften veröffentlicht. Sie erscheint kurz nach dem, was Ollie neulich hier auf CSS-Tricks geschrieben hat, und obwohl sie viel Gemeinsamkeiten abdecken, gibt es einige nette Anhaltspunkte im WebKit-Post, die beide lesenswert machen.

Ahmad Shadeed – tut, was er immer so gut macht – bietet einen frühen Einblick in die object-view-box-Eigenschaft, etwas, das er als native Möglichkeit beschreibt, ein Bild im Browser mit CSS zuzuschneiden.

Der Anwendungsfall? Nun, Ahmad verschwendet keine Zeit und zeigt, wie die Eigenschaft verwendet werden kann, um das zu erreichen, was bisher entweder (1) ein umgebendes Element mit überlaufender Überdeckung um ein Bild herum erforderte, das innerhalb dieses Elements in der Größe und Positioniert war, oder (2) die background-image-Route.

Ahmad Shadeed behandelt das CSS-Größen-Schlüsselwort fit-content. Es ist nützlich! Es kommt nur nicht super oft vor. Ich erwische mich dabei, wie ich min-content viel häufiger verwende, zum Beispiel beim Festlegen der Höhe eines grid-template-row.

Das Schlüsselwort fit-content ist tatsächlich eng verwandt mit min-content und max-content – es hat nur eine kleine Heuristik, die Ahmad als Flussdiagramm schön illustriert.