mobileatom, to webdev
@mobileatom@flipboard.com avatar
kerfuffle, to Kotlin
@kerfuffle@mastodon.online avatar

In 45 minutes I made a application from scratch, which uses to include from a pom file. It uses static files for the first load, and then renders HTML from templates for of the parts of the pages that need that kind of interaction. There's no (or any at all) and no like or .

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

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? #html

🔗 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

#Kitten #SmallWeb #build #performance #web #dev #esbuild #NodeJS #JS

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 🙂].

cssbasics, to webdev
@cssbasics@hachyderm.io avatar

Switching It Up With ’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/

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/

NeussWave, to webdev German

Ich mag eine machen, möglichst reines 4, möglichst ohne . 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?

doefom, to webdev
@doefom@mastodon.social avatar

Oh man, there are so many tags I didn't know about. One of those is the <abbr> tag that can be useful when working with abbreviations. Here's a short example.

image/png

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?

j9t, to webdev
@j9t@mas.to avatar

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

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

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 👇

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?

#html #css #learning

leanpub, to webdev
@leanpub@mastodon.social avatar

Upgrade Your HTML V 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-5 j9t@mas.to

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

noellemitchell, to webdev
@noellemitchell@mstdn.social avatar

I don't know why or how my blog has 17K views, it's not that great looking lol 😂

https://noellesbookshelf.neocities.org

leanpub, to webdev
@leanpub@mastodon.social avatar

Upgrade Your HTML V 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-5 j9t@mas.to

doefom, to webdev
@doefom@mastodon.social avatar

Do you know the tags 'details' and 'summary'? I didn't until now.

The combination of those two let's you toggle content with default HTML behavior. This is one of those things you will probably not use in production because it just doesn't look so nice but as always, for quickly prototyping something like an FAQ section this might just fit in perfectly.

image/png
image/png

mobileatom, to webdev
@mobileatom@flipboard.com avatar
  • All
  • Subscribed
  • Moderated
  • Favorites
  • JUstTest
  • mdbf
  • everett
  • osvaldo12
  • magazineikmin
  • thenastyranch
  • rosin
  • normalnudes
  • Youngstown
  • Durango
  • slotface
  • ngwrru68w68
  • kavyap
  • DreamBathrooms
  • tester
  • InstantRegret
  • ethstaker
  • GTA5RPClips
  • tacticalgear
  • Leos
  • anitta
  • modclub
  • khanakhh
  • cubers
  • cisconetworking
  • megavids
  • provamag3
  • lostlight
  • All magazines