First, an exercise. Can we represent all of css with plain data? Let's try.
let redText = { color: 'red' };
<html> | |
<head> | |
<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script> | |
<script> | |
// This is a very basic example of Lazyloading DFP ads with an SRA roadblock. | |
// The example uses ES2016 javascript syntax and relies on | |
// IntersectionObservers. Normally in production this would be transpiled | |
// with babel and polyfilled for support. It also relies on DFP maintaining a | |
// changeCorrelator for all ad requests. Historically this correlator has | |
// timed out after 30 seconds, which is why this example relies on a js timer |
#!/usr/bin/env bash | |
git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote#origin/}" "$remote"; done | |
git fetch --all | |
git pull --all |
(function (root, factory) { | |
if ( typeof define === 'function' && define.amd ) { | |
define([], factory(root)); | |
} else if ( typeof exports === 'object' ) { | |
module.exports = factory(root); | |
} else { | |
root.myPlugin = factory(root); | |
} | |
})(typeof global !== 'undefined' ? global : this.window || this.global, function (root) { |
function playVideoOnClick (selector) { | |
el = document.querySelector(selector); | |
if (el) { | |
addListener(); | |
} else { | |
window.addEventListener('load', addListener); | |
} | |
function addListener () { |
#!/usr/bin/env bash | |
# MIT © Sindre Sorhus - sindresorhus.com | |
# git hook to run a command after `git pull` or `git checkout` if a specified file was changed | |
# Run `chmod +x post-checkout` to make it executable then put it into `.git/hooks/`. | |
changed_files="$(git diff-tree -r --name-only --no-commit-id HEAD@{1} HEAD)" | |
check_run() { | |
echo "$changed_files" | grep --quiet "$1" && echo " * changes detected in $1" && echo " * running $2" && eval "$2" |
var DOMTokenListSupports = function(tokenList, token) { | |
if (!tokenList || !tokenList.supports) { | |
return; | |
} | |
try { | |
return tokenList.supports(token); | |
} catch (e) { | |
if (e instanceof TypeError) { | |
console.log("The DOMTokenList doesn't have a supported tokens list"); | |
} else { |
#!/bin/bash | |
set -e | |
function handle_event() { | |
local entry="$1" | |
local action=$(echo $entry | jq -r '.action') | |
local service=$(echo $entry | jq -r '.service') | |
local hook="./hooks/$service/$action" | |
if [ -x "$hook" ]; then | |
"$hook" "$entry" |
(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.
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.
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent