Some new design ideas!

[kirupa]

Related to my comment earlier around the site’s poor navigation, I figured I’d start taking some stabs at coming up with some design changes to address that and some of the long list of minor updates that I haven’t gotten around to.

Here is what the TOC in the left-rail could look like:

[steve.mills]

Looks good…

I’m a big fan of MDN’s nav.

You could even do the MDN double with articles/ topics on the left, subtopics on the right…

I reckon it would be cool to do a whole bunch of micro animations for the icons…
kirupa.com still has a Super Nintendo feel about it…

[kirupa]

Great idea about the micro animations! That’s always been on my todo list but just always falls below creating new content.

The subtopics on the right is an interesting choice. Let me see what that can look like without looking too cluttered.

[ridesirat]

I like it!
Very clean.
As a designer, I can’t resist giving some feedback
I would just give it a slight (1rem) margin to the left and right of the main content. To let it breath a bit more and, this way, giving it more importance and readability, to it and to it’s neighbors.
And maybe a very soft fill on the left sidebar (maybe a #eee?).

[kirupa]

That is great feedback, @ridesirat

I agree with you about the increased margin. Let me try to make some of these changes tonight and share back for all of us to look at.

[kirupa]

In the spirit of just making changes live, here is an in-progress version of a page with the TOC: A Visual Introduction to Arrays

@ridesirat - I adding a bit more spacing than 1rem. Thoughts?

Here is a screenshot in case I break something between now and when you all see it:

There are a handful of critical features still missing:

1. Header is broken on mobile
2. The left nav with the TOC needs to be fixed height with a scrollbar
3. When the TOC is very deep (like it would be for JavaScript or Animation topics), we need to scroll the user to the position of the link in the TOC

[ridesirat]

Looks good @kirupa . And actually I think it would hold well with 1 more rem. That would also help with the length of the line - for (perfect : ) readability it shouldn’t have more then 9 - 12 words (max-width of 80ch(?)).
What about a sticky left nav? with a sticky selected topic?
I also enjoyed the previous blue border on the title But I also like it in the selected topic. Blue on topic, grey on header (and even bolder)?
One detail… I can’t find the button to change to dark mode

[kirupa]

Those items will be coming in shortly

The sticky left nav with the link visible is something that I will be adding shortly. As for an in-page TOC for the headings, there may be something else I want to try instead of having the left nav or right rail get more content. For example, there may also be a sticky header that acts as an in-page navigator.

For the spacing, let me increase it more. This might give me a chance to have text be narrower than the images which may go wider. That may look really nice, so let us try that

Good catch on the theme switcher! I temporarily made it so clicking the search magnifying glass brings it up

[kirupa]

Sticky left nav has been added, and I increased the paragraph spacing some more where only the text content has extra breathing room and images/iframes/etc. remain at their old positions

[ridesirat]

Looks good!
But seems nicer in your image. In a laptop, both scrollbars are shown. I would disable at least the horizontal one. And even the vertical, maybe it could calculate the full height of the page? And the text could be a bit smaller

[kirupa]

Interesting! What browser and OS are you running in? Both scrollbars being displayed is definitely a bug

I haven’t styled the scrollbar yet, but you should hopefully see it being a thin line with the blue scroll thumb whose color matches the primary blue of the default theme.

[kirupa]

Slowly getting the signature/footer area revamped:

The way I generate the previous / next links is by using the left TOC as the “source” for all of the navigation in the pages. I find which TOC item corresponds to the page that I’m currently in. Then I just go up a sibling to find the “previous”, and I go down a sibling to find the “next”.

In case anybody is curious, here is my in-progress code for doing that:

function addFinishingTouches(event) {
  console.log("Page loaded!");

  // set activenav
  activeNav = document.querySelector(`.leftNav li a[href$="${url}"]`);
  let listElements;

  if (activeNav) {
    activeNav.style.borderColor = "var(--primary)";
    activeNav.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'start' });
    //setTimeout(generateBackForwardLinks, 2000);
    console.log("Generating links!");
    generateBackForwardLinks();
  }
}

function generateBackForwardLinks() {
  listElements = document.querySelectorAll(".leftNav li a");

  let previousLink = document.querySelector("#previousArticle");
  let nextLink = document.querySelector("#nextArticle");

  for (let i = 0; i < listElements.length; i++) {
    let listElement = listElements[i];

    if (listElement == activeNav) {
      console.log("current");
      console.log(listElement + " " + i);

      if (i != 0) {
        console.log("previous");
        let previousElement = listElements[i - 1];

        previousLink.querySelector(".navText").innerText = previousElement.innerText;
        previousLink.setAttribute("href", previousElement.getAttribute("href"));
      } else {
        previousLink.style.display = "none";
      }

      if (i != listElements.length - 1) {
        console.log("next");
        let nextElement = listElements[i + 1];
        nextLink.querySelector(".navText").innerText = nextElement.innerText;
        nextLink.setAttribute("href", nextElement.getAttribute("href"));
      } else {
        nextLink.style.display = "none";
      }
    }
  }
}

[steve.mills]

Nice,
I always like looking at a pro’s production code.

I went to a meetup last night hosted by a company that does a lot of government work/ scrum.

They were explaining ‘tech debt’ and refactoring in production code.

It was a good talk but when the speaker gave the demo, he took 45min to add an ‘acceptable font’ feature to a live C# Blazor project.

It would have taken 2min with Javascript…
He must have made changes to 20+ classes/ methods/ structs and had to keep checking classes because he couldn’t remember what they did.

If I were a novice I would have left there feeling dumber but IMO C# is a burning pile of poo

I used to go to an FP meetup who did a bit of F# and it was by far easier to understand/ think about.

[ridesirat]

It’s a bit sad when programmers themselves stop seeing simplicity. poor guy

[ridesirat]

I’m in a 1366x768 windows 8 with latest Chrome & Firefox. I’ve noticed the horizontal bar is out!
Would it be nice if the vertical bar could be in the left side of the nav…?

[kirupa]

Ah, perfect! The styling you are seeing is the default OS styling. That should change once I overwrite the bars using CSS. Regarding moving it on the left, I’ll see what can be done there!

[kirupa]

All of the JavaScript, React, and Coding Exercises articles have now been migrated over. So far, I’m happy with the mechanics of converting the old style tutorials to this new one. The auto-generated links are working well also.

I’ll get back to styling the scroll bar and making more visual tweaks this week @ridesirat

Of course, I’ll need to get search and theming working properly as well haha.

[kirupa]

And…scrollbars have been styled!