Skip to content

Latest commit

 

History

History
1232 lines (929 loc) · 45.8 KB

CHANGELOG.md

File metadata and controls

1232 lines (929 loc) · 45.8 KB
Raw

📋 Changelog

This changelog lists the changes compared to the first-site project, including general changes such as file structure and overall code style, as well as modifications, adjustments, improvements, fixes, additions, removals, and upgrades related to files and code.

In fact, there is much more to it than what can be seen and experienced between the first-site and the upgraded version of it here.

Best of all, there's plenty more to come! Take a look at the "Future Features" list right below.

🚀 Future Features

  • Scroll-to-Top button 🔝
  • Dark and Light Mode switcher 🔦
  • Web form site 🖋️
  • Automatic "Last upgraded" date and time ⏱️

⚙️ General

  • Use of best practices and useful tools, libraries, and inspirations - see the project's resources 📔
  • Specially designed and consistent naming and structure of folders, files, and code itself, i.e., for the entire project - see the project's style guide 🎩
  • Improved code information and structure through specially designed, consistent, and easily searchable comments 📝
  • Adapted and consistent code style and formatting handled by Visual Studio Code settings (/.vscode/settings.json), EditorConfig (/.editorconfig) and Prettier (/.prettierrc.yaml and /.prettierignore) 🪄
    • Default charset defined as utf-8
    • Space indentation changed from four to two spaces
    • Maximum line length set to a modern standard of 120 characters
    • Line endings normalized and specified to unix-style lf (line feed)
    • A newline added to the end of each file
    • Trailing whitespace trimmed
  • Recommended Visual Studio Code extensions for working on the project - see /.vscode/extensions.json 📣

</> HTML

  • Semantic elements and attributes used appropriately

  • Text content and paragraphs adjusted to the changes and expanded as needed

  • Documents created and adapted as needed for additional sites and features

<!DOCTYPE html>

  • Document language set to English (US region):

    <html lang="en-US">

  • Document text directionality set to left-to-right:

    <html dir="ltr">

<head>

  • Document charset (character encoding) ensured to be located within the first 1024 bytes of the document:

    <meta charset="utf-8" />
<!-- locate charset within the first 1024 document bytes -->

  • Document title changed to "My Upgraded First Site":

    <!-- @title -->
<title>My Upgraded First Site</title>

  • Additional website metadata (description, keywords, author, viewport, theme color, Windows Tiles, Twitter Card, and Open Graph) added:

    <!-- @metadata -->
<meta name="description" content="The upgraded version of my first site!" />
<meta name="keywords" content="first, site, upgrade, upgraded, version, glmvc, hello, world" />
<meta name="author" content="glmvc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0fb55e" />
<meta name="msapplication-TileColor" content="#00a300" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-config" content="browserconfig.xml" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://glmvc.github.io/first-site-upgrade/index.html" />
<meta name="twitter:title" content="My Upgraded First Site" />
<meta name="twitter:description" content="The upgraded version of my first site!" />
<meta name="twitter:image" content="https://glmvc.github.io/first-site-upgrade/images/hello-world.png" />
<meta name="twitter:image:alt" content="A cartoon view of the earth saying hello and the moon" />
<meta name="twitter:site" content="@glmvc" />
<meta name="twitter:creator" content="@glmvc" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="https://glmvc.github.io/first-site-upgrade/index.html" />
<meta property="og:title" content="My Upgraded First Site" />
<meta property="og:description" content="The upgraded version of my first site!" />
<meta property="og:image" content="https://glmvc.github.io/first-site-upgrade/images/hello-world.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="A cartoon view of the earth saying hello and the moon" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:video" content="https://glmvc.github.io/first-site-upgrade/videos/hello-world.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:alt" content="A 'Hello world!' terminal output" />
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="360" />
<meta property="og:audio" content="https://glmvc.github.io/first-site-upgrade/audios/cyberpunk.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />
<meta property="og:audio:alt" content="A cyberpunk soundtrack" />

  • Internal stylesheet added (for demo purposes only):

    <!-- @css -->
