Web Development

sajran , in Hardest Problem in Computer Science: Centering Things

The article is very interesting but the fake cursors are infuriating and make it nearly impossible to focus on the content. It's a clever joke but without a way to disable it, the author is just sabotaging his own content.

Ephera OP ,

Huh, I had read this on mobile, where they didn't show up (which I guess, makes sense).

In the HTML, all the way at the bottom, there's a <div id="pointers" ...>, which you can delete to make them disappear...

victorz ,

This guy webdevs

Limfjorden ,
@Limfjorden@feddit.dk avatar

How does one make this edit permanent? I've been looking to delete the sidebar on fandom, but an adblocker like uBO is not enough, since I need to edit the backgrounds margin. I don't know anything about webdev, and would be grateful for help.

Ephera OP ,

Well, making such a change permanent on a foreign webpage, that's not really something you do in webdev, but I happen to know anyways.
What you want is usually referred to as a "user style" and you can achieve that with e.g. the Stylus extension.

You can create a new style and then paste this into it:

@-moz-document domain("fandom.com") {
    .global-navigation {
        display: none;
    }

    body {
        margin-left: 0 !important;
    }
}

Then save it and fandom.com should look nicer.

If you ignore the first and the last line, these are normal CSS rules, so that is then where webdev knowledge can help...

IllNess ,

I don't want to step on any toes but your CSS only works on the home page.

I added more CSS for it to work on the fan pages:

@-moz-document domain("fandom.com") {
    .global-navigation {
        display: none;
    }

    body > .main-container {
        margin-left: 0 !important;
    }

    body {

        margin-left: 0 !important;

        & > .main-container {

            width: 100% !important;

            margin-left: 0 !important;
        }

        & > .fandom-sticky-header {
            left: 0 !important;
        }
    }
}
Ephera OP ,

Ah, absolutely no toes stepped on. I've never used Fandom myself, this was just what I could whip up real quick.

If you happen to use Fandom more often, maybe you'd like to publish this in Stylus? Even if it's just as a personal backup.
I mainly didn't do it, because without me using Fandom, the user style could be broken by tomorrow.

P.S.: I think, the first body > .main-container {-block can be removed, as you set the same style in the nested block underneath...

IllNess ,

Yes, you are correct. Good catch.

    @-moz-document domain("fandom.com") {
        .global-navigation {
            display: none;
        }

        body {
            margin-left: 0 !important;

            & > .main-container {
                width: 100% !important;
                margin-left: 0 !important;
            }

            & > .fandom-sticky-header {
                left: 0 !important;
            }
        }
    }

It was very nice of you to write this out for the other guy. I will look through the uploads and see if anyone else has the same idea.

Limfjorden ,
@Limfjorden@feddit.dk avatar

Thank you! I had to change "body" to ".main-container" to get it to work, but thank you nonetheless!

DABDA ,
@DABDA@lemm.ee avatar

The "dark mode" is even more frustrating.

chiisana , in Handling large bursts of POST requests to your ActivityPub inbox, using a buffer in Nginx
@chiisana@lemmy.chiisana.net avatar

Does individual users send activities directly? I thought only users of your instance and remote federated instances send traffic to your instance, so this change would only affect data coming through from the larger instances?

Also, what’s happening with the original request while they remain in queue? Say for example if large-instance.com is sending 11 updates to your instance; while your back end server is processing the first 10, what’s happening with the 11th? Does it get put on hold while your back end churn, or does it get a 200 OK response, despite the request may be failed at a later date? Neither of which seems ideal — if the instance get put in a queue waiting for a response while you churn, or worst yet, if your backend fails and your buffer is waiting X seconds to time out each request, you’re going to hurt the global federation by holding up a spot in their out going federation queue; if the instance is sent with a 200 OK and your backend eventually fails, you’d lose data as the other instance wouldn’t know they’d need to retry.

rimu OP ,
@rimu@piefed.social avatar

A HTTP 200 response is sent immediately. There is a small risk of data loss but only during the time when rate limiting is happening. Most instances behave well and only send activities at a sensible rate but when things go wrong we need to avoid the bad effects caused by those that are mis-configured or under attack.

It's not a perfect solution. But the alternative - fail to accept some activities, causing them to retry later and us to slowly fall more and more behind - is worse.

chiisana ,
@chiisana@lemmy.chiisana.net avatar

Thanks for the clarification! I’m inclined to agree here, small risk of data loss but failing to receive updates all together during peak burst is probably much worse.

mark , in 10 Top accessibility errors and how to avoid and fix them
@mark@programming.dev avatar

Yes! Can't believe it's 2024 and websites are still not accessible. Even the biggest companies are the worst at this... and don't even get me started on their mobile sites 🙄

rimu , in 10 Top accessibility errors and how to avoid and fix them
@rimu@piefed.social avatar

We're gonna need a longer list - this one is barely scratching the surface.

schalkneethling OP ,

Amen to that :) We have to start somewhere though, right :)

