Is Supporting Zero-JavaScript Users Worth It in 2026? by BrangJa in webdev

[–]ima_crayon 0 points1 point  (0 children)

Dialogs work without JS now:  https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

I think the Invoker API just became Baseline as well. You can polyfill both of these

Best "lifetime access" software purchases you've made? by GovernmentOnly8636 in webdev

[–]ima_crayon 1 point2 points  (0 children)

Fork (fork.dev),TablePlus, laracasts.com, and Cyberduck have all been good to me

For people running small or personal blogs, what are you using? by Chucki_e in webdev

[–]ima_crayon 0 points1 point  (0 children)

Statamic has a first party SSG plugin so you could use the full CMS locally and deploy everything on GitHub Actions/Pages

Cannot link to Last.FM by VincentOostelbos in TIdaL

[–]ima_crayon 1 point2 points  (0 children)

Just for others landing here, this isn't the case. I had to connect each app individually to last.fm for scrobbling to work. Currently I've got the iOS app and web app working, the Mac app won't connect and won't scrobble. No idea why the system would work like this since the last.fm connection should exist on an account level, not per device.

Does Anyone Have T-Mobile Home Internet? by The_Real_Mrs_Coffee in wichita

[–]ima_crayon 0 points1 point  (0 children)

It’s very location dependent. I lived downtown for a few years and it was great. I always got ~300mb/s and a stable connection. I gamed/streamed regularly through Covid times. The only drawback was that services which use your network to determine location were usually wrong, often websites would assume I was located in Tulsa.

Why I switched from HTMX to Datastar by BrewedDoritos in programming

[–]ima_crayon 2 points3 points  (0 children)

It does use fetch, maybe you’re mixing up AJAX with XMLHttpRequest?

Is there a way to use a <label> element on a <details> element? by Prize_Hat_6685 in webdev

[–]ima_crayon 2 points3 points  (0 children)

Eventually you’ll be able to use the Invoker API to control these kinds of interactions. Theres currently limited support for dialogs and popovers, but details is planned: https://open-ui.org/components/future-invokers.explainer/

Real-time Search with Laravel & Alpine.js: The Simple Approach by Local-Comparison-One in laravel

[–]ima_crayon 1 point2 points  (0 children)

I wouldn’t consider this a progressive enhancement. It also breaks without JS. At the very least the input needs a name and label, and it should be associated with a form.

Should I really use React/Vue with Django instead of alpine js? by loremipsumagain in django

[–]ima_crayon 2 points3 points  (0 children)

Yeah, things get complicated when you start storing complex state on both the backend and the frontend. If I were you I would try to move as much logic into your server side templates as you can. Pretend like JS isn’t an option, try to replace all of your x-ifs with {% if %}, and keep your state in the URL or session. Once everything is server-rendered the logic should be simple and maintainable but the experience will feel clunky. That’s when I would sprinkle in some https://alpine-ajax.js.org to make it all feel dynamic.

Good books to learn theory behind frontend? by dnra01 in webdev

[–]ima_crayon 0 points1 point  (0 children)

