profile
viewpoint
Rick Viscomi rviscomi @Google New York, NY

GoogleChrome/lighthouse 20478

Automated auditing, performance metrics, and best practices for the web.

patrickhulce/third-party-web 856

Data on third party entities and their impact on the web.

googledatastudio/community-connectors 410

This repository contains open source content for Google Data Studio.

GoogleChrome/CrUX 111

The place to share queries, ideas, or issues related to the Chrome UX Report

rviscomi/crux-cookbook 76

https://github.com/GoogleChrome/CrUX

rviscomi/ismyhostfastyet 49

A leaderboard of hosting providers' TTFB performance

LeaVerou/css-almanac 17

Repo for planning & voting on which stats to study

HTTPArchive/country-lens 4

Country lens to to understand the states of local websites in a country

rviscomi/github-buttons 4

Showcase any GitHub repo's success with these two simple, static buttons featuring dynamic watch and fork counts.

rviscomi/beta.httparchive.org 2

Beta version of HTTP Archive

issue openedHTTPArchive/almanac.httparchive.org

ISBN?

Should we get an ISBN for the ebook and/or print book? Would especially love to hear from anyone with experience in self-publishing. All feedback welcome.

created time in an hour

pull request commentHTTPArchive/almanac.httparchive.org

Performance 2020 queries

@dooman87 the queries should be updated to the 2020_08_01 tables before reviewing. The August crawl takes the whole month to complete, so can't be done yet.

max-ostapenko

comment created time in 2 days

issue commentHTTPArchive/almanac.httparchive.org

Contributors flex setting

Make it so!

bazzadp

comment created time in 2 days

push eventrviscomi/beta.httparchive.org

Thomas Steiner

commit sha 7150aedd1141aa94860a439b5c20b5bc3cfae422

Fix copy & paste error

view details

dependabot[bot]

commit sha 706ad9f64895b0ceb98bbcf72069189cb378651b

