Tribute Page - Tatsuro Kiuchi

Hello everyone,

I’ve just finished my Tribute Page. It’s about my favorite illustrator Tatsuro Kiuchi.
Link to the site.
Link to the code.

Any feedback would be appreciated.

1 Like

Nice design, you just need to look at the responsive/mobile side of things

2 Likes

Hello @tabobo,

HTML

  • error

No “p” element in scope but a “p” end tag seen.

From line 34 to line 34:

>
<p> His first picture book “The Lotus Seed” (text by Sherry Garland / Houghton Mifflin Harcourt)
          has sold more than 250,000 copies worldwide, and has been commissioned by such clients as
          Royal Mail to do Christmas Stamp Collection in 2006, and Starbucks for Worldwide
Holiday Promotion “Pass the Cheer” in 2007.</p>
        </p>

  • Do not use <br> to increase a gap:

line 303:

        His illustration works can be found at <a id="tribute-link" href="https://tatsurokiuchi.com/" target="_blank">a
          separate site</a>.
      </p>
      <br>
</div>

MDN documentation:

<br>: The Line Break element - HTML: HyperText Markup Language | MDN
The HTML <br> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.


  • Target blank vulnerability

line 300

<p>
        His illustration works can be found at <a id="tribute-link" href="https://tatsurokiuchi.com/" target="_blank">a
          separate site</a>.
</p>

MDN documentation:

<a>: The Anchor element - HTML: HyperText Markup Language | MDN

Note: When using target, consider adding rel=“noopener noreferrer”
to avoid exploitation of the window.opener API.

About rel=noopener

TL;DR If window.opener is set, a page can trigger a navigation in the opener regardless of security origin.

Target="_blank" - the most underestimated vulnerability ever

People using target=‘_blank’ links usually have no idea about this curious fact:
The page we’re linking to gains partial access to the linking page via the window.opener object.
The newly opened tab can, say, change the window.opener.location to some phishing page. Or execute some JavaScript on the opener-page on your behalf… Users trust the page that is already opened, they won’t get suspicious.

How to fix
Add this to your outgoing links.

rel="noopener"

Update: FF does not support “noopener” so add this.

rel="noopener noreferrer"

Remember, that every time you open a new window via window.open(); you’re also “vulnerable” to this, so always reset the “opener” property

var newWnd = window.open();
newWnd.opener = null;

----

cheers and happy codding :slight_smile:

Note:
Tools used:
[w3c markdown checker web service] (Service » Input » POST body · validator/validator Wiki · GitHub)

Video:

2 Likes

I like the design, looks very clear. The timeline is a nice unique idea.
As @paulgoogle said, it needs some work on the responsive part though.
Otherwise: Good job. :slight_smile:

3 Likes

Thank you for your comment! It’s really useful for me!

2 Likes

You are welcome :slightly_smiling_face:
Cheers and happy coding