<commit_before><!--
Copyright 2021 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Layout Shift Terminator</title>

    <link rel="stylesheet" href="./style.css" />
    <script src="./app.mjs" type="module"></script>
  </head>
  <body>
    <h1>Layout Shift Terminator</h1>

    <noscript>
      <p>
        <em>This app requires JavaScript to be enabled.</em>
      </p>
    </noscript>

    <p>
      The following tool allows you to enter arbitrary markup which causes
      layout shifts (e.g. social embed) in order load the markup at various
      viewport sizes to be able to measure the dimensions at each. With this
      information it then provides optimized markup with responsive media
      queries to reduce the amount of layout shifting when the markup is
      rendered on a loading page.
    </p>

    <form action="javascript:">
      <label for="markup">Layout-shifting markup:</label>
      <textarea
        id="markup"
        autofocus
        required
        placeholder="Paste layout-shifting HTML here."
      ></textarea>
      <button type="submit" disabled>Eliminate Layout Shift</button>

      <section id="calculation" hidden>
        <h2>Terminating Layout Shifts…</h2>

        <progress></progress>

        <p>
          Checking viewport:
          <span id="current-viewport-width"></span>&times;<span
            id="current-viewport-height"
          ></span>
        </p>

        <div id="iframe-wrapper">
          <iframe src="about:blank"></iframe>
        </div>
      </section>

      <section id="termination" hidden>
        <h2>Terminated</h2>
        <p hidden>Viewport sizes:</p>
        <ol id="markup-viewport-sizes" hidden></ol>

        <label for="optimized-markup"
          >Markup optimized to terminate layout shifts:</label
        >
        <textarea id="optimized-markup" readonly></textarea>

        <p>
          Preview the optimized markup, try resizing the window and hitting this
          below reload button perhaps with network throttling enabled and check
          that the lorem ipsum text doesn't shift around.
        </p>
        <button id="reload-preview" type="button">Reload</button>
        <iframe id="optimized-preview" src="about:blank"></iframe>
      </section>
    </form>

    <hr />
    <address><a href="https://weston.ruter.net/">@westonruter</a></address>
  </body>
</html>
<commit_msg>Add specific lang<commit_after><!--
Copyright 2021 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Layout Shift Terminator</title>

    <link rel="stylesheet" href="./style.css" />
    <script src="./app.mjs" type="module"></script>
  </head>
  <body>
    <h1>Layout Shift Terminator</h1>

    <noscript>
      <p>
        <em>This app requires JavaScript to be enabled.</em>
      </p>
    </noscript>

    <p>
      The following tool allows you to enter arbitrary markup which causes
      layout shifts (e.g. social embed) in order load the markup at various
      viewport sizes to be able to measure the dimensions at each. With this
      information it then provides optimized markup with responsive media
      queries to reduce the amount of layout shifting when the markup is
      rendered on a loading page.
    </p>

    <form action="javascript:">
      <label for="markup">Layout-shifting markup:</label>
      <textarea
        id="markup"
        autofocus
        required
        placeholder="Paste layout-shifting HTML here."
      ></textarea>
      <button type="submit" disabled>Eliminate Layout Shift</button>

      <section id="calculation" hidden>
        <h2>Terminating Layout Shifts…</h2>

        <progress></progress>

        <p>
          Checking viewport:
          <span id="current-viewport-width"></span>&times;<span
            id="current-viewport-height"
          ></span>
        </p>

        <div id="iframe-wrapper">
          <iframe src="about:blank"></iframe>
        </div>
      </section>

      <section id="termination" hidden>
        <h2>Terminated</h2>
        <p hidden>Viewport sizes:</p>
        <ol id="markup-viewport-sizes" hidden></ol>

        <label for="optimized-markup"
          >Markup optimized to terminate layout shifts:</label
        >
        <textarea id="optimized-markup" readonly></textarea>

        <p>
          Preview the optimized markup, try resizing the window and hitting this
          below reload button perhaps with network throttling enabled and check
          that the lorem ipsum text doesn't shift around.
        </p>
        <button id="reload-preview" type="button">Reload</button>
        <iframe id="optimized-preview" src="about:blank"></iframe>
      </section>
    </form>

    <hr />
    <address><a href="https://weston.ruter.net/">@westonruter</a></address>
  </body>
</html>

{'fraction_non_alphanumeric': 0.11469475069935824, 'fraction_numerical': 0.005265756129669245, 'mean_word_length': 2.692588092345079, 'pattern_counts': {'":': 0, '<': 147, '<?xml version=': 0, '>': 147, 'https://': 4, 'lorem ipsum': 2, 'www.': 2, 'xml': 0}, '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': '1811621', 'n_tokens_mistral': 1775, 'n_tokens_neox': 1656, 'n_words': 578}