<commit_before>{exp:channel:entries channel="articles" limit="1" require_entry="yes" status="open|In Progress" show_future_entries="yes"}

{if no_results}
{redirect="404"}
{/if}

{global-page-top}

	<title>{title} · An A List Apart Article</title>

	<link rel="alternate" type="application/rss+xml" title="A feed for comments on this article" href="/comments/feed/{url_title}" />

	{article_custom_head}

	{embed="embeds/article-author-styles" entry_author="{author}" entry_username="{username}" entry_id="{entry_id}"}

	{exp:stash:set name="safe-description"}{exp:strip_html}{exp:low_replace find="QUOTE" replace="'"}{if article_mini_deck}{article_mini_deck}{if:elseif article_deck}{article_deck}{/if}{/exp:low_replace}{/exp:strip_html}{/exp:stash:set}

	{if article_custom_css}
	<style>
		{article_custom_css}
	</style>
	{/if}

	<link rel="canonical" href="http://alistapart.com/article/{url_title}"/>

	<meta name="description" content="{exp:stash:get name="safe-description"}">
	<meta name="author" content="{embed="embeds/article-authors-no-html" entry_author="{author}" entry_username="{username}" entry_id="{entry_id}"}">

	<meta name="twitter:card" content="summary">
	<meta name="twitter:site" content="@alistapart">
	<meta name="twitter:title" content="{title}">
	<meta name="twitter:description" content="{exp:stash:get name="safe-description"}">
	<meta name="twitter:url" content="http://alistapart.com/article/{url_title}">

	<meta property="og:title" content="{title}" />
	<meta property="og:description" content="{exp:stash:get name="safe-description"}" />
	<meta property="og:url" content="http://alistapart.com/article/{url_title}" />
	<meta property="og:image" content="{article_illustration}{url}{/article_illustration}" />

</head>

