Konstantin Dankov
@dankov.me
Web Developer since 2002. Focus on UI/UX and front-end development. Teaching HTML, CSS and JavaScript.
Audiobooks, Photography and all things tech.
Based in Sofia, Bulgaria
Audiobooks, Photography and all things tech.
Based in Sofia, Bulgaria
Reposted by Konstantin Dankov
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
November 1, 2025 at 6:27 AM
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
Reposted by Konstantin Dankov
I had a chat with @nerdy.dev about his somewhat recent job hunt, where he talked a lot about the misalignment between the technical interviews and the roles they were looking to fill... and how even if they tried to fix the interviews, it didn't seem to help 😅
October 30, 2025 at 2:36 PM
I had a chat with @nerdy.dev about his somewhat recent job hunt, where he talked a lot about the misalignment between the technical interviews and the roles they were looking to fill... and how even if they tried to fix the interviews, it didn't seem to help 😅
Reposted by Konstantin Dankov
Simplify: "Honestly, I feel like web devs are constantly being gaslit into thinking complex over-engineered solutions are the only option. When the discourse is dominated by people invested in frameworks, all our default thinking will involve frameworks." adactio.com/journal/22178
Simplify
Reminding myself just how much you can do with CSS these days.
adactio.com
October 27, 2025 at 5:05 PM
Simplify: "Honestly, I feel like web devs are constantly being gaslit into thinking complex over-engineered solutions are the only option. When the discourse is dominated by people invested in frameworks, all our default thinking will involve frameworks." adactio.com/journal/22178
Reposted by Konstantin Dankov
small details that matter 🧑🍳
use CSS pseudoelements to bridge the :hover gap w/ :has() + inset
a:has(+ .dots) a::after,
.dots + a::after {
position: absolute;
content: '';
}
a:has(+ .dots) a::after { inset: 0 -50% 0 100%; }
.dots + a::after { inset: 0 100% 0 -50%; }
use CSS pseudoelements to bridge the :hover gap w/ :has() + inset
a:has(+ .dots) a::after,
.dots + a::after {
position: absolute;
content: '';
}
a:has(+ .dots) a::after { inset: 0 -50% 0 100%; }
.dots + a::after { inset: 0 100% 0 -50%; }
October 22, 2025 at 4:54 PM
small details that matter 🧑🍳
use CSS pseudoelements to bridge the :hover gap w/ :has() + inset
a:has(+ .dots) a::after,
.dots + a::after {
position: absolute;
content: '';
}
a:has(+ .dots) a::after { inset: 0 -50% 0 100%; }
.dots + a::after { inset: 0 100% 0 -50%; }
use CSS pseudoelements to bridge the :hover gap w/ :has() + inset
a:has(+ .dots) a::after,
.dots + a::after {
position: absolute;
content: '';
}
a:has(+ .dots) a::after { inset: 0 -50% 0 100%; }
.dots + a::after { inset: 0 100% 0 -50%; }
Reposted by Konstantin Dankov
Hey, so @wil.to has a new online course called JavaScript for Everyone brought to you by our friends at @piccalil.li.
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
An Introduction to JavaScript Expressions | CSS-Tricks
A thorough but approachable lesson on JavaScript expressions excerpted JavaScript For Everyone, a complete online course offered by our friends at Piccalilli.
css-tricks.com
October 22, 2025 at 7:11 PM
Hey, so @wil.to has a new online course called JavaScript for Everyone brought to you by our friends at @piccalil.li.
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
Reposted by Konstantin Dankov
Because this got asked on reddit www.reddit.com/r/css/commen...
Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.
On @codepen.io: codepen.io/thebabydino/...
#CSS #Maths
Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.
On @codepen.io: codepen.io/thebabydino/...
#CSS #Maths
October 8, 2025 at 5:37 PM
Because this got asked on reddit www.reddit.com/r/css/commen...
Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.
On @codepen.io: codepen.io/thebabydino/...
#CSS #Maths
Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.
On @codepen.io: codepen.io/thebabydino/...
#CSS #Maths
Reposted by Konstantin Dankov
just deployed to gradient.style
- better import design
- more resilient parser (understands more syntax)
- supports multi-layered gradient imports
- better import design
- more resilient parser (understands more syntax)
- supports multi-layered gradient imports
October 3, 2025 at 5:55 AM
just deployed to gradient.style
- better import design
- more resilient parser (understands more syntax)
- supports multi-layered gradient imports
- better import design
- more resilient parser (understands more syntax)
- supports multi-layered gradient imports
Reposted by Konstantin Dankov
Reposted by Konstantin Dankov
Un-Sass'ing My CSS: Compiling Multiple #CSS Files into One: "Discover how to transition from Sass to modern CSS, exploring ways we can import multiple CSS files into one sole CSS file." www.alwaystwisted.com/articles/UnS...
Un-Sass'ing My CSS: Compiling Multiple CSS Files into One Always Twisted
Discover how to transition from Sass to modern CSS, exploring ways we can import multiple CSS files into one sole CSS file
www.alwaystwisted.com
September 19, 2025 at 5:04 PM
Un-Sass'ing My CSS: Compiling Multiple #CSS Files into One: "Discover how to transition from Sass to modern CSS, exploring ways we can import multiple CSS files into one sole CSS file." www.alwaystwisted.com/articles/UnS...
Reposted by Konstantin Dankov
CSS `field-sizing` on a `<textarea>` is obviously awesome.
But the horizontal growth using it on an `<input>` is less clearly useful to me. But check out this design pattern I cooked up. I don't hate it. Keeps the name area compact until you need to see more. Just a bit of flexbox wrapping.
But the horizontal growth using it on an `<input>` is less clearly useful to me. But check out this design pattern I cooked up. I don't hate it. Keeps the name area compact until you need to see more. Just a bit of flexbox wrapping.
September 12, 2025 at 6:21 PM
CSS `field-sizing` on a `<textarea>` is obviously awesome.
But the horizontal growth using it on an `<input>` is less clearly useful to me. But check out this design pattern I cooked up. I don't hate it. Keeps the name area compact until you need to see more. Just a bit of flexbox wrapping.
But the horizontal growth using it on an `<input>` is less clearly useful to me. But check out this design pattern I cooked up. I don't hate it. Keeps the name area compact until you need to see more. Just a bit of flexbox wrapping.
Reposted by Konstantin Dankov
added:
- ::highlight() (thx @veneman.dev!)
- ::grammar-error()
- ::spelling-error()
- ::slotted()
- ::part()
- ::highlight() (thx @veneman.dev!)
- ::grammar-error()
- ::spelling-error()
- ::slotted()
- ::part()
Here's a #CSS study list, 100+ features to checkout from the past ~5 years.
There're surprises in here for even the most knowledgeable front-end developer!
nerdy.dev/cascading-se...
There're surprises in here for even the most knowledgeable front-end developer!
nerdy.dev/cascading-se...
One List To Rule Them All · September 10, 2025
In the darkness may it bind us
nerdy.dev
September 12, 2025 at 3:54 PM
added:
- ::highlight() (thx @veneman.dev!)
- ::grammar-error()
- ::spelling-error()
- ::slotted()
- ::part()
- ::highlight() (thx @veneman.dev!)
- ::grammar-error()
- ::spelling-error()
- ::slotted()
- ::part()
Reposted by Konstantin Dankov
You Don't Need Animations: "When done right, animations make an interface feel predictable, faster, and more enjoyable to use. But they can also make an interface feel unpredictable, slow, and annoying. Step one is making sure your animations have a purpose." #CSS emilkowal.ski/ui/you-dont-...
You Don't Need Animations
Why you are animating more often than you should.
emilkowal.ski
September 10, 2025 at 5:03 PM
You Don't Need Animations: "When done right, animations make an interface feel predictable, faster, and more enjoyable to use. But they can also make an interface feel unpredictable, slow, and annoying. Step one is making sure your animations have a purpose." #CSS emilkowal.ski/ui/you-dont-...
Reposted by Konstantin Dankov
In my latest video I talk about what classless CSS is, why you might use it and showcase a few of my favorite frameworks.
I also share a tool I made to compare 69 classless CSS frameworks side-by-side.
Watch 🍿: www.youtube.com/watch?v=SmmL...
I also share a tool I made to compare 69 classless CSS frameworks side-by-side.
Watch 🍿: www.youtube.com/watch?v=SmmL...
CSS Without Classes! Styled Apps By Default
YouTube video by Syntax
www.youtube.com
September 9, 2025 at 6:43 PM
In my latest video I talk about what classless CSS is, why you might use it and showcase a few of my favorite frameworks.
I also share a tool I made to compare 69 classless CSS frameworks side-by-side.
Watch 🍿: www.youtube.com/watch?v=SmmL...
I also share a tool I made to compare 69 classless CSS frameworks side-by-side.
Watch 🍿: www.youtube.com/watch?v=SmmL...
Reposted by Konstantin Dankov
Between the time we launched the original Learn CSS course on web.dev and today, container queries landed in browsers and became Baseline Widely available! It was high time for an update, and we were lucky enough to have the team at OddBird work with us. Enjoy 9 new modules! web.dev/blog/learn-c...
A refresh of Learn CSS with nine new modules | Blog | web.dev
Our popular Learn CSS course has been updated with new modules covering the latest CSS features.
web.dev
September 9, 2025 at 8:10 PM
Between the time we launched the original Learn CSS course on web.dev and today, container queries landed in browsers and became Baseline Widely available! It was high time for an update, and we were lucky enough to have the team at OddBird work with us. Enjoy 9 new modules! web.dev/blog/learn-c...
#humble-brag the old-school front-end (css) dev just got a fully working 3-node Proxmox cluster with Ceph storage and active HA for self-hosting experiments ;)
August 20, 2025 at 2:01 PM
#humble-brag the old-school front-end (css) dev just got a fully working 3-node Proxmox cluster with Ceph storage and active HA for self-hosting experiments ;)
Reposted by Konstantin Dankov
I had a question on the Motion+ Discord about how you'd create port this GSAP ScrollTrigger effect to Motion.
My intuition was it's doable with CSS position: sticky. There's a little trick in here with position: relative too.
CSS examples.motion.dev/js/layered-s...
GSAP codepen.io/GreenSock/pe...
My intuition was it's doable with CSS position: sticky. There's a little trick in here with position: relative too.
CSS examples.motion.dev/js/layered-s...
GSAP codepen.io/GreenSock/pe...
August 13, 2025 at 2:35 PM
I had a question on the Motion+ Discord about how you'd create port this GSAP ScrollTrigger effect to Motion.
My intuition was it's doable with CSS position: sticky. There's a little trick in here with position: relative too.
CSS examples.motion.dev/js/layered-s...
GSAP codepen.io/GreenSock/pe...
My intuition was it's doable with CSS position: sticky. There's a little trick in here with position: relative too.
CSS examples.motion.dev/js/layered-s...
GSAP codepen.io/GreenSock/pe...
Reposted by Konstantin Dankov
Straight from the horse's mouth
August 7, 2025 at 10:01 PM
Straight from the horse's mouth
Reposted by Konstantin Dankov
Why and How to Write Minimal and Valid HTML, a Link Guide, by @meiert.com:
meiert.com/blog/minimal...
meiert.com/blog/minimal...
Why and How to Write Minimal and Valid HTML, a Link Guide · Jens Oliver Meiert
On using all of HTML’s features and ensuring that HTML code is error-free—two surprisingly underused and unpopular approaches to writing HTML.
meiert.com
August 2, 2025 at 1:02 PM
Why and How to Write Minimal and Valid HTML, a Link Guide, by @meiert.com:
meiert.com/blog/minimal...
meiert.com/blog/minimal...
Reposted by Konstantin Dankov
New ~3min *first look* CSS video to accompany my most recent blog post 👀
Walking you through the new scroll-target-group property and showing how you can build a scroll-spy effect with just 2 lines of CSS!
www.youtube.com/watch?v=nEJ9...
Walking you through the new scroll-target-group property and showing how you can build a scroll-spy effect with just 2 lines of CSS!
www.youtube.com/watch?v=nEJ9...
Build a scroll spy in 2 lines of CSS with scroll-target-group and :target-current
YouTube video by Una Kravets
www.youtube.com
July 29, 2025 at 7:43 PM
New ~3min *first look* CSS video to accompany my most recent blog post 👀
Walking you through the new scroll-target-group property and showing how you can build a scroll-spy effect with just 2 lines of CSS!
www.youtube.com/watch?v=nEJ9...
Walking you through the new scroll-target-group property and showing how you can build a scroll-spy effect with just 2 lines of CSS!
www.youtube.com/watch?v=nEJ9...
Reposted by Konstantin Dankov
One of the most powerful tools in my toolbox is SVG. When combined with CSS and JavaScript, we can do some truly remarkable things. ✨
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
A Friendly Introduction to SVG • Josh W. Comeau
SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most imp...
www.joshwcomeau.com
July 21, 2025 at 3:11 PM
One of the most powerful tools in my toolbox is SVG. When combined with CSS and JavaScript, we can do some truly remarkable things. ✨
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
Reposted by Konstantin Dankov
📢 The State of HTML Survey is live survey.devographics.com/en-US/survey...
The #HTML and #CSS surveys are the only web surveys I don't want to miss. Thank you @sachagreif.com for making them, and @lea.verou.me for curating.
Please take a few minutes to fill the survey if/when you can. ✨
The #HTML and #CSS surveys are the only web surveys I don't want to miss. Thank you @sachagreif.com for making them, and @lea.verou.me for curating.
Please take a few minutes to fill the survey if/when you can. ✨
State of HTML 2025
Take the State of HTML survey
survey.devographics.com
July 20, 2025 at 4:22 PM
📢 The State of HTML Survey is live survey.devographics.com/en-US/survey...
The #HTML and #CSS surveys are the only web surveys I don't want to miss. Thank you @sachagreif.com for making them, and @lea.verou.me for curating.
Please take a few minutes to fill the survey if/when you can. ✨
The #HTML and #CSS surveys are the only web surveys I don't want to miss. Thank you @sachagreif.com for making them, and @lea.verou.me for curating.
Please take a few minutes to fill the survey if/when you can. ✨
Reposted by Konstantin Dankov
css cyber[popover] 2025 w/ sfx
jus' javascript for the audio and keyboard shortcuts — [popover], starting-style, linear(), and mask for the rest 🤙
jus' javascript for the audio and keyboard shortcuts — [popover], starting-style, linear(), and mask for the rest 🤙
July 3, 2025 at 7:42 PM
css cyber[popover] 2025 w/ sfx
jus' javascript for the audio and keyboard shortcuts — [popover], starting-style, linear(), and mask for the rest 🤙
jus' javascript for the audio and keyboard shortcuts — [popover], starting-style, linear(), and mask for the rest 🤙
Reposted by Konstantin Dankov
I've just release a new Astro content loader:
@ascorbic/youtube-loader loads YouTube videos by ID, channel, playlist, search. It includes build-time loaders and also experimental live loaders. It's a useful example of how to build a package that exports both types of loader.
@ascorbic/youtube-loader loads YouTube videos by ID, channel, playlist, search. It includes build-time loaders and also experimental live loaders. It's a useful example of how to build a package that exports both types of loader.
astro-loaders/packages/youtube at main · ascorbic/astro-loaders
Astro loaders. Contribute to ascorbic/astro-loaders development by creating an account on GitHub.
github.com
July 5, 2025 at 8:53 PM
I've just release a new Astro content loader:
@ascorbic/youtube-loader loads YouTube videos by ID, channel, playlist, search. It includes build-time loaders and also experimental live loaders. It's a useful example of how to build a package that exports both types of loader.
@ascorbic/youtube-loader loads YouTube videos by ID, channel, playlist, search. It includes build-time loaders and also experimental live loaders. It's a useful example of how to build a package that exports both types of loader.
Reposted by Konstantin Dankov
You have until Sunday to get my fonts at super low prices.
heydonheydon.gumroad.com/l/skune-vari...
heydonheydon.gumroad.com/l/hel-variab...
heydonheydon.gumroad.com/l/pixel-impe...
heydonheydon.gumroad.com/l/skune-vari...
heydonheydon.gumroad.com/l/hel-variab...
heydonheydon.gumroad.com/l/pixel-impe...
Pixel Imperfect Font Collection
Pixel Imperfect is a collection of 5 8-bit pixel fonts. But pixel fonts are not all you get. Alongside the regular font are the distinctly unpixelated Round and Ink variants.Alternative text: Ampersan...
heydonheydon.gumroad.com
June 19, 2025 at 8:35 AM
You have until Sunday to get my fonts at super low prices.
heydonheydon.gumroad.com/l/skune-vari...
heydonheydon.gumroad.com/l/hel-variab...
heydonheydon.gumroad.com/l/pixel-impe...
heydonheydon.gumroad.com/l/skune-vari...
heydonheydon.gumroad.com/l/hel-variab...
heydonheydon.gumroad.com/l/pixel-impe...
Reposted by Konstantin Dankov
Eder Rengifo shares a small tool he created to design cool gradients ready to plug into your CSS.
gradientify.app #css #design
gradientify.app #css #design
Gradientify - Create Beautiful CSS Gradients
Gradientify is a professional gradient generator with live preview, color harmony, and instant CSS export. Create stunning gradients with our intuitive drag-and-drop interface.
gradientify.app
June 4, 2025 at 4:33 PM
Eder Rengifo shares a small tool he created to design cool gradients ready to plug into your CSS.
gradientify.app #css #design
gradientify.app #css #design