davidhund

(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.

davidhund

/**
 * = PRINT styles
 *
 * - Imported in global.css (http://www.phpied.com/delay-loading-your-print-css/)
 * - Taken straight from: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L197
 *
 * @TODO:
 * - Add to this?
 *
 * ========================================================================= */

davidhund

NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.

I'd like to hear how you approach this: @valuedstandards or comment on this gist.

The issue

You have to include a boatload of link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':

![Touch Icon Links](https://o.twimg.com/2/proxy.jpg?t=HBj6AWh0dHBzOi8vcGhvdG9zLTYuZHJvcGJveC5jb20vdC8yL0FBRGFGY1VRN1dfSExnT3cwR1VhUmtaUWRFcWhxSDVGRjNMdXFfbHRJWG1GNFEvMTIvMjI3OTE2L3BuZy8xMDI0eDc2OC8yL18vMC80L1NjcmVlbnNob3QlMjAyMDE1LTA0LTE0JTIwMTYuNTYuMjYucG5nL0NNejBEU0FCSUFJZ0F5Z0JLQUkvNGR1eDZnMzZmYnlzYWI3

davidhund

/**
 * = 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

# Create a Gist (of 2 files) through the GitHub API
# ..uses cUrl but could of course also be done through PHP etc.
curl -H "Content-Type: application/json" -d '{"description": "Your XPATHr Gist test","public": true,"files": {"test.xml": {"content": "Paste your XML code.."},"test.xsl": {"content": "Paste your XSL code here.."}}}' 'https://api.github.com/gists'

davidhund

/*
 * Trying to feature-detect (very naive)
 * CSS Flexbox support. 
 * - Only most modern syntax
 * 
 * Is this nonsense?
 */

(function NaiveFlexBoxSupport(d){
  var f = "flex", e = d.createElement('b');

davidhund

/**
    * Make AJAX call for JSON resource
    * Supports IE11 and browsers that do not allow responseType='json'.
    * https://mathiasbynens.be/notes/xhr-responsetype-json
    * ----------------------------------------------------- */
var getJSON = function(url, successHandler, errorHandler) {
    var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

    var supportsJSON = (function() {
        if (typeof XMLHttpRequest == 'undefined') { return false; }

davidhund

# imapsync - https://imapsync.lamiral.info/
# Sync IMAP mailboxes between hosts
# Run through Docker
# Some Documentation: https://imapsync.lamiral.info/doc/TUTORIAL_Unix.html
# --dry —> DRY-RUN, NO ACTUAL CHANGES (YET)
# --search —> "SENTSINCE 1-Jan-2021", Get new-ish mail only
docker run gilleslamiral/imapsync imapsync \
--dry \
--host1 mail.HOST1.com \
--user1 USER_HOST1 \

davidhund

/**
 * = 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

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!');