Search
94 results for “jrjurman”
-
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
-
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
-
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
-
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
-
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! 😁
-
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! 😁
-
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! 😁
-
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! 😁
-
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! 😁
-
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 😁
-
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 😁
-
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 😁
-
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 😁
-
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.
-
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.
-
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.
-
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.
-
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.
-
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 😆
-
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 😆
-
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 😆
-
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 😆
-
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 😆
-
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!
-
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!
-
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!
-
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!
-
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!
-
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