Skip to content

Instantly share code, notes, and snippets.

Johnathan Kent johnathankent

Block or report user

Report or block johnathankent

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View ga-ratio.js
// Create the test
var pixelRatio = (window.devicePixelRatio >= 1.5) ? "high" : "normal";
..
// Pass it along through GA
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
// --- IMPORTANT LINE!
// params: event method, custom variable slot, variable name, variable value, scope level
View index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
@johnathankent
johnathankent / index.html
Created Oct 3, 2017
Reactive Style Specificity using custom attributes
View index.html
<div id="starship-enterprise">
<h1>Reactive Style Specificity using custom attributes...</h1>
<h2>A possible problem causing, yet simple hack.</h2>
<p>Using non-props attributes or data-attributes to make parent CSS more specific in the case where parent adds colliding specificity to the child root.</p>
<p><em><strong>Disclaimer</strong>: I don't recommend it because adding attributes to strong arm css control outside of the normal reactive JavaScript or CSS handling is not a well-known pattern, and this means possible confusion for teams or unexpected behavior on CSS. It may also prevent reusability of or confusion on how to override, with the "who's in charge" problem when inception nesting components or reverse nesting components. <a href="https://github.com/vuejs/vue-loader/issues/521">See here.</a></em></p>
<p><strong>Demo</strong>: Open up the your browser developer inspector tools to see the child text being overriden by the parent component in the box below.</p>
<p class="css-control picar
@johnathankent
johnathankent / picard.vue
Last active Oct 3, 2017
Reactive Style Specificity using custom attributes (hack)
View picard.vue
<!-- picard.vue -->
<template>
<wesley :class="$style.shutupwesley" data-says-because-picard-said-make-it-so><!-- <<== Added custom data-attr here -->
</wesley>
</template>
<script>
import wesley from './wesley.vue'
export default {
View keybase.md

Keybase proof

I hereby claim:

  • I am johnathankent on github.
  • I am johnathankent (https://keybase.io/johnathankent) on keybase.
  • I have a public key ASBlOBMrTVh0t1JtSxgcDX-zjc1KcTLUqLJhZxQZT6CqEwo

To claim this, I am signing this object:

You can’t perform that action at this time.