WoodooProd, to godot French
@WoodooProd@mastodon.cloud avatar

An excellent indie ( Thanks @jake4480 ) that runs on current machines (Windows, Linux, MacOS, & HTML5). Frankly, very good! Good surprise! I would have liked it to be compatible with older machines, but no. Two quality PDF manuals. On my list of favorite Roguelikes! If you like this kind of game: recommended! :0)

The first part..

image/png

jake4480, to webdev
@jake4480@c.im avatar

Trying out GodoRogue tonight. It's great! You can use the keyboard commands or mouse directly to different locations, how you can see in the screenshot - the yellow line. And you can play this one in-browser. It was made in HTML5!

https://itch.io/queue/c/3248131/in-browser?game_id=959783

#roguelike #roguelikes #HTML5 #rogue #Godot #GodoRogue #IndieGames #HTML #ItchGames #DungeonCrawlers

aral, to SmallWeb
@aral@mastodon.ar.al avatar

Just updated the video on my Streaming HTML article so it’s no longer using Vimeo’s video player (which has tracking) but a simple video tag.

https://ar.al/2024/03/08/streaming-html/

(Sorry it took a little while, it involves a bit more work – but not much more – than simply copying the embed code over.)

PS. Would anyone be interested in a little write-up of how to embed Vimeo videos without their player/tracking but still keeping the closed captions?

shom, to accessibility
@shom@fosstodon.org avatar

friends, I need some guidance.

I tried adding video alt-text on my website [1], but apparently HTML5 <video> doesn't support the alt attribute. @mozilla docs [2] suggests adding text-tracks, so I added a VTT file for closed captioning, that feels hacky.

Is this really the best option or are there better ways? My video doesn't have a voice track, it's better described with alt-text.

[1] https://shom.dev/posts/20240204_filmposter-with-gum-hugo-photo-post-bliss/
[2] https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia#video_text_tracks

flavorjones, to webdev
@flavorjones@ruby.social avatar

a banger of a proposal for the HTML spec:

an HTML Attribute to state non-consent when scraping for training datasets.

https://github.com/whatwg/html/issues/10101

schizanon, to webdev
@schizanon@mas.to avatar

Google released in 2011 as a way of fixing a very specific problem:

> How do we build Google Meet?

Back then, the web was a very different place. Flash was the only way to do live media and it was a mess. was primarily for pre-recorded content.

https://quic.video/blog/replacing-webrtc/

seedy, to webdev

I now have a membership tier on my Ko-fi! Have you always wanted your own based ? Access to exciting, moving, heart warming poems and short stories? What about 320Kbps and versions of my ring tones and UI notification sounds? Personal shoutouts and reviews? Well, for as little as just over a tenner a month, you'll get all these perks and more when you become a fireseeder!
By becoming a fireseeder, you're not only getting access to awesome benefits like those listed above, but you're helping to support a funny, loving, kind hearted who loves nothing more than being a technology geek and helping others in any way he can, be it through content creation, tech support, or the simple act of being there for someone in need.
https://ko-fi.com/seedythreesixty

J12t, to webdev
@J12t@social.coop avatar

What’s the most compelling use of HTML 5 custom tags that you’ve seen?

(Other than A-Frame, that one is really good but quite special purpose.)

Edent, (edited ) to webdev
@Edent@mastodon.social avatar

🆕 blog! “How to check something isn't an email address?”

In web-development circles, it is a well-known fact that trying to validate an email using a regular expression is… complex. The full set of modern email standards allows for such wonderful addresses as: chief.o'brien+ds9@spásárthach.भारत So determining whether or not your user has entered a valid …

👀 Read more: https://shkspr.mobi/blog/2023/09/how-to-check-something-isnt-an-email-address/

krinkle, (edited ) to webdev
@krinkle@fosstodon.org avatar

"Google Sites" now supports embedding images.

What you want: <img style="margin: 0 auto;">

What you get:

  • ~100 HTML elements, including 57 unique CSS class names across 83 attributes, 30 hidden DIVs, 3 iframes, 2 external script tags, 2 inline script tags, and 1 actual <img> tag.
  • the <img> is inside an iframe, nested 3 (!) levels of iframes deep.
  • an image cut off in both X and Y directions.
  • not one, but two unwanted scrollbars.

#enshittification #webperf #SemanticHTML #html5 #HTML

Edent, to accessibility
@Edent@mastodon.social avatar

🆕 blog! “I think I kind of hate lazy loading”

Yesterday I was on a train. I clicked on a link and my browser loaded a long article for me to read. Halfway through reading it, the train went into a tunnel and I lost signal. That meant I couldn't see the images on the other half of the page for the rest of the […]

👀 Read more: https://shkspr.mobi/blog/2023/09/i-think-i-kind-of-hate-lazy-loading/

TheRealPomax, to webdev
@TheRealPomax@mastodon.social avatar
Edent, to accessibility
@Edent@mastodon.social avatar

🆕 blog! “This link is only available by keyboard navigation”

There's a link, right here ➡️⬅️ but, if you're on a touchscreen, you can't tap on it. Using a mouse? Nope, that won't work either. The only way to navigate to it is via keyboard navigation. Hit your Tab ⭾ button! There's a little bit of me wants to build an entire website which can […]

👀 Read more: https://shkspr.mobi/blog/2023/07/this-link-is-only-available-by-keyboard-navigation/

amberage, to javascript
@amberage@eldritch.cafe avatar

