-
Une histoire moitié rigolote / moitié terrifiante du capitalisme et du web indépendant. Excellent 👌
briefs.video/videos/why-the…
-
Something I never got around to doing on my old site was to thoroughly annotate the content with Microformats. In rebuilding it from the ground up, I wanted to correct that.
Microformats are a standard for annotating markup on the web, making it more meaningful. This makes your site machine readable, which is useful for things like RSS, but also for standardised interactions among websites.
IndieWeb? What? Why? How?
The IndieWeb in a nutshell (at least for me) is the idea of owning your own space on the internet and owning the content you put out there. Other folks much smarter than I am have shared some great stuff on the IndieWeb. In particular, I'd recommend these three resources:
Jamie's Tech Nottingham talk on the IndieWeb Movement: it's a comprehensive overview of what the IndieWeb is about and how you can get involved.
Ana's Smashing blog post on autonomy online and the IndieWeb: it makes a strong case for the IndieWeb and gives you both an overview of it and tools to get started yourself.
Heydon's Webbed Brief on the IndieWeb is great fun, has amazing production values, and really drives home the why.
indiewebify.me is a good starting point in terms of implementation. It's likely that you'll need to reach for more docs, but at least it gets you going 🙂
Microformats
If you'd like to annotate your site using Microformats, check out the official docs. There are some good blog posts on the subject out there, but what worked for me was to follow these steps:
Review the content on my site.
Read the wiki pages to see available items and properties.
Look through a few sites in the wild to see how they're done.
🕵🏼♀️ If you want to snoop into people's sites, I recommend parsing their site here and then looking through their markup to see how they structured their properties.
Some folks whose lovely sites I snooped on: Jamie Tanna, Ana Rodrigues, Max Böck, and Jeremy Keith.
Nothing about my implementation is unique or groundbreaking, but if like me, you fare well by looking at real world examples, here are my snippets:
Personal Card
A while back I implemented RSVPs on my site, with help from Jamie's blog post. For that, I created an h-card that I hid from the page. I'm keeping that same setup for now. It looks like this:
<section class="p-author h-card" style="display: none">
<a href="https://carol.gg" class="u-url">
<img src="https://carol.gg/avatar.jpeg" alt="my face" class="u-photo" />
<span class="p-name">Carolina Gilabert</span>
</a>
<p>
You can say hi at
<a href="mailto:hello@carol.gg" class="u-email">hello@carol.gg</a>
</p>
</section>
In future, I'd like to make a feature of the h-card on my homepage, kinda like Jamie has done at the top of his site or how Ana has on her site's footer.
Feeds
I have a couple of feeds around my site: the latest posts section on my homepage and the blog page. For those, I'm using h-feed:
<ul class="h-feed">
{%- for post in postList %}
<li>
<article class="h-entry">
{% include "h-card.html" %}
<a class="u-url" href="{{ post.url }}">
<h2>{{ post.data.title }}</h2>
</a>
<span>
<time class="dt-published" datetime="{{ post.data.date | isoDate }}">
{{ post.data.date | date }}
</time>
· {{ post.data.readingTime }}
</span>
<p class="p-summary">{{ post.data.subtitle }}</p>
</article>
</li>
{%- endfor %}
</ul>
Blog Posts
For the posts, I'm using h-entry and my layout looks like this:
<div class="h-entry">
<h1 class="p-name">{{ title }}</h1>
<p class="p-description"><em>{{ subtitle }}</em></p>
<span>
<time class="dt-published" datetime="{{ date | isoDate }}">
{{ date | date }}
</time>
· {{readingTime }}
</span>
{% include "h-card.html" %}
<div class="e-content">
{{ content | safe }}
</div>
</div>
Events
As I mentioned above, events were what I implemented first on this site, way back on the Gatsby days, so I could RSVP to IndieWeb events. This is what that partial looks like:
<article class="h-entry" id="{{ event.id }}">
<a class="u-url" href="https://carol.gg/events#{{ event.id }}">
<span role="img" aria-label="chainlink emoji"> 🔗 </span>
</a>
{% include "h-card.html" %}
<span class="p-rsvp" value="{{ event.value }}"> {{ event.value }} </span>
<h2>
<a class="u-in-reply-to" href="{{ event.url }}"> {{ event.name }} </a>
</h2>
<time datetime="{{ event.date }}"> {{ event.date }} </time>
</article>
What's next?
This is a pretty good starting point for layering more IndieWeb functionality onto my site. I'll probably do some basic styling next, and then re-implement IndieAuth.
It might happen next week, or next year, but it's coming. See you then! 😄
-
For some reason, some folks have picked up on this just recently. I'm unretweeting and quote tweeting it myself now too because it is probably the best thing I've made in some time. There's a squirrel in it.
-
@heydonworks is making videos which are mainly about web development, but this one should be seen by everyone! Informative, but also funny and slick. briefs.video/videos/why-the… Give this a watch
-
The internet. Where did it all go wrong?
And what can we do to fix it, and reclaim it?
@heydonworks has some thoughts, and shares them in this video.
Enjoy: briefs.video/videos/why-the…
-
Why the Indieweb?
This is the story of the birth of the web, its loss of innocence, its decline, and what we can do to make it a bit less gross. Or if you prefer, this is the video in which I say the expression “barbecue sets” far too many times.
https://briefs.video/videos/why-the-indieweb/
-
Why The IndieWeb? briefs.video/videos/why-the…
-
Very cute vid. briefs.video/videos/why-the…
(the author of this tweet is aware of the inherent irony of posting this on social media)
-
Video: "Why The IndieWeb?"
On the true meaning of "social media" and where you may think that "BBQ SET" is some obscure transfer protocol, by @heydonworks
briefs.video/videos/why-the…
-
"So capitalism created social media. Literally social life, but mediated by ad sellers." briefs.video/videos/why-the… from @heydonworks
-
“Why The IndieWeb?” - Another fantastic art piece by @heydonworks.
Heydons videos are entertaining, informative and well produced. Support him, if you can: opencollective.com/webbed-briefs
briefs.video/videos/why-the…
-
@Downes briefs.video/videos/why-the…
-
Yes! So many good thoughts put into good words and images.
-
if it ain't woke, don't brake it
-
Great..
briefs.video/videos/why-the…
-
<a href="brid.gy/publish/twitter"></a><a href="brid.gy/publish/mastod…"></a>
This is absolutley positively the single most awesome explanation of the IndieWeb I've seen to date. Love it and Love your Site! briefs.video/videos/why-the… (artpunk.net/2021/lta-hrefq…)
-
<a href="https://brid.gy/publish/twitter"></a><a href="https://brid.gy/publish/mastodon"></a>
This is absolutley positively the single most awesome explanation of the IndieWeb I've seen to date. Love it and Love your Site! https://briefs.video/videos/why-the-indieweb/
-
This is awesome!
briefs.video/videos/why-the…
-
Esto esta increíble!
briefs.video/videos/why-the…
-
Why The IndieWeb? (Webbed Briefs) briefs.video/videos/why-the…
-
Why The IndieWeb? - The Webbed Briefs videos are a work of art! Thanks @heydonworks briefs.video/videos/why-the…
-
“Why the Indieweb? …This is the story of the birth of the web, its loss of innocence, its decline, and what we can do to make it a bit less gross.” - briefs.video/videos/why-the…
-
The Webbed Briefs videos from @heydonworks are always a treat. The latest - Why The IndieWeb? - is no exception...
> This is the story of the birth of the web, its loss of innocence, its decline, and what we can do to make it a bit less gross.
👏 briefs.video/videos/why-the…
-
Heydon Pickering once again smashes the nail on the head with a rocket!
briefs.video/videos/why-the…
#indieweb #socialmedia
-
all round visionary @heydonworks is producing a series of thoughtful, highly engaging, often funny, but also challenging (which is good) videos.
His latest is here
briefs.video/videos/why-the…
-
Absolutely bonkers O_O @heydonworks … A must see (like always) if you are a creative on the web these days briefs.video/videos/why-the…
-
Slowclap once again briefs.video/videos/why-the…
-
I am only halfway through and I needed to stop and tweet this: Do yourselves a favour and watch "Why The IndieWeb?" by @heydonworks: briefs.video/videos/why-the…
I love everything about these 'webbed briefs'!
-
This made me think.
-
This made me think.
-
🔗Why The IndieWeb? (Webbed Briefs)
This is the story of the birth of the web, its loss of innocence, its decline, and what we can do to make it a bit less gross. Or if you prefer, this is the video in which I say the expression “barbecue sets” far t… briefs.video/videos/why-the…
-
👀
-
Title: Why The IndieWeb?
Published: 8th February 2021
by Heydon
@heydonworks
#indieweb #webhistory #webdev
briefs.video/videos/why-the…
-
Fucking love this.
If you like this and haven’t seen the rest of Heydon’s vids, go have a look at the others too - super informative and fun.
Something something barbecue set?
-
Looking forward to Why Indie rock?
-
Fucking love this.
If you like this and haven’t seen the rest of Heydon’s vids, go have a look at the others too - super informative and fun.
Something something barbecue set?
-
How we got from HTML, URLs, and HTTP to white men tazering themselves in the junk while attempting a coup.
briefs.video/videos/why-the…
-
Cette série de vidéos est un must see complètement barré sur le web, hâte de voir la prochaine 😁
-
Land mammal Tim Berners-Lee briefs.video/videos/why-the…
-
Ever wondered what is wrong with the internet? (Spoiler: It's capitalism!)
@heydonworks put it perfectly into words and imagery in a 7 minute video -> briefs.video/videos/why-the…
-
You can't put in simpler terms what's wrong with the web - and in a way, THE WORLD. Watch this.
-
Pls stop choosing shiesty capitalist media funnels to host your content. Can’t afford/collaborate w/ a decent ethical developer or designer? Whose business model/campaign aim are you replicating?
-
You can't put in simpler terms what's wrong with the web - and in a way, THE WORLD. Watch this.
-
All the web developers, spare a few minutes of your time and watch this!!
-
Looking forward to learning more through @heydonworks quirky videos!
-
That’s an amazing episode!
I love the music/sound effect in the background and the animation is ace. Thanks @heydonworks!
-
Another fantastic video from @heydonworks -- This time discussing capitalism and the indie web.
-
This video by @heydonworks is brilliant, and anyone who builds on the web should give up a few minutes of their day to watch it.🍿
-
I did not know what to expect exactly, when I started following this man @heydonworks, but I must admit, I am not dissapointed.
briefs.video/videos/why-the…
-
Big yess 🔥🔥
-
Ome Heydon heeft weer een dijk van een video over Het Internet geproduceerd, specifiek over: het IndieWeb.
Niet eens technisch en genoeg leuks voor de jeugd. Klik:
-
Social media - Social life mediated by ad sellers.
-
Why the IndieWeb you ask? Give this a gander https://t.co/jLWxASsNZ6
-
Hardon again putting things in a video!
This time it's a really important lesson to learn methinks.
-
@heydonworks at it again with a great short video on the Indie web. 🤘Oh, and barbecue sets. Because, you know, it's Heydon.😁
-
@heydonworks at it again with a great short video on the Indie web. 🤘Oh, and barbecue sets. Because, you know, it's Heydon.😁
-
Well, that wasn't what I was expecting briefs.video/videos/why-the…
-
cc: all netizens 👁🔺👁
-
Another great video short from @heydonworks hits our screens this morning. Click this link and help feed the algorithms.
briefs.video/videos/why-the…
-
Entertaining. And nothing but the truth..
But not for the light hearted!
May contain strong language
-
Troisième vidéo de @heydonworks, cette fois-ci avec un historique du Web et l'importance de se passer des réseaux sociaux (dis-je sur un réseau social). Toujours brillant.
-
Absolutely cracking episode.
It makes me wanna get back on mastodon etc
-
Troisième vidéo de @heydonworks, cette fois-ci avec un historique du Web et l'importance de se passer des réseaux sociaux (dis-je sur un réseau social). Toujours brillant.
-
It's only eight minutes, but it's eight minutes well spent:
briefs.video/videos/why-the…
from @heydonworks - plus - learn about barbecue fetishists!
-
🔥 new webbed brief on surveillance capitalism, barbecue sets, tazered balls and the #IndieWeb.
I mean do I have to keep selling this or are you already watching?
briefs.video/videos/why-the…
-
briefs.video/videos/why-the…
This speaks for itself, so I don't need to
-
Absolutely cracking episode.
It makes me wanna get back on mastodon etc