<!-- internal stylesheet (for demo purposes only) -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

  • Link to Google's online font service replaced with the fonts stylesheet that includes the self-hosted fonts downloaded using the google-webfonts-helper:

    <link rel="stylesheet" href="styles/fonts.css" />

  • Link to the normalize stylesheet added to "make browsers render all elements more consistently and in line with modern standards":

    <link rel="stylesheet" href="styles/normalize.css" />

  • Link to the main stylesheet ensured to be placed last in terms of "regular" stylesheets:

    <link rel="stylesheet" href="styles/style.css" />

  • Links for the favicons (generated by the RealFaviconGenerator for multiple browsers and devices using emojis from Twemoji with the Twemoji Cheatsheet and masked with the Maskable.app) added:

    <!-- @linking -->
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png" />
<link rel="icon" href="favicon.ico" sizes="any" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180" />
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#0fb55e" />
<link rel="manifest" href="site.webmanifest" />

  • Scripts for the jQuery and Image Map Resizer libraries added, and script loading strategy changed (within the <head> plus defer attribute):

    <!-- @scripts -->
<script src="scripts/jquery-3.6.4.min.js" defer></script>
<script src="scripts/imageMapResizer.min.js" defer></script>
<script src="scripts/main.js" defer></script>

  • Link to the noscript stylesheet added within <noscript> to provide "visual warnings" when scripting is disabled in the browser:

    <noscript><link rel="stylesheet" href="styles/noscript.css" /></noscript>

  • Stylesheets and script for the Prism syntax highlighter library and its VS Code Dark+ theme added and linked in the Source Code (/code.html) and Changelog (/changelog.html) documents:

    <link rel="stylesheet" href="styles/prism.min.css" />
<link rel="stylesheet" href="styles/prism-theme.min.css" />
    <script src="scripts/prism.min.js" defer></script>

  • Script for the Marked markdown compiler added in the Changelog (/changelog.html) document:

    <script src="scripts/marked.min.js" defer></script>

<body>

  • Custom data-* attribute added to the <body> for identification of individual pages (visual content in the documents):

    <body data-page="home">

  • Semantically named id (unique per document) and class attribute values added for identification of elements:

    <h3 id="web-dev-title" class="hyphenation">Web development</h3>

  • Generic container added as a direct child of the <body> for layout styling purposes of the visual page content:

    <!--=====================================================-->
<!-- || page -->
<!--=====================================================-->
<div class="page-wrapper centered">
  ...
</div>
...

  • Semantic elements historically employed for styling purposes but now holding semantic value used with informational and semantic class names:

    <b class="user-instruction">enable JavaScript</b>
    <i class="latin-expression" lang="la">et cetera</i>
    <u class="incorrect-spelling">helo wrodl</u>

  • Semantic elements for sectioning content used:

    <!--=====================================================-->
<!-- || header -->
<header>
  ...
  <!-- || navigation (nav) -->
  <nav>
    ...
  </nav>
</header>
<!--=====================================================-->
<!-- || main -->
<main>
  ...
  <!-- || sidebar (aside) -->
  <aside>
    ...
  </aside>
  ...
  <!-- || [section name] -->
  <section>
    ...
  </section>
  ...
  <!-- || [article name] -->
  <article>
    ...
  </article>
</main>
<!--=====================================================-->
<!-- || footer -->
<footer>
  ...
  <!-- || contact details (address) -->
  <address>
    ...
  </address>
</footer>
...

  • Accessibility (A11y) aspects added and improved, such as skip links and the use of ARIA:

    <!--=====================================================-->
<!-- || skip links (a11y) -->
<div class="skip-links box-shadow">
  Skip to <a class="skip-link" href="#content-main">main content</a> or
  <a class="skip-link" href="#footer-main">main footer</a>.
</div>
    <a class="logo" href="index.html" aria-label="Home" aria-current="page">
  ...
</a>

  • Logo added as an inline SVG within the <header> and an anchor linking to the homepage:

    <!-- || logo (svg) -->
