@db@typo.social
@db@typo.social avatar

db

@db@typo.social

Designer, tool maker, web platform enthusiast, amateur archivist. Here to learn.

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

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

Am I missing something or is there no RSS feed for https://web.dev ?

db,
@db@typo.social avatar

@eeeps here u go https://web.dev/feed.xml

db,
@db@typo.social avatar

@eeeps (there was a thing a while back about how web dev has no feed, but the one I have seems to be working fine so 🤷)

impactology, to random
@impactology@mastodon.social avatar

April Rain makes the most ethereal sounding post-rock i've come across

It's like a soothing balm to the soul, something you listen to when you're tired emotionally and need to replenish your capacity to feel

https://youtube.com/watch?v=sUp32oaXcII&si=HZmm0KEOlE7pz1qs

Especially the track waiting for sunrise and one is glad to be of service.

db,
@db@typo.social avatar

@impactology For me it’s definitely This Will Destroy You’s eponymous album, especially Threads

https://www.youtube.com/watch?v=2qo1lAIEpBI

simevidas, to random
@simevidas@mastodon.social avatar

Why does this code cause a scrollbar in Firefox?

Test page: https://jsbin.com/wuwuxog/edit?html,css,output

(I found this bug by debugging France 24, e.g., https://www.france24.com/en/europe/20240426-russia-arrests-forbes-reporter-over-social-media-posts-on-bucha-massacre)

db,
@db@typo.social avatar

@simevidas @hi_mayank Not specific to custom elements, seems to happen to any empty inline element. The element itself has non-zero height, its parent div has zero height, chaos ensues. Probably related to one of these?

https://bugzilla.mozilla.org/buglist.cgi?quicksearch=empty+inline+height

baldur, to random
@baldur@toot.cafe avatar

“Moving on from Mocha, Chai and nyc.”

Yup, for node dev at least “node –test” and “node:assert” is absolutely good enough. (Mocha via web-test-runner is still IMO the best option for front-end unit testing, tho.) https://evertpot.com/bigint-money-2/

db,
@db@typo.social avatar

@baldur Pretty happy with it! Wish it had a nicer reporter built in (eg. I had to comment out Skipped tests because they were getting on my nerves), but solid foundation.

pixelambacht, to music
@pixelambacht@typo.social avatar

Please help me find this song!

I think it's a relatively new/modern song. It sounded funk/soul-y to me, but it's far out of my usual noisy music circle.

It's upbeat, heard it a few times in a hip hotel lounge. I googled it then, I think it was by a black artist.

Title is something with fire, or burning, or burning up?

db,
@db@typo.social avatar

@pixelambacht @sarajw Just to get it out of the way, shouldn’t the song still be in your Shazam / Music Recognition history?

db,
@db@typo.social avatar

@pixelambacht @sarajw I sadly have zero immunity to this sort of thing, lol

db, to random
@db@typo.social avatar

Today’s thankless task: figuring out what about my bog-standard, non-JS, bag-of-HTML-pages of a personal website compels iOS Safari to jump to the top of the article every time I hit the back button, instead of maintaining the scroll position, when visiting any external link.

https://danburzo.ro/favorite-records-2023/

db,
@db@typo.social avatar

Alright, that was quick. The tabindex=-1 on <main id='main'> causes iOS Safari to activate the element and scroll it into view when returning to the page. I will look for (and file) a bug for that.

But… @aardrian also has <main tabindex=-1> on his blog, to no ill effect on iOS Safari…

https://adrianroselli.com/

Is the heuristic specific to <main id=main>?!

Edit: My bad, Adrian uses tabindex=-1 only on the home page, which exhibits the same problem FWIW.

db,
@db@typo.social avatar

@aardrian i put it up on the blog
https://danburzo.ro/skip-to-content-back-button/

db,
@db@typo.social avatar

@siblingpastry @aardrian It resets the scroll position to the top of <main> when returning to the page after navigating away from it. I'll try to clarify the title / content.

db,
@db@typo.social avatar

@siblingpastry @aardrian Well, in addition to focusing on <main>, iOS Safari scrolls to the top of it. It loses my place on the web page when I follow links.

db,
@db@typo.social avatar

@siblingpastry @aardrian I merely mentioned document.activeElement = main as what tipped me to finding the root cause. It's the scrolling to top that’s problematic.

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

Why can't I get my dates to display in the right timezone? Why is this impossible? Why does it have to be different in production? Why does it have to be so hard?

I thought I had a fix using date-fns-tz, but I still can't get it right on the server.

db,
@db@typo.social avatar

@mia @Meyerweb Maybe it helps to think of dates like RGB color spaces? There are two separate concerns: assigning a color space to some RGB numbers, and converting between RGB color spaces.

I wrote down that one time I got a calendar thing to work between the browser and PHP (sorry, to anchor to the section):

https://danburzo.ro/toolbox/kirby/

db,
@db@typo.social avatar

@mia @Meyerweb There‘s a bunch of non-intuitive behaviors with “untagged” dates (strings not pinned to an explicit timezone), eg.

  • new Date('2024-04-01 00:00') here the time is 00:00 in the local TZ, but
  • new Date('2024-04-01') the implicit 00:00 time is in UTC, for some reason

these two dates can potentially land you in different days.

db,
@db@typo.social avatar

@mia @Meyerweb It sounds like you‘d want to reassign (not convert) the datetime from the Denver timezone to UTC, to keep up with the expectation? Does not have a direct incantation in date-fns-tz.

db, to random
@db@typo.social avatar

In light of new developments in CSS, I’ve decided to freshen up my specification of QSX, the query language based on CSS selectors for extracting things from DOM. It now has a dedicated spot on my website:

https://danburzo.ro/projects/qsx/

  • a logo {*} of its own made with glyphs from LTR Principia :)
