We hope you like it!

The prime directive

Modern looking, consistent and accessible UI across all browsers. Non-JS version as the primary focus, JS is optional and should be regarded as such.

The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing. To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader. In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.

Features

• Accessible
  • Easy to use keyboard only navigation
  • Feedback on focused elements
  • Keyboard shortcuts to access main regions
  • Vi-like shortcuts
  • Screen reader tested
  • Notifies the user when focusing on key elements, such as the feed, notes and actions
  • Brief description of navigation links
  • Using semantic HTML whenever possible
  • Special care given for styling solutions that could break accessibility
  • Colors and type sizes in accordance to W3C contrast guidelines
  • Chosen specifically blue-ish and grey-ish hues for faster page loading perception
• Fast, the content provided to the user really is just markup and some CSS rules
  • Optionally there will be some small use cases where JS makes sense (it's the only thing modern browsers understand e.e)
  • For example, cropping your avatar before uploading a new one.
  • This is the only example until now.
• Dark and light default themes available (according to your system theme)
• Graceful degradation for unsupported HTML elements
• Achieving modern user interface patterns without JS
• Various layout engines tested and work as they should
  • Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc...)
  • WebkitGTK (Epiphany, Midori, etc...)
  • Gecko (Firefox and derivatives)
  • Goanna (Palemoon, Basilisk, etc...)
  • Internet Explorer

Video

Keyboard tests

The git history is clear (we believe), but it can be challenging and obscure to outsiders and non-technical people.

With the introduction of this blog made with bashblog, we hope to make all the progress more visible and easier of following :)

It has a RSS feed so, don't forget to subscribe!

StoreRemoteMedia fetches remote files when they are Linked to in a note. I.e., when the major mime type isn't text. It triggers thumbnail generation.

Embed attempts to generate a page preview from open graph and oembed. I.e., acts when the major mime type is text.

We've changed so much with GNU social v3 that, regarding SRM there was no possible port, just a complete rewrite. Both plugins became smaller and easier to understand while promoting the same functionality with more stability.

It's always important to start with the original code as that allows us to review past decisions and understand all the corner cases previously considered.

Sadly, what motivated us to re-design the attachment system were the non-considered corner cases. In particular:

• Remove title from attachment, as it's part of the relation between attachment and note.
• Remove actor from attachment, many actors may publish the same attachment.
• Remove is_local from attachment, as it's part of the relation between attachment and note.
• Remove remote_url from attachment, different urls can return the same attachment.
• Attachment now has a reference counter
• Add entity GSActorToAttachment
• Add entity GSActorToRemoteURL
• Add entity RemoteURL
• Add entity RemoteURLToNote
• Add entity RemoteURLToAttachment
• AttachmentToNote now has a title attribute

Key commits:

• 32ad5dbd74 - [ENTITY] Split Attachment in various new entities
• c381e58d33 - [ENTITY] Refactor RemoteURL entities to Link

The structural changes and how it compares to v2 is detailed in our wiki.

Some relevant observations:

• Link is now part of GNU social Data Representation terms. It represents any remote URL being shared in a note.
• There's only one fixed directory for GSFiles.

Its controller handles upload, update and removal.

Important change from v2: Avatars are now regular attachments.

GNU social now has its documentation available in https://docs.gnusocial.rocks/. It features four different books. These are automatically generated from the source using mdBook.

Only the development book is in an elaborated state, the other books are holding for more ready code.

And two of them are new:

• The Developer is both intended to guide third-party plugin developers and to make it easier of contributing to the code.
• The Designer is the most recent of the four and came from a necessity of keeping some standardization between templates and ensuring the same principles are kept in mind when designing new themes.

And two of them are updates from existing documentation:

• The User one is adapted from the existing GNU social documentation for users that was provided in v2.
• The Administrator one is adapted from the "Unofficial GNU social docs" by Thomask who asked us to make it official.

Together with the documentation we've introduced a wiki. Its purpose is to walk-through decisions, convention, terminology. It's where we document the reasoning the development team went through before implementing more sophisticated functionalities.

Finally, when the documentation doesn't explain, and to ensure the whole code is properly tested, we have the tests. And the coverage is available here. At the time of writing the coverage has 98.76% code lines tested.

File Storage in GNU social is used for avatars, for notes containing attachments, and for notes containing links (in which case is an Embed preview). Notes can be created by local users or fetched from remote actors. Filehash is used to reduce file duplication.

When a user shares a Link that uses OpenGraph tags or has an OEmbed provider, the Embed plugin generates a preview for it that may contain a thumbnail.

When a user shares a Link to an image, the StoreRemoteMedia plugin can fetch the file and make it available as an attachment, and will generate a thumbnail.

When an image, video, or other file type is uploaded or retrieved, an Attachment entity is created. When a thumbnail is requested, one is generated if an EncoderPlugin that supports the mime type is available.

There are two EncoderPlugins implemented:

• ImageEncoder: Allows to compress, validate, rescale, and sanitize images using VIPS.
• VideoEncoder: Allows to rescale gifs using FFMpeg.

Another helpful plugin is FileQuota which ensures a user stays under the file quota.

How is the code organised?

There are various entities related to attachment and thumbnail handling. The key ones are:

• Attachment
• AttachmentThumbnail

The plugins are able to act by means of the Events system, as elaborated in the documentation.