Skip to content

Instantly share code, notes, and snippets.

Avatar

Marcus Herrmann marcus-herrmann

View GitHub Profile
View smashing-template.md

Authors Guide: Article Template

Please submit your article including all of the information below. You can include this as a seperate file if you like - but please complete each section. Please use an online service to write your article, for example Dropbox Paper, Draft.in, Google Docs. For more help, see the editorial guide

Article Title

Ideally under 67 characters, what problem does this article solve?

Quick Summary

@yatil
yatil / wcag-ids.md
Created Jan 10, 2019
ID changes from WCAG 2.0 to 2.1
View wcag-ids.md
  • Perceivable
    • Text Alternatives

      • Non-text Content
        • WCAG 2.0 ID: text-equiv-all
        • WCAG 2.1 ID: non-text-content
    • Time-based Media

      • Audio-only and Video-only (Prerecorded)
        • WCAG 2.0 ID: media-equiv-av-only-alt
        • WCAG 2.1 ID: audio-only-and-video-only-prerecorded
@starckio
starckio / blueprints--contact.yml
Last active Feb 8, 2019 — forked from bastianallgeier/controllers--contact.php
Plain contactform example for Kirby 2
View blueprints--contact.yml
title: Contact
pages: false
fields:
title:
label: Page
type: text
width: 1/4
subtitle:
label: Title
type: text
View observe.js
// Elements with `data-observe` toggle `data-visible`
// between `true` and `false`
if ('IntersectionObserver' in window) {
const callback = (entries, observer) => {
entries.forEach(entry => {
entry.target.setAttribute('data-visible', entry.isIntersecting)
})
}
@PhilippSoehnlein
PhilippSoehnlein / demo.js
Created Aug 20, 2017
Lazy loading images with Intersection Observer
View demo.js
/**
* A simple demo on how the new Intersection Observer API can be used to lazy load images.
* https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
*
* Intersection Observer is available in most modern browsers and there's a decent polyfill, too:
* https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill
*/
let imageNodes = [];
@svinkle
svinkle / screencast-with-voiceover.md
Last active Jan 15, 2021
Screencast with VoiceOver
View screencast-with-voiceover.md

Screencast with VoiceOver

Here’s a quick how-to on recording your Mac desktop while using the VoiceOver screen reader. With this setup you’ll be able to capture both video and internal audio at the same time, and hear the audio output while recording.

Setup

For this setup we’ll be on OS X El Capitan and use QuickTime to capture the video and audio. The only extra thing required is the iShowU Audio Capture driver.

Steps

@trilodge
trilodge / Gruntfile.js
Last active May 17, 2017
Grunt Setup of Stylelint linting SCSS-Files based on postcss-scss and postcss-reporter
View Gruntfile.js
var path = require('path');
var fs = require('fs');
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
@arjenblokzijl
arjenblokzijl / split-processwire-array.php
Last active May 16, 2018
Split WireArray/PageArray into chunks
View split-processwire-array.php
<?php
// Thanks to netcarver > https://processwire.com/talk/topic/7803-implement-array-chunk/?p=75573
$items = $pages->find('#whatever'); // Find your stuff
$parts = 3; // How many items should there be in 1 chunk?
$chunked = array_chunk($items->getArray(), $parts);
foreach ($chunked as $chunk) {
foreach ($chunk as $item) {
View PHP: Browser language detect
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2); // Outputs "fr", "en", "es", etc...