Skip to content

Instantly share code, notes, and snippets.

View davidhund's full-sized avatar

David Hund davidhund

75 followers · 37 following
View GitHub Profile
@davidhund
davidhund / all-css-properties.json
Created April 6, 2017 13:25
W3.org All CSS Properties as JSON
[ { "property": "--*"
, "url": "http://dev.w3.org/csswg/css-variables/#propdef-"
, "status": "ED"
, "title": "CSS Custom Properties for Cascading Variables Module Level 1"
}
, { "property": "--*"
, "url": "http://www.w3.org/TR/2015/CR-css-variables-1-20151203/#propdef-"
, "status": "CR"
, "title": "CSS Custom Properties for Cascading Variables Module Level 1"
}
@davidhund
davidhund / install-babun-windows
Created January 4, 2017 11:04
Babun shell op Windows
Babun: http://babun.github.io/
ZSH shell (als in *NIX)
- Dus `ls` en `cd` (geen dir..)
1. download en unpack
2. babun.bat
3. rename babun.bat -> babun.exe en toevoegen aan menubalk
4. babun.exe -> babun.bat
@davidhund
davidhund / mymodule.js
Created December 9, 2016 09:43
Imported modules are always global?
/**
* ?????????????????????????????????????????????????????????????????????????
*
* - Using a MYMODULE (revealing module patter) as below
* - Processed with Rollup
*
* `import`ed `cfg()`, `msg()` and `debounce()` are *global*
*
* Q: as `import` may only appear in top-level:
* How can I have these functions scoped to MYMODULE?
@davidhund
davidhund / comments.css
Created October 18, 2016 10:00
Example of various CSS comment styles
/**
* = MAIN Comment Block
*
* A Main Comment Block for a file. Recognized by the
* 'heavy' bottom border. This comment lives at the top of a file and
* document's its function.
*
* ========================================================================= */
@davidhund
davidhund / social-share-buttons-perf.md
Created October 11, 2016 12:10
Social Share Buttons and Performance
@davidhund
davidhund / README.md
Created September 26, 2016 07:31
NPM Scripts setup (WIP)

NPM scripts

A quick example of using NPM scripts instead of, say, Gulp. Google "NPM scripts as a build tool" or something to read more.

  • Autoprefixes, CSS Vars, reduced-Calc, Imports, etc with postcss
  • Compress CSS with cssnano
  • Lint CSS with cssnano
  • Lint JS with XO (ESlint)
  • Minify SVG with svgo
@davidhund
davidhund / index.html
Last active September 15, 2016 20:35
Simple HTML template boilerplate
<!DOCTYPE html>
<html class="no-js" lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="{% DESCRIPTION %}">
<title>{% TITLE %}</title>
@davidhund
davidhund / visually-hidden.css
Last active September 27, 2017 19:54
Hide visually, show for AT
/**
* = Visually Hide text
*
* Text remains accessible to AT such as Screen Readers
* Updated version:
* Taken from http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
*
* ------------------------------------------------------------------------- */
.visually-hidden {
border: 0 !important;
@davidhund
davidhund / console.lol.js
Created January 22, 2016 19:16
console.lol
console.lol = function () {
console.log.apply(console, ['%c LOL!!', 'font:1.5em/1.5 italic comic sans,chalkboard,tscu_comic,fantasy;color:hotpink;'].concat(Array.prototype.slice.call(arguments)));
};
console.lol('Vet leuk jonguh!');
@davidhund
davidhund / accessible-svg-sprite-icons.md
Last active March 27, 2022 12:18
Figuring out the most robust, accessible markup for SVG Sprite Icons

(as a reply to: https://css-tricks.com/svg-use-with-external-reference-take-2/)

While I love SVG (sprites) there are a lot of issues to take into account.

Advocating The Most Accessible Markup

UPDATE: you should take a look at https://dl.dropboxusercontent.com/u/145744/accessible-svg-icon/test.html which seems a simpler and more robust approach

Another thing: since people copy-paste our code examples it would be great if we could advocate the most robust and accessible markup IMO. I am no a11y expert, but in my understanding we could/should take some extra steps to make out SVG sprite icons more accessible.