@westbrook@mastodon.social
@westbrook@mastodon.social avatar

westbrook

@westbrook@mastodon.social

Open web enthusiast. Maker of things with HTML, CSS & JS. Trombonist. Food lover. 日本語OK. Opinions are owned by no one but my myself.

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

westbrook, to webdev
@westbrook@mastodon.social avatar

#vite would be such a better tool if it wasn't doing some non-platform thing with platform primitives at every turn. Or at least, could it have a "vite, but for people who actually like the web" configuration option?

🤦‍♂️

#webdev

westbrook,
@westbrook@mastodon.social avatar

@tbroyer Lots of other, but today's problem:

import './styles.css'; is a magic invocation that automatically injects the CSS as a <style> tag. The only way I can see to get around that is locally to include "?inline" in the URL, which then has to be done every time, or to write a plugin in order to force all URLs to work roughly like that.

This is on top of it having issues with import styles from './styles.css' with { type: 'css' }; that are just as hard to work around.

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

Proposal for Mastodon to have a “pull my finger” option to diffuse heated conversations

westbrook,
@westbrook@mastodon.social avatar

@DavidDarnes https://www.myinstants.com/en/search/?name=fart?

westbrook, to webdev
@westbrook@mastodon.social avatar

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

#maintainerLive #html #css

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

jQuery plugins depended on jQuery, and when jQuery went out of favor, they ended up in the junkyard.

There is all sorts of componentry built exclusively on React, limiting it to React-based sites. As React goes out of favor, they will end up in the junkyard. (Same with any framework-specific extension.)

But with Web Components... it seems like the story will end differently. If they are built without dependencies, they might just live as long as the web does.

westbrook,
@westbrook@mastodon.social avatar

@chriscoyier That's not wholly true. jQuery plugins and React components fail over time because they belong to their dependencies, not the other way around.

A properly encapsulated can have just any dependencies it wants as long as they don't leak. In fact, the internal dependencies could be jQuery or React as long as the consuming app doesn't need to know about it.

There are performance realities there, but that's true today as much as it would on the last day of the web.

pablolarah, to webdev
@pablolarah@mastodon.social avatar

💡🌖 But what about the shadow DOM?
by Chris Ferdinandi @ChrisFerdinandi @cferdinandi
#WebComponents #shadowDOM #webdev

https://gomakethings.com/but-what-about-the-shadow-dom/

westbrook,
@westbrook@mastodon.social avatar

@pablolarah @cferdinandi

> And declarative shadow DOM doesn’t fix the JS dependency. You may author your code as HTML, but it’s in a <template> element, hidden from the user. It only becomes visible after JS loads.

This is incorrect. #devlarativeShadowDOM is parser magic, not JS magic.

westbrook,
@westbrook@mastodon.social avatar

@cferdinandi @pablolarah turnoff you JS and you’ll still see https://codepen.io/pen/

westbrook,
@westbrook@mastodon.social avatar

@cferdinandi it is JUST shadow DOM, which can have varying levels of benefit, especially alone. But, not needing JS for it is another step in the right direction.

noleli, to random
@noleli@mastodon.social avatar

Ok #WebComponents fam, question for ya. A well-known limitation of ::slotted() is that it only selects direct children. I’m making a component that wraps nested lists and I want to apply styles to all child slotted <ul>s.

Is it reasonable to work around this by having the component have the parent document adopt a stylesheet?

westbrook,
@westbrook@mastodon.social avatar

@cferdinandi @noleli Isn't this an "HTML Web Component" question as well?

I have a <custom-element> and my light DOM children should have default styles, for reasons.

Either, require consumers to use both <script> and <link rel="stylesheet"> tags.

Or, do something to injects the styles, e.g. push them into the adoptedStyleSheets of the root element.

Both can go wrong...

Needing a specific level of design control to be "successful" futher alters the paths available to a developer.

westbrook, to random
@westbrook@mastodon.social avatar

The best way not to make problems while developing software is to do less. If you ever find yourself doing a lot of work, you're likely doing something wrong and if you don't take a good hard look at what you've actually doing now future you is gonna wanna smack you in the face...

tomayac, to Flutter
@tomayac@toot.cafe avatar

📢 Accessibility in Flutter on the Web—How Flutter aims to make canvas-rendered apps accessible to users of assistive technologies: https://medium.com/flutter/accessibility-in-flutter-on-the-web-51bfc558b7d3. I’ve reverse-engineered what Flutter does (peer-reviewed by Flutter engineers). Note that I haven’t tested if the approach actually works for users of assistive technologies; I’m not qualified to do that.

westbrook,
@westbrook@mastodon.social avatar

@tomayac would be cool them joining in on the conversations with the AOM WG around Virtual Accessibility Nodes. Might support the quality issues they’re seeing around delivering an accessibility tree performantly. A generic API for this would open the door for canvas UIs that aren’t just replacing normative UIs, say drawing applications at al, to deliver a quality accessibility tree as well!

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

I want light DOM <slot>s for #WebComponents, but they allow WCs to insert content into light DOM elements

westbrook,
@westbrook@mastodon.social avatar

