@tbroyer@piaille.fr avatar

tbroyer

@tbroyer@piaille.fr

Web development (frontend, Web APIs), Web app security, build tools, Java, Kotlin, Gradle, etc.

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

jaffathecake, to random
@jaffathecake@mastodon.social avatar

๐Ÿ“ HTML attributes vs DOM properties.

They're completely different, but often coupled.

Here's the difference, and why it matters: https://jakearchibald.com/2024/attributes-vs-properties/

tbroyer,
@tbroyer@piaille.fr avatar

@jaffathecake Great post (as always)

Somewhat related (the first part): https://blog.ltgt.net/web-component-properties/

tbroyer, to climate
@tbroyer@piaille.fr avatar

What if I told you that most promoted actions about climate-friendly software are misguided?

Backing data for that claim and my opinion on the low-hanging fruits:

https://blog.ltgt.net/climate-friendly-software/

Key takeaways:

  • Pick servers in carbon-neutral or low-carbon datacenters first
  • Optimize for the perceived performance and battery life
  • Don't be the one that will make your users change their device
  • Sometimes, ideas aren't even worth their impacts

timbray, (edited ) to random
@timbray@cosocial.ca avatar

Your reaction to the AI buzz:

tbroyer,
@tbroyer@piaille.fr avatar

@timbray There are so many use cases for AI and all the buzz is around "generic" GenAI. Computers should be about automating boring tasks to leave us the creative ones, not the other way around.
So mostly annoyed by the buzz.

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

steal this dialog and popover snippet #CSS

  • transitions
  • entry/exit
  • backdrop included

ready for richer design system integration

try on Codepen
https://codepen.io/argyleink/pen/zYbQBOm

tbroyer,
@tbroyer@piaille.fr avatar

