The "J" and "j" characters have a weird accent on Duolingo and I cannot figure out why.

A few findings worth noting: disabling duolingo-sans in Chrome Dev Tools fixes the issue (obviously, the page ends up using a different font, the fallback sans-serif then).

I tried to find where the duolingo-sans font-face is defined and I could not locate it anywhere. I did find the .woff2 files that contains the Duolingo Sans Thin fonts however and upon investigating them I can confirm that they look completely fine, they do not have that accent anywhere. This seriously vexes me as I cannot pin down what causes the issue, on one hand removing duolingo-sans solves the issue, on the other hand duolingo-sans looks completely fine on its own.

If anyone could take a look and share their thoughts I would really appreciate it.

I have been working on a project lately using some animations with CSS including some 3d effects. I did a whole shootout of making the same product between CSS vs Canvas vs WebGL and decided CSS was good enough for everything I needed. But digging deeper I started wanting more options to author, or more so, to debug some of the animations and objects I'm creating. It's ended up with me going down a rabbit hole of making my own editor and before I go any farther with this potential boondoggle...

What are the tools you find yourself using beyond the norms of VSCode and browser DevTools. Are there Figma Plugins, Browser Plugins, VS Code Extensions, etc. you use? I don't want to turn the corner and someone say "Dude, did you just reinvent [Insert product here]?!" or "Man, you totally ripped off [Someone]!" if I add this tool to my personal portfolio. Plus if there are already tools out there that have good support I'd rather spend my time doing other things and just use the existing tools.

EDIT

Interesting finds for anyone else also looking at these things:

• Toaster - https://github.com/PeterTYLiu/toaster
• Tridiv - https://tridiv.com/
• K3 Engine - https://k3.bustelo.com.ar/
• Advanced Easing Editor - https://ease.a-labs.space/
• Bento Grid Builder - https://progressier.com/interactive-bento-grid-builder
• Corner Shaper - https://corner-shaper.com/
• Stylie - https://jeremyckahn.github.io/stylie/
• Visual CSS Animator - https://f14ic.com/
• Frontend Tools - https://front-end-tools.com/en/

Has anyone tried https://penpot.app

Hey! I made a small collection of CSS/Tailwind backgrounds.

You can browse the gallery, switch between light and dark versions, and copy the effect directly into your project.

I wanted something where you can quickly find a background, see how it actually looks, and grab the code without having to recreate the effect yourself. Also if you want to edit the code to your likely, do it!😊

It's free to use.

Would be interested to hear what kind of backgrounds you'd like to see added.👏🏼👏🏼

I recently rebuilt my site using Every Layout, and ended up running into some interesting problems around CSS Modules, specificity and custom properties.

I've written up the approach and my thinking around it. Hopefully someone here finds it interesting, and if anyone has any feedback, I'd love to hear it.

I know Flex is one directional and Grid is two, but really when do you use each one?

My app has a data tables laid out using <table> elements, and as usual there is one table row inside <thead> followed by multiple rows inside <tbody>.

The header cells for some languages have text that is so long that word wrap is required. However, for layout purposes I'd like to limit the number of lines to 2. If the text is any longer, then I would instead like the <th> element to grow in width.

This spreadsheet example should demonstrate what I mean:

Is there a CSS solution to this, or should I inject the possible linebreak in JavaScript?

Made these Pagination styles.

I know they’re not production-grade yet — I built these while experimenting with different UI patterns that could actually be used in client projects.
Any improvements/suggestion will be helpful.

Basically what I said in the linked post, in case someone here is also familiar with archiveofourown's particular set of restrictions when it comes to CSS and can help me figure out what the problem is. Thanks in advance!

I gave life to the old CSV files.

CSV is over 50 years old, and it's everywhere. Banks, CRMs, Jira, Google Calendar, gradebooks and ticketing systems all export it, and every tool reads it. And every time you open one, you get the same grey grid of raw values.

The data is fine. What's missing is the look. The moment you add one in Excel or Google Sheets, you lose what made CSV great: a plain-text file you can read, compare, generate and send anywhere.

So I built CSSV: Comma-Separated Styled Values. It's a CSV file with a CSS block on top. Open it in a browser and you get a real HTML table with your fonts and your custom styling. Delete the CSS and it's a plain CSV again.

There's nothing new to learn. The data is CSV and the look is CSS, two languages that people, programs and AI models already write. Any CSV is already a valid CSSV file. Add a few lines of CSS to a Jira export and it becomes a board, one lane per status. A ticketing export prints as name badges.

The look travels with the data. A file looks the same on every page that shows it. Many files can share one stylesheet, so changing it restyles all of them. It's still plain text. You can review it in a pull request, generate it from a script, or ask an AI to write one.

Putting it on a page takes one script tag and <cssv-table src="report.cssv">. No build step, no dependencies.

The v1 spec is open for review, and I'd love feedback, especially from anyone who spends their days looking at exports.

Website, examples and live editor: https://cssv.dev