Eamonn O'Brien-Strain

If you are reading this article on a phone or other touch device, did you know you can swipe left and right to get to other articles? Go on, try it now. I'll wait.

[Edit 2023-02-07: Actually you will need to try this on the old version of this blog.]

This turned out to be easy to implement thanks to Hammer.js. Here's how I did it.

  1. I downloaded the Hammer.js library into my JavaScript directory:
   wget https://hammerjs.github.io/dist/hammer.min.js

and creates a new file called swipe.js in that directory. 2. I added the following to the HTML template of my article pages:

   <script src="/js/hammer.min.js" defer></script>
   <script src="/js/swipe.js" defer></script>

This loads the Hammer library and my application code into the web page. As an optimization I add the defer attribute so that the script loading does not block the initial page load: after all this is optional stuff that should not slow sown the normal functionality of the page. 3. I already had the following navigational structure in the article pages for going to the previous and next pages:

   <nav>
       <a id="prev" href="...">&laquo; ...</a>
       <a id="next" href="...">... &raquo;</a>
   </nav>

The JavaScript can pluck out the destination URLs from the href attributes of the #t and #prev elements. 4. I added the following to swipe.js:

   const mc = new Hammer(document.body)

   mc.on('swipe', (ev) => {
     const dir = (ev.deltaX < 0) ? 'next' : 'prev'
     const a = document.getElementById(dir)
     if (a) {
       window.location = a.href
     }
   })

This code initializes Hammer.js and sets up a swipe lister. When a swipe is detected the code looks at the deltaX event property to determine if this was a left or right swipe, pulls out the URL from the href of the corresponding link, and navigates to that link.

This simple solution works fine, but there is no feedback to the user to show that a swipe has happened. In the next article I'll show how to add animation to improve the UX.

In a follow-up to the last article which described Adding swipe actions to a web site, I'll show how to add simple animation to give some user feedback that the swipe has happened.

First of all, we'll modify the JavaScript to add a single line as follows:

mc.on('swipe', (ev) => {
  const dir = (ev.deltaX < 0) ? 'next' : 'prev'
  const a = document.getElementById(dir)
  if (a) {

    // Added line for animation:
    document.body.classList.add('animate-' + dir)

    window.location = a.href
  }
})

So, just before loading in the new page this code adds a CSS class animate-next or animate-prev to the body element of the page (i.e. to the entire page). This will trigger an animation that will run while waiting for the new page to load.