db, to random
@db@typo.social avatar

Gave the ol’ HTML Standard a read to figure out how responsive images work, wrote down some details. Nothing revolutionary after a decade of spilled ink on the topic, but maybe a mental model that sticks?

https://danburzo.ro/responsive-images-html/

simevidas, (edited ) to random
@simevidas@mastodon.social avatar

Why don’t browsers hyphenate the word accessibility in this case?

https://jsbin.com/panubun/edit?html,css,output

edit: Could it be that if hyphenation would not reduce the number of text lines, browsers just don’t do it?

db,
@db@typo.social avatar

@simevidas Some browsers don’t hyphenate capitalized words

simevidas, to random
@simevidas@mastodon.social avatar

I need help with CSS debugging:

Why is the image too wide, causing a horizontal scrollbar? This looks like a 100vw issue, but I don’t see that value anywhere.

https://www.jamiesitalian.rs/en/ji-serbia/

video/mp4

db,
@db@typo.social avatar

@simevidas Maybe @eeeps has an idea since he investigated image sizing? I have a feeling it’s just built-in browser stuff in regards to how a <source> gets rendered in an <img> that fails to take account of the “Always show scroll bar” setting on macOS?

db,
@db@typo.social avatar

@simevidas @eeeps Alright, the default sizes on <source>, when missing, is 100vw:

https://html.spec.whatwg.org/multipage/images.html#parsing-a-sizes-attribute

db,
@db@typo.social avatar

@simevidas @eeeps In general, omitting sizes in such markup is an author error, and since sizes can’t use percentages, 100vw sounds like a sensible second choice that nonetheless should not be reached

db,
@db@typo.social avatar

@simevidas @eeeps Yes, I mean the 100vw default from the HTML spec.

db,
@db@typo.social avatar

@eeeps @simevidas I found it intriguing that sizes influences the layout width, so I pored over the HTML spec to get a better picture. Thanks for bringing these things up, fun times with the web platform!

https://danburzo.ro/responsive-images-html/

db,
@db@typo.social avatar

@simevidas Yeah, that would be amazing. I haven’t looked closely at how pinch-zooming is implemented, but it does look like it works by increasing the size of the CSS pixel

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