<a class="logo" href="index.html" aria-label="Home" aria-current="page">
  <span class="visually-hidden">ivan glmvc</span>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="244"
    height="265"
    fill="none"
    viewBox="0 0 244 265"
    role="img"
    aria-labelledby="svg-logo-title"
  >
    <title id="svg-logo-title">Logo with the letters "i" and "v" for the name "ivan"</title>
    <path
      fill="whitesmoke"
      fill-rule="evenodd"
      d="M53.8992 98.4712c5.7288-3.3137 13.0542-1.3472 16.3617 4.3928l71.8651 124.707c3.308 5.74 1.345 13.079-4.384 16.393-5.728 3.313-13.054 1.347-16.361-4.393L49.5151 114.864c-3.3075-5.74-1.3447-13.079 4.3841-16.3928ZM204.726 165.339c6.515 1.151 10.864 7.375 9.716 13.901l-7.973 45.302c-1.149 6.526-7.361 10.884-13.876 9.733-6.514-1.15-10.864-7.374-9.715-13.901l7.972-45.301c1.149-6.527 7.361-10.885 13.876-9.734Z"
      clip-rule="evenodd"
    />
    ...
  </svg>
  ...
</a>

  • Two generic inline containers added after the inline SVG logo for text with a typewriter effect:

    <!-- || typewriter effect -->
<span class="typewriter" aria-hidden="true">
  <span class="js-typewriter-text"></span>
</span>

  • Navigation added within the <header> with a toggle button for the responsive navigation and anchors within an unordered list linking to the individual documents:

    <!-- || navigation (nav) -->
<nav aria-label="Main">
  <button
    type="button"
    id="js-nav-toggle-button"
    class="nav-toggle-button"
    aria-controls="nav-main"
    aria-expanded="false"
  >
    <span class="visually-hidden">Open main navigation</span>
    <span></span>
    ...
  </button>
  <ul id="nav-main">
    <li><a class="nav-item-home active" href="index.html" title="Homepage" aria-current="page">Home</a></li>
    <li><a class="nav-item-code" href="code.html" title="Source Code">Code</a></li>
    <li><a class="nav-item-changelog" href="changelog.html" title="Changelog List">Changelog</a></li>
    <li>
      <a
        class="nav-item-first-site"
        href="first-site/index.html"
        title="first-site version (different structure and layout)"
        rel="alternate"
        >First-Site</a
      >
    </li>
  </ul>
</nav>

  • Button type set for buttons that are not associated with forms or controls to achieve no default behavior on activation:

    <button type="button">...</button>

  • Warnings displayed when scripting is disabled in the browser:

    <!-- || noscript -->
<noscript class="drop-shadow">
  Please <b class="user-instruction">enable JavaScript</b> in your (system/browser) settings to ensure that this
  website runs properly.
</noscript>

  • Sidebar added for hyperlinks to social media profiles:

    <!-- || sidebar (aside) -->
<aside class="box-shadow drop-shadow">
  ...
</aside>

  • Advisory information added to certain elements (hovering over some of them will display a tooltip in some browsers):

    <a href="https://github.com/glmvc" title="glmvc GitHub profile">...</a>
    <abbr title="Hypertext Markup Language">HTML</abbr>

  • Outgoing hyperlinks adapted to open in a new tab instead of the current one:

    <a href="https://github.com/glmvc" target="_blank">...</a>

  • Hyperlinks adapted with relationships between the linked resource and the current document:

    <a href="https://github.com/glmvc" rel="external noopener noreferrer">...</a>

  • Character references used for special characters like emojis and non-breaking spaces:

    <a ...>&#128025;&nbsp;GitHub</a>

  • Character entity references used to escape HTML syntax characters:

    &amp;
&quot;
&lt;
&gt;

  • Heading elements used correctly by not skipping heading levels, maintaining a logical document outline, and ensuring the use of a single main heading per document:

    <h1>...</h1>
  <h2>...</h2>
    <h3>...</h3>
    <h3>...</h3>
      <h4>...</h4>
    <h3>...</h3>
    <h3>...</h3>
      <h4>...</h4>
        <h5>...</h5>
      <h4>...</h4>
        <h5>...</h5>
          <h6>...</h6>
          <h6>...</h6>
  <h2>...</h2>
    <h3>...</h3>

  • Main heading adjusted by adding a generic inline container within for more control over text styling:

    <h1><span class="heading-main">hello world!</span></h1>

  • Inline styling added to the subheading (for demo purposes only) and possible bidirectional text from the inserted username input isolated from the preceding text:

    <!-- inline styling (for demo purposes only) -->
