Вход на сайт

Просмотр новости

Найдите то, что Вас интересует

PSA: Bubbles.town has a widget

Дата публикации: 12-06-2026 09:40:41


PSA: Bubbles.town has a widget
I am a big fan of bubbles.town, a relatively new website to make it easier to discover the indieweb of personal blogs. Sounds familiar? I run indieblog.page where the idea is that you can discover new blogs one random post at a time.
Bubble's approach is a different one. Instead of showing you random posts, they want to “bubble up” the best posts by user votes, similar to what Reddit or Hackernews do. However unlike on those sites, the posts are not user submitted but automatically imported via RSS (Incidentally bubbles.town was seeded in part with data from indieblog.page).
A big issue with this approach is that their "New" page is basically a firehose of all blog posts - the more blogs are added to the site, the faster the new feed will update. That makes it harder to discover posts that are a few days old and these posts then miss their chance to be seen and upvoted.
One solution is to make bubbles votes visible through other means. So why not utilize a mechanism we used to see a lot in the olden times? A little widget at the end of your own blog posts letting readers know, the post can be bubbled up!
I had looked multiple times for such a thing in bubble's documentation but could not find anything about it. Until I saw such a widget at another blog which made me look harder.
So here's the PSA: there is a bubbles vote widget and it has good documentation. As to be expected, it's just a little Javascript to add to your blog's template and you're good to go.
You can see it at the end of this post (though I sprinkled a bit of custom CSS on top).
PS: feel free to upvote older posts of mine
PPS: for bubbles readers – it doesn't always have to be coffee, there's a buy me a beer link below
EDIT: here's how added the bubbles to the button
div.bubbles-vote {
a.bubbles-vote-btn {
/* the bubble after the label */
span:last-child::after {
content: ' 🫧';
}
 
position: relative;
display: inline-block;
font-weight: 600;
transform-origin: center center;
 
&:hover {
/* bobbing on hover */
animation: bob 0.8s ease-in-out infinite;
}
 
/* small bubbles */
&::before,
&::after {
content: "🫧";
position: absolute;
right: 0;
font-size: 0.7em;
opacity: 0;
pointer-events: none;
}
 
/* animate the bubbles */
&::before {
animation: floatUp 1.2s ease-out infinite;
}
 
&::after {
animation: floatUp 1.2s ease-out infinite 0.6s;
left: 1.5em;
}
}
}
@keyframes bob {
0%, 100% { transform: translateY(0) rotate(1.5deg); }
50% { transform: translateY(0) rotate(-1.5deg); }
}
 
@keyframes floatUp {
0% { opacity: 0; transform: translateY(0) scale(0.4); }
20% { opacity: 0.9; }
100% { opacity: 0; transform: translateY(-30px) scale(1) translateX(8px); }
}
Tags: indieweb, bubblesSimilar posts:
Weekend Project: indieblog.page
Add or read comments to this article »»Copyright © 2026 Andreas GohrThis feed is for personal, non commercial use in the subscriber's feedreader only.All contents (especially texts and images) are protected by copyright law and may not be republished outside of splitbrain.org without prior consent. Texts may be quoted in extracts under fair use policy. [digital fingerprint: sb97741286f601b4a0d496dc8bae242e6d]

Схожие новости

#Наименование новостиТональностьИнформативностьДата публикации
1Revisiting WordPress smilies in a pure CSS way010.4220-12-2014
2My new favorite Terminal05.7510-08-2026
3Home Assistant Transplant09.9111-07-2026
4 Comment on Contact Form Required Fields and Post Submit Redirect by Andrew Misplon 07.4729-09-2026
5Markdific - A better tool to open, read, edit and export Markdown files07.2305-10-2026
6EIP Editing Office Hour (EIP + ERC ) Meeting #113, Sep 15, 2026020.4607-09-2026
7“tumblr’s the only social media without algorithms!” “you can still be anonymous on tumblr!”…015.9411-10-2026
8MD Studio - a personal HTML-to-Markdown project014.9605-09-2026
9Folo RSS Reader — Read timeline with Alfred08.5705-10-2026

Классификация: . Схожих патентов: 0. Схожих новостей: 9. Тональность: 0. Информативность: 5.87. Источник: www.splitbrain.org.