# entry

guid: https://htmhell.dev/tips/ol-vs-ul-vs-div/
title: ol vs. ul vs. div
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/ol-vs-ul-vs-div/
hash: �M���HT�l9�<
attributes: {"enclosures":[]}
content:
<p>
  The difference between using <code>ol</code>, <code>ul</code>, and <code>div</code> for a list of items.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- An ordered list --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Clerks (1994)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Mallrats (1995)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Jay and Silent Bob Strike Back (2001)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Just text --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Clerks (1994)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Mallrats (1995)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Jay and Silent Bob Strike Back (2001)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>


<p>
  Recently someone on Twitter asked <q>Is semantic HTML really that useful?</q>. That's a great question because most people know <em>how</em> to write HTML but not <em>why</em>. In a series of posts, I'll try to explain why semantic HTML is useful. I want to begin with the <code>ol</code> and <code>ul</code> elements.
</p>

<h2>Why is the <code>&lt;ul&gt;</code> / <code>&lt;ol&gt;</code> element useful?</h2>

<ul>
  <li>Screen readers might announce it as a list of items</li>
  <li>Screen readers might announce the number of items in the list</li>
  <li>Screen readers might announce the bullet or number of each item</li>
  <li>Screen reader users can use shortcuts to jump from list to list on a page</li>
  <li>It groups related content visually</li>
  <li>It provides a selector for styling (un)ordered lists in CSS</li>
</ul>

<h2 data-sanitized-id="ul">Unordered lists</h2>

<p>
  We use the <code>&lt;ul&gt;</code> element for identifying an element as a group of <var>n</var> items that thematically belong together, listed in no particular order.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span>Some of my favorite movies directed by Kevin Smith<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Jay and Silent Bob Strike Back<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Mallrats<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Clerks<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>Here's what you get when you use NVDA with Firefox:</p>

<p>
</p><figure>
<video src="https://htmhell.dev/images/ul_nvda.mp4" controls="controls" preload="none">
  <p>Something went wrong, please visit <a href="https://htmhell.dev/tips/ol-vs-ul-vs-div/">htmhell.dev/tips/the-current-page</a> to view this video.
</p></video>
<figcaption>
NVDA announces “List with 3 items, Bullet Jay and Silent Bob Strike Back, Bullet Mallrats, Bullet Clerks, Out of list”
</figcaption>
</figure>
<p></p>

<h2 data-sanitized-id="ol">Ordered lists</h2>

<p>
  We use the <code>&lt;ol&gt;</code> element for identifying an element as a group of <var>n</var> items that thematically belong together, listed in a particular order.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span>Movies directed by Kevin Smith sorted by release date<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Clerks (1994)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Mallrats (1995)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Jay and Silent Bob Strike Back (2001)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>


<p>Here's what you get when you use NVDA with Firefox:</p>

<p>
</p><figure>
<video src="https://htmhell.dev/images/ol_nvda.mp4" controls="controls" preload="none">
  <p>Something went wrong, please visit <a href="https://htmhell.dev/tips/ol-vs-ul-vs-div/">htmhell.dev/tips/the-current-page</a> to view this video.
</p></video>
<figcaption>
NVDA announces “List with 3 items, 1 Clerks, 2 Mallrats, 3 Jay and Silent Bob Strike Back, Out of list”
</figcaption>
</figure>
<p></p>

<h2 data-sanitized-id="div">Divs</h2>

<p>
  If we don't use semantic elements, screen readers just announce a bunch of unrelated strings. This might work, too, but sometimes it's better to provide structure and convey more information.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span>Movies directed by Kevin Smith sorted by release date<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Clerks (1994)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Mallrats (1995)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Jay and Silent Bob Strike Back (2001)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>


<p>
</p><figure>
<video src="https://htmhell.dev/images/divlist_nvda.mp4" controls="controls" preload="none">
  <p>Something went wrong, please visit <a href="https://htmhell.dev/tips/ol-vs-ul-vs-div/">htmhell.dev/tips/the-current-page</a> to view this video.
</p></video>
<figcaption>
NVDA announces “Jay and Silent Bob Strike Back, Mallrats, Clerks”
</figcaption>
</figure>
<p></p>

<h2>Styling lists</h2>

<p>
  Things get a little complicated as soon as we style our lists, but that’s something I’ll cover in another issue. In the meantime, check out <a href="https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html">"Fixing" Lists</a> by Scott O'Hara.
</p>


