Vladimir Kuznetsov

478 posts

Vladimir Kuznetsov

Vladimir Kuznetsov

@mistakster

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

Chelyabinsk, Russia Katılım Eylül 2013
47 Takip Edilen183 Takipçiler
Vladimir Kuznetsov retweetledi
Cory House
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 (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:
Cory House tweet media
English
27
184
1.4K
172.1K
Vladimir Kuznetsov
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.
English
0
0
1
125
Devon Govett
Devon Govett@devongovett·
Announcing React Aria Components v1.0.0! 🥳 Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles. react-spectrum.adobe.com/react-aria/ind…
English
72
409
2.8K
542.5K
Vladimir Kuznetsov retweetledi
jhey ʕ•ᴥ•ʔ
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! 👇
Zander Whitehurst@zander_supafast

Glowing loading animation in figma, supafast. Celebrating Disney turning 100 🥳

English
16
100
925
317.3K
Vladimir Kuznetsov retweetledi
Cory LaViska
Cory LaViska@claviska·
Implemented safe triangles to improve submenu selection in @shoelace_style today.
English
113
519
5.5K
883.4K
Vladimir Kuznetsov retweetledi
Matt Pocock
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.
Matt Pocock tweet media
English
66
437
2.8K
585.3K
Vladimir Kuznetsov retweetledi
Anton Korzunov
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 ⬇️ dev.to/thekashey/yarn…
English
1
1
7
0
Vladimir Kuznetsov retweetledi
Ivan Akulov
Ivan Akulov@iamakulov·
7) Moral: • ensure <meta name="viewport"> is one of the first tags in your <head> • watch this talk where @csswizardry goes over this and other similar pitfalls: youtube.com/watch?v=MHyAOZ… (I wouldn’t realize what I’ve been facing today if I haven’t watched this talk 2 weeks ago)
YouTube video
YouTube
English
0
1
10
0
Vladimir Kuznetsov retweetledi
Rony
Rony@ronyfadel·
Javascript tip 🚀: Call `monitorEvents(<dom-element>)` in DevTools, and the console will log all events that are being sent to this element.
English
0
3
12
0
Vladimir Kuznetsov retweetledi
Haz
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.
GIF
English
3
38
296
0
Vladimir Kuznetsov retweetledi
Roman Dvornov
Roman Dvornov@rdvornov·
As usual, CSS is hard... src(var(--foo)) is valid url(var(--foo)) is invalid Curious why? That's an explanation: #issuecomment-1183839492" target="_blank" rel="nofollow noopener">github.com/csstree/csstre…
English
2
10
25
0
Vladimir Kuznetsov
Vladimir Kuznetsov@mistakster·
I’ve just run containrrr/watchtower alongside with my Dockerized applications to update them automatically. It works like a charm.
English
0
0
0
0
Vladimir Kuznetsov retweetledi
一丝
一丝@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 resvg-js.vercel.app
English
6
74
500
0
Vladimir Kuznetsov retweetledi
Rik Schennink
Rik Schennink@rikschennink·
You can now edit your photos at edit.photo 🔗 🍪 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.
English
45
277
1.2K
0
Vladimir Kuznetsov retweetledi
fks
fks@FredKSchott·
*⃣*⃣*⃣*⃣*⃣*⃣ 6-digit input component for 2FA, etc. This is great. So many websites do this poorly! github.com/leonardodino/r…
fks tweet media
English
12
56
472
0
Vladimir Kuznetsov retweetledi
Anton Korzunov
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` ⚛️#server-side-friendly-uid" target="_blank" rel="nofollow noopener">github.com/thearnica/reac… 🐙github.com/reactwg/react-… 📖codeburst.io/unique-ids-and…
Anton Korzunov tweet media
English
1
2
11
0

Keşfet

@devongovett @CodePen @shoelace_style @csswizardry @_developit @smashingmag @TomerAberbach @elonmusk