101–110 of 114 posts
Earlier quoted context omitted.
That causes CLS which is also an issue
My apologies. By 'hide', I meant hide visually (through `opacity: 0`) that keeps the space reserved to avoid CLS.
Earlier quoted context omitted.
It’s extremely common to support the two most recent major versions, especially for iOS. It’s great if things work on iOS 14, but it’s been explicitly out of support for over a year in a vast number of organisations.
That's the well-established expectation for iOS. The web has a pretty different set of expectations, one of the reasons for its success.
Take a look at the defaults for browserslist, for example:
https://browsersl.ist/#q=defaults
It just barely supports Safari 15, on iOS only, and that’s likely to go away imminently because it’s under 1% usage.
Browserslist is used by a huge proportion of web developers and the tools that they use, with millions of downloads a week. It has nothing to do with native apps and everything to do with the web.
Earlier quoted context omitted.
Sounds like you might like the idea coined as "HTML Web Components": https://blog.jim-nielsen.com/2023/html-web-components/ You basically write all the normal HTML and CSS so it's loaded in right away. But then you also make use of the advantages that defining a custom element gives you.
That's a nice workaround but still just a bandaid in my opinion. Instead of a "flash of undefined component" you get a flash of whatever the vanilla html is before your web component was loaded. Now you have to adjust the vanilla html to look as close to your web component as possible, at which point you may just want to use vanilla html and css altogether and ditch the web component.
We at Microsft used this to build apps.microsoft.com. We're quite happy with the results. Shoelace is customizable, accessible, extensible, easy to use.
You at Microsoft don't use Microsoft's fast.design?
I'm not happy with any of the solutions to prevent a flash of undefined components. Has anyone given up on web components for that reason? Or is there a best practice for this?
You tackle it by doing two things:
1) use a bundler (rollup or webpack) if your code is big so it can be chunked and loaded quickly
2) have a loading spinner by default
Some developers have a dogmatic zeal against loading spinners, but users are very accustomed to them.
In fact, it's possible for websites to load _too_ fast, seeming unnatural to users (who at this point in time are very much expecting the flow to be request->spinner->load).
Earlier quoted context omitted.
That's a nice workaround but still just a bandaid in my opinion. Instead of a "flash of undefined component" you get a flash of whatever the vanilla html is before your web component was loaded. Now you have to adjust the vanilla html to look as close to your web component as possible, at which point you may just want to use vanilla html and css altogether and ditch the web component.
Use a loading overlay that will show for 0.25 seconds if you're that concerned about this
Haven't done frontend in a long time, but how is this different than something like Bootstrap? Is it the fact that it comes also as a React & co library and you can customize properties of a 'component' easier than building your own wrapper 'component' to modify properties which are set via 'data' or 'css' attributes? I guess this leads me to the next question, I saw in a recent project on my company's Github how eve…
It's like Bootstrap, but different. Main difference: it's based on Web Components and Javascript, Shoelace won't render anything without Javascript, without the possibility of Server Side Rendering (Shadow DOM requires Javascript) Bootstrap got kind of stuck in the past. Vanilla Bootstrap is only really usable without a modern frontend framework, as it comes with many Javascript snippets that make the controls intera…
Earlier quoted context omitted.
It’s an 8 year old phone … iPhone 6s was released September 2015…
The issue here is the version of the webkit engine, which ships with iOS and that is 3 years old. Anyway a docs page is basic, it should be compatible regardless.
https://RTCode.io is built on Shoelace 2 today. Just hover over that middle divider between the input>| Also our menus do not follow their keyboard navigation logic at all and adds support for disabled, hidden, inert elements, as well as selection by typing the first letter of menu items. All of these are possible because the author knows what NOT to do with HTML custom elements.
I'm on Firefox and scrolling your site is really slow and also fans is spinning up (I've plenty of RAM and CPU power).
Something on your page is degrading performance (for me).