Vladimir Kuznetsov

Front-end engineer. JavaScript and music addict. I like to listen to various kinds of music. Easy-going person.

[Cory House @housecor]

Problem: You want to know how much of your TypeScript code is type safe.

Solution: type-coverage

This CLI tool reports the percentage of your code that’s type safe.

It reports usage of:
🚩 any
🚩 as assertions (foo as string)
🚩 type assertions (<string>foo)
🚩 Non-null assertions (foo!)
🚩 Use of plain Object type (Object or {})

And it provides a detailed report of all the spots you should consider changing to improve type safety.

Related: Use typescript-coverage-report to get a nice visual output like this:

[Anton Korzunov @theKashey]

That is a very smart usage of useId 😘

[Vladimir Kuznetsov @mistakster]

@devongovett Great job! Congratulations to the team. I’m a huge fan of react-aria and love the way you implemented react-aria-components.

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Trick! 🤙

I got you! You can create this Disney-inspired loading animation with a single element and some CSS ⚡️

The "trick" is to create the ring part with a pseudo-element and offset it against the element 😎

Start with the element, this creates an offset white dot

.loader {
width: var(--size);
aspect-ratio: 1;
background: white;
border-radius: 50%;
position: absolute;
/* Rely on transform order to spin it */
--y: calc(var(--size) * -4.5));
transform:
rotate(0deg)
translateY(var(--y));
animation: spin 1s infinite linear;
}

@ keyframes spin {
to { transform: rotate(-360deg) translateY(var(--y);
}

The ring part is an offset circle that gets masked 😷

.loader::after {
content: "";
width: calc(var(--size) * 10);
aspect-ratio: 1;
position: absolute;
top: 0%;
left: 50%;
translate: -50% 0px;
/* Create a conic-gradient */
background: conic-gradient(
white,
hsl(var(--hue), 100%, 70%),
hsl(var(--hue), 100%, 10%),
transparent 65%
);
border-radius: 50%;
/* Mask it to leave a border. That 1px difference helps with making it look less rough */
mask: radial-gradient(transparent 39px, white 40px);
}

The last piece is the "glow". Use the other pseudo-element and set the offset to -50% and give it a blur filter 😎

.loader::before {
content: "";
position: absolute;
inset: -50%;
border-radius: 50%;
background: white;
filter: blur(10px);
z-index: -1;
}

Why didn't we create the ring with the main element? We didn't want to mask out the blur of the ::before element so we had to work around that limitation and use the offset ✨

Happy animating!

@CodePen link below! 👇

[Cory LaViska @claviska]

Implemented safe triangles to improve submenu selection in @shoelace_style today.

[Matt Pocock @mattpocockuk]

Let's talk about branded types.

If I were building an app where security was critical, I'd use the crap out of them.

[Anton Korzunov @theKashey]

There is a problem hidden inside your lock file - "indirect dependencies" you haven't choose, but got entangled with
It's a huge issue we got from the the npm ecosystem and haven't noticed

Here is an explanation, and the treatment ⬇️
https://t.co/YCnJhwt50g

[Ivan Akulov @iamakulov]

7) Moral:
• ensure &lt;meta name="viewport"&gt; is one of the first tags in your &lt;head&gt;
• watch this talk where @csswizardry goes over this and other similar pitfalls: https://t.co/j3ESJf9AT3 (I wouldn’t realize what I’ve been facing today if I haven’t watched this talk 2 weeks ago)

[just-boris @justboriss]

Oh no, I built yet another state manager for React: https://t.co/e81G8LbOub

[Rony @ronyfadel]

Javascript tip 🚀:
Call `monitorEvents(&lt;dom-element&gt;)` in DevTools, and the console will log all events that are being sent to this element.

[Haz @diegohaz]

CSS tip: hover media query.

Get rid of those hover and active states when scrolling on mobile by checking if the primary input mechanism (e.g., touch) can hover over elements.

[Roman Dvornov @rdvornov]

As usual, CSS is hard...

src(var(--foo)) is valid
url(var(--foo)) is invalid

Curious why? That's an explanation: https://t.co/oucYeV27TL

[Chris Lilley @[email protected] @svgeesus]

Also slides and video from the other talk I mentioned: “Better than Lab? Gamut reduction CIE Lab &amp; OKLab”
https://t.co/SckQ4IjLT9

[Jess Telford 🐘 @[email protected] @JessTelford]

@_developit @smashingmag For those wondering, here's how to create an svg sprite sheet using &lt;symbol&gt; instead of &lt;def&gt; so each sprite can have independent viewBox=, and up to 2 colours defined in .css files: https://t.co/vJK6FJzeqn

[Vladimir Kuznetsov @mistakster]

I’ve just run containrrr/watchtower alongside with my Dockerized applications to update them automatically. It works like a charm.

[一丝 @yisibl]

A modern SVG rendering engine is ready. I'm excited to announce the release of resvg-js 2.0 Alpha with WASM support. now you can even convert SVG to PNG in Web Worker. for Node.js, with resvg-js you can get rid of the heavy Puppeteer or node-canvas https://t.co/sHfvbP0qbi

[Rik Schennink @rikschennink]

You can now edit your photos at https://t.co/dFxQeshZiQ 🔗

🍪 no cookies to accept
🤹‍♂️ no popups to close
👤 no account to create
🎯 no ads to ignore
🕵️‍♂️ no spying on you

✨ 100% free

Paste, browse, or drop your photo and start editing.

[fks @FredKSchott]

*⃣*⃣*⃣*⃣*⃣*⃣
6-digit input component for 2FA, etc.

This is great. So many websites do this poorly!
https://t.co/c7b41WcGvr

[Anton Korzunov @theKashey]

🤯 Concurrent transducers 🤯 by @TomerAberbach

https://t.co/W9Z0oVMIYv

[Anton Korzunov @theKashey]

React 18 will have SSR-friendly `useId` for generating unique IDs you can use to handle accessibility

The same API was available for the last 3 years, including "spilling/stream friendly" `Fork`

⚛️https://t.co/x2ZRmVwSae
🐙https://t.co/Dj3TShoPBK
📖https://t.co/OmIJoRtQBJ