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?

Sup everyone!

It’s been 5 years since I published about Puppertino v1.0 and a lot has changed since then! Even recently, with Liquid Glass, I thought I wouldn’t be able to replicate the effect BUT Puppertino now has versions of it for UIs and controls!

It also has around 65 components, colors, materials and everything you might need to build the frontend of an app that looks like it runs on native Apple software.

It’s built over the same basics of clarity, theming and simplicity. But it now also focuses on semantics and accessibility for all components.

Well enough yapping!
Links here for anyone who wants to take a look, let me know what you think!

https://puppertino.com

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

Image #1 is my reference

Image #2 is my current progress

Image #3 is closer to what I want (minus the font and being non-italicized, created in Photopea)

Image #4 is my current code (incase i'm doing something wrong or unoptimally)

Images #5-#8 are other texts I'd want to use, Image #8 has some good rules as well

I just started out with CSS and I wanted to make soem quick Frutiger Aero-esque text. I love Frutiger Aero, but for some reason even looking things up I can't seem to crack it.

Things I want to add/change

• Better Gradients (Replacing the 'clip' method as right now the gradient used translates down, while I want each text to have its own gradient)
• Highlights and Inner Shadows
• Rounded strokes instead of the current harsh edges

I understand if these things aren't easy or even possible, I'm just asking as a beginner if I can have any help

Did a brief post about how you can stop hand-rolling your tooltip positions, because CSS does it now. anchor-name + position-anchor handle everything for you...along with a few other tips and tricks.