davidbisset, to webdev
@davidbisset@phpc.social avatar

"Here’s What We Learned From the First State of Survey"

https://frontendmasters.com/blog/state-of-html-2023-results-2

"...when asked how they allocated their time between writing HTML/ and JavaScript/TypeScript code, 59% said they spent more than half their time writing – even though the survey was clearly aimed at people interested in HTML."

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

👉🏽 Doing my heading in

"Earlier in 2024 I was approached by @Wilto to answer some questions on HTML headings. At the time I was only vaguely aware that the interview would become part of a printed Zine (pleasant surprise face), published by Mat with profits going to support Trans Lifeline."

#HTML #webStandards #a11y

https://html5accessibility.com/stuff/2024/06/05/doing-my-heading-in/

j9t, (edited ) to webdev
@j9t@mas.to avatar

#HTML: There are several valid syntaxes for tags, like “<em/.../”, “<>”, or empty start tags.

davidbisset, to webdev
@davidbisset@phpc.social avatar

"In Praise Of The Basics"

https://www.smashingmagazine.com/2024/05/in-praise-of-the-basics/

"Long live the basics! Long live the “a-ha!” moments that help us all fall in love with the World Wide Web."

bitsgalore, to webdev
@bitsgalore@digipres.club avatar

Latest version of standard includes a warning that advises against using the syntax (formerly known as ), stating that it's "essentially unmaintained"🧐 :

https://html.spec.whatwg.org/multipage/xhtml.html

Looks like a recent change, as there's no mention of this in the April 3 version of the spec:

https://web.archive.org/web/20240403210532/https://html.spec.whatwg.org/multipage/xhtml.html

Unless I'm misreading it, this seems like a big deal? E.g. XML syntax is mandatory in 3 documents:

https://www.w3.org/TR/epub-33/#dfn-xhtml-content-document

Time to 📯?

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

Using modern CSS features to create a custom range slider with a tooltip. There is no JS to update the values, it's pure CSS with minimal HTML 😎

Powered by Scroll Driven animation, Anchor positioning, @​property and more! 🤩

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

Online Version: https://css-tip.com/range-slider-tooltip/

It's Chrome only for the tooltip but the range slider works fine in all the browsers.

#CSS #HTML

Showing two range slider with a tooltip containing the selected values. From the linked demo.

simevidas, (edited )
@simevidas@mastodon.social avatar

@css Not having a label is not the problem. The problem is using a <label> element without including a label. That’s confusing. The purpose of the <label> element is to include a label. There is no other reason why this element exists, so if you don’t have a label in the demo, don’t use <label>. Just remove it. Use a <span> if you need a wrapper element.

css,
@css@front-end.social avatar

The previous range slider was good but not good enough to me. Let's upgrade it with some motion!

Now the tooltip will follow your movement to get a more realistic effect. Still 100% CSS magic. No JS! 😎

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

Showing two range sliders with tooltip. Overview from the linked demo

johann, to webdev French
@johann@masto.bike avatar

Je n'arrive pas a imprimer une page HTML qui contient une (longue) table dans un document Google Sheet "read only" (sans menu)

Dans Firefox, File > Print as PDF, ça n'imprime que la partie qui est visible dans le navigateur.

Quelqu'un-e a une solution ?

johann,
@johann@masto.bike avatar

@sknob Ouh c'est élégant :)

Il y a @joe qui a utilisé un plugin de FireFox :
https://seine.fleuv.es/@joe/112553663447562954

Vous êtes supers, MERCI 🖤

sknob,
@sknob@mamot.fr avatar
scoonch, to photoshop French
@scoonch@mamot.fr avatar

Dev Web fullstack, après un enchaînement de CDD, je suis libre à partir d'aujourd'hui.

CDI distanciel de préférence sinon je m'adapte, je suis à Paris.

Compétences en +:
Maquettiste ,
Monteur vidéo ,
Habillage/Animation
Régie/Vidging/Mapping:

CV en mp.



















antaresphdev, to webdev Tagalog
@antaresphdev@mas.to avatar

Nagbibigay ang Web Platform Baseline ng malinaw na info tungkol sa mga bagong web platform features na puwede nang magamit sa mga production sites.

Tingnan ang details nito sa website ng Antares Programming: https://antaresph.dev/resources/baseline/ #webdevelopment #html #css #javascript

kerfuffle, to webdev
@kerfuffle@mastodon.online avatar

