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.

Showing two range slider with a tooltip containing the selected values. 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 ?

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/

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 , balikan natin kung paano gagawing mas inclusive ang mga forms sa mga website natin.

(1/n)

sysop408, (edited ) to random
@sysop408@sfba.social avatar

I just published my first #Wix site today. I have limited experience with similar site builder services like Square Space and Weebly.

Is Wix typical of these kind of tools? I found it to be extremely difficult to use. On the plus side it almost gave me every ability I could produce as an actual developer... almost.

Less would have been more in the case of Wix. Just because you can stuff every possible feature into a Web based WYSIWYG builder doesn't mean you should.

It made it really hard to produce a simple and elegant site that is really what's needed by most people using such a service. If you truly have a need for the advanced features, trying to do those through multiple layers of nested menus is the worst way to do it. You might as well as hire a developer and do it the right way.

This site coulda been an email. Instead it was an insane toothpick tower that kept exploding on me b/c nothing played nicely with anything.

#WebDev

dedsyn4ps3,
@dedsyn4ps3@fosstodon.org avatar

@sysop408 a few years back when I launched my first page on Wix, I felt that the overall experience was fairly straightforward and to the point...plus some of the analytics and plug-ins available were nice, too.

That being said, after a years subscription of the Pro version ended, I chose to leave the platform and self-host my own page.

My advice, find a nice #React template and build your own...or #HTML if it's just static.

Much more flexibility of component design! 😎💯 :html5: :react:

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

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

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

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

mobileatom, to webdev
@mobileatom@flipboard.com avatar
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

stvfrnzl, to Astro
@stvfrnzl@mastodon.online avatar

In case you're using it: I've updated my @astro starter template to the latest #astro version.

https://astro-naut-template.vercel.app/

Also the external link component got a small, but important update. 🤗

#WebDev #Frontend #HTML #CSS #JavaScript

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/

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

So Kitten’s build process (i.e., the time it takes to build Kitten itself) takes ~0.7 seconds on my ~1 year old desktop (Ryzen 7 5700G 3.8Ghz) vs ~1.4 seconds on my ~3-year-old Starlabs LabTop (renamed to the Starbook thanks to a suggestion by yours truly but sadly, not quickly enough).

So, in summary, it’s bloody fast for something that results in a ~9MB bundle.

(And that’s all thanks to esbuild.)

https://codeberg.org/kitten/app

aral, (edited )
@aral@mastodon.ar.al avatar

Note that when you’re working with Kitten, your apps do not have a build process.

You write HTML, CSS, JavaScript and, optionally, extend using first-class support for htmx and alpine.js as well as Kitten’s own Streaming HTML workflow¹. There’s also no scaffolding or generating a project with hundreds of files or anything. You just write the code for your app.

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

khalidabuhakmeh, to blazor
@khalidabuhakmeh@mastodon.social avatar

I'm back to playing with #Blazor and #HTMX with the @egil Htmxor library. The Counter sample is nice and clear.

He has something exciting here for the #aspnetcore and #dotnet audience.

Check it out! https://github.com/egil/Htmxor

THe counter sample running in a browser with a current count of 12

aral,
@aral@mastodon.ar.al avatar
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

leanpub, to webdev
@leanpub@mastodon.social avatar

Upgrade Your HTML III by Jens Oliver Meiert is free with a Leanpub Reader membership! Or you can buy it for $7.99! http://leanpub.com/upgrade-your-html-3 j9t@mas.to

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

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.

css,
@css@front-end.social avatar

Ready for "Super CSS Mario II"? This time it's more challenging because you have to avoid some enemies 😬

0% JavaScript, 100% CSS magic & 100% addictive!

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

Show me your best attempt 👇

#CSS #HTML

  • 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