Test instance

Last few days we have been setting up a test instance of Friendica where we can test changes. After that was setup, we started by testing the first change: moving the media (images etc) from the database to S3.

Storage from database to S3

In the default Friendica install, media (and other files) are stored in the database. In our database, this has already grown to be a table of 100 GB containing almost 5 million items.
Luckily, there's a plugin with which you can move the media storage to S3. We have enabled that in the test instance, and moved our beautiful test images from database to S3. This worked well.

Now we have enabled the same on friendica.world, so any new image is uploaded to the S3 bucket. Moving the existing files from database to S3 is a process thats still running (at 10000 items per hour)

Performance issues

Now the next thing we need to look into, is the continuing performance issues. From time to time, the site gets unresponsive, especially the 'network' page.

Scaling out

The first thing we're going to do, which we had already prepared, is:
- Add a loadbalancer
- Move the application containers to separate VMs
This way, the large server we currently use, will only be used by the database. The application can be scaled to multiple VMs if needed.

After that we can focus on tuning the database and helping the Friendica developers finding the queries that don't perform well.

Donations

Adding hardware / VMs means more costs for running friendica.world. If you would like to donate and help us cover the running costs, you can do so here: ko-fi.com/fhfworld

We try to keep track of costs and donations on this blog: blog.mastodon.world (but due to lack of time it might take a while between updates...)

Thank you for your patience!

Now that more Friendica servers are offering the Bookface scheme fewer people need to use the UserStyles version. But there is still a role for user styles! You can use them to customize Bookface for yourself.

1. Go to Main Menu > Settings > Display > Theme Customization and set it to one of the Bookface scheme options.

2. Using either the built-in option for userContent.css in Firefox, or Stylus for Firefox or Chrome, or Userscripts for Safari, copy and paste this code:

:root {
     --global-font-family: "Open Sans", Arial, sans-serif, Noto Color Emoji;
     --nav-bg: #ffffff;
     --link-color: #0066ff;  /* match Accent Color here */
     --nav-icon-color: #65686C;
     --background-color: #f2f4f7;
     --content-bg: var(--nav-gb);
     --comment-bg: var(--background-color);
     --font-color: #313131;
     --font-color-darker: #333333;
     --font-color-lighter: #444444;
     --menu-background-hover-color: color-mix(in oklab, var(--link-color) 15%, white);
     --border-color: #eeeeee;
     --count-color:  #ffffff;
     --count-bg: var(--link-color);
     --attach-file-button: none; /* none or block */

     /* LOCALIZE pseudo-element text below */
     --sign-in-text: 'Sign-In';
     --compose-text: 'Compose';
     --save-search-text: 'Save Search';
     --follow-tag-text: 'Follow Tag';
     --comment-button-text: 'Comment';
     --share-button-text: 'Share';
     --quote-button-text: 'Quote';
     --like-button-text: 'Like';
     --dislike-button-text: 'Dislike';
     --more-button-text: 'More';
     --attendyes-button-text: 'Going';
     --attendno-button-text: 'Can\'t Go';
     --attendmaybe-button-text: 'Maybe';
     --add-photo-button-text: 'Add Photos';
     --follow-button-text: 'Follow';
     --save-button-text: 'Save';
}

3. Edit and redefine whatever you want to change. You can also delete from it anything you don't want to customize. This one block of code will override the Bookface scheme coming from your Friendica instance. But ONLY for YOU.

If your native language is not English, this allows you to localize the Bookface labels to say whatever you want them to. You can enable the hidden "File Attachment" button if you are using that feature. You can change the font Friendica uses. You can restyle the colors so it's all purple and lime green if you want.

Incidentally, if you were already using the UserStyles version of Bookface and your server enabled it as the default scheme, but you never went into the Display Settings to set the theme to Frio > Light or Dark or Black, you've probably suddenly noticed Friendica looks really strange in places. Applying the UserStyles version of Bookface on top of the server-side version messes things up. Either stop using the UserStyles version and just use the server-side one, or make sure you actually set the server to display something other than "Bookface." If you wanted to keep using the client-side UserStyles so you could customize how it looks, you can still do that but with a lot less code just by applying the block above.

More Details on Customization & Localization:
gitlab.com/randompenguin/bookf…

This has been in the README file since the start, but as more servers implement the Bookface scheme as the default more people have noticed that the "File Attachment" button is missing from the post Browser. I've replied to some individual posts about it but thought I should make my own post explaining that it is not a bug. It was a UX design decision on my part to purposely hide that button. Why?

