@simevidas@mastodon.social
@simevidas@mastodon.social avatar

simevidas

@simevidas@mastodon.social

I’m interested in HTML, CSS, and making the web less annoying. My name is pronounced ˈshe-meh.

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

simevidas, to random
@simevidas@mastodon.social avatar

Why you probably shouldn’t add that sticky header to your website:

https://adamsilver.io/blog/the-problem-with-sticky-menus-and-what-to-do-instead/

simevidas,
@simevidas@mastodon.social avatar

@sarajw Some of the listed problems can be worked around, but even a well-made sticky header still takes up space, which means that it reduces the vertical scrolling area, and some people may find that annoying. The question is, is it worth it?

simevidas,
@simevidas@mastodon.social avatar

@sarajw There’s also the option of sticking the menu to the side instead of the top on desktop. I have a user style for pinafore.social to move the menu to the side when I scroll my feed.

video/mp4

simevidas, to random
@simevidas@mastodon.social avatar

Flutter Web is one big <canvas>? Um… that’s a no from me.

Demo app: https://gallery.flutter.dev/#/reply

simevidas, to random
@simevidas@mastodon.social avatar

A little experiment: Blocking non-critical scripts on imgur.com.

I picked a random image page: https://imgur.com/gallery/8xL2nAW.

First, I loaded the page in vanilla Chrome. I only scrolled by a small amount, to show the image and comments.

The result:

56 scripts, 5.7 MB of JavaScript (1.4 MB transferred)

Screenshot of devtools network panel.

simevidas,
@simevidas@mastodon.social avatar

Then I installed uBlock Origin and set it up as follows:

  1. disabled all built-in filters (this turns off ad blocking)
  2. disabled JS globally
  3. turned on advanced mode
  4. blocked all scripts globally

Then on imgur.com:

  1. enabled JS
  2. allowed the two critical script domains: imgur.com and media-lab.ai
simevidas,
@simevidas@mastodon.social avatar

So now I block all non-critical scripts. I reload the page to confirm that the image (main content) renders fine.

The result:

21 scripts, 2.5 MB (682 kB transferred)

simevidas,
@simevidas@mastodon.social avatar

What did I achieve?

I more than halved the amount of JavaScript for imgur.com. But at what cost?

There are no drawbacks as far as I can tell. There are only benefits:

  • the page loads faster
  • there is less scroll jank
  • the layout shift in the side column is gone

To sum up, by reducing the JavaScript, the user experience improved significantly.

I think this shows that blocking non-critical scripts by default is worth exploring. I’ve been getting better at this in the past 10 months.

simevidas,
@simevidas@mastodon.social avatar

@gdr Not bad!

simevidas, to random
@simevidas@mastodon.social avatar