<h2 style="color: whitesmoke; color: var(--on-surface-color-main)">
  Nice to meet you, <bdi class="hyphenation" data-name></bdi>
</h2>

  • Figures and their captions added for the switchable image, video, and audio:

    <figure>
  ...
  <figcaption>
    ...
  </figcaption>
</figure>

  • Switchable image embedded within its <section>, assigned intrinsic dimensions, provided with multiple resolutions using pixel density descriptors, supplemented with advisory information about being switchable, linked to an image map with hyperlink areas of specified shape and coordinates, and made focusable:

    <figure>
  <map name="hello-world">
    <area
      alt="Planet Earth"
      href="#table-planets"
      title="Table about the planets in our solar system, including our home, the Earth"
      shape="circle"
      coords="200,150,78"
    />
    <area
      alt="Earth's Moon"
      href="https://solarsystem.nasa.gov/moons/earths-moon/overview/"
      title="NASA's solar system site about Earth's Moon"
      target="_blank"
      rel="external noopener noreferrer"
      shape="circle"
      coords="332,39,15"
    />
  </map>
  <img
    class="centered box-shadow"
    width="400"
    height="300"
    srcset="images/hello-world.png, images/hello-world-2x.png 2x, images/hello-world-4x.png 4x"
    src="images/hello-world.png"
    alt="A cartoon view of the earth saying hello and the moon"
    title="Switch image by clicking or pressing the enter key"
    usemap="#hello-world"
    tabindex="0"
  />
  <figcaption>
    The earth saying hello and the moon (image downloaded from
    <a
      href="https://openclipart.org/detail/190952/hello-world"
      title="Open Clipart image source"
      target="_blank"
      rel="external noopener noreferrer"
      >Open Clipart</a
    >)
  </figcaption>
</figure>

  • Video embedded within the <article>, assigned intrinsic dimensions, supplemented with a poster and controls, played in a loop and automatically, provided in multiple formats (WebM and MPEG-4-MP4) with the corresponding codecs (AV1 and AVC-H.264), described with a description using the WebVTT format, and enhanced with a fallback text and hyperlink to the video file:

    <figure class="centered">
  <video
    class="centered box-shadow"
    width="400"
    height="225"
    poster="images/hello-world-video-poster.jpeg"
    controls
    loop
    muted
    playsinline
    autoplay
  >
    <source src="videos/hello-world.webm" type="video/webm; codecs=av01.0.08M.08.0.110.06.06.06.0" />
    <source src="videos/hello-world.mp4" type="video/mp4; codecs=avc1.4D0028" />
    <track kind="descriptions" src="videos/hello-world.vtt" srclang="en-US" label="English (US)" />
    <p>
      Sorry, your browser doesn't support HTML 5 video. But don't worry, here's a
      <a href="videos/hello-world.mp4" title="'Hello world!' terminal output MP4 video file" target="_blank"
        >link to the MP4 video file</a
      >
      instead. You can download it and watch it with your favorite video or media player!
    </p>
  </video>
  <figcaption>
    A 'Hello world!' terminal output (video downloaded from
    <a
      href="https://pixabay.com/videos/hello-world-pc-retro-monitor-28320/"
      title="Pixabay video source"
      target="_blank"
      rel="external noopener noreferrer"
      >Pixabay</a
    >)
  </figcaption>
</figure>

  • Audio embedded within the <footer>, supplemented with controls, played in a loop, indicated to the browser that the whole file can be downloaded, provided in multiple formats (Ogg and MPEG-1 Audio Layer 3-MP3) with the corresponding codecs (Vorbis), described with a description using the WebVTT format, and enhanced with a fallback text and hyperlink to the audio file:

    <figure>
  <audio id="audio" class="box-shadow" controls loop preload="auto">
    <source src="audios/cyberpunk.ogg" type="audio/ogg; codecs=vorbis" />
    <source src="audios/cyberpunk.mp3" type="audio/mpeg" />
    <track kind="descriptions" src="audios/cyberpunk.vtt" srclang="en-US" label="English (US)" />
    <p>
      Sorry, your browser doesn't support HTML 5 audio. But don't worry, here's a
      <a href="audios/cyberpunk.mp3" title="Cyberpunk soundtrack MP3 audio file" target="_blank"
        >link to the MP3 audio file</a
      >
      instead. You can download it and listen to it with your favorite audio or media player!
    </p>
  </audio>
  <figcaption>
    A cyberpunk soundtrack (audio downloaded from
    <a
      href="https://pixabay.com/music/electronic-cyberpunk-2099-10701/"
      title="Pixabay audio source"
      target="_blank"
      rel="external noopener noreferrer"
      >Pixabay</a
    >)
  </figcaption>