<body class="printable {if comment_total > 0}comments-exist{/if}">

	{primary-logo}

	<div role="main" class="main-wrapper">

		<article itemscope itemtype="http://www.schema.org/Article" class="article-layout hentry">

			<header class="entry-header">

				{exp:stash:set name="issue-number"}{exp:playa:parents status="open|In Progress"}<a href="/issue/{issue_number}" class="issue-number"><span itemprop="isPartOf" itemscope itemtype="http://schema.org/PublicationIssue" class="badge">Issue №</span> <span itemprop="issueNumber">{issue_number}</span></a>{/exp:playa:parents}{/exp:stash:set}

				{if article_illustration OR article_legacy_illo}
				{exp:stash:set name="illustrator-credit"}
				<p itemprop="contributor" itemscope itemtype="http://schema.org/Person" class="illustrator-credit">Illustration by
					{if "{article_illustrator:entry_id}" != ""}
					{article_illustrator}
					{embed="embeds/article-illustrator-link" entry_id="{article_illustrator:entry_id}"}
					{/article_illustrator}
					{if:else}
					<a itemprop="url" href="/author/kcornell"><span itemprop="name"><NAME></span></a>
					{/if}
				</p>
				{/exp:stash:set}
				{/if}

				{if article_responsive_illo != ""}

				<figure itemscope itemtype="http://schema.org/ImageObject" class="wide-hero responsive-hero" data-picture data-alt="">
					{article_responsive_illo}
					<div data-src="{exp:ce_img:pair src="{cell_1}" width="{cell_2}" crop="no" save_type="jpg" quality="61"}{made}{/exp:ce_img:pair}" {if cell_2 != ""}data-media="(max-width: {cell_2}px)"{/if}></div>
					{/article_responsive_illo}

					<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
					<noscript>{article_illustration}<img src="{exp:ce_img:pair src="{url}" width="960" crop="no" save_type="jpg" quality="10"}{made}{/exp:ce_img:pair}" alt="">{/article_illustration}</noscript>

					{exp:stash:get name="issue-number"}
					{exp:stash:get name="illustrator-credit"}
				</figure>

				{if:else}

				{if article_illustration}

				{article_illustration}
				{if width > height}
				<figure class="wide-hero" data-picture data-alt="">
					<div data-src="{exp:ce_img:pair src="{url}" width="480" crop="no" save_type="jpg" quality="81"}{made}{/exp:ce_img:pair}"></div>
					<div data-src="{exp:ce_img:pair src="{url}" width="960" crop="no" save_type="jpg" quality="81"}{made}{/exp:ce_img:pair}" data-media="(min-width: 600px)"></div>
					<div data-src="{exp:ce_img:pair src="{url}" width="1920" crop="no" save_type="jpg" quality="10"}{made}{/exp:ce_img:pair}" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></div>

					<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
					<noscript><img src="{exp:ce_img:pair src="{url}" width="960" crop="no" save_type="jpg" quality="10"}{made}{/exp:ce_img:pair}" alt=""></noscript>

					{exp:stash:get name="issue-number"}
					{exp:stash:get name="illustrator-credit"}
				</figure>
				{if:else}
				<figure class="wide-hero" data-picture data-alt="">
					<div data-src="{exp:ce_img:pair src="{url}" width="348" crop="no" save_type="jpg" quality="81"}{made}{/exp:ce_img:pair}"></div>
					<div data-src="{exp:ce_img:pair src="{url}" width="348" crop="no" save_type="jpg" quality="81"}{made}{/exp:ce_img:pair}" data-media="(min-width: 960px)"></div>
					<div data-src="{exp:ce_img:pair src="{url}" width="696" crop="no" save_type="jpg" quality="10"}{made}{/exp:ce_img:pair}" data-media="(min-width: 960px) and (min-device-pixel-ratio: 2.0)"></div>

					<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
					<noscript><img src="{exp:ce_img:pair src="{url}" width="348" crop="no" save_type="jpg" quality="10"}{made}{/exp:ce_img:pair}" alt=""></noscript>

					{exp:stash:get name="issue-number"}
					{exp:stash:get name="illustrator-credit"}
				</figure>
				{/if}
				{/article_illustration}
				{if:elseif article_legacy_illo}
				<figure class="wide-hero">
				{article_legacy_illo}
				{exp:stash:get name="issue-number"}
				{exp:stash:get name="illustrator-credit"}
				</figure>
				{if:else}
				{exp:stash:get name="issue-number"}
				{/if}

				{/if} {!-- end != murtaugh --}

				<h1 itemprop="headline name" class="entry-title">{title}</h1>

				<p itemprop="author" itemscope itemtype="http://schema.org/Person" class="entry-details">

					by {embed="embeds/article-authors-primary" entry_author="{author}" entry_username="{username}" entry_id="{entry_id}"}

					{exp:playa:parents status="open|In Progress"}<time class="pubdate updated" datetime="{entry_date format="%Y-%m-%dT%H:%i:%s%Q"}" itemprop="datePublished">{entry_date format="%F %d, %Y"}</time>{/exp:playa:parents}

					<span class="entry-meta optional-break">

						Published in {modern-categories}

					</span>

				</p>

				{exp:playa:parents status="open|In Progress" show_future_entries="yes"}
				{if status != "open" OR {entry_date} > {current_time}}
				<p class="meta warning" style="display: inline-block; background: #ffffef; outline: 3px solid #ffffef;">

					{if status != "open"}
					<strong>Please note:</strong> This issue has not yet been set to "open."
					{if:else}
					<strong>Please note:</strong> This issue is ready, and will go live when it hits its publish time.
					{/if}

				</p>
				{/if}<commit_msg>corrections to microdata nesting to procudce valid structured content<commit_after>{exp:channel:entries channel="articles" limit="1" require_entry="yes" status="open|In Progress" show_future_entries="yes"}

{if no_results}
{redirect="404"}
{/if}

