So, I am one of those old school types who mains with Firefox and Noscript. And also a filthy casual that just goes on lemmy.world. But half the images are broken because I'm expected to allow scripts on like 30+ sites to see most of the posts. I'm literally expected to allow /all/ the scripts from a domain just so I can see a dang picture behind the thumbnail. That's the entirety of the scripting needed. That seems ridiculous. Is there, I don't know, a server/way that makes it so I don't have to blanket allow all these scripts? To put it in meme form (not sure I'm doing it right, never seen the show): "It's an image of a banana Michael, what should it take, one Raspberry Pi running Docker?"

[EDIT 6/1/25 - thanks to everyone who commented on this. Screenshots: https://lemmy.world/comment/17403335 ]

you are viewing a single comment's thread
view the rest of the comments

[–] foggy@lemmy.world 3 points 1 week ago* (last edited 1 week ago) (1 children)

Yesterday:

<nav script="dropdown.js" style="dropdown.css">
  <button onclick="toggleDropdown()">Menu</button>
</nav>

Today:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './global.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// App.jsx
import Dropdown from './components/Dropdown';
import './App.css';

export default function App() {
  return (
    <main>
      <Dropdown />
      <p>Hello, world!</p>
    </main>
  );
}

// components/Dropdown.jsx
import { useState } from 'react';
import styles from './Dropdown.module.css';
import ArrowIcon from '../assets/icons/ArrowIcon.jsx';

export default function Dropdown() {
  const [open, setOpen] = useState(false);
  return (
   <div className={styles.dropdown}>
      <button onClick={() => setOpen(!open)}>Menu <ArrowIcon /></button>
      {open && (
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
        </ul>
      )}
    </div>
  );
}

[–] LostXOR@fedia.io 5 points 1 week ago (2 children)

You don't need JS at all if you get a bit creative with the CSS.

[–] shnizmuffin@lemmy.inbutts.lol 9 points 1 week ago* (last edited 1 week ago)

That way it's old and busted, here's the new hotness (anchor positioning).

[–] rimu@piefed.social 2 points 1 week ago

Yeah. But in this case the Topics menu can be quite heavy as it lists every community that the current user is subscribed to. Instead of generating that menu (and sending it to the client) on every page load, when it probably won't even be used, PieFed makes an ajax call (only possible with JS) to retrieve the topics menu when it's clicked. Same for 'Feeds'.

This cut the amount of HTML being sent to the browser by around 50% (depends on how many communities you subscribe to but PieFed makes it extremely easy to subscribe to dozens of communities with a single click so many people have hundreds) and eased load on the server too. Some of the more under-powered instances run noticeably faster now.