To actually cause the animation we add the following CSS:

  @keyframes slideLeft {
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  @keyframes slideRight {
    to {
      transform: translateX(-100%);
      opacity: 0;
    }
  }
  .animate-prev {
    animation: 0.2s ease-out 0s 1 slideLeft;
  }
  .animate-next {
    animation: 0.2s ease-out 0s 1 slideRight;
  }

Let's walk through this:

  1. Each @keyframes includes a single to (100%) key-frame which is the state to animate to. Because there is no from (0%) key-frame the animation will default to using the current state as the starting state. It
    • translates 100% to the left or right (which for the body will translate it offscreen)
    • fades from opaque to transparent.
  2. Each class selector has an animation that uses the corresponding key-frame, specifying that it should animate
    • over the given time
    • using ease-out (start fast then slow down)
    • with no delay
    • playing just once
    • the given #keyframes name

Note we are careful to only use High Performance Animations that can be efficiently implemented by a phone's GPU, namely translation, scaling, rotation, or opacity change. We could obviously use these four types of animations to further enhance the page-swiping animation to make it more effective, while still keeping it efficient.

I was intrigued enough by an article on hydration, Which drink is best for hydration? Hint: It isn't water, which appeared in my news feeds that I dug up the original paper, A randomized trial to assess the potential of different beverages to affect hydration status: development of a beverage hydration index, which seems to be from legit scientists, so I tweeted about it:

This seems to go against the conventional wisdom in the United States, where people feel the need to drink a lot of water to be healthy.

As someone who grew up in Ireland, I do find it strange how much value Americans put on water. In Dublin we had very high quality water from the Wicklow Mountains but we did not drink plain water that often. At family dinner we would not have water on the table, or indeed any drink. Instead we would drink copious amounts of tea after each meal and throughout the day.

Of course most of the United States gets much hotter in the Summer than Ireland, and indeed I'm suspicious that the kidney stones I developed within a few years of coming to the US were caused by me not upping my liquid intake to match the increased temperatures I was experiencing.

But even in hotter parts of Europe people don't drink as much water as Americans. Ubiquitous water is not the norm. In most restaurants you have to pay for bottled water if you want water with your meal.

But I've always been a bit dubious that there is a scientific basis for drinking quite as much water as many Americans believe is necessary to be healthy, and I've been suspicious of the assertion that coffee and beer “don't count” because of the diuretic effect of caffeine and alcohol.

The paper does seem to confirm my suspicions, and a quick Google search finds some confirmation. For example the New York Times UpShot column determined No, You Do Not Have to Drink 8 Glasses of Water a Day, which is confirmed by WebMD in The Quest for Hydration.

The “8 glasses of water” requirement actually includes all the water in food, and since the majority of most food is water, you can get a lot of your hydration needs just from eating. And if you consider water from coffee, tea, and beer you can easily get all your water needs without drinking actual water.

So, this emphasis on drinking water is a weird peculiarity of American culture, but it is a pretty harmless peculiarity. Even if the hydration benefits are greatly exaggerated, it is still good for the health if consumption of water displaces excessive consumption of alcohol or sugary drinks.

Jekyll logo

Well, it’s been about a year a year since I started this blog, and I’ve finally got fed up with my idiosyncratic static site templating framework that uses the venerable m4.

I was working on building a better templating language, inspired by the one we use in Google to power the main Google search page, but doing that was preventing me actually writing any content for the blog.

So, for now I have abandoned my non-standard approach and have converted to using the Jekyll static site generator. So now eamonn.org is generated by Jekyll, though I have kept the old version alive with links to the old versions of the pages (because Cool URIs don't change).

For now I’m just using the bare-bones default theme, but I’m thinking of working on making the a little nicer.

And now that it’s easier for me to add content, maybe I’ll get around to adding old content such as my Medium articles.

Image attribution Tom Preston-Werner CC BY 4.0

First Dáil, January 21, 1919

Today marks exactly one hundred years of Irish democracy. Formed from democratically elected members, the first Dáil (parliament) met on January 21, 1919, in Dublin. It was a promising start, with a woman cabinet member and a Socialist-leaning “Democratic Programme”. But that act of defiance against the British Empire sparked off a war of independence, then fifty years as a conservative confessional state, then thirty years of low-grade guerrilla war to the north.

But the people remained solidly committed to democracy despite the poverty and political strife, and finally, in the last twenty years, Ireland has emerged as a wealthy liberal European nation.

Throughout one hundred years, one thing has been constant in Ireland: democracy.

Ireland took the democratic traditions of its ex-colonial power and made something even better. From the beginning, it had instant-runoff, multi-member electoral districts which resulted in proportional representation in the Dáil and a necessity to compromise and form coalitions. Regular referendums are the norm, and minority populist sentiments from the left and right are represented in the Dáil, giving a safety valve for political frustration, a safety valve that doesn't exist in the antiquated first-past-the-post electoral systems of Britain and the United States.

As Britain and the United States struggle with political breakdown, they might do better than look to Ireland as a model of democracy.

Consider a typical (sadly) tech workplace where there are four men for every woman.$^1$ Assume that women and men both exhibit bias to members of other genders at the same rate. Then women will experience gender bias at a rate of sixteen times more than men.

Yes, a simple mathematical model shows minority experience of bias relative to the majority experience goes up with the square of how underrepresented they are.

To take another example from the tech world, underrepresented minorities (Black, Latinx, Native American) are outnumbered typically at a ratio of twenty to one,$^1$ Again assuming racial bias happens both ways at the same rate, the model shows that the underrepresented minorities will experience racially biased behavior four hundred times more often than members of other groups.

This model could be part of the explanation for why so many members of the majority do not see bias in the workplace$^2$. A white man might not realize that some particular type of bias that he only experiences once a year might be experienced much more frequently by minorities: perhaps more than once a month by his women colleagues and more than once a day by his colleagues from underrepresented minorities.

The model applies to all kinds of biased acts ranging from small acts of exclusion and unconscious bias to full-on racial prejudice and sexual harassment. At every level of severity, it predicts marked increases in the expected frequency of the experienced bias with lower minority representation.

Of course, this model grossly simplifies the real world. Gender and race are not binaries. There are intersectionalities that make things more complex. Biased actions are not uniformly distributed and directed. One implication is that in practice, the ratio of experienced bias might grow a bit slower than the square, but I still think it grows faster than linear.

This squaring relationship is known as the Petrie Multiplier after its discoverer Karen Petrie. It is explained in detail in an article by Ian Gent$^3$.

(Note, I hesitated to publish this article as it reduces painful lived experience to cold impersonal mathematics, and I believe our first reactions to issues of representation and bias in tech should be outrage and a commitment to fix the system. But even as these issues divide us, there is one thing that unites us: we are all engineers, and at least in mathematics we can find a common understanding.)

Appendix

(You can stop reading now if you don't care about the mathematics.)

Assume a population of two disjoint groups of people (majorities and minorities) where there are $k$ majorities for every $1$ minority. Let the total population be $n$, so there are $\frac{n}{k+1}$ minorities and $\frac{n k}{k+1}$ majorities.

Assume that people in each group act in a biased way to individual members of the other group at the same rate $r$ per time period.

Thus in total, majorities perpetrate $\frac{r n k}{k+1}$ acts of bias directed at $\frac{n}{k+l}$ minorities, so each minority is a victim of $r k$ acts of bias.

Conversely, in total, minorities perpetrate $\frac{r n}{k+1}$ acts of bias directed at $\frac{n k}{k+l}$ majority members, so each majority is a victim of $\frac{r}{k}$ acts of bias.

Comparing the rate that minorities experience bias ($r k$) and the rate that majorities experience bias ($\frac{r}{k}$) we see that minorities experience bias at a rate of $k^2$ higher than majorities.

References

$^1$Google diversity annual report Google diversity annual report

$^2$Why Male Tech Workers Don't See the Gender Gap

$^3$The Petrie Multiplier: Why an Attack on Sexism in Tech is NOT an Attack on Men