almanac.httparchive.org 🚀 - Finish writing the Fonts chapter

@zachleat do you have any time to work on this chapter in the next day or two? If not I'm afraid there's no chance we'll have it ready for the launch on Monday 😞

rviscomi on 6 Nov 2019

Hey @rviscomi taking a pass at this now. Can you elaborate about bullet 3? Would some kind of glossary be helpful there?

zachleat on 6 Nov 2019

❤1

My other question as I craft more of a narrative from this—what’s the best way to reference individual queries or results here?

zachleat on 6 Nov 2019

Thanks @zachleat! I was thinking of having a few sentences of primer about what the thing is, why it matters, etc. Assume a beginner level of understanding from readers. For example, in the SEO chapter, here's a quote from when it discusses the metric on page titles:

Page titles

Page titles are an important way of communicating the purpose of a page to a user or search engine. tags are also used as headings in the SERPS and as the title for the browser tab when visiting a page, so it's no surprise to see that 97.1% of mobile pages have a document title.</p> <p>Even though Google usually displays the first 50-60 characters of a page title within a SERP, the median length of the <title> tag was only 21 characters for mobile pages and 20 characters for desktop pages. Even the 75th percentile is still below the cutoff length. This suggests that some SEOs and content writers aren't making the most of the space allocated to them by search engines for describing their home pages in the SERPs.</p> <p>(graph histogram length <title> Source: 10.07b, column C, desktop & mobile)</p> </blockquote> <p>That also answers your other question about referencing the results. Just leave a placeholder in the chapter with the data you'd like to include. We'll generate the chart for you and embed it in the page before publishing. Or if you're comfortable making charts in Sheets I'll make sure you have edit access to the results sheet and you can create your own charts, which we'll tweak later to fit the Almanac style guide.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/1120896?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rviscomi picture"> <strong>rviscomi</strong> <span class="text-muted ml-1">on 6 Nov 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Still chugging away on this, unfortunately. Hoping to have a PR ready by tomorrow morning</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/39355?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zachleat picture"> <strong>zachleat</strong> <span class="text-muted ml-1">on 8 Nov 2019</span> </div> <div class="col text-right"> ❤<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Hey <strong>@rviscomi</strong> I pushed changes to the <code>fonts-316</code> branch.</p> <p>There is still one outstanding TODO in there, specifically around the question posed here: <a rel="nofollow noopener" target="_blank" href="https://github.com/HTTPArchive/almanac.httparchive.org/pull/192#discussion_r343967930">https://github.com/HTTPArchive/almanac.httparchive.org/pull/192#discussion_r343967930</a></p> <p>After I get that resolved I can put up a PR</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/39355?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zachleat picture"> <strong>zachleat</strong> <span class="text-muted ml-1">on 8 Nov 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Hmm, well I ended up deleting that section because something seemed really off about that data? The distributions seemed to suggest that pages were more likely to have a higher font request count than a @font-face block count. Given that _most_ font requests depend on a @font-face block and low CSS Font Loading API usage data this was kinda smelly to me.</p> <p>Maybe I’m not thinking about it right?</p> <p>Anyway with this removal, I think we’re good to go if someone else wants to do a quick review pass at the PR here: <a rel="nofollow noopener" target="_blank" href="https://github.com/HTTPArchive/almanac.httparchive.org/pull/370">https://github.com/HTTPArchive/almanac.httparchive.org/pull/370</a></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/39355?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zachleat picture"> <strong>zachleat</strong> <span class="text-muted ml-1">on 8 Nov 2019</span> </div> <div class="col text-right"> ❤<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Totally fine to trim it. Thanks for keeping this moving, I'm happy to see it nearing the finish line!</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/1120896?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rviscomi picture"> <strong>rviscomi</strong> <span class="text-muted ml-1">on 8 Nov 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(517349464, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(517349464, 1);" onclick="rate(517349464, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(517349464, 2);" onclick="rate(517349464, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(517349464, 3);" onclick="rate(517349464, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(517349464, 4);" onclick="rate(517349464, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(517349464, 5);" onclick="rate(517349464, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/almanac-httparchive-org/527053648/logo-tweak">Logo tweak</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/1120896?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rviscomi picture"> <strong class="pr-1" dir="ltr">rviscomi</strong> · <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/almanac-httparchive-org/455839643/create-templates-for-content-pages">Create templates for content pages</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/1120896?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rviscomi picture"> <strong class="pr-1" dir="ltr">rviscomi</strong> · <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/almanac-httparchive-org/446806335/finalize-assignments-chapter-13-ecommerce">Finalize assignments: Chapter 13. Ecommerce</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/1120896?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rviscomi picture"> <strong class="pr-1" dir="ltr">rviscomi</strong> · <span class="px-1" dir="ltr">6</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/almanac-httparchive-org/488402982/write-content-chapter-1-javascript">Write content: Chapter 1. JavaScript</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/1120896?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rviscomi picture"> <strong class="pr-1" dir="ltr">rviscomi</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/almanac-httparchive-org/524553496/home-page-broken-on-safari">Home page broken on Safari</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/10931297?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="bazzadp picture"> <strong class="pr-1" dir="ltr">bazzadp</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/HTTPArchive/almanac.httparchive.org/issues/316" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>

Almanac.httparchive.org: Finish writing the Fonts chapter

All 8 comments

Page titles