Edent, to webdev
@Edent@mastodon.social avatar

🆕 blog! “Accents and eBooks”

By and large, the English language doesn't use diacritical marks. Even our loanwords are stripped of them; we drink in a cafe rather than the more pretentious café. This has a consequence for HTML and, by extension, eBooks. As a quick primer, modern computing gives us two main ways of displaying a letter with an […]

👀 Read more: https://shkspr.mobi/blog/2024/05/accents-and-ebooks/

#ebook #HTML #unicode

blog, to webdev
@blog@shkspr.mobi avatar

Accents and eBooks
https://shkspr.mobi/blog/2024/05/accents-and-ebooks/

By and large, the English language doesn't use diacritical marks. Even our loanwords are stripped of them; we drink in a cafe rather than the more pretentious café. This has a consequence for HTML and, by extension, eBooks.

As a quick primer, modern computing gives us two main ways of displaying a letter with an accent. The first is simple - encode every single accented letter as a separate "pre-composed" character. So è (U+00E8), é (U+00E0), ê (U+00EA, and ë (U+00EB) are all stored as different codepoints.

But this seems a little inefficient and can make it hard to search through text for an exact lexical match.

So there is a second way to add accents. You take the base character - e (U+0065) - and then apply a separate "combining" accent character to it. For example the combining accent ◌́ (U+0301). That means you can add an accent to áńý ĺét́t́éŕ!́

Note, the accent ◌́ (U+0301) is separate from the character ´ (U+00B4). In fact, most accents have a pre-composed, combining, and separate form. This, understandably, causes much confusion!

Here's a good example. I was reading the excellent Fallen Idols, when I noticed this typesetting bug.

The phrase "Swords of Qadisiyyah." But the combining macron over the letter "a" has been rendered as a separate dash.

It's always hard to transliterate languages. The Victory Arch in Iraq is known as قوس النصر, and usually written in English as the "Swords of Qādisīyah".

Examining the HTML code in the eBook, it was obvious that the publishers had used a macron ¯ (U+00AF) rather than the combining version ◌̄ (U+0304).

I've reported it to the publisher. I've no idea if they'll fix it in a subsequent re-issue.

https://shkspr.mobi/blog/2024/05/accents-and-ebooks/

#ebook #HTML #unicode

leanpub, to Java
@leanpub@mastodon.social avatar

Modern Thymeleaf Bundle https://leanpub.com/b/modern-thymeleaf-bundle by Wim Deblauwe is the featured bundle on the Leanpub homepage! https://leanpub.com wimdeblauwe@mastodon.social #Java #Html #WebDevelopment #Software #JavaScript

premartinpatrick, to Twitch French
@premartinpatrick@mastouille.fr avatar

On s'occupe de la partie serveur du site de loterie à partir de 10h30 sur ma chaîne . Codage en maintenant que la partie / et est bouclée.

RDV sur https://www.twitch.tv/patrickpremartin pour y assister.

Hier j'ai fait un peu de , ce ne fut pas si laborieux que ça. Voici comment seront choisis les numéros de ticket de loterie par les participants : https://youtu.be/vdTp7XzNmBE

codepo8, to random
@codepo8@toot.cafe avatar

The State of HTML 2024 survey results are out:
https://2023.stateofhtml.com/en-US/

niutech,
@niutech@fosstodon.org avatar

@codepo8 It's surprising how many webdevs still use legacy elements: https://2023.stateofhtml.com/en-US/other_tools/#blast_from_the_past

leanpub, to webdev
@leanpub@mastodon.social avatar

Upgrade Your HTML I–V https://leanpub.com/b/upgrade-your-html-1-5 by Jens Oliver Meiert is the featured bundle on the Leanpub homepage! https://leanpub.com

kerfuffle, to Java
@kerfuffle@mastodon.online avatar

Who here knows a CDN that offers edge computing capability for the JVM / GraalVM?

AWS Lambda@Edge only supports JavaScript and Python.
Cloudflare only supports JavaScript.
Fastly supports WebAssembly.

kerfuffle,
@kerfuffle@mastodon.online avatar

Actually, it may be soon that with WASI support as offered by Fastly can be targeted from / . Nice article on the development by @sdeleuze at https://seb.deleuze.fr/introducing-kotlin-wasm/

Would be sweet if I can have a static / website that uses for interaction with a backend written in Kotlin and compiled to running on an edge location using .

timotheegoguely, to webdev
@timotheegoguely@mastodon.design avatar

📊 State of HTML 2023 Survey Results:

https://2023.stateofhtml.com/en-US

> While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. After all once you've learned about <div>s and <h>s 1 through 6, what else is there to know?

cc @leaverou

Kovah, to webdev German
@Kovah@mastodon.social avatar

The results of the first State of survey are now available. 👀😍

https://2023.stateofhtml.com/en-US

css, to CSS
@css@front-end.social avatar

💡 CSS Tip!

Turn a simple input into single-digit inputs using a few lines of CSS. Useful for One-Time Password fields.
✅ No extra element (only one input element)
✅ Less than 15 CSS declarations
✅ Optimized with CSS variables

Demo: https://codepen.io/t_afif/full/XWwbMNO via :codepen: @codepen

Online Version: https://css-tip.com/single-digit-inputs/

Showing the result of the linked demo. A One-Time password field using a single input element.

leanpub, to webdev
@leanpub@mastodon.social avatar

Upgrade Your HTML V: New Examples to Optimize Your Markup https://leanpub.com/upgrade-your-html-5 by Jens Oliver Meiert is the featured book 📖 on the Leanpub homepage! https://leanpub.com #html #webdevelopment #ebooks

vanilla, to webdev
@vanilla@social.spicyweb.dev avatar

New video out on The Spicy Web! 🌶️

Here be a fresh (and tingly!) take on reaching for #HTML-first tools like htmx, Turbo, Unpoly, etc. and why you might just want to (spoiler alert!) go vanilla. 🍦 After all, we have so many great browser-native APIs at our disposal now! #JavaScript #WebDev

Sign in or sign up via Intuitive+ to watch:
https://www.spicyweb.dev/videos/2024/ajax-back-in-action/

raziel, to webdev
@raziel@sakurajima.social avatar

How the heck do you maintain semantic #HTML with #Bootstrap?

inautilo, to webdev
@inautilo@mastodon.social avatar


The modern guide for making CSS shapes · Shapes with the smallest and most flexible code possible https://ilo.im/15yu2g


remixtures, to webdev Portuguese
@remixtures@tldr.nettime.org avatar

#HTML #CSS #Hugo #WebDev #TechnicalWriting #SoftwareDocumentation #SSGs #StaticSites: “If you’ve ever wondered how a website works and whether or not you could build your own, this book is for you. The Static Site Guide walks you through the process of building a website from scratch by using hands-on examples. You’ll learn what a website is and how some of the most popular website technology works. By the time you reach the end, you’ll have built your very own website, and you’ll know how to do it again on your own.” https://www.staticguide.org/

teotimepacreau, to webdev French
@teotimepacreau@mastodon.design avatar

Excellent article à propos de la longévité des technologies du web.
Utiliser des outils simples comme le #HTML et le #CSS demande un apprentissage mais est un acte d'indépendance sur le long terme.

https://www.untappedjournal.com/issues/issue-11/jarrett-fuller-building-with-simple-tools-longevity

css, to CSS
@css@front-end.social avatar

📝 New CSS Article!

After the "Ultimate Collection of CSS Shapes". It's time for "The Modern Guide for making CSS Shapes". 🤩

https://smashingmagazine.com/2024/05/modern-guide-making-css-shapes/ via @smashingmag

A huge compilation of many CSS Tricks I have been using since years in this guide. All the secrets for creating CSS shapes are there!

Enjoy reading my 100th CSS Article! 🥳

#CSS #HTML #web

lizardbill, to RegEx
@lizardbill@hachyderm.io avatar

You can't parse [X]HTML with regex. #regex #html https://stackoverflow.com/a/1732454/1288

joelanman, to webdev
@joelanman@hachyderm.io avatar

If you have lists of data, GOV.UK Design System has two components for different contexts:

Table - for data with multiple rows and columns, for example different hotel room prices for different dates

Summary list - for data with a 'key' and value' column, for example definitions of words, or to display the users answers to questions

https://design-system.service.gov.uk/components/table/

https://design-system.service.gov.uk/components/summary-list/

joelanman, to webdev
@joelanman@hachyderm.io avatar

has anyone done a good tutorial for new HTML popovers? MDN is a bit dry

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover

#html #accessibility

kubikpixel, to webdev
@kubikpixel@chaos.social avatar

Oh look, in the future I won't have to worry about the invisibility of dialog boxes on websites because of their overlay.

☝️ Popover API
https://developer.mozilla.org/en-US/docs/Web/API/Popover_API


#webapi #webdev #css #javascript #api #design #html #html5 #visible #popover #webdesign #website #popoverapi #web

aardrian, to accessibility
@aardrian@toot.cafe avatar

I, for one, am curious how allowing tables (et al) in &lt;option&gt; is going to work when the issue discussing it is deferring #accessibility to another issue — in which none of them are participating.

WHATWG #10310: HTML parser changes for stylable &lt;select&gt;
https://github.com/whatwg/html/issues/10310

#a11y #html

inautilo, to music
@inautilo@mastodon.social avatar

#Development #Surprises
Printing music with CSS Grid · A fantastic showcase of what CSS Grid is capable of https://ilo.im/15yrr6


#Music #MusicNotation #CssGrid #WebDev #Frontend #SVG #HTML #CSS #JavaScript

css, to CSS
@css@front-end.social avatar

💡 CSS Tip!

How much code is needed to create a Sparkle shape? ✨
Only one gradient and you can easily get the border-only variation.

Demo: https://codepen.io/t_afif/full/eYaYzxX via :codepen: @codepen

Online Version: https://css-tip.com/sparkle-shape/

#CSS #HTML

Two sparkle shapes. The second one is a border-only variation.

noellemitchell, to Blog
@noellemitchell@mstdn.social avatar

So I just looked at my Neocities blog for the first time on mobile and...it doesn't look that bad 😆

I guess I was expecting it to look horrible 😂

https://noellesbookshelf.neocities.org/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • provamag3
  • kavyap
  • DreamBathrooms
  • everett
  • magazineikmin
  • InstantRegret
  • ngwrru68w68
  • Youngstown
  • Durango
  • slotface
  • rosin
  • GTA5RPClips
  • tester
  • PowerRangers
  • anitta
  • thenastyranch
  • mdbf
  • osvaldo12
  • ethstaker
  • vwfavf
  • cubers
  • normalnudes
  • tacticalgear
  • khanakhh
  • cisconetworking
  • modclub
  • Leos
  • megavids
  • All magazines