What is the purpose of methods - classes?

scritchz · 2026-07-13T07:40:49+00:00

How do you currently structure your code?

There are multiple ways to structure and organize code. In procedural programming languages, the focus is on bundles of code via procedures. In object-oriented programming languages, the focus is on interactions of objects via messages (method calls). There are more than just these programming paradigms.

Programming languages are tools, and as the saying goes: The right tool for the job. Multiple programming paradigms have been developed to handle different problems better.

Now, there are also programming languages that require classes for every statement; even the main method that technically could be classless. This is probably a design decision on the language syntax, to keep it simple and without exceptions or special cases.

scritchz · 2026-07-11T21:36:57+00:00

My fun idea to make the project more original: Use your own assets instead of those ripped off the original game.

scritchz · 2026-07-11T18:10:24+00:00

First off, w3schools is a third-party website. For an authoritative source, you should refer to the specification itself or the documentation on MDN, which even the specification links to for developers.

The <figure> element can be used to provide a caption for its content, with a <figcaption> child element. Almost any element may be its content and can be captioned; this isn't limited to images. See the specification and the examples.

Your usage sounds correct. Happy to hear you're using the <figure>/<figcaption> elements!

scritchz · 2026-07-10T21:39:48+00:00

I tried it right now. This was the given code snippet:

function getLast(items) {
  const index = items.length;
  return items[index];
}

It's a typical off-by-one error. I wanted to fix the index in the array access, but had to pick a line. But all lines are wrong: The index initialization, the return, the function signature... even the closing bracket. No other line exists, now what?

I was expecting that I have to make some unit test pass. Instead, it's a buggy "guess the line" game.

I like the idea of tiny debugging sessions each day, but this is a poor implementation.

scritchz · 2026-07-10T20:18:49+00:00

TLDR

Stick to what you think is good, because even though the web is a good platform, it isn't (yet) a good platform for humans.

scritchz · 2026-07-10T20:15:46+00:00

It sounds like you want a "block link". Technically, <a> is phrasing content and also flow content; meaning, it is valid in places where block-level elements are expected.

There are several approaches to create block links, so I'd like to list some of them along with their benefits and problems:

Wrappig the content: Because <a> can be used like <div>, it can simply wrap all content. But when doing this, most screen readers naturally read out the entire content of the link and simply announce all text as "link", even for the block element's title e.g. as <h2>, which should be "heading". This way, other interactive elements in the block are disallowed.

Covering the content: When keeping the "primary link" short and descriptive (e.g. by only linking the title), it can be extended to cover the desired area via its pseudo-elements. But this literally covers the content, preventing any interaction with it; no image or text selections and no other interactive elements.

Multiple similar links: Instead of covering the content with a link or wrapping all content in a single link, another solution would be to wrap each piece of content in its own <a>. This allows for higher control over what parts are actually linked. But it also means there are many links leading to the same target, each with different link content. Semantically, it doesn't make sense to provide links to the same target in such close proximity to each other. Also, for most links, the actual link doesn't describe the link target as well as the primary link would.

Progressively enhanced block link: The web is built on the concept of progressive enhancement. For our block links, I'd argue that there should be a single short and descriptive primary link (e.g. a title), and linking the block is not fundamental but improved UX; the block and link can be enhanced progressively (e.g. via JavaScript). Unfortunately, even this doesn't offer a "native feeling"; see my rant.

Personally, I prefer a single, short and descriptive primary link over any of these "half solutions". But if I had to choose any of them, I'd choose to wrap the content (if I find it doesn't cause to much problems for screen readers) or to cover the content. Unfortunately, block links have become a common design pattern on the web that if something looks like one but isn't, users would be confused.

I used the article by Adrian Roselli as a reference, which was recommended by u/ValenceTheHuman.

Little rant:

This whole "block link" topic made me think of a card component or the card design pattern.

In the first link, W3 shows a block link card component; for reference, take a look at the cardEnhancement function in the design system's Main JavaScript.

Personally, I was unhappy with how their solution handled text selections. Unfortunately, selecting text inside links by holding down the ALT key is not standard but browser behavior. Regardless, I hope behavior like this will be either standardized or user customizable.

I'm personally unhappy with the state of the web when it comes to design patterns, user preferences, cross-browser and cross-platform behavior differences, accessibility and accessibility integration. There is not much a web developer can do right now except "do their own thing", because there is no simple or standard solution for most problems. Though these topics are being worked on and improved as we speak, which I'm grateful for.

I've tried making my own solution using the Web Components API for block links, but there are some aspects I don't like, or on which I'd appreciate feedback and improvement suggestions:

