rikschennink

Assumption: Next button is most clicked button in a pagination control.

The trap is to layout the HTML to match the design of the control. With the next button last and the previous button first.

By reformatting the HTML we can make things easier for everyone:

• Visual users still see the classic paging (CSS takes care of that);
• Tab focus for keyboard users is immidiately brought to next button, no need to tab over all pages;
• Screenreader users have the same benefit and also hear which page is currently active;

Any suggestions on what more we could improve?

rikschennink

const arrow = (str, i) => str[i] === '-' && str[i+1] === '>';

const string = (c) => c === "'" || c === '"';

const comma = (c) => c === ',';

const opener = (c) => c === '(';

const closer = (c) => c === ')';

rikschennink

• src
  • main.js
  • ui
    • foo.js
    • bar.js

This command generates modules where identifiers have been set to absolute module paths:

browserify ./src/**/*.js -o ./dist/bundle.js --full-paths

rikschennink

<div data-module="/ui/component.js" 
     data-context="@media (min-width:30em) and was @visible">

</div>

rikschennink

const easeInOutSine = t => -0.5 * (Math.cos(Math.PI * t) - 1);

export const addGradientSteps = ( 
        // the gradient to add the steps to
        gradient, 
        
        // the color of the gradient (in rgb) and target alpha value
        color = [0, 0, 0], alpha = 1, 
        
        // the ease function to use and the amount of steps to render (higher is more precision)

rikschennink

zwarte pieten, zwarte piet, democracy, @realDonaldTrump, referendum, Vote Leave, women in tech, lgbt+, lgbt, she-ra, #remain, NHS, russians, russian, politics, milo, kardashian, sarah sanders, capitalist, Socialist, socialism, capitalism, linkedin, politician, Russia, Musk's, Mansplainers, Mansplains, Mansplain, Mansplainer, government, musk, Cambridge Analytica, handmaids, soccer, football, mansplaining, west world, dolores, westworld, conservatives, Nigel Farage, men, harassment, health care, Tory, flat earth, feminist, feminism, religious, religion, republican, republicans, white house, comey, climate change, trans, pizzagate, ar-15, Putin, NRA, trans people, Cis people, vagina, blackmirror, Black Mirror, healthcare, tories, tax bill, white supremacy, male colleague, white men, PoC, white walker, #GameOfThrones, game of thrones, ukip, nazism, fascism, fascis, fascist, racial, Nazis, Trump's, bitcoin, Brexiters, diversity, brexit, confederate, antifa, nazi, sexism, supremist, racist, racism, sexist, Trump

rikschennink

const createCloudinary = (cloudName, unsignedUploadPreset) => ({
    process: (fieldName, file, metadata, load, error, progress, abort) => {

        // `fieldName` and `meta` are not used for now

        const url = `https://api.cloudinary.com/v1_1/${cloudName}/upload`;
        const xhr = new XMLHttpRequest();
        const formData = new FormData();

rikschennink

export default (element: HTMLElement, options: any = {}) => {
    // if added as action on non focusable element you should add tabindex=0 attribute

    const {
        direction = undefined,
        shiftMultiplier = 10,
        bubbles = false,
        stopKeydownPropagation = true,
    } = options;

rikschennink

{% macro codeline(x, y, totalStatements, spaceWidth) %}

    {% set offset = x %}
    {% for i in range(0, totalStatements) -%}
        {% set width = [2, 4, 8, 12, 24] | random %}
        {% set opacity = [0.5, 0.75, 1] | random %}
        <path d="M{{ offset }} {{ y }} h{{width}}" opacity="{{ opacity }}"/>
        {% set offset = offset + width + spaceWidth %}
    {% endfor %}

rikschennink

{
    const DEBUG = false;

    const style = document.createElement('style');
    style.textContent = `
    .sim-pointer {
        margin-top: -1px;
        position: absolute;
        z-index: 9999999999999;
        left: -24px;