Ján Timoranský

Full Stack Developer

[Ján Timoranský @jtimoransky]

Turns out you can build a whole shadcn-style component collection without a single JS library.
Drawers, dropdowns, tooltips, galleries, accordions... Every interaction runs on pure HTML + CSS, no JS framework, no dependencies. Explore, copy, paste, ship zero JS.

[Ján Timoranský @jtimoransky]

@logan_liffick This would be so cool for the @holopin_ stickers 🤩

[Ján Timoranský @jtimoransky]

You can see how is works at https://t.co/EAWGOL2f9B

[Ján Timoranský @jtimoransky]

Remember Cover Flow from iTunes?
Just added it to unscripted/ui, rebuilt entirely in CSS. Cards fan out in 3D and scroll snaps through them. Another great example of what's possible with no JavaScript.
I also found WebKit supports reflections, what a crazy overlooked feature! 💡

[Ján Timoranský @jtimoransky]

@pqoqubbw @jakubkrehel This is usually the approach I also lean towards as preventing users from using pinch-to-zoom is bad practice

[Ján Timoranský @jtimoransky]

You can find all the components and interactive demos on https://t.co/bk632T9kpz

[Ján Timoranský @jtimoransky]

Turns out you can build a whole shadcn-style component collection without a single JS library.
Drawers, dropdowns, tooltips, galleries, accordions... Every interaction runs on pure HTML + CSS, no JS framework, no dependencies. Explore, copy, paste, ship zero JS.

[Ján Timoranský @jtimoransky]

Turns out you can also build anchored layout morph animations in pure CSS.
A preview grid that smoothly morphs into a dialog. Anchor positioning, the dialog element, and some clever transitions doing the heavy lifting.
Still some polishing to do, but what do you think? 👇

[Ján Timoranský @jtimoransky]

I don't understand why everyone is chasing smaller font size? What's wrong with 16px as a base? I really don't think we should use anything bellow 14px as a base, as it creates a whole set of a11y issues.

[rico @_heyrico]

Product design cheatsheet, bookmark this:

- Font: SF Pro, regular and medium
- Font size: 12px, 13px (base size), 14px, 16px, 18px, and 24px (the biggest)
- Colors: subtle (7F7F7F), default (5D5D5D), strong (292929), bg-selected (F5F5F5), border (F2F2F2)
- Icon: @nucleoicons with 1px width

What else do I miss?

[Ján Timoranský @jtimoransky]

@gabriell_lab This might look like good insight, but in reality, I don't think you should mess with `overscroll-behaviour` property unless absolutely necessary. Just make the browsers do their default thing and don't overthink it.

[Ján Timoranský @jtimoransky]

This morning I realized a quick and easy way to do a stagger animation purely with CSS. The trick is to use `sibling-index()` function to compute the delay 💡

Still not available everywhere, but apart from Firefox, most of the browser should already support this.

[Ján Timoranský @jtimoransky]

Played around with `appearance: base-select` over the weekend by styling a plain old <select> with pure CSS. And it was so much fun figuring this out!
If you'd told me a few years ago this would be possible without any JS lib, I wouldn't have believed you.

[Ján Timoranský @jtimoransky]

@banteg Hey, looks great, but could you share a repository as well? The link on the website is not working.
Also you mention that you decode the original files form the game for the visuals, but the website claims that "All visual assets are recreated from scratch".
So what is it?

[Ján Timoranský @jtimoransky]

@HggEnd @raycast Sure, check out the API implementation in the codebase. If you have all the needed endpoints, it should be easy enough to just create another provider. https://t.co/058I13Fofv

[Ján Timoranský @jtimoransky]

My @raycast extension, Meme Generator, just got a big upgrade 🔥
Added a new API provider (Memegen) with way more templates to choose from. Give it a spin and let me know what you think 🫡

[Ján Timoranský @jtimoransky]

@raycast Ups, forgot to paste a link here 😅 Here you go https://t.co/CPPofkzQLE

[Ján Timoranský @jtimoransky]

@RakibullHassa13 Love the attention to detail here. But I wonder if the alignment on the third screen is intentional? 🤔 Feels a little off to me

[Ján Timoranský @jtimoransky]

@raycast @BetterStackHQ https://t.co/R7kBfMUSFT

[Ján Timoranský @jtimoransky]

Aaaand it's already merged! 🎉 If you're using @raycast or @BetterStackHQ , give it a try and let me know what you think about the update 👀

[Ján Timoranský @jtimoransky]

Lately I found some time to overhaul the @BetterUptime extension for @raycast .

I tried to make the monitors list more clean, organized and looking just right, with colored Raycast native icons.

Small stuff, but the Raycast API is a joy to work with ✨

PR coming soon 🤞

[Ján Timoranský @jtimoransky]

Lately I found some time to overhaul the @BetterUptime extension for @raycast .

I tried to make the monitors list more clean, organized and looking just right, with colored Raycast native icons.

Small stuff, but the Raycast API is a joy to work with ✨

PR coming soon 🤞

[Ján Timoranský @jtimoransky]

@asallen Reminds me of some @holopin_ badges, really cool!