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

aardrian, to accessibility
@aardrian@toot.cafe avatar

I, for one, am curious how allowing tables (et al) in <option> 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 <select>
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 😂

#blog #coding #html #WebDev

https://noellesbookshelf.neocities.org/

stvfrnzl, to Nirvana
@stvfrnzl@mastodon.online avatar

To honor the late #SteveAlbini, I turned his letter to #nirvana into a #ScreenReader friendly website, using only #HTML, #CSS and #GoogleFonts:

https://stevefrenzel.github.io/steve-albini-letter/

Thanks to @thebishopgame who provided a link to the letter: https://wandering.shop/@thebishopgame/112406577143090727

Hopefully no typos in there! Also it respects your choice of color theme. 🤗

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

It’s out: “Upgrade Your HTML V” is available now! 👏

Thanks and kudos @5t3ph (foreword and review), @zcorpan (reviews), and Martha Martins (editing) for their help making this a worthy new part of the HTML craft and minimalism ebook series!

HTML forever ✌️

https://meiert.com/en/blog/upgrade-your-html-5/

mobileatom, to webdev
@mobileatom@flipboard.com avatar

Why use Web Components over traditional DOM manipulation? #WebComponents #HTML #JavaScript

https://gomakethings.com/why-use-web-components-over-traditional-dom-manipulation/?utm_source=flipboard&utm_medium=activitypub

Posted into Coding is Living @coding

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

It’s easy to get confused about how to work with element properties in vs. how to work with element attributes in .

@jaffathecake to the rescue!

In this article, Jake talks about value types, serialization, reflection, case sensitivity, and a host of other interesting details.

https://thathtml.blog/2024/05/props-v-attributes-go/

brutella, to webdev

A big advantage when working with web technology is that you can easily deploy your product on your own server. #html #htmx http://hkknx.hochgatterer.me

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

💡CSS Tip!

Using the new relative color syntax, you can easily extract the R,G,B channels of any color and use them as separate colors.

Useful when you want to do some color manipulation.

Online Version: https://css-tip.com/rgb-channels/

css,
@css@front-end.social avatar

You can do the same thing with a different syntax using the color() function.

In both cases, you can either use "none" or "0". "none" is equivalent to "0" but has a special behavior when color interpolation is in play.

#CSS #HTML

dnikub, to random

a11yphant #update 🐘

We have a new landing page! 🎉
The team wanted to highlight what makes #a11yphant unique, spiced up with some illustrations and feedback from our users.

Join over 1900 others and be part of the community: https://a11yphant.com

stvfrnzl,
@stvfrnzl@mastodon.online avatar

@dnikub Looks beautiful! Also a great resource for anyone who knows at least a little bit of #html

stvfrnzl, (edited ) to legal
@stvfrnzl@mastodon.online avatar

Currently studying for the exam and I found the part surprisingly interesting. This topic was also relevant in a workshop I gave, so here's a couple of law suits that are related:

https://stevefrenzel.dev/posts/five-web-accessibility-law-suits/

I'm happy to expand this list if you know other interesting cases. 🤗

phillip, to webdev
@phillip@social.tchncs.de avatar

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

j9t, to webdev
@j9t@mas.to avatar

It’s very close… but you can preorder “Upgrade Your HTML V” on Kobo and Google Play Books!

https://www.kobo.com/us/en/ebook/upgrade-your-html-v × https://play.google.com/store/books/details/Jens_Oliver_Meiert_Upgrade_Your_HTML_V?id=sywGEQAAQBAJ

nshki, to webdev
@nshki@ruby.social avatar

Hi fediverse. My name is Nishiki and I’m a web dev with 15+ years of experience. I’m making myself available as a mentor for one or two motivated individuals looking to land their first junior engineering position. I’m happy to be able to say over the past few years, I’ve mentored 4 wonderful people who have all managed to land their first tech jobs.

Please email me at hello@nshki.com if interested. A boost for reach is much appreciated!

#WebDev #Mentor #Rails #JavaScript #PHP #HTML #CSS

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

💡 CSS Tip!

To target the html element, you either use "html {}" or ":root {}" but thanks to CSS nesting you can simply use "& {}"

When used alone, the nesting selector will match the root element!

A one-character selector 🤯

⚠️ It has a lower specificity than html and :root

Online Version: https://css-tip.com/root-selector/

#CSS #HTML

vantablack, to webdev
@vantablack@cyberpunk.lol avatar

FUN FACT: you can use emojis as favicons!!!

just do this

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖤</text></svg>"><br></br>

#html #css #WebDesign

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

🧩 https://css-shape.com/circle-cut/

#CSS #HTML

A screen record of the provided link. Showing different circular cut shapes with an online editor to update the code.

stvfrnzl, to accessibility
@stvfrnzl@mastodon.online avatar

I decided (again) to prepare for the exam by the after I had some doubt of it's usefulness.

But after doing a non-technical workshop for newbies last week and believing that the will have some impact, I decided to go for it!

I'm using the @dequesystems prep course and read everything with 200% zoom. Unfortunately this makes paragraphs very long, so I'd like to share a I quickly created to shorten them:

stvfrnzl,
@stvfrnzl@mastodon.online avatar

@dequesystems ```
javascript: (() => {
const allParagraphElements = document.getElementsByTagName('p');

for (let paragraph of allParagraphElements) {
paragraph.style.width = '60ch';
}
})();


Here's a little tutorial on how to add them to you bookmarks: <https://www.freecodecamp.org/news/what-are-bookmarklets/>

#frontend #WebDev #HTML #CSS #JavaScript #a11y
DiazCarrete, to haskell
@DiazCarrete@hachyderm.io avatar

Made a video: generating HTML in Haskell using "lucid2"
https://www.youtube.com/watch?v=SQ78GVCzsz0

vantablack, to webdev
@vantablack@cyberpunk.lol avatar

what do i need to change to make https://amazingdigitalcirc.us so it actually scrolls down the page?

#html #css #help

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

🧩 https://css-shape.com/curved-edge/

#CSS #HTML

A screen record of the provided link. Showing different curved edge shapes with an online editor to update the code.

pawelgrzybek, to webdev
@pawelgrzybek@mastodon.social avatar

Interesting HTML/Accessibility fact.

HTML supports 6 levels of headings. ARIA supports 9 hierarchical levels, via aria-level property.

WAI-ARIA Spec:
https://w3c.github.io/aria/#aria-level

“Tackling The Web's Oldest Problem” episode of Igalia Chats podcast by @Meyerweb and @bkardell:
https://www.igalia.com/chats/heading

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