{global-page-top}

	<title>{title} · An A List Apart Article</title>

	<link rel="alternate" type="application/rss+xml" title="A feed for comments on this article" href="/comments/feed/{url_title}" />

	{article_custom_head}

	{embed="embeds/article-author-styles" entry_author="{author}" entry_username="{username}" entry_id="{entry_id}"}

	{exp:stash:set name="safe-description"}{exp:strip_html}{exp:low_replace find="QUOTE" replace="'"}{if article_mini_deck}{article_mini_deck}{if:elseif article_deck}{article_deck}{/if}{/exp:low_replace}{/exp:strip_html}{/exp:stash:set}

	{if article_custom_css}
	<style>
		{article_custom_css}
	</style>
	{/if}

	<link rel="canonical" href="http://alistapart.com/article/{url_title}"/>

	<meta name="description" content="{exp:stash:get name="safe-description"}">
	<meta name="author" content="{embed="embeds/article-authors-no-html" entry_author="{author}" entry_username="{username}" entry_id="{entry_id}"}">

	<meta name="twitter:card" content="summary">
	<meta name="twitter:site" content="@alistapart">
	<meta name="twitter:title" content="{title}">
	<meta name="twitter:description" content="{exp:stash:get name="safe-description"}">
	<meta name="twitter:url" content="http://alistapart.com/article/{url_title}">

	<meta property="og:title" content="{title}" />
	<meta property="og:description" content="{exp:stash:get name="safe-description"}" />
	<meta property="og:url" content="http://alistapart.com/article/{url_title}" />
	<meta property="og:image" content="{article_illustration}{url}{/article_illustration}" />

</head>

