1541 lines
184 KiB
XML
1541 lines
184 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
||
<?xml-stylesheet href="/feed.xsl" type="text/xsl"?>
|
||
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
|
||
<title>hello hello</title>
|
||
<subtitle>Lee Cattarin... on the internet!</subtitle>
|
||
<link href="https://leecat.art/feed.xml" rel="self" />
|
||
<link href="https://leecat.art/" />
|
||
<updated>2026-09-08T00:00:00Z</updated>
|
||
<id>https://leecat.art/</id>
|
||
<author>
|
||
<name>Lee Cattarin</name>
|
||
<email>lee.cattarin@gmail.com</email>
|
||
</author>
|
||
<entry>
|
||
<title>framer accessibility</title>
|
||
<link href="https://leecat.art/framer-accessibility/" />
|
||
<updated>2026-09-08T00:00:00Z</updated>
|
||
<id>https://leecat.art/framer-accessibility/</id>
|
||
<content type="html"><p>This is a work in progress post originally written for a colleague beginning to explore <a href="https://framer.com" target="_blank" rel="external">Framer</a>, a visual site designer with CMS. It walks through some major web accessibility topics, first generally and then as they relate to Framer, with links to relevant resources.</p>
|
||
<h2 id="accessible-from-the-beginning">Accessible from the beginning</h2>
|
||
<p>Accessibility <strong>must</strong> be built from the start of a project. Retrofitting a project to be accessible requires far more effort than designing for accessibility from the start. Building with accessibility in mind prevents time consuming and expensive reworks.</p>
|
||
<h2 id="definitions">Definitions</h2>
|
||
<ul>
|
||
<li><strong>Assistive technology (AT):</strong> &quot;technology used by individuals with (varying levels and kinds of) disabilities in order to perform functions that might otherwise be difficult or impossible. It is an umbrella term for a wide variery of tools, including tools that enable access to information on the Web. ... Keyboards, screen readers, braille displays, voice recognition software, switch controls, and screen magnifiers are examples of high-tech assistive technology. Operating system and browser accessibility display modes (such as dark mode, and Windows High Contrast Mode) are also a form of assistive technology.&quot; (Sara Souiedan, <a href="https://practical-accessibility.today" target="_blank" rel="external">Practical Accessibility</a> - content gated behind paid course)
|
||
<ul>
|
||
<li>See Browsing with Assistive Technology for an overview of some common methods/uses of AT.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Screen readers (SR):</strong> A type of AT aimed at Blind/low vision users which reads aloud page content. Notably, SRs do not simply read page content in order; they have complex shortcuts which allow users to summarize links on a page, skip headline-by-headline, move to landmark sections, and more.</li>
|
||
<li><strong>Web Content Accessibility Guidelines (WCAG):</strong> &quot;the standard that defines how to make Web content more accessible to people with disabilities. It defines a baseline set of guidelines that digital content must meet in order to provide minimum levels of accessibility.&quot; (Sara Souiedan, Practical Accessibility again)</li>
|
||
</ul>
|
||
<h2 id="semantic-html">Semantic HTML</h2>
|
||
<p>Most HTML elements are semantic, that is, they convey meaning. Labeling something an <code>&lt;h1&gt;</code> doesn't just style it like a header; it also means that assistive tech can understand it to be a header (this also helps with SEO - a lot of things that improve accessibility improve SEO as well). See the Mozilla docs for a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements" target="_blank" rel="external">list of semantic HTML elements</a>.</p>
|
||
<p>Notably, <code>&lt;div&gt;</code>s and <code>&lt;span&gt;</code>s are not semantic and convey no meaning. They are used for styling alone.</p>
|
||
<h3 id="semantic-html-in-framer">Semantic HTML in Framer</h3>
|
||
<p>Semantic HTML elements can be applied to any Framer element using the &quot;Accessibility&quot; section in the right-hand sidebar. Read about <a href="https://www.framer.com/help/articles/semantic-tags-navigation-footer/" target="_blank" rel="external">using semantic tags for navigation and footers</a> - this applies to far more than the two elements mentioned.</p>
|
||
<h2 id="reading-order">Reading order</h2>
|
||
<p>The order of elements in an HTML document is referred to as the <strong>reading order</strong>. While visual styling can change the flow of elements in a page, SRs will follow reading order. It's important for your reading order to match the visual flow of elements on the page for two reasons:</p>
|
||
<ol>
|
||
<li>Those elements are presumably in visual order for a reason! A different reading order may make them confusing or totally unfollowable.</li>
|
||
<li>Low vision or partially sighted users who rely on both screen visuals and SRs will suffer if the visual content does not match the audio content.</li>
|
||
</ol>
|
||
<h3 id="reading-order-in-framer">Reading order in Framer</h3>
|
||
<p>Reading order is maintained in Framer in two ways:</p>
|
||
<ol>
|
||
<li>When layouts are applied effectively via the &quot;Layout&quot; section in the right-hand sidebar, the visual order of the elements guides the reading order.</li>
|
||
<li>In the absence of the above, the order of the elements in the left-hand sidebar determines reading order. Notably, reading order seems to go from bottom to top in this case rather than the intuitive top to bottom.</li>
|
||
</ol>
|
||
<h2 id="keyboard-navigation">Keyboard navigation</h2>
|
||
<p>Following from reading order, we reach the concept of keyboard navigation. The ability to navigate the web without a mouse is core to several forms of AT as well as improving quality of life for savvy internet users - and anyone filling out web forms. Using the <code>TAB</code> key to move through a webpage navigates through the reading order, landing on every interactable element it finds. What is an interactable element? There are four kinds:</p>
|
||
<ol>
|
||
<li><strong>Links</strong> bring a user to a new page (or sometimes a different section of the same page)</li>
|
||
<li><strong>Buttons</strong> perform an action without changing pages</li>
|
||
<li><strong>Form controls</strong> allow user input</li>
|
||
<li>Any element with the <strong><code>tabindex</code></strong> attribute set can be tabbed to. Notably, if tabindex is set, interacting with the element should always do something. Use tabindex <em>extremely</em> sparingly and with intention.</li>
|
||
</ol>
|
||
<h3 id="keyboard-navigation-in-framer">Keyboard navigation in Framer</h3>
|
||
<p>Links, buttons, and form controls are tabbable by default. When tagged as the correct HTML element, they will function as expected.</p>
|
||
<p><a href="https://www.framer.com/help/articles/tab-order-customization/" target="_blank" rel="external">Framer supports adding the tabindex attribute</a>. If you <em>must</em> do this for some reason, make sure to set its value to 0 - Framer defaults to 1. 0 will maintain the reading order established by layout and the left-hand sidebar; 1 will place the tabbable element first in the tabbing order.</p>
|
||
<h2 id="keyboard-focus">Keyboard focus</h2>
|
||
<p>When navigating with a keyboard, there should always be visual indication on the screen of where we have navigated to. This indication is referred to as <strong>focus</strong> or the <strong>focus indicator</strong>. Browsers have default focus stylings, usually an outline around the element, but focus can - and frequently should - be customized with CSS. Default focus outlines may not have very high contrast against the elements in your website, and, unless you are testing with many browsers, you can't easily confirm that all default focus indication works well with your color scheme. Additionally, default focus may clash with your site and impact how elements like your forms look in use.</p>
|
||
<h3 id="keyboard-focus-in-framer">Keyboard focus in Framer</h3>
|
||
<p>Framer does not currently allow for customizing keyboard focus in the editor. It must be done using <a href="https://www.framer.com/help/articles/how-to-add-custom-code/" target="_blank" rel="external">custom CSS</a>.</p>
|
||
<p>In my tests, it was possible to clip out the browser default focus outline with certain padding settings. Review your site by tabbing through the page(s), and ensure that a full outline surrounds all interactable elements. If an outline is missing, consider adjusting the padding around that element.</p>
|
||
<h2 id="skip-links">Skip links</h2>
|
||
<p>Skip links allow keyboard users to bypass large repeated blocks of content (such as a top nav). Without a skip link, a keyboard user will not stay long on a site - after moving to a new page, they may realize they have to tab through the entire nav again and leave.</p>
|
||
<p>Skip links are generally invisible to mouse users, and only appear when tabbing around a page. To see an example, open <a href="https://webaim.org/" target="_blank" rel="external">WebAIM (Web Accessibility in Mind)</a> and hit the <code>TAB</code> key. Notice the red box that appears in the upper left that reads &quot;skip to main content.&quot;</p>
|
||
<h3 id="skip-links-in-framer">Skip links in Framer</h3>
|
||
<p>Skip links in Framer require custom code, both React and CSS.</p>
|
||
<h2 id="text-alternatives">Text alternatives</h2>
|
||
<p>Text alternatives - alternative text, captioning, audio descriptions, etc. - are the most commonly thought of form of web accessibility. You likely need no further explanation of what they are and why they matter, but they can be rather daunting to write. I recommend reading <a href="https://adrianroselli.com/2024/05/my-approach-to-alt-text.html" target="_blank" rel="external">Adrian Roselli's approach to writing alt text</a>.</p>
|
||
<h3 id="text-alternatives-in-framer">Text alternatives in Framer</h3>
|
||
<p>Text alternatives can be easily set by double clicking on the media item in question to open the editing dialog.</p>
|
||
<h2 id="color">Color</h2>
|
||
<p>There are a couple areas to consider when it comes to color:</p>
|
||
<ol>
|
||
<li><strong>Light and dark modes</strong> are both accessibility needs, and a site that only offers one limits access of some potential users.</li>
|
||
<li><strong>Color contrast</strong> will improve users' abilities to view and read your site. WebAIM covers <a href="https://webaim.org/articles/contrast/" target="_blank" rel="external">color contrast as it relates to WCAG</a>. While you can use <a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="external">WebAIM's contrast checker</a>, I recommend finding a more fully-featured color design tool that incorporates contrast checking, luminance comparison, color vision simulation, and more. My personal tool of choice is <a href="https://atmos.style/" target="_blank" rel="external">Atmos</a>.</li>
|
||
<li>Ensuring that <strong>color alone is not used to communicate meaning</strong> helps users with various color deficiencies or certain AT users access your content and understand what is going on. For example, a form that highlights inputs in red when they are improperly filled in should <em>also</em> provide error messages.</li>
|
||
</ol>
|
||
<h3 id="color-in-framer">Color in Framer</h3>
|
||
<p>Regarding item 1, Framer supports <a href="https://www.framer.com/academy/lessons/light-dark-mode" target="_blank" rel="external">light and dark modes for your color styles</a>. Items 2 &amp; 3 are handled independently of Framer.</p>
|
||
<h2 id="responsive-design">Responsive design</h2>
|
||
<p>A huge percentage of web browsing comes from mobile devices or tablets - and that's not to mention ultrawide monitors. Our websites <strong>must</strong> take this into account.</p>
|
||
<h3 id="responsive-design-in-framer">Responsive design in Framer</h3>
|
||
<p>Read about <a href="https://www.framer.com/blog/design-responsive-websites/" target="_blank" rel="external">how to design responsive websites in Framer</a>.</p>
|
||
<h2 id="forms">Forms</h2>
|
||
<p>Accessible forms can be <em>hard</em>. They bring in challenges relating to labeling, validation, reading order, and color design.</p>
|
||
<ol>
|
||
<li><strong>Labeling:</strong> all form controls should have associated labels. Note that placeholder text does not constitute a label! Best practice is that labels be visible, but in some cases (for example a search bar which can be widely visually understood via placeholder text and a magnifying glass icon) you may want an invisible label. <a href="https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text" target="_blank" rel="external">Invisible labels can be achieved in several ways</a>.</li>
|
||
<li><strong>Validation:</strong> thankfully, form control attributes can control validation for many common scenarios such as email, phone number, etc. It’s also possible to control whether an input is required.</li>
|
||
<li><strong>Reading order:</strong> it’s important to ensure that tabbing through your form follows the same order as the visual items.</li>
|
||
<li><strong>Color:</strong> as discussed earlier, ensure that errors are not communicated solely by color!</li>
|
||
</ol>
|
||
<h3 id="forms-in-framer">Forms in Framer</h3>
|
||
<ol>
|
||
<li><strong>Labeling:</strong> follow the pattern that Framer uses in its basic form for labeling. This will nest the form control inside the label.</li>
|
||
</ol>
|
||
<ul>
|
||
<li>If you want an invisible label, you will need to write custom CSS.</li>
|
||
</ul>
|
||
<ol>
|
||
<li><strong>Validation:</strong> In the &quot;Input&quot; section of the right-hand sidebar, there is a dropdown for input type. There is also a toggle for whether the input is required.</li>
|
||
</ol>
|
||
<ul>
|
||
<li>Note that setting an input to required will not add an asterisk or any other similar visual pattern to the label - doing this yourself is highly recommended. It also will not provide visual feedback to the user until clicking the &quot;Submit&quot; button, at which point an error message comes up - this can be a painful pattern for longer forms. Further visual feedback requires custom CSS.</li>
|
||
</ul>
|
||
<ol>
|
||
<li><strong>Reading order:</strong> follow the guidance for reading order discussed earlier.</li>
|
||
<li><strong>Color:</strong> since visual feedback for required feeds does not exist by default, this only becomes a concern if you write custom CSS.</li>
|
||
</ol>
|
||
<h2 id="other-considerations">Other considerations</h2>
|
||
<ul>
|
||
<li>Links should have <strong>anchor text</strong> that accurately represents what they point to (review this document for examples - note how links encapsulate the content they lead to).
|
||
<ul>
|
||
<li>Counterexample: a newspaper page with many &quot;continue reading&quot; links. In this case, you would use the title or aria-label attributes to give a better programmatic name to the link that isn't visible to sighted users. Framer doesn't support the title attribute, so use <a href="https://www.framer.com/help/articles/improving-accessibility-with-aria-labels/" target="_blank" rel="external">aria-label</a> (found under &quot;Accessibility&quot; in the right-hand sidebar).</li>
|
||
</ul>
|
||
</li>
|
||
<li>Links should always be <strong>visibly indicated as links</strong> - underlines are traditional, and traditional is understandable by users. If you choose otherwise, ensure you aren't <a href="https://leecat.art/framer-accessibility/#color">distinguishing only by color</a>!
|
||
<ul>
|
||
<li>If your links are underlined, avoid underlining other text elements to avoid confusion.</li>
|
||
</ul>
|
||
</li>
|
||
<li>Some users need <strong>reduced or removed animations</strong>. There is a setting in Framer to <a href="https://www.framer.com/help/articles/reduced-motion-settings/" target="_blank" rel="external">allow reduced motion support</a>. It's turned off by default.</li>
|
||
</ul>
|
||
</content>
|
||
</entry>
|
||
<entry>
|
||
<title>pink, lime, and grey shawl</title>
|
||
<link href="https://leecat.art/pink-lime-and-grey-shawl/" />
|
||
<updated>2026-08-20T00:00:00Z</updated>
|
||
<id>https://leecat.art/pink-lime-and-grey-shawl/</id>
|
||
<content type="html"><p>Yarn: <a href="https://woolery.com/products/gist-duet-cotton-linen-weaving-yarn" target="_blank" rel="external">Gist Duet Cotton/Linen Weaving Yarn</a>.</p>
|
||
<p>About 2' wide and 5' long including fringe.</p>
|
||
</content>
|
||
</entry>
|
||
<entry>
|
||
<title>visual site builders and accessibility</title>
|
||
<link href="https://leecat.art/visual-site-builders-and-accessibility/" />
|
||
<updated>2026-08-05T00:00:00Z</updated>
|
||
<id>https://leecat.art/visual-site-builders-and-accessibility/</id>
|
||
<content type="html"><p>Recently, I <a href="https://flipping.rocks/@inherentlee/117037989967706516" target="_blank" rel="external">asked on the Fediverse</a> about visual/drag-and-drop website builders and got a wealth of answers.</p>
|
||
<p>I want to evaluate based on some accessibility factors:</p>
|
||
<ol>
|
||
<li><strong>Semantic HTML:</strong> how well does the builder adhere to properly formed semantic HTML?</li>
|
||
<li><strong>Keyboard navigation:</strong> is keyboard focus visible? Can it be customized? (I was going to review skip links, but I'm a half dozen sites in and none have supported them thus far, at least not without entirely custom code)</li>
|
||
<li><strong>Reading order:</strong> is reading order automatically correct? If not, what does the user have to do to ensure correctness?</li>
|
||
<li><strong>Text alternatives:</strong> is there support for alt text?</li>
|
||
<li><strong>Color:</strong> does the builder support light and dark modes? (Note that I am looking for builders for those with no HTML/CSS experience, and &quot;you can customize with CSS&quot; is not acceptable)</li>
|
||
<li><strong>Other accessibility concerns:</strong> anything else of note?</li>
|
||
</ol>
|
||
<p>I will score <strong>1</strong> (bad), <strong>2</strong> (mixed), or <strong>3</strong> (good). If there is nothing to note for the &quot;other&quot; factor, I will score it as a 2. These scores <strong>will not be weighted</strong> according to priorities, but purely summed for a final ranking.</p>
|
||
<p>There are, of course, many more factors that could be evaluated, but I will be focusing on these high-level ones.</p>
|
||
<p>Want to just see the final ranking? Pop down to the <a href="https://leecat.art/visual-site-builders-and-accessibility/#summary">summary</a>.</p>
|
||
<h2 id="blocs">Blocs</h2>
|
||
<p><a href="https://blocsapp.com/" target="_blank" rel="external">Blocs</a> is a builder for MacOS, iPad, and iPhone. I had trouble getting a template loaded on my iPad, but I reviewed the Blocs website - built with Blocs, of course - for major issues. This is, I would assume, the shiniest version possible.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>Most major elements missing (no <code>&lt;main&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code>; <code>&lt;nav&gt;</code> present for the top nav but not bottom).</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Custom focus, missing in many areas on the Blocs site and turned off by default in the CSS - not sure if that is for this site or is the standard. The ability to potentially customize focus is interesting.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Good! Block-based layout helps significantly here I would guess.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Supported.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Light and dark modes are possible - <a href="https://help.blocsapp.com/knowledge-base/dark-theme/" target="_blank" rel="external">Blocs dark mode documentation</a>.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>Difficulty with iPad app.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>12</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="cowsites">Cowsites</h2>
|
||
<p><a href="https://cowsites.net" target="_blank" rel="external">Cowsites</a> is a simple site editor with no drag-and-drop elements.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>Some oddities, like the <code>&lt;header&gt;</code> being inside the <code>&lt;main&gt;</code> while the <code>&lt;footer&gt;</code> was not. Repeated <code>&lt;h1&gt;</code>s.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Browser default focus outlines. Some clipping of focus outlines.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Good. Difficult to mess up when there are no drag-and-drop elements.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Both image title and alt can be set in the editor, but don't appear to be surfaced in the actual site.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Single color palette.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>No <code>lang</code> attribute set. Gallery page links are three separate links to the same place, with lacking link text for links 2 and 3.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>10</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="figma-sites">Figma Sites</h2>
|
||
<p><a href="https://www.figma.com/sites/" target="_blank" rel="external">Figma Sites</a> allows you to turn a Figma design into a functioning website. It offers generative AI features. I tested two themes from Figma Community.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>Depends <em>heavily</em> on developer. One was <code>&lt;div&gt;</code>s all the way down, one was built with actual semantic HTML using the &quot;Accessibility&quot; section of one of the sidebars (it allows you to specify the tag a design element corresponds to). Notably, not a lot or a total lack of links? One theme had some <code>&lt;buttons&gt;</code>s, the other was littered with click events and <code>tabindex=&quot;0&quot;</code>.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Browser default focus outlines. One template <em>actually</em> had a skip link!</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Not clear how order is determined. Potentially partially influenced by order of elements in the sidebar, but one theme tested did not adhere to that and the nav was the last in the reading order despite being top of the sidebar order. I can't publish on the starter plan, so I can't see how my own changes influence the site, but with a well-built theme the organization helps ensure that adding new elements puts them in a reasonable place in the sidebar order.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Supported.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Light and dark modes are possible - <a href="https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables" target="_blank" rel="external">Figma variable modes documentation</a>.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>n/a</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>12</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="framer">Framer</h2>
|
||
<p><a href="https://framer.com" target="_blank" rel="external">Framer</a> is a full-featured site designer with a built-in CMS. It offers generative AI features.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>Tags can be set per-element in the &quot;Accessibility&quot; section of the right-hand pane. Takes work, but is doable with care.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Browser default focus outlines. Some weird clipping of focus outlines in the testing I did. Focus states configurable with custom CSS.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>With proper layout settings, reading order can be correct. Takes some effort and can't really just be stumbled into.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Supported.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Light and dark modes are possible.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>&quot;Accessibility&quot; section of the right-hand pane allows adding tab index. Defaults to 1 rather than 0.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>13</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="kiki">Kiki</h2>
|
||
<p><a href="https://tomotama.com/kiki" target="_blank" rel="external">Kiki</a> is a simple site builder with no drag-and-drop elements. You can customize the CSS to your liking. I played with the demo site.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>It's <code>&lt;div&gt;</code>s all the way down. No headers. <code>&lt;p&gt;</code> tags used, at least.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Browser default focus outlines. Significant focus outline clipping. Should be fixable with CSS... if we wanted to write CSS.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Good. Difficult to mess up when there are no drag-and-drop elements.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Seemingly not present, though there are no images in the demo site.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Since you can write your own CSS, all color is customizable... if we wanted to write CSS.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>No <code>lang</code> attribute set. No <code>title</code>.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>9</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="mmm-page">mmm.page</h2>
|
||
<p><a href="https://mmm.page/" target="_blank" rel="external">mmm.page</a> is a drag-and-drop builder. The preview doesn't show you a standalone page (it's a page that also has the mmm.page login/signup menu bar), so I looked at a few sites to get a sense for how it worked.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>While there is a <code>&lt;main&gt;</code>, it's otherwise <code>&lt;div&gt;</code>s all the way down. Generally no headers, though sites seem to have a visually hidden <code>&lt;h1&gt;</code> that matches the site title. <code>&lt;p&gt;</code> tags used, at least.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Browser default focus outlines.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Order of elements added determines reading order.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Supported.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Single color palette.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>No <code>lang</code> attribute. Preponderance of empty <code>aria-label</code>s.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>9</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="rapidweaver">Rapidweaver</h2>
|
||
<p><a href="https://www.realmacsoftware.com/rapidweaver/" target="_blank" rel="external">Rapidweaver</a> is built exclusively for Mac. Ah, well.</p>
|
||
<h2 id="showit">Showit</h2>
|
||
<p><a href="https://showit.com/" target="_blank" rel="external">Showit</a> is a drag-and-drop builder with a Wordpress backend for content management. I reviewed several different premade themes. Custom CSS is allowed.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>Depending on theme, <em>some</em> landmark tags might be present. One theme reviewed enclosed each individual nav link in a <code>&lt;nav&gt;</code> tag. Ew. Text can be set to be wrapped in a variety of tags, including bare <code>&lt;div&gt;</code>s.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>The default CSS reset for Showit removes focus outlines on some elements (form fields and buttons, but not links). In one tested theme, further focus outlines were missing. Browser default focus outlines. Despite detailed ability to customize hover states in-editor, no ability to customize focus states.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Determined by the user via reordering elements in the sidebar.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Supported.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Single color palette.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>n/a</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>10</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="startup">Startup</h2>
|
||
<p><a href="https://designmodo.com/startup/" target="_blank" rel="external">Startup</a> is a block-based builder with pre-defined components and less freedom than some others on this list.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>Pretty good! They've seemingly dropped <code>&lt;main&gt;</code> and instead used an array of <code>&lt;section&gt;</code>s, but components are automatically associated with <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;footer&gt;</code>, etc.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Browser default focus outlines.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Very orderly thanks to the strictness of the components - it's one component after another. Moving pieces around within the components maintains correct reading order.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Supported.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Per-component color palette.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>Forms are weak - unlabeled fields and buttons. For a built in search field, I'd expect better. The components by default are <em>super</em> animation-heavy and don't respect <code>prefers-reduced-motion</code>.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>13</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="straw-page">Straw.page</h2>
|
||
<p><a href="https://straw.page/" target="_blank" rel="external">Straw.Page</a> is a drag-and-drop builder that bills itself as mobile-friendly. I looked at one of the offered themes, intentionally choosing one that should have intuitive reading order (spoiler: didn't matter).</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>It's <code>&lt;div&gt;</code>s all the way down. No headers. <code>&lt;p&gt;</code> tags used, at least. Lists are just <code>&lt;p&gt;</code>s.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Focus actively turned off.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Order of elements added determines reading order.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Not possible.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Single color palette.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>n/a</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>7</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="univer-se">Univer.se</h2>
|
||
<p><a href="https://univer.se/" target="_blank" rel="external">Univer.se</a> is a drag-and-drop builder with plenty of premade themes. I reviewed a premade theme to get started.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>It's <code>&lt;div&gt;</code>s all the way down. Headers exist, but there are multiple <code>&lt;h1&gt;</code>s and the headers skip levels. <code>&lt;p&gt;</code> tags used, at least.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Browser default focus outlines.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Surprisingly intuitive! Univer.se uses a grid-based layout system and that seems to help programmatically determine reading order.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Supported.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Single color palette.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>No <code>lang</code> attribute.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>11</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="webflow">Webflow</h2>
|
||
<p><a href="https://webflow.com/" target="_blank" rel="external">Webflow</a> is a drag-and-drop builder. Currently bottom of my review list due to AI features.</p>
|
||
<h2 id="webnode">Webnode</h2>
|
||
<p><a href="https://https://www.webnode.com">Webnode</a> is a drag-and-drop builder (with generative AI features). I reviewed a site built in it sent by the recommender as well as one of the premade themes.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>Properly uses <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;footer&gt;</code>. Nice.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Browser default focus outlines.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Decent, thanks to a block-based editor.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Supported.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Single color palette.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>n/a</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>14</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="wobble-web">Wobble Web</h2>
|
||
<p><a href="https://wwwobble.org/">Wobble Web</a> is a drag-and-drop editor that allows you to edit the code directly in browser as well. There's no preview site; you can download the code and view it locally or publish it yourself. While there's a lot of flexibility for text styling, it's all tied directly to CSS rules, so you need to know some CSS to be effective.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Factor</th>
|
||
<th>Notes</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Semantic HTML</td>
|
||
<td>It's <code>&lt;div&gt;</code>s all the way down. No headers. <code>&lt;p&gt;</code> tags used, at least.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Keyboard navigation</td>
|
||
<td>Browser default focus outlines. Should be editable with CSS... if we wanted to write CSS.</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Reading order</td>
|
||
<td>Order of elements added determines reading order.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Text alternatives</td>
|
||
<td>Supported.</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Color</td>
|
||
<td>Single color palette.</td>
|
||
<td>1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Other</td>
|
||
<td>n/a</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td><strong>10</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="wordpress-builders">Wordpress builders</h2>
|
||
<p>Gotta dive into Wordpress to explore these and haven't yet.</p>
|
||
<h3 id="beaver-builder">Beaver Builder</h3>
|
||
<p><a href="https://www.wpbeaverbuilder.com/" target="_blank" rel="external">Beaver Builder</a>.</p>
|
||
<h3 id="divi">Divi</h3>
|
||
<p><a href="https://www.elegantthemes.com/gallery/divi/" target="_blank" rel="external">Divi</a>.</p>
|
||
<hr>
|
||
<h2 id="summary">summary</h2>
|
||
<p>Overall, I explored 11 builders, couldn't test 1 due to OS restrictions, and have 4 left for future review.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Builder</th>
|
||
<th>Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Webnode*</td>
|
||
<td>14</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Figma Sites*</td>
|
||
<td>13</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Framer*</td>
|
||
<td>13</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Startup</td>
|
||
<td>13</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Blocs**</td>
|
||
<td>12</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Univer.se</td>
|
||
<td>11</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cowsites</td>
|
||
<td>10</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Showit</td>
|
||
<td>10</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Wobble Web</td>
|
||
<td>10</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Kiki</td>
|
||
<td>9</td>
|
||
</tr>
|
||
<tr>
|
||
<td>mmm.page</td>
|
||
<td>9</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Straw.page</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Rapidweaver</td>
|
||
<td>Couldn't test (MacOS only).</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Beaver Builder (Wordpress)</td>
|
||
<td>Yet to review.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Divi (Wordpress)</td>
|
||
<td>Yet to review.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Webflow*</td>
|
||
<td>Yet to review.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>*Promotes generative AI features.</p>
|
||
<p>**Usability concerns on iPad.</p>
|
||
</content>
|
||
</entry>
|
||
<entry>
|
||
<title>loud table runner</title>
|
||
<link href="https://leecat.art/loud-table-runner/" />
|
||
<updated>2026-08-01T00:00:00Z</updated>
|
||
<id>https://leecat.art/loud-table-runner/</id>
|
||
<content type="html"><p>Yarn: <a href="https://woolery.com/products/circulo-natural-cotton-maxcolor-4-6-yarn" target="_blank" rel="external">Circulo Natural Cotton Maxcolor 4/6 Yarn</a> with occasional stripes of <a href="https://woolery.com/products/feza-alp-premier-yarn" target="_blank" rel="external">Fez Alpa</a>.</p>
|
||
<p>About 11&quot; wide and 5' long including tassels.</p>
|
||
</content>
|
||
</entry>
|
||
<entry>
|
||
<title>log cabin dishtowels</title>
|
||
<link href="https://leecat.art/log-cabin-dishtowels/" />
|
||
<updated>2026-07-26T00:00:00Z</updated>
|
||
<id>https://leecat.art/log-cabin-dishtowels/</id>
|
||
<content type="html"><p>Yarn: <a href="https://woolery.com/products/circulo-anne-weaving-yarn" target="_blank" rel="external">Circulo Anne Weaving Yarn</a>.</p>
|
||
<p>3 towels. Woven area roughly 12&quot;x24&quot;. Hemstitched.</p>
|
||
</content>
|
||
</entry>
|
||
<entry>
|
||
<title>core CSS</title>
|
||
<link href="https://leecat.art/core-css/" />
|
||
<updated>2026-06-30T00:00:00Z</updated>
|
||
<id>https://leecat.art/core-css/</id>
|
||
<content type="html"><p>What CSS would you implement if you had no or very low vision? Recently, a Blind friend wanted to know more about CSS. This is my attempt at a very minimal CSS file that cleans up a few <a href="https://browserdefaultstyles.com/" target="_blank" rel="external">browser defaults</a> for a more pleasant browsing experience without needing much if any visual testing.</p>
|
||
<p>Want to just see the final stylesheet? <a href="https://leecat.art/core-css/#result">Skip to the end of the page</a>.</p>
|
||
<h2 id="css-resets">CSS resets</h2>
|
||
<p>Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended <a href="https://www.joshwcomeau.com/css/custom-css-reset/" target="_blank" rel="external">Josh W. Comeau's CSS Reset</a>, which looks largely very solid to me. However, if using that particular reset, I would <em><strong>not</strong></em> reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually.</p>
|
||
<h2 id="color">color</h2>
|
||
<p>Complex color palettes are a no-go. But browser defaults are also pretty bad - stark black and white are really hard on sighted users' eyes. Dulling the black and white down to nearby grays helps a lot. And of course, we'll support light and dark modes.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color-scheme</span><span class="token punctuation">:</span> light dark<span class="token punctuation">;</span>
|
||
|
||
<span class="token property">--color-light</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
|
||
<span class="token property">--color-dark</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
|
||
|
||
<span class="token property">--color-bg</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-light<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-dark<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">--color-text</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-dark<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-light<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-text<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h3 id="accents">accents</h3>
|
||
<p>To skip reading about accent colors, head right to <a href="https://leecat.art/core-css/#focus-indication">focus indication</a>.</p>
|
||
<p>If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. <a href="https://xkcd.com/color/rgb/" target="_blank" rel="external">XKCD has a color sheet based on a wide survey</a> that is potentially useful here. Validate that the color contrast is enough with a tool like <a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="external">WebAIM's Contrast Checker</a>. You might color your headers and links.</p>
|
||
<p>If you're coloring links, it's worth considering browser defaults. Blue is unvisited, purple is visited, and red is inactive. Choosing a red or purple link color might confuse users. Blues are pretty safe. A green might be fun.</p>
|
||
<p>Being the person that I am, I'm picking a teal and a pink. XKCD labels these &quot;dark teal&quot; (contrast ratio of 7.11 against our gray-white) and &quot;powder pink&quot; (contrast ratio of 9.49 against our gray-black) respectively.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
|
||
<span class="token property">--color-teal</span><span class="token punctuation">:</span> #014d4e<span class="token punctuation">;</span>
|
||
<span class="token property">--color-pink</span><span class="token punctuation">:</span> #ffb2d0<span class="token punctuation">;</span>
|
||
|
||
<span class="token property">--color-accent</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-teal<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-pink<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">h1, h2, h3, h4, h5, h6,
|
||
a</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h2 id="focus-indication">focus indication</h2>
|
||
<p>Focus indication is a visual change that occurs when something interactive on the screen (like a link) receives keyboard focus. Without it, sighted keyboard-only users can't tell where they are on the page. Conventionally, it's an outline. <a href="https://www.sarasoueidan.com/blog/focus-indicators/" target="_blank" rel="external">Read more about accessible focus indication</a>.</p>
|
||
<p>I would recommend a <em>smidge</em> of padding (spacing <em>inside</em> the border or outline of an element) around your links to allow for more space between the letters and focus outline in order to help with legibility.</p>
|
||
<p>If you recolor your links as mentioned in the previous section, recolor your focus indication for cohesiveness! Additionally, if you overwrite the browser default focus outline in this way or any other, you might want to add a very small border radius to your links. I find that perfectly square corners are a bit of a harsh look, but I'll admit this one is kind of personal preference.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> .1rem<span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> .05rem<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">a:focus-visible</span> <span class="token punctuation">{</span>
|
||
<span class="token property">outline</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h2 id="font">font</h2>
|
||
<p>All-serif everything (a common browser default) is, uh, kinda ugly and overwhelming. Little tails on every letter are visual clutter, at least to my eyes. It feels outdated, like an old-timey newspaper. Picking serif for headers and sans-serif for body (or vice versa) can be a nice alternative. Plus, the contrast will help on lower-level headings... if you ever drill down to <code>h5</code>s or <code>h6</code>s anyway.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
<span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">h1, h2, h3, h4, h5, h6</span> <span class="token punctuation">{</span>
|
||
<span class="token property">font-family</span><span class="token punctuation">:</span> serif<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h2 id="margins">margins</h2>
|
||
<p>Margins create visual space around an element, and this whitespace helps significantly with focus. We're <em>super super not</em> going to reset the margins for everything. That puts us in design hell and becomes a very visually-oriented problem. Instead, we're just changing two things: the width of the body and where it sits on the page. Readers, particularly dyslexic readers, can more easily move to the next line when they are not trying to track back across the full width of the screen.</p>
|
||
<p>This margin rule defines a small amount of top/bottom space first (<code>1rem</code>), and then tells the page to make the left and right margins equal with <code>auto</code> - centering the body in the middle of the page. I'm also going to set a <code>max-width</code> to handle those mystical ultra-wide screens (never used one), and a couple of breakpoints for tablets and mobile.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 65%<span class="token punctuation">;</span>
|
||
<span class="token property">max-width</span><span class="token punctuation">:</span> 1800px<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> 1rem auto<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1050px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 85%<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 650px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 92%<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h2 id="links">links</h2>
|
||
<p>One quick note about accessible links: they should be identifiable by a method other than color. Basically, don't turn off your underlines! Additionally, I would recommend against using underlines for emphasis elsewhere - use <code>&lt;em&gt;</code> or <code>&lt;strong&gt;</code> instead.</p>
|
||
<h2 id="images">images</h2>
|
||
<p>As mentioned up top, this overlaps with the linked CSS Reset writeup.</p>
|
||
<p>By default, an image will be full size. If it's a large image, that can be even larger than the viewport. We'll give them a <code>max-width</code> and center them in case they are narrower than the body. <code>display: block</code> allows that centering to actually work.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">img, picture, video, canvas, svg</span> <span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
|
||
<span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h2 id="headers-footers-navs">headers, footers, navs</h2>
|
||
<p>Let's talk the components that every page likely has - a header, a footer, and navs. I'm going to use a very simple design for our header - a <a href="https://webaim.org/techniques/skipnav/" target="_blank" rel="external">skip link</a>, an (optional) site title (the title could also be one of the nav links), and then an unordered list of links enclosed in a <code>nav</code> element. Like the following:</p>
|
||
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skip<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Skip to content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is my cool website<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main menu navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/header-nav-1/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Header nav item 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/header-nav-2/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Header nav item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/header-nav-3/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Header nav item 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">></span></span></code></pre>
|
||
<p>and our footer will be similar:</p>
|
||
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/footer-nav-1/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footer nav item 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/footer-nav-2/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footer nav item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">></span></span></code></pre>
|
||
<h3 id="skip-link">skip link</h3>
|
||
<p>Let's handle the skip link first. Your skip link can be hard to style without visual feedback. Commonly, they start hidden and only appear when receiving keyboard focus. It's entirely reasonable, in my opinion, to leave it visible. <strong>I actually like this as a design choice</strong>, as it highlights the idea and hopefully purpose of a skip link to sighted readers. However, if you want to hide it, there's a lot (a <em>lot</em>) of ways to do so. Using <code>position: absolute</code>, <code>left</code>, and <code>top</code>, we can place the skip link outside of the page, then move it in when it receives focus. We'll also stick a background on there to prevent the text from overlaying our site title and becoming illegible.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">#skip</span> <span class="token punctuation">{</span>
|
||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
|
||
<span class="token property">left</span><span class="token punctuation">:</span> -999px<span class="token punctuation">;</span>
|
||
<span class="token property">top</span><span class="token punctuation">:</span> -999px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">#skip:focus-visible</span> <span class="token punctuation">{</span>
|
||
<span class="token property">left</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
|
||
<span class="token property">top</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h3 id="site-title">site title</h3>
|
||
<p>I won't do much here, but I am going to remove the underline (which is the default for links). It's commonly understood that the site title (or sometimes just the word &quot;home&quot;) links to the home page, and the underline is unnecessary visual clutter.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">header h2</span> <span class="token punctuation">{</span>
|
||
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h3 id="flexbox-navs">flexbox navs</h3>
|
||
<p>We're going to dip our toes into flexbox for this one - it allows us to make content fall neatly into rows or columns. It's pretty powerful, and can get pretty weird, but we'll keep it bare-bones.</p>
|
||
<p>By default, the unordered lists in the navs will display with each list item on a new line with a bullet point in front of the list item. Let's take up less space by putting them all on one line. I'm going to center the items, and I'm going to allow them to wrap onto a new line. I'm also taking the bullet points off of the list items and allowing for a bit of space between each item.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">nav ul</span> <span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">flex-flow</span><span class="token punctuation">:</span> row wrap<span class="token punctuation">;</span>
|
||
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h3 id="aria-current">aria-current</h3>
|
||
<p>Screen reader users get <code>aria-current</code> information, and it can be helpful to present it to sighted users as well. There are of course many ways to do this with color, but we'll avoid that. Let's add carets before and after the current page link to indicate this. We'll scope them only to the header and footer just in case we run across a weird case.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">header a[aria-current="page"]::before,
|
||
footer a[aria-current="page"]::before</span> <span class="token punctuation">{</span>
|
||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"> "</span> / <span class="token string">""</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">header a[aria-current="page"]::after,
|
||
footer a[aria-current="page"]::after</span> <span class="token punctuation">{</span>
|
||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" &lt;"</span> / <span class="token string">""</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<p>The content after the forward slash is what is conveyed to screen reader users. The carets are not useful from a screen reader perspective, so this excerpts them.</p>
|
||
<h3 id="separating-header-and-footer-from-main">separating header and footer from main</h3>
|
||
<p>The header and footer can visually run into the main text area if there's not extra space or a border. We'll keep it simple with borders. If you're not using an accent color, use your text color instead.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">header</span> <span class="token punctuation">{</span>
|
||
<span class="token property">border-bottom</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">footer</span> <span class="token punctuation">{</span>
|
||
<span class="token property">border-top</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h2 id="print-media">print media</h2>
|
||
<p>There's a couple straightforward additions we can make to handle printing the site cleanly and making best use of the physical paper space. Remove the header and footer, reset the width and colors to limit ink usage, and print link URLs after the link.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span>
|
||
<span class="token selector">header,
|
||
footer,
|
||
nav</span> <span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
<span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 95vw<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">body,
|
||
h1, h2, h3, h4, h5,
|
||
a</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">a::after</span> <span class="token punctuation">{</span>
|
||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" ("</span> <span class="token function">attr</span><span class="token punctuation">(</span>href<span class="token punctuation">)</span> <span class="token string">")"</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<h2 id="feedback">feedback</h2>
|
||
<p>Did I make a mistake? Is there more I could add? <a href="https://leecat.art/contact/">Reach out</a>!</p>
|
||
<h2 id="result">result</h2>
|
||
<p>Here's our outcome.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color-scheme</span><span class="token punctuation">:</span> light dark<span class="token punctuation">;</span>
|
||
|
||
<span class="token property">--color-light</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
|
||
<span class="token property">--color-dark</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
|
||
<span class="token property">--color-teal</span><span class="token punctuation">:</span> #014d4e<span class="token punctuation">;</span>
|
||
<span class="token property">--color-pink</span><span class="token punctuation">:</span> #ffb2d0<span class="token punctuation">;</span>
|
||
|
||
<span class="token property">--color-bg</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-light<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-dark<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">--color-text</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-dark<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-light<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">--color-accent</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--color-teal<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-pink<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-text<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 65%<span class="token punctuation">;</span>
|
||
<span class="token property">max-width</span><span class="token punctuation">:</span> 1800px<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> 1rem auto<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1100px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 85%<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 650px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
|
||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 92%<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/* Basic elements */</span>
|
||
<span class="token selector">h1, h2, h3, h4, h5, h6</span> <span class="token punctuation">{</span>
|
||
<span class="token property">font-family</span><span class="token punctuation">:</span> serif<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">h1, h2, h3, h4, h5, h6,
|
||
a</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">a</span> <span class="token punctuation">{</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> .1rem<span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> .05rem<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">a:focus-visible</span> <span class="token punctuation">{</span>
|
||
<span class="token property">outline</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">img, picture, video, canvas, svg</span> <span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
|
||
<span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/* Header, footer, nav */</span>
|
||
<span class="token selector">header</span> <span class="token punctuation">{</span>
|
||
<span class="token property">border-bottom</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">#skip</span> <span class="token punctuation">{</span>
|
||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--color-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
|
||
<span class="token property">left</span><span class="token punctuation">:</span> -999px<span class="token punctuation">;</span>
|
||
<span class="token property">top</span><span class="token punctuation">:</span> -999px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">#skip:focus-visible</span> <span class="token punctuation">{</span>
|
||
<span class="token property">left</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
|
||
<span class="token property">top</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">header a[aria-current="page"]::before,
|
||
footer a[aria-current="page"]::before</span> <span class="token punctuation">{</span>
|
||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"> "</span> / <span class="token string">""</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">header a[aria-current="page"]::after,
|
||
footer a[aria-current="page"]::after</span> <span class="token punctuation">{</span>
|
||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" &lt;"</span> / <span class="token string">""</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">header h2 a</span> <span class="token punctuation">{</span>
|
||
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">nav ul</span> <span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">flex-flow</span><span class="token punctuation">:</span> row wrap<span class="token punctuation">;</span>
|
||
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">footer</span> <span class="token punctuation">{</span>
|
||
<span class="token property">border-top</span><span class="token punctuation">:</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--color-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/* Print media */</span>
|
||
<span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span>
|
||
<span class="token selector">header,
|
||
footer,
|
||
nav</span> <span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">body</span> <span class="token punctuation">{</span>
|
||
<span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 95vw<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">body,
|
||
h1, h2, h3, h4, h5,
|
||
a</span> <span class="token punctuation">{</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">a::after</span> <span class="token punctuation">{</span>
|
||
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" ("</span> <span class="token function">attr</span><span class="token punctuation">(</span>href<span class="token punctuation">)</span> <span class="token string">")"</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
</content>
|
||
</entry>
|
||
<entry>
|
||
<title>black and red journal</title>
|
||
<link href="https://leecat.art/black-and-red-journal/" />
|
||
<updated>2026-06-11T00:00:00Z</updated>
|
||
<id>https://leecat.art/black-and-red-journal/</id>
|
||
<content type="html"></content>
|
||
</entry>
|
||
<entry>
|
||
<title>fediLearns</title>
|
||
<link href="https://leecat.art/fedilearns/" />
|
||
<updated>2026-05-06T00:00:00Z</updated>
|
||
<id>https://leecat.art/fedilearns/</id>
|
||
<content type="html"><p>My new project <a href="https://fedilearns.fyi" target="_blank" rel="external">FediLearns</a> is a learning-focused classifieds page for the fediverse. Check it out!</p>
|
||
</content>
|
||
</entry>
|
||
<entry>
|
||
<title>accessible image modals</title>
|
||
<link href="https://leecat.art/accessible-image-modals/" />
|
||
<updated>2026-03-22T00:00:00Z</updated>
|
||
<id>https://leecat.art/accessible-image-modals/</id>
|
||
<content type="html"><p>Recently I've been working on a single-page digital rendition of a zine complete with many hand-drawn images. The author wanted to be able to bring images up to a full-screen view, to either zoom in or to put the whole enlarged image on one screen with no scrolling. It was a real struggle to find resources on how to do this in an accessible manner, so I'm writing up what I did.</p>
|
||
<blockquote>
|
||
<p>Fair warning: This solution is likely imperfect.</p>
|
||
</blockquote>
|
||
<h2 id="the-dialog-element">the <code>dialog</code> element</h2>
|
||
<p>do you know how many tutorials want you to roll your own modals? It's a not-insignificant amount. W3Schools, top of the search results in many cases, recommends it in two places - <a href="https://www.w3schools.com/howto/howto_css_modal_images.asp" target="_blank" rel="external">image modals</a> and <a href="https://www.w3schools.com/css/css3_images_modal.asp" target="_blank" rel="external">responsive image modals</a>. Several search results for &quot;image modal&quot; pop up div solutions - <a href="https://stackoverflow.com/questions/75598914/how-to-display-an-image-clicking-on-it-using-modal-window-on-html-css-and-js" target="_blank" rel="external">div modal 1</a>, <a href="https://dev.to/salehmubashar/create-an-image-modal-with-javascript-2lf3" target="_blank" rel="external">div modal 2</a>, <a href="https://www.youtube.com/watch?v=Y9TNHynFjaQ" target="_blank" rel="external">div modal 3</a>.</p>
|
||
<p>If you don't know of the existence of <code>&lt;dialog&gt;</code>, a search for image modals will not get you there quickly.</p>
|
||
<p>If you search for <em>accessible</em> image modals, you'll still hear about <code>&lt;div&gt;</code>s. Hell, <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/" target="_blank" rel="external">W3C's ARIA Authoring Practices Guide uses a <code>&lt;div&gt;</code></a>. You kinda have to go digging to read about the <a href="https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html" target="_blank" rel="external">dialog element from Scott O'Hara</a> or find <a href="https://accessibleweb.dev/modals" target="_blank" rel="external">AccessibleWeb.dev's piece on modals</a>. Or you can go <a href="https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html" target="_blank" rel="external">straight for Adrian Roselli</a> and find examples that use the native <code>&lt;dialog&gt;</code> element. Thanks Adrian!</p>
|
||
<p>Did I roll my own modal at first? Regretfully, yes. I'd used the <code>&lt;dialog&gt;</code> element before... several years ago... in a project I don't have access to anymore... Needless to say, I had forgotten about its existence.</p>
|
||
<p>Anyway, I got there. Eventually. So let's talk about modals and <code>&lt;dialog&gt;</code>.</p>
|
||
<h3 id="what-does-dialog-give-us">what does <code>&lt;dialog&gt;</code> give us?</h3>
|
||
<p>so, what do we get from the <code>&lt;dialog&gt;</code> element that we don't get from a <code>&lt;div&gt;</code> modal?</p>
|
||
<ol>
|
||
<li>a semantically meaningful element</li>
|
||
<li>a backdrop that fills the screen behind the modal, styleable with <code>::backdrop</code></li>
|
||
<li>automatic use of the <code>Esc</code> key to close the modal</li>
|
||
<li>automatic focus trapping that prevents any tabbing within the page behind the modal (users can tab off the page into the browser buttons)</li>
|
||
<li>the JS functions <code>.showModal()</code> and <code>.close()</code></li>
|
||
<li>if <code>closedby</code> is set to <code>any</code>, clicking outside the modal (anywhere on the backdrop) will also close the modal</li>
|
||
<li>automatic return of focus to the element that triggered the modal</li>
|
||
<li>the <code>autofocus</code> attribute for in-modal elements to set which element should receive focus on opening the modal</li>
|
||
<li>the <code>open</code> attribute which is set on the <code>&lt;dialog&gt;</code> when open and removed when closed (when you use the functions mentioned previously)</li>
|
||
</ol>
|
||
<p>and more. This is just the pieces in use for me. There's also things like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes" target="_blank" rel="external">setting forms so that submission closes the dialog</a> (point 1 in that list).</p>
|
||
<h3 id="what-doesnt-it-give-us">what doesn't it give us?</h3>
|
||
<ol>
|
||
<li>a close button - gotta roll your own and attach the requisite <code>.close()</code> call (or rely on users hitting escape or clicking the backdrop)</li>
|
||
<li>prevention of scroll on the rest of the page</li>
|
||
</ol>
|
||
<h3 id="a-bug">a bug</h3>
|
||
<p>MDN warns:</p>
|
||
<blockquote>
|
||
<p>Do not add the <code>tabindex</code> property to the <code>&lt;dialog&gt;</code> element as it is not interactive and does not receive focus.</p>
|
||
</blockquote>
|
||
<p>— <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes" target="_blank" rel="external"><code>&lt;dialog&gt;</code>: additional notes</a> (point 3 in that list).</p>
|
||
<p>despite this, I found that in Firefox (but not Edge), the <em><code>&lt;dialog&gt;</code> itself was focusable</em>. I have no idea why, but I tested this on a totally unstyled and unmodified page and still found it to be true. As a focusable element, it made no sense. It had no interactivity and could not be activated.</p>
|
||
<p>I'm still torn: do I add <code>tabindex=&quot;-1&quot;</code>? MDN specifically says not to, but I'm pretty sure they're warning against making it <em>focusable</em>. Why warn against making it nonfocusable when <em>it's not supposed to be focusable in the first place</em>, after all?</p>
|
||
<p>At current, I'm ambivalent, but I've added <code>tabindex=&quot;-1&quot;</code> to handle Firefox's poor behavior. Making the dialog focusable is unhelpful and confusing.</p>
|
||
<h2 id="in-addition-to-the-dialog">in addition to the <code>&lt;dialog&gt;</code></h2>
|
||
<p>here's what else I wrote...</p>
|
||
<h3 id="html">html</h3>
|
||
<p>besides the <code>&lt;dialog&gt;</code>, I gave my <code>&lt;img&gt;</code> elements <code>tabindex=&quot;0&quot;</code> to make them focusable.</p>
|
||
<h3 id="js">js</h3>
|
||
<p>in <code>modal.js</code>, I created an <code>openDialog()</code> function that takes in the clicked image. It:</p>
|
||
<ul>
|
||
<li>creates a new <code>&lt;img&gt;</code> element and copies over the <code>src</code> and <code>alt</code> attributes - importantly, it doesn't copy the full <code>&lt;img&gt;</code> because we <em>don't</em> want to copy that <code>tabindex</code> attribute</li>
|
||
<li>replaces the current <code>&lt;img&gt;</code> in the modal with our new copy with <code>replaceChild()</code> (or if there's no current one, it just appends)</li>
|
||
<li>calls <code>dialog.showModal()</code></li>
|
||
</ul>
|
||
<p>I gave my close button two event listeners, one that listens for click events and one that listens for a keydown of the space or enter keys. In the case of the keydown, it calls <code>event.preventDefault()</code> to stop the space key from scrolling the underlying page.</p>
|
||
<p>I also looped through all images and attached my <code>openDialog()</code> function to any image with a <code>tabindex</code> attribute (I had some images that weren't intended to be fullscreened, so they lacked <code>tabindex</code>). Again, I gave them listeners on both click and keydown.</p>
|
||
<h3 id="css">css</h3>
|
||
<p>here's the most relevant parts of the CSS:</p>
|
||
<ul>
|
||
<li><code>dialog::backdrop</code> was given a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors" target="_blank" rel="external">relatively calculated</a> color - <code>rgba(from var(--color-bg) r g b / .8)</code> - as well as a blur</li>
|
||
<li><code>body:has(dialog[open])</code> has <code>overflow: hidden</code> set</li>
|
||
<li><code>dialog img</code> uses a <code>max-height</code> as well as <code>object-fit: contain</code></li>
|
||
</ul>
|
||
<h2 id="errors-questions">errors? questions?</h2>
|
||
<p>reach out!</p>
|
||
</content>
|
||
</entry>
|
||
<entry>
|
||
<title>eleventy lessons</title>
|
||
<link href="https://leecat.art/eleventy-lessons/" />
|
||
<updated>2026-02-19T00:00:00Z</updated>
|
||
<id>https://leecat.art/eleventy-lessons/</id>
|
||
<content type="html"><p>recently I wrote <em>several</em> sites using <a href="https://www.11ty.dev/" target="_blank" rel="external">Eleventy</a> (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by <a href="https://heckin.technology/" target="_blank" rel="external">heckin.technology</a>. See ya, GitHub. Won't miss ya.</p>
|
||
<p>Originally, I compiled some of the things I've learned in a standalone site.</p>
|
||
<p>however, since I don't know how much I'll focus on that specific site - it is mostly a sample - I am re-publishing the most useful information here. I'll skip the intro to Markdown content. I'm also going to update them where I've learned more or to better match what's represented on this site.</p>
|
||
<p>this will comprise of 4 parts: <a href="https://leecat.art/eleventy-lessons/#related-posts">related posts</a>, <a href="https://leecat.art/eleventy-lessons/#featured-images">featured images</a>, <a href="https://leecat.art/eleventy-lessons/#pagination">pagination</a>, and <a href="https://leecat.art/eleventy-lessons/#tag-image-preview">tag image preview</a>. Feel free to jump ahead, as none depend on the others.</p>
|
||
<hr>
|
||
<h2 id="related-posts">related posts</h2>
|
||
<p>by default, the <a href="https://leecat.art/eleventy-lessons/github.com/11ty/eleventy-base-blog" target="_blank" rel="external">Eleventy base blog</a> comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.</p>
|
||
<p>while that is useful for <em>this</em> site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags.</p>
|
||
<p>I started by referring to <a href="https://github.com/11ty/eleventy/discussions/2534" target="_blank rel=external&quot;">this GitHub issue about related posts</a>. I had to fix a few errors that arose from the suggested code.</p>
|
||
<p>I also wanted to make three changes:</p>
|
||
<ol>
|
||
<li>I didn't want to just see posts that shared <em>all</em> tags, but rather posts that shared <em>any</em> tag</li>
|
||
<li>I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order</li>
|
||
<li>I wanted to exclude the posts that I could reach with between-post pagination</li>
|
||
</ol>
|
||
<h3 id="filters-js">filters.js</h3>
|
||
<p>after adjusting for those needs, I had the following in <code>filters.js</code>:</p>
|
||
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"excludeFromCollection"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> urls<span class="token operator">=</span><span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> urls<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>post<span class="token punctuation">.</span>url<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"filterByTags"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">...</span>requiredTags</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> requiredTags<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token operator">=></span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>tags<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"randomize"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Create a copy of the array to avoid modifying the original</span>
|
||
<span class="token keyword">let</span> shuffledArray <span class="token operator">=</span> array<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Fisher-Yates shuffle algorithm</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> shuffledArray<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> j <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">[</span>shuffledArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> shuffledArray<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>shuffledArray<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">,</span> shuffledArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">return</span> shuffledArray<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
|
||
<h3 id="post-njk">post.njk</h3>
|
||
<p>I used this in my post layout. <code>filterTagList</code> comes with the base blog by default, and removes the tags &quot;posts&quot; and &quot;all.&quot; <code>head</code> also comes with the base blog. <code>postlist.njk</code> is my modified-from-the-base-blog post layout.</p>
|
||
<pre class="language-html"><code class="language-html">{% set relevantTags = tags | filterTagList %}
|
||
|
||
{% set olderPost = collections.posts | getPreviousCollectionItem %}
|
||
{% set newerPost = collections.posts | getNextCollectionItem %}
|
||
{% set urlsToExclude = [page.url, olderPost.url, newerPost.url]}
|
||
|
||
{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(urlsToExclude) | randomize | head(3) %}
|
||
{% if postlist.length %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>related-posts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>related posts<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
|
||
{% include "postlist.njk" %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span>
|
||
{% endif %}</code></pre>
|
||
<p>and that sorts related posts.</p>
|
||
<hr>
|
||
<h2 id="featured-images">featured images</h2>
|
||
<p>images in 11ty use the <a href="https://www.11ty.dev/docs/plugins/image/#eleventy-transform" target="_blank" rel="external">Image Transform Plugin</a>. I found it hard to find anything to reference while building this - a lot of sites in the template gallery are either text-heavy or not using the plugin - so I'm reproducing what I've got here for reference.</p>
|
||
<h3 id="file-structure">file structure</h3>
|
||
<pre><code>content/
|
||
|--img/
|
||
| |--sample-0.jpg
|
||
| |--sample-1.jpg
|
||
| `--etc
|
||
|--posts/
|
||
| |--lesson-0-front-matter-and-urls.md
|
||
| |--lesson-1-headings-paragraphs-and-horizontal-lines.md
|
||
| `--etc
|
||
`--etc
|
||
</code></pre>
|
||
<h3 id="front-matter">front matter</h3>
|
||
<p>for any given post, my front matter references the image in this manner:</p>
|
||
<pre><code>---
|
||
image:
|
||
src: sample-0.jpg
|
||
alt: moss on a fencepost
|
||
---
|
||
</code></pre>
|
||
<h3 id="image-html-transform">image HTML transform</h3>
|
||
<p>As mentioned, there's a plugin for images. If you started with the base blog, in <code>eleventy.config.js</code>, you'll probably find a chunk of code similar to this already in place:</p>
|
||
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>eleventyImageTransformPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"auto"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">640</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">failOnError</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">htmlOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">imgAttributes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// e.g. &lt;img loading decoding> assigned on the HTML tag will override these values.</span>
|
||
<span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token string">"lazy"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">decoding</span><span class="token operator">:</span> <span class="token string">"async"</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token literal-property property">sharpOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">animated</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
|
||
<p>setting <code>formats</code> to &quot;auto&quot; helps - use whatever type of image you want, get that type out. The default settings that came with the Eleventy base blog didn't set a <code>width</code>, which I wanted (by default, images off my camera - like the hellebore featured image for this post - are almost 5k pixels wide). I also found it helpful to set <code>failOnError</code> to true for a little more feedback.</p>
|
||
<blockquote>
|
||
<p>NOTE: It sure seems like Eleventy will fail your image processing if there's no alt text. While admirable, it would be nice if I could find any documentation for this!</p>
|
||
</blockquote>
|
||
<h3 id="passthrough-copy">passthrough copy</h3>
|
||
<p>as I worked through this, I thought I needed a passthrough copy for a while. You don't - just let the plugin do its thing.</p>
|
||
<h3 id="templating">templating</h3>
|
||
<p>I needed images to show up in 3 places:</p>
|
||
<ul>
|
||
<li>In the lists of posts on the home page, I wanted each post to show its featured image</li>
|
||
<li>In the &quot;related posts&quot; section on each individual post, I wanted each related post to show its featured image</li>
|
||
<li>And of course, I wanted the post to show its own featured image</li>
|
||
</ul>
|
||
<h3 id="home-page-and-related-posts">home page and related posts</h3>
|
||
<p>both of these sections use the same template, which in my setup is called <code>postlist.njk</code>. Within the relevant links, I added the following:</p>
|
||
<pre class="language-html"><code class="language-html">{% if post.data.image.src %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/{{ post.data.image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ post.data.image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% else %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>missing-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
|
||
{% endif %}</code></pre>
|
||
<h3 id="post-body">post body</h3>
|
||
<p>the post body looks similar:</p>
|
||
<pre class="language-html"><code class="language-html">{% if image.src %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>featured-img<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/{{ image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% endif %}</code></pre>
|
||
<p>together, that sets up featured images for posts.</p>
|
||
<hr>
|
||
<h2 id="pagination">pagination</h2>
|
||
<h3 id="simple-pagination">simple pagination</h3>
|
||
<p><a href="https://www.11ty.dev/docs/pagination/" target="_blank" rel="external">Post pagination in Eleventy is pretty straightforward</a>, mostly requiring some specific front matter.</p>
|
||
<p>The home page pagination I have set up here looks like the following (in <code>index.njk</code>):</p>
|
||
<pre><code>---
|
||
pagination:
|
||
data: collections.posts
|
||
size: 13
|
||
alias: posts
|
||
reverse: true
|
||
---
|
||
</code></pre>
|
||
<p>6 posts per page, paginate data from <code>collections.posts</code> which we'll call just <code>posts</code> for short, and do it in reverse (aka, most recent posts show first).</p>
|
||
<p><a href="https://www.11ty.dev/docs/pagination/nav" target="_blank" rel="external">You'll also likely want previous and next buttons</a>. I did. Here's what I have...</p>
|
||
<h4 id="pagination-njk">pagination.njk</h4>
|
||
<p>There's two components to this, the bigger one being this <code>pagination.njk</code> template. Look, I like my little icons, ok? It takes an <code>olderHref</code> and a <code>newerHref</code>, and optionally an <code>olderTitle</code> and <code>newerTitle</code>.</p>
|
||
<pre class="language-html"><code class="language-html">{% if olderHref or newerHref %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination {% if inPost %}post-pagination{% endif %}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% if olderHref %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>older<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ olderHref }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fa-solid fa-hand-point-left<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
|
||
{{ olderTitle or "older" }}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||
{% endif %}
|
||
{% if newerHref %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>newer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ newerHref }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{{ newerTitle or "newer" }}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fa-solid fa-hand-point-right<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||
{% endif %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span>
|
||
{% endif %}</code></pre>
|
||
<h4 id="calling-the-template">calling the template</h4>
|
||
<p>From <code>index.njk</code> we can <code>include &quot;pagination.njk&quot;</code>:</p>
|
||
<pre><code>{# idk why these are backwards either #}
|
||
{% set newerHref = pagination.href.previous %}
|
||
{% set olderHref = pagination.href.next %}
|
||
{% include &quot;pagination.njk&quot; %}
|
||
</code></pre>
|
||
<p>Yup. The order of previous vs. next is totally unintuitive to me, too.</p>
|
||
<h3 id="complex-pagination">complex pagination</h3>
|
||
<p>however, there's a catch. <a href="https://www.11ty.dev/docs/quicktips/tag-pages/" target="_blank" rel="external">Tag pages are <em>created</em> via pagination</a>! It's a lot harder to paginate those - you can't just use the front matter to set it up.</p>
|
||
<p>I untangled <a href="https://github.com/11ty/eleventy/issues/332#issuecomment-445236776" target="_blank" rel="external">this GitHub issue about double-layered pagination</a> and came to the following solution...</p>
|
||
<h4 id="eleventy-config-js">eleventy.config.js</h4>
|
||
<p>in <code>eleventy.config.js</code>:</p>
|
||
<pre class="language-js"><code class="language-js"><span class="token comment">// note that this uses the lodash.chunk method, so you’ll have to import that</span>
|
||
eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"tagPagination"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collection</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Get unique list of tags</span>
|
||
<span class="token keyword">let</span> tagSet <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>collection<span class="token punctuation">.</span><span class="token function">getAllSorted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">post</span><span class="token punctuation">)</span> <span class="token operator">=></span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>tags <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// Remove "structural" tags</span>
|
||
tagSet <span class="token operator">=</span> tagSet<span class="token punctuation">.</span><span class="token function">difference</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"posts"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Get each item that matches the tag</span>
|
||
<span class="token keyword">let</span> paginationSize <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> tagMap <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> tagArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>tagSet<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">for</span><span class="token punctuation">(</span> <span class="token keyword">let</span> tagName <span class="token keyword">of</span> tagArray<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> tagItems <span class="token operator">=</span> collection<span class="token punctuation">.</span><span class="token function">getFilteredByTag</span><span class="token punctuation">(</span>tagName<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> pagedItems <span class="token operator">=</span> <span class="token function">chunk</span><span class="token punctuation">(</span>tagItems<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> paginationSize<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">for</span><span class="token punctuation">(</span> <span class="token keyword">let</span> pageNumber <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> max <span class="token operator">=</span> pagedItems<span class="token punctuation">.</span>length<span class="token punctuation">;</span> pageNumber <span class="token operator">&lt;</span> max<span class="token punctuation">;</span> pageNumber<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
tagMap<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">tagName</span><span class="token operator">:</span> tagName<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">pageNumber</span><span class="token operator">:</span> pageNumber<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">pageSize</span><span class="token operator">:</span> pagedItems<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">pageData</span><span class="token operator">:</span> pagedItems<span class="token punctuation">[</span>pageNumber<span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">return</span> tagMap<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
|
||
<h4 id="tag-pages-njk">tag-pages.njk</h4>
|
||
<p>in my <code>tag-pages.njk</code> file (or whatever you use to template out your tag pages):</p>
|
||
<pre class="language-html"><code class="language-html">---
|
||
pagination:
|
||
data: collections.tagPagination
|
||
size: 1
|
||
alias: tag
|
||
eleventyComputed:
|
||
permalink: /tags/{{ tag.tagName | slugify }}/% if tag.pageNumber %{{ tag.pageNumber + 1 }}/% endif %
|
||
title: "Posts tagged {{ tag.tagName }}"
|
||
eleventyExcludeFromCollections: true
|
||
---
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Posts tagged “{{ tag.tagName }}”<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
|
||
|
||
{% set postlist = tag.pageData %}
|
||
{% include "postlist.njk" %}
|
||
|
||
{# idk why these are backwards either #}
|
||
{% if tag.pageNumber > 0 %}
|
||
{% set newerHref = pagination.href.previous %}
|
||
{% endif %}
|
||
{% if tag.pageNumber &lt; tag.pageSize - 1 %}
|
||
{% set olderHref = pagination.href.next %}
|
||
{% endif %}
|
||
{% include "pagination.njk" %}</code></pre>
|
||
<p>note the pagination checking <code>tag.pageNumber</code> against <code>tag.PageSize</code> - the <a href="https://github.com/11ty/eleventy/issues/332#issuecomment-445236776" target="_blank" rel="external">original suggested solution</a> in the GitHub post creates an issue where the pagination loops through <em>all</em> of the tag pages bit-by-bit. This sorts that - hat tip to <a href="https://github.com/11ty/eleventy/issues/332#issuecomment-1248185406" target="_blank" rel="external">TheReyzar who mentioned the issue and showed part of their solution</a>.</p>
|
||
<h4 id="filters-js-again">filters.js (again)</h4>
|
||
<p>finally, in my <code>filters.js</code> file, I add the <code>tagPagination</code> tag to the tags that get filtered using <code>filterTagList</code>:</p>
|
||
<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"filterTagList"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">filterTagList</span><span class="token punctuation">(</span><span class="token parameter">tags</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>tags <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string">"all"</span><span class="token punctuation">,</span> <span class="token string">"posts"</span><span class="token punctuation">,</span> <span class="token string">"tagPagination"</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
|
||
<hr>
|
||
<h2 id="tag-image-preview">tag image preview</h2>
|
||
<p>today I tackled making the tag page more visually interesting.</p>
|
||
<h3 id="preview-the-first-featured-image">preview the first featured image</h3>
|
||
<p>first, I worked on previewing the first featured image. The focus here is on digging into <code>collections[tag]</code> (reversed!) to get to the data of the first post.</p>
|
||
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>taglist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
|
||
{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ tagUrl }}<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>taglist-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% set tagRecent = collections[tag] | reverse %}
|
||
{% if tagRecent[0].data.image.src %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/{{ tagRecent[0].data.image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ tagRecent[0].data.image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% else %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>missing-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
|
||
{% endif %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post-tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ tag }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
|
||
{% set numPosts = collections[tag].length %}
|
||
({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||
{% endfor %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span></code></pre>
|
||
<h3 id="preview-a-collage-of-recent-featured-images">preview a collage of recent featured images</h3>
|
||
<p>I found that having just the first featured image made the tag page hard to differentiate from any of the pages listing individual posts, so from there I moved to showing 4 images (or empty rectangles where there weren't four to show).</p>
|
||
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>taglist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
|
||
{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ tagUrl }}<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>taglist-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tag-imgs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% set tagRecent = collections[tag] | reverse %}
|
||
{% for i in range(0, 4) %}
|
||
{% if tagRecent[i].data.image.src %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/{{ tagRecent[i].data.image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ tagRecent[i].data.image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{% else %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>missing-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
|
||
{% endif %}
|
||
{% endfor %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post-tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ tag }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
|
||
{% set numPosts = collections[tag].length %}
|
||
({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
|
||
{% endfor %}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span></code></pre>
|
||
<p>with a bit of <code>display: grid</code>, we're good to go, right?</p>
|
||
<h4 id="handling-multiple-aspect-ratios">handling multiple aspect ratios</h4>
|
||
<p>this had worked so far because the photos on the lessons site are from my camera in landscape mode, producing neat, identical 3:2 aspect ratios. Let's throw a wrench in that and introduce a portrait-mode photo.</p>
|
||
<p>thankfully, the CSS property <code>aspect-ratio</code> makes this pretty straightforward, and <code>object-fit</code> finishes the job.</p>
|
||
<pre class="language-css"><code class="language-css"><span class="token selector">.taglist-link img</span> <span class="token punctuation">{</span>
|
||
<span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 3 / 2<span class="token punctuation">;</span>
|
||
<span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre>
|
||
<p>(I also set the <code>missing-img</code> <code>&lt;div&gt;</code>s to have the same aspect ratio.)</p>
|
||
<hr>
|
||
<p>There's the good stuff from <a href="https://inherentlee.codeberg.page/lessons/" target="_blank" rel="external">11ty Lessons</a>. Hope you enjoyed.</p>
|
||
</content>
|
||
</entry>
|
||
</feed> |
