markbranly / hacker-news-modern-ui Goto Github PK

A Modern UserStyle for Hacker News

License: MIT License

CSS 96.01% Makefile 2.27% Shell 1.72%

hacker-news-modern-ui's Introduction

Hacker News Modern and Friendly UI

Design

Below is a quick look at the redesign. For more images and explanations of the design concept, check out the Design Improvements page.

Why another Hacker News Redesign?

Read the Project Brief.

Roadmap

View the Project Roadmap.

Build

Since the end result is a single CSS file, and the source files are modern Pure CSS, the build process for this project is fairly simple.

Our build file, userstyle.css, provides the structure, or scaffolding, of the source files.

All @import statements in the build file are replaced with their file contents during the build process to create the single file required by UserStyles.world. A simple Makefile provides the build command:

$ make

An experimental watch command is available as well:

$ make watch

This command utilizes the cross-platform file-monitoring utility, fswatch. Early indications are that it works quite well.

hacker-news-modern-ui's People

Contributors

Watchers

hacker-news-modern-ui's Issues

Fix spacing on comments that are flagged and have no upvote link.

Here is an example:
https://news.ycombinator.com/item?id=39639857

At a minimum, the spacing should be the same as regular comments. Perhaps, let's even add a flag icon (e.g. unicode Black Flag) as a stronger indication.

Reduce excessive spacing between submission content and comments.

Example:

Fix: Edit form alignment issue

comment edit screen with form aligned all the way to the left

Here is the relevant markup:

<html lang="en" op="edit">
  <body>
    <center>
      <table
        id="hnmain"
        border="0"
        cellpadding="0"
        cellspacing="0"
        width="85%"
        bgcolor="#f6f6ef"
      >
        <tbody>
          <tr>
            <td bgcolor="#ff6600">
              <table
                border="0"
                cellpadding="0"
                cellspacing="0"
                width="100%"
                style="padding: 2px"
              >
                <tbody>
                  <tr>
                    <td style="width: 18px; padding-right: 4px">
                      <a href="https://news.ycombinator.com"
                        ><img
                          src="y18.svg"
                          width="18"
                          height="18"
                          style="border: 1px white solid; display: block"
                      /></a>
                    </td>
                    <td style="line-height: 12pt; height: 10px">
                      <span class="pagetop"
                        ><b class="hnname"><a href="news">Hacker News</a></b>
                        <a href="newest">new</a> |
                        <a href="threads?id=username">threads</a> |
                        <a href="front">past</a> |
                        <a href="newcomments">comments</a> |
                        <a href="ask">ask</a> | <a href="show">show</a> |
                        <a href="jobs">jobs</a> |
                        <a href="submit" rel="nofollow">submit</a>
                      </span>
                    </td>
                    <td style="text-align: right; padding-right: 4px">
                      <span class="pagetop">
                        <a id="me" href="user?id=username">username</a>
                        (<span id="karma">14</span>) |
                        <a
                          id="logout"
                          rel="nofollow"
                          href="logout?auth=xxxxxx&amp;goto=edit%3Fid%3D123456789"
                          >logout</a
                        >
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr id="pagespace" title="Edit" style="height: 10px"></tr>
          <tr>
            <td>
              <table class="fatitem" border="0">
                <tbody>
                  <tr class="athing" id="123456789">
                    <td class="ind"></td>
                    <td valign="top" class="votelinks">
                      <center>
                        <font color="#ff6600">*</font><br />
                        <img src="s.gif" height="1" width="14" />
                      </center>
                    </td>
                    <td class="default">
                      <div style="margin-top: 2px; margin-bottom: -10px">
                        <span class="comhead">
                          <span class="score" id="score_123456789">1 point</span>
                          by
                          <a href="user?id=username" class="hnuser"
                            >username</a
                          >
                          <span class="age" title="2024-04-05T12:57:52"
                            ><a href="item?id=123456789">0 minutes ago</a></span
                          >
                          <span id="unv_123456789"></span>
                          <span class="navs">
                            | <a href="item?id=987654321">parent</a> |
                            <a href="context?id=123456789" rel="nofollow"
                              >context</a
                            >
                            | <a href="edit?id=123456789">edit</a> |
                            <a
                              href="delete-confirm?id=123456789&amp;goto=edit%3Fid%3D123456789"
                              >delete</a
                            ><span class="onstory">
                              | on:
                              <a href="item?id=999999999"
                                >Ask HN: Can someone with enough Karma to
                                downvote ...</a
                              ></span
                            >
                          </span>
                        </span>
                      </div>
                      <br />
                      <div class="comment">
                        <span class="commtext c00">…</span>
                        <div class="reply"></div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <br />
              <form class="itemform" action="/xedit" method="post">
                <script type="text/javascript">
                  function tlen(el) {
                    var n = el.value.length - 80;
                    el.nextSibling.innerText = n > 0 ? n + " too long" : "";
                  }
                </script>
                <input type="hidden" name="id" value="123456789" /><input
                  type="hidden"
                  name="hmac"
                  value="xxxxxxx"
                />
                <table border="0">
                  <tbody>
                    <tr>
                      <td valign="top">text:</td>
                      <td>
                        <textarea name="text" rows="5" cols="60" wrap="virtual">…</textarea>&nbsp;<a href="formatdoc" tabindex="-1"
                          ><font size="-2" color="#afafaf">help</font></a
                        >
                      </td>
                    </tr>
                  </tbody>
                </table>
                <br />
                <input type="submit" value="update" /><br /><br />
              </form>
            </td>
          </tr>
        </tbody>
      </table>
    </center>
    <script type="text/javascript" src="hn.js?E9yMYnpQWdiNKq8RJzFl"></script>
  </body>