Bump lodash from 4.17.10 to 4.17.19 (#210) Bumps [lodash](https://github.com/lodash/lodash) from 4.17.10 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.10...4.17.19) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

Rick Viscomi

commit sha 7ca334a26b60c0e45c47ee907c5a331612e06c25

web almanac featured section (#215)

view details

push time in 2 days

delete branch rviscomi/beta.httparchive.org

delete branch : almanac

delete time in 2 days

push eventHTTPArchive/httparchive.org

Rick Viscomi

commit sha 7ca334a26b60c0e45c47ee907c5a331612e06c25

web almanac featured section (#215)

view details

push time in 2 days

issue closedHTTPArchive/httparchive.org

Feature the Web Almanac more prominently

  • [x] Rename "Almanac" to "Web Almanac" in the header and footer navs
  • [x] Make the header nav item a dropdown menu with links for each available annual edition (2019, 2020...)
  • [x] Replace the "Featured Report" section with a Web Almanac section.

image

closed time in 2 days

rviscomi

PR opened HTTPArchive/httparchive.org

Web Almanac featured section

Fixes #214 image

+24 -13

0 comment

3 changed files

pr created time in 2 days

create barnchrviscomi/beta.httparchive.org

branch : almanac

created branch time in 2 days

issue openedHTTPArchive/httparchive.org

Feature the Web Almanac more prominently

  • [ ] Rename "Almanac" to "Web Almanac" in the header and footer navs
  • [ ] Make the header nav item a dropdown menu with links for each available annual edition (2019, 2020...)
  • [ ] Replace the "Featured Report" section with a Web Almanac section.

created time in 2 days

issue commentHTTPArchive/almanac.httparchive.org

Add Lighthouse testing

Could use the PageSpeed Insights API to get Lighthouse scores as well as real-user experience data from CrUX.

bazzadp

comment created time in 2 days

issue commentHTTPArchive/almanac.httparchive.org

Third Parties 2020

Thanks @exterkamp! @simonhearne can you help onboard Shane?

obto

comment created time in 2 days

pull request commentHTTPArchive/almanac.httparchive.org

Markup 2020 queries

I'm concerned with having many smaller queries because of the maintenance involved (we have a lot to create, rough guess 100 for this chapter). Partly why the shared AS_PERCENT would be of help. I also understand that merging into one causes other issues. Maybe a middle ground again with appropriate/logical grouping?

Yeah if there's a cluster of related metrics then a single query is ok. Grouping unrelated metrics would be overkill though, even if more efficient. If you run into quota issues, you can pass me the finished query which I can run using my HTTP Archive billing account and save to your chapter's results sheet.

Tiggerito

comment created time in 2 days

issue commentLeaVerou/css-almanac

direction CSS property usage

@Tiggerito added a dir custom metric for the Markup chapter, so this should be possible.

catalinred

comment created time in 2 days

issue commentHTTPArchive/almanac.httparchive.org

Translate 2019 content into Korean

Thanks @goleedev! I've just tweeted it here: https://twitter.com/HTTPArchive/status/1293965549588877314

bazzadp

comment created time in 2 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Auto generate featured chapters

 <h2 id="introduction"><a href="#introduction" class="anchor-link">Introduction</ <p>The <a href="https://httparchive.org/">HTTP Archive</a> crawls <a href="https://httparchive.org/reports/state-of-the-web#numUrls">millions of pages</a> every month and runs them through a private instance of <a href="https://webpagetest.org/">WebPageTest</a> to store key information of every page. (You can learn more about this in our <a href="./methodology">methodology</a>). In the context of JavaScript, HTTP Archive provides extensive information on the usage of the language for the entire web. This chapter consolidates and analyzes many of these trends.</p> <h2 id="how-much-javascript-do-we-use"><a href="#how-much-javascript-do-we-use" class="anchor-link">How much JavaScript do we use?</a></h2> <p>JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, <a href="https://v8.dev/blog/cost-of-javascript-2019">download and execution have become the most expensive stages</a> when JavaScript is processed by a web page.</p>+<p><span id="featured-quote" hidden="">JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, download and execution have become the most expensive stages when JavaScript is processed by a web page.</span></p>

This appears to generate an empty <p></p> which may affect the layout.

bazzadp

comment created time in 2 days

issue commentHTTPArchive/almanac.httparchive.org

Translate 2019 content to French

Great work everyone! I think the JS and CSS chapters would be good to translate soon as those got the most page views. Should we unassign those chapters to make sure they're not blocked/stale?

SilentJMA

comment created time in 3 days

issue commentHTTPArchive/almanac.httparchive.org

Media 2020

@Navaneeth-akam great to have you!

@tpiros can you get them caught up?

obto

comment created time in 4 days

push eventrviscomi/word-game

Rick Viscomi

commit sha 3989177d61945627bc884aece59e79c1fb42ba7f

points

view details

Rick Viscomi

commit sha 2df62c6705ab1413d86154bfd74affe5380631e9

shuffle on space

view details

Rick Viscomi

commit sha 3cce4b18d2f90b8116da9b332ead84c56145f9e4

fix NaN pct

view details

Rick Viscomi

commit sha fb5ff8eadf33554c26342e1bc543804c95dde05e

cleanup

view details

Rick Viscomi

commit sha fd57734efb62b49d8de673120a5378bc8a85b684

generate more puzzles

view details

Rick Viscomi

commit sha d976c3e9dff9e1bad6f33d6713eb0adf6f50267c

sort letters

view details

push time in 5 days

issue commentHTTPArchive/almanac.httparchive.org

Contributor profile pages?

However I still think it’s good to highlight the contributors for each year. To say we 96 contributors to 2019 edition (and who they were), and that there were 116 contributors for 2020 (and who they were). So I’d probably keep the contributors page as it is now as well and link to the individual profile pages from it.

+1 let's keep the existing /<lang>/<year>/contributors pages. We should also think about how to link the Contributors and chapter pages to the profile pages.

Not sure individual files per contributor are a great idea - could slow things down to read many of them either at start up or dynamically when a page is requested, e.g. if we keep the contributors page, or in chapters with lots of contributors - unless we have name as well as if in the 2019.json / 2020.json and accept that repetition. So I’d probably go with three files

Either way. With contributor-specific files, it's easier to maintain. At deploy time we can run a script to bundle them up into a single config, or "hydrate" the year-specific config files with the perennial metadata. Having files for each contributor enables us to render the profile pages based directly on "file_exists" checks rather than loading all contributor data and testing whether a contributor key exists. Tradeoffs with each approach, but I'll defer to you on implementation.

rviscomi

comment created time in 5 days

issue openedHTTPArchive/almanac.httparchive.org

Contributor profile pages?

I'd like to pitch an idea for discussion: year-agnostic profile pages for each contributor.

For those who contribute to multiple annual editions, some of their metadata is duplicated across the config files, like name and social links. Authors also have bios in the year's base template. It may be useful to deduplicate the metadata about a contributor that doesn't change over time, like their name, social links, and bio, from the metadata that is year-specific, like the teams and chapters.

So for example, I could add basic metadata about myself to /src/config/contributors/rviscomi.json (or .yaml):

{
  "name": "Rick Viscomi",
  "avatar_url": "https://avatars0.githubusercontent.com/u/1120896?v=4&s=200",
  "github": "rviscomi",
  "twitter": "rick_viscomi",
  "bio":  "Rick Viscomi is[...]"
}

Then in 2019.json and 2020.json I only need to map my contributor ID rviscomi to the teams I contributed to those years. We could also get info about which chapters I contributed to from the YAML in the chapter markdown files.

All of this contributor info could be made publicly available via endpoints like /<lang>/contributors/<id>, eg https://almanac.httparchive.org/en/contributors/rviscomi. I imagine the page being somewhat similar to dev.to/rick_viscomi:

image

  • profile photo
  • name
  • bio
  • social links
  • snippets of chapters I've contributed to (as an author, reviewer, analyst, editor, or translator)
  • badges representing teams I've been on and the number of years I've been a contributor (gotta catch 'em all!)

Right now only authors have bios and they're only visible on the chapter pages. This proposal would enable all contributors to have bios on their personal profile pages and it'd be easier to go back through all of their contributions over the years.

Curious to hear if this is something contributors want, whether there are any unforeseen technical complexities, or if there are any other ideas for ways we could utilize a page like this to showcase contributors' work.

created time in 5 days

pull request commentHTTPArchive/almanac.httparchive.org

Narrow home page

Go ahead and merge. Thanks @catalinred!

catalinred

comment created time in 5 days

delete branch HTTPArchive/almanac.httparchive.org

delete branch : nrllh-patch-1

delete time in 5 days

pull request commentHTTPArchive/almanac.httparchive.org

Markup 2020 queries

+cc @paulcalvano

@Tiggerito for readers who are browsing the finished chapters and want to see how a particular metric was calculated, would this mean that they would be linked to an SQL file that also calculates many other metrics? I think we should opt for many smaller queries rather than a few larger ones. The more narrowly focused the queries are, the easier they are for subsequent analysts (be it the 2021++ team or external readers/researchers) to grok and reuse.

To your implicit goal of reducing computational overhead, I think we should explore ways to make the custom metrics more easily accessible. For example, we could preprocess all custom metrics so that each metric has its own column in a special purpose table. Something like SELECT COUNTIF(markup.images.loading.lazy) FROM httparchive.almanac.custom_metrics where the _markup field from the pages dataset is converted into a BigQuery STRUCT object with properties corresponding to the markup.js schema.

Tiggerito

comment created time in 5 days

issue openedHTTPArchive/httparchive.org

Missing summary_requests.2020_07_01_mobile

We're missing the mobile summary_requests table from the most recent crawl. I suspect there may be another disk issue on the GCE worker.

image

  • [ ] rerun the CSV pipeline to generate the table on BigQuery
  • [ ] update the CSV pipeline to delete artifacts from the machine after it completes successfully

created time in 6 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Better author social media on website

 }  .authors .social {-  display: inline-block;-  vertical-align: middle;+  font-size: 0.9em; }  .authors .social a {-  display: inline-block;-  vertical-align: middle;-  margin: 0 5px;-  margin: 0 0.3125rem;+  margin: 0 10px 0 0;+  margin: 0 0.625rem 0 0;

Could this be simplified to margin-right or are the 0s significant?

  margin-right: 10px;
  margin-right: 0.625rem;
bazzadp

comment created time in 6 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Better author social media on website

 }  .authors .social {-  display: inline-block;-  vertical-align: middle;+  font-size: 0.9em; }  .authors .social a {-  display: inline-block;-  vertical-align: middle;-  margin: 0 5px;-  margin: 0 0.3125rem;+  margin: 0 10px 0 0;+  margin: 0 0.625rem 0 0;

I also wonder if it's worth doing this to maximize space before wrapping.

.authors .social a:last-child {
  margin-right: 0;
}
bazzadp

comment created time in 6 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Better author social media on website

 <h2 id="authors">     {% endif %}       {% set authordata = config.contributors[author] if author in config.contributors else None %}       {% if authordata %}-      <li>+      <li id="author-{{ author }}">

Is this still needed?

bazzadp

comment created time in 6 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Better author social media on website

  .authors .social {   display: inline-block;

Given the longer length of this section, I think it looks better to always be on its own line rather than to the right of the author name.

  display: block;
bazzadp

comment created time in 6 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Better author social media on website

 {% macro render_byline() %}   <div class="byline">{{ self.written_by_before() }}   {% for author in metadata.get('authors') %}-    <a class="author" href="{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}">{{ config.contributors[author].name if author in config.contributors else author }}</a>{{ self.comma() if not loop.last }}+    <a class="author" href="#author-{{ author }}">{{ config.contributors[author].name if author in config.contributors else author }}</a>{{ self.comma() if not loop.last }}

I think this should still link to the Contributors page.

bazzadp

comment created time in 6 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Better author social media on website

  .authors .social {   display: inline-block;-  vertical-align: middle;+  vertical-align: top;+  font-size: 0.9em; }  .authors .social a {-  display: inline-block;-  vertical-align: middle;-  margin: 0 5px;-  margin: 0 0.3125rem;+  margin: 0 10px 0 0;+  margin: 0 0.625rem 0 0;+  text-decoration: none;+  white-space: nowrap;+}++.authors .social svg {+  width: 1em;+  height: auto;+  vertical-align: -0.125rem;

This seems hacky. Why doesn't middle work?

bazzadp

comment created time in 6 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Move featured chapter quotes from Jinja2 template to JSON file

  <a href="https://github.com/HTTPArchive/almanac.httparchive.org#contributing" class="btn">Join the team</a> {% endblock %}++{% block featured_chapter%}Featured Chapter{% endblock %}

The 2020 home page doesn't include a featured chapter section yet. Is this needed?

In a separate issue, could we also explore DRY solutions to reduce the duplication of language-specific text blocks across year templates?

bazzadp

comment created time in 6 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Move featured chapter quotes from Jinja2 template to JSON file

 <h2>{{ self.intro_sub_title() }}</h2>       <img src="/static/images/home-hero.png" alt="" width="562" height="820">     </div>   </section>-  {% include "%s/2019/featured_chapters.html" % lang %}+  {% if featured_quotes %}+  {# Get a random quote server side for those without JS #}+  {%- set random_chapter = featured_quotes.keys()|list()|random %}+  {%- set featured_chapter_quotes = featured_quotes.get(random_chapter) %}+  {%- if not featured_chapter_quotes.get('stat_1') %}{% set stat1_hidden = "hidden" %}{% endif %}+  {%- if not featured_chapter_quotes.get('stat_2') %}{% set stat2_hidden = "hidden" %}{% endif %}+  {%- if not featured_chapter_quotes.get('stat_3') %}{% set stat3_hidden = "hidden" %}{% endif %}+  {% if featured_chapter_quotes %}+  <script nonce="{{ csp_nonce() }}">+    // Get a random quote using JS for those reloading cached CDN page.+    // We do as much as possible before HTML so we can replace the server+    // generated quote quickly without a flash of the server side quote

I'm not sold on this. The contributors page was one thing because I can see the value of giving each contributor equal prominence. But a chapter can be featured for a few hours at a time and I don't think there's any expectation from readers or authors that this should randomly update on refresh.

The overhead in both the HTML payload and the JS code just don't seem worth it for a feature that would be used infrequently and adds little to the UX.

If you're still convinced that this is the right change, could we continue this discussion in another issue and decouple it from the JSON change in this PR?

bazzadp

comment created time in 6 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Move featured chapter quotes from Jinja2 template to JSON file

+{+  "javascript": {+    "quote": "JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, download and execution have become the most expensive stages when JavaScript is processed by a web page.",+    "stat_1": "89%",+    "stat_label_1": "Sites with more third-party code than first-party",+    "stat_2": "83%",+    "stat_label_2": "Sites that use jQuery",+    "stat_3": "4.6%",+    "stat_label_3": "Home pages using React"

I'd like to see these formatted differently so that the stat and the label are more intrinsically linked together besides the _1, _2, _3 suffix. How about as an array of objects/arrays?

    "stats": [
      {"89%": "Sites with more third-party code than first-party"},
      {"83%": "Sites that use jQuery"},
      {"4.6%": "Home pages using React"}
    ]

Alternatively:

    "stats": [
      ["89%", "Sites with more third-party code than first-party"],
      ["83%", "Sites that use jQuery"],
      ["4.6%", "Home pages using React"]
    ]
bazzadp

comment created time in 6 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Move featured chapter quotes from Jinja2 template to JSON file

 def accentless_sort(value):   return sorted(value, key=lambda i: strip_accents(i[1]).lower())  +def get_featured_quotes(lang, year):+    featured_quotes = {}+    featured_quote_filename = 'templates/%s/%s/featured_chapters.json' % (lang, year)+    if os.path.isfile(featured_quote_filename):+        with open(featured_quote_filename, 'r') as featured_quotes_file:+            featured_quotes = json.load(featured_quotes_file)

Should we cache this in memory?

bazzadp

comment created time in 6 days

issue commentHTTPArchive/almanac.httparchive.org

Prototype an interactive data visualization for the 2020 CSS chapter

Spent a couple of hours massaging the 2019 z-index data into something that can be manipulated and visualized in this codepen prototype. I don't love it but it's just something to demonstrate how one can engage with the data in a more hands-on way than just reading a graph. I'd definitely like to explore other metrics to visualize and more engaging ways to interact with the data.

image

rviscomi

comment created time in 7 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Refactor main.py #949

-from config import get_config, SUPPORTED_YEARS, SUPPORTED_LANGUAGES, DEFAULT_YEAR-from csp import csp-from feature_policy import feature_policy-from flask import Flask, abort, redirect, render_template as flask_render_template, request, send_from_directory, url_for from flask_talisman import Talisman-from language import DEFAULT_LANGUAGE, get_language-import logging-import random-from werkzeug.routing import BaseConverter-from werkzeug.http import HTTP_STATUS_CODES-from validate import validate-import os.path-import re+from app import create_app, routes, csp, feature_policy

WDYT about renaming the app package to server? This will help distinguish it from the client side.

Super-Fly

comment created time in 7 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Refactor main.py #949

+from flask import Flask+from werkzeug.routing import BaseConverter+from werkzeug.http import HTTP_STATUS_CODES+from .helpers import get_view_args, chapter_lang_exists, ebook_exists, get_ebook_methodology, \+    add_footnote_links, year_live, accentless_sort+from config import TEMPLATES_DIR, STATIC_DIR+import logging+++# Set WOFF and WOFF2 caching to return 1 year as they should never change+# Note this requires similar set up in app.yaml for Google App Engine+class MyFlask(Flask):

Something more project-specific

class WebAlmanacServer(Flask):
Super-Fly

comment created time in 7 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Refactor main.py #949

+from flask import Flask+from werkzeug.routing import BaseConverter+from werkzeug.http import HTTP_STATUS_CODES+from .helpers import get_view_args, chapter_lang_exists, ebook_exists, get_ebook_methodology, \+    add_footnote_links, year_live, accentless_sort+from config import TEMPLATES_DIR, STATIC_DIR+import logging+++# Set WOFF and WOFF2 caching to return 1 year as they should never change+# Note this requires similar set up in app.yaml for Google App Engine+class MyFlask(Flask):+    def get_send_file_max_age(self, name):+        if name.lower().endswith('.woff') or name.lower().endswith('.woff2'):+            return 31536000+        return Flask.get_send_file_max_age(self, name)+++class RegexConverter(BaseConverter):+    def __init__(self, url_map, *items):+        super(RegexConverter, self).__init__(url_map)+        self.regex = items[0]+++def create_app():

A bit more descriptive

def initialize_server():
Super-Fly

comment created time in 7 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Ebook social links

 <h1 class="title title-lg">         <div>           <span class="contributor-name">{{ contributor.name }}</span>           <span class="contributor-social">-          {% if contributor.twitter %}-            <a href="https://twitter.com/{{ contributor.twitter }}" aria-labelledby="contributors-{{ id }}-twitter">-              <svg role="img">-                <title id="contributors-{{ id }}-twitter">{{ onTwitter(contributor.twitter) }}</title>-                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>-              </svg>-            </a>-          {% endif %}-          {% if contributor.github %}-          <a href="https://github.com/{{ contributor.github }}" aria-labelledby="contributors-{{ id }}-github">-            <svg role="img">-              <title id="contributors-{{ id }}-github">{{ onGitHub(contributor.github) }}</title>-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>-            </svg>-          </a>-          {% endif %}-          {% if contributor.website %}-          <a href="{{ contributor.website }}" aria-labelledby="contributors-{{ id }}-website">-            <svg role="img">-              <title id="contributors-{{ id }}-website">{{ website(contributor.name) }}</title>-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe"></use>-            </svg>-          </a>-          {% endif %}+            {% if contributor.twitter %} (@{{ contributor.twitter }}){% endif %}

LGTM. Only nit is to ensure the icons and the text are vertically aligned.

bazzadp

comment created time in 7 days

pull request commentHTTPArchive/almanac.httparchive.org

Fix linting issue for run_queries.sh

Let's remove it. The intent behind the script was to generate JSON results for each SQL file to be used for data viz, but we ended up with (and continue to use) Sheets for that. JSON needed for one-off data viz like #896 can be created manually from BQ.

bazzadp

comment created time in 7 days

issue commentLeaVerou/css-almanac

What percentage of CSS is served minified?

Since this metric missed the custom metric window would you be open to cutting it from the chapter? Querying the response bodies is prohibitively expensive and the remaining heuristics may not be strong enough to answer this question confidently.

LeaVerou

comment created time in 10 days

IssuesEvent

issue closedLeaVerou/css-almanac

Which properties are most commonly used together?

It would be especially cool to see which non-related properties are often used together.

(idea by @karger)

closed time in 10 days

LeaVerou

issue commentLeaVerou/css-almanac

Which properties are most commonly used together?

I love the meatiness of this problem statement and it has a lot of insightful potential. I'll need more time to review the specific algorithms, but one bit of guidance that may help narrow the options would be to select a JS library that we can run as UDFs in BigQuery.

LeaVerou

comment created time in 10 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Ebook social links

 <h1 class="title title-lg">         <div>           <span class="contributor-name">{{ contributor.name }}</span>           <span class="contributor-social">-          {% if contributor.twitter %}-            <a href="https://twitter.com/{{ contributor.twitter }}" aria-labelledby="contributors-{{ id }}-twitter">-              <svg role="img">-                <title id="contributors-{{ id }}-twitter">{{ onTwitter(contributor.twitter) }}</title>-                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>-              </svg>-            </a>-          {% endif %}-          {% if contributor.github %}-          <a href="https://github.com/{{ contributor.github }}" aria-labelledby="contributors-{{ id }}-github">-            <svg role="img">-              <title id="contributors-{{ id }}-github">{{ onGitHub(contributor.github) }}</title>-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>-            </svg>-          </a>-          {% endif %}-          {% if contributor.website %}-          <a href="{{ contributor.website }}" aria-labelledby="contributors-{{ id }}-website">-            <svg role="img">-              <title id="contributors-{{ id }}-website">{{ website(contributor.name) }}</title>-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe"></use>-            </svg>-          </a>-          {% endif %}+            {% if contributor.twitter %} (@{{ contributor.twitter }}){% endif %}

Both look great! If I had to pick, the version without.

bazzadp

comment created time in 10 days

pull request commentHTTPArchive/almanac.httparchive.org

Allow different commas per language

I saw these commas in a recent PR and had the exact same thought, that we should update them on the contributors page. Thanks for fixing this!

bazzadp

comment created time in 10 days

pull request commentHTTPArchive/almanac.httparchive.org

Add support for LinkedIn contributor links

Thanks for this @catalinred! 🙌

catalinred

comment created time in 11 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Ebook social links

 <h1 class="title title-lg">         <div>           <span class="contributor-name">{{ contributor.name }}</span>           <span class="contributor-social">-          {% if contributor.twitter %}-            <a href="https://twitter.com/{{ contributor.twitter }}" aria-labelledby="contributors-{{ id }}-twitter">-              <svg role="img">-                <title id="contributors-{{ id }}-twitter">{{ onTwitter(contributor.twitter) }}</title>-                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>-              </svg>-            </a>-          {% endif %}-          {% if contributor.github %}-          <a href="https://github.com/{{ contributor.github }}" aria-labelledby="contributors-{{ id }}-github">-            <svg role="img">-              <title id="contributors-{{ id }}-github">{{ onGitHub(contributor.github) }}</title>-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>-            </svg>-          </a>-          {% endif %}-          {% if contributor.website %}-          <a href="{{ contributor.website }}" aria-labelledby="contributors-{{ id }}-website">-            <svg role="img">-              <title id="contributors-{{ id }}-website">{{ website(contributor.name) }}</title>-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe"></use>-            </svg>-          </a>-          {% endif %}+            {% if contributor.twitter %} (@{{ contributor.twitter }}){% endif %}

Thanks!

Small design suggestion. What would you think of more distinction between name/Twitter by having them on separate lines, different font size, and/or different shade text?

Similar to how names/handles appear on Twitter itself:

image

bazzadp

comment created time in 11 days

issue closedHTTPArchive/almanac.httparchive.org

Use deep-linked figures as the meta image for social sharing

Using the Twitter card validator we can test how chapters would appear in tweets.

For example https://almanac.httparchive.org/en/2019/cdn will appear like this:

image

If the sharer wanted to deep-link to a specific figure like https://almanac.httparchive.org/en/2019/cdn#fig-8, the same image would be used. This is usually ok but specifically for linking figures, in context I think it would be more useful to get a preview of the thing being shared rather than the chapter's illustration.

I'd like to propose a new feature (possibly blocked on #1138) that would dynamically swap the meta images like <meta property="og:image"> and <meta name="twitter:image"> with the corresponding figure's image, if available. In this example it would be https://almanac.httparchive.org/static/images/2019/cdn/html_tls_negotiation_time.png:

CDN chapter figure 8

closed time in 11 days

rviscomi

issue commentHTTPArchive/almanac.httparchive.org

Use deep-linked figures as the meta image for social sharing

With #1138, URL params like fig=8 might work but I'm surprised to (finally) learn that anchors like #fig-8 aren't sent to the server. Given that I'm ok to close this as infeasible.

rviscomi

comment created time in 11 days

GollumEvent

issue commentHTTPArchive/almanac.httparchive.org

PWA 2020

We need to decided on this sooner, maybe should I add a label requesting analyst?

Yes, good idea. You can also reach out on the #web-almanac-analysts to see if anyone is available. Or if you're interested in taking on the role, some of us can help with the onboarding.

@rviscomi @obto We had a slack channel for PWA discussions, right?

Not a channel but I did start a group chat to discuss this: https://httparchive.slack.com/archives/G0181NNKEJH/p1596215461000600

obto

comment created time in 12 days

issue openedHTTPArchive/almanac.httparchive.org

Use deep-linked figures as the meta image for social sharing

Using the Twitter card validator we can test how chapters would appear in tweets.

For example https://almanac.httparchive.org/en/2019/cdn will appear like this:

image

If the sharer wanted to deep-link to a specific figure like https://almanac.httparchive.org/en/2019/cdn#fig-8, the same image would be used. This is usually ok but specifically for linking figures, in context I think it would be more useful to get a preview of the thing being shared rather than the chapter's illustration.

I'd like to propose a new feature (possibly blocked on #1138) that would dynamically swap the meta images like <meta property="og:image"> and <meta name="twitter:image"> with the corresponding figure's image, if available. In this example it would be https://almanac.httparchive.org/static/images/2019/cdn/html_tls_negotiation_time.png:

CDN chapter figure 8

created time in 12 days

issue openedHTTPArchive/almanac.httparchive.org

No clickable deeplink for CDN figure 2

See https://almanac.httparchive.org/en/2019/cdn#fig-2

image

I'd expect the text "Figure 2" to link to the URL above, but there is no link. Is this because it is suffixed with : rather than .? Should be an easy fix.

created time in 12 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Ebook social links

 section.chapter {     line-height: none;   } +  .authors .social .fn::footnote-call {+    vertical-align: sub;

Text links use superscript. Why give social icons subscript?

bazzadp

comment created time in 12 days

issue commentHTTPArchive/almanac.httparchive.org

Streamline figures in markdown

One thing I may have communicated poorly is that I'm proposing figures' sequential number to be completely taken out of the markdown. Authors shouldn't have to count figures to determine what their number will be and hardcode that number in the document. What doesn't change is the semantic meaning of the figure, eg flexbox-adoption, so this is the best way to make the figures directly addressable.

The problems you described could be solved with templating*. For example, the template could map figure names (flexbox-adoption) to figure numbers (2.12) determined dynamically based on the order of the figures at runtime. If an author wants to direct readers to figure 2.12, they could invoke a template function like {{ figure_ref('flexbox-adoption') }}, which would render a link like this <a href="#fig-flexbox-adoption">Figure 2.12</a>. (Note I added the prefix fig- here to address your point about heading ID conflicts).

* Maybe not entirely with templating. If a figure is referenced before it's defined, I'm not sure that the template would already have its named mapped to the number. Need to think on this some more, but the compilation step may still be needed to scan through all figures first.

Reusing the same SQL for multiple figures is a real concern, albeit not the common case. I think the templates should assume the common case where the figure name is the same as the SQL file name. If two figures need to map back to the same SQL file, we can support optional kwargs in the template macro. For example, if the flexbox and grid figures were queried in the same file:

{%
  figure(
    # Figure ID corresponding to the `png` file name.
    'flexbox-adoption',
    # Figure caption.
    'Adoption of flexbox.',
    # ...
    # Optional: ID corresponding to the `sql` file name.
    sql_file='flexbox-grid'
  )
%}
# [...]
{%
  figure(
    # Figure ID corresponding to the `png` file name.
    'grid-adoption',
    # Figure caption.
    'Adoption of grid.',
    # ...
    # Optional: ID corresponding to the `sql` file name.
    sql_file='flexbox-grid'
  )
%}

The same could be done for translations, although I don't think this is necessary. I think flexbox-adoption says more about the figure to a non-native English speaker than fig12. If needed, the macro could support a local_name kwarg:

{%
  figure(
    # Figure ID corresponding to the `png` and `sql` file names.
    'flexbox-adoption',
    # Figure caption.
    'Adopción de flexbox.',
    # ...
    # Optional: Localized ID that overrides the figure ID in anchor names.
    localized_name='flexbox-adopcion'
  )
%}

(I assume macros support kwargs, but worst case if not we'd use different macros for each scenario)

@bazzadp WDYT?

rviscomi

comment created time in 13 days

issue commentHTTPArchive/almanac.httparchive.org

Performance 2020

@noamr @ashrith-kulai please request edit access to the planning doc to start your review of the initial outline.

obto

comment created time in 13 days

issue commentHTTPArchive/almanac.httparchive.org

Streamline figures in markdown

To clarify, I'm not suggesting any changes to the way the figures appear other than prefixing with the chapter number, eg the figcaption will still say Figure 2.12. When I say "figure ID" I'm referring to the human readable name which we can reuse as the figure's anchor ID, SQL file name, and ARIA attribute plumbing.

rviscomi

comment created time in 13 days

issue openedHTTPArchive/almanac.httparchive.org

[Ebook] Author alignment and social links

For example, see my author bio in the 2019 ebook:

image

I'd suggest two changes:

  1. Change the alignment to more closely match the web version in which the photo is to the left of the bio.

  2. Add footnote citations to the social links so that their URLs are readable in the footer, similar to the links in the bio.

image

On a related note, the Appendix B section for contributors has the social icons but no footnotes. Maybe we should drop the social icons from this section of the ebook? Otherwise the footnotes alone would take up pages.

image

@bazzadp what are your thoughts on these changes?

created time in 14 days

pull request commentHTTPArchive/almanac.httparchive.org

Move featured chapter quotes from Jinja2 template to JSON file

Will do. I plan to get to this in a few days if there's no hurry.

bazzadp

comment created time in 14 days

push eventHTTPArchive/almanac.httparchive.org

Aditya Pandey

commit sha 8e4f6869afbd9f484733bdebb6bdb2281e16995e

Update 2020.json (#1134) * Update 2020.json Added and modified contributors - Added myself and updated Rockey @rockeynebhwani. * Update src/config/2020.json Co-authored-by: Barry Pollard <barry_pollard@hotmail.com> Co-authored-by: Barry Pollard <barry_pollard@hotmail.com>

view details

push time in 14 days

PR merged HTTPArchive/almanac.httparchive.org

Update 2020.json

Added and modified contributors - Added myself and updated Rockey @rockeynebhwani.

+14 -1

0 comment

1 changed file

adityapandey1998

pr closed time in 14 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Update 2020.json

       "website": "https://aagar.github.io/",       "github": "AAgar",       "twitter": "AAgar"+    },+     "adityapandey1998": {+      "name": "Aditya Pandey",+      "teams": [+       "analysts",+        "developers"+      ],+      "avatar_url": "https://avatars1.githubusercontent.com/u/31750960?v=4&s=200",+      "github": "adityapandey1998",+      "twitter": "adityapandey98",+      "website": "https://www.linkedin.com/in/adityapandey98/"

We can merge this and handle the linkedin specific changes in #1136.

adityapandey1998

comment created time in 14 days

issue openedHTTPArchive/almanac.httparchive.org

Streamline figures in markdown

I'd like to propose a change in the way figures are described by authors in the markdown and rendered internally.

image

In css.md, the corresponding markdown (using embedded HTML) for the figure above is:

<figure>
  <a href="/static/images/2019/css/fig12.png">
    Figure 12. Adoption of flexbox.
  </a>
  <div id="fig12-description" class="visually-hidden">Bar chart showing 49% of desktop pages and 52% of mobile pages using flexbox.</div>
  <figcaption id="fig12-caption">Figure 12. Adoption of flexbox.</figcaption>
</figure>

One thing I'd like to improve is the figure numbering. The figure ID is automatically generated, but we're still manually writing Figure 12 in the <figcaption> and managing the IDs needed for the accessible description. Can all of this be automated? I'd also like to make all figure numbers unique and prefixed by chapter number. So rather than Figure 12 this would be Figure 2.12.

The fig12.png image shouldn't be named according to its figure number. These names aren't descriptive and must be kept in sync with the figure ordering in the chapter. Instead, we should name figure images descriptively, like flexbox-adoption.png. We should use this name as the <figure id> and permalink so that reordering figures wouldn't make old links obsolete.

I would also love to see all figures accompanied by links to their metadata like the corresponding SQL file and results sheet. This would enable anyone to see how the metrics were calculated and run it themselves. This requires some design choices like how to provide these links unobtrusively and accessibly. My idea is a menu in the corner of the figure, similar to the HTTP Archive metrics:

image

Rather than generating figure numbers in the build process, I wonder if this could be done entirely in the templates. For example, could authors include a Jinja macro like this:

{%
  figure(
    # Figure ID corresponding to the `png` image and `sql` file name.
    'flexbox-adoption',
    # Figure caption.
    'Adoption of flexbox.',
    # Detailed figure description.
    'Bar chart showing 49% of desktop pages and 52% of mobile pages using flexbox.',
    # Embedded Sheets URL. (maybe we can add the base of this URL to the chapter yaml and only include the relevant IDs?)
    'https://docs.google.com/spreadsheets/d/e/2PACX-1vQO5CabwLwQ5Lj1_9bbEFnFM1qEqCorymaBHrcaNiMSJ7sYDKHUI5iish5VAS-SxN447UTW-1-5-OjE/pubchart?oid=2021161093&amp;format=interactive',
    # Tab ID in Sheets for this metric's results. For example `/edit#gid=1861654265`.
    '1861654265',
    # Optional width and height if non-standard (600x371).
    600, 371
  )
%}

There are other kinds of figures, like big numbers:

image

<figure>
  <div class="big-number">2%</div>
  <figcaption>Figure 13. Percent of websites using grid.</figcaption>
</figure>

Even though the markup for this figure is much simpler, I would love to see another macro to standardize the boilerplate across all chapters so that the developers have more centralized control over how these are generated. We could have a macro like this:

{%
  figure_big_number(
    # Figure ID corresponding to the `sql` file name.
    'grid-adoption',
    # The big number.
    '2%',
    # Figure caption.
    'Percent of websites using grid.',
    # Tab ID in Sheets for this metric's results.
    '1459448594'
  )
%}

We should build some customizability into these macros. For example, we needed to adjust the appearance of the z-index "really big number" figure. Perhaps there could be an optional parameter for a classname to be added to the figure. This could be used to adjust the font size as in the z-index example, create "alternate" themes for the big numbers so that they're not all the same color, etc.


We also need to support other types of figures: tables, images, and videos. The 2019 Mobile Web chapter uses all three in the first three figures.

<figure>
<table>
  <tr>
    <th>Connection type</th>
    <td><a href="https://www.gsma.com/r/mobileeconomy/">2G or 3G</a></td>
  </tr>
  <tr>
    <th>Latency</th>
    <td>300 - 400ms</td>
  </tr>
  <tr>
    <th>Bandwidth</th>
    <td>0.4 - 1.6Mbps</td>
  </tr>
  <tr>
    <th>Phone</th>
    <td><a href="https://www.gsmarena.com/samsung_galaxy_s6-6849.php">Galaxy S6</a> — <a href="https://www.notebookcheck.net/A11-Bionic-vs-7420-Octa_9250_6662.247596.0.html">4x slower</a> than iPhone 8 (Octane V2 score)</td>
  </tr>
</table>
<figcaption>Figure 1. Technical profile of a typical mobile user.</figcaption>
</figure>

I think it's ok to include the <figure> HTML although it may be nice to use markdown tables when possible. It may be harder to get the <th> elements right for both horizontal and vertical using only markdown. But we should have a solution to abstract away the figure numbering and IDing. For example:

<figure id="technical-profile">
<table>
  <tr>
    <th>Connection type</th>
    <td><a href="https://www.gsma.com/r/mobileeconomy/">2G or 3G</a></td>
  </tr>
  <tr>
    <th>Latency</th>
    <td>300 - 400ms</td>
  </tr>
  <tr>
    <th>Bandwidth</th>
    <td>0.4 - 1.6Mbps</td>
  </tr>
  <tr>
    <th>Phone</th>
    <td><a href="https://www.gsmarena.com/samsung_galaxy_s6-6849.php">Galaxy S6</a> — <a href="https://www.notebookcheck.net/A11-Bionic-vs-7420-Octa_9250_6662.247596.0.html">4x slower</a> than iPhone 8 (Octane V2 score)</td>
  </tr>
</table>
<figcaption>{{ figure_number() }} Technical profile of a typical mobile user.</figcaption>
</figure>

I've added id="technical-profile" to the <figure> and {{ figure_number() }} to the <figcaption>. The figure_number Jinja macro could generate a monotonically increasing figure number using shared state with the other figure macros. I'd love to hear any ideas to remove even more of the figure/figcaption boilerplate.


Summary

  • Figure markup is a dark art that should be abstracted away so that authors can focus on the content.
  • Numeric figure IDs are brittle and should be replaced with descriptive, human readable IDs.
  • Figure numbers should be entirely automated.
  • We should include more meta resources with figures to connect the results back to the source.

cc @HTTPArchive/developers

created time in 14 days

PR closed HTTPArchive/httparchive.org

Bump elliptic from 6.4.1 to 6.5.3 dependencies

Bumps elliptic from 6.4.1 to 6.5.3. <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/indutny/elliptic/commit/8647803dc3d90506aa03021737f7b061ba959ae1"><code>8647803</code></a> 6.5.3</li> <li><a href="https://github.com/indutny/elliptic/commit/856fe4d99fe7b6200556e6400b3bf585b1721bec"><code>856fe4d</code></a> signature: prevent malleability and overflows</li> <li><a href="https://github.com/indutny/elliptic/commit/60489415e545efdfd3010ae74b9726facbf08ca8"><code>6048941</code></a> 6.5.2</li> <li><a href="https://github.com/indutny/elliptic/commit/9984964457c9f8a63b91b01ea103260417eca237"><code>9984964</code></a> package: bump dependencies</li> <li><a href="https://github.com/indutny/elliptic/commit/ec735edde187a43693197f6fa3667ceade751a3a"><code>ec735ed</code></a> utils: leak less information in <code>getNAF()</code></li> <li><a href="https://github.com/indutny/elliptic/commit/71e4e8e2f5b8f0bdbfbe106c72cc9fbc746d3d60"><code>71e4e8e</code></a> 6.5.1</li> <li><a href="https://github.com/indutny/elliptic/commit/7ec66ffa255079260126d87b1762a59ea10de5ea"><code>7ec66ff</code></a> short: add infinity check before multiplying</li> <li><a href="https://github.com/indutny/elliptic/commit/ee7970b92f388e981d694be0436c4c8036b5d36c"><code>ee7970b</code></a> travis: really move on</li> <li><a href="https://github.com/indutny/elliptic/commit/637d0216b58de7edee4f3eb5641295ac323acadb"><code>637d021</code></a> travis: move on</li> <li><a href="https://github.com/indutny/elliptic/commit/5ed0babb6467cd8575a9218265473fda926d9d42"><code>5ed0bab</code></a> package: update deps</li> <li>Additional commits viewable in <a href="https://github.com/indutny/elliptic/compare/v6.4.1...v6.5.3">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

</details>

+3 -3

0 comment

1 changed file

dependabot[bot]

pr closed time in 15 days

issue closedHTTPArchive/httparchive.org

June 2020 mobile summary tables missing

According to the meta dashboard, the mobile summary pages/requests tables are not available on BigQuery. (The right edge of the charts should have both purple and blue bars)

image

The GCE worker appears to have filled its disk.

$ df
Filesystem      1K-blocks      Used Available Use% Mounted on
/dev/sdb       1031992064 979546880         0 100% /home/igrigorik/archive

As a temporary fix, I've cleared some old CSVs to make space.

More permanently though, we need to edit the sync_csv script to delete the files when its done.

closed time in 15 days

rviscomi

PR closed HTTPArchive/legacy.httparchive.org

[sass] Add constants usage count (e & pi)

This counts how many times (if any) the constants for e and π are used.

Progress on https://github.com/HTTPArchive/almanac.httparchive.org/issues/898

+5 -0

2 comments

1 changed file

LeaVerou

pr closed time in 15 days

pull request commentHTTPArchive/legacy.httparchive.org

[sass] Add constants usage count (e & pi)

No because they are mostly used in calculations. Anyhow, not that important.

😞 ok, closing this PR

LeaVerou

comment created time in 15 days

Pull request review commentHTTPArchive/legacy.httparchive.org

[sass] Add constants usage count (e & pi)

 function analyzeSCSS(scss, ret) { 		"class": scss.match(/&\.\w+/g)?.length, 		"attr": scss.match(/&\[\w+/g)?.length, 	};++	ret.constants = {+		e: scss.match(/\bmath\.$e\b/g)?.length,

Does the $ need to be escaped?

LeaVerou

comment created time in 15 days

issue commentHTTPArchive/almanac.httparchive.org

Caching 2020

Thanks @Soham-S-Sarkar! Go ahead and request edit access to the outline doc, add your contact info to the first page, and leave any comments on the outline in the doc. cc @roryhewitt

obto

comment created time in 15 days

issue commentHTTPArchive/almanac.httparchive.org

Performance 2020

Hi @Soham-S-Sarkar. This chapter has 9 reviewers already, but I'll defer to @thefoxis if more are needed.

Meanwhile you can browse the chapter's outline to get a sense for the content direction.

obto

comment created time in 15 days

issue openedHTTPArchive/almanac.httparchive.org

Support LinkedIn contributor links

Per #1134 contributors should be able to add their LinkedIn profile to their social media links seen on the Contributors and chapter pages.

This will be a linkedin property on the contributor object with a value of their user name. In the HTML templates we should generate a LinkedIn URL like "https://www.linkedin.com/in/{{ contributor.linkedin }}/".

We will also need a new LinkedIn icon.

created time in 15 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Update 2020.json

       "website": "https://aagar.github.io/",       "github": "AAgar",       "twitter": "AAgar"+    },+     "adityapandey1998": {+      "name": "Aditya Pandey",+      "teams": [+       "analysts",+        "developers"+      ],+      "avatar_url": "https://avatars1.githubusercontent.com/u/31750960?v=4&s=200",+      "github": "adityapandey1998",+      "twitter": "adityapandey98",+      "website": "https://www.linkedin.com/in/adityapandey98/"

+1 let's add it as a separate social channel for now and we can open a new issue for Contributor page support

      "twitter": "adityapandey98",
      "linkedin": "https://www.linkedin.com/in/adityapandey98/"
adityapandey1998

comment created time in 15 days

issue commentHTTPArchive/almanac.httparchive.org

CMS 2020

Yes, we're all set!

obto

comment created time in 15 days

push eventHTTPArchive/legacy.httparchive.org

Lea Verou

commit sha 0b19588815d0fd869a6145670c29d257196ac17b

[css-variables] Cleanup added custom properties, collapse duplicate siblings (#185)

view details

push time in 16 days

PR merged HTTPArchive/legacy.httparchive.org

[css-variables] Cleanup added custom properties, collapse duplicate siblings

This PR does two things:

  1. The custom properties added are removed at the end. This means that the code is now idempotent; it can run multiple times on the same website with the same results. It also means that if any other metrics traverse document.styleSheets they will not be affected if this runs first.
  2. Duplicate siblings in the same obj.children array are collapsed into one object, with a times property indicating how many they were. Non-contiguous siblings are also collapsed, so this is a bit lossy, but it does not affect any of the things we may want to study in this data structure. This change reduced the size of the tree generated on my own website by 40%, though the savings were less impressive on other websites (basically the more generic the selectors that use custom properties, the bigger the savings). The algorithm does recursively call JSON.stringify() on every single object in the graph, so there's a certain tradeoff of memory vs computation, but in practice it seems to run pretty fast, even on large trees.

Progress on https://github.com/HTTPArchive/almanac.httparchive.org/issues/898

+52 -1

0 comment

1 changed file

LeaVerou

pr closed time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

 <h1 class="title title-lg">     }     window.addEventListener('popstate', handleFilterUrl);     handleFilterUrl();+}); -    contributorsGrid.setAttribute('data-rendered', true);-})();+    try {+      loaded() +    } catch(e) { }

Any interest in logging when this happens to GA?

bazzadp

comment created time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

 <h1 class="title title-lg"> {% block scripts %}   {{ super() }}   <script nonce="{{ csp_nonce() }}">+  +  // Randomise the contributors on reload as server-side random will be cached at CDN.+  // Only run this if the page is reloaded for performance reasons.+  +  // Support both newer PerformanceNavigationTiming API for newer browsers+  // and older Navigation Timing API for older browsers+  if ((performance.getEntriesByType("navigation")[0] && performance.getEntriesByType("navigation")[0].type === "reload")+      ||+        (performance.navigation && performance.navigation.type === performance.navigation.TYPE_RELOAD)) {+    var ul = document.querySelector('.contributor-grid');+    for (var i = ul.children.length; i >= 1; i--) {+        // Ensure position 1 is minimum to leave "Join the team" icon at beginning+        ul.appendChild(ul.children[Math.floor(Math.random() * i) + 1]);+    }+  }+ (function loaded() {

Nit: could you remove the parentheses from around the function now that we're not immediately invoking it?

bazzadp

comment created time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

   } } </style>+<noscript>+  <style nonce="{{ csp_nonce() }}">+    .contributor-grid:not([data-rendered='true']) .contributor {+      transform: translateY(0) !important;+      opacity: 1 !important;

Can we remove !important?

bazzadp

comment created time in 16 days

issue commentHTTPArchive/almanac.httparchive.org

Callout headlines to increase interest

Thanks for checking in @natedame. It sounds like you're suggesting a total redesign of the home page content. I'm not strictly opposed to it, but I'm having a hard time imagining your proposal without more concrete suggestions. Could you whip up a PR, prototype, or mockup to show what kind of content you'd like to see added to the home page and how it would fit in with our existing design?

natedame

comment created time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

 <h1 class="title title-lg">     var totalText = document.querySelector('#contributors-total-text');     var totalContributors = document.querySelector('#contributors-total');     var shadowNode = document.createElement('div');-    var urlObject = new URL(document.location);+    var urlObject;+    +    if (self.URLSearchParams) {

Maybe, instead of all the checks, we should just have a try/catch round it so we can still show the contributors if something fails?

💯 that sounds much better

bazzadp

comment created time in 16 days

issue commentHTTPArchive/almanac.httparchive.org

PWA 2020

Sorry to see you go @tungpatrick but completely understand.

@hemanth are you still interested in being an analyst for this chapter? I also see @thepassle listed in the doc as an analyst but I don't see any discussion of that happening in this issue, so not sure if that's intentional. Could you update https://github.com/HTTPArchive/almanac.httparchive.org/issues/909#issue-646592503 and the doc with the correct analyst assignments?

Also as @obto mentioned, this chapter is overdue on a couple of milestones, so it'd be great to get these sorted out ASAP to stay on schedule. Thanks!

obto

comment created time in 16 days

pull request commentHTTPArchive/almanac.httparchive.org

removed tungpatrick from 2020.json

😢

tungpatrick

comment created time in 16 days

push eventHTTPArchive/almanac.httparchive.org

Patrick Tung

commit sha 6b1395420086a9c177f5195166205c5011bc7be9

removed tungpatrick from 2020.json (#1130)

view details

push time in 16 days

delete branch HTTPArchive/almanac.httparchive.org

delete branch : remove_tungpatrick_analyst

delete time in 16 days

issue commentHTTPArchive/almanac.httparchive.org

Ecommerce 2020

@remotesynth sorry about that, I've edited @obto's comment to clarify the correct analyst for this chapter.

obto

comment created time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

 <h1 class="title title-lg">     var totalText = document.querySelector('#contributors-total-text');     var totalContributors = document.querySelector('#contributors-total');     var shadowNode = document.createElement('div');-    var urlObject = new URL(document.location);+    var urlObject;+    +    if (self.URLSearchParams) {

Ok thanks for weighing in. Would you be open to creating a new issue to explore the idea with the rest of the dev team?

bazzadp

comment created time in 16 days

pull request commentHTTPArchive/almanac.httparchive.org

Fix Chinese language selector

Weird! What is it about these characters that make the <select> shrink?

bazzadp

comment created time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

 <h1 class="title title-lg">     var totalText = document.querySelector('#contributors-total-text');     var totalContributors = document.querySelector('#contributors-total');     var shadowNode = document.createElement('div');-    var urlObject = new URL(document.location);+    var urlObject;+    +    if (self.URLSearchParams) {

For another issue, what are your thoughts on transpilation? It'd be great if developers could write using the latest JS features and not have to worry about browser support.

bazzadp

comment created time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

   } } </style>+<noscript>+  <style nonce="{{ csp_nonce() }}">+    .contributor-grid .contributor {+      transform: translateY(0) !important;+      opacity: 1 !important;+    }

Nothing special about noscript here to necessitate !important IMO. The specificity should take care of it.

bazzadp

comment created time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

 <h1 class="title title-lg"> {% block scripts %}   {{ super() }}   <script nonce="{{ csp_nonce() }}">+  +  // Randomise the contributors on reload as server-side random will be cached at CDN.+  // Only run this if the page is reloaded for performance reasons.+  +  // Support both newer PerformanceNavigationTiming API for newer browsers+  // and older Navigation Timing API for older browsers+  if ((performance.getEntriesByType("navigation")[0] && performance.getEntriesByType("navigation")[0].type === "reload")+      ||+        (performance.navigation && performance.navigation.type === performance.navigation.TYPE_RELOAD)) {+    var ul = document.querySelector('.contributor-grid');+    for (var i = ul.children.length; i >= 1; i--) {+        ul.appendChild(ul.children[Math.random() * i | 1]);

Ah ok. In that case is it possible to use a different collection of elements that doesn't include the one we don't want to shuffle?

Rather than ul.children maybe:

var contributors = document.querySelectorAll('li.contributor');
bazzadp

comment created time in 16 days

issue commentHTTPArchive/almanac.httparchive.org

Prototype an interactive data visualization for the 2020 CSS chapter

Thanks @SaptakS! Would be great to have help with this.

@LeaVerou do you have a better idea now of what you'd like to focus the visualization on?

rviscomi

comment created time in 16 days

issue commentHTTPArchive/almanac.httparchive.org

JavaScript 2020

@jaisanth @tkadlec for the two milestones overdue on July 27 could you check the boxes if:

  • the outline has been reviewed and all feasible metrics have been identified
  • any necessary custom metrics have been created and you've created a draft PR to track which feasible metrics have had their queries implemented

Keeping the milestone checklist up to date helps us to see at a glance how all of the chapters are progressing. Thanks for helping us to stay on schedule!

obto

comment created time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

   } } </style>+<noscript>+  <style nonce="{{ csp_nonce() }}">+    .contributor-grid .contributor {+      transform: translateY(0) !important;+      opacity: 1 !important;+    }

Avoid !important whenever possible. You could match the specificity of the selector above to ensure that this overwrites it. (please test)

    .contributor-grid:not([data-rendered='true']) .contributor {
      transform: translateY(0);
      opacity: 1;
    }
bazzadp

comment created time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

 <h1 class="title title-lg"> {% block scripts %}   {{ super() }}   <script nonce="{{ csp_nonce() }}">+  +  // Randomise the contributors on reload as server-side random will be cached at CDN.+  // Only run this if the page is reloaded for performance reasons.+  +  // Support both newer PerformanceNavigationTiming API for newer browsers+  // and older Navigation Timing API for older browsers+  if ((performance.getEntriesByType("navigation")[0] && performance.getEntriesByType("navigation")[0].type === "reload")+      ||+        (performance.navigation && performance.navigation.type === performance.navigation.TYPE_RELOAD)) {+    var ul = document.querySelector('.contributor-grid');+    for (var i = ul.children.length; i >= 1; i--) {+        ul.appendChild(ul.children[Math.random() * i | 1]);

Avoid magic

        ul.appendChild(ul.children[Math.floor(Math.random() * i)]);
bazzadp

comment created time in 16 days

Pull request review commentHTTPArchive/almanac.httparchive.org

Randomize contributors on reload

 <h1 class="title title-lg">     var totalText = document.querySelector('#contributors-total-text');     var totalContributors = document.querySelector('#contributors-total');     var shadowNode = document.createElement('div');-    var urlObject = new URL(document.location);+    var urlObject;+    +    if (self.URLSearchParams) {

Many questions about this.

  • Are we explicitly trying to support IE? Why?
  • Why self as opposed to window?
  • Why URLSearchParams as opposed to URL?
bazzadp

comment created time in 16 days

more