Replies

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

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

Using modern CSS features to create a custom range slider with a tooltip. There is no JS to update the values, it's pure CSS with minimal HTML 😎

Powered by Scroll Driven animation, Anchor positioning, @​property and more! 🤩

Demo: https://codepen.io/t_afif/full/JjqNEbZ via :codepen: @codepen

Online Version: https://css-tip.com/range-slider-tooltip/

It's Chrome only for the tooltip but the range slider works fine in all the browsers.

#CSS #HTML

Showing two range slider with a tooltip containing the selected values. From the linked demo.

simevidas,
@simevidas@mastodon.social avatar

@css You wrapped the element in a <label>, but then you didn’t include a label. That doesn’t really make sense.

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

@css Not having a label is not the problem. The problem is using a <label> element without including a label. That’s confusing. The purpose of the <label> element is to include a label. There is no other reason why this element exists, so if you don’t have a label in the demo, don’t use <label>. Just remove it. Use a <span> if you need a wrapper element.

raymondcamden, to random
@raymondcamden@mastodon.social avatar

Web Platform Folks: I swear I remember seeing, a LONG time ago, a spec for IndexedDB 2, that would add various features (better search) to IDB - but I guess nothing came of it? Anyone know more?

simevidas,
@simevidas@mastodon.social avatar

@raymondcamden The spec is at version 3 right now, so I assume the version 2 features have already been added to browsers.

https://w3c.github.io/IndexedDB/

You an search for “indexed” and “idb” on my list of browser intents to find discussions about adding new features.

https://github.com/simevidas/browser-intents

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

tl;dw Most of the energy from fossil fuels is wasted. Energy from renewable sources is much more efficient. In the future, we won‘t need the same amount of energy that we need today.

In other words, if we consume an X amount of fossil fuel energy today, and we want to get rid of fossil fuels, we won’t need the same X amount of renewable energy to do that, but only a fraction of X.

https://www.youtube.com/watch?v=EVJkq4iu7bk

simevidas,
@simevidas@mastodon.social avatar

You can check the energy flow chart for your country, but the data is from 2017:

https://flowcharts.llnl.gov/commodities/energy

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

Is <img loading=lazy> good enough for your websites, or do you still need to use a JavaScript lazy-loading library for advanced functionality, consistency, or other reasons?

simevidas,
@simevidas@mastodon.social avatar

@nhoizey Can you say more about this? I’m curious if what you need could be enabled by adding new HTML and CSS features.

simevidas,
@simevidas@mastodon.social avatar

@nhoizey That sounds like a use-case for the fetchpriority=low attribute.

simevidas, to random
@simevidas@mastodon.social avatar

youtube.com’s performance on mobile is very bad. It’s borderline unusable on my low-end Android phone. But don’t take my word for it. Just take a look at the CrUX numbers.

Does YouTube not realize that so many more people around the world would watch many more videos (and therefore ads) if performance was better? What’s wrong with them?

https://pagespeed.web.dev/analysis/https-youtube-com/46xf29cofy?form_factor=mobile

simevidas,
@simevidas@mastodon.social avatar

Like how is it possible that the same team that is able to manage a database of billions of videos, with hundreds of hours of new videos being uploaded every minute, isn’t able to create an efficient frontend consisting of simple HTML/CSS/JavaScript for playing those videos? They excel at the difficult stuff but then fail at the simple stuff. It defies belief.

ralphruthe, to random German
@ralphruthe@troet.cafe avatar

Zeit für einen Klassiker.

simevidas,
@simevidas@mastodon.social avatar

@ralphruthe I feel it would sound more natural if it said “Heute ist Donnerstag”. (I’m not a native German.)

tomayac, (edited ) to random
@tomayac@toot.cafe avatar

97% agreement with the positions of the 🌱 party in the for the 🗳️.

https://www.wahl-o-mat.de/europawahl2024/

simevidas,
@simevidas@mastodon.social avatar

@tomayac LOL

simevidas,
@simevidas@mastodon.social avatar

@tomayac Yeah, I chose neutral on a couple of questions because I wasn’t familiar with the problem.

westbrook, to webdev
@westbrook@mastodon.social avatar

h* elements have margin by default!? Who knew.

simevidas,
@simevidas@mastodon.social avatar

@westbrook HTML-only documents with headings and paragraphs would not be very readable if browsers did not add vertical margins by default.

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

I remember when I first saw the scrollbar-gutter property, I thought that it was a very clever thing. It was not. I wish it was.

Basically, I want a “stable-after-shown” value or something:

  • If there is no overflow: do not reserve the gutter.

  • Once the container ever overflows during the lifetime of the page, show the gutter.

  • Now, if the overflow goes away, the gutter will stay.

simevidas,
@simevidas@mastodon.social avatar

@kizu Why are you fine with the content width shrinking when the scrollbar is shown, but not fine with the content width growing when the scrollbar goes away?

simevidas,
@simevidas@mastodon.social avatar

@kizu What do you mean by UI junk?

simevidas, to random
@simevidas@mastodon.social avatar
simevidas,
@simevidas@mastodon.social avatar

@timdream I’m not a fan of websites switching to mobile layout when I zoom the page too much, so I would probably find a text-only zoom option useful. The problem is that in my browser (Firefox), there doesn’t seem to be an option to increase the text size on specific websites only, like how page zoom works. I also would like to be able to use such a feature via a keyboard command (e.g., Command + Shift + Plus).

MaxArt2501, to javascript
@MaxArt2501@mastodon.social avatar

A response to @cferdinandi 's recent post(s) on JavaScript and Web Components:
https://dev.to/maxart2501/javascript-is-not-the-problem-k4e

I know he didn't explain his position in details, so a 1800-word article sounds a little unfair, but I think dry and sharp statements need adequate context and analysis.

simevidas,
@simevidas@mastodon.social avatar

@MaxArt2501 @cferdinandi We need to talk more about the acceptable amount of JS during page load. So many websites load 5+ MB of JS which is unacceptable. As long as this problem persists, people with low-end phones will have a poor experience on the web.

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