</html>

Find a suitable comment block style system for CSS

Nothing stands out as a clear standard. Find a horse to back and implement it.

Up/downvoted comments seem to indicate both actions were taken.

a downvoted comment has styling for both upvoted and downvoted comment

The secret to distinguishing them is the unvote vs undown link.

Fix: link styling on submissions that have no discussion.

They are not conforming to the link styles of regular submissions.

Example:
https://news.ycombinator.com/item?id=39606209

Fix: spacing issues in header when user changes their 'Topcolor' preference.

the hacker news header with no padding around menu elements

We should continue to respect the users preference when fixing this issue—that is, only change the background color when it is the default.

Fix: user karma has no padding when greater than single digit

the username portion of the header showing 725 karma points with cramped background

Promote search in footer above YC Links

The search UI is connected to Hacker News, yet is visually separated by the Y Combinator links which don't relate to HN. It's bad enough that it is relegated to the footer. It does not need to be further separated.

Figure out the intent behind c00 and c73 comment classes and honor it

Example thread containing both:
https://news.ycombinator.com/item?id=39560180

Replace Y-Combinator logo with Hacker News logo

It is available on the HN Algola implementation:

The Project Goal number 6 will need to be restated since this honors the spirit of that constraint, but not to the letter.

Normalize logo in logo-only header pages.

Formatting Options page is done. Replicate across:

Submit
Confirm Delete (op="delete-confirm")

Any more?

Add visited state for "consumable" UI links.

These are the links under a submission and in the meta of a comment.

Fix "Past" styling in Submission actions on New

Needs icon, proper spacing, and order.

https://news.ycombinator.com/newest

Add non-color indication of new users.

Currently the only indication is that the text is green which is an accessibility issue. Let's add an indication that our colorblind friends can see.

Add styling for Page Descriptions.

Here is the known list of pages that have these:

Add ability to hide the users Karma score from themselves.

It appears in both the header and on the user profile page.

Add Linting to the build process.

Find a suitable, lightweight replacement for stylelint and implement it.

Fix: Links in Submission text do not currently have appropriate styling.

Ex: https://news.ycombinator.com/item?id=39783223

They should be styled like "Content Links"

Change the color of warning messages to fit our color palette

a warning message instructing user to add an email address

Please put a valid address in the email field, or we won't be able to send you a new password if you forget yours. Your address is only visible to you and us. Crawlers and other users can't see it.

Markup:

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td bgcolor="#ffffaa">
        <table cellpadding="5" width="100%">
          <tbody>
            <tr>
              <td>
                Please put a valid address in the email field, or we won't be
                able to send you a new password if you forget yours. Your
                address is only visible to you and us. Crawlers and other users
                can't see it.
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Try a tint of gold. Maybe #f5df9e

Animated textarea causing awkward UX

The extra space is nice and the focus intro animation is pleasing, but the animation on focus exit is awkward and you have to click twice to submit.

There is an experimental :blank pseudo selector but there is no support for it yet and it is currently 'at risk'.

Overall, it was an interesting idea but, without JS to give us some CSS handle to distinguish when the textarea has content and not, I think we may have to give up on it.

Unite both site ID elements into one interaction.

That is, when you hover over the name, the logo reacts and vice versa.

Consider adding a visual indication of upvoted comments.

The spacing feels weird without the upvote arrow and there isn't good feedback that you have supported this comment. It should feel more celebratory.

Fix: comment delete confirmation alignment issue.

a comment delete form aligned to the far left

Here is the relevant markup:

