Jesse Jurman

@moritzdietz I’m not #blind or #lowVision, but one value of #AltText for me is that if I don’t understand what I’m supposed to be noticing in the image, alt text highlights the important details - if there is a subtle detail or joke, it can be useful, even for someone who can see the image!

It’s also important to note in all conversations with AI, that these tools are not free, and image processing can use a significant amount of tokens. We should not gate understanding behind a pay-wall.

After a long while tinkering with smaller and smaller ways to build re-usable pieces of HTML, I've landed on something that is simple, and uses the browsers built-in abilities to upgrade elements.

Introducing "ShadowRoot Injector" 🎉
https://github.com/Tram-One/shadowroot-injector

ShadowRoot Injector is a way to declaratively define HTML, that will automatically insert when custom elements appear in the DOM. 🪡

Check out the link and examples, and let me know what y'all think!
#WebComponents #HTML #ShadowDOM #WebDev

Released v3 of Tram-Deco, the declarative custom element library that uses #DeclarativeShadowDOM (which became available in all major browsers this week)!

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

I also added an import method, which allows you to import definitions from other HTML files (relies on `Document.parseHTMLUnsafe`, so millage may vary).

Planning to present this to Web Components Community Group, so I would love any feedback! ❤️

#WebComponents #WebDev #HTML #HTMLFirst #ShadowDOM

Put together a super lightweight and standard-API-focused implementation of Declarative Custom Elements. 👏

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

Exclusively implements all the standard Web Component APIs in an HTML-First approach that should be familiar and easy to pick up 😁 - no special syntax or template language here.

Check the repo for live codepens, and would love to hear what people think! ❤️

#WebComponents #WebDev #HTMLFirst #DeclarativeShadowDOM #ShadowDOM #HTML

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 #HTML

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

External Scripts are now supported in Tram-Lite 🎉

You can use this to load other javascript libraries in your web components, simply by including a script tag 🔧

For a long while, I wasn't totally sure what tradeoffs I would need here, but it turned out to be pretty straight-forward 😁

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

#TramLite #WebComponents #Javascript #WebDev

I love being able to take simple examples on #codepen and being able to translate them directly into reusable #WebComponents

#TramLite makes this super easy because I can take the content, styles, and script tags directly, and don't have to do anything wonky to port them to Web Component classes.

In this example, I create a web component for wavy text. It also includes parameters for the speed, delay for each letter, and bounce distance.

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

#WebDev #HTML

Based on @argyleink amazing compare component, I built a re-usable #WebComponents version of his demo in #TramLite 🎉

Tram-Lite's declarative HTML interface made it pretty simple to port over, and now I can make as many drag-compare elements as I want 😆

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

Tram-Lite v5 is now available 🥳

* new custom element tl-broadcast, that emits events on attribute changes
* new attribute tl-rebroadcast, that can map existing events to new events out from the element

Both of these can emit events up or down the light and shadow DOM, making it possible to define powerful behavior between components, all in HTML! 😮

Check out the docs and examples on the website! 📜

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

#TramLite #WebComponents #htmlFirst #WebDev #HTML

Added #CodePen live widgets to the Tram-Lite documentation. It's awesome to be able to embed a live playground in any page, and makes it that much easier for people to kick-start using the project. 🎉

And, since everything is in #html there's no tab switching required 😁

Check it out here: https://tram-one.io/tram-lite/#tl-definition

#TramLite #htmlFirst

Happy to share that Tram-Lite now supports exporting and importing components! 🎉

This means you can create web-components with Tram-Lite and share them to be used in any project! 🔧

You can read all the details here: https://tram-one.io/tram-lite/#importing-and-exporting

If you haven't already, now is the best time to start building
(and now sharing) components with Tram-Lite!

If you make something cool, you can even make a PR for some hacktoberfest cred 🎃 :github:

#WebComponents #WebDev #HTML #TramLite #HTMLfirst

#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

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

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

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

Just pushed a release yesterday, now you can define multiple web-components all in a single ComponentDefinition tag in Tram-Lite! This makes defining a lot of tags all at once much easier!

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

I added this after seeing someone want to do this with their own project using Tram-Lite. If there's anything you'd like to do with Tram-Lite, reach out, and I'd be happy to discuss and help!

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

