adi518

What forces layout / reflow

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.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

adi518

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

// Listen for resize changes
window.addEventListener("resize", function() {
  // Get screen size (inner/outerWidth, inner/outerHeight)
  

adi518

{
  "name": "my-package",
  "version": "1.2.0",
  "scripts": {
    "patch-version": "node patch-version.js",
    "tag-version": "node tag-version.js \"release-tag\"",
    "prerelease": "npm run patch-version && npm run tag-version",
    "release": "npm publish",
  }
}

adi518

// Uppercase.vue
<template>
  <div>
    <slot v-bind="{style: style}" />
  </div>
</template>

<script>
export default {
  data() {

adi518

/**
 * Using Operator Mono in Atom
 * 
 * 1. Open up Atom Preferences.
 * 2. Click the “Open Config Folder” button.
 * 3. In the new window’s tree view on the left you should see a file called “styles.less”. Open that up.
 * 4. Copy and paste the CSS below into that file. As long as you have Operator Mono SSm installed you should be golden!
 * 5. Tweak away.
 *
 * Theme from the screenshot (http://cdn.typography.com/assets/images/blog/operator_ide2.png):

adi518

<!-- Simplest solution is to just label the element as a element within an element -->
<div class="block">
  Content
  <div class="block__element">
    Content
    <div class="block__element__element">
      Content related to `block__element`
    </div>
  </div>
</div>