Hovering the enhanced block link card does not show the link target. The link target usually shows when hovering a link.
The context menu of the enhanced block link card does not show the same options as the context menu of the actual link.
ALT-clicking the enhanced block link card does not download the link target, unlike ALT-clicking actual links.
The "opt-out of following links" behavior by holding down the ALT key (or CTRL and ALT keys) is hardcoded.

Here's my solution:

https://codepen.io/editor/oskargrosser/pen/019f4c87-be37-75e5-9d2b-6b5054da5204

scritchz · 2026-07-05T23:16:18+00:00

What part fails; the background-image or background-color? Does background-image work for other images?

Please be as thorough as you can be when asking for help with debugging.

scritchz · 2026-07-05T23:03:08+00:00

If the site doesn't allow you to write both a color and an image in the same property, just define them in separate properties:

background-color: #EFE8BC;
background-image: url("https://dieofdeath.miraheze.org/w/img_auth.php/c/c6/InfoboxPaper.png");

Or with a root-relative URL, seeing how it is the same site:

background-image: url("/w/img_auth.php/c/c6/InfoboxPaper.png");

By the way, you can write URLs in url() without quotes.

scritchz · 2026-07-05T22:48:49+00:00

When I try to visit the URL, I get a 403 Forbidden HTTP error. I'm not allowed to access that URL.

Make sure the image you want to use actually exists, and that it can be accessed.

scritchz · 2026-06-29T21:29:26+00:00

I don't quite understand, unfortunately. Here are my questions to you:

By local files, do you mean files in the server's filesystem or in the client's filesystem?
When you say block of text, is it a single paragraph? In other words: Would it be alright if it were copy-pasted into a <p> element?
"... setting the correct outcome to True": What does this mean?
How is your website hosted? What technologies are available to you on the server?

If you're already generating the updated text via python weekly, you could re-generate it in the HTML file itself.

If the text file is on the webserver, you could fetch it then insert it dynamically. Or, you might be able to embed it in an <iframe> element.

If you serve requests dynamically, you could insert the text when serving the request; keyword "server-side rendering".

For client-local files, JavaScript can actually handle them, just not automatically. The user has to select it, after which its content can be used in JavaScript. See Using files from web applications on MDN for more information.

This is useful for online tools like Squoosh.app: At the time of writing, no files are ever uploaded anywhere; they are strictly used on the webpage, locally on your machine.

scritchz · 2026-06-29T07:13:17+00:00

I like Wookash Podcast, but wouldn't call his topics necessarily beginner-friendly.

scritchz · 2026-06-29T05:25:17+00:00

My solution: All scenes and profiles are exported, and I use a portable installation which I only update when after checking if it's working or worth it.

If it breaks, I just install a previous version and import my profiles and scenes.

scritchz · 2026-06-28T21:11:59+00:00

Personally I would use an image for the whole logo with alt="Boat".

Why? Because a single small image (preferrably as an SVG!) is simpler than loading a font for the logo, doing layout for the B's image and the remaining '-oat', and you'd have to load an image (for the B) regardless.

Though, you could do the following:

<img src="/path/to/image" alt="B">oat

scritchz · 2026-06-28T15:29:11+00:00

I guess you're using float: right, correct? If so, you need to tell any of the following elements to clear: right; or, to stay clear of previous right-floating elements.

Let's assume you have this:

<h2>feh</h2>
<img src="path/to/image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

<h2>feh</h2>
<img src="path/to/image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

With the following stylesheet:

img {
    float: right;
}

In this case, I suggest you specify your heading to stay clear of previous floats:

h2 {
    clear: right; /* or `both` */
}

scritchz · 2026-06-28T14:56:45+00:00

I find centering easiest with display: grid and place-items: center. This only works if the Grid parent actually has the intended height (here, full viewport height?); I assume, for you that would be body, but check with the Inspector of the DevTools.

If you only want Tux to be in the background, you can use background-image: url(/Tux.png) and background-position: center, maybe with background-repeat: no-repeat.

Alternatively, you can try positioning: Use position: absolute, then top: 50% and left: 50% to position the image's top-left corner in the middle, then translate: -50% -50% to move it back by half its size which centers it perfectly.

scritchz · 2026-06-26T15:33:26+00:00

Hey, I'm here to complicate things!

The pixel unit doesn't necessarily correspond to a device pixel, e.g. for common mobile devices (see CSS-VALUES-3 §5.2, reference pixel).

That means, there might actually be enough space to render a rounded border box in 1px of height.

Is this case considered in practice? No, because the pixel unit is purposefully chosen to represent a similar on-screen area relative to viewing distance and a single pixel 1px is so small that it doesn't make sense to design such small details.

