Jon

Building

[Jon @joncrnl]

@zeeg Glad you ended up liking it!

[Jon @joncrnl]

@ACozyGamer Do you happen to have a spreadsheet/doc for the data? Would be cool to have a site to compile all of this.

[Jon @joncrnl]

@heychazza Thanks! CSS can be pretty powerful nowadays. I guess view transitions might be able to work here but did not use it for this. Just css. View transitions are not interruptible so I tend to avoid it for these kinda use cases.

[Jon @joncrnl]

Tried recreating this morphing modal with a reusable component that uses css for the morph transitions and a little bit of javascript for the state switching logic. Would be simpler to implement using Motion but this avoids the added bundle size if you aren't already using the library. Link below.

[Charlie J @heychazza]

Morphing Modals 🪄

Some cool new UI that @leyeConnect and I have been working on for @AtoBeach - totally didn't spend all night perfecting this 😅😂

[Jon @joncrnl]

@sorenblank Much appreciated! Thanks for the idea.

[Jon @joncrnl]

Really liked @sorenblank's use of svg to create animated dashed borders so I tried creating a ui component that can apply a similar effect to any positioned element and has visual properties that are easily adjustable. Link below.

[Soren @sorenblank]

SVG is really fun! here my recent exploration of svg dashed animations for @tryarchitect.

`stroke-dashoffset` being used here to animate the offset effect. can be bit tricky.

@ keyframe {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: ${-dashCycle}; }
}

[Jon @joncrnl]

Find it here: https://t.co/9b9bDpkKVc

[Jon @joncrnl]

@sorenblank You can find the component here: https://t.co/rUjj7ZwCh7

[Jon @joncrnl]

@zeeg @zachrip_ Still a few months out from release anyway. Just a vague 2nd half of the year release date.

[Jon @joncrnl]

@jh3yy Llms with nuanced niche/newer css can be so frustrating sometimes. With certain things, it needs a constant back and forth and gets things wrong. Having the llm use a browser can help with that but uses a ton of tokens.

[Jon @joncrnl]

@pbakaus @TheDisguise01 Thanks for the quick fix! Working well now.

[Jon @joncrnl]

@pbakaus @TheDisguise01 Love the update but I tried running npx impeccable skills install with the new default i- prefix and it ends up adding the prefix to all skills for every harness. Also, cli says commands should be available as /i-<command> but the commands are not listed as individual skills.

[Jon @joncrnl]

@uixmat @OpenPanelDev Ayy good to see it. Definitely the best analytics out there.

[Jon @joncrnl]

@zachrip_ @zeeg Text fringing isn't really an issue on this monitor due to the higher resolution. There are no oled ultrawide monitors out yet with the "true rgb" pixel layout. Probably next year for that.

[Jon @joncrnl]

@zeeg @zachrip_ Other manufacturers plan to have monitors with the same panel if the usb hub is something you want but those are a few months out.

[Jon @joncrnl]

@zeeg @zachrip_ It kinda is the equivalent. Just an LG woled panel vs samsung qd oled used in alienware 34". But should be a similar experience other than size and resolution.

[Jon @joncrnl]

@uixmat @shadcn I track mine through nextjs proxy.ts file. Seems to work well. Using openpanel for analytics: https://t.co/1Ekvt0hd7B

[Jon @joncrnl]

@peduarte I'm in agreement but I think the last couple years has conditioned everyone (including me) to make it feel wrong when a button doesn't have cursor:pointer.

[Jon @joncrnl]

@RakibullHassa13 Good middle ground might be having a small transition when being hovered. So it transitions out but not in.

[Jon @joncrnl]

@aidenybai @akigugale Similar issue with scroll wheel. Seems react flow is being used for that diagram which has built-in zoom-on-scroll/pan-on-scroll even though that's not being used here. But it's still interfering with scroll events.