MrPoopyButthole , in Node Authentication With Passport.Js
@MrPoopyButthole@lemmy.world avatar

I thought passport was abandonware

NostraDavid , in HTML: A Comprehensive Guide - Chapter One
@NostraDavid@programming.dev avatar

Learning HTML syntax is the simple part. The tedious part is learning which tags already exist, and which tags goes in which other tag (and which attributes they may (not) contain).

For that, always, ALWAYS go to the official HTML spec: WHATWG HTML.

HTML has not been maintained by WC3 (though they still do maintain CSS) and has been a "living standard" since HTML5 (2009-ish, IIRC).

I've read through the entire spec (using TTS, because only reading is boring) and learned a TON, because writing React straight out of the gate, without learning the HTML fundamentals first is a HUUUUGE pain.

/rant

schalkneethling OP ,

Thank you for the feedback. I am also reading through the spec as a core part of writing the book. It is indeed critical to do so.

shnizmuffin , in HTML: A Comprehensive Guide - Chapter One
@shnizmuffin@lemmy.inbutts.lol avatar

Web accessibility isn't just about compliance; it's about creating digital experiences that empower and include every user, regardless of their abilities.

Step 1: remove user agency.

<html lang="en">
  <head>
    <base target="_blank" />
  </head>

I get that it's hard to come up with a good example of using <base>, but I wouldn't show a user-hostile example before ... cutting the element from Chapter 1 entirely. The only time I've ever used <base> was when I had to deploy multiple versions of a multi-page static site to a subdirectory for its staging environment, but to the public root for the production environment. Even then, the solution wasn't, "use <base>," it was, "sort shit out later with nginx."

Step 2: confuse the use case of anchors and buttons.

  <body>
    <ul>
      <li><a class="native" href="add-book">Add Book</a></li>
      <li><a class="native" href="view">View Bookshelf</a></li>
    </ul>

    <ul>
      <li>
        <a href="https://example.com/dont-use-real-urls">Misery</a>
      </li>
      <li>
        <a href="https://example.com/especially-links-to-amazon-just-pick-a-real-bookstore">Carrie</a>
      </li>
    </ul>
  </body>

I understand that it's just an example but it's never just an example. Use appropriate landmarks or break your snippets down to the point where it's obvious that what you're pointing out isn't the whole thing. You don't need <body> or <ul> or <li>, just split the snippet in two, like this:

<a href="/my-favorite-books">My Favorite Books</a>
<a href="https://example.com/some-book">Every Man For Himself and God Against All</a>

Step 3: Introduce Javascript to restore the native functionality you broke in step one.

  <script>
    document.addEventListener("click", (event) => {
      if (event.target.classList.contains("native")) {
        event.preventDefault();
        window.location = event.target.href;
      }
    });
  </script>

Don't do that. I mean, don't really do any of this example, but really don't do this last part. Adding class="native" is as cumbersome as adding target="_blank", while also being more brittle. [I edited out a considerable amount of swearing here.] I think this is just a symptom of a bad example gone way too far.

If the client insists on opening all external links in new tabs, get it in writing and then do this:

<base target="_blank" />

let external_links = document.querySelectorAll('a[href^="http"]');
external_links.forEach((external_link) => {
  external_link.setAttribute('target', '_blank');
});

You can use querySelectorAll with a prefix attribute selector like 'a[href^="http"]' instead of a typical class selector. This lets you grab all the anchors with hrefs that start with "http" without adding extra syntax where it doesn't really belong. Once you've got your external links, iterate through that NodeList with forEach and tack on target="_blank" using setAttribute. That way, you're not re-implementing default behavior, you're only mildly annoying users with HCI devices, and if JS gets blocked all your links suddenly behave predictably.

Even this is bad! Just don't! It's so easy to not!


