Skip to content

Instantly share code, notes, and snippets.

Avatar

Marcus Herrmann marcus-herrmann

View GitHub Profile
View nonspa-main-focus.js
if (document.referrer) {
const referrerHostname = (new URL(document.referrer)).hostname;
let main;
if (location.hostname === referrerHostname) {
main = document.querySelector('main');
if (!!main) {
main.focus();
}
View shitty-first-draft-ap.md

As always, web accessibility specialist Adrian Roselli summed up the situation around the Authoring Practices on one tweet in a brief but tougue in cheek way Source:

There are issues because the patterns are often incomplete, untested, or make use of ARIA in a way that is trying to turn the web into Windows 95. APG patterns are experiments. That is it. Few are production ready, all require testing.

So if Authoring Patterns are about the pure use of ARIA, and some of them can be disputed, incomplete or only partially supported in assistive technology – what can you do about it?

There isn't a silver bullet. But here's my strategy, and in its core is research:

  • Is the pattern of your choice disputed or not? Fortunately, the discussion regarding that is held online at https://github.com/w3c/aria-practices/. Look into the issue sections of this repository and search for the pattern name specifically.
View AsyncComponent.vue
<template>
<h2>Latest News</h2>
<p>{{ news }}</p>
</template>
<script>
export default {
async setup(props, context) {
const promise = new Promise((resolve) => {
setTimeout(function () {
@marcus-herrmann
marcus-herrmann / example.vue
Created Feb 24, 2019
Vue: Re-run transition on data change
View example.vue
<transition name="bounce">
<div class="shopping-cart__item-count" :key="numberOfCartItems" v-show="numberOfCartItems">
{{ numberOfCartItems }}
</div>
</transition>
View GitHub User Menu with Details, Summary elements
<li class="dropdown">
<details class="details-overlay details-reset d-flex pl-2 flex-items-center">
<summary class="HeaderNavlink name mt-1" aria-label="View profile and more" data-ga-click="Header, show menu, icon:avatar" aria-haspopup="menu">
<img alt="@marcus-herrmann" class="avatar float-left mr-1" src="https://avatars3.githubusercontent.com/u/505181?s=40&amp;v=4" width="20" height="20">
<span class="dropdown-caret"></span>
</summary>
<details-menu class="dropdown-menu dropdown-menu-sw" role="menu">
<div class="header-nav-current-user css-truncate"><a role="menuitem" class="no-underline user-profile-link px-3 pt-2 pb-2 mb-n2 mt-n1 d-block" href="/marcus-herrmann" data-ga-click="Header, go to profile, text:Signed in as">Signed in as <strong class="css-truncate-target">marcus-herrmann</strong></a></div>
<div role="none" class="dropdown-divider"></div>
View getAndSanitizeInputValues.php
<?php
$user_id = $input->post->int('user_id');
$is_checked = $input->post->bool('is_checked');
$catalogue_id = $input->post->int('catalogue_id');
$permission_type = $input->post->text('permission');
View index.html
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', { scope: '/test/' }).then(
function (reg) {
@marcus-herrmann
marcus-herrmann / gist:0f813a23db715b911b50
Last active Aug 29, 2015
Named mediaquery indicator
View gist:0f813a23db715b911b50
// More about that approach: http://bigger-on-the-inside.net/articles/named-mediaquery-indicator
/* For example in your project wide settings partial */
@mixin mqindicator($mqname) {
@if $debug == true {
body:before {
position: fixed;
top: 0;
right: 0;
View keybase.md

Keybase proof

I hereby claim:

  • I am marcus-herrmann on github.
  • I am marcusherrmann (https://keybase.io/marcusherrmann) on keybase.
  • I have a public key whose fingerprint is 36EB 66CD 33DA EFB7 8B92 5178 53EB 8A70 C82F 45B2

To claim this, I am signing this object:

@marcus-herrmann
marcus-herrmann / gist:1992466
Created Mar 7, 2012
HTML Starting Template
View gist:1992466
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<link href="css/screen.css" rel="stylesheet" media="screen" type="text/css" />
<link href="css/print.css" rel="stylesheet" media="print" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>