@sarajw@front-end.social
@sarajw@front-end.social avatar

sarajw

@sarajw@front-end.social

Fresh front-end dev and techy generalist, mum of 2, euro-mongrel (🇩🇪 🇬🇧 🇸🇪), lapsed swing dancer & DJ, erstwhile tall ship and dingy sailor, crocheter, lefty.

Work with :react:, but ❤️ vanilla :html5: :css3: :javascript: (particularly ✨CSS✨ 🥰)

Cis het - she/her, supporting :BLM: :a11y: 🏳️‍🌈 🏳️‍⚧️

This profile is from a federated server and may be incomplete. Browse more on the original instance.

mattwilcox, to random
@mattwilcox@mstdn.social avatar

Genuine question, because I'm starting to second guess myself.

Sites like this: https://buttermax.net/

I can't use them, and I ... I'm not sure why. I have no idea what the site was about, I literally (somehow) did not realise you could scroll the page so missed a ton of content. My eyes bounce around and I can't focus on anything to read it.

Is it just me?

sarajw,
@sarajw@front-end.social avatar

@mattwilcox I'd like to hope that's the extreme version to show off what they can do.

I agree though it's too many effects at once! If there were toggles for some of them (even if they're all on by default to begin with - off for prefers-reduced-motion, naturally), that would help.

Like, on/off choices for:

  • the cursor blob thing and the pixellation/other changes it brings
  • the movement of the 'hardware' following the cursor
  • the squooshy scroll effect
sarajw,
@sarajw@front-end.social avatar

@mattwilcox it's a lot. And it's not particularly pleasant, but I'm able to play with it and have a look around.

So maybe?

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

Huh.

So does

overflow-wrap: anywhere;

first look for better places to wrap, before breaking up a word or other string otherwise unbroken by usual characters that don't mind jumping to a new line?

It seems like a win-win to just put everywhere?

sarajw,
@sarajw@front-end.social avatar

Aha: "Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing."

Nice!

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

Should designers code? Apparently we are back on this, I share @brad_frost ’s opinion in here: “Designers need to understand and work with the grain of the medium for which they’re designing.” Doesn’t mean they need to know how to implement designs in code?. Yup.
https://bradfrost.com/blog/post/should-designers-code/
https://bradfrost.com/blog/post/should-designers-code/

sarajw,
@sarajw@front-end.social avatar

@stephaniewalter @brad_frost careful not to learn too much though! Or you'll become a front end developer and won't be allowed to design any more!

https://front-end.social/@heydon/112273745145665571

roka, to hamburg
@roka@norden.social avatar

Biking to work is so great, especially when the sun is just coming out. ☺️

#hamburg #photography

sarajw,
@sarajw@front-end.social avatar

@roka that's a great shot! Hamburg, meine Perle ⚪

onepict, to random
@onepict@chaos.social avatar

Old woman screams at cloud.

Brandishing an axe.

You can't tell me an axe isn't feminine.

sarajw,
@sarajw@front-end.social avatar

@onepict if you refer to someone as a "battleaxe" it's usually assumed it's a forthright older woman 🪓💪👵

sarajw,
@sarajw@front-end.social avatar

@onepict oh yeah battleaxe is rarely used as a compliment - but as I get older myself I take strength from the idea that people are a little bit afraid of forthright older women.

sarajw,
@sarajw@front-end.social avatar

@onepict yesssss.

Mmmm, maybe if they actually stepped up and did the thing, there wouldn't be any nagging or scolding... Hmm? HMM?!

Agreed. Spend so much of life trying to be agreeable and now it's like - why? I'm getting mine, now. Why shouldn't I?

bw, to random

I may have purchased a new domain name.

sarajw,
@sarajw@front-end.social avatar

@a11yMel @bw that site!!

csscade, to random
@csscade@mastodon.social avatar

Did ya know that it’s possible to style an element if it’s overflowing the parent element? I certainly didn’t!

.parent {  
 max-width: 300px;  
}

.child {  
 width: 500px;

 @media@mastodon.social (overflow-inline) {  
 background: yellow;  
 }  
}  

https://www.csscade.com/cool-queries

sarajw,
@sarajw@front-end.social avatar

@csscade whaaaaaat does that mean I can selectively set wrapping differently on big long things that overflow?!

sarajw,
@sarajw@front-end.social avatar

@csscade (currently got an issue because of a URL in a blog title or two... https://rs.sjoy.lol/)

sarajw,
@sarajw@front-end.social avatar

@csscade it does! I don't trust it, there must be some caveat...

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

@Kilian @csscade hah, boo. I am only on mobile at the moment so yeah probably not very well written!

sarajw,
@sarajw@front-end.social avatar

@Kilian @csscade yeaaahh so it was pretty broken anyway.

Still on mobile anyway, made it simpler and made the whole div have overflow-wrap: break-word; but now I'm intrigued, I thought it would always break words but in my mobile edge it is not, it's still mostly keeping words together if it can. Is that right?

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

re selects vs radio button groups:

Just got linked to this at work:
https://www.youtube.com/watch?v=vwgihljM2e4
https://codepen.io/argyleink/pen/NWJBmPX

And I'm like, jaw-drop, have I just been coding roving tabindex into a custom select for nothing? Should I just have turned them all into radios instead?

Is this as nice to use and accessible as it sounds, or are there pitfalls/traps here?

sarajw,
@sarajw@front-end.social avatar

@hi_mayank I'm not speaking specifically about that solution - but yes I'm thinking about that use case too.

It would be a bit of a franken-thing to have a popover-fieldset full of radios styled to look like a select, wouldn't it 😅

sarajw,
@sarajw@front-end.social avatar

@aardrian I'm not gonna comment on his chops.

But OK, interesting. Yes I will be thinking more about where we could feasibly get radios in, more often.

sarajw,
@sarajw@front-end.social avatar

@hi_mayank Hmmmmmmm hm h hm hmhmmmmmm my poor brain so many ways to skin these cats

sarajw,
@sarajw@front-end.social avatar

@aardrian Food for thought... My issue is having a design which looks very <select>y but isn't possible in a normal select, so you have to make a custom thing anyway to try and match the design -

(yes, designers shouldn't design like this then, I know)

  • but then if I can't use a normal <select> anyway why not build it with radios instead 🤔

I'm sorry you're probably going to tell me off now. I am getting accessibility concerns into the dev team successfully, but 'design' is tricky right now.

sarajw,
@sarajw@front-end.social avatar

@aardrian well. I live and learn. Thank you!

I guess I presumed messing around with the semantics visually would be bad.

sarajw,
@sarajw@front-end.social avatar

@cwilcox808 @aardrian thank you! Yeah that's interesting...

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

My god, I'm only trying to buy a new helmet and I'm so bewildered.

Virginia Tech helmet ratings, MIPS, the recent German ADAC trials that basically said the Uvex Urban Planet is the only helmet worth having (no MIPS tho) and now that one helmet is out of stock everywhere...

Ugh. What do I doooooo? I didn't want to have to think about this so haaaaaard. I'll accept recommendations. I have a decades old Giro helmet, and it's high time to upgrade.

sarajw,
@sarajw@front-end.social avatar

@jake4480 I have been staring at FAR too many helmets tbh. I'm glad this is over, lol.

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

We (webbies) still don't have a CSS selector that can target the text content yet, do we?

(I'm hoping I'm wrong…)

sarajw, (edited )
@sarajw@front-end.social avatar

@rem omg no your latest @csscade post has fixed it!!

Oop, no it doesn't.

https://codepen.io/sarajw/pen/poBqrex

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