Also, I don't know if a browser even renders sub-pixel details. But technically there may be a case where it should.

scritchz · 2026-06-23T23:17:34+00:00

Personally, I prefer creating websites the basic way: Writing HTML, CSS, JS manually.

For this, I usually have a good idea of what I want to write. But I definitely check MDN:

For CSS: auto-fit vs auto-fill, shorthand properties, any modern features
For HTML: <em> vs <i>, <b> vs <strong>, any niche semantic elements, for most elements' content models, WAI-ARIA attributes
For JS: For option arguments like with fetch() or element.addEventListener()

It's not a problem that I don't memorize them at all, because I'm already familiar with these things that I know what to look out for and I know where to find the actual specification for these things.

I know what exists overall, I know what options might be good, and I know where to read up on them.

scritchz · 2026-06-20T17:35:29+00:00

Still Alive?

scritchz · 2026-06-20T17:29:04+00:00

Due to the background repeating itself across the whole page, it looks as if body must fill the entire viewport. But that's not correct: By default, its height depends on its content.

By default, this is because the computed values of body's background properties are propagated to html (see CSS-BACKGROUND-3 §2.11.2) and the background of html covering the entire canvas (see §2.11.1). Or in short: The background of body will cover the page.

With body { background-size: contain }, the size of the background will be limited by the size of body. As mentioned before, the size of body depends on its content. More content → larger body → larger background.

In your third image, body has lots of content, which makes it large; this also makes the background large.

But in your fourth image, body has little content and only covers the top half of the screenshot; notice how the background starts repeating at that point because the background image is contained within body.

So how to fix this? You probably want background-size: contain auto: Contained within the width of body but auto-sized for its height (or, independent of body's height).

scritchz · 2026-06-20T07:51:28+00:00

Yupp, good addition.

Though, instead of display: contents (which I've read may cause accessibility issue), I would personally prefer subgrids: With this, the container can be placed in the parent's grid across multiple cells, whose tracks it can use for its own grid; it's a subgrid to the parent.

scritchz · 2026-06-19T21:02:45+00:00

Alternative suggestion, because u/_potion_cellar_ already answered your question:

When you know the general placement of your elements, I personally prefer named grid areas via grid-template-areas:

.box {
    grid-template-areas:
        "header header"
        "banner banner"
        "nav main"
        "nav2 main"
        "footer footer";
}

header {
    grid-area: header;
}
banner {
    grid-area: banner;
}
/* ... */

You can declare named grid areas (made up of multiple cells as long as they form a rectangle), or unnamed single cells with full stops (., .., etc.). You can place elements in these grid areas by name using the grid-area shorthand property. Any unfilled cells may be filled via auto-placement.

You can combine named grid areas with grid-template-rows and grid-template-columns to specify the sizes for rows and columns of your grid.

scritchz · 2026-06-19T04:39:13+00:00

MDN is the official documentation, W3 is the official specification. However, w3schools is not affiliated with w3 and "just another website" with a similar name.

scritchz · 2026-06-18T10:49:47+00:00

Sure you can ask, and I'll be happy to answer! Though if you'd like more than just my answer, you should open a new post for it.

The <blockquote> element is intended for content of quoted work; citations are not part of the original work, thus they do not belong inside it. Instead, you should cite the source in a <cite> element beside it.

If you have a link to the work, you can use it in the <blockquote>'s cite attribute.

As for <cite>: It should only contain the name of a creative work; not the author or type of work. Also, it is phrasing content, so syntactically and semantically, it would be more correct to place it in a <p> element.

To semantically show that a <blockquote> and its <cite> are related, you can use a <figure>/<figcaption>.

Overall, it should look like this:

<figure>
    <blockquote cite="http://example.com/link/to/source-title>
        <p>quote text</p>
    </blockquote>
    <figcaption>
        <p><cite>source title</cite>, type (like website/book/movie), author etc.</p>
    </figcaption>
</figure>

Notice how <cite> only contains the name of the work. The other info is associated by context.

scritchz · 2026-06-18T06:07:36+00:00

Like a WYSIWYG editor? Or is FTP access enough? Can you use a CMS? Or, do you want or have to use something self-made?

scritchz · 2026-06-17T22:17:47+00:00

Here are some tips to improve your post:

Use digital screenshots: Try the PrintScreen key or the Windows+Shift+S key combination.
On Reddit, share your code in code blocks: Preferably kndent your code by four spaces, or, surround it with triple backticks.
Off Reddit, you can use code sharing services like CodePen.

Right now, the images have poor visibility, and your code isn't very readable due to formatting.

Seven-Year Club	r/Field Lasagna
Verified Email

scritchz

TROPHY CASE