<html lang="en" op="delete-confirm">
  <body>
    <center>
      <table
        id="hnmain"
        border="0"
        cellpadding="0"
        cellspacing="0"
        width="85%"
        bgcolor="#f6f6ef"
      >
        <tbody>
          <tr>
            <td bgcolor="#ff6600">
              <table
                border="0"
                cellpadding="0"
                cellspacing="0"
                width="100%"
                style="padding: 2px"
              >
                <tbody>
                  <tr>
                    <td style="width: 18px; padding-right: 4px">
                      <a href="https://news.ycombinator.com"
                        ><img
                          src="y18.svg"
                          width="18"
                          height="18"
                          style="border: 1px white solid; display: block"
                      /></a>
                    </td>
                    <td style="line-height: 12pt; height: 10px">
                      <span class="pagetop"><b>Confirm</b></span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr id="pagespace" title="Confirm" style="height: 10px"></tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td>
              <table border="0">
                <tbody>
                  <tr class="athing" id="123456789">
                    <td class="ind"></td>
                    <td valign="top" class="votelinks">
                      <center>
                        <font color="#ff6600">*</font><br />
                        <img src="s.gif" height="1" width="14" />
                      </center>
                    </td>
                    <td class="default">
                      <div style="margin-top: 2px; margin-bottom: -10px">
                        <span class="comhead">
                          <span class="score" id="score_123456789">1 point</span>
                          by
                          <a href="user?id=username" class="hnuser"
                            >username</a
                          >
                          <span class="age" title="2024-04-05T12:57:52"
                            ><a href="item?id=123456789">10 minutes ago</a></span
                          >
                          <span id="unv_123456789"></span>
                          <span class="navs">
                            | <a href="item?id=123456788">parent</a> |
                            <a href="context?id=123456789" rel="nofollow"
                              >context</a
                            >
                            | <a href="edit?id=123456789">edit</a> |
                            <a
                              href="delete-confirm?id=123456789&amp;goto=delete-confirm%3Fid%3D123456789%26goto%3Dedit%253Fid%253D123456789"
                              >delete</a
                            ><span class="onstory">
                              | on:
                              <a href="item?id=123456787"
                                >Ask HN: Can someone with enough Karma to
                                downvote ...</a
                              ></span
                            >
                          </span>
                        </span>
                      </div>
                      <br />
                      <div class="comment">
                        <span class="commtext c00">…</span>
                        <div class="reply"></div>
                      </div>
                    </td>
                  </tr>
                  <tr style="height: 20px"></tr>
                  <tr>
                    <td colspan="2"></td>
                    <td>
                      <form action="/xdelete" method="post">
                        <input type="hidden" name="id" value="123456789" /><input
                          type="hidden"
                          name="goto"
                          value="edit?id=123456789"
                        /><input
                          type="hidden"
                          name="hmac"
                          value="248bded77ce77c07d39432e6601bf01b279e7e67"
                        />Do you want this to be deleted?<br /><br />
                        <input type="submit" name="d" value="Yes" />&nbsp;<input
                          type="submit"
                          name="d"
                          value="No"
                        />
                      </form>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </center>
  </body>
</html>

Add Support for Dark Mode

Obviously, this will have to default to the user's preference and we can't add any kind of switch.

Add visual differentiation for current page in header nav.

This common convention is a great way to reinforce place and confirm that the user ended up on the intended page. Part of the larger "You are here" strategy.

Hover state not persistent for submission actions on Submission view page

Initial reaction is correct but after the transition, text, icon, and underline swap immediately to: #5f6774 (--color-gray-400).

Example:
https://news.ycombinator.com/item?id=39618822

Add ability to toggle `pre` tag wrapping

Due to the ease of horizontal scrolling, users with touchpads may prefer nowrapping, while mousing users, who don't have such an easy time horizontal scrolling, may prefer the line wrapping.

Collapsed comments have missing downvote arrow icon.

a comment thread with one collapsed comment followed by visible comment

Add indicator (Upvote peplacement) for Jobs submissions.

Is it better to only show this indicator when they appear in other lists? Or should we show it on the Jobs page as well to reinforce the meaning?

As far as implementation, it appears that they are the only Submissions that don't have a comments link. That's going to be one complex selector though.

Add option for sticky footer

The footer contains some very useful navigation (e.g. Lists) and the search feature. Let's give users the option to sticky it to the bottom of the site.

Vertical spacing will need to be compressed when sticky to minimize the impact to screen real estate.

Convert Submission Action Menu to Icons

Favorite/Unfavorite = empty/full hearts.
Hide/Unhide = Eyeball/slash-eyeball
Past = rewind clock?

However, the URL is the same for both sides of a toggle. This means we don't have a strong signal to tell us which side of the toggle to render. A weak signal would be tying it to ":visited" but that would only be right the first time you toggle it.

Needs further investigation.

Redesign `.votelinks` to accommodate downvotes.

Here is the suspected markup:

  <td valign="top" class="votelinks">
      <center>
        <a
          id="up_39789592"
          class="clicky"
          href="vote?id=39789592&amp;how=up&amp;auth=9e3e58972bc7304ac84a8c098098f13add66bb30&amp;goto=ask"
          ><div class="votearrow" title="upvote"></div
        ></a>
        <a
          id="down_39789592"
          class="clicky"
          href="vote?id=39789592&amp;how=down&amp;auth=9e3e58972bc7304ac84a8c098098f13add66bb30&amp;goto=ask"
          ><div class="votearrow" title="downvote"></div
        ></a>
      </center>
    </td>

Add user guidance on Submission comments form (top-level)

Two improvements:

Add a subhead to the form, something like "Join the discussion"
Add an indication of what formatting is allowed. This will be tricky as there is too much content to insert and we can't add a proper link to https://news.ycombinator.com/formatdoc.