davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Write-only Twitter (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://laurakalbag.com/write-only-twitter/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick">

<article>
  <header>
    <h1>Write-only Twitter</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://laurakalbag.com/write-only-twitter/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>A couple of weeks ago, <a href="https://ar.al">Aral</a> asked me if I could write a user stylesheet for web browsers to make Twitter nothing but a compose box.</p>

<p><a href="#how-the-stylesheet-works">Jump straight to how it works</a></p>

<p>I totally get it. <a href="/whats-wrong-with-twitter/">Twitter sucks your time and soul</a>. But sometimes you need to use it to share what you’re working on, or promote events. Essentially, you want to use Twitter but you don’t want it to use you. The way to do this is to hide every part of Twitter’s interface that doesn’t help you compose a tweet, or otherwise likely to distract or derail you.</p>

<h2 id="the-power-of-css-pseudo-classes">The power of CSS pseudo classes</h2>

<p>As part of my work on <a href="https://better.fyi/trackers/">Better’s blocking rules</a>, I sometimes have to hide parts of the page using CSS. Hiding ads isn’t really Better’s purpose, we try to block the tracking and behavioural advertising scripts before they put anything on the page. But occasionally, sites have rolled their own obnoxious first-party targeted ad system that is inseparable from the rest of their site’s functionality. On such occasions, I roll up my sleeves, and get my <a href="https://css-tricks.com/pseudo-class-selectors/">pseudo CSS selectors</a> out to set these elements to <code>display: none</code>. Because, of course, these sites design their HTML and CSS to avoid blockers like Better.</p>

<h3 id="the-problem-with-user-stylesheets">The problem with user stylesheets</h3>

<p>Hiding parts of Twitter’s interface is a similar problem. Luckily, a lot of Twitter’s interface has semantic naming (amongst the gazillion nested <code>div</code>s and robot-generated CSS classes) for accessibility purposes, so it’s simple enough to hook into these elements for a user stylesheet. The problem with user stylesheets is that they’re a blunt instrument, aimed at making global changes across every site you visit. Really useful for making font sizes big on every site you visit, but if you use it to hide any element with the class of “<code>timeline</code>”, chances are you’ll break a lot of websites you visit.</p>

<h3 id="a-solution-to-target-specific-websites">A solution to target specific websites</h3>

<p>My solution was to chain what I suspect are fairly unique element selectors in a likely unique sequence, ensuring that these rules will only apply to twitter.com, even though the stylesheet will be used on every site visited.</p>

<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="c">/* Hide the Home timeline and Explore timeline */</span>
<span class="nt">div</span><span class="o">[</span><span class="nt">data-at-shortcutkeys</span><span class="o">]</span> <span class="nt">header</span><span class="o">[</span><span class="nt">role</span><span class="o">=</span><span class="s2">"banner"</span><span class="o">]</span> <span class="o">+</span> <span class="nt">main</span><span class="o">[</span><span class="nt">role</span><span class="o">=</span><span class="s2">"main"</span><span class="o">]</span> <span class="nt">div</span><span class="o">[</span><span class="nt">aria-label</span><span class="o">=</span><span class="s2">"Timeline: Your Home Timeline"</span><span class="o">],</span>
<span class="nt">div</span><span class="o">[</span><span class="nt">data-at-shortcutkeys</span><span class="o">]</span> <span class="nt">header</span><span class="o">[</span><span class="nt">role</span><span class="o">=</span><span class="s2">"banner"</span><span class="o">]</span> <span class="o">+</span> <span class="nt">main</span><span class="o">[</span><span class="nt">role</span><span class="o">=</span><span class="s2">"main"</span><span class="o">]</span> <span class="nt">div</span><span class="o">[</span><span class="nt">aria-label</span><span class="o">=</span><span class="s2">"Timeline: Explore"</span><span class="o">]</span> <span class="p">{</span>
  <span class="k">display</span><span class="p">:</span> <span class="kc">none</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>

<p>As you can tell from the selectors I’ve used, it is fragile as anything. As soon as Twitter decides to change the <code>aria-label</code> for its home timeline, the stylesheet will no longer effectively hide the home timeline. But, as with a lot of Better’s blocking rules, this is a balance between using a fragile rule that works against a big corporation that tends to be pretty slow in rolling out changes to its interface.</p>

<p>After a couple of weeks of using this stylesheet in my primary browser and not noticing any issues with other sites, I’m fairly confident in sharing this stylesheet with anyone else who might find it useful.</p>

<h2 id="how-the-stylesheet-works">How the stylesheet works</h2>

<p>I ended up creating two stylesheets, one for Aral’s way of working (<code>write-only.css</code>), and one for my way of working (<code>read-some.css</code>).</p>

<p><a href="https://source.small-tech.org/laura/write-only-twitter/-/blob/master/write-only.css"><code>write-only.css</code></a> is a user stylesheet for the browser that hides absolutely everything except the Home feed compose box on Twitter.</p>

<figure>

<pre><code>&lt;img class="landscape" sizes="(min-width: 1380px) 750px, (min-width: 820px) 719px, (min-width: 740px) calc(-33.33vw + 875px), (min-width: 340px) calc(92.63vw - 39px), calc(100vw - 32px)" srcset="/write-only-twitter/write-only-twitter/social_hu3843e09fa51a0152293fbbf1ad71c1cb_33928_300x0_resize_mitchellnetravali_2.png 300w,/write-only-twitter/write-only-twitter/social_hu3843e09fa51a0152293fbbf1ad71c1cb_33928_500x0_resize_mitchellnetravali_2.png 500w,/write-only-twitter/write-only-twitter/social_hu3843e09fa51a0152293fbbf1ad71c1cb_33928_800x0_resize_mitchellnetravali_2.png 800w,/write-only-twitter/write-only-twitter/social.png 1118w" src="social.png" alt="Web page showing just Twitter’s compose box, no other parts of Twitter’s interface."&gt;

&lt;figcaption&gt;


  &lt;p&gt;&lt;code&gt;write-only.css&lt;/code&gt; in action.&lt;/p&gt;

&lt;/figcaption&gt;
</code></pre>
</figure>

<p>My Twitter use varies, particularly as I sometimes use it for Better support, so I need to be able to access a bit more of Twitter’s interface.</p>

<p><a href=""><code>read-some.css</code></a> is a user stylesheet for the browser that hides:</p>

<ul>
<li>Home timeline</li>
<li>Explore timeline</li>
<li>List timelines</li>
</ul>

<p>but keeps:</p>

<ul>
<li>Mentions</li>
<li>Messages</li>
<li>Settings etc</li>
</ul>

<p>And let me tell you, having this stylesheet on my desktop Safari for the last couple of weeks has made a huge difference. Now I can check our @mentions without getting further distracted. Even when my muscle memory types “twitter.com” when I’m procrastinating or seeking distraction, the page loads so minimally, I take one look at it and close the tab. It no longer appears in my “Frequently Visited” sites!</p>

<figure>

<pre><code>&lt;img class="landscape" sizes="(min-width: 1380px) 750px, (min-width: 820px) 719px, (min-width: 740px) calc(-33.33vw + 875px), (min-width: 340px) calc(92.63vw - 39px), calc(100vw - 32px)" srcset="/write-only-twitter/write-only-twitter/read-some_hu1fd5ca1b59b76b36250d12d5d1634087_45368_300x0_resize_mitchellnetravali_2.png 300w,/write-only-twitter/write-only-twitter/read-some_hu1fd5ca1b59b76b36250d12d5d1634087_45368_500x0_resize_mitchellnetravali_2.png 500w,/write-only-twitter/write-only-twitter/read-some_hu1fd5ca1b59b76b36250d12d5d1634087_45368_800x0_resize_mitchellnetravali_2.png 800w,/write-only-twitter/write-only-twitter/read-some.png 1118w" src="read-some.png" alt="Web page showing Twitter’s interface without the timeline of tweets or What’s Happening sidebar."&gt;

&lt;figcaption&gt;


  &lt;p&gt;&lt;code&gt;read-some.css&lt;/code&gt; in action.&lt;/p&gt;

&lt;/figcaption&gt;
</code></pre>
</figure>

<h2 id="where-to-find-the-stylesheets">Where to find the stylesheets</h2>

<p>You can <a href="https://source.small-tech.org/laura/write-only-twitter">download the Write-Only Twitter stylesheets and find out more about them on our Small Tech repository</a>. I’ll update them when needed. There’s not instructions for every browser in there, but it shouldn’t be too hard for you to find that information if you need it. Personally I recommend Safari for everyday browsing as you can use <a href="https://better.fyi">Better Blocker</a> to block trackers while you browse 😉</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
      </svg> RSS</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>