<body class="printable {if comment_total > 0}comments-exist{/if}">

	{primary-logo}

	<div role="main" class="main-wrapper">

		<article itemscope itemtype="http://www.schema.org/Article" class="article-layout hentry">

			<header class="entry-header">

				{exp:stash:set name="issue-number"}{exp:playa:parents status="open|In Progress"}<span itemprop="isPartOf" itemscope itemtype="http://schema.org/PublicationIssue"><a itemprop="url" href="/issue/{issue_number}" class="issue-number"><span class="badge">Issue №</span> <span itemprop="issueNumber">{issue_number}</span></a> {/exp:playa:parents}{/exp:stash:set}

				{if article_illustration OR article_legacy_illo}
				{exp:stash:set name="illustrator-credit"}
				<p itemprop="contributor" itemscope itemtype="http://schema.org/Person" class="illustrator-credit">Illustration by
					{if "{article_illustrator:entry_id}" != ""}
					{article_illustrator}
					{embed="embeds/article-illustrator-link" entry_id="{article_illustrator:entry_id}"}
					{/article_illustrator}
					{if:else}
					<a itemprop="url" href="/author/kcornell"><span itemprop="name"><NAME></span></a>
					{/if}
				</p>
				{/exp:stash:set}
				{/if}

				{if article_responsive_illo != ""}

				<figure itemscope itemtype="http://schema.org/ImageObject" class="wide-hero responsive-hero" data-picture data-alt="">
					{article_responsive_illo}
					<div data-src="{exp:ce_img:pair src="{cell_1}" width="{cell_2}" crop="no" save_type="jpg" quality="61"}{made}{/exp:ce_img:pair}" {if cell_2 != ""}data-media="(max-width: {cell_2}px)"{/if}></div>
					{/article_responsive_illo}

					<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
					<noscript>{article_illustration}<img src="{exp:ce_img:pair src="{url}" width="960" crop="no" save_type="jpg" quality="10"}{made}{/exp:ce_img:pair}" alt="">{/article_illustration}</noscript>

					{exp:stash:get name="issue-number"}
					{exp:stash:get name="illustrator-credit"}
				</figure>

				{if:else}

				{if article_illustration}

				{article_illustration}
				{if width > height}
				<figure class="wide-hero" data-picture data-alt="">
					<div data-src="{exp:ce_img:pair src="{url}" width="480" crop="no" save_type="jpg" quality="81"}{made}{/exp:ce_img:pair}"></div>
					<div data-src="{exp:ce_img:pair src="{url}" width="960" crop="no" save_type="jpg" quality="81"}{made}{/exp:ce_img:pair}" data-media="(min-width: 600px)"></div>
					<div data-src="{exp:ce_img:pair src="{url}" width="1920" crop="no" save_type="jpg" quality="10"}{made}{/exp:ce_img:pair}" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></div>

					<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
					<noscript><img src="{exp:ce_img:pair src="{url}" width="960" crop="no" save_type="jpg" quality="10"}{made}{/exp:ce_img:pair}" alt=""></noscript>

					{exp:stash:get name="issue-number"}
					{exp:stash:get name="illustrator-credit"}
				</figure>
				{if:else}
				<figure class="wide-hero" data-picture data-alt="">
					<div data-src="{exp:ce_img:pair src="{url}" width="348" crop="no" save_type="jpg" quality="81"}{made}{/exp:ce_img:pair}"></div>
					<div data-src="{exp:ce_img:pair src="{url}" width="348" crop="no" save_type="jpg" quality="81"}{made}{/exp:ce_img:pair}" data-media="(min-width: 960px)"></div>
					<div data-src="{exp:ce_img:pair src="{url}" width="696" crop="no" save_type="jpg" quality="10"}{made}{/exp:ce_img:pair}" data-media="(min-width: 960px) and (min-device-pixel-ratio: 2.0)"></div>

					<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
					<noscript><img src="{exp:ce_img:pair src="{url}" width="348" crop="no" save_type="jpg" quality="10"}{made}{/exp:ce_img:pair}" alt=""></noscript>

					{exp:stash:get name="issue-number"}
					{exp:stash:get name="illustrator-credit"}
				</figure>
				{/if}
				{/article_illustration}
				{if:elseif article_legacy_illo}
				<figure class="wide-hero">
				{article_legacy_illo}
				{exp:stash:get name="issue-number"}
				{exp:stash:get name="illustrator-credit"}
				</figure>
				{if:else}
				{exp:stash:get name="issue-number"}
				{/if}

				{/if} {!-- end != murtaugh --}

				<h1 itemprop="headline name" class="entry-title">{title}</h1>

				<p class="entry-details">

					<span itemprop="author" itemscope itemtype="http://schema.org/Person">by {embed="embeds/article-authors-primary" entry_author="{author}" entry_username="{username}" entry_id="{entry_id}"}</span>

					{exp:playa:parents status="open|In Progress"}<time class="pubdate updated" datetime="{entry_date format="%Y-%m-%dT%H:%i:%s%Q"}" itemprop="datePublished">{entry_date format="%F %d, %Y"}</time>{/exp:playa:parents}

					<span class="entry-meta optional-break">

						Published in {modern-categories}

					</span>

				</p>

				{exp:playa:parents status="open|In Progress" show_future_entries="yes"}
				{if status != "open" OR {entry_date} > {current_time}}
				<p class="meta warning" style="display: inline-block; background: #ffffef; outline: 3px solid #ffffef;">

					{if status != "open"}
					<strong>Please note:</strong> This issue has not yet been set to "open."
					{if:else}
					<strong>Please note:</strong> This issue is ready, and will go live when it hits its publish time.
					{/if}

				</p>
				{/if}
{'fraction_non_alphanumeric': 0.19931892417819166, 'fraction_numerical': 0.010563624991312809, 'mean_word_length': 5.546860782529572, 'pattern_counts': {'":': 0, '<': 172, '<?xml version=': 0, '>': 178, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5036986', 'n_tokens_mistral': 5780, 'n_tokens_neox': 4905, 'n_words': 865}