🚨 PSA 🚨
— Una 🇺🇦 (@Una) April 30, 2025
Anchored popover issues?
I recommend you just add this to your reset.css:
[popover] {
inset: auto;
}
Just trust me.
User agent default styles for popover mimics dialog, and they get positioned in the middle of your screen like a modal. So if you're anchoring the…
Popular
Latest Articles
Optimizing Images for Web Performance
There is some low-hanging web performance fruit with images. Serving them in the right format, from a CDN, with the right HTML can be a big perf win.
Three Approaches to the “&” (ampersand) Selector in CSS
The & is a powerful addition to CSS, allowing us to craft selectors without repetition and helping organization and understanding.
HTML & CSS for a One-Time Password Input
The typical approach for these inputs is using multiple HTML inputs, one for each character. But is that a good idea?
Notes on the Code Editors with AI Landscape
There are A LOT of options these days for getting AI help right in your code editor. What seemed to begin with plugins has morphed into a lot of VS Code forks.
Mapping with Leaflet
Leaflet.js is a free open-source mapping library. We’ll look at how to use it to create a basic map with location points of cats up for adoption.
Full-Bleed Layout with Modern CSS
Just four declarations in CSS can handle this nicely, while avoiding the vertical scrollbar issue.
The Beat
inset: auto; for popovers
Comparing Iterators
Matt Smith on when to use map() vs. forEach() in JavaScript. Just one of those things I can imagine asking or being asked in a coding interview. Some interesting comments below the article as well.
“A Typeface for Kids”
If you’re designing something for kids, you’ve always got Comic Sans as a typeface choice. We make fun of it, but it really is playful and nice and quite readable. It’s not nearly this egregious. I’m sure you can find other good options out there too, but big high fives to the gang at Underware for their new Kermit font (saw via Microsoft who has put it into Office). It’s friendly looking, dyslexia friendly, and wonderfully variable. Little on the pricey side, but most great fonts are.
What’s the difference between ESLint and TypeScript?
What is the difference between ESLint and TypeScript? Perhaps that feels like a strange question as ESLint is a, uhm, linter, and TypeScript is a language that compiles to JavaScript.
Josh Goldberg writes how there is some overlap:
While ESLint and TypeScript operate differently and specialize in different areas of code defects, there is some overlap. Specific types of code defects straddle the line between “best practices” and “type safety,” and so can be caught by both tools.
I could imagine asking (or having to answer) this in a job interview.
The two catch different areas of code defects and come with different philosophies around configurability and extensibility.
- ESLint checks that code adheres to best practices and is consistent, enforcing what you should write.
- TypeScripts checks that code is “type-safe”, enforcing what you can write.
Subscribe
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSSWanna write?
Here's our page on guest writing. It's a win-win-win!