There is no interface for actually managing the files you upload and attach. You cannot rename the files, you cannot delete them, and you cannot change the access permissions for them. If you accidentally upload a private file you can't remove it. It will accept several different file types, but uploaded videos have to be quite short due to file upload size limits, and even if that limit is set rather high, file uploads will often fail. If you are attaching both photos and files the interface can appear to be in photo mode but upload the image as a file instead. Again, you can never delete files uploaded in error. You would have to contact the server administrator and have them manually delete the file for you.

Users apparently aren't even supposed to be using this feature, especially to upload videos. According to the Friendica GitHub account the lead developer said this:

"I'd suggest you use PeerTube to post video and reshare from your Friendica account since both support ActivityPub."

Presumably, then, people should also be sharing other types of files by uploading them to a cloud drive somewhere and sharing a link to the file rather than uploading them to their Friendica account.

Years ago there was a video upload button and section in Friendica. Those were removed because none of the current core developers have experience handling video files [source]. They were replaced with the "Media" section but there is still no interface for managing uploaded files.

Bookface is intended to make Friendica friendlier to users coming from other platforms. Rather than expose new users to this incomplete, partially-broken feature I made the UX design decision to hide that button.

When Bookface was just a single user stylesheet I was using the File Attachment feature myself to share it. But I repeatedly experienced the issue with it where if I was both uploading and attaching images and files to a post it would look like it was in "Photo" upload mode but would actually upload the image as a "File" and I can never, ever delete that image file. I initially hid the button to prevent myself ever doing that again.

IMO if the developers are not going to add a File Manager interface to Friendica, than the File Attachment feature should be removed. But I'm not actually part of the Friendica development team so I cannot remove that feature. However I can hide the button for it in my scheme stylesheet.

Showing the File Button

That said, Bookface makes it easy for both Friendica Administrators or end-users to un-hide the button. Bookface hides the button with a CSS variable at the top of each stylesheet. The block discussed in the "Customization" section of the Wiki. Simply change --attach-file-button: none; to --attach-file-button: block; and the button will reappear.

Friendica Admins can either change this at the top of each of the server-side scheme stylesheets or they can add a customization <style> block to the "Frio" theme footer.tpl template file. Friendica users on a server that offers Bookface can override the setting for themselves by adding a custom user stylesheet using one of the methods under "Installing Bookface Userstyles" in the Wiki. It can be as simple as this one line:

:root{--attach-file-button: block;}

Friendica users who are using the Userstyles version of Bookface can edit it at the top of their custom stylesheet.

If you know how to use your browser's Developer Tools you can also "Inspect" the "Photo" button in the Browser and find the "File" button next to it, then temporarily unhide it to upload or attach a file on a case-by-case basis.

Switching Friendica to any other scheme or theme will also reveal the button. Only Bookface hides it.

I hope that clears up the "missing" button for people.

#Bookface #theme #files
@Friendica Admins @Friendica Support

This update has TWO DOZEN changes and fixes in it! Check out the README file Changelog for the full run-down. Thanks again to everyone who gave feedback!

The biggest change is to Profile pages on mobile devices. Previously if you visited your own or someone else’s profile on a tablet or phone you would not see their profile photo, display name, handle, etc., because they are in the hidden sidebar panel. If they are using the Bookface “Cover Photo” feature you’d see that, but nothing from their “vcard.”

Version 1.5 reworks all of that. So now when you go to a Profile page you will actually see their photo, display name, and handle. If you open the sidebar it triggers a cute animation that, in hybrid and landscape mobile views, pushes the vcard data over, and it elastically “bounces” off the side. When you close the sidebar is pulls with and then snaps back to its original position. In portrait orientation the vcard info and cover photo drop away when the sidebar is opened (which now opens full screen width) and pops up again when you close the sidebar.

The other change was to how Photo albums appear on phones. Previously the thumbnail images were the same size as on desktop resulting in one long column that’s annoying on a phone screen. Now it resizes the thumbnails so you can see a bunch of them at once and directly select the one you want. I wasn’t sure how big/small to make them so I made them the same size they are on my phone’s photo gallery app.

Here's a look at the new Profile page in "Hybrid" mobile view on a tablet:

And with the sidebar showing:

As noted there are a bunch of other small changes and tweaks. Things like fixing how "category" and "folder" tag-buttons look, fixing the rollover effect on Compose window formatting buttons, removing drop-shadow from tags, making nav tab appearance consistent with the toolbar tabs, even the Calculator add-on got a modern makeover. All this and more not sold in any store! Get it now:

Server-side Download:
gitlab.com/randompenguin/bookf…

User Styles Download:
gitlab.com/randompenguin/users…

================================
#friendica #bookface #theme #update
@Ruud @Friendica Admins @Phil @Matthias