#TramLite #WebComponents #HTML #WebDev

@noleli my own shameless self-promotion, #TramLite is a great option that lets developers build native web-components right in HTML!

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

For a while now I've been working on the 7GUI Tasks outlined in https://7guis.github.io/7guis/

It's been a great way to vet what is easy and what is difficult to do in Tram-Lite, and a big part of the changes that led to the v3 API.

With all that said, here it is, the 7GUI tasks, in Tram-Lite: https://jrjurman.com/Tram-Lite-7GUIs/

And if you'd like to build something in Tram-Lite, check out the site here: https://tram-one.io/tram-lite/

#TramLite #Frontend #WebDev #7GUIs #Javascript #HTML #WebComponents

Super excited to post about the release of Tram-Lite, v3! 🎉

This release is super exciting because it includes a way to make native web-components right in your HTML template! 🥳

No build tools, no compliers, no custom server language. You can even ditch Javascript, if that's your jam 😅.

Check out the documentation, examples, and guides at https://tram-one.io/tram-lite/ 📓

#WebDev #WebComponents #TramLite #Javascript #HTML

Tram-Lite is smaller than ever now - you can get a minified version, that over the wire (gzipped) is only 1.2 kB 📦

On a slow connection that's still only 25ms to download, and on a fast connection 1ms 🏎️

There's certainly diminishing returns as you get smaller and smaller, but it's really cool to this project rank so well against other light javascript libraries!

https://bundlephobia.com/package/tram-[email protected]

#TramLite #WebDev #JavaScript

I put together an initial guide for getting started with Tram-Lite! 🎉

https://tram-one.io/tram-lite/#building-components

This is an great launching point for anyone who is interested in learning how to build native web-components using this library.

It's super simple and easy, and doesn't require any installations or tools. Your favorite code editor and a browser (or codepen) is all you need to get started!

#WebComponents #WebDev #TramLite #Javascript

Still needs a little polish, but the site now has all the important documentation for Tram-Lite!

Includes API methods, guiding principles, and plenty of examples sprinkled throughout!

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

#TramLite #WebDev #Javascript #Frameworkless #WebComponents

Another small web-app using Tram-Lite, this time, a calculator! Big motivation here was something with a clear paper tape (especially for #boardgames scoring 🤣)

https://jrjurman.com/lite-calculator/

#TramLite #WebApp

Added #e2e tests to Tram-Lite, using #cypress 🎉

In the past, I've usually leaned on #jest and #TestingLibrary but even for this super simple library, Cypress was easy, incredibly fast, and better reflects the actual behavior of the browser.

I understand for libraries it feels like unit-tests should be the go to, but over time I've realized that e2e forces you to put your library in real scenarios, rather than fake / idealized scenarios that might not happen.

#TramLite #WebDev #testing

Added a cheat sheet for Tram-Lite, which honestly has more to do with #webcomponents than anything else, but I've found there are a lot of cool native tools for interacting with web-components (and hopefully Tram-Lite can simplify everything else 😄 )

https://github.com/Tram-One/tram-lite/blob/main/CHEAT_SHEET.md

#WebDev #TramLite #frameworkless

Setup some guiding principles for Tram-Lite. In a lot of ways, these principles have been guiding the development, but also the development has been shaping the principles. Not sure if writing these down will change that dynamic, but at least it's on paper: https://github.com/Tram-One/tram-lite#guiding-principles

#TramLite #frameworkless

And this project has been a testing ground for a #webcomponent library that I've been building, Tram-Lite. It's a simple view library, that is more inline with JSX, but is specifically made with vanilla #javascript in mind. #TramLite

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

@develwithoutacause @eliajf #Jest is definitely the industry standard, and has a lot of backing behind it - great interactive CLI and works great with tools like #testing-library and #jsdom - would definitely recommend checking that option out!

Hey All! #introduction time!

I’m a software engineer - focused on #frontend #webdev #CICD and #testing

I spend a lot of time building tiny libraries, useful chrome extensions, and simple web-apps

Outside of that, I spend a lot of time playing #boardgames, collecting #laserdiscs, and learning #steno

I'm excited to be here, and can't wait to see how this platform grows!