Johnathan Kent johnathankent

## keybase.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                johnathankent
                / keybase.md
            
            
              Created
              October 22, 2017 02:15
            
          
    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:

  
## 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 {

## 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

## 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>

## 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
	<!-- 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 {
	<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
	<!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>
	// 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