Some people say they don't want to join the Fediverse or Mastodon, because they think the UI sucks. As a front end developer, a designer-kind of a person who creates user interfaces, I agree. Most of the web clients on the Fedi are horrendous, even Mastodon by default. There's lots of room for improvement.
We should really focus on how to make it more pleasing to the eye, more modern and more pleasant. This should not be a nerd network, just for geeks to geek out. This is not IRC or BBS.
As long as Mastodon for instance looks like it's designed by a back end engineer, contains font-awesome icons, looks like 2010, and stuff like that, being open and free is not good reason enough for many. I'm not bashing it, Mastodon is not the worst out there, in fact in my honest opinion Mastodon user experience is far better than Akkoma or Calckey for example. It's also more accessible than many modern UIs, for example my visual impaired wife prefers the Vanilla Mastodon UI over my #BirdUI modifications, she has some small tiny improvements of her own like distinguishing the colors in the action buttons as they have no proper contrast in any of the default themes. But that's it. She likes it as it is. So it cannot be that bad. However, it could be better overall.
#OpenSource doesn't mean the product should look like it's created in a basement by a math teacher. For some people Mastodon UX is sufficient (it even is for me, I like it enough and it doesn't prevent me from using it), but it should be WORLD CLASS. I don't say the answer is #MastodonBirdUI but it should be something much more modern and minimal than the current default UI. Pixelfed's developer is a designer oriented, Pixelfed is indeed an example of an awesome Fediverse app experience throughout the web and apps. That is how it should be.
Aarghh! #css law: Thou shalt never use !important, except in very specific cases:
To find out if you have a specificity problem you can temporarily add !important to a declaration. If it's now applied, you know you have a specificity problem
.... the one I forgot. I posted this same question a while ago, and someone came up with a second legitimate use case for !important, but what was it?
Fedi on Fire first beta is now released! I just had to try and do it... Watch those endless Fediverse posts flow! :meow_hearteyes: Check it out at https://fedionfire.stream
Particularly the visual effect of the scrolling/sliding tabs.
I want to #WriteInPublic and open it up to questions. It will take me a while, and I feel happier having something out there sooner rather than later - but who knows if it'll help me get it done :)
I'm nervous, because I'm not sure the site as a whole is as accessible as it should be!
If there was an #HTML element that changes it's content when users interact with other elements on the page, what name would it have?
PLEASE NOTE: I am not suggesting that this element needs to exist; I am only asking what it would be called. I'm building a CustomElement, I just want it to have a name that makes sense.
Vote and suggest others in replies. Please boost for reach!
It’s an upcoming way to scope the reach of your CSS selectors, allowing you to move away from methodologies such as BEM because you no longer need to name those in-between elements.
Do you have a favourite non-obvious use of #css#grid? I'm looking for nice examples for my Grid chapter that will expand beyond "here's how you make a responsive four-column grid"
This will turn to black around #AAAAAA. adjust brightness lower if you want it to turn to black earlier. play around with contrast as well, using low and high values.
After playing around with this (thanks @mia), we noticed there's some fringes happening at certain color values right when it is about to switch from black to white, so this might work best with colors that you get to control to some degree.
Less fringing with SVG filters
But! Here is a version that has no fringing:
Add this somewhere in your markup- it can be anywhere as long as the id bwFilter can be referenced.
<br></br><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0"><br></br> <defs><br></br> <filter id="bwFilter" color-interpolation-filters="sRGB"><br></br> <!-- Convert to grayscale based on luminance --><br></br> <feColorMatrix type="matrix"<br></br> values="0.2126 0.7152 0.0722 0 0<br></br> 0.2126 0.7152 0.0722 0 0<br></br> 0.2126 0.7152 0.0722 0 0<br></br> 0 0 0 1 0"/><br></br> <!-- Expand edges slightly to clean up any fringing --><br></br> <feMorphology operator="dilate" radius="2"/><br></br> <!-- Apply the threshold to determine if the color should be black or white --><br></br> <feComponentTransfer><br></br> <feFuncR type="linear" slope="-255" intercept="128"/><br></br> <feFuncG type="linear" slope="-255" intercept="128"/><br></br> <feFuncB type="linear" slope="-255" intercept="128"/><br></br> </feComponentTransfer><br></br> <!-- Composite step to clean up the result --><br></br> <feComposite operator="in" in2="SourceGraphic"/><br></br> </filter><br></br> </defs><br></br></svg><br></br>
Can anyone give a good example of a user stylesheet?
My feeling is that they aren't used a lot, but I might be wrong, and also it occurred to me that others can write a user stylesheet for someone who needs big font sizes or something.
I would like to endorse other minor web apps in the #Fediverse, but most of them are full of UI glitches, are incomplete and downright buggy looking odd things.
From my designer point of view #Mastodon and #Pixelfed are the only effective ones, because they speak to people who are used to proper visual design language (read: Non-nerds, non-engineers, the regular people and design oriented people).
Things like #BookWyrm, #Lemmy, #Friendica and newer niche apps cause reactions like: "What is this?", they look like back end is fine but nobody is in charge of the design and the UI has no direction whatsoever. It's the general culprit in the programming world: A back end developer thinks everything is fine when we add a CSS framework and that's that.
If we just get the UI right everywhere, we get more people to the #Fediverse. I just wish there was more #CSS/design people willing to contribute. #UI#UIDesign
What are your top #CSS features you played with, got excited over as they were supported in one browser... then years passed & support hasn't improved?
Mine:
✨@property Chrome-only for half a decade
✨filter() Safari-only since 2015
✨element() Firefox-only since forever
Now that Safari 17.4 is available, what other new web technology — HTML, CSS, JS, Web API, media support, etc — would you like to see supported in Safari next?
What’s most needed?
What will you use it for?
Or how will it help your team serve your users?
Tell me a story…
1.5.8rc8-nightly (for Mastodon 4.1.2 main branch):
Add ultra accessible colors to README
Minor CSS var improvements
Fix profile media gallery thumbnails' border-radius
Fix regression with detailed status update font size
1.5.8 (for Mastodon 4.1.2 stable)
Please note: This is the last release I will continue to develop for 4.1.2 stable. More things will be present in the upcoming version (as of writing this: 1.5.8rc8-nightly-mastodon-4.1.2-nightly). I will focus on the nightly version, because it's quite hard to keep up with multiple versions. Version for 4.1.2 stable will stay as is for the time being.
Fix profile media gallery thumbnails' border-radius
Backfill improvements from nightly branch, those which affect also the stable branch
Update instructions in README
Backfill color and CSS var improvements
Fix regressions with font-sizes
Fixed fa-fw (Federated) icon size for mobile view #37 (thanks @Itbeard!)
Fix search icon overlaping with the long search input placeholder text #40 (thanks @Itbeard!)
😳 I think there's a moment in #WebDev when you cross over between building a cool web app, getting inspired by @bramus 's #CSS scroll-driven animation demos and creating trippy-looking UI's.
Hashtag page on Phanpy, showing media posts tagged as #panorama, showing images that animate their intrinsic alignment (object-position in CSS) while scrolling down the list.
Why is no one decorating their magazines?
Why is no one using CSS to make their magazine's visual appearances more unique? That was the main draw of old Reddit for me....