@DavidDarnes is that different than templating generally? The bi-directionality of it seems quite interesting.

westbrook, to random
@westbrook@mastodon.social avatar

I had a giant turtle chase me at a ceramics gallery today!

A small turtle cases the camera person much like a dog wanting to be pet.

Edent, (edited ) to webdev
@Edent@mastodon.social avatar

A #SemanticWeb poll for all my
#HTML friends!

Suppose you have comments on your website. They all have a valid <time> element in them.

Comments are displayed in a nested list, with the oldest first.

Should you use:

westbrook,
@westbrook@mastodon.social avatar

@Edent <article><header>Comment meta, etc. <time>…</time></header><section>Comment</section><footer>reply/share/etc</footer></article>?

erikKroes, to accessibility
@erikKroes@mastodon.social avatar

Why do we assess products, while we want to improve processes?

It's a question that's bugging me. It's not effective. It's not efficient. It's not sustainable. Let's say I have some thoughts, and I'm working on them.

But I'm curious, what do you do besides audits?

#accessibility

westbrook,
@westbrook@mastodon.social avatar

@erikKroes I can’t imagine that accessing process would point to many places other than leadership, which is like the number one cause of leadership choosing not to allow something to happen… yes, the deeper implication there is that THEY KNOW.

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

“Doing things online is great because you don’t get stuck in a customer support queue”

westbrook,
@westbrook@mastodon.social avatar

@DavidDarnes Does their DBA need to manually inject your authentication token?

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

Put AI in CSS, you cowards.

westbrook,
@westbrook@mastodon.social avatar

@zachleat @mia Don't be a LLemming Zach!

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

PREVIOUSLY:
separate rulesets for light and dark

NOW:
one ruleset with light-dark()

more by @bramus here 👇🏻
https://elk.zone/front-end.social/@bramus/112169653556659015

video/mp4

westbrook,
@westbrook@mastodon.social avatar

@argyleink @bramus When do we get support for applying user preference at the page/domain level so that developers can use this and visitors still get full power over the color scheme they end up with at all times?

bkardell, to random
@bkardell@toot.cafe avatar

Sometimes when I have to give my name I say "K" hopefully before they type "C", "A-R" and then I have two similar sounding letters, so I say "D ... as in Dog", "E... as in elephant", "LL"... and sometimes I say "as in Cool J", but no one has ever even chuckled at this.

westbrook,
@westbrook@mastodon.social avatar

@bkardell But, I'm sure you've gotten, 'where does the "j" go in "Cardell"'. Right?

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

Deleted a frankly way too fragile dependency within my site. I was using degit to pluck out some CSS from Ghost without having to download the whole thing on install. However I didn't need it as I wasn't even using the things they style.

Goes to show that you should really only add CSS to a project when you know it's going to get used, even when it's boilerplate or reset stuff

westbrook,
@westbrook@mastodon.social avatar

@DavidDarnes What are your favorite ways to track whether something is being used to know when to add/remove CSS in this way?

westbrook, to webdev
@westbrook@mastodon.social avatar

Lots of very interesting ideas today at the #webComponentsCG's #declarativeCustomElements Demo Days no. 1! 🔥

If you missed out, you can find more info at https://github.com/w3c/webcomponents-cg/issues/84

If you never want to miss out again, join the convo at https://discord.gg/s933rmKR9R

If you want to see Demo Days no. 2, share you availability and subscribe to https://calendar.google.com/calendar/u/0/embed?src=o25bim5rvcu42mfnqilirpmp44@group.calendar.google.com

See you there! 👋

#webDev #w3c #declarative #webComponents

westbrook, to random
@westbrook@mastodon.social avatar

The #webComponentsCG has two community protocols https://github.com/webcomponents-cg/community-protocols/pull/15 and https://github.com/webcomponents-cg/community-protocols/pull/45 that we have resolved to raise as "Proposal" protocols on the 25th of this month. Share your thoughts, today!

How might you leverage these techniques in your #webComponents?

Any visible blockers to these interoperating with the contexts in which you work?

Community Protocols target optional, knowable APIs for broad interoperability across UI delivery, don't get locked-in to you tools, today!

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

If you are working on two npm packages, on of which depends on the other (say B depends on A), what is your process for making changes to A and trying them out on B without npm publish?

So far the best I’ve found is changing the package specifier to point to the local repo + npm install but there must be something faster and less error-prone? (so many times I forgot to change it back and committed the package.json with the local specifier!)

westbrook,
@westbrook@mastodon.social avatar

@leaverou When you use link it intercepts the remote version so that you only can have the local version until you release the link.

How would you want them to work "together"?

owa, to random
@owa@mastodon.social avatar

Apple backs down on killing web apps! 🎉

But the fight goes on!✊

Read More: https://open-web-advocacy.org/blog/apple-backs-off-killing-web-apps/

westbrook,
@westbrook@mastodon.social avatar

@simevidas @owa If only the regular people out there understood that all the browser were the same today, then I'd have hope they'd understand why this was happening and not blame it generally on the web.

westbrook,
@westbrook@mastodon.social avatar

@owa Love to see it!!

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