Check your posts (notes, articles, etc.) are marked up with h-entry:

Success!

We found the following post h-entry on your site:

Name

Weekly Bookmarks 1

Author

Add a photo!

<img class="u-photo" src="…" />

Roma Komarov

Content

Weekly Bookmarks 1 Published on: October 15, 2023 Categories: CSS 45, bookmarks 17 Current music:The Surrealist — LuxCurrent drink:Lapsang Souchong tea Table of Contents Introduction CSS Techniques and News Not Exactly New, but Noteworthy My Bug Reports Introduction How funny — in July I did start my blog but have not posted since then. Isn’t that the fate of most blogs? As an attempt to have something to write about at least on a weekly basis, here is what I think I’ll do: gather some of the interesting stuff I noticed during the week and just post these with minimal comments. Some of it I shared in my Mastodon already, but I think it could be useful, even if for myself, to have a compilation here as well. Let’s go! CSS Techniques and News “Emulate basic relative color syntax with color-mix() + the none keyword” by Lea Verou. Given color-mix() is already supported in all major browsers, this is a really important find: it brings some of the relative color syntax abilities closer to us — if you can use this with proper fallbacks in a progressive enhancement manner, you can already do it! “CSS Type Casting to Numeric: tan(atan2()) Scalars” by Jane Ori. A very cool workaround for the absence of an ability to remove units from the lengths in CSS calculations. Works (with some hacks) in Chrome and Safari, not yet in Firefox (as it requires @property). Given the trick is very simple, I might try it in some of my experiments. If you want this natively — vote for this interop 2024 focus area proposal by Scott Kellum. “[css-backgrounds] background-clip: border-area” — a proposal in CSSWG issues by Lea Verou. I think it makes a lot of sense, though it might be a bit tricky to use correctly due to the necessity to make sure the fallbacks would work and would not result in unreadable text. “The Cascade is a newsletter about the past, present, and future of CSS” by Robin Rendle. Two issues are already there and are also available on Robin’s website in a non-newsletter format if you prefer it this way. Not Exactly New, but Noteworthy “Igalia Chats” — a podcast by Brian Kardell and Eric Meyer about the web, its history, browsers and standards. I just finished listening to all the currently available recordings, and I wish there were more in-depth discussions about the web of this kind. “ImageOptim 1.9.1” by Kornel Lesiński — a very useful macOS app for image optimization, now native for Apple Silicon. “Orion Browser” and “SigmaOS” — interestingly, there are now new browsers that are based on WebKit, which is refreshing compared to most of them being based on Chromium recently. Similarly, the “DuckDuckGo” browser, which exists on different systems, just uses the built-in engine, so on macOS it also uses WebKit. “preact-custom-element” — a Preact helper that allows it to be used with web components. I tried it for a tiny thing I’m working on, and it works okay. There are a bunch of bugs here and there, but otherwise I’m pretty happy with how web components, Preact and HTM can work together. No transpiler needed, small footprint. My Bug Reports “Scroll-margin does not work for an element with a parent that has a non-visible overflow” — a bug I reported in Chromium. There are actually so many more issues with scroll-margin and overflow… I’ll need to find time to extensively research it, as I think there is a very big gray area in both specs and implementations. “No transitions of inherited properties when the change is triggered by animations” — another bug I reported this week, this time for Firefox. Also, it is slightly in a gray area, where specs are not 100% clear about how it should behave, but the way Chrome and Safari handle it are much more useful for developers. This might be required for a lot of techniques based on scroll-driven animations to work in the future, but it could still be useful even without them. That’s it! I’m doing this today, so maybe there are not as many links as I could’ve gathered if I would note them as the week goes… We’ll see if the next post in the series will have as many or more — maybe not, given how this time there were two very nice CSS techniques shared by Jane and Lea, and this does not always happen, haha.

Published

URL https://blog.kizu.dev/weekly-bookmarks-001/

Syndicated Copies

  • https://front-end.social/@kizu/111239897330575957

Categories

  • CSS 45
  • bookmarks 17

Your h-entries should have, at minimum, the following properties:

  • e-content — the main content of the post
  • p-name — if your post is an article with a name, use this classname.
  • dt-published — the datetime the post was published at, in ISO8601 format, with a timezone
  • u-url — the canonical URL of the post, especially important on pages listing multiple posts

It’s a common convention for the published datetime to be a link to the post itself, but they can be separate if you want.

There should also be some way to discover the author of the post — either link to your homepage (which should have your h-card on it) from anywhere within the body of the page with rel=author, or optionally embed a p-author h-card in the h-entry.

The web is an expressive medium, and as such there are many other properties which you can add to your posts. Check out the h-entry documentation for a full list.

Want to be able to use h-entry data in your code? Check out the open-source implementations.

Previous Step | Home | Next Step