The new version of Bhread is now live!

It took me 4 months to complete this. It took longer than expected because of the holidays and my day job.

We have implemented replies, votes, reposts, and groups. The group feature is not well-implemented and not tested at all, so things will change!

In the future, I plan to implement the per-site comment section feature.

What is lazy loading?

Lazy loading is a technique for waiting to load certain parts of a webpage — especially images — until they are needed. source

Visiting bhread.com will show 6 posts. If you reach the bottom of the page, it will load 8 more. The process repeats until no more posts are found. This is also known as infinite scrolling.

Why lazy load posts?

Bhread.com loads a 100kb file when the home page is visited. This was because at the time of testing, the total numer of posts is around 30. It loads all 30 of them in a single visit. This is a waste of bandwidth as most of the time, the user won’t scroll far down anyway.

The 100kb file takes a long time to load (~1sec).

Now, it loads a 26kb file (still a bit big) in 350milsec. This is a big improvement in useability. It’s the difference between snappy and sluggish.

Still supports no javascript

Don’t have javascript? You’re still covered! Bhread will display a ‘Next page’ link so users without js can still use Bhread.

How?

With HTMX, it’s pretty easy.

First, send the user a list containing a list item with htmx:

/home:

<ol>
    <li> {{ post id=1}} </li>
    <li> {{ post id=2}} </li>
    <li> {{ post id=3}} </li>
    <li> {{ post id=4}} </li>
    <li hx-get="/htmx-home?id=4" hx-trigger="intersect once" hx-swap="outerHTML" >
        {{ post-loading-skeleton }} 
    </li>
</ol>

What this does: render posts 1-4, then issue a get request to /htmx-home when the last element is seen by the user (intersect). Send the id of the last post. If a response is received, replace THIS item (li) with the new items.

Then, /htmx-home receives the id and returns the new posts which follow the id of the last post.

/htmx-home?id=4:

<li> {{ post id=5 }} </li>
<li> {{ post id=6 }} </li>
<li> {{ post id=7 }} </li>
<li> {{ post id=8 }} </li>
<li hx-get="/htmx-home?id=8" hx-trigger="intersect once" hx-swap="outerHTML" >
    {{ post-loading-skeleton }} 
</li>

The resulting html is this:

<ol>
    <li> {{ post id=1 }} </li>
    <li> {{ post id=2 }} </li>
    <li> {{ post id=3 }} </li>
    <li> {{ post id=4 }} </li>
    <li> {{ post id=5 }} </li>
    <li> {{ post id=6 }} </li>
    <li> {{ post id=7 }} </li>
    <li> {{ post id=8 }} </li>
    <li hx-get="/htmx-home?id=8" hx-trigger="intersect once" hx-swap="outerHTML" >
        {{ post-loading-skeleton }} 
    </li>
</ol>

The process continues until no more posts are found.

How about noJS?

The good thing about HTMX is that it allows the site to degrade well when JS is disabled. It’s a bit more complicated to implement but I expect Bhread to deal with mostly static sites. Ones that don’t need JS to function. So I think it’s worth the effort to implement this. Your mileage may vary.

To outline how this is implemented, here’s a rough step-by-step:

• In the backend, detect if request is coming with an HTMX request header. If not present, the user has JS disabled.
• In the frontend, add a <noscript> tag that includes a button labeled ’next’. This button should include the ID of the last item that was rendered.
• When generating the html, check if JS is enabled in the request.
• If yes, add the htmx-enabled element that will request for new items when seen
• If not, don’t add anything.
• The <noscript> element will still be present whether JS is on or not. We don’t need to worry about this because it takes advantage of the fact that this block will not be shown unless JS is disabled.
• Now make both /home and /htmx-home accept an ID argument which is the ID of the last element rendered.
• If JS is enabled, use the route for htmx: /htmx-home, passing the ID and returning a new list of partials that continues from the ID
• The client receives this and appends it to the current list of items.
• If JS is disabled, use the normal route for the home page /home, passing the ID and returning a new page containing the new items that follow the ID.
• When the button for ’next page’ is pressed, the page will reload containing the new posts and another ’next page’ button.

If you’re interested in this, the code is FOSS, the backend code for this is here:

views.py

and the HTML template is here:

home.html

Stay updated

For more updates, subscribe to the bhread blog’s RSS feed, visit Bhread.com or join the discord server.

Bhread.com is a platform that makes threads out of blogs.

To get started, you need:

• A blog with an RSS or Atom Feed

Register an account on bhread.com and add a feed. Follow the instructions on the feed creation page.

After registration and verification, bhread will (politely) scan your feed every 2 minutes. If it finds a post starting with ‘replying to ’, it will make a thread from it. That’s it!

Idea

The idea of bhread is to create a centralized hub of interactions without centralizing data.

The absolute state of internet content

When I search for something today, I usually use site:reddit.com to find something valuable. For example I google: best anime 2023 site:reddit.com.

This makes google output results from reddit.com. I do this because most of the helpful content is on reddit. Otherwise, I’ll get results from SEO-optimized sites which usually don’t have useful content.

Reddit, Facebook, Twitter and other social media platforms contain very important knowledge. And It’s important to protect it and to allow it to be accessible to every user of the internet.

Unfortunately these sites only allow access if you have an account. Facebook doesn’t allow search engines to crawl their site.

It’s unfortunate because some of the most active and knowledgeable groups I found on the internet is on Facebook.

It’s unthinkable how much knowledge must be inside their walled gardens.

This is inefficient and it’s not how the internet should be. Humanity’s knowledge should not belong to these entities who at a whim, can just close down their platform and do anything with their user’s data.

It’s unusual to have a blog but everyone has a facebook, reddit, and twitter account

Why are we using these platforms instead of creating blogs?

Well

• Blogs aren’t interactive, twitter allows you to reply, like, and retweet a post.
• Blogs are harder to discover, facebook connects you to everyone you know.
• Blogs are harder to setup, reddit just needs your username, email and password.

Blogs are outlets for personal expresssion. But where do you go if you want to see content from other people?

These social media platforms are attractive because they allow hassle-free interactions, and discoverability.

So why create Bhread?

Bhread was created because I want to bring the same interactions as facebook, reddit, twitter to blogs.

Bhread allows users to post, and reply using their blogs (which they fully own).

With replies, tagging (wip), and groups (wip) we can create a more fun blogging experience.

Bhread is designed so that if the bhread website dies, everyone still has their content. Anyone who replaces bhread can easily replicate its previous state. No one will be able to control every person’s blogs. It will be indestructible.

OK, so how do we do this?

Help me achieve the dream of a more open internet. Register your blog today on bhread.com.

If you don’t have a blog, create one for yourself and have your own slice of the internet.

TLDR: