Pineapple

A conceptual UI for some federated social networking software

I'm making this because it's a nice idea I had.

This was originally going to be some kind of alternative frontend for something, but I don't believe in skins, so it won't be anymore. It's just hypothetical, a concept for what things could look like.

It's written in Elm, which I like.

Ideas/Aims/Stuff

(keep in mind that not all of these have yet been implemented)

More accessible for newcomers and people coming from other social networks

This is the main goal - to make using these kinds of social networks more self-evident and approachable to less technical users.

While the default interface of Mastodon is great for certain users and uses, it's very information dense, hierarchical relationships aren't clear, and many of the functions aren't very self-evident and require a lot of experimentation to understand.

While learning an interface isn't an inherently bad thing, Pineapple aims to make the learning curve much more gentle by starting off with a simpler interface, making visual relationships more clear and keeping menus and UI elements in predictable locations.

More visual accessibility features

All indicators will not rely on colour.

Furthermore, there are special view options for people with certain visual recognition/processing preferences, like text-based alternatives to icon buttons and shape hinting for buttons and other interactable areas.

Check out View Modes for more information.

Better localisation support

• Designed to promote multilingual use.
• Full working RTL support.
• Nice typography for multiple different scripts.
• Optimised font sizes and styles for different scripts.

Check out View Modes for more information on RTL.

Better aesthetics and customisation

The core design employs graphic design concepts such as keylines and whitepsace to let the content breathe. Strong use of typography to make content areas more recognisable.

The minimalistic iconography is bespoke and specifically tailored for the semantics of Mastodon-like social networks.

The interface is open to a lot of different methods of customisation and a wide variety of themes will come included so users can choose moods and reading environments that suit them.

There's logo space at the top that admins will be able to replace with their instance's own logo. The large amount of whitespace can be used to adorn the interface with a background image.

This app's stylesheet is essential to proper functioning, but all styles are easy to target and edit if you want to use your own stylesheet thanks to human-readable attribute names.

Compatible with all recent browsers

Pineapple will be designed to work with all major browsers, including those popular in Asia such as Opera Mini and UC Browser (although keep in mind, a mobile version hasn't been planned yet, even though it will happen sometime).

• Safari (macOS) 9+
• Firefox 28+
• Opera 17+
• Edge (all versions)
• Chrome 29+
• QQ Browser
• Baidu Browser
• no Internet Explorer support

To save on the CSS file size that would otherwise be taken up by prefixing or other trickery, older versions of many browsers, including all versions of Internet Explorer, won't display properly.

Pineapple's design heavily uses Flexbox, eschewing traditional HTML tendencies. This means it's not possible to make fallbacks for really old browsers without making a fallback interface that is engineered specifically for them.

Smaller and more efficient

Pineapple aims to keep a lot of modern conveniences and enhancements, but keep the size as small as it needs to be and give options for those with slow internet connections to make it even faster.

Pineapple is written in Elm, which will hopefully not just result in better performance over React (which is what Mastodon uses), it also results in a very small download size.

In the current development version, all the essentials (JS, CSS, strings, icons) are about 36KB total.

I intend to make more optimisations in the future, like optional custom fonts loading.

Want to contribute?

Right now, Pineapple is a personal project, but if you find a bug or something that doesn't render consistently, please let me know.

Any discussion here follows the same rules as Mutant Standard's code of conduct. (This isn't a Mutant Standard project, but just project the statements of that code of conduct onto this tiny repository because I don't have the time to adapt it atm.)

Docs

• A brief todo list
• View Modes
• Structure
• Controls

Thinking of adapting?

I really recommend that you don't - a UI is not just a 'skin' to programming - a good UI should be tailored to the semantics of the software it's meant for and it should work seamlessly. Pineapple is completely hypothetical and is designed as if there's a backend that perfectly suits it.

Pineapple only feels nice and cool because it abides by it's own rules and self-imposed restrictions. Your situation will be different and if you try adapting Pineapple to it, it will probably be substantially less cool because it's definitively not designed for the thing that you might be thinking of adapting it to.

Things that this uses

• Elm 0.19
• Stylus
• Helium CSS framework (already in the repo).
• uglify.js (for compressing output Elm JS)

Building

client/compile.sh has the shell script to compile the Elm and the styles. client/bin/ is where you can view it. It has to be on a web server to work though.

Licenses

Pineapple is licensed GNU AGPLv3 but there's also a lot of components with different licenses.

See the licenses folder for all of the licenses.

Special Thanks

• multiple creatures for giving me the idea to do this in the first place
• kiilas
• b
• The Awesome side of Mastodon