guid: https://htmhell.dev/tips/autocapitalization/
title: Autocapitalization
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/autocapitalization/
hash: XAĽ�{��*����
attributes: {"enclosures":[]}
content:
<p>
  Control how virtual keyboards capitalize words and characters by default.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>words<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Words<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>text<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>words<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">autocapitalize</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>words<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<p>
  Let’s say you have an input field that demands users to enter text in lowercase letters only. If you focus the field, by default the virtual keyboard starts with uppercase letters. You can improve the experience for some users by changing the default auto-capitalization behaviour. By setting <code>autocapitalize</code> to <code>none</code>, virtual keyboards won’t capitalize letters automatically anymore.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>none<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>All lowercase<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>text<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>none<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">autocapitalize</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>none<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<div data-sanitized-class="u-df u-gs u-fww u-mb">
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_default.jpg" width="365" height="791" alt="The virtual keyboard on Android showing uppercase letters by default." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_none.jpg" width="365" height="791" alt="The virtual keyboard on Android showing lowercase letters with autocapitalize set to none." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
</div>

<p>
  The attribute is supported by Safari on iOS and Chrome, Edge and Samsung Internet on Android. The attribute is not supported by Firefox on Android and it has no effect on physical keyboards.</p>
<p>
  Besides <code>none</code>, there are three more allowed values:
</p>

<dl>
  <dt><code>none</code></dt>
  <dd>No autocapitalization should be applied (all letters should default to lowercase).</dd>

  <dt><code>characters</code></dt>
  <dd>All letters should default to uppercase.</dd>

  <dt><code>sentences</code></dt>
  <dd>The first letter of each sentence should default to a capital letter; all other letters should default to lowercase.</dd>

  <dt><code>words</code></dt>
  <dd>The first letter of each word should default to a capital letter; all other letters should default to lowercase.</dd>

</dl>

<p>
  Source: <a href="https://html.spec.whatwg.org/#attr-autocapitalize">6.7.6 Autocapitalization</a>
</p>
    
<div data-sanitized-class="u-df u-gs u-fww u-mb">
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_none_exmp.jpg" width="365" height="791" alt="“a div is not a” written in all lowercase letters." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_characters_exmp.jpg" width="365" height="791" alt="“a div is not a” written in all uppercase letters." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_sentences_exmp.jpg" width="365" height="791" alt="“a div is not a” written in lowercase letters except for the first letter of the sentence." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_words_exmp.jpg" width="365" height="791" alt="“a div is not a” with every word beginning with a uppercase letter." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
</div>


guid: https://htmhell.dev/tips/spell-check/
title: Spell check
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/spell-check/
hash: �`�]�wؑGA�l�
attributes: {"enclosures":[]}
content:
<p>
  You can disable spell check in input, textarea and contenteditable fields.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Message<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>textarea</span> <span data-sanitized-class="token attr-name">spellcheck</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML is amazzing!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>textarea</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<p>
  <code>spellcheck</code> is an enumerated attribute, so we must provide a value, either “true” or “false”. If no attribute is present, the browser decides whether it checks an element for spelling errors.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Message<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">value</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>HTML is amazzing!<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Message<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>textarea</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML is amazzing!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>textarea</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span>Message:<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">contenteditable</span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML is amazzing!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  If you click one of the fields below (in some browsers you have to type something), you should see a squiggly, dashed or dotted red line indicating that “amazzing” isn’t spelled correctly. Please note: Results may differ depending on your browser and default language. The attribute is merely a hint, browsers are not required to check for spelling errors.
</p>

<div data-sanitized-class="demo">
  <div>
    <label for="msg">Message</label>
    
  </div>

  <div>
    <label for="msg2">Message</label>
    <textarea data-sanitized-id="msg2">HTML is amazzing!</textarea>
  </div>

  <div>
    <strong>Message:</strong>
    <div contenteditable="">HTML is amazzing!</div>
  </div>
</div>

<p>We can hint browsers at (not) checking an element for spelling errors.</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Message<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>textarea</span> <span data-sanitized-class="token attr-name">spellcheck</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML is amazzing!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>textarea</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  In the following <code>textarea</code> you shouldn't see a squiggly red line because <code>spellcheck</code> is set to “false”.
</p>

<div data-sanitized-class="demo">
  <div>
    <label for="msg2">Message</label>
    <textarea spellcheck="false" data-sanitized-id="msg2">HTML is amazzing!</textarea>
  </div>
</div>

<p>
  In the following <code>input</code> field you should see a squiggly red line because <code>spellcheck</code> is set to true.
</p>

<div data-sanitized-class="demo">
  <div>
    <label for="msg">Message</label>
    
  </div>
</div>


guid: https://htmhell.dev/tips/landmarks/
title: Landmarks
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/landmarks/
hash: �B :��:5m�� ;
attributes: {"enclosures":[]}
content:
<p>
  HTML allows us to define so-called landmarks, important areas in a page. They can be really helpful, especially for screen reader users.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token comment">&lt;!-- banner landmark --&gt;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token comment">&lt;!-- navigation landmark --&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token comment">&lt;!-- main landmark --&gt;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token comment">&lt;!-- search landmark --&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>form</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>search<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>form</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token comment">&lt;!-- contentinfo landmark --&gt;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<h2>Benefits</h2>

<ol>
  <li>Landmarks help screen reader users with orientation on the page.</li>
  <li>Screen reader users may jump from landmark to landmark using keyboard shortcuts.</li>
  <li>Screen reader users may list all landmarks on a page and select them.</li>
  <li>Sighted users may add <a href="http://matatk.agrip.org.uk/landmarks/">a browser extension</a> to jump to landmarks by using keyboard shortcuts.</li>
</ol>

<h2>Landmarks</h2>

<div tabindex="0" data-sanitized-class="u-oa">
  <table width="740">
    <caption>Landmarks in HTML</caption>
    <colgroup>
      <col width="100">
      <col width="150">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>Element</th>
        <th>ARIA role</th>
        <th>Conditions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>header</code></td>
        <td>banner</td>
        <td>Only in context of the body element, not when it's a descendant of <code>&lt;article&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;nav&gt;</code>, or <code>&lt;section&gt;</code>.</td>
      </tr>
      <tr>
        <td><code>nav</code></td>
        <td>navigation</td>
        <td></td>
      </tr>
      <tr>
        <td><code>main</code></td>
        <td>main</td>
        <td></td>
      </tr>
      <tr>
        <td><code>section</code></td>
        <td>region</td>
        <td>When it has an accessible name using <code>aria-labelledby</code>, <code>aria-label</code> or <code>title</code></td>
      </tr>
      <tr>
        <td><code>form</code></td>
        <td>form</td>
        <td>when it has an accessible name using <code>aria-labelledby</code>, <code>aria-label</code> or <code>title</code></td>
      </tr>
      <tr>
        <td><code>form</code></td>
        <td>search</td>
        <td>with <code>role="search"</code></td>
      </tr>
      <tr>
        <td><code>aside</code></td>
        <td>complementary</td>
        <td></td>
      </tr>
      <tr>
        <td><code>footer</code></td>
        <td>contentinfo</td>
        <td>Only in context of the body element, not when it's a descendant of <code>&lt;article&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;nav&gt;</code>, or <code>&lt;section&gt;</code>.</td>
      </tr>
    </tbody>
  </table>
</div>


<h2>Tips</h2>

<p>
  Here are some tips for using landmarks:
</p>

<ul>
  <li>
    If there are multiple <code>navigation</code> landmarks on a page, each should have a unique label (<code>aria-label</code> or <code>aria-labelledby</code>).


<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Primary<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Secondary<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

  <figure data-sanitized-class="u-mb">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/16_nav_unlabelled.jpg" width="700" height="634" alt="banner, navigation, content information, navigation" loading="lazy">
    </picture> 
    <figcaption>Landmarks listed in VoiceOver on macOS without labels
  </figcaption></figure> 

  <figure>
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/16_nav_labelled.jpg" width="700" height="634" alt="banner, Primary navigation, content information, Secondary navigation" loading="lazy">
    </picture> 
    <figcaption>Landmarks listed in VoiceOver on macOS with labels
  </figcaption></figure> 
    
  </li>
  <li>Avoid redundancy when labelling navigations. A label like “primary navigation” may be announced as “primary navigation navigation”, just label it “primary".</li>
  <li>If a navigation landmark has an identical set of links as another navigation landmark on the page, use the same label for each navigation landmark.</li>
  <li>Don't add too many landmarks to a page. Too many landmarks can make navigation more difficult and confusing.</li>
  <li>There should be only one <code>banner</code> landmark.</li>
  <li>There should be only one <code>contentinfo</code> landmark.</li>
  <li>A document must not have more than one <code>&lt;main&gt;</code> element that does not have the <code>hidden</code> attribute specified. Having more than one visible <code>&lt;main&gt;</code> element can confuse users because screen readers don’t announce the number of <code>main</code> elements.</li>
  <li>If there are multiple <code>complementary</code> landmarks on a page, each should have a unique label (<code>aria-label</code> or <code>aria-labelledby</code>).</li>
  <li>If there are multiple <code>form</code> landmarks on a page, each should have a unique label (<code>aria-label</code> or <code>aria-labelledby</code>).</li>
  <li>Generally, you shouldn't need explicit roles on landmarks with implicit roles. For example, <code>&lt;header&gt;&lt;/header&gt;</code> is sufficient, you don't need <code>&lt;header role="banner"&gt;&lt;/header&gt;</code>.</li>
  <li>
    Most landmarks are well supported, but support may vary, especially with form landmarks. It’s advised to test your landmarks with different screen readers and browsers. Some screen readers may intentionally not announce certain landmarks. Don’t worry too much about it, as long as you have a <a href="https://htmhell.dev/tips/the-document-outline/">sound document outline</a>.
  </li>
</ul>


guid: https://htmhell.dev/tips/the-track-element/
title: the track element
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/the-track-element/
hash: �J���#D:o�}8lW
attributes: {"enclosures":[]}
content:
<p>
  The track element allows you to specify timed text tracks (e.g. captions or subtitles) for media elements. 
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>video</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>workshop_promo.mp4<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">controls</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>track</span> <span data-sanitized-class="token attr-name">default</span> <span data-sanitized-class="token attr-name">kind</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>captions<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">srclang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>en<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>workshop_promo.vtt<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>English<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>track</span> <span data-sanitized-class="token attr-name">kind</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>subtitles<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">srclang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>de<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>workshop_promo_de.vtt<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Deutsch<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Sorry, your browser doesn't support embedded videos.</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>video</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<p>
  If you want to provide captions or subtitles for a <code>&lt;video&gt;</code>, you can use the native <code>&lt;track&gt;</code> element in HTML.<br>
  Here's the result of the above code:
</p>

<video src="https://htmhell.dev/images/workshop_promo.mp4" controls="controls" preload="none">
  <track default="" kind="captions" srclang="en" src="https://htmhell.dev/images/workshop_promo.vtt" label="English"></track>
  <track kind="subtitles" srclang="de" src="https://htmhell.dev/images/workshop_promo_de.vtt" label="Deutsch"></track>
  Sorry, your browser doesn't support embedded videos.
</video>

<p>
  Your browser should automatically show captions in English and somewhere in the controls there's should be an additional button that allows you to switch or turn the text track off.
</p>

<p>There are several attributes you can use with the track element.</p>

<ul>
  <li>
    <code>src</code> specifies the path to the <code>.vtt</code> file that contains the text.
  </li>
  <li>
    <code>kind</code> defines the type of text track you're adding.<br>
    “subtitles” for translations of the spoken content<br>
    “captions” for a transcript of the audio and important non-verbal information.<br>
    “descriptions” for textual descriptions of the video content. (<a href="https://twitter.com/pauljadam/status/1090352784564719621">doesn't seem to work in any browser</a>)<br>
    “chapters” and “metadata” are tracks intended for use from script. Not displayed by the user agent. 
  </li>
  <li>
    <code>label</code> gives a user-readable title for the track, displayed in the video's UI.
  </li>
  <li>
    <code>srclang</code> defines the language of the text track.
  </li>
  <li>
    <code>default</code> defines the default track.
  </li>
</ul>

<h2>CSS</h2>

<p>
  It's possible to style captions and subtitles using CSS. Visit MDN for a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::cue">list of supported properties</a>.
</p>

<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">::cue</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> red<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>

<p>
  The block below is editable. If you change the value of the <code>background-color</code> property, the color of the cue in the video at the top of the page should change accordingly (On macOS: Firefox only, Windows: Chrome and Firefox).
</p>



<h2>JavaScript</h2>

<p>
  There's a <code>cuechange</code> event in JavaScript that fires when a text track has changed the currently displaying cues. Select the English track (default) and open the console to see it in action while the video is playing.
</p>

<pre data-sanitized-class="language-javascript"><code data-sanitized-class="language-javascript"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token keyword">let</span> textTrackElem <span data-sanitized-class="token operator">=</span> document<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">querySelectorAll</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">"track"</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">[</span><span data-sanitized-class="token number">0</span><span data-sanitized-class="token punctuation">]</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">textTrackElem<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">addEventListener</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">"cuechange"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token parameter">event</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token operator">=&gt;</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token keyword">let</span> cues <span data-sanitized-class="token operator">=</span> event<span data-sanitized-class="token punctuation">.</span>target<span data-sanitized-class="token punctuation">.</span>track<span data-sanitized-class="token punctuation">.</span>activeCues<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  console<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">log</span><span data-sanitized-class="token punctuation">(</span>cues<span data-sanitized-class="token punctuation">)</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span></code></pre>



<h2>.vtt</h2>

<p>
  In case you were wondering how the <code>.vtt</code> file for the English track looks like.
</p>

<pre>
WEBVTT

00:00:00.240 --&gt; 00:00:07.040
Hi! My name is Manuel and if you know me, you know
that I like to complain about HTML others have

00:00:07.040 --&gt; 00:00:14.880
written. I post about it on Twitter, I even have a
website called htmhell.dev where I post bad code,

00:00:14.880 --&gt; 00:00:20.400
but complaining is not the only thing I can do.
I can also, and I also like to, share my knowledge

00:00:20.400 --&gt; 00:00:25.440
and this is why I've teamed up with my friends
at Smashing Magazine. We've prepared a workshop

00:00:25.440 --&gt; 00:00:31.840
called “Deep dive on accessibility testing” where
I show you how I use automatic testing tools,

00:00:31.840 --&gt; 00:00:38.160
browser extensions and even CSS and JavaScript,
manual testing, like testing with the keyboard

00:00:38.160 --&gt; 00:00:43.760
and screen readers, to discover these bad
things, to discover accessibility issues.

00:00:43.760 --&gt; 00:00:49.520
If that sounds interesting, it would be great if
you would join me for my workshop. Below the video

00:00:49.520 --&gt; 00:00:56.560
you will find a special link with a discounted
price just for you. I hope to see you soon! Tthanks!
</pre>


guid: https://htmhell.dev/26-tasty-buttons/
title: #26 HTMHell special: tasty buttons
author: ;Manuel Matuzovic
link: https://htmhell.dev/26-tasty-buttons/
hash: ����H(t�dsX�E�4
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section">
<p>The second HTMHell special focuses on another highly controversial pattern in front-end development:</p>
<p>🔥 the burger button. 🔥</p>
<p>The burger button and his tasty friends (kebab, meatball and bento) usually reveal a list of links when activated. According to our studies, these buttons are highly optimized for mouse and touch users, but lack support for keyboard and screen reader users in most cases.</p>
<p>After less than 1 hours of research, HTMHell presents a collection of 18 different bad practices found on real websites.</p>
<h2 data-sanitized-id="pattern-1-the-unsemantic-burger">Pattern 1: the unsemantic burger</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>burger<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.burger</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">display</span><span data-sanitized-class="token punctuation">:</span> flex<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">flex-direction</span><span data-sanitized-class="token punctuation">:</span> column<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">justify-content</span><span data-sanitized-class="token punctuation">:</span> space-between<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">width</span><span data-sanitized-class="token punctuation">:</span> 30px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 20px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">cursor</span><span data-sanitized-class="token punctuation">:</span> pointer<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.burger span</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">display</span><span data-sanitized-class="token punctuation">:</span> block<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background</span><span data-sanitized-class="token punctuation">:</span> #000<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h3>
<ol>
<li>The <code>&lt;div&gt;</code> element is an element of last resort, for when no other element is suitable. Use of the <code>&lt;div&gt;</code> element instead of more appropriate elements leads to poor accessibility. If you need a button, use the <code>&lt;button&gt;</code> element.</li>
<li>A click event on a <code>div</code> triggers only on click. A click event on a <code>button</code> triggers on click and if the user presses the <kbd>Enter</kbd> or <kbd>Space</kbd> key.</li>
<li>A <code>div</code> isn’t keyboard focusable.</li>
<li>There’s no text label.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers announce: Nothing.</li>
</ol>
<h3 data-sanitized-id="other-variations-of-this-pattern">Other variations of this pattern</h3>
<h4>The empty burger</h4>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>burger<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h4>The all div burger</h4>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>burger<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-2-the-classic-image-burger">Pattern 2: The classic image burger</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menu<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menu.png<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-2">Issues and how to fix them</h3>
<ol>
<li>A click event on an <code>img</code> triggers only on click. A click event on a <code>button</code> triggers on click and if the user presses the <kbd>Enter</kbd> or <kbd>Space</kbd> key.</li>
<li>An <code>img</code> isn’t keyboard focusable.</li>
<li>There’s no text alternative for the image. Screen readers may announce the filename instead.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers may announce: menu.png, image.”</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-3-the-modern-image-burger">Pattern 3: The modern image burger</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>hamburger<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 20 20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>title<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span>Open Navigation<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>g</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>3<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>9<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>g</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-3">Issues and how to fix them</h3>
<ol>
<li>A click event on an <code>svg</code> triggers only on click. A click event on a <code>button</code> triggers on click and if the user presses the <kbd>Enter</kbd> or <kbd>Space</kbd> key.</li>
<li>An <code>svg</code> isn’t keyboard focusable in most browsers (IE 11 is an exception).</li>
<li>The value of <code>aria-labelledby</code> references elements by their id, not by tag name.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers interpret <code>svg</code> elements differently. To get a consistent result the <code>role="img"</code> attribute should be present on the <code>svg</code>.</li>
<li>Screen readers may announce: “Open Navigation, graphic” or “Open Navigation, group.”</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-4-almost-a-burger">Pattern 4: Almost a burger</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>navbar-toggle<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon-bar<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon-bar<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon-bar<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-4">Issues and how to fix them</h3>
<ol>
<li>There’s no text label.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers announce: button.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-5-the-placeholder-link-burger-button">Pattern 5: The placeholder link burger button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menuButton<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-5">Issues and how to fix them</h3>
<ol>
<li>A link without <code>href</code> is still not a button.</li>
<li>If the <code>&lt;a&gt;</code> element has no <code>href</code> attribute, then the element represents a placeholder for where a link might otherwise have been placed.<sup><a href="https://htmhell.dev/26-tasty-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>2</a></sup></li>
<li>If you’re adding a click event to a placeholder link, you probably don’t want to use a placeholder link, but an actual link with an <code>href</code> attribute or a <code>&lt;button&gt;</code>, depending on what's happening on click.</li>
<li>Placeholder links aren't focusable.</li>
<li>There’s no text label.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers announce: probably nothing.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-6-the-wannabe-button-burger-link">Pattern 6: The wannabe button burger link</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menu<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>burger<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<ol>
<li>Do not change native semantics, unless you really have to.</li>
<li>If the <code>&lt;a&gt;</code> element has no <code>href</code> attribute, then the element represents a placeholder for where a link might otherwise have been placed.<sup><a href="https://htmhell.dev/26-tasty-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>2</a></sup></li>
<li>If you’re adding a click event to a placeholder link, you probably don’t want to use a placeholder link, but an actual link with an <code>href</code> attribute or a <code>&lt;button&gt;</code>, depending on what's happening on click.</li>
<li>Placeholder links aren't focusable.</li>
<li>Screen readers may announce: “menu, collapsed, button”</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-7-the-unsemantic-burger-with-extra-bacon">Pattern 7: The unsemantic burger with extra bacon</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mobile-nav<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Show nav</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-6">Issues and how to fix them</h3>
<ol>
<li>Pretty much the same as <a href="https://htmhell.dev/26-tasty-buttons/#pattern-1-the-unsemantic-burger">Pattern 1: The unsemantic burger</a> except that this button has a label which is good, but it also has <code>aria-hidden="true"</code> which means that it's completely inaccessible to screen reader users.</li>
<li>Screen readers announce: Nothing.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-8-the-javascript-link-burger-button">Pattern 8: The JavaScript link burger button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>toggle-link<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>javascript:<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>i</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>fa fa-reorder<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.fa-reorder::before</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">content</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">""</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-7">Issues and how to fix them</h3>
<ol>
<li>Screen readers may announce CSS generated content.<sup><a href="https://htmhell.dev/26-tasty-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>1</a></sup></li>
<li><a href="https://fontawesome.com/v4.7.0/accessibility/">Font Awesome advises to hide icons semantically</a> by settings <code>aria-hidden="true"</code> on the <code>&lt;i&gt;</code> element.</li>
<li>The <code>i</code> element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.<sup><a href="https://htmhell.dev/26-tasty-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>2</a></sup> If you just want italic text, use <code>font-style: italic;</code> in CSS.</li>
<li>There’s no text label.</li>
<li>If you’re not sure when to use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers announce: “link”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id='pattern-9-the-"i-have-no-idea-what-im-doing-lets-just-add-some-attributes"-burger-button'>Pattern 9: The “I have no idea what I'm doing, let's just add some attributes” burger button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mega-toggle-block<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">tabindex</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mega-toggle-label<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-8">Issues and how to fix them</h3>
<ol>
<li>The <code>&lt;div&gt;</code> element is an element of last resort, for when no other element is suitable. Use of the <code>&lt;div&gt;</code> element instead of more appropriate elements leads to poor accessibility. If you need a button, use the <code>&lt;button&gt;</code> element.</li>
<li>A click event on a <code>div</code> triggers only on click. A click event on a <code>button</code> triggers on click and if the user presses the <kbd>Enter</kbd> or <kbd>Space</kbd> key.</li>
<li>The <code>div</code> is focusable, but it has no <code>role</code> or label.</li>
<li>The <code>span</code> tries to mimic a <code>button</code>, but it's not focusable and it has no label.</li>
<li>You don’t need the <code>tabindex</code> attribute if you use a <code>button</code>. HTML buttons are focusable by default.</li>
<li>There’s no text label.</li>
<li>Screen readers may announce: “group”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-10-the-heavenly-anchor-link-burger-button">Pattern 10: The heavenly anchor link burger button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#menutoggle<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menutoggle<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>☰<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-9">Issues and how to fix them</h3>
<ol>
<li>A screen reader may announce this as <em>trigram for heaven</em>, because ☰ is the unicode character for the <a href="https://en.wikipedia.org/wiki/Bagua">trigram for heaven</a>.</li>
<li>The purpose of the icon is decorative, it should be hidden from screen readers. Consider adding decorative images using background properties in CSS.</li>
<li>An anchor link is not a <code>&lt;button&gt;</code>.</li>
<li>An anchor link should not refer to itself.</li>
<li>If you’re not sure when to use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers announce: “trigram for heaven, link”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-11-the-bento-checkbox-button">Pattern 11: The bento checkbox button</h2>

<p data-component="burger">
  
  <label for="burger"></label>
</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>bento<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>checkbox<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>bento<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>bento<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.bento label</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background-image</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token url"><span data-sanitized-class="token function">url</span><span data-sanitized-class="token punctuation">(</span>data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J00zIDNoNHY0SDN6bTE0IDBoNHY0aC00em0tNyAwaDR2NGgtNHptLTcgN2g0djRIM3ptMTQgMGg0djRoLTR6bS03IDBoNHY0aC00em0tNyA3aDR2NEgzem0xNCAwaDR2NGgtNHptLTcgMGg0djRoLTR6JyBmaWxsPScjQTdBQUIyJy8+PC9zdmc+<span data-sanitized-class="token punctuation">)</span></span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">width</span><span data-sanitized-class="token punctuation">:</span> 30px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 30px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">display</span><span data-sanitized-class="token punctuation">:</span> block<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.bento input</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">position</span><span data-sanitized-class="token punctuation">:</span> absolute<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">opacity</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">pointer-events</span><span data-sanitized-class="token punctuation">:</span> none<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">left</span><span data-sanitized-class="token punctuation">:</span> -9999px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">top</span><span data-sanitized-class="token punctuation">:</span> -9999px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-10">Issues and how to fix them</h3>
<ol>
<li>A checkbox is not a <code>&lt;button&gt;</code>.</li>
<li>The default key events on a checkbox and a button are not the same.</li>
<li>If you’re not sure when to use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>This “button” has no label.</li>
<li>Screen readers may announce: “unticked tickbox”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-12-the-bento-list-anchor-link-button">Pattern 12: The bento list anchor link button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>offcanvas-icon<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menu-button<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot1<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot3<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot4<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot5<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot6<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot7<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot8<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot9<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-11">Issues and how to fix them</h3>
<ol>
<li>Use <code>&lt;ul&gt;</code> to group and list related items, not as a button wrapper.</li>
<li>An anchor link is not a <code>&lt;button&gt;</code>.</li>
<li>CSS is quite powerful, you don't need 9 <code>span</code>s to display 9 dots.</li>
<li>If you’re not sure when to use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>This “button” has no label.</li>
<li>Screen readers may announce: “list 1 item”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-13-the-meatball-link">Pattern 13: The meatball link</h2>

<p><a href="https://example.com/" data-sanitized-class="meatball">• • •</a></p>
<p>(Note: There was a click event on the link that prevented default.)</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://example.com/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>• • •<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-12">Issues and how to fix them</h3>
<ol>
<li>A link is not a <code>&lt;button&gt;</code>.</li>
<li>The default key events on a link and a button are not the same.</li>
<li>If you’re not sure when to use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>This “button” has no label.</li>
<li>Screen readers may announce: “link, bullet bullet bullet”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-14-the-kebab-div-button">Pattern 14: The kebab div button</h2>

<p title="Menu" data-sanitized-class="kebab">
	<i></i>
	<i></i>
	<i></i>
</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menu<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">title</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Menu<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-13">Issues and how to fix them</h3>
<ol>
<li>Pretty much the same as <a href="https://htmhell.dev/26-tasty-buttons/#pattern-1-the-unsemantic-burger">Pattern 1: The unsemantic burger</a>.</li>
<li>The <code>i</code> element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.<sup><a href="https://htmhell.dev/26-tasty-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>2</a></sup> If you just want italic text, use <code>font-style: italic;</code> in CSS.</li>
<li>Screen readers may announce: nothing.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-15-the-hamburger">Pattern 15: The hamburger</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>nav__toggle-button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Hamburger Menu<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">xmlns</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>http://www.w3.org/2000/svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>24<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>24<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 24 24<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>M0 0h24v24H0z<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">fill</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>none<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>path</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">fill</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>currentColor<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>path</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-14">Issues and how to fix them</h3>
<ol>
<li>Not as bad as all the others, but the term “Hamburger” might confuse users.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers may announce: “button, Hamburger Menu”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-16-the-chatty-burger-button">Pattern 16: The chatty burger button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>All Company expand to see list of Company products and services<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-15">Issues and how to fix them</h3>
<ol>
<li>Not as bad as all the others, but the label is too long. Keep it short and simple.</li>
<li>Screen readers may announce: “button, All Company expand to see list of Company products and services, expanded”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="alternatives">Alternatives</h2>
<h3 data-sanitized-id="solution-1-a-button-with-visible-text-and-no-icon">Solution 1: A button with visible text and no icon.</h3>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Menu</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p><button aria-expanded="false" type="button">Menu</button></p>
<ol>
<li>Text only: easy to implement and comprehensible.</li>
<li>Screen readers may announce: Menu, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h3 data-sanitized-id="solution-2-a-button-with-visible-text-and-only-visually-accessible-icon">Solution 2: A button with visible text and only visually accessible icon.</h3>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> … <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Menu</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p><button aria-expanded="false" type="button"><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z" fill="currentColor"></path>Menu</button></p>
<ol>
<li>If you want to use an icon, hide it from screen readers by wrapping it in a <code>span</code> with <code>aria-hidden="true"</code>.</li>
<li>Screen readers may announce: Menu, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h3 data-sanitized-id="solution-3-a-button-with-hidden-text-and-only-visually-accessible-icon">Solution 3: A button with hidden text and only visually accessible icon.</h3>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Menu<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> … <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.sr-only</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">position</span><span data-sanitized-class="token punctuation">:</span> absolute<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">white-space</span><span data-sanitized-class="token punctuation">:</span> nowrap<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">width</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">overflow</span><span data-sanitized-class="token punctuation">:</span> hidden<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">border</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">padding</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">clip-path</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">inset</span><span data-sanitized-class="token punctuation">(</span>50%<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">margin</span><span data-sanitized-class="token punctuation">:</span> -1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p><button aria-expanded="false" type="button"><span data-sanitized-class="u-hidden">Menu</span><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z" fill="currentColor"></path></button></p>
<ol>
<li>Unfortunately, there’s no native way of hiding content only visually.<br>The <code>.sr-only</code> class makes sure that content is visually hidden but still accessible to screen reader users.</li>
<li>Screen readers may announce: Menu, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h3 data-sanitized-id="solution-4-a-button-with-accessible-text-and-only-visually-accessible-icon">Solution 4: A button with accessible text and only visually accessible icon.</h3>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Menu<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> … <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p><button aria-expanded="false" type="button" aria-label="Menu"><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z" fill="currentColor"></path></button></p>
<ol>
<li>If you don’t want to show text on screen, provide a text alternative for your icon or SVG by adding <code>aria-label</code> to the button.</li>
<li>Screen readers may announce: Menu, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ol>
<li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content</a></li>
<li><a href="https://html.spec.whatwg.org/#the-a-element">The a element</a></li>
<li><a href="https://www.scottohara.me/note/2019/07/17/placeholder-link.html">The accessibility of placeholder links </a></li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="wanna-learn-accessibility-testing?">Wanna learn accessibility testing?</h2>
<p>Are you interested in learning how to discover these accessibility issues and a lot more? Then join me for a <a href="https://smashingconf.com/online-workshops/workshops/manuel-matuzovic/">Smashing Magazine workshop</a> starting on November 4th.</p>
<p><strong>Deep Dive On Accessibility Testing</strong><br>
Workshop, 5×2.5h + Q&amp;A<br>
Thu &amp; Fri, November 4–18 202109:00 – 11:30 AM PT (Pacific, US) • 18:00 – 20:30 CET (Europe)</p>
<p>Use this link for a <a href="https://ti.to/smashingmagazine/online-workshops/discount/welcometomyworkshop">special -15% discount</a>.</p>
</div>


guid: https://htmhell.dev/tips/debugging-html-accessibility/
title: Debugging HTML: Accessibility
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/debugging-html-accessibility/
hash: v�Jv��*�� ��nO
attributes: {"enclosures":[]}
content:
<p>
  You can debug accessibility features of HTML elements using DevTools in Firefox, Chrome, and Edge.
</p>





<p>
  Let’s say your users report that they can’t access the burger button in your navigation using a keyboard or switch device, or they report that they’re confused by the label of the button when they use a screen reader. There are several ways of debugging that using DevTools.
</p>

<p>First, let’s summarize the requirements for a proper button:</p>

<ul>
  <li><strong>Label</strong>  - It has a visible text label or text alternative</li>
  <li><strong>Semantics</strong>  - It has a proper ARIA button role</li>
  <li><strong>Focus</strong> - You can access it using a keyboard by pressing Tab</li>
  <li><strong>Events</strong> - You can activate the button by clicking or pressing <kbd>Space</kbd> or <kbd>Enter</kbd></li>
</ul>

<h2>Chrome Dev Tools - Accessibility pane</h2>

<p>
  In Chrome or Edge open DevTools, click the Elements tab, select the element  you want to inspect and click the Accessibility tab. The accessibility pane shows you how the element is represented in the accessibility tree, which ARIA attributes it has, and its computed properties.
</p>

<p>
  If you inspect the following button in Chrome, here's what you’ll learn about it:
</p>

<h3>Button 1</h3>

<button aria-label="Navigation" data-sanitized-class="btn">
  
    <rect y="3" width="20" height="2"></rect>
    <rect y="9" width="20" height="2"></rect>
    <rect y="15" width="20" height="2"></rect>
  
</button>

<p>
  <a href="https://htmhell.dev/images/18_chrome1.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/18_chrome1.jpg" width="740" height="463" alt="The virtual keyboard on Android showing uppercase letters by default." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<ul>
  <li><strong>Label</strong>  - The button gets its label “Navigation” from the <code>aria-label</code> attribute (<code>Name: "Navigation"</code>)</li>
  <li><strong>Semantics</strong>  - It has a proper button role (<code>Role: button</code>)</li>
  <li><strong>Focus</strong> - It’s focusable (<code>Focusable: true</code>)</li>
</ul>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Navigation<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>btn<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 20 20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>3<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>9<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  Let’s look at another example. This button looks the same, but it's less accessible.
</p>

<h3>Button 2</h3>

<div type="button" data-sanitized-class="btn">
  
    <g>
      <rect y="3" width="20" height="2"></rect>
      <rect y="9" width="20" height="2"></rect>
      <rect y="15" width="20" height="2"></rect>
    </g>
  
</div>

<p>
  <a href="https://htmhell.dev/images/18_chrome2.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/18_chrome2.jpg" width="740" height="463" alt="The virtual keyboard on Android showing uppercase letters by default." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<ul>
  <li><strong>Label</strong>  - The button has no label (<code>Name: ""</code>)</li>
  <li><strong>Semantics</strong>  - Its role is “generic” which means that it doesn't have any semantic meaning (<code>Role: generic</code>)</li>
  <li><strong>Focus</strong> - It’s not focusable (Missing <code>Focusable</code> property)</li>
</ul>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>btn<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>hamburger<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 20 20<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>g</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>3<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>9<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>g</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<h2>Firefox Dev Tools - Accessibility panel</h2>

<p>
  In Firefox, right-click the button and select “Inspect accessibility properties” or open DevTools and click the “Accessibility” tab and find the button in the accessibility tree.
</p>

<h3>Button 1</h3>

<button aria-label="Navigation" data-sanitized-class="btn">
  
    <rect y="3" width="20" height="2"></rect>
    <rect y="9" width="20" height="2"></rect>
    <rect y="15" width="20" height="2"></rect>
  
</button>

<p>
  <a href="https://htmhell.dev/images/18_Firefox1.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/18_Firefox1.jpg" width="740" height="463" alt="The virtual keyboard on Android showing uppercase letters by default." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<ul>
  <li><strong>Label</strong>  - The label of the button is “Navigation” (<code>Name: "Navigation"</code>)</li>
  <li><strong>Semantics</strong>  - It has a proper pushbutton role (<code>Role: "pushbutton"</code>)</li>
  <li><strong>Focus</strong> - It’s focusable (the implicit tabindex is 1)</li>
</ul>

<p>
  Note 1: Firefox uses a different accessibility API, that’s why the names of roles aren’t the same as in Chrome. <code>pushbutton</code> corresponds to the ARIA role <code>button</code>.
</p>

<p>
  Note 2: You can check if an element is focusable by ticking the “Show Tabbing Order” checkbox. If there’s an outline on the element with a numbered arrow pointing to it, it means that it’s focusable. The number represents the tabindex.
</p>

<h3>Button 2</h3>

<div type="button" data-sanitized-class="btn">
  
    <g>
      <rect y="3" width="20" height="2"></rect>
      <rect y="9" width="20" height="2"></rect>
      <rect y="15" width="20" height="2"></rect>
    </g>
  
</div>

<p>
  <a href="https://htmhell.dev/images/18_Firefox2.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/18_Firefox2.jpg" width="740" height="463" alt="The virtual keyboard on Android showing uppercase letters by default." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<ul>
  <li><strong>Label</strong>  - The button has no label  (<code>Name: null</code>)</li>
  <li><strong>Semantics</strong>  -  Its role is “section” which means that it doesn't have any semantic meaning  (<code>Role: "section"</code>)</li>
  <li><strong>Focus</strong> - It’s not focusable (No outline and number when pressing “Show Tabbing Order”)</li>

</ul>


<p>
  Note: Just like <code>generic</code> in Chrome, <code>section</code> in Firefox corresponds no ARIA role.
</p>


guid: https://htmhell.dev/27-a6/
title: #27 &lt;a6&gt;
author: ;Manuel Matuzovic
link: https://htmhell.dev/27-a6/
hash: �e�o�� & ������
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section">
Context: Visually a list of links.
</div>
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span>Popular Cities<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footerLinks<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Amsterdam<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footerLinks<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Rotterdam<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footerLinks<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Utrecht<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footerLinks<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Den Haag<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footerLinks<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Eindhoven<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ol>
<li>Use headings (<code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code>) to structure the page, don’t use heading elements arbitrarily or only to comply with visual requirements.</li>
<li>By default, a click event on an <code>&lt;h6&gt;</code> triggers only on click. A click event on an <code>a</code> triggers on click and if the user presses the <kbd>Enter</kbd> key.</li>
<li>An <code>&lt;h6&gt;</code> isn’t keyboard focusable.</li>
<li>If your content it so comprehensive and deeply structured that you need levels as deep as <code>&lt;h5&gt;</code> and <code>&lt;h6&gt;</code> in order to describe the structure, consider splitting your large page into multiple smaller pages.</li>
<li>The <code>&lt;div&gt;</code> element is an element of last resort, for when no other element is suitable. Use of the <code>&lt;div&gt;</code> element instead of more appropriate elements leads to poor accessibility.</li>
<li>If you’re listing items that thematically belong together, consider grouping them semantically using <code>&lt;ol&gt;</code> or <code>&lt;ul&gt;</code>.</li>
<li><code>&lt;a&gt;</code> allows users to right click and copy link / open in new tab.</li>
<li>Linking to pages using the <code>&lt;a&gt;</code> element works without JavaScript.</li>
<li>An <code>&lt;a&gt;</code> has the right cursor without having to add CSS.</li>
</ol>
<p>Check out the <a href="https://htmhell.dev/27-a6/#resources">resources section</a> at the bottom of this page for more.</p>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span>Popular Cities<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/amsterdam.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Amsterdam<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/rotterdam.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Rotterdam<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/utrecht.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Utrecht<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/denhaag.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Den Haag<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/eindhoven.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Eindhoven<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://www.youtube.com/watch?v=YG9WQUfH7ZU">Hidde de Vries - Semantics and How to Get Them Right - beyond tellerrand Düsseldorf 2021</a></li>
</ul>
</div>


guid: https://htmhell.dev/tips/debugging-html-linting/
title: Debugging HTML: Linting
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/debugging-html-linting/
hash: {:"^.KH����`�
attributes: {"enclosures":[]}
content:
<p>
  Edge highlights potential issues in your document directly in the elements panel of DevTools and it lists details and further issues in the issues panel.
</p>



<p>
  One of my favourite features in Edge DevTools is the built-in linter that highlights potential issues in your HTML by marking affected elements with a squiggly yellow line. 
</p>

<p>
  <a href="https://htmhell.dev/images/19_edge_elements.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/19_edge_elements.jpg" width="740" height="463" alt="Edge dev tools screenshot: A demo site with broken html like empty buttons, img without alt, wrong aria roles, missing aria roles, and aria-hidden on focusable elements." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<p>
  If you hover over the opening tag, a tooltip with a description of the issue appears. You can <kbd>Shift</kbd> + click or right-click it and select “View Issues” to view details about the issue or you can open the issues panel directly (<kbd>CMD</kbd>/<kbd>Ctrl</kbd> + <kbd>Shit</kbd> + <kbd>P</kbd> -&gt; Show Issues) to get a list of all issues found on the page. The data is coming from <a href="https://www.deque.com/axe/">axe</a>, <a href="https://github.com/mdn/browser-compat-data">@mdn/browser-compat-data</a>, and <a href="https://webhint.io/">webhint</a>.</p> 
  <p>You can also jump from the issues panel directly to the affected element in the elements or sources panel, and there are links to learning resources.</p>
<p></p>

<p>
  <a href="https://htmhell.dev/images/19_edge_elements2.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/19_edge_elements2.jpg" width="740" height="463" alt="A list of accessiblity issues in the issues panel. The message '&lt;ul&gt; and &lt;ol&gt; must only directly contain &lt;li&gt;, &lt;script&gt; or &lt;template&gt; elements' expanded." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<p>
  To learn more about this feature, check out the links in the resources section of this page.
</p>


guid: yt:video:81txe0KgILI
title: Zoom meeting 2021 11 20 Update 1 on Part 2 of book
author: ;Anton Chaitkin
link: https://www.youtube.com/watch?v=81txe0KgILI
hash: �쉢�5��D_H P�.e
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/81txe0KgILI?version=3","title":"Zoom meeting 2021 11 20 Update 1 on Part 2 of book","description":"for more information: https://whowearebook.com\n\nOn Nov. 20, 2021, Tony Chaitkiin addressed a group of friends and supporters via Zoom.  He presented a picture of the work he's been doing in American History. This is part of his ongoing work to publish Volume 2 of &quot;Who We Are: America's Fight for Universal Progress&quot;.  \n\nVolume 1 left off in the 1850s as the Philadelphia-based group of idealistic nation-builders were striving to industrialize America.  Meanwhile, the storm clouds of treason and secession were gathering.\n\nVolume 2 starts with the provocative question, why is Abraham Lincoln unknown today?\n\nThough Lincoln is revered, most people today are ignorant of his lifelong political philosophy,  and are unaware of how the fight for these principles gave mankind the chance for a brilliant future. Sadly, teachers and historians who conform their thinking to prevailing ideology bury their natural curiosity and simply omit any reference to views such as Lincoln’s.\n\nWho We Are, Volume 2,  will follow the world contest of Lincoln and his allies versus the imperial system of slavery and permanent war. This will be a new look behind the scenes at the core American leadership that built the railroads, brought about the new age of electricity, and made universal human progress the law of nations.\n\nA lively Q&amp;A session follows the initial presentation.","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i1.ytimg.com/vi/81txe0KgILI/hqdefault.jpg"]}]}


guid: https://htmhell.dev/28-alert-level-1/
title: #28 alert level 1
author: ;Manuel Matuzovic
link: https://htmhell.dev/28-alert-level-1/
hash: q � +�J�Y2*O�$=
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span> <span data-sanitized-class="token attr-name">aria-busy</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-live</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>polite<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alert<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Done</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ul>
<li>The element is used for communicating status updates, not to structure the page. A <code>div</code> with a <code>role</code> of <code>status</code> or <code>alert</code> is more suitable than a <code>h1</code>.</li>
<li>The heading is semantically not a <code>heading</code> anymore, but an <code>alert</code> container. This can be confusing, NVDA, for example, announces “alert busy Done level 1”. Do not change native semantics, unless you really have to.</li>
<li><code>aria-live="polite"</code> turns the element explicitly into a <em>polite</em> live region. This behavior is overwritten by <code>role="alert"</code> which turns it implicitly into an <em>assertive</em> live region.</li>
<li>For frequent updates it might be better to use a polite (<code>role="status"</code>) and a not an assertive (<code>role="alert"</code>) live region.</li>
<li><code>aria-busy</code> indicates whether an element, and its subtree, are currently being updated. The text of the live region “Done” indicates that all the necessary updates have finished. If that's the case, <code>aria-busy</code> should be removed or set to <code>false</code>.</li>
<li>“Done” might not be descriptive enough, consider a brief but more informative status message, something like “Changes saved” or “Product added to cart”.</li>
<li>The heading/live region is visually hidden. Consider showing it because everyone might benefit from the information.</li>
</ul>
<p>Check out the <a href="https://htmhell.dev/28-alert-level-1/#resources">resources section</a> at the bottom of this page for more.</p>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>status<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   Changes saved.</span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA live regions (MDN)</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy">aria-busy (MDN)</a></li>
<li><a href="https://www.w3.org/TR/wai-aria/#aria-busy">aria-busy (WAI-ARIA 1.1 spec)</a></li>
<li><a href="https://www.w3.org/TR/wai-aria/#aria-live">aria-live (WAI-ARIA 1.1 spec)</a></li>
<li><a href="https://dequeuniversity.com/library/aria/liveregion-playground">Live Region Playground</a></li>
</ul>
</div>


guid: https://htmhell.dev/29-randomly-grouping-content/
title: #29 Randomly grouping content
author: ;Manuel Matuzovic
link: https://htmhell.dev/29-randomly-grouping-content/
hash: �B�X���j��8e��%�
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>aside</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">            <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>logo.svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Logo<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/services<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Services<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/products<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Products<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/aboutus<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Aboutus<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>aside</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>Welcome to Hell<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ul>
<li>Use the <code>&lt;section&gt;</code> element only to mark up a grouping of related content, typically introduced with a heading. Learn more about sections in <a href="https://htmhell.dev/tips/the-section-element/">Issue #8 - the section element</a>.</li>
<li>Use the <code>&lt;aside&gt;</code> element only for content that is tangentially related to the main content and not for important parts of the page or site.</li>
<li>Use the <code>&lt;nav&gt;</code> elements for important navigational groupings of links. Learn more about landmarks in <a href="https://htmhell.dev/tips/landmarks/">Issue #16 - Landmarks</a>.</li>
<li>If a link contains an image and no text, the <code>alt</code> attribute of the image serves as the link text. In such a case it might make sense to use the attribute not to describe the image, but the functionality of the link.</li>
<li>You can structure the links in a <code>&lt;nav&gt;</code> by wrapping them in an <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code>. Learn more about lists in <a href="https://htmhell.dev/tips/ol-vs-ul-vs-div/">Issue #13 - ol vs. ul vs. div</a></li>
<li>Try to avoid empty elements.</li>
<li>A document must not have more than one <code>&lt;main&gt;</code> element that does not have the <code>hidden</code> attribute specified. Having more than one visible <code>&lt;main&gt;</code> element can confuse users because screen readers don’t announce the number of <code>&lt;main&gt;</code> elements.</li>
<li>The <code>&lt;main&gt;</code> element must not appear as a descendant of the <code>&lt;section&gt;</code> or <code>&lt;aside&gt;</code> element.</li>
<li>A page or sectioning content like <code>&lt;article&gt;</code> or <code>&lt;section&gt;</code> should only contain a single <code>&lt;footer&gt;</code>.</li>
</ul>
<p>Check out the <a href="https://htmhell.dev/29-randomly-grouping-content/#resources">resources section</a> at the bottom of this page for more.</p>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>logo.svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Homepage<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">         <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/services<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Services<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">         <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/products<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Products<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">         <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/aboutus<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Aboutus<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>Welcome to Hell<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://adrianroselli.com/2015/09/use-only-one-main-on-a-page.html">Use Only One main on a Page</a></li>
<li><a href="https://www.scottohara.me/blog/2021/07/16/section.html">Accessibility of the section element</a></li>
</ul>
</div>


guid: https://htmhell.dev/30-bullet-list/
title: #30 Bullet “list”
author: ;Manuel Matuzovic
link: https://htmhell.dev/30-bullet-list/
hash: q���)|�X��R K�
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  • HTML</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>br</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  • CSS</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>br</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  • JavaScript</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ol>
<li>Use <code>&lt;p&gt;</code> for paragraphs, not lists. The standard way for creating basic lists is <code>&lt;ul&gt;</code> (when the order doesn't matter) or <code>&lt;ol&gt;</code> (when the order matters), and <code>&lt;li&gt;</code> for each item.</li>
<li>The “list” won't be announced as a list when using a screen reader.</li>
<li><code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> provide <a href="https://htmhell.dev/tips/ol-vs-ul-vs-div/">useful semantic information</a>. What and how assistive technology announces information differs, but:
<ol>
<li>screen readers might announce it as a “list with items”</li>
<li>screen readers might announce the number of items in the list, e.g. “list with 3 items”</li>
<li>screen readers might announce the bullet or number of each item</li>
<li>screen readers might announce when you enter or leave a list</li>
</ol>
</li>
<li>Screen reader users may use shortcuts to jump from list to list on a page</li>
<li><code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> provide a selector for styling in CSS</li>
<li>When copying the fake list, all the bullets will go along with it</li>
<li>You can turn the bullet into a fire emoji using <code>::marker</code> 🔥</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>CSS<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>JavaScript<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>


guid: https://christitus.com/robocopy/
title: Robocopy - Copying files the right way in Windows
link: https://christitus.com/robocopy/
hash: ''[䷙<�����7�
attributes: {"enclosures":[]}
content:
<p>This guide shows how to copy files in windows when dealing with large volumes of files and very long file paths past 255 characters.</p>
<h2 data-sanitized-id="what-is-robocopy-and-why-use-it">What is Robocopy and Why use it?</h2>
<p>Robocopy is a build in command line program that is fantastic at copying files quickly and bypasses many of the downsides of the standard copy process of windows.</p>
<p>The downsides of Window’s standard file copy are:</p>
<ul>
<li>Has to read ALL files being copied BEFORE it will copy the first file</li>
<li>Artificial character limit of 255 that includes the filename and filepath.</li>
<li>GUI limitations for LARGE amounts of files.</li>
</ul>
<h2 data-sanitized-id="how-to-use-robocopy">How to use Robocopy</h2>
<p>Launch into the Command Prompt or Powershell by right-clicking Start Menu</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/01-Robocopy/start-menu.webp" alt="start-menu" data-sanitized-class="img-fluid"> </p>
<p>From this interface you can now run Robocopy.</p>
<p>Basic Syntax:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">C:\&gt; robocopy "Source Directory" "Destination Directory" /e /w:5 /r:2 /COPY:DATSOU /DCOPY:DAT /MT
</span></span></code></pre></div><p>Full syntax can be shown with <code>robocopy /?</code> but be careful with /MIR and move style copies as this can overwrite and erase existing files in the destination directory.</p>
<p>Notable Options with Robocopy</p>
<ul>
<li>/e - Copy all folders including empty ones</li>
<li>/r - Retry times /r:0 means no retry on failed copy</li>
<li>/w - Wait time /w:0 means no wait between retry on failed copy</li>
<li>/COPYALL OR /COPY:DATSOU - Copy Data, Attributes, Timestamps, Security, Owner, and Auditing Info for files</li>
<li>/DCOPY:DAT - Copy Data,Attributes and Timestamps for Directories (Other Options are E=EAs-Extended Attributes, X=Skip alt data streams, but are almost never used)</li>
<li>/MT:n - Multithread transfer with n threads. Example /MT:4 - Use 4 threads to copy files. If no threads set, it will default to 8.</li>
<li>/MIR - Mirror Source to Destination - WARNING: WILL DELETE ANY FILES THAT DO NOT MATCH IN DESTINATION!</li>
<li>/MOVE - Moves from Source to Destination - WARNING: WILL DELETE ALL FILES FROM SOURCE AFTER COPY!</li>
<li>/LFSM:100M - Operate in Low Free Space Mode with 100 Megabytes. 10M = 10 Megabytes 1G = 1 Gigabyte</li>
<li>/B - Backup Mode - Great for system backups if you are part of Administrator or Backup Users group - NOT RECOMMENDED - Use 3rd party backup software</li>
<li>/ZB - Restartable Backup Mode - Tries to copy files with restartable and if it fails it restarts in backup mode - NOT RECOMMENDED - Use 3rd party backup software</li>
<li>/RH:1700-0900 - Scheduled run between 5PM and 9AM and will pause if it is during “business hours of 9AM-5PM”</li>
<li>/LOG+:C:\robocopy.log - Outputs everything to C:\robocopy.log (Note: if NOT running as admin you need to put this in your user folder C:\Users\username\robocopy.log) the + adds to the file.</li>
<li>/TEE - If using LOG and you also want console output, put the /TEE option in.</li>
</ul>
<p>I don’t recommend using backup, restartable mode, or jobs. Jobs typically miss options and 3rd party solution like veeam are FAR better for backups than robocopy EVER will be.</p>
<h3 data-sanitized-id="walkthrough-video">Walkthrough Video</h3>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/0q3rGK_IMZg?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: yt:video:IPgkQImBalQ
title: How to Avoid WWIII - Anton Chaitkin. An appeal and a challenge to the American people
author: ;Anton Chaitkin
link: https://www.youtube.com/watch?v=IPgkQImBalQ
hash: ����Q�;�ƒ|��:[
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/IPgkQImBalQ?version=3","title":"How to Avoid WWIII - Anton Chaitkin. An appeal and a challenge to the American people","description":"For more information: https://WhoWeAreBook.com\n\nOn March 1, 2022, Edward Lozansky, president of the American University in Moscow, and President of the World Russia Forum in Washington, DC, hosted a seminar on the ongoing war in Ukraine.\n\nAnton Chaitkin, author of &quot;Who We Are, America's Fight for Universal Progress,&quot; gave a presentation as part of the forum that was an appeal to the American People and a challenge to peace activists to change the dynamic that led to this disastrous war.","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i2.ytimg.com/vi/IPgkQImBalQ/hqdefault.jpg"]}]}


guid: https://htmhell.dev/31-additional-assistance/
title: #31 additional “assistance”
author: ;Manuel Matuzovic
link: https://htmhell.dev/31-additional-assistance/
hash: 0�}n4K�qxi!��C�
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/contact<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>If you find that you need additional <br><span data-sanitized-class="highlight-line">assistance in navigating or accessing the content of this website, </span><br><span data-sanitized-class="highlight-line">please call our customer service toll free number 1-800-666-8654309<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">title</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>If</span><br><span data-sanitized-class="highlight-line">you find that you need additional assistance in navigating or accessing </span><br><span data-sanitized-class="highlight-line">the content of this website, please call our customer service </span><br>toll free number 1-800-666-8654309<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><br><span data-sanitized-class="highlight-line">   Contact</span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/login<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">title</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   Login</span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ol>
<li><code>aria-label</code>, <code>aria-labelledby</code>, etc. must not be misused for dumping contact information or other unrelated content.</li>
<li>Text in a link must describe the purpose or the target of the link.</li>
<li>The visible label of an element should match the accessible name.</li>
<li>Information concerning accessibility should be on a dedicated page (e.g. an <a href="https://www.w3.org/WAI/planning/statements/">accessibility statement</a>) and/or the contact page.</li>
<li>The <code>title</code> attribute shouldn't be used for important contact information due to inconsistent browser support and lack of accessibility.</li>
<li>Redundant link text should be avoided.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/contact<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Contact</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/login<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Login</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">The Trials and Tribulations of the Title Attribute</a></li>
</ul>
</div>


guid: https://christitus.com/obsidian/
title: My Obsidian Setup
link: https://christitus.com/obsidian/
hash: c��Ԣ��ŉ�K>�
attributes: {"enclosures":[]}
content:
<p>Notes are vital to our productivity but often people either take too many notes or none at all. I sought to fix this by using a simplistic approach in the Obsidian app. I’ve tried notion and a variety of other offerings that always fell flat. Let me show you how I set this app for maximum productivity.</p>
<h2 data-sanitized-id="install-plugins">Install Plugins</h2>
<p>Open Obsidian Settings
<img loading="lazy" src="https://christitus.com/images/2022/04-obsidian/plugins.webp" alt="settings" data-sanitized-class="img-fluid"> </p>
<ul>
<li>Template (Core)</li>
<li>Kanban</li>
<li>Dataview (Progress Bar)</li>
<li>Homepage</li>
</ul>
<h2 data-sanitized-id="template-core-plugin">Template Core Plugin</h2>
<ul>
<li>Make Template folder in file view</li>
<li>Set Template Folder under Template in Obsidian settings</li>
</ul>
<h2 data-sanitized-id="kanban-plugin">Kanban Plugin</h2>
<p><img loading="lazy" src="https://christitus.com/images/2022/04-obsidian/kanban-settings.webp" alt="kanban settings" data-sanitized-class="img-fluid"> </p>
<p><code>Click on settings cog for your board</code></p>
<p><em>NOT the settings for the obsidian program</em></p>
<p><strong>Set your default template, Note folder to put new files in, and lane width.</strong></p>
<p><img loading="lazy" src="https://christitus.com/images/2022/04-obsidian/kanban-settings2.webp" alt="kanban settings2" data-sanitized-class="img-fluid"> </p>
<p><em>Note: I recommend leaving 270 width for 1080p screens</em></p>
<h2 data-sanitized-id="homepage-plugin">Homepage Plugin</h2>
<p>Adds Home button and just makes it easy to always get back to your kanban to-do page. The homepage button my default will close all open notes and open the to-do or what ever note you specify. Here are my settings:</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/04-obsidian/homepage.webp" alt="homepage plugin" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="dataview-plugin">Dataview Plugin</h2>
<p>This is for progress bar, or if you want to do filters, tags, yaml headers, and other sorting techniques. It does WAY more than I use it for at the moment. Since I’m limiting my notes to maybe 10-20 notes I don’t need the other stuff, but it is there incase I expand. For now, I will use the following code in my templates to add a progress bar that tracks any checkboxes and how many are checked compared to total.</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">`="![progress](https://progress-bar.dev/" + round(length(filter(this.file.tasks.completed, (t) =&gt; t = true)) / length(this.file.tasks.text) * 100) + "/)"`
</span></span></code></pre></div><h3 data-sanitized-id="walkthrough-video">Walkthrough Video</h3>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/zGCv6aDDfP8?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://thechainedmuse.substack.com/p/escaping-the-brave-new-world-0ce
title: Escaping the Brave New World
author: ;David Gosselin
link: https://thechainedmuse.substack.com/p/escaping-the-brave-new-world-0ce
hash: ĽE�,,z��`���
content:
<p>Watch with video <a href="https://youtu.be/smVvJzijAek">here</a>.</p><p>How did western civilization lose its connections to the historic moral and philosophical traditions that imbued it with a love of progress, respect for the past, and sacrifice for the future for centuries?</p><p>In this discussion between poet and host of <em>Escaping the Brave New World,</em> David Gosselin, and <em>RTF</em> director, Matthew Ehret, this question is unpacked from a variety of angles.</p><p>This episode deals with the rise of social engineering during the 20th century with a focus on London’s Tavistock Clinic, MK Ultra, CIA cultural warfare in the post-war age under the Congress for Cultural Freedom and much more. We explore the roots of epistemological warfare stretching back to the days of ancient Athens to our present age, and the post-WWII techniques deployed in the form of the Frankfurt School, political correctness, and the “authoritarian personality project” which aimed to proclaim that individual genius, moral leadership or love of truth were merely forms of fascism that must be destroyed by new forms of “group think” and “popular opinion” in order for free capitalist democracy to win the Cold War.</p><p><br><br>Thank you for subscribing. <a href="https://davidgosselin.substack.com/p/escaping-the-brave-new-world/comments?token=eyJ1c2VyX2lkIjoyNDcyNDM1NCwicG9zdF9pZCI6NTI4OTM1NzcsImlhdCI6MTY5OTUwMDYyNSwiZXhwIjoxNjk5NzU5ODI1LCJpc3MiOiJwdWItNDQwMjc3Iiwic3ViIjoicG9zdC1jb21tZW50cyJ9.h3FUHBVHhLhBI6_tbWUjYRQbTQBbbZ1PBWYQxXk_hf0&amp;r=epxfm&amp;utm_medium=podcast&amp;utm_campaign=CTA_5">Leave a comment</a> or <a href="https://davidgosselin.substack.com/p/escaping-the-brave-new-world?utm_source=substack&amp;utm_medium=podcast&amp;utm_content=share&amp;action=share&amp;token=eyJ1c2VyX2lkIjoyNDcyNDM1NCwicG9zdF9pZCI6NTI4OTM1NzcsImlhdCI6MTY5OTUwMDYyNSwiZXhwIjoxNzAyMDkyNjI1LCJpc3MiOiJwdWItNDQwMjc3Iiwic3ViIjoicG9zdC1yZWFjdGlvbiJ9.FSiBupdOaFev63oMQSFmp789yW1b_YVL7fFT2OCBz6s&amp;utm_campaign=CTA_5">share this episode</a>.</p>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/138718678/990bcf08126d308d3496c9aa88ffe111.mp3","type":"audio/mpeg","length":0}]}


guid: https://christitus.com/windows-tool/
title: The Ultimate Windows Utility
link: https://christitus.com/windows-tool/
hash: � 4'��k���l���
attributes: {"enclosures":[]}
content:
<p>This is a tool that has evolved over several years and achieves much more than just debloating a Windows install. I have expanded it to install the programs you select, which is a bigger selection than ninite. The classic debloat is there, but also includes a tweaks section with quality of life features. To round out everything, I have included my recommended settings for Windows update that I use in a variety of businesses. Misuse of this utility can break your install so please be careful and I do not provide any help or assistance should this happen!</p>
<h2 data-sanitized-id="one-command---download-and-usage">One Command - Download and Usage</h2>
<p>From an Elevated (Run as Administrator) PowerShell prompt</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">iwr -useb https://christitus.com/win | iex
</span></span></code></pre></div><h2 data-sanitized-id="parts-of-utility">Parts of Utility</h2>
<p>There are four main parts of this utility but I can expand this to an infinite number of tabs if expansion is needed and will probably happen in the future. As of the writing of this article there is 4 main parts: install, debloat, features and old panels, and windows updates. Let me breakdown what each part does and what you should use.</p>
<h3 data-sanitized-id="install">Install</h3>
<p><img loading="lazy" src="https://christitus.com/images/2022/winutil/screen-install.webp" alt="install" data-sanitized-class="img-fluid"> </p>
<p>The install is basically a better version of ninite that many people use. It leverages Microsoft’s winget utility to not only install tons of software that you select with a check-mark, but also gives you the ability to upgrade all the software quickly. By using this utility you will save hours on the install, but also make it very easy to keep all your programs up to date.</p>
<h3 data-sanitized-id="debloat">Debloat</h3>
<p><img loading="lazy" src="https://christitus.com/images/2022/winutil/screen-debloat.webp" alt="debloat" data-sanitized-class="img-fluid"> </p>
<p>Debloating windows is always a moving target and there are many utilities out there. Many of them are too heavy handed in my opinion. This takes a more minimal approach that should not damage your Windows install. At the top there are three buttons Desktop, Laptop, and Minimal. These are curated selections based on my recommendations</p>
<p><strong>Desktop</strong> - This is for Desktops <em>DUH</em>, but it will disable features like power throttling and many services will be set to not auto start. This will give your desktop the best performance without any downside.</p>
<p><strong>Laptop</strong> - This one is just like desktop but doesn’t mess with power settings as we don’t want to kill our laptops battery.</p>
<p><strong>Minimal</strong> - This one will just do the absolute basic privacy / security settings. Very minor optimizations will also be made.</p>
<p>I must warn you to NOT use all the settings at once, or simple remove everything from the MS Store. Many times this will debloat the install but will BREAK the MS Store or uninstall any games / apps that were installed using it. This is why this option is never selected, but I left it there for those that really want to remove it. I personally do NOT recommend this, but I understand those that want to remove it</p>
<p>Note: This part of the utility can break an install if used carelessly, but it does make a restore point so if you have a lot problems with it, you can use System Restore to rollback the changes or the Undo All option. THIS IS SOFTWARE IS PROVIDE WITHOUT ANY WARRANTY AND I AM NOT RESPONSIBLE FOR ANY MISUSE.</p>
<h3 data-sanitized-id="features-and-legacy-win-panels">Features and Legacy Win Panels</h3>
<p><img loading="lazy" src="https://christitus.com/images/2022/winutil/screen-features.webp" alt="features" data-sanitized-class="img-fluid"> </p>
<p>This tab makes it easier to enable built-in features that are off by default. Many new installs need these and I wanted to make it easier than going through and manually installing them one by one.</p>
<p>There is also the old school legacy panels that I use on a daily basis. I still find these to be more efficient than the new panels that Microsoft has put in Windows 10 and 11.</p>
<h3 data-sanitized-id="windows-updates">Windows Updates</h3>
<p><img loading="lazy" src="https://christitus.com/images/2022/winutil/screen-updates.webp" alt="updates" data-sanitized-class="img-fluid"> </p>
<p>Windows updates set to defaults are crazy. They install and download at weird times and often update far too much. I give 2 options my recommended one that only installs security updates and allowing features updates after they have been proven over 1 year.</p>
<p>However, there is a disable all button. I do NOT recommend doing this, but is there for people that have specific software that they don’t update and don’t want their windows install changing at all. This is NOT secure, but often more stable and why you’d want to do something like this.</p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/tPRv-ATUBe4?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/future-internet/
title: Future Internet
link: https://christitus.com/future-internet/
hash: ǳcU��^����r
attributes: {"enclosures":[]}
content:
<p>Renewing website domains, paying for web hosting, and having them expire are all going to be a thing of the past.
Using IPFS (Inter-planetary File System) is a way to store websites decentralized and without any money. How fast or how slow it will be, is determined by how popular it is with IPFS nodes.
This guide shows how to host a website, owning a web domain forever, and redirecting these domains to traditional website hosts.</p>
<h2 data-sanitized-id="ipfs---a-better-storage-system">IPFS - A Better Storage System</h2>
<p>IPFS is absolutely amazing as you can run a node on anything and share your files. If they are used by other people then they will populate to their nodes and I’ve shared and used video files over 1 GB in size! The main issue is there isn’t many browsers that support IPFS and it is slower than normal storage right now. However, you never have to worry about hosting costs and as long as the content is accessed by others on a regular basis it will live forever!</p>
<h3 data-sanitized-id="improving-ipfs-in-brave-browser">Improving IPFS in Brave Browser</h3>
<p>I highly recommend using IPFS Companion if you plan on doing this regularly. You don’t have to run your own node, but can that is up to you. Using this add-on will help resolve IPFS addresses much faster even in Gateway only mode.</p>
<p>Enable IPFS Companion Extension</p>
<ul>
<li><a href="https://docs.ipfs.io/install/ipfs-companion/">https://docs.ipfs.io/install/ipfs-companion/</a></li>
</ul>
<p>After installing IPFS Companion change the following brave settings under Settings -&gt; IPFS</p>
<ul>
<li>Enable IPFS Public Gateway Fallback (Not Required, but recommended)</li>
<li>Enable IPFS Companion
<img loading="lazy" src="https://christitus.com/images/2022/future-internet/ipfs-settings.webp" alt="ipfs-settings" data-sanitized-class="img-fluid"> </li>
</ul>
<p>Enable Blockchain domains - The Unstoppable Domains extension (In the future, this should be baked into many browsers. Brave natively supports .crypto)</p>
<ul>
<li><a href="https://unstoppabledomains.com/extension">https://unstoppabledomains.com/extension</a></li>
</ul>
<h2 data-sanitized-id="blockchains---not-all-created-equal">Blockchains - Not all created equal</h2>
<p>The technology powering blockchains are amazing, but most just care about the monetary gain. I’m more interested in actually using the blockchain and where all the meta data lives for decentralized web or Web3. So what blockchains have I used for this? Lets review:</p>
<ul>
<li>Ethereum was one of the original ones that is incredible slow and expensive. I feel like this has turned from a usable blockchain into something only millionaires can use. Maybe this will change in the future, but right now it isn’t usable because of the cost to submit transactions. ENS Domains uses ethereum.</li>
<li>Polygon is a bridge blockchain that drastically improves upon what ethereum started. Fees are non-existent and is very functional. Transfer times are generally about a minute. This is currently what unstoppable domains uses.</li>
<li>Solana is not something I recommend, but is considered the fastest blockchain out there. However, It has crashed multiple times and halted completely. I am also skeptical that is even decentralized with the problems it has had. It is very easy to work on and something to watch.</li>
<li>Cardano is probably my favorite out of all these blockchains for the future. It is very decentralized, transactions can be as fast as 20 seconds and up to a couple minutes. Its roadmap is probably the most promising blockchain with future transactions hitting upwards of 10,000+ transactions per second in a decentralized format. Another possible chain that can be used in the future.</li>
</ul>
<h2 data-sanitized-id="buying-websites-forever">Buying Websites Forever</h2>
<p>Currently ens domains requires renewing websites, while unstoppable domains provides them forever. This entire space is exploding, so getting a good name is becoming more and more difficult just like the traditional web. There is a very healthy resale market on Opensea.io that folks are using to squat or resell domains purchased through unstoppable domains. If adoption keeps moving this direction, we will soon see some pretty ridiculous prices on domain names. Buying direct from unstoppable domains ranges from $10 to $100 per domain name, depending on domain ending.
<img loading="lazy" src="https://christitus.com/images/2022/future-internet/domains.webp" alt="domains" data-sanitized-class="img-fluid"> </p>
<p>Here is discount link for unstoppable if you are interested in picking up a domain: <a href="https://unstoppabledomains.pxf.io/MX3zVM">https://unstoppabledomains.pxf.io/MX3zVM</a></p>
<h2 data-sanitized-id="uploading-static-sites">Uploading Static Sites</h2>
<p>Hosting your website through unstoppable domains is pretty easy, but just know you are limited on size if using their uploader. They have a 20 MB Limit!</p>
<p>So for large static sites, simply put them all on a IPFS node local or remote and copy the IPFS hash into unstoppable domains to host ANY size of website.</p>
<p>I personally build my entire static site using hugo because its free / open source. You can then simply upload to IPFS the entire /public folder once you do this. If you are going to go this route, I’d recommend hosting an IPFS node so you can avoid the upload process entirely!</p>
<h2 data-sanitized-id="redirect-to-traditional-website">Redirect to Traditional Website</h2>
<p>The simplist way to do this is with a meta redirect using a standard index.html (PLAIN TEXT ONLY!)</p>
<p>index.html</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">&lt;!DOCTYPE html&gt;
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">&lt;html&gt;
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> &lt;head&gt;
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> &lt;title&gt;HTML Meta Tag&lt;/title&gt;
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> &lt;meta http-equiv = "refresh" content = "1; url = YOUR WEBSITE URL HERE" /&gt;
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> &lt;/head&gt;
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> &lt;body&gt;
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> &lt;p&gt;YOUR WEBSITE DESCRIPTION HERE &lt;/p&gt;
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> &lt;/body&gt;
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">&lt;/html&gt;
</span></span></code></pre></div><h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/GERBV2Bv-A4?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: yt:video:bzH166AImAw
title: Active Citizenship
author: ;Parliament of Canada
link: https://www.youtube.com/watch?v=bzH166AImAw
hash: w�?���Ř��4}�2�
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/bzH166AImAw?version=3","title":"Active Citizenship","description":"Watch this video to find out how you can get involved in Canada’s parliamentary democracy.","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i3.ytimg.com/vi/bzH166AImAw/hqdefault.jpg"]}]}


guid: https://christitus.com/antivirus-worthless/
title: Is Antivirus Worthless?
link: https://christitus.com/antivirus-worthless/
hash: ���*�~�D� a
attributes: {"enclosures":[]}
content:
<p>To many advanced users, Antivirus IS worthless. That is because it uses system resources and provides more annoyances than benefits. However, for many users it is required as they will not know what is a virus or not.</p>
<h2 data-sanitized-id="how-to-scan">How to Scan</h2>
<p>The biggest issue with antivirus is some show false positives and others show nothing when it is a virus. So what is the best way to scan?</p>
<p><a href="https://virustotal.com/">https://virustotal.com</a> is my recommendation. It will help you determine if that exe or zip file you just downloaded from a shady source is infected. This will do a far better job than an individual antivirus scans, since virustotal is an aggregate and uses antivirus engines for EVERY major antivirus.</p>
<h2 data-sanitized-id="what-not-to-do">What not to do</h2>
<p>Downloading free antivirus is terrible and typically you will be giving away your privacy as they will be submitting the URLs you visit in many free packages, like Kasperky Cloud Free. Avast and AVG on the other hand you will be inidated with popups and upsells to a bloated internet security suite that does nothing but slow your computer down. I’ve also seen people install multiple AntiVirus programs, which just slows down a PC considerably while providing little to no extra protection.</p>
<p>So Never do any of these things!</p>
<ul>
<li>Download FREE AntiVirus</li>
<li>Install, Buy, or Download ANY Internet Security Suite</li>
<li>Installing multiple AntiVirus programs</li>
</ul>
<h2 data-sanitized-id="false-positives">False Positives</h2>
<p>I’ve been giving out an exe file for my Debloat Utility to anyone that pays $5 on cttstore.com to help fund its future development. However, since it is a free and open source project that is a PowerShell script that gets converted to EXE it has caused MANY false positives. The reason is many Antivirus companies are lazy and block EVERY powershell script that is converted to EXE. Microsoft, AVG, Avast, etc. which you can see below.</p>
<p>PowerShell to EXE Disclaimer
<img loading="lazy" src="https://christitus.com/images/2022/antivirus-worthless/virus-ps1-exe.webp" alt="ps1toexe" data-sanitized-class="img-fluid"> </p>
<p>VirusTotal Result from PowerShell Script to EXE
<img loading="lazy" src="https://christitus.com/images/2022/antivirus-worthless/script-virus.webp" alt="script-virustotal" data-sanitized-class="img-fluid"> </p>
<p>Obviously with false positives there are times where AntiVirus programs completely miss viruses. How does this happen and how I changed the exe to bypass antivirus programs. There are two methods I’ve used to reduce or even completely remove antivirus scans.</p>
<h3 data-sanitized-id="code-signed-exes-have-less-false-positives">Code Signed EXEs have less false positives</h3>
<p>Code Signing is the practice of using cryptographic keys to sign EXE files like below.
<img loading="lazy" src="https://christitus.com/images/2022/antivirus-worthless/signed-file.webp" alt="signed-file" data-sanitized-class="img-fluid"> </p>
<p>Good antivirus programs will NOT flag my EXE when I used a code signing key. However, if I don’t sign the EXE it will flag it as a virus. So, why doesn’t everyone use a code signing key? It’s expensive. Roughly it is $100 a year for the “basic” code signing and to bypass Microsoft SmartScreen for “enhanced” code signing it will set you back almost $275 a year. Feels kinda like extortion, but I can appreciate that I now have a digital signature for my exe so folks know it came from me.</p>
<p>Let’s move on to the easiest way to obscure your exe to bypass Antivirus.</p>
<h3 data-sanitized-id="encrypted-files-can-not-be-scanned-for-viruses">Encrypted Files can not be scanned for viruses</h3>
<p>Simply created an encrypted file will bypass any scans. I find the easiest way to do this is using 7-zip with SHA256 encryptioon and a password. This is how I distribute my EXE now so I don’t have to worry about antiviruses. So, be EXTREMELY CAREFUL when opening files with passwords, as your antivirus can not scan it. If you do not trust the source you downloaded it… DO NOT OPEN IT!</p>
<p>Here is an example of a encrypted file:
<img loading="lazy" src="https://christitus.com/images/2022/antivirus-worthless/encrypted-file.webp" alt="encrypted-file" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="recommended-antivirus">Recommended AntiVirus</h2>
<p>If you don’t want to spend any money then simply use Microsoft’s Defender. Its decent with it’s cloud protection and is already baked into Windows. Its detection rates are passable and has a small system impact.</p>
<p>The biggest factors to look at when considering antivirus is System Impact and History/Detection Rates.</p>
<p>ESET NOD32 Antivirus is the best I’ve found. They were one of the original antivirus programs with NOD32’s creation in 1987 and ESET being founded by the developers of NOD32 in 1992. The basic antivirus is fast has very little passive performance loss and fantastic detection rates. I recommend just doing the basic <a href="https://www.jdoqocy.com/click-100287975-15083621">NOD32 Antivirus</a></p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/UXT17bQ2W2Q?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: yt:video:uwcMDuSGym4
title: Levels of Government
author: ;Parliament of Canada
link: https://www.youtube.com/watch?v=uwcMDuSGym4
hash: @�?2 �� V�'
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/uwcMDuSGym4?version=3","title":"Levels of Government","description":"There are three levels of government in Canada. Do you know what each one does? Watch to find out!","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i2.ytimg.com/vi/uwcMDuSGym4/hqdefault.jpg"]}]}


guid: https://christitus.com/bad-windows-defender/
title: Why I Hate Windows Defender
link: https://christitus.com/bad-windows-defender/
hash: ���t����HdG�
attributes: {"enclosures":[]}
content:
<p>Windows Defender is often seen as a good antivirus, but I want to inform you of a cost noone sees but developers because of Defender.</p>
<h2 data-sanitized-id="is-windows-defender-good">Is Windows Defender Good?</h2>
<p>Yes. It does detect a ton of viruses and have good detection rates as long as you are online, since it relies heavily on its online connection. However, there is a dark side to having Microsoft control this entire part of your PC that we need to go over. The false positives are excessive and I believe it is by design.</p>
<h2 data-sanitized-id="the-mafia-for-software-developers">The Mafia for Software Developers</h2>
<p><img loading="lazy" src="https://christitus.com/images/2022-thumbs/bad-windows-defender.webp" alt="bad-defender" data-sanitized-class="img-fluid"> </p>
<p>Smartscreen is powered by Windows Defender and you have to buy a $300 A YEAR code signing license with Extended Validation to bypass it. The EV cert is close to the mafia extorting business users for “protection”. If you don’t use Defender, you don’t need to worry about smartscreen. Using standard code signing with an external anti-virus will work close to the same as Defender is disabled when you use a 3rd party av.</p>
<h3 data-sanitized-id="code-signing-cost">Code Signing Cost</h3>
<p><em>Cost for 1 year - prices as of 7/11/2022</em></p>
<table title="" aria-label="" data-sanitized-class="table ">
<thead>
<tr>
<th title="Site" aria-label="Site" data-th_x="0" data-id="0">Site</th>
<th title="Extended Validation" aria-label="Extended Validation" data-th_x="1" data-id="1">Extended Validation</th>
<th title="Regular Validation" aria-label="Regular Validation" data-th_x="2" data-id="2">Regular Validation</th></tr>
</thead><tbody>
<tr data-tr_y="0"><td title="Site" aria-label="Site" data-td_x="0">Comodo</td><td title="Extended Validation" aria-label="Extended Validation" data-td_x="1">$319</td><td title="Regular Validation" aria-label="Regular Validation" data-td_x="2">$85</td></tr>
<tr data-tr_y="1"><td title="Site" aria-label="Site" data-td_x="0">Instant SSL</td><td title="Extended Validation" aria-label="Extended Validation" data-td_x="1">$299</td><td title="Regular Validation" aria-label="Regular Validation" data-td_x="2">$166</td></tr>
<tr data-tr_y="2"><td title="Site" aria-label="Site" data-td_x="0">Sectigo</td><td title="Extended Validation" aria-label="Extended Validation" data-td_x="1">$399</td><td title="Regular Validation" aria-label="Regular Validation" data-td_x="2">$179</td></tr>
<tr data-tr_y="3"><td title="Site" aria-label="Site" data-td_x="0">DigiCert</td><td title="Extended Validation" aria-label="Extended Validation" data-td_x="1">$566</td><td title="Regular Validation" aria-label="Regular Validation" data-td_x="2">$404</td></tr></tbody></table>
<p>The big question is “Why does extended validation cost so much more?” and it is simply gatekeeping at its best. Many SSL companies will tell you it is because the “vetting process is harder”, but I smell bullshit on that. It costs usually double and sometimes more. The only difference is it requires a hardware cryptographic key and Microsoft smartscreen immediately gives it a pass on all scans.</p>
<table title="" aria-label="" data-sanitized-class="table ">
<thead>
<tr>
<th title="Extended Validation" aria-label="Extended Validation" data-th_x="0" data-id="0">Extended Validation</th>
<th title="Regular Validation" aria-label="Regular Validation" data-th_x="1" data-id="1">Regular Validation</th></tr>
</thead><tbody>
<tr data-tr_y="0"><td title="Extended Validation" aria-label="Extended Validation" data-td_x="0">Hardware Key</td><td title="Regular Validation" aria-label="Regular Validation" data-td_x="1">Software Key</td></tr>
<tr data-tr_y="1"><td title="Extended Validation" aria-label="Extended Validation" data-td_x="0">Smartscreen Bypassed</td><td title="Regular Validation" aria-label="Regular Validation" data-td_x="1">Smartscreen Error</td></tr></tbody></table>
<p>I can’t find anything in regards to who is really profiting the most of the Extended Validation code signing and if Microsoft is getting a cut since it is basically the only reason to have one. However, the entire situation is a bit suspect and any development person I know loath the process that Extended Validation is.</p>
<h2 data-sanitized-id="free-anti-virus-alternatives">Free Anti-Virus Alternatives</h2>
<p>Is there something better than windows defender that is free? I’d say <a href="https://www.bitdefender.com/solutions/free.html">BitDefender Free</a> offers superior protection.</p>
<p>This is a drastic shift in recommendation for me, because I used to say “All Free AV is worthless”, but now I see this from a different angle. Don’t get me wrong most FREE antivirus is glorified advertising for a paid product that essentially does the same thing. After looking at all the free offerings, I’d say BitDefender Free is better than using Defender.</p>
<h2 data-sanitized-id="paid-anti-virus">Paid Anti-Virus</h2>
<p>For those that want good detection rates, better privacy, and low overhead. The antivirus I have recommend has stayed the same for years. I recommend <a href="https://christitus.com/antivirus">ESET</a> for this because it is a proven antivirus that isn’t as intrusive as the others.</p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/9P6r7DLS77Q?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/not-safe-windows/
title: You are NOT safe in Windows
link: https://christitus.com/not-safe-windows/
hash: Ƭey� ;u]tP����
attributes: {"enclosures":[]}
content:
<p>Thank you to all the Microsoft Windows users from all the Technicians that work on this operating system. Without your continued use, we wouldn’t have jobs.</p>
<h2 data-sanitized-id="why-is-windows-not-secure">Why is Windows NOT secure?</h2>
<p>Legacy systems and a fundamental flaw in system design. It is far to easy to get system level access through a variety of methods. Let’s go over the systems that you can use to exploit a traditional Windows user, so you know what NOT to do.</p>
<h3 data-sanitized-id="powershell">PowerShell</h3>
<p>Powershell is one of the most powerful tools in Windows, but it is at a cost. While it makes it incredibly easy to administrator and make modifications to massive amounts of systems quickly, it can be abused. Pretty much anything you want to do can be accomplished with Powershell. This is most evident in business systems where it is required to administer systems and even Office 365 in the cloud.</p>
<h3 data-sanitized-id="task-scheduler">Task Scheduler</h3>
<p>So many processes end up running at a system level in Task scheduler and something the core system relied heavily on. This can not be disabled and is always one of the biggest Achilles heels for Windows. I am often disabling tasks to debloat systems such as auto-submission tools Microsoft uses like Telemetry and even Defender bug reports.</p>
<h3 data-sanitized-id="visual-basic---vbs-scripts">Visual Basic - .vbs scripts</h3>
<p>VBS scripts often provide a level of scripting that isn’t possible with many other methods. While this is good in business, it is very bad for the end user. I designed a vbs script to migrate on-premises outlook mailboxes to O365 mailboxes so a thousand users wouldn’t have to redownload all their emails. However this can easily be abused for those malicious actors out there. Be cautious of this loophole and any vbs script that runs on your system.</p>
<h3 data-sanitized-id="group-policy">Group Policy</h3>
<p>Again this is used in many pro+ systems and even if you aren’t part of a domain can be abused by using <code>gpedit.msc</code> to create a local policy that can run scripts, lock user features, and much more. Home users typically don’t have this functionally unless a hack is done.</p>
<p>If you want Group Polcy as a home user type the following in an elevated to Administrator prompt:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">dism /online /norestart /add-package:"%SystemRoot%servicingPackages{{PackageFileName}}**
</span></span></code></pre></div><h3 data-sanitized-id="registry">Registry</h3>
<p>So many things can be accomplished with the registry, such as auto login, and various hooks that can happen by just launching your web browser or windows explorer. Registry is basically the brain of windows and can be exploited easily to do pretty much anything.</p>
<h2 data-sanitized-id="how-to-protect-yourself">How to protect yourself</h2>
<p>I highly recommend hardening your system with just basic tools that do NOT run in the background, but disable many of the tools above. These tools are wonderful in the right hands, but world ending the wrong ones.</p>
<p>A simple free hardening tool on Github will disable many of these attack surfaces and do FAR more than any antivirus or internet security suite can, while also not adding ANY overhead or extra processes to your system.</p>
<p>HardenTools to disable services: <a href="https://github.com/securitywithoutborders/hardentools">https://github.com/securitywithoutborders/hardentools</a></p>
<p><img loading="lazy" src="https://christitus.com/images/2022/hardentools.webp" alt="harden" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/Bh8HqxxI4pc?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://htmhell.dev/32-almost-a-proper-close-button/
title: #32 almost a proper close button
author: ;Manuel Matuzovic
link: https://htmhell.dev/32-almost-a-proper-close-button/
hash: �V�#����U�ҭd�
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">display</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>flex<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>img<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 13 13<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">xmlns</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>http://www.w3.org/2000/svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15px<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15px<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">fill</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#000<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">name</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>close<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span>Close dialog<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>…<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>path</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ol>
<li>Either turn the <code>&lt;svg&gt;</code> into a semantic element (<code>role="img"</code>) or exclude it from the accessibility tree (<code>aria-hidden="true"</code>). Doing both makes no sense.</li>
<li>The button has no accessible name (a text alternative). The <code>title</code> element in the <code>svg</code> would serve as the accessible name, but <code>aria-hidden="true"</code> makes the whole SVG inaccessible to assistive technology.</li>
<li>Even without <code>aria-hidden="true"</code>, some screen reader/browser combinations might not recognise the <code>&lt;title&gt;</code> element. Label the <code>&lt;svg&gt;</code> using <code>aria-labelledby</code> or <code>aria-label</code>.</li>
<li>The <code>role=button</code> attribute and value for the button is redundant. Its implicit default role is “button”.</li>
<li>There's no <code>display</code> attribute. If you need custom attributes, use the <code>data-</code>  prefix.</li>
<li>The <code>name</code> attribute is not allowed on <code>&lt;svg&gt;</code></li>
<li>The value of the <code>width</code> and <code>height</code> attributes should be a valid non-negative integer.</li>
<li>Add a <code>type="button"</code> attribute and value to prevent the button from submitting a form, if there is one.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">data-display</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>flex<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>img<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 13 13<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">xmlns</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>http://www.w3.org/2000/svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">fill</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#000<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>title<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>title</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>title<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Close<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>…<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>path</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="demo-of-voice-over-on-macos">Demo of Voice Over on macOS</h2>
<p>Voice Over doesn't recognize the title element nested in a svg nested in a button.</p>
<video src="https://htmhell.dev/images/svgbutton.mov" controls="controls" width="200" preload="none">
  <p>Something went wrong, please visit <a href="https://htmhell.dev/32-almost-a-proper-close-button/">htmhell.dev/32-almost-a-proper-close-button/</a> to view this video.
</p></video>
<p>Code on <a href="https://codepen.io/matuzo/pen/LYdWpwP?editors=1000">CodePen</a>.</p>
</div>


guid: https://christitus.com/shrink-vmware-vmdk/
title: Shrink VMWare VMDK File
link: https://christitus.com/shrink-vmware-vmdk/
hash: �sL�w�6�,%It�O�
attributes: {"enclosures":[]}
content:
<p>This goes over reducing the size of a VMDK file using open-vm-tools and is used often in VMWare environments.</p>
<h2 data-sanitized-id="tools-needed">Tools Needed</h2>
<p>I’d recommend VMWare Workstation Pro, but you can get away with just using player if you don’t have a license.</p>
<p>Inside the Guest (Virtual Machine) you need to install <code>open-vm-tools</code> on Linux which should be in the base repository for most main distributions.</p>
<h2 data-sanitized-id="shrinking-vmdk">Shrinking VMDK</h2>
<h3 data-sanitized-id="on-guest">On Guest</h3>
<p>These are done on the GUEST (Inside Virtual Machine)</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="gdscript3" data-sanitized-class="language-gdscript3"><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">vmware</span><span data-sanitized-class="o">-</span><span data-sanitized-class="n">toolbox</span><span data-sanitized-class="o">-</span><span data-sanitized-class="n">cmd</span> <span data-sanitized-class="n">disk</span> <span data-sanitized-class="n">shrink</span> <span data-sanitized-class="o">/</span>
</span></span></code></pre></div><p>If you are want to shrink a Windows Guest you need to install VMWare-Tools inside the VM. After the tools are installed, simply click the following in VMWare Workstation <code>VM Tab -&gt; Manage -&gt; Clean up Disks</code> (Windows ONLY)</p>
<h3 data-sanitized-id="on-host">On Host</h3>
<p>From inside your VMWare Workstation install you will find the following program <code>vmware-vdiskmanager</code> this is where we finalize the vmdk by defragmenting it and doing the final shrink.</p>
<h4 data-sanitized-id="defrag">Defrag</h4>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">vmware-vdiskmanager.exe -d /path/to/shrink.vmdk
</span></span></code></pre></div><h4 data-sanitized-id="final-shrink">Final Shrink</h4>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">vmware-vdiskmanager.exe -k /path/to/shrink.vmdk
</span></span></code></pre></div><h4 data-sanitized-id="example">Example</h4>
<p><img loading="lazy" src="https://christitus.com/images/2022/vmware-vdisk.webp" alt="vdisk" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="still-too-big">Still Too Big?</h2>
<p>If it is still too large, you can simply export the VM to OVF format inside VMWare Workstation. This will create a new vmdk file that will be considerably smaller. OVF is pretty easy to move to VirtualBox and other VM platforms as well.</p>
<p><code>export to ovf</code></p>
<p><img loading="lazy" src="https://christitus.com/images/2022/vmware-ovf.webp" alt="ovf" data-sanitized-class="img-fluid"> </p>


guid: https://christitus.com/regex/
title: Save HOURS of work with Regex
link: https://christitus.com/regex/
hash: �T�Ҿ)�_%�^{P��
attributes: {"enclosures":[]}
content:
<p>RegEx is a formidable tool that many just don’t understand, but can save literally thousands of hours of work.</p>
<blockquote data-sanitized-class="twitter-tweet"><p lang="en" dir="ltr">Boom got it with RegEx... Thanks to the website RegExr for testing this insane string. <a href="https://t.co/FHVonwqcsh">pic.twitter.com/FHVonwqcsh</a></p>— Chris Titus Tech (@christitustech) <a href="https://twitter.com/christitustech/status/1553598175314845697?ref_src=twsrc%5Etfw">July 31, 2022</a></blockquote>

<p>However, for many years I just couldn’t be bothered to learn anything beside the basics <code>.*</code> or <code>[a-z]</code>. I just had a project pop up where I’d have to spend hours finding and replacing a complex markdown line I was using to pull images and a video link. The solution was painfully obvious… either I get better with RegEx or spend hours finding and replacing text in hundreds of posts.</p>
<h2 data-sanitized-id="understanding-regex">Understanding RegEx</h2>
<p>Learning all the syntax for RegEx is not happening for me and probably many others. There is a solution for this and you don’t need to… <a href="https://regexr.com/">https://regexr.com/</a></p>
<p><img loading="lazy" src="https://christitus.com/images/2022/regex/text-example.webp" alt="text-example" data-sanitized-class="img-fluid"> </p>
<p>Now that you have an explainer of all the syntax and cheat sheet. We just need to know a few basic features of RegEx, so you can perfect the pattern that you need. Also, the need to understand groups and variables will make the find and replace much more powerful.</p>
<h2 data-sanitized-id="making-the-perfect-pattern">Making the Perfect Pattern</h2>
<p>With our test example on regexr.com we can test our pattern to make sure we match exactly what we need. Now normally a guide would start talking about <code>.*</code> and other match characters, but frankly any site like regexr or regex101.com, will have those laid out for you.</p>
<p>Instead, let’s talk about escaping characters and how to match weird expressions that have syntax like <code>[,(,+,?</code> and more. All these can really mess up matching your pattern. So you need to <em>escape</em> the with a <code>\</code> before the symbol, so it would look something like this <code>\[blah\]</code> this is regex speak for <code>[blah]</code> the escaping character makes it actually register the bracket or parenthesis. Without it, it will probably just give you some syntax error.</p>
<p>The websites I gave above are perfect for pointing out flaws in your pattern or maybe you missed escaping that + sign or question mark. It’s why having these syntax sites available is vital.</p>
<h2 data-sanitized-id="selection-groups">Selection Groups</h2>
<p>Now that you understand how to match things with RegEx you can wipe out things with ease, but what about saving that bit of the match you need?</p>
<p>Example (I want to save youtube video id):</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">img.youtube.com/vi/0q3rGKIMZg
</span></span></code></pre></div><p>Using this Regex will clean it up and save the id using the selection group.</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">.*vi\/(.*)
</span></span></code></pre></div><p>This will match and SELECT everything after <code>vi/</code> with <code>(.*)</code> in the string, where <code>.*vi\/</code> matches <code>img.youtube.com/vi/</code>. The value <code>0q3rGKIMZg</code> will be stored in <code>$1</code> which is the first selection group. If you do multiple <code>()</code> selections the second one would be <code>$2</code> and so on.</p>
<p>Example new format from old <code>{{ youtube 0q3rGKIMZg }}</code></p>
<p>The replace field would simply be <code>{{ youtube $1 }}</code></p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/uwtPH6owqZA?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/disable-win-defender/
title: Disable Win Defender
link: https://christitus.com/disable-win-defender/
hash: !iL���-y{V����
attributes: {"enclosures":[]}
content:
<p>Windows Defender can be a massive drain on system performance and often can have a lot of false positives. While I recommend Anti-virus for most, I don’t like having it enabled on my systems that aren’t used for web browsing.</p>
<h2 data-sanitized-id="how-secure-is-windows-defender">How Secure is Windows Defender</h2>
<p>I often hear the phrase and have used the phrase “Windows Defender is good enough”, but often get mistaken in to thinking Defender is a good Anti-Virus. For detection rates it is good, but for protection it is NOT! Why? Anyone with a little bit of knowledge knows how to disable it without the user even knowing it. The services, registry entries, and built-in windows policies are designed to make it easy for an administrator to disable it. Why does Microsoft make it so easy to disable it? Simple, Windows in business environments never use Defender and administrators need to disable it.</p>
<h2 data-sanitized-id="what-are-the-methods-to-disable-defender">What are the methods to disable defender?</h2>
<p>There are a multitude of ways to disable defender or render it useless. Most properly programmed viruses will utilize one or more of these methods below.</p>
<h3 data-sanitized-id="windows-settings">Windows Settings</h3>
<p>Turn off Tamper Protection and Real-Time monitoring.</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/remove-win-defender/real-monitoring.webp" alt="real-monitoring" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="registry">Registry</h3>
<p>There are so many registry settings, but the main ones to focus on are below:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows Defender\Features]
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"MpPlatformKillbitsFromEngine"=hex:00,00,00,00,00,00,00,00
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"TamperProtectionSource"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"MpCapability"=hex:00,00,00,00,00,00,00,00
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"TamperProtection"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows Defender]
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"PUAProtection"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableRoutinelyTakingAction"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"ServiceKeepAlive"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"AllowFastServiceStartup"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableLocalAdminMerge"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableAntiSpyware"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"RandomizeScheduleTaskTimes"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Microsoft Antimalware]
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"ServiceKeepAlive"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"AllowFastServiceStartup"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableRoutinelyTakingAction"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableAntiSpyware"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableAntiVirus"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows Defender\Real-Time Protection]
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableRealtimeMonitoring"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableBehaviorMonitoring"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableOnAccessProtection"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableScanOnRealtimeEnable"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableIOAVProtection"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"LocalSettingOverrideDisableOnAccessProtection"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"LocalSettingOverrideRealtimeScanDirection"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"LocalSettingOverrideDisableIOAVProtection"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"LocalSettingOverrideDisableBehaviorMonitoring"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"LocalSettingOverrideDisableIntrusionPreventionSystem"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"LocalSettingOverrideDisableRealtimeMonitoring"=dword:00000000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"RealtimeScanDirection"=dword:00000002
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"IOAVMaxSize"=dword:00000512
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableInformationProtectionControl"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableIntrusionPreventionSystem"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableRawWriteNotification"=dword:00000001
</span></span></code></pre></div><p>For a more comprehensive list check out: <a href="https://christitus.com/files/windefender_disable.reg">https://christitus.com/files/windefender_disable.reg</a></p>
<h3 data-sanitized-id="services">Services</h3>
<p>List of Services Windows Defender uses and relies upon.</p>
<ul>
<li>WdNisSvc</li>
<li>WdNisDrv</li>
<li>WdFilter</li>
<li>WdBoot</li>
<li>wcncsvc</li>
</ul>
<h3 data-sanitized-id="files">Files</h3>
<p>There are a ton of program files and logs for Windows Defender located at <code>C:\Program Files\Windows Defender</code></p>
<h3 data-sanitized-id="powershell">Powershell</h3>
<p>This can be used to do temporary disable parts or all of Defender as well. Here is some basic command I used and shared on Twitter:</p>
<blockquote data-sanitized-class="twitter-tweet"><p lang="en" dir="ltr">Why I hate Windows defender in one picture... <a href="https://t.co/HFYXV38Ytz">pic.twitter.com/HFYXV38Ytz</a></p>— Chris Titus Tech (@christitustech) <a href="https://twitter.com/christitustech/status/1556368265139585026?ref_src=twsrc%5Etfw">August 7, 2022</a></blockquote>

<h2 data-sanitized-id="github-projects---caution">GitHub Projects - CAUTION!</h2>
<p>Here are a couple GitHub projects that will completely destroy defender and when used improperly can even be used to deliver virus payloads onto systems</p>
<ul>
<li><a href="https://github.com/jbara2002/windows-defender-remover">https://github.com/jbara2002/windows-defender-remover</a></li>
<li><a href="https://github.com/swagkarna/Defeat-Defender-V1.2">https://github.com/swagkarna/Defeat-Defender-V1.2</a></li>
<li><a href="https://github.com/qtkite/defender-control">https://github.com/qtkite/defender-control</a></li>
</ul>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/UywjKEMjSp0?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/is-windows-bad/
title: Is Windows Bad
link: https://christitus.com/is-windows-bad/
hash: Y�y�2���+x�� 1
attributes: {"enclosures":[]}
content:
<p>It’s what we know. Windows is a tool and has evolved over the years while dominating the PC Market since the 90s. So it begs the question, is it bad?</p>
<h2 data-sanitized-id="what-it-does-well">What it does well</h2>
<p>There are certain things Windows does better than any other OS. The operating system itself has an amazing assortment of compatibility and gaming.</p>
<p>If you want to play the most software and games that works with all your hardware, Windows is your best bet and that isn’t changing anytime soon.</p>
<h2 data-sanitized-id="why-use-something-else">Why use something else?</h2>
<p>Let’s say you don’t mind some software or hardware not working or you want to pick out specific hardware to use on another operating system. What do you gain?</p>
<ul>
<li>Better Security - Windows is know to be easily hackable, from the NSA tool leak in 2017, Ransomware, and out dated kernel design. Windows is an absolute security nightmare. Both Mac and Linux offer proper elevation support with a NIX design, while windows does not and relies on the tacked on UAC system.</li>
<li>Better Privacy - Windows has extremely egregious telemetry, but what information does Windows collect?</li>
</ul>
<table>
<thead>
<tr>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hardware information</td>
<td>CPU speed, memory capacity, battery, HDD size.</td>
</tr>
<tr>
<td>Network Data</td>
<td>Adapter speed, WiFi Data, and Mobile data if SIM exists</td>
</tr>
<tr>
<td>Event Metrics</td>
<td>Basic pc events</td>
</tr>
<tr>
<td>State Changes</td>
<td>App uptime, CPU allocation to what app, and crashes</td>
</tr>
<tr>
<td>Accessory data</td>
<td>What you have connected to the PC</td>
</tr>
<tr>
<td>Microsoft Store Logs</td>
<td>Purchases, installs, updates, viewed, launched, etc.</td>
</tr>
<tr>
<td>In-depth system specs</td>
<td>Greater detail on hardware capabilities</td>
</tr>
<tr>
<td>App logs</td>
<td>How often you use what and how quick they are</td>
</tr>
<tr>
<td>Browser activity logs</td>
<td>Shows what sites you visit and what you searched for</td>
</tr>
<tr>
<td>Enhanced Error Reporting</td>
<td>Dumps entire memory and submits anything running.</td>
</tr>
<tr>
<td>Keylogging</td>
<td>provided by “Improve Inking and typing recognition”</td>
</tr>
</tbody>
</table>
<ul>
<li>More Consistency - One of the biggest issues Windows has is the rolling update cycle that tends to mess up computers. There are ways businesses tame this process and I’ve even shown how to have sane windows update settings, but the default configuration will typically land users in an undesirable place more often than not. Mac and Linux typically have much better update cycles and far fewer issues with system updates, and need fewer reboots.</li>
</ul>
<h2 data-sanitized-id="the-microsoft-hate">The Microsoft HATE</h2>
<p>This all doesn’t sound too bad, most people don’t care about privacy or security as they freely give it away on social media. See this image if you want a good laugh at how bad people are at these practices.</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/social-eng.webp" alt="social" data-sanitized-class="img-fluid"> </p>
<p>So why do people hate Microsoft and try to get away from Windows? The monopoly and absolute ruthless business model it has built over the past 30 years is something to marvel at.</p>
<h3 data-sanitized-id="government-cooperation">Government Cooperation</h3>
<p>It has grown so influential from its massive government lobby and has even an entire wing dedicated to working with governments. While some of this is bad, not all of it is. Their monitoring has helped stop some cyberattacks, like Ukraine cyber attacks in 2022 and this close partnership even had the NSA and FBI remotely hack into Microsoft exchange servers and patch the system. (source: <a href="https://www.enterprisetimes.co.uk/2021/04/14/nsa-and-fbi-move-to-help-microsoft-with-its-exchange-server-vulnerabilities/">https://www.enterprisetimes.co.uk/2021/04/14/nsa-and-fbi-move-to-help-microsoft-with-its-exchange-server-vulnerabilities/</a>)</p>
<p>The downside to this is when the NSA tools leaked in 2017 with blatant backdoors that spawned a massive ransomware attack around the world with EternalBlue exploit that then spawned a host of WannaCry ransomware payloads delivered to millions of computers. (source: <a href="https://www.wired.com/story/eternalblue-leaked-nsa-spy-tool-hacked-world/">https://www.wired.com/story/eternalblue-leaked-nsa-spy-tool-hacked-world/</a>)</p>
<h3 data-sanitized-id="the-companies-microsoft-killed">The Companies Microsoft Killed</h3>
<p>“<strong>Embrace, extend, and extinguish</strong>” (<strong>EEE</strong>), also known as “<strong>embrace, extend, and exterminate</strong>”, is a phrase that the U.S. Department of Justice found that was used internally by Microsoft… (source: <a href="https://en.wikipedia.org/wiki/Embrace,_extend,_and_extinguish">https://en.wikipedia.org/wiki/Embrace,_extend,_and_extinguish</a>)</p>
<p>They have successfully murdered companies and ruined countless lives while stifling innovation to get to where they are. Examples:</p>
<ul>
<li>Browser incompatibilities: Netscape killed off and why we were plagued by the hellscape of Internet Exploader and ActiveX controls for almost a decade before Chrome came along.</li>
<li>Office: They purposely held back the API to make other competitors, like WordPerfect, able to succeed when they launched in Windows 98. With no documentation this ensured Microsoft Office had to be purchased and used by the world killing many competitors. They also did this by making Office documents render improperly in other browsers that weren’t Internet Explorer.</li>
<li>Purposely breaking Java programs on other systems so they weren’t cross-platform. They’ve settled with Sun for over 2 billion dollars in a lawsuit they lost back in 2002 and 20 million in 2001.</li>
<li>Why email sucks? Microsoft implemented MAPI protocol instead of using many common forms like SMTP, POP, or IMAP. On October 1st of 2022, they disabled the following protocols from Exchange Online: <code>Outlook, EWS, RPS, POP, IMAP, and EAS</code> and even SMTP gets disabled if not used.</li>
</ul>
<p>So the hate comes from the world that never happened because of Microsoft’s greed. The missed innovations, the companies that were forced to shutdown, and the lives that it destroyed, all to make the Microsoft monopoly.</p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/Sh1kZD7EVj0?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://thechainedmuse.substack.com/p/exiting-the-cave-timocrats-democrats-5bc
title: Exiting the Cave: Timocrats, Democrats, Oligarchs and Tyranny
author: ;David Gosselin
link: https://thechainedmuse.substack.com/p/exiting-the-cave-timocrats-democrats-5bc
hash: ,��@�v���ot�c
content:
<p>Psychiatrist and Confucian scholar Dr. Quan Lu joins <em>Escaping the Brave New World</em> to discuss the transcendental leap and epistemological challenge faced by civilization at this critical juncture in human history. Beyond mere politics and rhetoric, whether expressed in their ancient forms or embodied in the latest social engineering, Dr. Lu outlines the nature of humanity's ascent from the animal kingdom of vitality, intellect, and psyche into the timeless realm of Beauty, Truth, and Goodness.</p><p>After an initial discussion of the various categories and cast of characters encountered within the lower realm of politics—the Democratic, Tyrannical, Oligarchical and fake Timocratic souls—we venture into the realm of the true Timocratic, Aristocratic and Philosophical souls. These reflections lead into a playful exploration concerning the nature of great art, culture, and civilization, with special attention paid to the many subversive “imitations” and perversions of “the real thing.”</p><p>Disabused from the imitations found in both <a href="https://davidgosselin.substack.com/p/lifting-the-veil-from-ancient-rhetoric">the ancient and modern world</a> of political psy-ops and <a href="https://www.youtube.com/watch?v=VyUmuQJBo5s">epistemological warfare</a>, the dialogue culminates with an exploration of the many possibilities that arise as a civilization begins “exiting the cave.”</p><p>Video of this discussion available <a href="https://www.youtube.com/watch?v=jWKrlQ8fepA&amp;t=0s">here</a>.</p><p><br><br>Thank you for subscribing. <a href="https://davidgosselin.substack.com/p/exiting-the-cave-timocrats-democrats/comments?token=eyJ1c2VyX2lkIjoyNDcyNDM1NCwicG9zdF9pZCI6NjkwODg3MDMsImlhdCI6MTY5OTUwMDYyNSwiZXhwIjoxNjk5NzU5ODI1LCJpc3MiOiJwdWItNDQwMjc3Iiwic3ViIjoicG9zdC1jb21tZW50cyJ9.PxU-gmg3ePnODQYidcNAuoifC3WSpwk3tvV4he0gThE&amp;r=epxfm&amp;utm_medium=podcast&amp;utm_campaign=CTA_5">Leave a comment</a> or <a href="https://davidgosselin.substack.com/p/exiting-the-cave-timocrats-democrats?utm_source=substack&amp;utm_medium=podcast&amp;utm_content=share&amp;action=share&amp;token=eyJ1c2VyX2lkIjoyNDcyNDM1NCwicG9zdF9pZCI6NjkwODg3MDMsImlhdCI6MTY5OTUwMDYyNSwiZXhwIjoxNzAyMDkyNjI1LCJpc3MiOiJwdWItNDQwMjc3Iiwic3ViIjoicG9zdC1yZWFjdGlvbiJ9.jRjzk5gxsDdMUJkiAa9EzD-nLDGR4uB5GRIhqy6SNEA&amp;utm_campaign=CTA_5">share this episode</a>.</p>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/138718676/078c01a1d92b3b4ba19b9db32de071b1.mp3","type":"audio/mpeg","length":0}]}


guid: https://christitus.com/laptop-power-management/
title: Laptop Power Management
link: https://christitus.com/laptop-power-management/
hash: �BC#H���. h�F�
attributes: {"enclosures":[]}
content:
<p>Power management is a critical thing to understand in laptops. It’s possible to buy an expensive laptop and end up not using it because of bad power management practices.</p>
<blockquote data-sanitized-class="twitter-tweet"><p lang="en" dir="ltr">Power Management is complete. <br>Things learned:<br>- Frequency adjustment makes massive battery difference. <br>- You can turn of CPU cores independently<br>- Intel P-States are a bit unpredictable.<br>- eGPUs will always drain a battery faster than just APU laptops.</p>— Chris Titus Tech (@christitustech) <a href="https://twitter.com/christitustech/status/1560314657142964224?ref_src=twsrc%5Etfw">August 18, 2022</a></blockquote>

<p>Also, not taking care of the thermals on a laptop will lead to less laptop life, shorter battery, and unpleasant heat generation.</p>
<h2 data-sanitized-id="cooling-pad">Cooling Pad</h2>
<p>Get any cheap amazon cooling pad from amazon. Here is a decent $30 one with lots of reviews. <a href="https://amzn.to/3SV0Y0l">https://amzn.to/3SV0Y0l</a></p>
<h2 data-sanitized-id="redo-thermal-paste">Redo Thermal Paste</h2>
<p>By default, almost any and every laptop has excessive thermal compound which leads to higher temperatures. Simply removing the excess compound and apply just a drop of “good” thermal paste will drop temps by about 10 Celsius.</p>
<p>Here is an example of excess factory thermal compound application:</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/laptop-power/thermal.webp" alt="termal" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="adjust-max-cpu-frequency">Adjust Max CPU Frequency</h2>
<p>Set your CPU governor to the maximum power it can use. I NEVER use a 100% of the CPU and in most instances rarely break above 50% of its total power. Typically, around 2 GHz is perfect for my day-to-day work. When working on battery, I put this down to 25% on a beefy laptop to conserve most of its power. On weaker laptops, you’d probably double these numbers. 100% on AC Power and 50% on Battery.</p>
<h3 data-sanitized-id="linux---cpupower">Linux - cpupower</h3>
<h4 data-sanitized-id="required-dependencies">Required Dependencies</h4>
<p>Install the following packages</p>
<ul>
<li>cpupower</li>
<li>acpi-support</li>
<li>acpid</li>
<li>acpi</li>
</ul>
<p>Example Install:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">apt-get install acpi-support acpid acpi linux-cpupower cpufrequtils
</span></span></code></pre></div><h4 data-sanitized-id="setting-minmax-power-example">Setting Min/Max Power Example</h4>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">cpupower frequency-set -g powersave -d 0.8G -u 1.2G
</span></span></code></pre></div><h4 data-sanitized-id="check-frequency">Check Frequency</h4>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">cpufreq-info
</span></span></code></pre></div><h3 data-sanitized-id="disable-turbo">Disable Turbo</h3>
<p>Turbo will draw more power and reduce battery life while increasing CPU temperature.</p>
<p>Run the following from a root user:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">echo 1 &gt; /sys/devices/system/cpu/intel_pstate/no_turbo
</span></span></code></pre></div><h3 data-sanitized-id="turn-off-cpu-cores">Turn off CPU Cores</h3>
<p>The more CPU cores that your laptop uses, the power it will draw. On higher end laptops you can see as big as a 75% savings and extend the battery life x3.</p>
<p>Taking a CPU core offline (<em>Note: you can’t offline cpu0</em>)</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">echo 0 &gt; /sys/devices/system/cpu/cpu#/online
</span></span></code></pre></div><p>To disable cores above 4 threads, run the following in a bash script:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">for ((i=4;i&lt;$(nproc);i++)); do echo 0 &gt; /sys/devices/system/cpu/cpu$i/online; done
</span></span></code></pre></div><h3 data-sanitized-id="use-cpulimit-to-constrain-apps">Use CPULIMIT to Constrain Apps</h3>
<h4 data-sanitized-id="install">Install</h4>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">sudo apt install cpulimit
</span></span></code></pre></div><h4 data-sanitized-id="adjust-exec-commands-in-desktop">Adjust EXEC commands in .desktop</h4>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">cpulimit --limit 70 /usr/bin/google-chrome-bin
</span></span></code></pre></div><p><em>Note: This would limit CPU usage for Google Chrome to 70%</em></p>
<h3 data-sanitized-id="linux---adjust-gpu-power">Linux - adjust GPU power</h3>
<p>There are two methods for adjusting the power usage your GPU uses. I personally use both depending on the laptop, but eGPU’s will eat up a battery laptop in no time.</p>
<h4 data-sanitized-id="manually-adjust-mhz-of-gpu">Manually adjust MHz of GPU</h4>
<p>Set the following variables:</p>
<ul>
<li><code>/sys/class/drm/card0/gt_max_freq_mhz</code></li>
<li><code>/sys/class/drm/card0/gt_boost_freq_mhz</code></li>
</ul>
<p>Using cat to display current MHz and then simply echo the new lower value to these variables.</p>
<p>Example:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">echo "1000" &gt; /sys/class/drm/card0/gt_max_freq_mhz
</span></span></code></pre></div><h4 data-sanitized-id="turning-off-gpu-with-prime-select">Turning off GPU with Prime-select</h4>
<p>While there are technically 3 options, I recommend only using NVIDIA and intel, as on-demand doesn’t work very well.</p>
<h4 data-sanitized-id="turning-off-gpu-with-envycontrol">Turning off GPU with Envycontrol</h4>
<p>Cool python project that rebuilds the init system to exclude nvidia.</p>
<p><a href="https://github.com/geminis3/EnvyControl">https://github.com/geminis3/EnvyControl</a></p>
<h3 data-sanitized-id="windows---gui-power-management">Windows - GUI Power Management</h3>
<p>Launch the GUI power panel with Start ⇾ Run <code>powercfg.cpl</code></p>
<p><img loading="lazy" src="https://christitus.com/images/2022/laptop-power/win-power.webp" alt="win-power" data-sanitized-class="img-fluid"> </p>
<p>Then change the Min / Max CPU Power. I typically set these to 5% Min and 50% Max, but on weaker laptops you can set these higher.</p>
<h3 data-sanitized-id="windows---autohotkey-script">Windows - AutoHotkey Script</h3>
<p>This script sets the max CPU state when plugged in to the wall (AC Power) and when it runs on battery (DC Power).</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="gdscript3" data-sanitized-class="language-gdscript3"><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">PowerWriteProcessorStateValueIndex</span><span data-sanitized-class="p">(</span><span data-sanitized-class="mi">50</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"AC"</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">PowerWriteProcessorStateValueIndex</span><span data-sanitized-class="p">(</span><span data-sanitized-class="mi">25</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"DC"</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">ExitApp</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="p">;</span><span data-sanitized-class="o">---------------------</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">PowerWriteProcessorStateValueIndex</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">Max</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="s2">""</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">Mode</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="s2">""</span><span data-sanitized-class="p">)</span> <span data-sanitized-class="p">{</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="n">l</span><span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span><span data-sanitized-class="n">PowerEnumeratePlans</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">ActivePlan</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">VarSetCapacity</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">GUID_ACTIVE_POWER_SAVING</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">16</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">VarSetCapacity</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">GUID_PROCESSOR_SETTINGS_SUBGROUP</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">16</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Ole32.dll\CLSIDFromString"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"WStr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"{"</span> <span data-sanitized-class="n">ActivePlan</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">GUID</span> <span data-sanitized-class="s2">"}"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">GUID_ACTIVE_POWER_SAVING</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">VarSetCapacity</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">GUID_PROCESSOR_THROTTLE_MAXIMUM</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">16</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Ole32.dll\CLSIDFromString"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"WStr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"{54533251-82be-4824-96c1-47b60b740d00}"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">GUID_PROCESSOR_SETTINGS_SUBGROUP</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Ole32.dll\CLSIDFromString"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"WStr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"{BC5038F7-23E0-4960-96DA-33ABAF5935EC}"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">GUID_PROCESSOR_THROTTLE_MAXIMUM</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"PowrProf.dll\PowerWrite"</span> <span data-sanitized-class="n">Mode</span> <span data-sanitized-class="s2">"ValueIndex"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">GUID_ACTIVE_POWER_SAVING</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">GUID_PROCESSOR_SETTINGS_SUBGROUP</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">GUID_PROCESSOR_THROTTLE_MAXIMUM</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"UInt"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">Max</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"UInt"</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="k">for</span> <span data-sanitized-class="n">k</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">v</span> <span data-sanitized-class="ow">in</span> <span data-sanitized-class="n">l</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="k">if</span> <span data-sanitized-class="o">!</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">v</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Default</span><span data-sanitized-class="p">)</span> <span data-sanitized-class="p">{</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="n">RunWait</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">%</span> <span data-sanitized-class="n">ComSpec</span> <span data-sanitized-class="s2">" /c powercfg /s "</span> <span data-sanitized-class="n">v</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">GUID</span><span data-sanitized-class="p">,,</span> <span data-sanitized-class="n">Hide</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="k">break</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">}</span> <span data-sanitized-class="n">RunWait</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">%</span> <span data-sanitized-class="n">ComSpec</span> <span data-sanitized-class="s2">" /c powercfg /s "</span> <span data-sanitized-class="n">ActivePlan</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">GUID</span><span data-sanitized-class="p">,,</span> <span data-sanitized-class="n">Hide</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="p">}</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="p">;</span><span data-sanitized-class="o">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="p">;</span><span data-sanitized-class="n">enumerates</span> <span data-sanitized-class="n">all</span> <span data-sanitized-class="n">power</span> <span data-sanitized-class="n">plans</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="p">;</span><span data-sanitized-class="k">for</span> <span data-sanitized-class="n">k</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">v</span> <span data-sanitized-class="ow">in</span> <span data-sanitized-class="n">PowerEnumeratePlans</span><span data-sanitized-class="p">()</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="p">;</span> <span data-sanitized-class="n">MsgBox</span> <span data-sanitized-class="o">%</span> <span data-sanitized-class="s2">"#"</span> <span data-sanitized-class="n">k</span> <span data-sanitized-class="s2">"`nGUID: "</span> <span data-sanitized-class="n">v</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">GUID</span> <span data-sanitized-class="s2">"`Name: "</span> <span data-sanitized-class="n">v</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Name</span> <span data-sanitized-class="s2">"`nDefault?: "</span> <span data-sanitized-class="n">v</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Default</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">PowerEnumeratePlans</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">ByRef</span> <span data-sanitized-class="n">ActivePlan</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="s2">""</span><span data-sanitized-class="p">)</span> <span data-sanitized-class="p">{</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="n">List</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="p">{}</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="k">for</span> <span data-sanitized-class="n">k</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">v</span> <span data-sanitized-class="ow">in</span> <span data-sanitized-class="n">StrSplit</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">CMD</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"powercfg /l"</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="s2">":"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">A_Space</span> <span data-sanitized-class="n">A_Tab</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="k">if</span> <span data-sanitized-class="p">(</span><span data-sanitized-class="n">A_Index</span><span data-sanitized-class="o">&gt;</span><span data-sanitized-class="mi">1</span><span data-sanitized-class="p">)</span> <span data-sanitized-class="p">{</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="n">Info</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="p">{},</span> <span data-sanitized-class="n">Info</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">GUID</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="n">SubStr</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">Trim</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">v</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="mi">1</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">36</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">Info</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Default</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="o">!!</span><span data-sanitized-class="n">InStr</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">v</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"*"</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">Info</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Name</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="n">Trim</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">StrSplit</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">SubStr</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">v</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">InStr</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">v</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"("</span><span data-sanitized-class="p">)</span><span data-sanitized-class="o">+</span><span data-sanitized-class="mi">1</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="s2">")"</span><span data-sanitized-class="p">)[</span><span data-sanitized-class="mi">1</span><span data-sanitized-class="p">]),</span> <span data-sanitized-class="n">List</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Push</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">Info</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="k">if</span> <span data-sanitized-class="p">(</span><span data-sanitized-class="n">Info</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Default</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="n">ActivePlan</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="n">Info</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">}</span> <span data-sanitized-class="k">return</span> <span data-sanitized-class="n">List</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="p">}</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="p">;</span><span data-sanitized-class="n">executes</span> <span data-sanitized-class="n">cmd</span> <span data-sanitized-class="n">command</span> <span data-sanitized-class="ow">and</span> <span data-sanitized-class="k">return</span> <span data-sanitized-class="n">the</span> <span data-sanitized-class="n">result</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">CMD</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">CMD</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="s2">""</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">Encoding</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="s2">"UTF-8"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">ByRef</span> <span data-sanitized-class="n">ExitCode</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="s2">""</span><span data-sanitized-class="p">)</span> <span data-sanitized-class="p">{</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Kernel32.dll\CreatePipe"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"PtrP"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">hReadPipe</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"PtrP"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">hWritePipe</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"UInt"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Kernel32.dll\SetHandleInformation"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">hWritePipe</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"UInt"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">1</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"UInt"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">1</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">Size</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="n">VarSetCapacity</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">STARTUPINFO</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">A_PtrSize</span><span data-sanitized-class="o">=</span><span data-sanitized-class="mi">4</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">68</span><span data-sanitized-class="p">:</span><span data-sanitized-class="mi">104</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">NumPut</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">Size</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">STARTUPINFO</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"UInt"</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">NumPut</span><span data-sanitized-class="p">(</span><span data-sanitized-class="mh">0x100</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">STARTUPINFO</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">A_PtrSize</span><span data-sanitized-class="o">=</span><span data-sanitized-class="mi">4</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">44</span><span data-sanitized-class="p">:</span><span data-sanitized-class="mi">60</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"UInt"</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">NumPut</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">hStdInRd</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">STARTUPINFO</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">A_PtrSize</span><span data-sanitized-class="o">=</span><span data-sanitized-class="mi">4</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">56</span><span data-sanitized-class="p">:</span><span data-sanitized-class="mi">80</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">NumPut</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">hWritePipe</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">STARTUPINFO</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">A_PtrSize</span><span data-sanitized-class="o">=</span><span data-sanitized-class="mi">4</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">60</span><span data-sanitized-class="p">:</span><span data-sanitized-class="mi">88</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">NumPut</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">hWritePipe</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">STARTUPINFO</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">A_PtrSize</span><span data-sanitized-class="o">=</span><span data-sanitized-class="mi">4</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">64</span><span data-sanitized-class="p">:</span><span data-sanitized-class="mi">96</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">pi</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="n">CreateProcess</span><span data-sanitized-class="p">(,</span> <span data-sanitized-class="n">ComSpec</span> <span data-sanitized-class="s2">" /c "</span> <span data-sanitized-class="n">CMD</span><span data-sanitized-class="p">,,,,</span> <span data-sanitized-class="mh">0x08000000</span><span data-sanitized-class="p">,,,</span> <span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">STARTUPINFO</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Kernel32.dll\CloseHandle"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">hWritePipe</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">Size</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="n">VarSetCapacity</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">Buff</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">4095</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="k">while</span> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Kernel32.dll\ReadFile"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">hReadPipe</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">Buff</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"UInt"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">Size</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"PtrP"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">Bytes</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="n">OutputVar</span> <span data-sanitized-class="o">.=</span> <span data-sanitized-class="n">StrGet</span><span data-sanitized-class="p">(</span><span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">Buff</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">Bytes</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">Encoding</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Kernel32.dll\CloseHandle"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">pi</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">handle</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Kernel32.dll\CloseHandle"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">hReadPipe</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="k">return</span> <span data-sanitized-class="n">OutputVar</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Kernel32.dll\GetExitCodeProcess"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">pi</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">handle</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"UIntP"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">ExitCode</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="p">}</span> <span data-sanitized-class="n">CreateProcess</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">ApplicationName</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="s2">""</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">ByRef</span> <span data-sanitized-class="n">CommandLine</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="s2">""</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">ProcessAttributes</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">ThreadAttributes</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">InheritHandles</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="bp">true</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">CreationFlags</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="mh">0x08000000</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="ne">Environment</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">CurrentDirectory</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="s2">""</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">StartupInfo</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">)</span> <span data-sanitized-class="p">{</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="n">VarSetCapacity</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">PROCESS_INFORMATION</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">A_PtrSize</span><span data-sanitized-class="o">=</span><span data-sanitized-class="mi">4</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">16</span><span data-sanitized-class="p">:</span><span data-sanitized-class="mi">24</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">r</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="n">DllCall</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s2">"Kernel32.dll\CreateProcess"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">ApplicationName</span><span data-sanitized-class="o">=</span><span data-sanitized-class="s2">""</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">0</span><span data-sanitized-class="p">:</span><span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">ApplicationName</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">CommandLine</span><span data-sanitized-class="o">=</span><span data-sanitized-class="s2">""</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">0</span><span data-sanitized-class="p">:</span><span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">CommandLine</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">ProcessAttributes</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">ThreadAttributes</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Int"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">!!</span><span data-sanitized-class="n">InheritHandles</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"UInt"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">CreationFlags</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="ne">Environment</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">CurrentDirectory</span><span data-sanitized-class="o">=</span><span data-sanitized-class="s2">""</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">0</span><span data-sanitized-class="p">:</span><span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">CurrentDirectory</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">StartupInfo</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="o">&amp;</span><span data-sanitized-class="n">PROCESS_INFORMATION</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="k">return</span> <span data-sanitized-class="n">r</span><span data-sanitized-class="err">?</span><span data-sanitized-class="p">{</span><span data-sanitized-class="n">HANDLE</span><span data-sanitized-class="p">:</span> <span data-sanitized-class="n">NumGet</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">PROCESS_INFORMATION</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="mi">0</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">hThread</span><span data-sanitized-class="p">:</span> <span data-sanitized-class="n">NumGet</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">PROCESS_INFORMATION</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">A_PtrSize</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">)</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> <span data-sanitized-class="p">,</span> <span data-sanitized-class="n">ID</span><span data-sanitized-class="p">:</span> <span data-sanitized-class="n">NumGet</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">PROCESS_INFORMATION</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">A_PtrSize</span><span data-sanitized-class="o">=</span><span data-sanitized-class="mi">4</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">8</span><span data-sanitized-class="p">:</span><span data-sanitized-class="mi">16</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">),</span> <span data-sanitized-class="n">ThreadID</span><span data-sanitized-class="p">:</span> <span data-sanitized-class="n">NumGet</span><span data-sanitized-class="p">(</span><span data-sanitized-class="n">PROCESS_INFORMATION</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">A_PtrSize</span><span data-sanitized-class="o">=</span><span data-sanitized-class="mi">4</span><span data-sanitized-class="err">?</span><span data-sanitized-class="mi">12</span><span data-sanitized-class="p">:</span><span data-sanitized-class="mi">24</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="s2">"Ptr"</span><span data-sanitized-class="p">)}:</span><span data-sanitized-class="mi">0</span><span data-sanitized-class="p">,</span> <span data-sanitized-class="n">ErrorLevel</span> <span data-sanitized-class="p">:</span><span data-sanitized-class="o">=</span> <span data-sanitized-class="o">!</span><span data-sanitized-class="n">r</span>
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="p">}</span>
</span></span></code></pre></div><h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/B1iRxoyT4EA?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/win10-to-win11/
title: Should you switch from Windows 10 to Windows 11
link: https://christitus.com/win10-to-win11/
hash: "ڕ�Z��Ct淞8�
attributes: {"enclosures":[]}
content:
<p>The question isn’t if you should switch, but if you CAN switch. Windows 11 does a lot of things right as most of it’s systems are identical to 10. However, there are some drawbacks which we need to dive into.</p>
<h2 data-sanitized-id="windows-11-requirements">Windows 11 Requirements</h2>
<p>There are two issues with Windows 11 that will catch some older computers.</p>
<ul>
<li>CPU Requirement: Intel 8th Generation and AMD 2nd Generation</li>
<li>UEFI Secure Boot with TPM 2.0 Chip</li>
</ul>
<p>However, these requirements are artificial and can easily be bypassed. With these Steps:</p>
<ol>
<li>Launch Command Prompt with Shift + F10</li>
<li>Type <code>regedit</code> and launch Reg Editor</li>
<li>Add the following KEY (folder) HKEY_Local_Machine -&gt; System -&gt; Setup — Name the key <code>MoSetup</code></li>
<li>Add the following Value (DWORD) Name = <code>AllowUpgradesWithUnsupportedTPMOrCPU</code>
Value = <code>1</code></li>
<li>Close Regedit and continue install</li>
</ol>
<h2 data-sanitized-id="why-upgrade">Why Upgrade</h2>
<p>Here are the main reason to upgade to Windows 11. <strong>The Look</strong></p>
<p>We can go round and round about the marketing of Microsoft and all the bullshit they like to say. However, at the end of the day if you want a new look and a cleaner looking OS… Windows 11 is it. The better sounds, rounded aesthetic, auto-hdr for games, and overall more cohesive visual experience is what Windows 11 does well.</p>
<p>What about all the other features Microsoft shills say are important and are NOT?</p>
<ol>
<li>Performance - I have seen negligible performance gains and even worse performance in some instances</li>
<li>Widgets - This just reminds of Vista sidebar all over again. They are all sizzle and no steak.</li>
<li>Security - Another marketing ploy that promotes it being more secure. While technically true, it mainly applies to the startup of your pc with TPM and Secureboot. Which frankly, doesn’t matter as I can easily crack your Windows security with it’s terrible SAM file exploits that are well documented and present in Windows 11.</li>
<li>Teams colloboration - Just more pre-installed crap that you probably won’t use.</li>
</ol>
<p>These are all just meh points that I view the exact same as Windows 10.</p>
<h2 data-sanitized-id="why-not-to-upgrade">Why NOT to Upgrade</h2>
<p>Windows 11 may look objectively better, but there are also some downsides. Here are the big ones I hate.</p>
<ol>
<li>Taskbar - It is just plain awful as it is based on a new UWP platform that isn’t nearly as good as 10’s taskbar. Also you can’t move it to the left, right, or top like you can in 10.</li>
<li>Context Menu - The new look might look cleaner, but is far less functional. I’m working on a tweak to revert this back to the windows 10 menu</li>
<li>Changing Default Apps is awful in Windows 11. Everything is extension based now, where it is program based in Windows 10.</li>
<li>Windows 10 still has support until 2025, so don’t be in a rush to switch.</li>
</ol>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/WBrh-9BdGVQ?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/auto-mount-systemd/
title: Auto Mount with SystemD
link: https://christitus.com/auto-mount-systemd/
hash: ���������5=�0
attributes: {"enclosures":[]}
content:
<p>This shows how to automount remote network drives using systemd and fstab</p>
<h2 data-sanitized-id="automount-using-systemd">Automount using systemd</h2>
<p>Sometimes partitions can fail to mount on startup and some options are needed to fix this. I’ve had two instances where it was needed. One was on a slow 6 TB drive that timed out on occation during boot and I had to <code>sudo mount -a</code> to get it to mount</p>
<p>For this a simple option addition in fstab on a local disk looks like this:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">x-systemd.after=network-online.target,x-systemd.automount
</span></span></code></pre></div><p>Next, I had problems with NFS shares not mounting and I had to expand these option to:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">x-systemd.after=network-online.target,x-systemd.automount,x-systemd.mount-timeout=30,_netdev
</span></span></code></pre></div><p>This makes the <code>/etc/fstab</code> entry look like this:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">10.0.0.10:/volume2/Images /media/images nfs x-systemd.after=network-online.target,x-systemd.automount,x-systemd.mount-timeout=30,_netdev 0 0
</span></span></code></pre></div><p><em>Source: <a href="https://wiki.archlinux.org/title/Fstab#Automount_with_systemd">https://wiki.archlinux.org/title/Fstab#Automount_with_systemd</a></em></p>


guid: https://christitus.com/using-github-correctly/
title: You are using GitHub WRONG!
link: https://christitus.com/using-github-correctly/
hash: �����f�������
attributes: {"enclosures":[]}
content:
<p>GitHub is an incredible powerful tool, but using it in command line can be frustrating. So instead of doing something dumb like using SSH agent workarounds or Token exporting shenanigans to make <code>git</code> work in command line. We are going to use an amazing utility called <code>gh</code> to authenticate.</p>
<p>Now before we continue, you might be thinking, I can just use password authentication. Well, Here is the error you get if you try that non-sense.</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">Support for password authentication was removed on August 13, 2021.
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">Please use a personal access token instead.
</span></span></code></pre></div><h2 data-sanitized-id="gh-overview">GH Overview</h2>
<p>This utility was created by GitHub directly to manage authentication and has a lot of fantastic features. So lets dive in…</p>
<h3 data-sanitized-id="install-gh">Install GH</h3>
<p>Debian Linux</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">sudo apt install gh
</span></span></code></pre></div><p>Windows</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">winget install -e GitHub.cli
</span></span></code></pre></div><p>Mac</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">brew install gh
</span></span></code></pre></div><h3 data-sanitized-id="first-time-setup">First Time Setup</h3>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">gh auth login
</span></span></code></pre></div><p>Follow all the prompts and I’d recommend setting SSH as auth method.</p>
<h3 data-sanitized-id="set-cli-to-use-ssh">Set CLI to use SSH</h3>
<p>If you forgot to set the protocol during the setup in <code>gh auth login</code> use this command to set it.</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">gh config set -h github.com git_protocol ssh
</span></span></code></pre></div><h4 data-sanitized-id="set-the-repo-to-use-gh-auth">Set the Repo to use GH auth</h4>
<p>Set the project repository for SSH auth</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">git remote set-url origin git@github.com:ChrisTitusTech/project.git
</span></span></code></pre></div><h2 data-sanitized-id="using-github-desktop">Using GitHub Desktop</h2>
<p>There is nothing wrong with GitHub desktop and sometimes I use it when I’m reviewing my commits or pushes. It is a great graphical representation of how fetch/pull or commit/push work on GitHub. However, it is considerably slower, than just typing it in via terminal with a simple git push or git pull. This also blurs the lines between <code>git add .</code>, <code>git commit -a -m "message"</code>, and <code>git push</code> when adding to a project.</p>
<h2 data-sanitized-id="using-github-properly">Using GitHub properly</h2>
<p>If you are anything like me, when I started using GitHub I did so many things incorrectly and still do today! However, I’m slowly seeing the error of my ways and these are the big things I missed.</p>
<h3 data-sanitized-id="not-combining-git-add-commit-and-push">Not combining git add, commit, and push</h3>
<p>When I first started these three commands seemed like they all pretty much did the same thing. I JUST WANT TO ADD TO MY PROJECT! Why is it like this?</p>
<p>Then I started doing some collaborative work and realized I’m terrible and most other people are too on GitHub, because we are all doing it WRONG!</p>
<p>So how should we be using <code>git</code>?</p>
<p><strong>COMMIT OFTEN and after every change in code</strong></p>
<p>This should be everyone mantra, including me, but often I get caught up in my work and don’t do it. So what is the big deal? Well, if you bundle a ton of different changes into one commit… you have to revert ALL those changes if you had one bad one. Breaking those up into different commits, you could just revert the bad code. That can literally save a project! I learned this when I bundled a ton of changes into my ArchTitus project and basically turned it into a spaghetti string of code that I hate looking at and debugging. To continue that project, I’d have to rebase and wipe out a ton of progress I’ve made and other people have contributed. This makes everyone mad and is simply not fun.</p>
<p>So follow that golden rule and realize you will fail at it, but realize your failures and do better the next time is how we elevate ourselves to the next level.</p>
<h3 data-sanitized-id="quick-aliases">Quick Aliases</h3>
<p>These are some quality of life improvements that will make using git from command line so much better.</p>
<p>I use bashrc these days and these are some aliases I added to my <code>~/.bashrc</code> file.</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">gcom() {
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> git add .
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> git commit -m "$1"
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> }
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">lazyg() {
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> git add .
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> git commit -m "$1"
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> git push
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">}
</span></span></code></pre></div><p>Now in a perfect world I would be using <code>gcom "commit message"</code> several times a day and then finally using <code>lazyg "last commit of the day"</code> to push my changes public after I’m done. However, the world and myself are far from perfect, but understanding what perfection would look like will help you know when you aren’t.</p>
<h3 data-sanitized-id="helping-projects">Helping Projects</h3>
<p>A poorly documented issue is pointless and just gets closed in every project. Don’t be that person! Document what you can and if you noticed a recent commit messed something up reference it by doing a copy paste of the Pull Request # like so. First, get to this screen by clicking “## commits” in top right of the project main page. Then copy the SHA from the “bad” commit.</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/github/git-commits.webp" alt="git-commit" data-sanitized-class="img-fluid"> </p>
<p>From here, you simply make your issue and paste that long sha hash in where you want to reference it. Don’t worry the numbers will be truncated and it will look awesome in the issue page.</p>
<p>Also make sure you don’t just put a WALL OF TEXT! Try to make your issue readable by breaking up your issue if it is more than several sentences long. This just makes it more readable and make it as concise as possible.</p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/f7xZivqLZxc?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/windows-inside-linux/
title: Setting up Windows inside Linux
link: https://christitus.com/windows-inside-linux/
hash: ��n69!�;�;P�3
attributes: {"enclosures":[]}
content:
<p>Running Windows inside of Linux is essential for those that are trying to convert to Linux. There will always be a transition period and need to fallback to Windows. It is also nice to have for many Windows only programs that you may need while inside Linux.</p>
<p>If you haven’t ever installed QEMU before, here is an article to get that setup @ <a href="https://christitus.com/vm-setup-in-linux/">https://christitus.com/vm-setup-in-linux/</a></p>
<h2 data-sanitized-id="optimizing-windows-vm">Optimizing Windows VM</h2>
<p>First you need to install the VirtIO tools, which can be difficult to track down. My favorite way is to run the exe file from <a href="https://github.com/virtio-win/virtio-win-pkg-scripts">https://github.com/virtio-win/virtio-win-pkg-scripts</a> but many guides use the iso file also provided at this link.</p>
<p>Another good resource for obtaining VirtIO drivers is from the proxmox wiki <a href="https://pve.proxmox.com/wiki/Windows_VirtIO_Drivers">https://pve.proxmox.com/wiki/Windows_VirtIO_Drivers</a></p>
<h3 data-sanitized-id="enable-qemu-guest-agent">Enable QEMU Guest Agent</h3>
<p>Now you need to modify the VM to make use of the guest agent drivers. We need to add the qemu agent channel. Add Hardware -&gt; Channel and copy these settings</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/qemu/guest-agent.webp" alt="guest-agent" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="passing-devices-through">Passing Devices Through</h2>
<p>There are two main devices that you may want to pass through to a Windows VM. Hard Drives and Graphics Cards. Passing through a hard drive will give a good uplift in processing power and general VM response. The graphics card is very technical and frankly not recommended, but can be doable on some systems.</p>
<h3 data-sanitized-id="dedicated-hard-drive">Dedicated Hard Drive</h3>
<p>Simply select Add Hardware -&gt; Storage and copy these settings</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/qemu/hdd.webp" alt="hdd" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="dedicated-graphics-card">Dedicated Graphics Card</h3>
<p>This is referred to as PCI Passthrough and can be dicey on some systems. I’ve had some motherboards that can’t do this and others that can. The best guide and scripts I’ve found are from HikariKnight and his GitHub @ <a href="https://github.com/HikariKnight/quickpassthrough">https://github.com/HikariKnight/quickpassthrough</a></p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/6KqqNsnkDlQ?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/clickpaste/
title: ClickPaste the Best Program You Never Heard Of
link: https://christitus.com/clickpaste/
hash: ����=����)?3
attributes: {"enclosures":[]}
content:
<p>This program is free and open source, while being absolutely a life saver. I use it for VNC sessions and when dealing with VMs through my host computer.</p>
<blockquote data-sanitized-class="twitter-tweet"><p lang="en" dir="ltr">No more typing crap out when I use VNC or VM Sessions on the Host. Thanks ClickPaste (Free and Open Source)<br><br>GitHub Link: &lt;<a href="https://t.co/S3M69kQF3s">https://t.co/S3M69kQF3s</a>&gt;</p>— Chris Titus Tech (@christitustech) <a href="https://twitter.com/christitustech/status/1572985183594242048?ref_src=twsrc%5Etfw">September 22, 2022</a></blockquote>

<p>GitHub Link: <a href="https://github.com/Collective-Software/ClickPaste">https://github.com/Collective-Software/ClickPaste</a></p>
<h2 data-sanitized-id="install">Install</h2>
<p>Simply extract the zip file from <a href="https://github.com/Collective-Software/ClickPaste/releases">https://github.com/Collective-Software/ClickPaste/releases</a> and run ClickPaste.exe</p>
<h3 data-sanitized-id="running-at-startup">Running at Startup</h3>
<p>The best way I’ve found is to create a shortcut to ClickPaste.exe then drag&amp;drop that into shell:startup</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/startup.webp" alt="startup" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="usage">Usage</h2>
<p>First of course, you need to have some text in your clipboard. Then:</p>
<ol>
<li>Click the target notification icon to begin:</li>
</ol>
<p><a href="https://github.com/Collective-Software/ClickPaste/blob/master/doc/ClickToTarget.webp"><img loading="lazy" src="https://github.com/Collective-Software/ClickPaste/raw/master/doc/ClickToTarget.webp" alt="Click to choose a target" data-sanitized-class="img-fluid"> </a></p>
<ol start="2">
<li>Click to choose a location you want to paste the text:</li>
</ol>
<p><a href="https://github.com/Collective-Software/ClickPaste/blob/master/doc/ClickToPaste.webp"><img loading="lazy" src="https://github.com/Collective-Software/ClickPaste/raw/master/doc/ClickToPaste.webp" alt="Click to choose a location to paste" data-sanitized-class="img-fluid"> </a></p>
<ol start="3">
<li>Your clipboard contents should be typed as keystrokes onto the window you selected:</li>
</ol>
<p><a href="https://github.com/Collective-Software/ClickPaste/blob/master/doc/Pasted.webp"><img loading="lazy" src="https://github.com/Collective-Software/ClickPaste/raw/master/doc/Pasted.webp" alt="Your clipboard is typed as keystrokes onto the window you selected" data-sanitized-class="img-fluid"> </a></p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/i7cgD_KCh10?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/be-a-better-programmer/
title: Be a Better Programmer
link: https://christitus.com/be-a-better-programmer/
hash: �W������g2a�����
attributes: {"enclosures":[]}
content:
<p>Many people want to be a programmer, but often find themselves flailing around in the dark. These are the things I’ve done to help aid myself in coding more, learning new things, and just becoming a better programmer.</p>
<h2 data-sanitized-id="use-github-daily">Use GitHub DAILY!</h2>
<p>Ok, maybe you don’t have to use GitHub specifically but choose a platform or host your own git and use it as much as you can. Finish a feature or part of a project… COMMIT IT! This makes it very easy when you leave and come back to the project.</p>
<p>Collaborators can find your project and contribute or even fix errors you have made, which helps you improve quickly.</p>
<h2 data-sanitized-id="track-your-progress">Track Your Progress</h2>
<p>I’m constantly bouncing around and when I started I was getting discouraged. I’d start a project, move on or get busy, and not look at it again or even code for weeks!</p>
<p>To fix this, I ended up using a free tool called wakatime. This showed me what projects I was spending time on, editors I used, languages, and spit it all out on a dashboard.</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/wakatime.webp" alt="wakatime" data-sanitized-class="img-fluid"> </p>
<p>Check out my GitHub page @ <a href="https://github.com/christitustech">https://github.com/christitustech</a> for all my stats and share yours down below in the comments! I am extremely competitive and I code more knowing I have people watching my progress.</p>
<p><em>Note: As a bonus, check out my hidden profile readme @ <a href="https://github.com/christitustech/christitustech">https://github.com/christitustech/christitustech</a> and steal my auto generated setup!</em></p>
<h2 data-sanitized-id="setup-your-ideal-workflow">Setup Your Ideal Workflow</h2>
<p>You have to like your work or at least enjoy parts of it. I follow this phrase and make sure I find something I do daily that I enjoy.</p>
<blockquote>
<p>“Focus on the Journey, not the destination. Joy is not found in finishing an activity, but doing it!” - Greg Anderson</p>
</blockquote>
<p>It’s not to say that you will enjoy everything, because on the flip side of that phrase I made my own.</p>
<blockquote>
<p>“You have to shovel a little shit in every job” - Chris Titus</p>
</blockquote>
<p>The point being is there will be things you will hate, but just make sure it’s not all bad. For example, I love VIM as it makes me just feel cool even though sometimes I am slower than if I just used VSCODE with the proper extension. The reason I do this is because of two reasons:</p>
<ol>
<li>Eventually I will optimize VIM enough that I’m faster than VSCODE</li>
<li>I just feel awesome typing and coding in VIM</li>
</ol>
<p>This isn’t a advertisement for you to use VIM! In fact, I’d recommend you NOT use VIM unless these things interest you and you want to go down that rabbit hole. It depends on you!</p>
<p>Focus on what works for you and what you enjoy as far as an environment. This is more about how you <em>FEEL</em> than practical application. The better you feel in your workflow, the better your work product!</p>
<h2 data-sanitized-id="set-goals">Set Goals</h2>
<p>If you are going to improve in anything you need to have a goal. For me it is all about putting in the time consistently. That is true with everything in life that you go to learn. <strong>MORE TIME = BETTER RESULTS</strong></p>
<p>Example Goals:</p>
<ul>
<li>3 hours of coding per day</li>
<li>500 Git Contributions in 2022</li>
</ul>
<p>Once you set these goals look at how you are doing. I recommend both short term and long term goals like I listed above.</p>
<p>Now, go code!</p>


guid: https://christitus.com/macos-on-linux/
title: Macos on Linux
link: https://christitus.com/macos-on-linux/
hash: S�R |AP��-�KB
attributes: {"enclosures":[]}
content:
<p>This shows you all the steps to install a MacOS VM in Linux QEMU using Virtual Machine Manager or virt-manager.</p>
<p>Newer Source, but not as polished: <a href="https://github.com/kholia/OSX-KVM">https://github.com/kholia/OSX-KVM</a>
Mac KVM Repository: <a href="https://github.com/foxlet/macOS-Simple-KVM">https://github.com/foxlet/macOS-Simple-KVM</a></p>
<h2 data-sanitized-id="requirements">Requirements</h2>
<ul>
<li>A modern Linux distribution. E.g. Ubuntu 20.04 LTS 64-bit or later.</li>
<li>QEMU &gt;= 4.2.0</li>
<li>A CPU with Intel VT-x / AMD SVM support is required (<code>grep -e vmx -e svm /proc/cpuinfo</code>)</li>
</ul>
<h2 data-sanitized-id="installation-preparation">Installation Preparation</h2>
<p>Install QEMU and modify your user using <a href="https://christitus.com/vm-setup-in-linux">https://christitus.com/vm-setup-in-linux</a> Guide.</p>
<p>Clone this repository on your QEMU system. Files from this repository are used in the following steps.</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">cd ~
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">git clone --depth 1 --recursive https://github.com/foxlet/macOS-Simple-KVM
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">cd macOS-Simple-KVM
</span></span></code></pre></div><h2 data-sanitized-id="installation-media">Installation Media</h2>
<p>This downloads our installation media and I’d recommend using Catalina for compatibility and performance.</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">./jumpstart.sh --catalina
</span></span></code></pre></div><p><em>Note: Modern NVIDIA GPUs are supported on HighSierra but not on later
versions of macOS. Recommended PCI Passthrough GPU is 5700XT as this works on Catalina and above. If you go with a 6000 Series Card only certain ones will work on Big Sur and Monterey, but not earlier releases.</em></p>
<h2 data-sanitized-id="virtual-machine-setup">Virtual Machine Setup</h2>
<p>I recommend using Virtual Machine Manager (virt-manager) as it has a fantastic interface and Simple-KVM does a great job with their setup script. Simply type the following to get the macOS VM setup:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">sudo ./make.sh --add
</span></span></code></pre></div><h3 data-sanitized-id="vm-modification">VM Modification</h3>
<p>Before we can start out VM we have to have a hard drive to load it. You have two options: physical hard drive passthrough or qcow2 file.</p>
<p>Obviously, the physical drive is considerably faster, but not possible in some instances such as laptops or if you can’t afford a secondary drive.</p>
<h4 data-sanitized-id="physical-hard-drive-passthrough">Physical Hard Drive Passthrough</h4>
<p>This is pretty simple as you just click Add Hardware -&gt; Storage and then specify your hard drive.</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/qemu/hdd.webp" alt="hdd" data-sanitized-class="img-fluid"> </p>
<p><em>Note: while you can use drive short names <code>/dev/sda</code> I’d recommend using <code>/dev/disk/by-id/HARDDRIVESERIAL</code> as this doesn’t ever change.</em></p>
<h4 data-sanitized-id="qcow2-file-for-hard-drive">QCOW2 File for Hard Drive</h4>
<p>This is even simpler as you just click Add Hardware -&gt; Storage and create new file. Just make sure you put it on at least a SSD or a nvme drive as it will be super slow if you don’t.</p>
<h2 data-sanitized-id="install-process">Install Process</h2>
<p>Boot your machine and select the OS Install Partition on startup.</p>
<p>Use the <code>Disk Utility</code> tool within the macOS installer to partition, and
format the virtual disk attached to the macOS VM.</p>
<p><strong>TIP: Using a non-APFS filesystem is recommended.</strong></p>
<p>Go ahead, and install macOS</p>
<h3 data-sanitized-id="post-installation">Post-Installation</h3>
<h4 data-sanitized-id="bridge-networking">Bridge Networking</h4>
<p><em>First</em> find your card interface name</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">ip a
</span></span></code></pre></div><p>Example: (Interface name is enp7s0)</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">1: lo: &lt;LOOPBACK,UP,LOWER_UP&gt; mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> inet 127.0.0.1/8 scope host lo
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> valid_lft forever preferred_lft forever
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> inet6 ::1/128 scope host
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> valid_lft forever preferred_lft forever
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">2: enp7s0: &lt;NO-CARRIER,BROADCAST,MULTICAST,UP&gt; mtu 1500 qdisc fq_codel state DOWN group default qlen 1000
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> link/ether 24:bb:ee:55:22:33 brd ff:ff:ff:ff:ff:ff
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> inet 10.0.0.99/24 brd 10.0.0.255 scope global
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> valid_lft forever preferred_lft forever
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> inet6 ::1/128 scope host
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> valid_lft forever preferred_lft forever
</span></span></code></pre></div><p><em>Second</em> Update <code>/etc/network/interfaces</code></p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">source /etc/network/interfaces.d/*
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"># The loopback network interface
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">auto lo
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">iface lo inet loopback
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"># The primary network interface - old entry
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"># allow-hotplug enp7s0
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"># iface enp7s0 inet dhcp
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"># The primary network interface - new entry
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"># DEVICENAME = enp7so for this pc and MYUSERNAME need to be $(whoami)
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">auto br0
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">iface br0 inet dhcp
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> bridge_ports DEVICENAME tap0
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">auto tap0
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">iface tap0 inet dhcp
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> pre-up tunctl -u MYUSERNAME -t tap0
</span></span></code></pre></div><p><em>Lastly</em> Restart the networking service or reboot computer. Then change your VM NIC (Network Hardware) to <code>br0</code> interface.</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">sudo systemctl restart networking
</span></span></code></pre></div><h4 data-sanitized-id="other-considerations">Other Considerations</h4>
<ul>
<li>GPU Passthrough (Requires two Graphics Cards) - <a href="https://github.com/foxlet/macOS-Simple-KVM/blob/master/docs/guide-passthrough.md">https://github.com/foxlet/macOS-Simple-KVM/blob/master/docs/guide-passthrough.md</a></li>
<li>Changing Screen Resolution - <a href="https://github.com/foxlet/macOS-Simple-KVM/blob/master/docs/guide-screen-resolution.md">https://github.com/foxlet/macOS-Simple-KVM/blob/master/docs/guide-screen-resolution.md</a></li>
<li>Optimizing System Performance - <a href="https://github.com/sickcodes/osx-optimizer">https://github.com/sickcodes/osx-optimizer</a></li>
<li>Sound - Two methods, Pass the audio through HDMI if using GPU Passthrough OR Pass through a USB sound card that is macOS compatible
<ul>
<li><em>Note: There is a way to use Voodoo kext or AppleALC, but it will crackle and sound terrible</em></li>
</ul>
</li>
</ul>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/dMLNP6FfhkI?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/ntlite-guide/
title: NTLite Guide
link: https://christitus.com/ntlite-guide/
hash: /v�0�C��72��5�
attributes: {"enclosures":[]}
content:
<p>This Guide shows you the easiest way to configure Windows and make an ISO with NTLite.</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/ntlite/ntlite.webp" alt="ntlite" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="overview">Overview</h2>
<p>NTLite is the best program for making an ISO for a Windows Environment. You have every option you could need, but is often overwhelming for new users. It’s why when you pull up NTLite Guide on YouTube you get 30+ Minute long videos.</p>
<p>These options are great for IT Professionals, but for a normal user it is too much and most normal users just end up with a broken Windows install ISO.</p>
<p>That is where import existing profiles that have already been tested by the NTLite community comes into play. You simply unpack the official ISO, apply the profile, and make your custom ISO!</p>
<h2 data-sanitized-id="prerequisites">Prerequisites</h2>
<ul>
<li>NTLite costs $40 for a home user and is worth every penny in my opinion. Download and buy from their website <a href="https://ntlite.com/">https://ntlite.com</a></li>
<li>Download the presets to import from my GitHub Repository <a href="https://github.com/ChrisTitusTech/ntlite-configs">https://github.com/ChrisTitusTech/ntlite-configs</a> - Credit for it’s creation goes to Txmmy from NTLite forums. I’m using GitHub to maintain and update it based on user requests.</li>
<li>Install 7zip to extract files from Windows ISO - Windows Terminal install with <code>winget install --id=7zip.7zip -e</code></li>
<li>Download the official Windows ISO <a href="https://www.microsoft.com/en-us/software-download/windows10">https://www.microsoft.com/en-us/software-download/windows10</a></li>
</ul>
<p><img loading="lazy" src="https://christitus.com/images/2022/ntlite/download-iso.webp" alt="ms-download" data-sanitized-class="img-fluid"> </p>
<p><em>Note: In windows it will default to “Media Creation Tool” to make the iso (see above) You can use Mac/Linux to direct download ISO or User Agent Switch Browser Extension to trick Microsoft</em></p>
<h2 data-sanitized-id="the-setup">The Setup</h2>
<p>These are the following steps for the NTLite to make a proper ISO. Extract the Official ISO, Add ISO Files, Load Files, Apply Imported XML Profile, Save New ISO!</p>
<h3 data-sanitized-id="extract-windows-iso-file">Extract Windows ISO File</h3>
<p>Right click your <code>windows.iso</code> file and select the “extract files”. <em>If you don’t see the extract files in the context menu then you did NOT install 7zip OR in Windows 11 you need to select “show more options”</em></p>
<h3 data-sanitized-id="preparing-ntlite">Preparing NTLite</h3>
<p>Look at the image below and add the files you extracted above. Follow these steps in order:</p>
<ol>
<li>Select Folder from Add Menu</li>
<li>Delete unneeded Windows versions <em>Ex. Windows Pro N or Windows Educational</em></li>
</ol>
<ul>
<li>Select the Version you DO NEED after before move to Apply</li>
<li>Import the Presets XML File</li>
</ul>
<ol start="3">
<li>Apply to load the files <em>Note: This will take a LONG time 5-10 minutes on fast systems</em></li>
</ol>
<p><img loading="lazy" src="https://christitus.com/images/2022/ntlite/import-image.webp" alt="import-image" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="customize-image">Customize Image</h3>
<p>There are a TON of customizations you can do here, but DO NOT OVER DO IT! Past the imported presets that automatically set the services you need and a few other quality of life settings, you should also import the drivers for the system you are installing it on. This speeds up the post-install time.</p>
<p>Once you have everything the way you want it, simply apply the settings.</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/ntlite/apply-settings.webp" alt="apply-settings" data-sanitized-class="img-fluid"> </p>
<p><em>Note: This is the longest of all the stages and took almost 15 minutes on a good system</em></p>
<h4 data-sanitized-id="dummy-keys-for-windows-10">Dummy Keys for Windows 10</h4>
<p>Here is the list of generic keys for various Windows 10 Editions.</p>
<table>
<thead>
<tr>
<th>Windows 10 Edition</th>
<th>Generic Keys</th>
</tr>
</thead>
<tbody>
<tr>
<td>Windows 10 Home</td>
<td>YTMG3-N6DKC-DKB77-7M9GH-8HVX7</td>
</tr>
<tr>
<td>Windows 10 Home N</td>
<td>4CPRK-NM3K3-X6XXQ-RXX86-WXCHW</td>
</tr>
<tr>
<td>Windows 10 Pro</td>
<td>VK7JG-NPHTM-C97JM-9MPGT-3V66T</td>
</tr>
<tr>
<td>Windows 10 Pro N</td>
<td>2B87N-8KFHP-DKV6R-Y2C8J-PKCKT</td>
</tr>
<tr>
<td>Windows 10 Pro for Workstations</td>
<td>DXG7C-N36C4-C4HTG-X4T3X-2YV77</td>
</tr>
<tr>
<td>Windows 10 Pro N for Workstations</td>
<td>WYPNQ-8C467-V2W6J-TX4WX-WT2RQ</td>
</tr>
<tr>
<td>Windows 10 Pro Education</td>
<td>8PTT6-RNW4C-6V7J2-C2D3X-MHBPB</td>
</tr>
<tr>
<td>Windows 10 Pro Education N</td>
<td>GJTYN-HDMQY-FRR76-HVGC7-QPF8P</td>
</tr>
<tr>
<td>Windows 10 Education</td>
<td>YNMGQ-8RYV3-4PGQ3-C8XTP-7CFBY</td>
</tr>
<tr>
<td>Windows 10 Education N</td>
<td>84NGF-MHBT6-FXBX8-QWJK7-DRR8H</td>
</tr>
<tr>
<td>Windows 10 Enterprise</td>
<td>XGVPP-NMH47-7TTHJ-W3FW7-8HV2C</td>
</tr>
<tr>
<td>Windows 10 Enterprise N</td>
<td>WGGHN-J84D6-QYCPR-T7PJ7-X766F</td>
</tr>
<tr>
<td>Windows 10 Enterprise S</td>
<td>NK96Y-D9CD8-W44CQ-R8YTK-DYJWX</td>
</tr>
<tr>
<td>Windows 10 S</td>
<td>3NF4D-GF9GY-63VKH-QRC3V-7QW8P</td>
</tr>
</tbody>
</table>
<h2 data-sanitized-id="create-the-iso">Create the ISO</h2>
<p>Finally, we are ready to make the ISO. Just Click “Create ISO” and select the location to save it.</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/ntlite/create-iso.webp" alt="create-iso" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="next-steps">Next Steps</h2>
<p>After you have made your ISO file you are now ready to install and finish your configuration</p>
<p>Check out my Windows Utility script and set the Security Updates, Install Extra Programs, and more @ <a href="https://christitus.com/windows-tool/">https://christitus.com/windows-tool/</a></p>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/xLCWtC6UYrM?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


