@jrjurman@fosstodon.org
@jrjurman@fosstodon.org avatar

jrjurman

@jrjurman@fosstodon.org

Software Engineer at Jellyfish. Member of Web Components Community Group. I like building web-apps and drawing diagrams. Fascinated with productivity tools, note taking, and board games. Creator of Tram-One and Tram-Lite web libraries.

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

jrjurman, to webdev
@jrjurman@fosstodon.org avatar

Another update to Tram-Deco 🎉

Been spending some time to make the project smaller, and make it easier to generate components for other projects! This wasn't possible previously, but with the newly released setHTMLUnsafe, we now can!

Also, new logo 🖌️

Check it out, and I'd love to know what you think of this way of creating Native Web Components!

https://github.com/Tram-One/tram-deco

jrjurman, to webdev
@jrjurman@fosstodon.org avatar

Inspired by the mention of Shiki by @chriscoyier in the Codepen Newsletter, I created a Web Component for quickly and easily using Shiki in any project, no tooling or complex builds required, works with all frameworks!

Docs here: https://github.com/JRJurman/shiki-component

Live Codepen here: https://codepen.io/JRJurman/pen/xxeQQxa

#WebComponents #WebDev

jrjurman, to webdev
@jrjurman@fosstodon.org avatar

Working on a way to build Declarative Custom Elements using the newly released Declarative Shadow DOM.

Turned out to only 20 lines of Javascript! I'm surprised how neatly everything kinda works.

https://codepen.io/JRJurman/pen/dyrJWep

There are some gotchas and it certainly could be more elegant, but I think it has the building blocks for building Web Components from an HTML First approach.

#WebComponents #WebDev #HTMLFirst #DeclarativeShadowDOM #ShadowDOM

jrjurman, to accessibility
@jrjurman@fosstodon.org avatar

Building a port of "Tiger & Dragon" as a way to test #a11y in #pico8 - it definitely has its own set of unique challenges, but it's coming together!

#accessibility #GameDev

video/mp4

jrjurman,
@jrjurman@fosstodon.org avatar

This is all in preparation for the Games for Blind Gamers game jam happening next month, if you're interested, be sure to check it out!

https://itch.io/jam/games-for-blind-gamers-3

jrjurman, to webdev
@jrjurman@fosstodon.org avatar

Inspired by Github's callout elements, I published a native web component for adding your own Callout Alerts in HTML! 🎉

https://github.com/JRJurman/callout-alert

It's customizable with both CSS Variables and slot elements, and comes with an icon library for any icon you might want! 🔧

After a full year working on a library to build Web Components, this is admittedly the first one I've published outside of any specific project, but it won't be the last! 😁

#TramLite #WebComponents #WebDev #HTML

khalidabuhakmeh, to random
@khalidabuhakmeh@mastodon.social avatar

Maybe web clients should allow TLDs to register #webcomponents once per user session (unless the source cache is invalidated).

This would speed up page renders throughout a session.

Do you folks think that would be a good idea, or is it fraught with issues?

Are there existing strategies to make encapsulated web components load faster?

jrjurman,
@jrjurman@fosstodon.org avatar

@khalidabuhakmeh This was actually a topic brought up in the #WebComponentsCG meet up with the implementers, specifically, we discussed the idea of persisting component definitions across page loads: https://github.com/WICG/webcomponents/issues/1033

The sentiment we gathered was that there were definitely technical complications involved here, but could be solved (or, at least, made easier) if progress is made on declarative custom elements!

jrjurman, to webdev
@jrjurman@fosstodon.org avatar

#hacktoberfest has officially started 🎃 :github:

I hope everyone has some awesome projects they are working on, and a great experience working with the open source community 🎉

If people are looking for a project to contribute to, Tram-Lite has a call for Projects and Posts.

https://github.com/Tram-One/tram-lite/issues/39

If you write a blog post, a small component in codepen, or a full blown project, it's all fair game for making a PR and linking on the website! 🔗

#TramLite #WebDev #FrontEnd

jrjurman, to webdev
@jrjurman@fosstodon.org avatar

Excited for the new Tram-Lite v4 - which makes Tram-Lite an HTML-first library for developers that want to build and work with web-components! 🎉

https://tram-one.io/tram-lite/

Attributes for 2-way data binding, and retriggering scripts on attribute changes, all in HTML 😮

Also, a way for developers to build their own custom behaviors for elements! 🔧

This has been in the works for a long while, and there's still more awesome things to come! 😁

#WebDev #WebComponents #TramLite #HTML #htmlFirst

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

A Web Component for Swapping Text between Text, HTML, and Markdown: https://chriscoyier.net/2023/09/25/a-web-component-for-swapping-text-between-text-html-and-markdown/

jrjurman,
@jrjurman@fosstodon.org avatar

@chriscoyier Nice article! Thanks for the shoutout and links to Tram-Lite, and more importantly, the feedback on Tram-Lite!

