Hello #FediVerse - The dedicated account for #Teskooano is live!

What is Teskooano you say? It's a web-based #3dEngine made with #threeJS and #webComponents to display N-Body systems. https://teskooano.space

It's buggy, still a lot of work to do - but it's already up for you to try out - it's also a #mobile friendly #pwa you can install and use offline!

Here's a new addition to the WC Toolkit - the Changelog. It compares two versions of a Custom Elements Manifest to let you know what changes were introduced between versions of your #webcomponents library.

https://wc-toolkit.com/adoption/changelog/

Another #Teskooano release today - I've done another bunch of performance improvements, UI improvements and added a couple of new features (like import/export JSON)

It's also now an offline-only #pwa - you can install it, go offline and it works perfectly as it has no backend dependencies - it's fully #procedural

Did a big UI refactor for Teskooano today - now it's a lot more responsive, and big performance gains.

https://teskooano.space/

Teskoanno is now live! My #threejs powered 3D N-Body simulator is now up - it's a dev build, and not optimised but it works! I tested it on mobile - UI needs to work, but runs well on my Pixel 8 Pro.

Would love to get #feedback

https://tanepiper.github.io/teskooano/

#gamedev #astronomy #webDev #webComponents #vanillaJS #opensource

(Bonus debug tools screenshot)

Is there a CSS equivolent to JSDoc? It would be really nice to co-locate my docs next to my CSS variables in my web components.

Today, I'm excited to release the CEM Validator for your #webcomponents!

This is designed to be an automated check before your components go to production. I know there is a ton of stuff that can be added to this, but I decided to start small. Features include:

package.json validation
module and definition path validation
a check to ensure you are exporting all types for your APIs
a check to make sure the tag name is present for your components

https://wc-toolkit.com/cem-utilities/cem-validator/

Last Thursday I have one engineer talk about ssr & web components at the AmsterdamJS meetup. Click-baity title, but I promise we tried to give the full picture. :)

Has anyone come across any #js lib that helps wire up points (times) in a video to functions? I'm probably going to roll my own, but just wondering if there is any good prior art. The task I have been set is to connect docs and videos together to form sort of tutorial content.

Today, I'm excited to add the #webcomponents Storybook Helpers to the WC Toolkit!

This comes with some new features over the previous version, including:

Performance improvements
Setting API category order
Story-level control over what APIs are displayed

#html #css #javascript #webdev
https://wc-toolkit.com/integrations/storybook/

Over the weekend I built a web component "mini-framework" that uses signals, avoids decorators, and can use functional components. Would love it if anyone would try it out and let me know what you think!

(It uses preact/signals-core and lighterhtml under the hood)

#webcomponents

https://github.com/JimSchofield/minne

I'm happy to roll out the new and improved CEM Inheritance package! This allows API data to be properly inherited in the Custom Elements Manifest for your #webcomponents.

A new feature is that you can now omit inherited APIs from the CEM using JSDoc tags. Enjoy!

https://wc-toolkit.com/documentation/cem-inheritance/

I just noticed Rotten Tomatoes is rockin' some pretty serious #webcomponents!

https://www.rottentomatoes.com/

ElementInternals.type

https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md

I have a couple of big things planned this year. The first is to move all of my open-source #webcomponents tools under one banner to make them more official and easier to find. Today I am excited to release the Web Components Toolkit!

https://wc-toolkit.com/

In that it was dropped as part of a thread that you might have otherwise been uninterested in, sharing this again to start your Thursday:

https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/

Catch up on some techniques for managing connection time work in a custom element. There's even reasons for using shadow DOM hidden in there.

Thanks @nachtfunke for starting the convo on this and @zachleat for challenging a toot into a full on blog dump.

Hello #webcomponents people. Lets say you need to do a <custom-parent><custom-child> typ of thing, how do you actually do that? I am asking because I noticed that the connectedCallback is firing twice, once you move things around in there and I don't know how to fix it.

I am not using shadow dom.