kubikpixel, (edited ) to webdev
@kubikpixel@chaos.social avatar

A other web tool with the name @lume but a 3D web design from @trusktr.

Do any of you use this and what is your experience with it? It is probably based on three.js and I hope it makes it "easier" to implement.

🧊 https://lume.io


sarajw, to random
@sarajw@front-end.social avatar

CSS
is
a style sheet language
that allows the intent of the designer to be communicated to a browser that executes on it

Not only @fantasai's talk today is reinforcing for me that "web design" is not dead.

We are not unicorns. Front end developers, once web designers, can and do design. We can! We do! We design with code, or in code. It's not unusual. Why the silos?

#CSSDay #webDesign #frontEnd

WebAxe, to accessibility
@WebAxe@a11y.info avatar
stefan, to fediverse
@stefan@stefanbohacek.online avatar
djh,
@djh@chaos.social avatar

@stefan Let me see if I get this right: the fediverse could standardize a scheme (e.g. fediverse://..) and then on iOS/Android all apps would need to add handlers for these schemes.

Then we could create these fediverse links when we detect a mobile device or even use something like

https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API

Do I get this right?

Is there any work done on standardization like this?

stefan,
@stefan@stefanbohacek.online avatar

@djh Yes, in a nutshell!

And to answer your second question, I'm not actually too sure.

Here's a few places where this idea has been discussed:

Adding a few tags for visibility to see if anyone has a more current answer, I would also love to know.

#fediverse #fedidev

inautilo, to design
@inautilo@mastodon.social avatar

#Design #Explorations
The power of beauty in communicating complex ideas · What we often overlook in visualizations and infographics https://ilo.im/15z2oh


#Communication #Emotion #Visualization #InfoGraphic #Image #ProductDesign #UxDesign #UiDesign #VisualDesign #WebDesign

mobileatom, to random
@mobileatom@flipboard.com avatar

What is visual hierarchy, and why do you need it? #WebDesign

https://www.noupe.com/design/what-is-visual-hierarchy-and-why-do-you-need-it.html?utm_source=flipboard&utm_medium=activitypub

Posted into Responsive Design, UX, UI, and more @responsive

WebAxe, to random
@WebAxe@a11y.info avatar

Understanding the 'Why' Around Neurodivergent Inclusive Web Design https://yougotthis.io/library/understanding-the-why-around-neurodivergent-inclusive-web-design/

WebAxe,
@WebAxe@a11y.info avatar
tommi, to CSS
@tommi@pan.rent avatar

Hey @piccalilli!

I found https://buildexcellentwebsit.es extremely insightful and inspiring! It pushed me to finally completely restructure my personal website’s #CSS, after many years of mess.

I used the awesome https://utopia.fyi to generate the vars, (actually, I am using the SCSS library).

Unfortunately, though, I find the massive use of all those calc() and clamp() functions to be quite heavy in terms of performance… #Lighthouse gave the website a very bad performance score (see screenshot). It even seems that while scrolling the page it lags (😳) even if it’s super simple and built with pure #HTML and CSS!

Do you have any ideas or suggestions? 🤔

Thank you so much for all the interesting things you share! ❤️🚀

(The current unstable development version of my website is at https://dev.tommi.space/, I am using the homepage as reference)

Cc: @j98 + @trys

#WebDesign #WebDev #browser #BuildExcellentWebsites #PersonalWebsite #CSSGrid #PageSpeed

trys,
@trys@mastodon.social avatar
tommi,
@tommi@pan.rent avatar

Exactly what I was looking for!
Thanks again, @trys! Have a wonderful day.

laura_carlson, to accessibility
@laura_carlson@mastodon.social avatar
ryantownsend, to webdev
@ryantownsend@webperf.social avatar

Oliver Lingberg just published an interview with me about the #webperf industry and my upcoming talk at his conference Pixel Pioneers on June 14th: https://pixelpioneers.co/blog/speaker-spotlight-ryan-townsend

If you're considering coming you can get 10% off with the code 'Friends10', making the price just ~£140 ex VAT. Student tickets are also available for £60 – exceptional value! Full details 👉 https://pixelpioneers.co/

#webdev #webdesign #ux

A talking-head video with Ryan Townsend sat at a desk.

javedAB, to javascript

want fast-loading pages

one way to achieve this is by loading only the necessary initially

load the rest on hover or button click for a smoother experience

aeveltstra,
@aeveltstra@mastodon.social avatar

@javedAB Other ways to achieve it include removing Javascript altogether and replacing it by server-side scripting, as well as serving most if not all of your sources over a fast CDN.

javedAB,

@aeveltstra server side rending is a valid approach. i started with @astro and @solid_js . however, from what i guess, server side rendering is more cost intensive than static html

fast cdn can be combined with lazy loading #js

inautilo, to design
@inautilo@mastodon.social avatar
mobileatom, to webdev
@mobileatom@flipboard.com avatar

Best Practices For Naming Design Tokens, Components, Variables, And More. #WebDesign #WebDev

https://www.smashingmagazine.com/2024/05/naming-best-practices/?utm_source=flipboard&utm_medium=activitypub

Posted into Responsive Design, UX, UI, and more @responsive

kubikpixel, to webdev German
@kubikpixel@chaos.social avatar

«CSS :has(), the God Selector»
– by @brucelawson

Yes CSS is more then only a design and colors and have today cool functions to select specific HTML components and pleace web designer think in different screen spaces.

🖌️ https://brucelawson.co.uk/2024/css-has-the-god-selector/


jkjustjoshing, to CSS
@jkjustjoshing@fosstodon.org avatar

Is there ever a time when this

width: 100%;
max-width: 480px;

behaves differently than this?

width: 480px;
max-width: 100%;

collinsworth,
@collinsworth@hachyderm.io avatar

@jkjustjoshing Not that I'm aware of or can think of. But I prefer the first, because I like to avoid static height/width values wherever possible.

css,
@css@front-end.social avatar

@collinsworth @jkjustjoshing

I would say it depends on the percentage reference. In some cases, we cannot resolve the percentage so the 100% will fall to auto and you can see a different behavior.

Ex: https://codepen.io/t_afif/pen/eYazBrQ/80d9ae23ca3a84872ba15ab53e739fbb

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