NHD Tips & Tricks

21 December 2024
nhd,
tipsandtricks,
nhd24

NHD Tips & Tricks / Process Paper

Nuggets of wisdom I gained working on the NHD Website Builder for the 2024-2025 school year.

Tech Stack
Process
Javascript

Tech Stack

yarn create react-app + react-router make for a pretty good static site, especially when paired with typescript and yarn.

Why React?

When writing modular, content-oriented websites(like a NHD website) it's really convenient to have components that can support all sorts of content. This incudes images, text and video.

Why Yarn?

Why not?

Why don't you just use the website builder?

There are just too many limitations, and to really make a website that pops I think making the site from scratch is worth the effort.

Process

This was my first "large" React Project(I mostly just used pure HTML before), so this was as much of a learning experience for me as for the viewers.

I originally started the site as just another static site, but after considering for a bit, I decided that it was boneheaded to copy-and-paste <div> tags for 10 hours so I converted it to a react site.
1. To convert the website, I first used yarn init react-app to generate the template. Looking back, I regretted not using typescript.
2. I first copy-and-pasted each component into its own file, then I moved all the styles to their respective components.
After receiving feedback that "the site is slightly ugly" I reworked it to look more "sigma", according to current generation terminology.
After receiving feedback that "the site is still ugly" I reworked it to look more "sigma", according to current generation terminology.
I moved the content into the site via manual copy-pasting.

Note: Typescript is essentially Javascript but stricter. This helps catch many, many errors in early development, and makes the code much, much, much more readable.

Javascript

Javascript is a core part of the web. A screenshot of the NHDWebCentral documentation, stating that javascript is not allowed Javascript is not a core part of the NHD website builder. Javascript is not part of the NHD website builder. That doesn’t stop me from trying.

Javascript Removal Process

Remove all <script> tags
Remove onload attributes
...
That's it.

What it doesn't remove is onclick attributes, because that's™ not nessasary. This lets us do some pretty cheeky things, like wish.com react states, execution of bookmarklets, and budget carousels:

<body>
  <div class="container c1363">
    <div id="iz5k">
      <div id="id1x">
        <button
          id="iwyf"
          onclick="function preloadImage(url) {var img=new Image();img.src=url;}document.getElementById('ct').innerText = Math.max(1, Math.min(+document.getElementById('ct').innerText - 1, 1084)); document.getElementById('img').setAttribute('src', `https://picsum.photos/id/${document.getElementById('ct').innerText}/200/300`); preloadImage(`https://picsum.photos/id/${document.getElementById('ct').innerText + 1}/200/300`)"
        >
          back
        </button>
        <span id = 'ct'>1</span>/1084
        <button
          id="ih94"
          onclick="function preloadImage(url) {var img=new Image();img.src=url;}document.getElementById('ct').innerText = Math.max(1, Math.min(+document.getElementById('ct').innerText + 1, 1084)); document.getElementById('img').setAttribute('src', `https://picsum.photos/id/${document.getElementById('ct').innerText}/200/300`); preloadImage(`https://picsum.photos/id/${document.getElementById('ct').innerText + 1}/200/300`)"
        >
          next
        </button>
      </div>
      <img src="https://picsum.photos/id/1/200/300" id="img" ag="1" />

    </div>
  </div>
</body>

Ugly, I know. Because onclick variables are local by design, I have to use a arbitrary attribute on the img tag, incrementing it to keep track of current slide.

function preloadImage(url) {
    var img = new Image();
    img.src = url;
}
document.getElementById('ct')
    .innerText = Math.max(1, Math.min(+
        document.getElementById(
            'ct')
        .innerText - 1,
        1084));
document.getElementById('img')
    .setAttribute('src',
        `https://picsum.photos/id/${document.getElementById('ct').innerText}/200/300`
    );
preloadImage(
    `https://picsum.photos/id/${document.getElementById('ct').innerText + 1}/200/300`
)

So, this is what it does:

Define preloadImage
Get current index document.getElementById('ct') and increment(the + in +document.get... just forces javascript to convert the string to an number, the Math functions just clamp the picture to a certain range.)
Set the current image to the current index
Preload the next image for faster loading.
Profit.

Iframes!?

If you go to https://site.nhd.org/83280031/home and inspect it, you'd see that it's a React app. "But how, " you ask, "I thought the website builder didn't support javascript! How would the app hydrate, even with server-side rendering?" The answer is simple: iframes. You can parse out onloads and <script> tags all you want, but iframes are still enabled for the purpose of youtube videos and etc. But 1 problem: The NHD website builder, for desktops, sets pages to have a margin to the left and the right, for the purpose of "making websites look sigma because you only designed it to appear on one resolution, you damn fool." This, however, can be easily circumvented with the css designer's favorite keyword !important.

Note: Using !important is not considered good practice and is usually discoraged. Using selector specificity is considered better and is recommended.

iframe {
 display: block;
 margin: 0px;
 padding: 0px;
}

.container {
    /* !important makes this property take priority when rendering - see https://developer.mozilla.org/en-US/docs/Web/CSS/important for more */
 width: 100vw !important;
 /* In this case !important overrides */
 max-width: 100vw !important;
 margin: 0px;
 padding: 0px;
}

Note: this can also be accomplished with the following snippet, which doesn't use !important:

.container.container { /* repeating a css property also increases specificity. In this case, the selector specificity is (0, 2, 0). */
 width: 100vw;
 max-width: 100vw;
 margin: 0px;
 padding: 0px;
}

nhd24.dunce.party and others (c) 2024 PotatoLover68 and Hansong Zhu. All Rights Reserved, blog: blog.dunce.party

← Previous
bob
Next →
autotronic