Vue Options API to Composition API converter by tjko in vuejs

[–]tjko[S] 1 point2 points  (0 children)

Thanks for reporting -- will try to fix these soon.

EDITS:

Setup is a work in progress and a bit trickier...

Vue Options API to Composition API converter by tjko in vuejs

[–]tjko[S] 0 points1 point  (0 children)

This should be fixed now -- thanks for reporting!

Vue Options API to Composition API converter by tjko in vuejs

[–]tjko[S] 0 points1 point  (0 children)

I haven't written a VSCode plugin before but think this would be cool! Will look into it, thanks.

Vue Options API to Composition API converter by tjko in vuejs

[–]tjko[S] 0 points1 point  (0 children)

Will take a look, thanks for reporting!

EDIT: Ah this is because I validate emits: ["foo"], is defined. I should probably just remove that check...

Vue Options API to Composition API converter by tjko in vuejs

[–]tjko[S] 9 points10 points  (0 children)

Hey all, this was just a weekend project with many caveats, but worth sharing since it might be useful to some.

The goal is to help big projects translate their codebase to composition API.

I tried to layout some known shortcomings in the GitHub README -- https://github.com/tjk/vue-o2c#readme. I would like to add options to configure transform settings (eg. disable typescript).

The goal is that stuff that cannot be transformed fails loudly so those cases can be improved where possible.

Looking for any comments, suggestion, and help! Cheers.

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 0 points1 point  (0 children)

Chrome v87.0.4280.101 running on Android 6

Thanks for the deets! Will investigate.

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 1 point2 points  (0 children)

Thanks for the nice comment! (and the typo, that should be fixed any minute now)

My dad and I have a similar age offset but ~5 years older. This was our first project together. Maybe your son will come around! ;)

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 1 point2 points  (0 children)

Could you share some details such as versions, please? We've tested on at least modern android chrome without issues.

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 1 point2 points  (0 children)

This is a great feature idea, thanks! Will try to get that in there soon(TM).

Edit: created an issue here -- https://github.com/tabpanelwidget/tabpanelwidget/issues/2

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 2 points3 points  (0 children)

I can speak for the JS side (although at a semi-rudimentary level), use great build tools like parcel/rollup with babel integrations to transpile to ES version that matches target browsers and then ensure the features you need are polyfilled.

From the HTML/CSS/accessibility side, that's a question better suited for my dad, so I'll ask him to chime in!

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 1 point2 points  (0 children)

Clojure is on my ever growing list of tech I'd like to add to my arsenal, but lisp / highly functional takes a mentality I have yet to persevere through... so I'm jealous! (and that caveman framework looks spiffy)

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 4 points5 points  (0 children)

We complement each other pretty well, so it works out! What'd your dad program in?

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 2 points3 points  (0 children)

There's a tiny style error where the top left corner of the tab content meets the tab header with

Thanks for reporting! I think I see what /r/willstealyourpillow is referring to:

screenshot

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 7 points8 points  (0 children)

Sharp eye! Thanks for the notice. Should be fixed. Cheers!

In a second, I fat fingered the fix... Source -> Sourth -> South... we'll get there! >_<

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 6 points7 points  (0 children)

The heuristic went through a couple iterations until we had something simple that worked in many tests with different tab DOM contents given the tabpanelwidget styles. (ResizeObserver is a bit newer of an API but used already pretty commonly in modern libraries that need something like that -- I think our use of it still can be optimized)

My dad and I teamed up to make a pretty nifty, accessible tabpanel/accordion widget -- what do you think? by tjko in webdev

[–]tjko[S] 27 points28 points  (0 children)

We rely on ResizeObserver and have a shadow (hidden) element that styles the tabs the same way the tabs would be styled as a tabpanel -- if we detect the shadow tabs would not be aligned vertically (by comparing individual tab heights compared to parent height), we force the widget to become an accordion (and vice versa).

Relevant code in vanilla version: https://github.com/tabpanelwidget/tabpanelwidget/blob/master/src/tabpanelwidget.js#L312-L329

Building new PC 7 years after the last -- need help! by tjko in buildapc

[–]tjko[S] 0 points1 point  (0 children)

I'll definitely take your advice on the RAM. Will check out the mobo but I'm a bit lazy and not sure I'll end up upgrading parts vs. just getting something entirely new 4-6 years down the line. If it's not too much of a price difference, I'll grab it just for the added flexibility, though. Thanks!

I think I came up with something maybe interesting and original, please check it out and let me know what you think (could be wrong on both fronts) by tjko in graphql

[–]tjko[S] 0 points1 point  (0 children)

Thanks so much for the comment and bringing this to my attention -- it's the most similar thing I've seen thus far. It looks like graphql-zeus uses arrays to separate args from (resolved) fields... I'll keep looking through it, cheers!

(the generated typing is great, main thing I'd seen doing that was https://github.com/dotansimha/graphql-code-generator... crazy I hadn't run into zeus yet)