</figure>

  • Citation and quotations added and linked accordingly:

    <p>
  According to the
  <cite
    ><a
      href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program"
      title="'Hello, World!' program - Wikipedia entry"
      target="_blank"
      rel="external noopener noreferrer"
      >Wikipedia article on the "Hello, World!" program</a
    ></cite
  >.
</p>
    <blockquote cite="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">
  ...
</blockquote>
    <p>
  <q cite="https://en.wikipedia.org/wiki/HTML"
    ><abbr title="Hypertext Markup Language"><strong>HTML</strong></abbr> is the standard markup language for
    documents designed to be displayed in a web browser.</q
  >
...

  • Importance and emphasis added to certain words and parts of text:

    <strong>...</strong>
    <em>...</em>

  • Relevant and interesting text content marked and highlighted:

    <mark>...</mark>

  • Line breaks (carriage returns) used to structure text for visual separation and improved readability:

    ...
...<br />
...

  • Horizontal rules added for thematic breaks:

    ...
<hr />
...

  • Description list added within its <section> to describe terms with corresponding descriptions and definitions:

    <dl>
  <dt>
    <dfn>...</dfn>
  </dt>
  <dd>
    ...
  </dd>
  ...
</dl>

  • Unordered list nested to create hierarchical list content within its <section>:

    <ul>
  <li>
    ...
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </li>
  <li>
    ...
  </li>
</ul>

  • Further sources added to the ordered list, which is split into two parts within its <section>:

    <ol>
  <li>...</li>
  <li>...</li>
  ...
</ol>
...
<ol start="11">
  <li>...</li>
</ol>

  • Abbreviations added for acronyms and to abbreviate terms:

    <abbr title="Hypertext Markup Language">HTML</abbr>

  • Comprehensive table added within its <section> that contains data about the planets of our solar system and includes a caption, headers, column and row groups, and a footer note:

    <div class="table-wrapper drop-shadow">
  <div class="table-scroll">
    <table>
      <caption>...</caption>
      <colgroup>
        <col span="2" />
        <col span="1" />
        <col span="9" />
      </colgroup>
      <thead>
        <tr>
          <th id="..." colspan="2" scope="colgroup">...</th>
          <th id="..." scope="col">...</th>
          <th id="..." scope="col" abbr="...">...</th>
          ...
        </tr>
      </thead>
      <tbody>
        <tr>
          <th id="..." colspan="2" rowspan="4" scope="rowgroup" headers="...">...</th>
          <th id="..." scope="row" headers="...">...</th>
          <td headers="...">...</td>
          ...
        </tr>
        <tr>
          <th id="..." scope="row" headers="...">...</th>
          <td headers="...">...</td>
          ...
        </tr>
        ...
      </tbody>
      <tfoot>
        <tr>
          <td colspan="12">...</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

  • User input from text entry devices such as keyboards added in the Source Code document for shortcuts and terminal commands:

    <kbd><kbd>&#8984; (Command/Cmd)</kbd> + <kbd>V</kbd></kbd> on Mac or
<kbd><kbd>Ctrl (Control)</kbd> + <kbd>V</kbd></kbd> on Windows/Linux.
    <samp><kbd>whois 185.199.108.153</kbd>
...</samp>

  • Sample output from the terminal added in the Source Code (/code.html) document to demonstrate shell interactions:

    <samp>...</samp>

  • Source code implemented as code blocks/snippets in the Source Code (/code.html) and Changelog (/changelog.html) documents by fetching and highlighting the source files and code using the Prism syntax highlighter library:

    <pre data-src="index.html"></pre>
    <pre><code class="language-...">...</code></pre>

  • JavaScript variable for the "first site visit check" introduced and explained in the Source Code (/code.html) document:

    <var>firstSiteVisit</var>

  • User interaction features like the "Change user" button added within the <footer>:

    <!-- || site features -->
