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."

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.

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

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 📯?

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 ?

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.

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)

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

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

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

🛑 STOP Scrolling!

It's time to learn something new in CSS. You are one click away from getting a cool demo. What are you waiting for?

👉 https://random.css-tip.com 👈

#CSS #HTML

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

kerfuffle, to Kotlin
@kerfuffle@mastodon.online avatar

In 45 minutes I made a #kotlin #javalin application from scratch, which uses #webjars to include #htmx from a #maven pom file. It uses static #HTML files for the first load, and then renders HTML from #jte templates for #SSR of the parts of the pages that need that kind of interaction. There's no #springboot (or any #spring at all) and no #SPA like #angular or #react.

Now because simply setting up a project says close to nothing about its real world viability, next step is an actual usecase ( :

SteveFaulkner, to webdev
@SteveFaulkner@mastodon.social avatar

As a companion to my ALT LEFT article I created a bookmarklet to annotate decorative images and make them available in the accessibility tree

#ARIA #HTML #accessibility

https://codepen.io/stevef/pen/BaeQzex

isellsoap, to webdev
@isellsoap@mastodon.social avatar

Do you know of any spec efforts to make responsive image for video poster possible?

🔗 https://isellsoap.net/notes/2024-05-30-07-44-24/

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

Dev Web fullstack, je termine un long CDD en fin de semaine. Je suis donc libre à partir du 3 juin.

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

Compétences en +:
Maquettiste #Photoshop #Illustrator,
Monteur vidéo #Premiere, #Avid,
Habillage/Animation #AfterEffect

CV dispo en mp.

#HTML #CSS #PHP #JS #jQuery #Scss #Symfony #React #NextJs #ViteJs #Bootstrap #Tailwind #Stripe #dataTables #Wordpress #Prestashop #Sylius #MongoDb #Mariadb #aws #debian #Vi #bash #English

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

Contrast the attached screenshot of code for an index.html sample file with the minimal and valid alternative,

<!doctype html>
<title>My Website Home Page</title>
<h1>Welcome to my website</h1>
<p>Now hosted on Amazon S3!

But a few of you know that this is a thing of mine (and of everyone into minimal and valid HTML), so I [won’t use this as a teaser for anything 🙂].

#html

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

🆕 ALT LEFT

"AI can help by providing mostly accurate descriptions of images on web pages. This can be especially helpful when the image has not been provided with an text alternative, but is visible on the page."

⚠️ Nightmare image content warning.
https://html5accessibility.com/stuff/2024/05/27/alt-left/

Natanox, to webdev
@Natanox@chaos.social avatar

I probably get flooded by asking this but welp, here I go:

I'm looking for a good, visual (!) #tutorial for #WebDevelopment that focuses on Codium, Firefox and other Open-Source tools. My specific interests are to learn #HTML, #CSS, #PHP and #SQL. Perhaps some minor #Javascript, however I'd like to primarily work without it.

I'm a visual learner, extended theory in text won't help me at all. As language is visual to me, so is #programming.

Anyone knows something that checks these boxes?

cssbasics, to webdev
@cssbasics@hachyderm.io avatar

Switching It Up With #HTML’s Latest Control: "After years of relying on checkbox hacks to create a “switch” control for forms that toggle between two states, HTML may be gaining a native way to go about it by adding a switch attribute to checkbox inputs." https://www.smashingmagazine.com/2024/05/switching-it-up-html-latest-control/

NeussWave, to webdev German

Ich mag eine #Website machen, möglichst reines #HTML 4, möglichst ohne #Javascript. CSS 3 wenns sein muss, sonst eher 2.

Die Website soll möglichst auf Chrome genauso laufen wie auf Netscape (die Älteren werden sich erinnern...) und auch in Text-Browsern wie Lynx oder w3m.

tl;dr: Die Seite soll auch noch funktionieren, wenn javascript und css ausfallen.

Wie würde ich da denn "Tabs" machen? Oder was wären Alternativen zu tabs?

#Webdev #Programming

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

🎮 New CSS Game!

What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality!

Play "Super CSS Mario", the first ever CSS-Only game playable using your keyboard. Have fun! 🤩

✅ 0% JavaScript
✅ 100% CSS Magic

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

Record yourself and show me your best attempt (No screenshots & no cheating 😈)

It's a Chrome (or Edge) only. I repeat, it's a Chrome-only experience.

#CSS #HTML #game

Showing a demo of the CSS-only game linked in the post. A cool Mario game where you can collect gold coins using Keyboard.

j9t, to webdev
@j9t@mas.to avatar

@leanpub with an unbeatable offer for all “Upgrade Your #HTML” books 📚

Offer URL: https://leanpub.com/b/upgrade-your-html-1-5/c/B8F9F7B6A7044D16AF962B6647B04CD5

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

I’m planning and preparing a new book, about rote learning HTML and CSS. (Will add the draft cover!)

Double question!

  1. Is “rote learning” clear?

  2. Would you be interested in such a book?

doefom, to webdev
@doefom@mastodon.social avatar

Here's another interesting tag. <mark> lets you highlight certain parts of your text to draw extra attention to it.

One real world example where this can be especially useful is highlighting the parts of your search results that match the search query. Or at least that's where I regularly use it.

Any more ideas on where this might be useful?

image/png

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