DEV Community: Yuriy K.

Annoying shouldn't be ugly, or cute animated validation.

Yuriy K. — Sat, 15 Mar 2025 10:37:20 +0000

You are going to annoy your users, if your website has at least 1 input/select/textarea/.../any other type of control, with validation.

So why we dont make it at least visually pleasant and entertaining?😃

I've already highlighted ho fascinated 3d in 2d css can be, this week codePen challenge is about errors, and 3d rotating cube as validation error mark is perfect solution!

Radial date indicator. Is it looks like retro phone?

Yuriy K. — Fri, 28 Feb 2025 13:35:28 +0000

What this week CodePen challenge bring...
Pickers. Date, File, Color and other input types.
I was thinking of maya tribe circular rotating puzzle, and here we go, rotating date indicator:

For future, make it bit more flexible about the dates, maybe add some kind of friction animation, like dust, or make the animation bit more struggle...

Range, input type range.

Yuriy K. — Tue, 18 Feb 2025 01:51:06 +0000

Third week Challenge from Codepen is about range inputs, this time i did know what to do from the beginning. How? Simple, I found gorgeous illustrations on dribble. Thats it, I knew what to do from the moment I saw the picture... I knew I will add a bit of interaction to it.
Just take a look:

author: tatooinegirl

I've start with redraw. Illustrator, 30min, result:

30 more minutes, codepen, and simple minimalistic range type input and elegant svg stroke animation.

1 swipe and virtual desk is not that boring anymore.
Don't forget to check and like illustration authors dribble page!

Writing a love letter...

Yuriy K. — Tue, 11 Feb 2025 01:01:13 +0000

This week CodePen challenge wasn't much different from last week, so I didn't felt that motivated... But Love-month is continue and so we are, today I wrote a love letter, and somehow made it kinda useful 😋, not just beautiful.

Lets prepare a paper sheet.

Most challenging part of it is line background. Lets take a look on it bit closer.

background: repeating-linear-gradient(transparent 0 calc(1.2rem - 1px), #eecfd7 0 1.2rem);

So the background, it is transparent from 0% to 1.2rem - 1px and from 0 to 1.2rem it is red (1px more than prev, but on a lower level).
Exactly what we need, 1 red pixel each 1.2rem. Perfect for our needs, now we have canvas. Lets get to words.

Text is simple but not too sweet.

font-size: 0.875rem;
line-height: 1.25rem;

Why line height is not 1.2rem straight? Coz all the fonts have its own inner spacings, and each time making some kind of handcrafted design element you will need to make some adjustments.

Universal solution but low compatibility.

I do love to use :has pseudoclass to check which radio is :checked, so simple especially with custom props, but still cant look on its compatibility level (~93% right now) without a tears.

body:has(#orange:checked) .heart:after {
    --bg-color: #e8874e;
}

So nice to see how far css / html actually moved since I've start working with it, even if I cant use new features in production yet.

Result:

My previous challenge work: Let's serve a table!

Let's serve a table!

Yuriy K. — Wed, 05 Feb 2025 22:54:15 +0000

My first CodePen challenge started!

So the task is:

So I've start from switcher it self! Idea came from challenge "example".

Time! Most important choices is always about our time. Nice idea, lets spread it. So what would it be clock/hourglass/pendulum... , and first thing which is poped out of my quite tiered mind was a train station round minimalistic clock... So be it. Clock it is.

For those who serf from mobile its even more IKEA...ish 😆 Like it this way even more!

For time change we used to use day/night background or sun/moon icon switchers. I wasn't really creative here, I did add barely noticeable background switching animation.

And for the main part I start thinking about nice morning routine, what is the part of each single morning that you cant skip? That everyday step you should make first... From pack opening to last gulp, that impossible to forget aroma. Coffee...
What about evening? Evening is gentle, its lazy, party/love time... So evenings for her, especially in February!

So morning coffee for Him and nice afternoon glass of wine for Her.
First idea was to create fast-swap animation, with a bit of distortion and simple animations like fade-in/fade-out. I did animation sketches for it.

And animation examples.

Hell yeah! I take this challenge seriously 😤

Idea was nice but not good enough, I was eager to make something 3d like, not 3d tho! So I decide to slicing elements into layers, to make 3d in 2d, and than combine them back. You know, it was unexpectedly pleasant and interesting task! something in between playing lego, drawing a picture and slicing cucumbers 😌

Next steps was to wrap it up... Split screen to create surface like filing, add kind of sun as indicator, and sticker, coz its cute 😋
Oh, oh, almost forgot, important step: adding "no-one will notice" shadow 😅
In about 4hrs of moving slices 1px left and 2px right we have something... Something... Idk. Rate it yourself!

14feb is close already, nice occasion to say it! Even if you did it already. Wish you 💘 !!!

First steps

Yuriy K. — Thu, 30 Jan 2025 05:04:47 +0000

Only 2 days as I start working on my own CodePen account and I have so much to share already 😎

CodePen was nice sandbox for a long time and I've made a lot of mess with my account, but I always was thinking about it as of platform to create not just a soulless features test fabric. And after second much deeper dive into CodePen community I'm sure it is definitely not just a sandbox.

Share buttons, donate links, watermarks and a lot more things you could place into your pens... But how to make it easier for you and for visitors? You could place it in the end of you html tab, and make styles for it inside css tab, but easiest way is to put everything into js tab in one separate pen. Solution is kinda simple and based on possibility using CodepPen pens as resource holder. So, here the steps...

Create new pen
Write your css and html into js variables and
Append your js vars into body as document elements
Save the pen and copy its url
Open new pen or one you wish to integrate with, got to settings, open to JS tab, paste your url into field in "Add External Scripts/Pens" section (don't forget to add extension .js).
Save and enjoy!

Instruction Video:

Bit more complex example:

No easy situations! Again.

Yuriy K. — Thu, 30 Jan 2025 02:30:54 +0000

One picture. Two question...

What to do with insomnia, any suggestions? Already tested: hot milk, reading, few different tea drinks. Nothing helps.
How to stop playing with new animation-timeline: scroll(); 😊?

Only one heartbreaking thing is stopping me from immediate integration...🥺

Tiny with big numbers

Yuriy K. — Tue, 28 Jan 2025 21:59:43 +0000

How often you thinking about small things?
About cute little freckles, about your kid little shoes, maybe your pets fur flying around your house, some moments that matters for loved ones, some teeny tiny gestures you can do to make them happy. Maybe you are thinking about beautiful dust particles dancing in a ray of light beaming through gap in curtains right now. But you will never think about {counters} as of important part of your website, coz it isn't! But it doesn't mean it shouldn't have its own fun and active "live".

Yes, I'm talking about this small red annoying dot in the corner of your settings app icon, or event wide oval shaped on top of email app and, for sure, this thing near the cart icon almost everywhere.

Let me share my point of view on web design, specially its interactive elements, such as {counters}.

And now, when its alive! Im gone.