@argyleink Your "IN" and "OUT" comments seem off to me.
IMO the starting-style defines the IN, and the non-starting-style and non-open style (in the first rule, the transitioned properties' values) defines the OUT.
The second rule defines the style of the showing popup/dialog (and their backdrop)

tbroyer, to webdev
@tbroyer@piaille.fr avatar

Announcing Platformer: a set of libraries to help implement:

โ€ข attribute reflection in web components following the HTML specification
โ€ข WebIDL type coercions for your public JS APIs (including web component properties)

https://github.com/tbroyer/platformer

Comes with ECMAScript decorators (compatible with TypeScript 5.2+ and Babel) for vanilla custom elements and Lit elements.

Currently not published on NPM (as I'm still evaluating whether all of this is a good thing worth pursuing ๐Ÿ˜‚ feedback welcome!)

ayo, (edited ) to random
@ayo@ayco.io avatar

Whatโ€™s your preferred app configuration format? Comment explanations or answers not in options (I can only add 4)

๐Ÿ™ pls for science

tbroyer,
@tbroyer@piaille.fr avatar
aeris, to random French
@aeris@firefish.imirhil.fr avatar

2024, go ne sait toujours pas gรฉrer correctement un truc aussi basique que des dรฉpendances et du build reproductibleโ€ฆ

tbroyer,
@tbroyer@piaille.fr avatar

@aeris ร‡a ressemble ร  https://github.com/coder/wgtunnel et un git clone suivi de go build ./cmd/tunneld passe sans encombre chez moi, et sauf erreur les go.mod et go.sum sont lร  pour les dรฉpendances et le build reproductible justement.

$ go version  
go version go1.22.3 linux/amd64  
develwithoutacause, to til
@develwithoutacause@techhub.social avatar

#TIL any errors thrown in attributeChangedCallback get swallowed. They're not propgated to whoever called el.setAttribute('observed', 'data').

tbroyer,
@tbroyer@piaille.fr avatar

@zachleat @develwithoutacause Probably because no built-in element would ever throw when changing an attribute.
State is derived from attributes, but attributes don't directly "set" state, and it's not abnormal to sometimes be in some sort of "invalid state" and you have to cope for it.

Would you like it if you had to be careful updating min, max and value in proper order or it would throw?

See https://blog.ltgt.net/web-component-properties/ where I touch the subject a bit (among other things)

tbroyer, to webdev
@tbroyer@piaille.fr avatar

Built-in HTML elements' properties all share similar behaviors, that don't come for free when you write your own custom elements. Let's see what those behaviors are, why you'd want to implement them in your web components, and how to do it, including how some web component libraries actually don't allow you to mimic those behaviors.

https://blog.ltgt.net/web-component-properties/

nixCraft, to random
@nixCraft@mastodon.social avatar

Does anyone outside the RHEL ecosystem use Podman? ๐Ÿค” Whenever I suggest Podman, other developers or PMs insist on Docker, which is far more popular and has a stronger brand. Even many RHEL users prefer Docker. Red Hat should have addressed Docker's issues instead of creating another tool that, while good, few people want. And yes docker can run rootless too but it has same limitations as podman rootless like can not bind below 1024 port or create device nodes etc

tbroyer,
@tbroyer@piaille.fr avatar

@nixCraft Due to how we use Docker at work (mostly packaging and distribution, running in dedicated VMs as if we didn't use Docker) we've been contemplating using Podman instead to avoid running too many things as root, but haven't had the time to experiment yet. Main changes are UID/GID mapping, important when you use bind-mounts for persistence (rather than volumes) so you want control on IDs outside the container.
Also clients use Podman or kaniko for building images on gitlab ci/cd, rather than docker-in-docker.
I still default to Docker on my dev station but experiment showed I could probably switch to Podman with no impact.

tbroyer, to webdev
@tbroyer@piaille.fr avatar

๐Ÿ“ฃ I've written about how I improved (in my opinion) @stefan' <sparkly-text> by, for instance, moving the sparkles to the shadow DOM. I also left many things to be done though. Of course this is subjective, so YMMV.

https://blog.ltgt.net/web-component-step-by-step-improvement/

Kilian, to random
@Kilian@mastodon.social avatar

The problem with new URL(), and how URL.parse() fixes that

A non-throwing way of parsing a URL is coming to browsers!

https://kilianvalkhof.com/2024/javascript/the-problem-with-new-url-and-how-url-parse-fixes-that/

tbroyer,
@tbroyer@piaille.fr avatar
csscade, to random
@csscade@mastodon.social avatar

Okay, so when making a popover I think the logic should go something like this:

  1. Use title if the content of the popover is just text.

  2. Use the popover attribute if the content is more than plain text and like a menu of options or something.

  3. Use <dialog> if you need to force the user to make a decision or block all other interactions on the page.

https://www.csscade.com/popover-api

tbroyer,
@tbroyer@piaille.fr avatar

@hdv @SaraSoueidan @csscade โ€ฆnow waiting for anchor positioning to make it even easier to position those tooltips (a coworker noted last week when popover became "baseline" that it wasn't really useful without anchor positioning)

aeris, to random
@aeris@firefish.imirhil.fr avatar

Yโ€™a des gens, on devrait leur interdire de toucher ร  un clavier pour coder des trucsโ€ฆ Sรฉrieusement, je tombe sur un projet sympa, jโ€™ouvre le code, jโ€™ai fais une syncopeโ€ฆ
Jโ€™ai dรฉjร  virรฉ tout รงa du codeโ€ฆ

tbroyer,
@tbroyer@piaille.fr avatar

@winy Sans compter la diffรฉrence entre critiquer du code et critiquer la personne qui a รฉcrit ce code

melix, to random French
@melix@mastodon.xyz avatar

Au mรฉmorial de Caen. En ces temps oรน l'extrรชme droite est au plus haut, une piqรปre de rappel bienvenue. Tous les jeunes devraient voir รงa.

image/jpeg

tbroyer,
@tbroyer@piaille.fr avatar

@melix Dans notre coin de la France, on va plus facilement voir le camp de concentration de Natzweiler-Struthof

(un jour, il faudra quand mรชme que j'aille ร  Caen)

nixCraft, to debian
@nixCraft@mastodon.social avatar

DNSCrypt-proxy is an open-source and free software designed to encrypt DNS traffic, thus protecting it from eavesdropping and manipulation. Let us see how to install DNSCrypt-proxy on a 11/12 with Adblocker or Malware blocker https://www.cyberciti.biz/faq/installing-dnscrypt-proxy-on-debian-linux/

tbroyer,
@tbroyer@piaille.fr avatar

@nixCraft Using it with Pi-Hole for a couple years or so, works like a charm!
Didn't know it has built-in support for blocking, but Pi-Hole at least has a great Web UI with stats et al. ๐Ÿ˜‰

melix, to random French
@melix@mastodon.xyz avatar

Les gens qui disent "la Devoxx", ou "au Devoxx", vous dites "la Nantes" ou "au Bordeaux" aussi ?

tbroyer,
@tbroyer@piaille.fr avatar

@melix "les pierres qui roulent" c'est dรฉjร  un groupe nominal pluriel, donc c'est plutรดt "normal" mรชme d'utiliser un article, comme pour "les 3 cafรฉs gourmands" c'est pas choquant.
Par contre pour "Noir Dรฉsir" ou "Tรฉlรฉphone", รงa n'a absolument aucun sens de mettre "les".

Mais pour revenir au sujet, "le Devvoxx" ou "la Devvoxx" peut faire rรฉfรฉrence ร  l'รฉvรฉnement/la confรฉrence, donc si รงa te choque pas pour un nom de groupe pour qualifier ses membres, pourquoi รงa te dรฉrange ici ? ๐Ÿ˜‰

(en vrai, c'est un sujet aussi clivant que "la wifi" ou "le covid", la diff. รฉtant que Devvoxx est une marque donc peut dรฉfinir l'usage officiel dans ses "branding guidelines")

tbroyer,
@tbroyer@piaille.fr avatar

@melix Ils disent probablement "les Metallica", "les Imagine Dragons", "les Panic! at the Disco", "les Ofenbach" aussi (c'est les premiers qui me sont venus ร  l'esprit mais je sais qu'il y a bien pire dans le genre "รงa n'a aucun sens")

develwithoutacause, to javascript
@develwithoutacause@techhub.social avatar

: Always use === over ==.

=== applies much more reasonable behavior for operands of different types, mainly by not coercing them together like == does.

A lot of developers will tell you to learn the rules of coercion and use it when appropriate, however I disagree for one key reason. Consider this example:

if (foo == bar) {  
 doSomething();  
}  

Question: Did the developer mean to use ==? Is the coercion intended or a typo?

It's incredibly difficult to know with any amount of certainty as this depends on the types and semantics of foo and bar.

If I was writing this intentionally, I would feel compelled to write a several line comment about how coercion behavior applies here in a desirable way. And if you need to write that much explanation, it would be much less confusing to actually codify the desired behavior with === and explicit type checks so devs don't have to understand that coercion.

tbroyer,
@tbroyer@piaille.fr avatar

@develwithoutacause @flensrocker Pareto law: it's much more common for null/undefined to be interchangeable than being treated differently, so == null without comment, and add a comment whenever you need === null/=== undefined.

dutchcelt, to web
@dutchcelt@mastodon.social avatar

In the EU, iOS will soon allow multiple browser engines. Is this the end of Safari's dominance on iOS? Will it fall into obscurity? Will it eventually be discontinued? Will the tables be turned as Safari becomes a Chromium browser? That would be ironic.

https://dutchcelt.nl/posts/the-singular-web/

tbroyer,
@tbroyer@piaille.fr avatar

@dutchcelt Do you think Apple continues to invest in Safari because of some sunk-costs fallacy? They could have already switched to Chromium a long time ago, so I don't think this is going to happen.

As for whether Safari will lose its dominance on iOS, I'm not sure either: people don't care about the browser engine, they care about integrations and they (already) use Chrome on iOS because of how it can sync their data with their Google account, whether WebKit or Chromium.

nixCraft, to linux
@nixCraft@mastodon.social avatar

Which installation method do you prefer for your or desktop? ๐Ÿค”

tbroyer,
@tbroyer@piaille.fr avatar
nixCraft, to random
@nixCraft@mastodon.social avatar

Don't lie to me: How many browser tabs do you have open right now? ๐Ÿค”

tbroyer,
@tbroyer@piaille.fr avatar

@nixCraft You don't want to know. I don't want to know. Let's just say new tabs can no longer be seen in the tab bar ๐Ÿซฃ (in both pro and perso profiles)

jimniels, to random
@jimniels@mastodon.social avatar

It does feel like there's a fundamental incongruity in that the web (http) is stateless but user expectations for apps/websites are stateful.

But maybe that's a feature not a bug?

"Hit refresh" is the HTTP equivalent for โ€Have you tried turning it on and off again?โ€

tbroyer,
@tbroyer@piaille.fr avatar

@jimniels That HTTP is stateless does not mean "the web" is stateless. It means state leaves on the client side (if only a session cookie), possibly "linked" to data stored (temporarily?) on the server.
This is what makes it "easy" to have load balancers and shared caches.

rauschma, to random
@rauschma@fosstodon.org avatar

Iโ€™m ambivalent about ad blockers:
โ€“ I understand why people use themโ€”most ads have become nasty and obtrusive.
โ€“ There really arenโ€™t many good alternatives to ads for content creators: People arenโ€™t willing to pay for content but donโ€™t like ads either.

What are your thoughts?

tbroyer,
@tbroyer@piaille.fr avatar

@leeloo @rauschma Not a good metaphor if you ask me. Those who see the ad (or graffiti) on the trains aren't the train owners, they're people who didn't ask for anything and see the train pass by (and train spotters of course, they're not there for the ad either), or passengers at the train station before getting on the train.

Ad networks pay site owners to show ads to whoever "passes by"; they come for the content, and see the ads (more like billboards, that don't move, rather than trains though I'd say).

I do use a blocker because of abusive behaviors. I wouldn't mind less intrusive and more secure and privacy friendly ads.

tbroyer,
@tbroyer@piaille.fr avatar

@leeloo @rauschma Are TV ads graffiti?

(and you're still in control of your screen: don't you choose to visit websites whose owners chose to be paid to have ads?)

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