Other notes

  • You should probably start by explaining what an element is, then what an attribute is, then what a value is. Vocabulary is extremely important.
  • When referencing elements, include the chevrons in the inline style. <meta> vs meta. If they have to guess, they'll guess wrong. Suffix with "element" to really beat them over the head with it.
  • When referencing attributes, try to keep their values attached. class="foreign". If you can't, suffix it with "attribute."
  • When referencing values, keep those quotes! "false".
  • If it's a book about HTML, don't use JS. At all. Every time you reach for JS, stop. Like if you are about to write a self-invoking function to go and find invalid values of the rel attribute, for example, maybe don't.
schalkneethling OP ,

Thank you for the great feedback! This is one of the benefits of undertaking a project such as this in the open. I hear you with the <base> element. I was in two minds whether I should even include it. I am thinking now that I should, but introduce it merely for completeness and recommend not using it. I wonder if it will ever be deprecated.

Cruxifux , in HTML: A Comprehensive Guide - Chapter One

Man my neopets shop is gonna be so dope after I read this book

rebelsimile , in How would you build Wordle with just HTML & CSS?

2 years into web dev (with 20 years of other software dev experience) and I’m rolling my eyes with all this. OK, sure. And I’m exhausted in myself at reaching for frameworks (I’m working on being better) but the fetish around avoiding JavaScript is silly. CSS is amazing, learning how to use selectors better is definitely on my list, but that is not an interview question of any substance.

Deebster ,
@Deebster@programming.dev avatar

I agree - it's like a fun code-golf challenge in that you end up with awful, write-only code but you may well end up with a deeper understanding after solving it. It's for circumstances almost opposite to an interview.

The proposed solutions don't even work - for example the tan is only meant to display once per letter.

The actual question does at least ask when it's JS suitable and when isn't it - for example it's irritating to have to wait for a page to init just to be able to access a drop-down menu (hint: use active in CSS instead of a JS toggle).

overcast5348 , in Number and Currency Formatting in JavaScript using Intl.NumberFormat

I live in Canada and I've never seen "1.000,00". Canada (at least the anglophone part that I live in) follows the usual "1,000.00" format. Why is this library using commas as decimal separators?

schalkneethling OP ,

This is very interesting. I agree that some of the formatting puzzled me as well. I would assume this follows some standard even when the use of said standard is uncommon. I have for example not seen 1.000,00 € used, but I thought that perhaps if you live in Germany, France, or another EU country then it is common.

overcast5348 ,

Yup, that's indeed the format used in some European countries. Canada was surprising though. 🤷‍♂️

towerful , in Number and Currency Formatting in JavaScript using Intl.NumberFormat

Its worth creating an Intl formatter outside of a loop, then applying it inside the loop - if you are formatting everything in the loop the same.

const formatter = Intl.NumberFormat(/* options */);
return items.map(item => {
   return {
      ...item,
      total: formatter.format(item.total)
   }
});

...Or however you choose to mutate an array.

Well, certainly it used to be. Not sure if that is still the case!

schalkneethling OP ,

100% Agree

xoggy , in A Quick Command To See the Available Scripts
@xoggy@programming.dev avatar

Just type npm run and that lists out the script commands available.

Septimaeus , (edited ) in JavaScript Bloat in 2024

Edit: good luck :)

Kissaki , in Issue with website(personal project) loading on firefox, work fine on chrome.

FF124, Windows; What I see is grey and a loading icon.

Have you opened the Browser Console?

downloadable font: Glyph bbox was incorrect

While one would not expect that to cause such issues, depending on if you're using a SPA or what kind of bootstrapping you use, or a Firefox consequential issue, it may. What happens if you skip web fonts?

I can open the browser console, and I can context menu inspect elements, and it selects them in the inspector. So it seems like the DOM is being rendered and laid out, to an interactable level.

When I open CTRL+SHIFT+M it looks very funky and broken. No border, nothing rendered; only the resize handle, which remains usable. Using different Window to compare, there should be a border and border shadow. This makes me come back to the font issue, and makes me wonder if trying to render a faulty font brings Firefox into a broken render state.

elint , in Say Goodbye to Contact Form Spam

Interesting. That reminds me, I need to update one of my scripts.

+time.sleep(1.2)

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • webdev@programming.dev
  • test
  • worldmews
  • mews
  • All magazines