<h4>Features</h4>
<h5>user interaction</h5>
<div class="features-wrapper">
  <div class="feature">
    <h6>Change your username:</h6>
    <button type="button" id="js-change-username" class="button">Change user</button>
  </div>
  ...
</div>

  • Contact details (fake) added within the <footer> as an address with special anchors for a telephone number and email:

    <!-- || contact details (address) -->
<address>
  <div class="contact-details">
    <p>
      secret company contact:<br />
      secret street 1<br />
      secret city<br />
      secret country
    </p>
    <a href="tel:+1234567890">123-456-7890</a>
    <a
      href="mailto:[email protected][email protected],[email protected]&[email protected]&subject=***%20Secret%20Subject%20***&body=***%20Secret%20Message%20***"
      >[email protected]</a
    >
  </div>
  ...
</address>

  • Contact map showing a location embedded within the <address> as an iframe from OpenStreetMap:

    <iframe
  name="contact-map"
  class="box-shadow"
  width="400"
  height="300"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-116.8620014190674%2C37.62317153081475%2C-116.83492183685304%2C37.63501637743219&amp;layer=mapnik"
  title="Secret location on OpenStreetMap"
  loading="lazy"
></iframe>

  • Additional content and information about the site added within the <footer> in a details area with a summary caption:

    <!-- || info (details) -->
<details open>
  <summary class="centered">Info</summary>
  ...
</details>

  • Japanese phrase with the language set to Japanese added within the <details>:

    <p lang="ja">愛を込めて作成されました。</p>

  • Date and time added for the birthday and last upgrade within the <details> in a machine-readable format:

    <time id="birthday" datetime="YYYY-MM-dd">...</time>
    <time id="js-last-upgraded" datetime="YYYY-MM-ddThh:mm">...</time>

  • Superscript added for exponents within the <table> and ordinal numbers within the <details>:

    <th scope="col">Density (kg/m<sup>3</sup>)</th>
    6<sup>th</sup> of December 2021

  • Subscript added for the chemical formula within the <details>:

    C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>

  • Data value used to provide the content of the chemical formula in a machine-readable translation:

    <data value="caffeine">C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></data>

  • Text directionality overridden to right-to-left to display the backward spelling of two words within the <details>:

    <bdo dir="rtl">Hello World</bdo>

  • Deleted and inserted text used to correct misspellings of two words within the <details>:

    <del>helo wrodl</del> <ins>Hello World</ins>

  • Line break opportunities used to introduce word break positions within text for a long example URL within the <details>:

    http://a<wbr />.super<wbr />.secret<wbr />.example<wbr />.info/located<wbr />/very<wbr />/deep<wbr />/within<wbr />/an<wbr />/extremely<wbr />/nested<wbr />/folder<wbr />/structure

  • Side comments added as small print for the tagline and "Last upgraded" information within the <details>:

    <small>...</small>

  • Mathematical symbol for infinity added as part of the tagline using MathML and the corresponding character reference name:

    <math><mi>&infin;</mi></math>

  • Ruby annotation added as part of the tagline to display Romaji transliteration for the Japanese Kanji characters:

    <ruby>またね<rp>(</rp><rt>ma-ta-ne</rt><rp>)</rp></ruby>

  • Dialog added as an Easter egg that appears on the birthday of the site:

    <!--=====================================================-->
<!-- || birthday banner (dialog) -->
<dialog id="birthday-banner" inert>
  ...
</dialog>

  • Canvas with a displayed size and fallback text added within the <dialog> for confetti animations using the Canvas Confetti library:

    <canvas id="banner-confetti" width="762" height="518" aria-describedby="banner-confetti-description">
  <span id="banner-confetti-description">Confetti shower to celebrate the Bitday</span>
</canvas>

  • Heading with related content grouped within the <dialog>:

    <hgroup>
  <h3>Hooray! Today, the site turned <span class="js-site-age"></span> old!</h3>
  <p>And it's been that long since the very first bit of it was written.</p>