doesn't have any customisable dialog boxes, so you have always had to build your own. Since , there's the dialog element for that, which is neat, but comes with the additional problem of not blocking execution until it's closed.

So now I, wanting to replace a confirm call with a custom dialog, have to figure out how to halt my script until the dialog has been closed, and ahhhhh!!!

I tried creating a new Promise object, calling await myPromise, and resolving that promise with the dialog's OK button, but that failed because the promise doesn't have a built-in resolve function (how could it, it's supposed to be resolved externally).

AHHHHH!!!!!!

Why the fuck does JavaScript not have a proper waitUntil function? Now I have to do it dirty with while(!checkOpen(myDialog)) { }, which is just nasty.

matkoch, to webdev

AngleSharp gives you everything you need to love ❤️ Learn more about exploration, query selectors, and support!

📺 OSS Power-Ups:
🗣 Speaker: Florian Rappl

📅 Next week, 12 July, 5pm CEST / 11am EDT
🤗 Open to all, welcome!

https://blog.jetbrains.com/dotnet/2023/07/06/webinar-oss-power-ups-anglesharp/

w3cdevs, to webdev
@w3cdevs@w3c.social avatar

🗓️ July@w3c:

david_megginson, to webdev
@david_megginson@mstdn.ca avatar

Who still uses on the web?

  • and Atom: news, blog, and other updates
  • International Aid Transparency Initiative (): aid spending and budgets
  • : U.S. public corporate filings
  • Scalable Vector Graphics () files
  • the well-formed flavour of
  • etc etc

(I left out stuff in zipfiles like Word and Excel.)

Old never die; they just become boring critical infrastructure.

Edent, to webdev
@Edent@mastodon.social avatar

🆕 blog! “Can this device make a phone call?”

I want to detect if a web browser is running on a device which is capable of placing a telephone call. Is that possible? I'm going to go with a cautious "no - not quite". Although there are several proxies which get you part of the way there. Here's a link to a telephone number […]

👀 Read more: https://shkspr.mobi/blog/2023/06/can-this-device-make-a-phone-call/

Edent, to webdev
@Edent@mastodon.social avatar

🆕 blog! “Does AI mean we don't need the Semantic Web?”

If you hang around with computerists long enough, they start talking about the Semantic Web. If you can represent human knowledge in a way that's easy for computers to understand it will be transformative for information processing. But computers, traditionally, haven't been very good at parsing ambiguous …

👀 Read more: https://shkspr.mobi/blog/2023/05/does-ai-mean-we-dont-need-the-semantic-web/

.org

Edent, to webdev
@Edent@mastodon.social avatar

🆕 blog! “Responsive Yearly Calendar with Flexbox”

This blog has a calendar showing my yearly archives. It was in a table layout - which made sense when I first designed it - but had a few spacing niggles and was hard to make responsive. Now, it behaves like this: The code is relatively straightforward. The HTML for the calendar looks like this: […]

👀 Read more: https://shkspr.mobi/blog/2023/04/responsive-yearly-calendar-with-flexbox/

Edent, to CSS
@Edent@mastodon.social avatar

🆕 blog! “How to password protect a static HTML page with no JS”

I recently saw Robin Moisson's method of password protecting a statically served HTML page. It's quite neat! But it does rely on JavaScript. That got me wondering if there was a way to encrypt a static page only using CSS? And... I think I've done it! I'll warn you now, this is a deeply s…

👀 Read more: https://shkspr.mobi/blog/2023/02/how-to-password-protect-a-static-html-page-with-no-js/

Edent, to webdev
@Edent@mastodon.social avatar

How to add ISSN metadata to a web page

Inspired by John Hoare at the Dirty Feed blog - I've asked the British Library to assign my blog an International Standard Serial Number (ISSN).

An ISSN is an 8-digit code used to identify newspapers, journals, magazines and periodicals of all kinds and on all media–print and electronic.

Why?

Shut up.

OK. It turns out that lot

https://shkspr.mobi/blog/2021/09/how-to-add-issn-metadata-to-a-web-page/

#/etc/ .org

Edent, to CSS
@Edent@mastodon.social avatar

-webkit-text-stroke and emoji

The CSS property -webkit-text-stroke is a curious beastie.

MDN gives a big scary warning saying "Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web."

And yet, it works everywhere. All modern browsers support it. Except on Emoji.

Here's how it work. -webkit-text-stroke: pink 1px; draws a pin

https://shkspr.mobi/blog/2021/09/webkit-text-stroke-and-emoji/

#/etc/

Edent, to chrome
@Edent@mastodon.social avatar

What's the window size of a background tab?

Whenever I open Twitter in a new tab on my phone, the page layout looks weird for a few seconds. It starts out looking like the desktop view and then, after a few seconds, it snaps back to the mobile view.

What's causing this?

Try opening this link to a window size detector in a background tab. Then visit tha

https://shkspr.mobi/blog/2021/09/whats-the-window-size-of-a-background-tab/

#/etc/

Edent, to accessibility
@Edent@mastodon.social avatar

Adding a language tag to image elements

(You may already know this, but I didn't. Every day is a school day.)

HTML has the concept of the lang attribute. It allows you to say that a specific element contains text in a specific human language. For example, this page starts with:

That says the entire page is written in English, with the sub-type of Great Britain. T

https://shkspr.mobi/blog/2021/08/adding-a-language-tag-to-image-elements/

#/etc/

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