Webmentions and the blogging void – part 1

moji /// — Mon, 09 Jan 2023 00:31:42 +0000

Being social on your own platform or self-hosted blog is difficult. Comment systems are often underused and not where the real discussions happen – and for guestbooks to come back it might need a few more years. Webmentions can bridge the gap between your personal island and the outside world.

What are Webmentions?

Webmentions (webmention.io) are a way to bring social activity and interactivity to your site without having it on your platform itself or needing to have complex systems in place.

Harness the activity, audience, and functionality from existing platforms.

Using webmention.io, all reported mentions of your content on networks like Twitter or other sites will be collected for your usage. This will:

Verify the linking
Parse Microformats
Interpret them as likes, reply, etc. Then all that's left is you retrieving them to display.

If you think this sounds like good ol' pingbacks that is not by chance. Webmentions are basically a replacement and improvement on that idea and can work in tandem.

To enable collection, all that's needed is adding a few tags to the head of every page it should be active at, and you are done.

<link rel="webmention" href="https://webmention.io/username/webmention" />
<link rel="pingback" href="https://webmention.io/username/xmlrpc" />

For some CMS like WordPress, there are even plugins available doing that part.

Signing in

Next and the last step for setting everything up for receiving mentions is logging in. This can be a little bit confusing at first.
At webmention.io enter your site url.

Next, you have around a half dozen of different ways to confirm that you are indeed the owner of that website.
I found authenticating by Twitter and GitHub to be easiest.

The steps are basically:

Adding a rel="me" to a tag linking to your respective profile
And also mentioning your site's name on that profile. If everything works fine, you have now the option to use this as an authentication provider. And – we are in 🥸.

Now the world is your oyster to use this data for yourself or to display on the relevant sites.

The crawler

Being ready for webmentions doesn't mean much when no one is sending them. While some platforms or plugins might do this automatically, there is also brid.gy to help.

Bridgy periodically checks social networks for responses to your posts and links to your web site and sends them back to your site as webmentions. Bridgy also translates the responses to microformats so that your web site can fetch and parse them.

Bridgy can also publish posts, comments, likes, and retweets from your web site to social networks. When you ask Bridgy to publish a post, it analyzes its microformats data and publishes it using the social network APIs.

Connect your Twitter, Instagram or a number of other account types once and brid.gy will crawl them for free regularly for new mentions like replies or likes and send them your way.

Connect your Twitter, Instagram or a number of other account types once and brid.gy will crawl them for free regularly for new mentions like replies or likes and send them your way.

What is missing?

While webmentions are an incredible easy way to include activity from other platforms and make your own site feel more fun and alive. What it can't do is foster your own community.

So, if growing a personal following that will outlive any social network is a goal, then webmentions could be a part of that, but not the solution.

Implementing webmentions

Webmentions can be seen in action wonderfully on Adam Argyle's nerdy.dev. Which was also the inspiration for including them on my own.

💡🔧 Tune in next week on how to include and display Webmentions on moji.blog in this 2 part series.

Removing complexity with container size queries

moji /// — Mon, 09 Jan 2023 00:21:01 +0000

📦 Container Size Queries in CSS are exceptionally helpful when building dashboards. Especially when they are user configurable. Imagine a scenario where the same component can be placed multiple times, displaying different information and having different column-span settings. Or just being used in the sidebar as well as in the main content area depending on the page.

Here we use the same component in two different places with different column-span. They show us information in different formats:

Try it out by opening it in a new tab and resizing. It is the exact same component. Of course as a simplified version of a real component in a project.

Up until now, with media queries, we could not have solved this easily. Our styling would apply to all instances of the component on the page equally and could not handle sizing dependent on placement. This would require complex classes that get set or removed and would trigger mobile styling earlier on larger uses..

✅ Lets use a container query and also define the container type. Figuring out where to set a container type like container-type: inline-size can be a challenge when creating the component.

Be careful, as you can not put a container query on the same element you apply the container type to.

.item {
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-elevation-medium);
  container-type: inline-size;
}

@container (min-width: 400px) {
  .shipping__line {
    flex-wrap: wrap;
    border: 2px solid #f1cffc;
    border-radius: 6px;
    padding: 1rem;
    gap: 1rem;
    text-align: center;
  }
}

Extending this a little bit more we can easily build our multi-use dashboard components – and not worry about device size & adding and removing complex extra classes.

There is also the possiblity to use style queries in addition, to offer even more flexiblity to the user without much effort. Ahmad Shadeed has written a fantastic article on that with quite a lot of use cases and examples.

Have you used container queries already or are planning to?
You can find me on twitter here or on my blog here