With the popover API available in all browsers for a while now, we can easily build entirely accessible, even animated popovers for all use cases just with HTML and CSS. As an example I have created a codepen with a simple search button that opens a search field. #HTML#CSS#A11Y#accessibility https://codepen.io/philliproth/pen/OJYLyMp
I have a question for #accessibility and #internationalization peeps out there. Suppose that I made a post on Mastodon that includes a photo. But the language I use for the post is Tagalog, my native language. Should I write my alt text in Tagalog or English?
The post can be translated by whatever translation service Mastodon uses. But I'm not entirely sure that the alt text would also be translated, especially since I remember that #HTML attributes are not translated, unless that's old news.
I get that I don’t grok the work that goes into the UA rendering engine, but I am very worried about the #accessibility impact given it is not even addressed in the proposal.
Use modern CSS to add a status indicator to your avatar using less than 10 CSS declarations and without extra elements.
✅ Only the image element
✅ No pseudo-element
✅ Transparent gap
✅ Optimized with CSS variables
I need to convert #HTML to #Markdown and I'm looking for a tool to do that.
The output should
• preserve line breaks in paragraphs
• not contain additional, unnecessary linebreaks (e.g. 4 empty lines between paragraphs)
• be configurable (e.g. whether to use * or _ for emphasis, or * vs - for unordered lists)
• if possible, allow me to hook into details (e.g. to convert <pre class="shell"> to ```sh)
#Python or #CLI. Alternatively, what's a really configurable prettifier?
So... I did a little side project. I missed translating stuff so I figured I'd translate my favorite #GenshinImpact song "La Vaguelette" into #Filipino. As I explain in the commentary that follows, I took a little bit of artistic liberty to make the translation fit the melody (spoiler alert: I also included a demo of me singing the song after translating it).
A cool thing that challenged me while making this is I got to use the <ruby> element in #HTML to create a French-Tagalog interlinear translation where I translate each French word/phrase into Tagalog. I got the idea from this Bible translation where it had on it side-by-side the original Greek text of the New Testament, interlined with a literal English translation, and another English translation that would make sense.
Quick PSA for everyone excitedly using the popover API now it's in all 3 engines. Add an empty pointerdown event listener to your body element, else popover lightdismiss doesn't work on iOS Safari.
Create a ⭐️ Star shape using clip-path and only 5 points (instead of 10).
Three different codes to create the same shape
1⃣ Precise version using math
2⃣ Calculated version without math
3⃣ Simplified version with easier coordinates values
The difference between the versions is that the first and second ones consider the inscribed circle of a square to draw the different points while the third one considers the smallest rectangle that can contain the star shape.
The way to get better at #HTML & #CSS isn't to build complex web applications with frontend frameworks. The way to get better at HTML & CSS is to write content with HTML & CSS.
Build a blog.
Build a landing page.
Build a report.
Build a portfolio.
Build lists.
Most web applications are simply content + forms in a fancy UI trench coat. 😅 They just tend to be far more "componetized" — making it much harder to grok the underlying semantics at first.
🆕 blog! “Use CSS to boost the font size of emoji with no extra markup”
I want to make emoji bigger than the text that surrounds them. At my age and eyesight, it can be difficult to tell the difference between 😃, 😄, and 😊 when they are as small as the text. Is there a way to use CSS to increase the font size of specific characters without having […]
If your go to assumption when making a component is just #HTML is some emitted slop and the component is the most important part as opposed to the HTML and other core web tech the browser uses as being the ultimate point of the component you simply are doing web dev wrong and working against the platform.
Some days I feel most of the“modern” #webdev community acts like Chemists who think atoms are passé and compounds are all that matter.
Use modern CSS to create those famous rounded tabs with inner curves.
✅ No extra element & No pseudo-element
✅ Less than 10 CSS declarations to get the three variations
✅ One variable to control the curvature
✅ Works with gradient coloration
Use the round() function and create a fluid typography with a discrete function instead of a continuous one.
Define the step and get precise values within a specific range. Very useful if you have some calculation based on the font-size like using the em unit. No more rounding issue!