Here's some off-the-cuff thoughts...

(I had tried to comment these on the original post, but the formatting looked horrendous, so you'll have to deal with my thread here 😄)

jrjurman, to webdev
@jrjurman@fosstodon.org avatar

Very excited about what will be the v4 release of Tram-Lite - an HTML-first way to build or enhance web-components!

https://github.com/Tram-One/tram-lite/pull/30

There's still some administrivia, docs and so on, but if anyone is interested, there's a beta release that people can try out right now!

https://unpkg.com/tram-lite@beta

Happy to take any questions and feedback here on Mastodon!

#WebComponents #HTML #htmlFirst #TramLite

jrjurman,
@jrjurman@fosstodon.org avatar

@chriscoyier
Yeah, the way we processed script tags in templates was a little wonky in v3 😅, and luckily had an opportunity to clean it up in this new version. It’s much nicer now 🎉

I haven’t had a chance to play around withtype="module", but I’ll give it a try the next time I’m in front of my computer! 👀

jrjurman,
@jrjurman@fosstodon.org avatar

@chriscoyier okay, spent some time with this, and couldn't get anything working with type="module" script tags 😓

This is in-part because with tl-effect we're just doing an eval on the spot with the inline content, and that does not have the functionality that you get with type=module (like top-level await, or import)

Depending on the use-case, you might be able to use dynamic import (using the import() syntax).

I'll look a little more here, but most likely it'll be a post v4 release.

jrjurman,
@jrjurman@fosstodon.org avatar

@chriscoyier I didn't previously have an example with radio controls, but trying to put something together is proving to be quite the challenge 🤔

The fact that radios don't have any kind of event when they are switched off makes it difficult to track them with just tl-controlled.

The farthest I could seem to get was this example - https://codepen.io/JRJurman/pen/KKbyGMO?editors=1001

Looking online, it doesn't seem like I'm alone in struggling to handle radio controls - it's something I'll have to play more around with!

jrjurman,
@jrjurman@fosstodon.org avatar

@chriscoyier Okay, played around a bit more here, and it looks like the play is to have two script tags, one to keep track of a "value" attribute, and another one to keep track of the different radio control checked-states: https://codepen.io/JRJurman/pen/yLGpYRP?editors=1001

jrjurman,
@jrjurman@fosstodon.org avatar

@chriscoyier Looks nice!

Another option, which I'm in the middle of documenting now, is using the TramLite.appendShadowRootProcessor - this method enables the existing tl-controlled and tl-effect attributes to work, and can be used to build other bindings between web-components and elements in the shadow DOM.

https://codepen.io/JRJurman/pen/NWeXQpg?editors=1000

The example I included here is basically a copy-paste of ControlledInput. Hopefully this method enables other people to extend and build new attributes

jrjurman, to webdev
@jrjurman@fosstodon.org avatar

Thanks @chriscoyier for the shoutout of Tram-Lite in the recent CodePen blog post:

https://blog.codepen.io/2023/09/04/chris-corner-web-components-dont-need-you/

While adoption may be slow still (and as you mention, rightfully so), no reason why people can't start playing around, and getting familiar with Web-Components today!

#TramLite #WebComponents #CodePen #WebDev #HTML

schizanon, to javascript
@schizanon@mas.to avatar

I fear that a LOT of people are going to start using #HTMX for the same reason they use #TailwindCSS; it saves them from having to learn a language they don't like. #javaScript #css

jrjurman,
@jrjurman@fosstodon.org avatar

@schizanon Maybe I just didn't give TailwindCSS enough of a shot, but my experience was: oh, add a bunch of build tooling, to learn something adjacent to CSS, but still need CSS if I ever want to tweak something, at which point I could have just done the whole thing in CSS.

HTMX looks like there's unique value, but haven't had a chance (or strong reason) to try it out in a real project.

jrjurman, to webdev
@jrjurman@fosstodon.org avatar

I've been doing some searching, and it just didn't seem that there were any dead-simple options for importing external HTML content. So, here's my hat in the ring, super simple, and uses native web-components 👏

And for all the people who don't want to bloat with another dependency (no matter how small), I hope this is just a great template for people to copy into their own repos!

https://github.com/Tram-One/html-import-element

jrjurman, to accessibility
@jrjurman@fosstodon.org avatar

Are there any articles or guidelines on making native web-components accessible? I enjoy making them, but I'm not totally sure how much content in the shadow DOM is actually accessible 🤔

#WebComponents #a11y #accessibility #WebDev

jrjurman,
@jrjurman@fosstodon.org avatar

Also, I understand a great way to validate #accessibility is also "just test it!" - but I'm not actually totally familiar with what accessible interactions should look like on the web. What should an element say or not say? Any articles or good starting guides for this would be super appreciated!

#WebDev #a11y

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