React Aria components (https://react-spectrum.adobe.com/react-aria/react-aria-components.html) that should have standard pure-HTML equivalents:

  • sortable table
  • tabs
  • date range picker
  • tooltip on focus

HTML isn’t done yet.

simevidas,
@simevidas@mastodon.social avatar

@sarajw I’m not the right person to ask, sorry 😊

simevidas,
@simevidas@mastodon.social avatar

@westbrook I checked on WICG forum:

tabs https://discourse.wicg.io/t/standard-tab-control/1621
sortable table https://discourse.wicg.io/t/sort-attribute-for-tables/6056

raymondcamden, to random
@raymondcamden@mastodon.social avatar

Please please please stop using "auto dismissing errors". Latest culprit - Google Calendar. It will show a VERY small error at the bottom of the page that auto dismisses.

simevidas,
@simevidas@mastodon.social avatar

@raymondcamden “The probability of fundamental accessibility issues on a website does not decrease with the net worth of the company that made it.” - web platform axiom

simevidas, to random
@simevidas@mastodon.social avatar

I’d like to watch Croatia’s national TV in my browser, but the official website asks me to allow scripts from 8 third-party sites, including Google and Facebook. … I reject this status quo on the web.

simevidas,
@simevidas@mastodon.social avatar

The two additional critical script domains were code.jquery.com and cdnjs.cloudflare.com. Three scripts in total. The website should have self-hosted, but fine. With the 6 other script domains still blocked, I can watch some TV.

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

Do web browsers on Windows 11 have overlay scrollbars now (like on macOS), or are they still classic?

edit: Found the answer. It’s an Edge flag called Windows Fluent scrollbars, which when enabled allows the user to turn off the “Always show scrollbars” option, which switches scrollbars to overlay.

https://www.reddit.com/r/MicrosoftEdge/comments/10jlyg8/fluent_overlay_scrollbars_are_back_in_edge_canary/

But what about Firefox?

simevidas,
@simevidas@mastodon.social avatar

Tested on Windows 10: Both Chrome and Firefox have custom overlay scrollbar implementations behind flag/config.

https://www.reddit.com/r/firefox/comments/xpekb4/firefox_overlay_scrollbars_on_windows_10/

simevidas, to random
@simevidas@mastodon.social avatar

The fact that today is 5.8.23 in the USA, but 8.5.23 in most of the rest of the world is reason enough to avoid using numbers for months, and instead write something like May 8, 2023 when showing dates to users. I’m looking at you, trailers.

simevidas,
@simevidas@mastodon.social avatar

@macdonst For machines, yes, but I’m not sure it’s statistically the easiest format to read for humans.

simevidas,
@simevidas@mastodon.social avatar

@macdonst We can have both 😁

<time datetime="2023-05-08">May 8, 2023</time>

rikschennink, to random
@rikschennink@mastodon.social avatar

Don’t use a date input for birthdates.

People remember their birthdate as a string of numbers so use number inputs.

simevidas,
@simevidas@mastodon.social avatar

@rikschennink If you mean <input type=number>, that’s only a good fit for quantities, where it makes sense to increment/decrement the value.

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

Shout-out to everyone who optimises images and only ships as little JavaScript as necessary.

Sent via shitty Macedonia hotel WiFi.

simevidas,
@simevidas@mastodon.social avatar

@matuzo That’s a pretty good use-case for blocking non-critical scripts (across all websites).

simevidas, to random
@simevidas@mastodon.social avatar

Gatsby uses <noscript>, but it’s not compatible with browser extensions.

Issue reported here: https://github.com/gatsbyjs/gatsby/issues/38065

simevidas, to random
@simevidas@mastodon.social avatar

Re https://www.theverge.com/2023/5/5/23712440/gmail-ads-more-annoying-middle-inbox, there seem to be no ads in the HTML version of Gmail.

simevidas, to random
@simevidas@mastodon.social avatar

In case you missed the news, Firefox’s default link focus indicator is good now. The outline is two-colored, blue and white, to ensure good visibility against both light and dark backgrounds.

https://output.jsbin.com/hemiber/quiet

Video demonstration of focusing links on the test page.

foolip, to random Swedish
@foolip@mastodon.nu avatar

This drives me nuts. When I copy some text from Safari into Gmail on iOS, why would I want the original formatting? Is there any way to paste without formatting???

simevidas,
@simevidas@mastodon.social avatar

@foolip There’s a way:

  1. select text
  2. don’t tap Copy, but tap > twice to get to the Share… option
  3. in the share sheet, tap Copy
  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • Leos
  • ngwrru68w68
  • InstantRegret
  • thenastyranch
  • magazineikmin
  • GTA5RPClips
  • rosin
  • osvaldo12
  • tacticalgear
  • Youngstown
  • slotface
  • khanakhh
  • kavyap
  • DreamBathrooms
  • JUstTest
  • modclub
  • everett
  • provamag3
  • cubers
  • cisconetworking
  • ethstaker
  • Durango
  • mdbf
  • anitta
  • megavids
  • normalnudes
  • tester
  • lostlight
  • All magazines
    •