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

New Video – Kitten features introduced this week:

• Interactive Shell (REPL)
• Multi-page Settings
• Backup and restore (data portability)

With examples that cover components and Kitten’s built-in JavaScript database (JSDB).

https://ar.al/2024/05/23/new-kitten-features-interactive-shell-repl-multi-page-settings-and-backup-and-restore-data-portability/

:kitten:💕

cirrus, to webdev
@cirrus@mstdn.social avatar

Started writing a decision log for our . Documenting why we chose to build plain ol' and where we can and where client-side is needed is turning into a bit of a manifesto. Essentially we're using (and encouraging others to use) 😉

davidbisset, to CSS
@davidbisset@phpc.social avatar

matcha.css is a "drop-in semantic styling library in pure ".

https://matcha.mizu.sh/

Designed to style elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.

Ideal for fast prototyping, static HTML pages, generated documents, etc.

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

So! Many! Kittens!

(Going to record a demo of the new interactive shell – REPL to some – and multi-page Settings this afternoon, just planning it out now.)

Oh and is that me creating and calling web routes interactively in the REPL on a live server? Why yes, yes it is.

:kitten:💕

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

💡 CSS Tip!

One line of code that looks strange and confusing. You may think it's not even CSS but it will save you many times in the future!

It will make sure the width of your element is always an integer! No more decimal and rounding issues!

"width: auto" with an upgrade 😎

No browser support yet but you can test it on the latest Chrome with the experimental flag enabled: https://codepen.io/t_afif/pen/rNgLyJz

#CSS #HTML

ayo, (edited ) to webdev
@ayo@ayco.io avatar

Here’s my latest case study for a server-rendered HTML of a Mastodon feed with only one progressive enhancement web component (github’s relative-time) — it turned out (surprisingly) pretty good if I may say so myself 🥹

https://ayco.io/threads

#html #webdev #frontend #opensource

jkjustjoshing, to CSS
@jkjustjoshing@fosstodon.org avatar

Is there ever a time when this

width: 100%;
max-width: 480px;

behaves differently than this?

width: 480px;
max-width: 100%;

westbrook, to webdev
@westbrook@mastodon.social avatar

h* elements have margin by default!? Who knew.

#maintainerLive #html #css

SteveFaulkner, to webdev
@SteveFaulkner@mastodon.social avatar

🗒️Not so short note on aria-label usage – Big Table Edition
Updated: 22 May 2024

https://html5accessibility.com/stuff/2024/05/22/not-so-short-note-on-aria-label-usage-big-table-edition/

emmanuelc, to CSS French
@emmanuelc@mamot.fr avatar

Dites, développeuses z'et développeurs, régulièrement, dans mon cercle professionnel direct, j'entends dire que vous n'aimez pas (voire ).
Question sérieuse et qui n'appelle pas à réveiller quelconque troll ou débat sans fin : pourquoi n'aimez-vous pas ce langage ?
Qu'est-ce qui vous chiffonne, vous rebute ?
D'où vient votre éventuel manque d'intérêt ?
J'ai déjà des éléments de réponse proches de moi, mais je suis curieux d'élargir la question ici.

stvfrnzl, to webdev
@stvfrnzl@mastodon.online avatar

I finally got for @astro working! Thanks to @henry sparking my interest for it (again) and anyone here who helped me along the way.

https://stevefrenzel.dev/posts/webmentions-in-astro-for-blog-posts/

I would appreciate lots of likes, reposts and comments so I have more data to work with hehe
😈

danrot, to webdev
@danrot@mastodon.social avatar

I am sincerely wondering how hard it is to style a checkbox using . I'd be happy with just aligning them with a label, but this already seems to be asking for a lot. And most answers I find online are already outdated...

But hey, if you know more than I do let me know 🙂

jameskerr, to webdev
@jameskerr@mastodon.social avatar

It is okay to nest <article /> elements so long as they contain a unit of self-contained content that could stand on its own and make sense, but also related to its parent article.

baldur, to random
@baldur@toot.cafe avatar

We really don’t make enough of the fact that you don’t need JS to make a nice website. Just HTML and CSS

And, whatever most programmers say about them, HTML and CSS are absolutely much more accessible to learn than JS ever has been or will be

FalkAppel,
@FalkAppel@digitalcourage.social avatar

@baldur as someone with such a homepage (probably not that nice, but adaptive layout and translation) I can tell you the main benefit: lowest maintenance costs possible. I only change something when the content has to change.
No language and dependency updates.
No tooling dependencies.
And browser take care to be backward compatible.
Additionally loading super fast.
Team #HTML #CSS only 🤓

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

We Need to Talk More About Conformance, If We Want to Stop Fantasy HTML:

Conformant and valid HTML is the exception on websites and in apps, even though valid output is a sign of professional web development. Given how rarely the topic is being discussed these days, we benefit from raising more awareness for HTML conformance and validation.

https://meiert.com/en/blog/talk-about-html-conformance/

toddztoonz, to CSS
@toddztoonz@social.lol avatar