I'm only just finding my way in the land of , but it feels like "trigger a request from any element" is a trap. I want progressive enhancement, which still requires a functional non-Javascript page before adding the nice things htmx offers. I didn't realise how rusty I am with regard to designing a presentation layer for all this in the backend.

_chrismay,
@_chrismay@fosstodon.org avatar

@kerfuffle I think you're right on. That's how I craft my htmx apps.

Some people use hx-boost (https://htmx.org/docs/#progressive_enhancement) to do progressive enhancement.

I haven't tried it yet, but I thought you might want to look into it.

kerfuffle,
@kerfuffle@mastodon.online avatar

@_chrismay
Yeah I've been looking at that. Reading the HX-Request header to determine whether to give a full-page response or just a snippet is what I do, and it quickly made it clear that navigating my site structure needs more up-front attention. Which is pretty much in line with I think.

antaresphdev, to queer Tagalog
@antaresphdev@mas.to avatar

Sa unang araw ng #Pride, balikan natin kung paano gagawing mas inclusive ang mga forms sa mga website natin.

#webdevelopment #html (1/n)

antaresphdev,
@antaresphdev@mas.to avatar

Kung gusto mong malaman ang gender ng users mo dahil gusto mong malaman kung paano sila tatawagin, baka mas angkop na hingin mo ang kanilang pronouns.(3/n)

antaresphdev,
@antaresphdev@mas.to avatar

Kung gusto mong malaman kung ano ang epekto ng product mo sa isang specific na gender demographic, o gumagawa ka ng research at sa tingin mo ay makakatulong na malaman ang gender ng users, puwede mong hingin ang kanilang gender identity. (5/n)

tommi, to CSS
@tommi@pan.rent avatar

Hey @piccalilli!

I found https://buildexcellentwebsit.es extremely insightful and inspiring! It pushed me to finally completely restructure my personal website’s #CSS, after many years of mess.

I used the awesome https://utopia.fyi to generate the vars, (actually, I am using the SCSS library).

Unfortunately, though, I find the massive use of all those calc() and clamp() functions to be quite heavy in terms of performance… #Lighthouse gave the website a very bad performance score (see screenshot). It even seems that while scrolling the page it lags (😳) even if it’s super simple and built with pure #HTML and CSS!

Do you have any ideas or suggestions? 🤔

Thank you so much for all the interesting things you share! ❤️🚀

(The current unstable development version of my website is at https://dev.tommi.space/, I am using the homepage as reference)

Cc: @j98 + @trys

#WebDesign #WebDev #browser #BuildExcellentWebsites #PersonalWebsite #CSSGrid #PageSpeed

trys,
@trys@mastodon.social avatar
tommi,
@tommi@pan.rent avatar

Exactly what I was looking for!
Thanks again, @trys! Have a wonderful day.

youronlyone, to Philippines
@youronlyone@c.im avatar

Is there a color “Cable No.” conversion table or online tool available?

I've been checking sites and search engines but I cannot any. Maybe someone have a bookmark or something.

I need to convert the following:

  • Cable No. 80173
  • Cable No. 80108
  • Cable No. 80068

The confusing thing is that Wikipedia and various flag websites provide different RGB Hex codes:

  • 0038A8 vs 0032A0
  • CE1126 vs BF0D3E
  • FCD116 vs FED141

Which is more accurate, Wikipedia or the flag websites?

O_O


Legal code: https://thecorpusjuris.com/legislative/republic-acts/ra-no-8491.php

Wikipedia: https://en.wikipedia.org/wiki/Flag_of_the_Philippines

Sample flag website: https://www.flagcolorcodes.com/philippines


Tags:

@pilipinas @philippines @pinoy

mayank, to webdev
@mayank@front-end.social avatar

i created a tiny (~10LOC) custom element to demonstrate how easy it can be to avoid repetition of shadow dom templates.

why can't we have something like this built into ? seems fairly safe and uncontroversial

https://www.mayank.co/notes/use-html

scottjehl,
@scottjehl@mstdn.social avatar

@mayank nice. I like example 2 best.

scottjehl,
@scottjehl@mstdn.social avatar
serapath, to web
@serapath@mastodon.gamedev.place avatar

Why don't iframe nest more than 2-3 times?
Is that because browsers or because web spec?

https://codepen.io/serapath/pen/jOoyRKJ?editors=0010

#web #dom #html #javascript

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