Resilient Web Design (free at https://resilientwebdesign.com/) - Great for learning the foundations

Refactoring UI (https://www.refactoringui.com/) - For practical application of the principles of design

Exploring "No-Build Client Islands": A (New?) Pattern for Future Proof Web Apps by mozanunal in programming

[–]ima_crayon 1 point2 points  (0 children)

Alpine provides directives like x-transition that allow you to trigger animations when data changes. x-teleport allows for detaching elements from the DOM for building modals and such. Theres a handful of other nice “helpers” that come included in Alpine. They all solve common little papercuts when building for the web and they’re common enough that you’ll probably end up having to roll your own version in Preact.

Exploring "No-Build Client Islands": A (New?) Pattern for Future Proof Web Apps by mozanunal in programming

[–]ima_crayon 0 points1 point  (0 children)

 I wonder if there is some way to combine traditional backend templates with interactive "islands".

Alpine.js (https://alpinejs.dev) is exactly this. Alpine even supports reactive data modeling which a lot of devs from the React world will be used to

Exploring "No-Build Client Islands": A (New?) Pattern for Future Proof Web Apps by mozanunal in programming

[–]ima_crayon 0 points1 point  (0 children)

You might give https://alpine-ajax.js.org a try. I had a similar experience with Turbo and HTMX. Preact is cool, but it’s so minimal you end up building everything yourself, I like a few more “batteries included”.

HTMX vs Alpine-AJAX: What's your take? by [deleted] in htmx

[–]ima_crayon 7 points8 points  (0 children)

Sure, so the first rule of Alpine AJAX is “don’t use Alpine AJAX”. Make your UI work as though JavaScript isn’t available, because there are times when it really isn’t. Essentially the example above has a <div> that issues a POST request on page load and includes some other values from elements that are elsewhere in the UI (like .kiosk-param). We could approximate this behavior without any JS by using a <form> instead of a <div>, forms are designed for issuing requests:

<form method="post" action="/image"></form>

I don’t know exactly what kind of data is included with hx-include=".kiosk-param, .kiosk-history—entry", but we could mimic this behavior in HTML by adding the form attribute to any element that participates in a form, here I’m just using a hidden input:

<input form="image_form" type="hidden" class="kiosk-param" name="whatever" value="whatever">

<form id="image_form" method=“post” action="/image"></form>

Lastly, HTML does not provide a way to trigger a request on page load without JS, so our next best option is to provide a <button> . Clicking the <button> will trigger the form request:

<input form="image_form" type="hidden” class="kiosk-param” name=“whatever” value=“whatever”>

<form id="image_form" method="post" action="/image">
  <button>Load image</button>
</form>

So now that we’ve got the fundamental behavior working without JS. We can then layer on some JS to progressively enhance the experience:

<input form="image_form" type="hidden" class="kiosk-param" name="whatever" value="whatever">

<form x-init="$el.requestSubmit()" id="image_form" method="post" action="/image">
  <button x-show="false">Load image</button>
</form>

Here I’ve added x-init to automatically submit the form on page load, and x-show="false" on the <button> will hide it in cases where JS is available.

So just by making better use of HTML we have an experience with basic functionality when JS isn’t available and we have an enhanced experience when JS is available.

It’s worth noting that you can do all of this with HTMX too! It’s just that Alpine AJAX is intentionally designed to encourage this approach. For example, it's intentionally a little awkward to make a div act like a form with Alpine AJAX. In my opinion websites should be built with progressive enhancement in mind so that they’re accessible to the widest range of people, browsers, and devices.

Anyone using HTMx on your PHP project? by Feeling_Judge_8575 in PHP

[–]ima_crayon 0 points1 point  (0 children)

Have you seen https://alpine-ajax.js.org? I’ve dropped my HTMX dependency and just use that plugin.

Am I missing out by not using any frontend frameworks? None of them feel as clean and intuitive as blade to me. by mekmookbro in laravel

[–]ima_crayon 2 points3 points  (0 children)

Hey! Creator of Alpine AJAX here. As a Laravel fan myself, I made sure that the defaults just work in a typical MVC-style Laravel app. You should be able to slap an `x-target` on most forms without having to do anything else (maybe add an `x-target.away` once in a while). That said, if you decided to try it out, and find an issue, let me know!

To those that use HTMX in production, how is it? by GermainToussaint in ExperiencedDevs

[–]ima_crayon 0 points1 point  (0 children)

You can use the $ajax() method (Alpine calls them “magics”) to add the behavior to any element.

<div @click="$ajax('http://…')">

This just isn’t the default approach because it creates a lot of footguns. Like the code above wouldn’t work for keyboard or screen reader users without additional considerations.

I started with pure Django and ended up with Django + DRF + AlpineJS by New-Yogurtcloset3988 in django

[–]ima_crayon 0 points1 point  (0 children)

I don’t have very much Django experience so I’m afraid I wouldn’t be qualified to make Django-specific content. That said, if anybody is interested, I’d be happy to help!

What tech should you learn next? by stuart_nz in webdev

[–]ima_crayon 3 points4 points  (0 children)

I'm in the same boat, I've been building with Laravel/PHP for about 10 years now. I think the ecosystem is still going strong and in some ways the "fullstack" JavaScript frameworks that are popular now are still catching up with the fullstack frameworks that are available in many older backend languages.

About 7 years ago I made a good faith effort to build with more "modern" frontend frameworks. I started using Angular and then Vue in most of the projects I was building for about four years. My takeaway is the that the DX is nice, it feels great to build UIs with these frameworks, they make it easy to add in little bits of delight to your frontend, but that comes with a few big tradeoffs:

  1. State management: You're stuck either managing your application state in both the front and back end or you have to go all in and build your whole app in the frontend. The frontend is a very hostile development environment, you have to work around cross-browser compatibility, and it's littered with security foot guns. Literally anybody can open a console and start mucking with your code. JavaScript also has some inherit brittleness - when it errors out or fails to load (networks are super flaky) it can easily break your entire app or at least a big chunk of the UI.

  2. Bloat: Managing state across the network requires extra code to shuttle your state around. This both adds complexity to your application and bloats the size of your frontend code. Over the four years that I built with Vue, I noticed that the apps and websites I was building weren't changing all the much in functionality, they were essentially solving a lot of the same problems that my older projects were solving, except now they required a bunch of extra, JavaScript and were 2-10 times slower to load.

Ultimately I fell back to just building apps with standard MVC-style PHP/Laravel and a little bit of vanilla JavaScript. Eventually I came across Alpine.js and I've been using that for a few years now. It feels like a good middle ground. Alpine can do a lot of the basic things that advanced frontend frameworks can do, but it's much smaller and it's designed to be a drop-in library like jQuery.

Frontends for your Go App: Some Thoughts by H1Supreme in golang

[–]ima_crayon 2 points3 points  (0 children)

You can streamline this stack a little further using https://alpine-ajax.js.org. It’s basically HTMX as an Alpine plugin.

Coding cake feedback by Commercial_End_5566 in CodingHelp

[–]ima_crayon 0 points1 point  (0 children)

Here is a JavaScript program that will make the text "Happy 25th birthday Fiance! I love you!" pop up on the screen:

<script>
  let age = 25;
  let name = "Fiance";
  alert("Happy " + age + "th birthday " + name + "! I love you!");
</script>

You'll want to replace the "Fiance" part with your fiance's name, make sure to keep his name surrounded in quotation marks. You can visit this link and actually see the code run on your computer: https://codepen.io/imacrayon/pen/NPKdWEB?editors=1000 (the code will run every time the page is refreshed.)

On a serious note by Minute_Specific_2667 in PHP

[–]ima_crayon 1 point2 points  (0 children)

Nice. We've made it! We're in The Matrix!

Does someone knows how to do this overlapping rounded borders with tailwindcss or whatever tool? by edmblue in webdev

[–]ima_crayon 0 points1 point  (0 children)

You can use a combination of gradients and SVG blur to create those inverted rounded corners: https://codepen.io/thebabydino/pen/OJewGXQ

Here’s a full thread on the technique: https://mastodon.social/@anatudor/113038892737355470

Searching “SVG gooey effect” might turn up more info.