If you have an opportunity to attend this study hall hosted by @artlung , do it!

The first session was amazing and super informative. As a result, ended up refactoring and simplifying the chaotic mess that was my stylesheets😊 Was unable to attend the second, unfortunately, but looking forward to the third this Thursday.

https://events.indieweb.org/2024/05/front-end-study-hall-003-CHeoDn1hkrMq

access42, to accessibility French
@access42@social.a11y.fr avatar

Blog 📝 — Vous ne comprenez pas pourquoi vos zones live ARIA ne sont pas restituées par les lecteurs d’écran ?

Découvrez des pistes d'explications dans ce nouvel article de notre collègue Cécile Jeanne !

https://a42.fr/aria-live-regions-restitution

#a11y #ARIA #webdev #RGAA #HTML

iamdtms, to webdev
@iamdtms@mas.to avatar

Never ending story...

https://htmlemoji.cloud

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

:kitten: 🎉

Kitten now has a lovely new multi-page Settings screen and… drumroll… a new 🐢 interactive shell (REPL) for you to play with the running state of your Small Web site/app/place and debug your app, inspect/manipulate its database, etc.

I plan on recording demos of each of them tomorrow but you can play with them now.

And here’s a little tutorial to get you started with the shell:

https://codeberg.org/kitten/app#kitten-s-interactive-shell

💕

Screenshot of Kitten running in terminal: 🌍 Domain https://localhost 📂 Source /var/home/aral/Projects/kitten/app/examples/file-uploads 💾 Databases /var/home/aral/.local/share/small-tech.org/kitten/databases 🐢 To launch an interactive shell, press the [s] key. Server is running and listening for connections… s 🐢 Launching interactive shell ctrl-d to exit; .help for assistance A good place to start is to run the .ls command to see the keys of the global kitten object: » 💡.ls is an alias for Object.keys(kitten) [ 'version', 'domain', 'port', 'app', 'databaseDirectory', 'projectIdentifier', 'deploy', 'WebSocket', 'html', 'libraries', 'page', 'events', 'css', 'js', 'markdown', 'md', 'safelyAddHtml', 'sanitise', 'uploadsDirectory', '_db', 'uploads', 'package', 'db' ] 🐱 💬 kitten.db.images[0] Proxy [ { path: '/uploads/1a6c2612-057d-435b-83c7-7157b4add982/', altText: 'Screenshot of Draw Together sketch that reads Free Gaza!' }, { get: [Function: bound getHandler], set: [Function: bound setHandler], defineProperty: [Function: bound definePropertyHandler], deleteProperty: [Function: bound deletePropertyHandler] } ] 🐱 💬

JanMiksovsky, to webdev
@JanMiksovsky@fosstodon.org avatar

The fixation at #GoogleIO last week on AI buried the much more interesting talk by @Una on The Latest in Web UI, which highlighted the ton of interesting features arriving in #HTML and #CSS. https://www.youtube.com/watch?v=_-6LgEjEyzE

I wish the other browser vendors didn't rely so heavily on Google to get the word out. They all do so much work to make these features possible, as do the standards committees, the #OpenUI group, and @igalia, and they all deserve to get more credit.

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

I released a new (better) version of CSS Pattern 🥳

👉 https://css-pattern.com 👈

✅ A unique URL per pattern
✅ Controls to adjust the size & colors
✅ Easy navigation between the patterns
✅ Still One-click to get the CSS code

Enjoy more than 140 CSS-only background patterns! 🤩

It took me 4589 years to name all the patterns 😅 but If you find a better (cool) name for a specific pattern let me know 👇

Overview of the new version of css-pattern.com. Showing the home page with different patterns and a few examples where I am adjusting the colors and size.

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

: There are ___ kinds of character references.

SteveFaulkner, to webdev
@SteveFaulkner@mastodon.social avatar

👉🏼 A SIMPLE CUSTOM
Had reason to re-read this recently.

“For whatever reason some people don’t like the standard HTML checkbox and radio button, they seek to jazz ’em up and in the process the often jizz up the usability/accessibility of these controls.”

https://html5accessibility.com/stuff/2021/01/24/a-simple-custom/

aardrian, to accessibility
@aardrian@toot.cafe avatar

I have been reading through the State of HTML 2023 results site (https://2023.stateofhtml.com/) and I am so disappointed in the overall efforts — both in the questions and in the code.

This may become a blog post.

I filed 3 issues today, have filed 15 since late 2022, and only 2 have been addressed:
https://github.com/Devographics/Monorepo/issues/created_by/aardrian

But these surveys keep pushing problematic info in problematic UIs, giving the wrong impression of… everything.

j9t, to webdev
@j9t@mas.to avatar

All titles of the “Upgrade Your ” ebook series are now available at a lower price! 🔻

(The previous price had essentially been dictated by one of the books’ platforms, which is now being worked around by donating the difference.)

If you purchased the latest title and find the new price fairer, reach out so that I can offer you another book, free of charge!

https://www.amazon.com/dp/B0B4SD84B2/

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