rolle, to fediverse
@rolle@mementomori.social avatar

I have created a Twitter-inspired UI theme for Mastodon. I call it Mastodon Bird UI.

Demo available on my instance: https://mementomori.social

Background and origin in the blog post: "The day I decided to build my own “Twitter”" https://rolle.design/the-day-i-decided-to-build-my-own-twitter

Source code and installation instructions: https://github.com/ronilaukkarinen/mastodon-bird-ui

#MastoAdmin #CSS #UI #UIDesign #Mastodon #OpenSource #MastodonBirdUI

cheeaun, to CSS
@cheeaun@mastodon.social avatar

Experimenting with trending news/link "cards" on Trending page (dev site). Feels like the only thing that Phanpy has is carousels all over the place 😂

Implementation detail: average color extracted from blurhash, tuned to lower or higher "brightness" by using Oklab color space. CSS oklab(): https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab

Trending news carousel on Trending page, on Phanpy site. It's a list of links to news sites, with an article image, headline and small snippets of the article for every link.

mia, to CSS
@mia@front-end.social avatar

This article by @matuzo is excellent, and gets at the heart of most spec debates I've had - in & outside the WG.

But haven't people already solved this in ? Yes, badly, and then they complain that the language is fragile or doesn't scale or whatever.

It also hits my first rule of PoetiCSS (which doesn't exist): CSS is designed to be expressive for devs and browsers. BEM is a hack that expresses some to devs, but not browsers. (scope would help here as well!)

https://www.matuzo.at/blog/2023/cascade-layers-are-useless/

jensimmons, to CSS
@jensimmons@front-end.social avatar

At the CSSWG group meeting today, I presented some new ideas from Apple about how Anchor Positioning could work.

Slides are here. Use the "Menu" UI at the top left to show speaker notes and see what we said as we presented:
https://www.icloud.com/keynote/0f5UxcimbeDm24dK6S_Of2YOw#Anchor_positioning_presentation_to_CSSWG

mia, to CSS
@mia@front-end.social avatar

What would you want to understand better about #CSS - about how it works, or why it works the way it does?

(This is research for a thing)

w3cdevs, to webdev
@w3cdevs@w3c.social avatar

Were you around in 1996? Remember Amaya? Both a Web #browser and an authoring tool, Amaya's main purpose was to showcase and promote @w3c Web technologies and standards, such as #HTML and #CSS.

Read Amaya's story by @swheritage, cc Inria:

▶️ https://www.softwareheritage.org/2023/10/26/unveiling-amaya-story/

ppk, to CSS
@ppk@front-end.social avatar

:has()-related insight of the day:

div:has(h2,p) is an OR
div:has(h2):has(p) is an AND

The first selects all divs that contain an h2 or a p or both.

The second selects all divs that contain both an h2 and a p.

rolle, (edited ) to opensource
@rolle@mementomori.social avatar

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 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.

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 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.

Just my 2 cents.

rachelandrew, to CSS
@rachelandrew@front-end.social avatar

There's been a lot of discussion about masonry in CSS recently. I wrote about the Chrome team's proposal to help clarify why we have concerns with bundling masonry in with grid, and to show that a separate spec doesn't mean fewer features. https://developer.chrome.com/blog/masonry

OC Official Collection Checkmark 1.0.1 (userstyles.world)

This userstyle adds checkmarks next to the names of official collections (i.e., collections that Ernest verifies and gives an official link). Right now, official collections aren't distinguished in any way, so I thought this would be a nice way of doing it!...

zeldman, to webdev
@zeldman@front-end.social avatar
kaiserkiwi, to CSS
@kaiserkiwi@corteximplant.com avatar

Great post on #Tailwind. Nice to see that there are still enough people who understand CSS and don't stop reading after the first letter of the name.

https://nuejs.org/blog/tailwind-misinformation-engine/

#CSS #WebDev #Coding

nshki, to webdev
@nshki@ruby.social avatar

Hi fediverse. My name is Nishiki and I’m a web dev with 15+ years of experience. I’m making myself available as a mentor for one or two motivated individuals looking to land their first junior engineering position. I’m happy to be able to say over the past few years, I’ve mentored 4 wonderful people who have all managed to land their first tech jobs.

Please email me at hello@nshki.com if interested. A boost for reach is much appreciated!

#WebDev #Mentor #Rails #JavaScript #PHP #HTML #CSS

argyleink, to CSS
@argyleink@front-end.social avatar
mrnhmath, to programming
@mrnhmath@mastodon.social avatar

Friendly reminder that XULRunner, the standalone Gecko runtime that once powered web-based applications like Songbird and that was abandoned by Mozilla Corporation has been revived and now builds atop Goanna. Learn more at the Pale Moon forums announcement: https://forum.palemoon.org/viewtopic.php?f=62&t=30913

#js #css #xul #html #webdev #mozilla #firefox #gecko #palemoon #goanna #indiedev

kizu, to CSS
@kizu@front-end.social avatar

New post: “Recent CSS Bookmarks 15”

https://blog.kizu.dev/recent-css-bookmarks-015/

A compilation of 23 articles and posts about various topics: colors and themes, container queries, accessibility, grids, future , and more.

svgeesus, to CSS

Dear typographers of Mastodon:

Do any variable fonts exist which support both italics and obliques, in the same font?

(This is not a challenge to go make one. I'm also not assuming that intermediate forms (ugh!) would exist; just that the one font could produce either on demand).

Please boost for reach; would like good data before designing solutions to non-existent problems.

Comments welcome at

https://github.com/w3c/csswg-drafts/issues/3125

css, to CSS
@css@front-end.social avatar

Looking for new ideas for my CSS Generators website.

https://css-generators.com

What kind of CSS code would you like to get with one click? 🤔

Shapes, Components, Color stuff, Complex formulas, etc. Let me know 👇

#CSS #HTML

cheeaun, to webdev
@cheeaun@mastodon.social avatar

😳 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.

#PhanpySocialDev (local dev, not on dev site)

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.

bt, to webdev

Quick new post about making the headings of HTML tables "sticky":

"Please Make Your Table Headings Sticky"

https://btxx.org/posts/Please_Make_Your_Table_Headings_Sticky/

j9t, to webdev
@j9t@mas.to avatar

2023: 0 of the Global Top 100 Websites Use Valid HTML:

The latest analysis of and of the most popular websites. The situation is only going to get better once we set higher expectations for the code we ship.

https://meiert.com/en/blog/html-conformance-2023/

matthiasott, to CSS
@matthiasott@mastodon.social avatar

🤔 I’m preparing my talk at the moment and I’d be glad to hear your thoughts:

In which areas do you see the most potential for innovative web design when it comes to the latest and greatest features?

Like, which CSS features would you recommend a designer (or developer) to learn who wants to create outstanding work for the Web in 2024? ✨

mia, to CSS
@mia@front-end.social avatar

❄️ It's Day 3 in @5t3ph's excellent 12 Days of Web, and I'm excited to be part of it – writing about one of my favorite new features!

https://12daysofweb.dev/2023/css-scope/

alvaromontoro, to CSS
@alvaromontoro@front-end.social avatar

Today's comiCSS cartoon: Headaches
https://comicss.art/?id=114

And the source code: https://comicss.art/comics/114/headaches.html

  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • khanakhh
  • mdbf
  • ethstaker
  • magazineikmin
  • GTA5RPClips
  • rosin
  • thenastyranch
  • Youngstown
  • InstantRegret
  • slotface
  • osvaldo12
  • kavyap
  • DreamBathrooms
  • JUstTest
  • Durango
  • everett
  • cisconetworking
  • normalnudes
  • tester
  • ngwrru68w68
  • cubers
  • modclub
  • tacticalgear
  • provamag3
  • Leos
  • anitta
  • lostlight
  • All magazines