</hgroup>

  • Menu used as an unordered list for interactive buttons within the <dialog>:

    <menu>
  <li>
    <button type="button" class="js-close-dialog dialog-button box-shadow" autofocus>Close dialog</button>
  </li>
  <li>
    <button
      type="button"
      class="js-celebrate-birthday dialog-button box-shadow"
      aria-describedby="banner-confetti-description"
    >
      Celebrate with us <span class="emoji">&#129395;</span>
    </button>
  </li>
</menu>

  • Script added as the last element right before closing the <body> to output an informational message to the console:

    <!--=====================================================-->
<!-- || body script -->
<!--=====================================================-->
<script>
  console.info("Hello, World!");
</script>

{} CSS

  • @font-face rulesets in the created external stylesheet (fonts.css) now in use to include and load the web fonts that are used (eot, woff2, woff, ttf, svg and variable):

    @font-face {...}

  • External stylesheets, internal stylesheet and inline styling added (internal and inline styling just for demonstration)

  • Default margin and padding set to 0 ("reset stylesheet") with the internal stylesheet using the universal selector (*):

    * {margin: 0; padding: 0;}

  • Type (tag / element), class and ID selectors now in use

  • Selector lists (bad practice as an example too) now in use

  • Descendant, child, adjacent and general sibling combinators now in use:

    , >, + and ~

  • CSS functions now in use

  • Calc functions now in use to perform calculations:

    calc(...)

  • Natural (intrinsic) and extrinsic (given size) sizes of elements now in use

  • More values and units now in use (absolute and relative lengths, percentages, numbers etc.)

  • Different color values now in use (rgb / rgba, hexadecimal, color keywords etc.)

  • Global website colors and spacings set with variables using the :root pseudo-class:

    :root {...}

  • Standard box model (content-box) changed to the alternative box model (border-box) for all elements in the document:

    html {box-sizing: border-box;}

    *, *::before, *::after {box-sizing: inherit;}

  • Font size of the html element set to 62.5% (because it's equal to 10px in most browsers) to make it easier to calculate rem units:

    html {font-size: 62.5%;}

  • Font sizes adapted to a fluid typography scale using clamp functions:

    font-size: clamp(8.4rem, 7.8rem + 1.875vw, 10.5rem);

  • Special pseudo-element for styling selections / highlighting now in use:

    ::selection

  • Special pseudo-element for styling marker boxes now in use:

    ::marker

    summary::marker

  • Horizontal overflow set to hidden on the body element because of unwanted horizontal scrolling especially on mobile devices:

    overflow-x: hidden;

  • Backgrounds added (background shorthand and longhand properties)

  • Borders added (border shorthand and longhand properties)

  • Fallback width for the .page-wrapper container added for browsers that do not support the vw unit:

    width: 90%;

  • Green shadow styled left and right of the .page-wrapper container:

    box-shadow: 5px 0 10px rgba(15, 181, 94, 0.8), -5px 0 10px rgba(15, 181, 94, 0.8);

  • Utility classes and rulesets created for repeating CSS tasks like horizontal centering of elements for example:

    .center {margin-right: auto; margin-left: auto;}

  • Scrollbars (both vertical and horizontal) styled using WebKit extensions:

    .styled-scrollbars::-webkit-scrollbar {...}

    .styled-scrollbars::-webkit-scrollbar-track {...}

    .styled-scrollbars::-webkit-scrollbar-thumb {...}

    .styled-scrollbars::-webkit-scrollbar-thumb:hover {...}

  • Transitions now in use:

    transition: <property> <duration> <timing-function>;

  • Mouse cursor type changed accordingly and as needed:

    cursor: not-allowed;

    cursor: help;

    cursor: pointer;

    cursor: crosshair;

  • Text content styled (headings, paragraphs, lists, captions, quotes etc.)

  • Hyperlinks styled with pseudo-class selectors:

    a:link, a:visited, a:focus, a:hover and a:active

  • SVG icon attached to external hyperlinks with an attribute selector and a special pseudo-element selector:

    a[href*="http"]::after

  • Visual / functional content styled (images, table, button etc.)

  • Website layout styled (using flex, grid, multicol, positioning, floating etc.)

  • Animations using @keyframes at-rules now in use for the glitch, typewriter and blinking caret effect:

    animation: glitch 600ms infinite;

    animation: typing 6s steps(var(--characters)) infinite;

    animation: blink 1s step-end infinite;

  • @supports at-rule now in use to specify declarations that depend on a browser's support for a specific CSS feature:

    @supports not ((position: -webkit-sticky) or (position: sticky)) {..}

    @supports not (inset: 0) {...}

  • Main heading wrapper (div.heading) and images will now rotate a bit on hover:

    transform: rotate(-1deg);

    transform: rotate(0.005turn);

  • Main heading (<h1>) set as inline box (outer display type) so that the click easter egg really only affects the text and not the full width / block:

    display: inline;

  • Main heading (<h1>) wrapped in a div container with the class .heading to center it:

    div.heading {text-align: center;}

  • Subheading (<h2>) color set to whitesmoke with inline styling (just for demonstration):

    style="color: whitesmoke;"

  • Blur filter added to the JavaScript code image to hide the click easter egg:

    filter: blur(5px);

  • Writing modes (block and inline dimensions) changed to vertical left-to-right for the sidebar and vertical right-to-left for the Japanese sentence:

    writing-mode: vertical-lr;

    writing-mode: vertical-rl;

  • Borders of the table styled to collapse:

    table {border-collapse: collapse;}

  • Caption of the table positioned to the bottom (visually):

    table caption {caption-side: bottom;}

  • Adjusted how whitespace and word breaking / wrapping are treated:

    white-space: nowrap;

    word-wrap: break-word;

    overflow-wrap: break-word;

  • The website is now full responsive (using media queries, meta viewport, layout techniques etc.)

  • Website styled to be printable:

    @media print {...}

  • Users who set the settings to minimize the amount of non-essential motion are respected by turning off all animations, transitions and the like:

    @media (prefers-reduced-motion: reduce) {...}

  • Vendor prefixes added with the Autoprefixer CSS online tool for optimal compatibility / browser support

}); JS

  • jQuery library now in use and most code in main.js rewritten using its syntax

  • Prism syntax highlighter library now in use for the created source code (code.html) and changelog (changelog.html) documents

  • At a given scrolling value (defined in the checkScroll function) the class scrolled is now set on the body element:

    if ($(window).scrollTop() > 23) {$('body').addClass('scrolled');}

    else {$('body').removeClass('scrolled');}

  • The checkScroll function is called on the document scroll event:

    $(window).on('scroll', function () { checkScroll(); });

  • A variable and HTML and CSS logic for the text of the typewriter effect declared:

    const text = 'glmvc';

    $('#typewriter-text').html(text);

    $('#typewriter-text').css('--characters', text.length + 6);

  • Clicking on the navigation icon (button) will toggle the class open to it and the class nav-open to the body element:

    $(this).toggleClass('open');

    $('body').toggleClass('nav-open');

  • Clicking on the navigation icon (button) will also change the aria-expanded attribute accordingly:

    let isExpanded = $(this).attr('aria-expanded');

    if (isExpanded === 'false') {$(this).attr('aria-expanded', 'true');}

    else {$(this).attr('aria-expanded', 'false');}

  • The username input for the personalized welcome message is now limited to a certain number of characters:

    let maxLength = 50;

    let userName = -1;

    while (userName == -1 || (userName != null && userName.length > maxLength)) { userName = window.prompt(...) }

  • Image Map Resizer library now in use so that the image map works responsive:

    $('map').imageMapResize();

  • Image map and figure caption now changing accordingly on clicking the images:

    let imageMap; declares global variable

    imageMap = $('map').detach(); inside the if statement: removes the map element from the dom, but keeps its data

    $('img').before(imageMap); inside the else statement: restores the map element with its data before the img element

    $('img + figcaption').html('...'); inside the if and else conditional statements: for the correct figure caption

  • Audio volume of the audio element set to 50%:

    let audio = document.getElementById('audio');

    audio.volume = 0.5;

  • Birthday banner added to show on December 6 every year as a small easter egg using date comparison and the dialog element