jpzwarte

My stencil + storybook setup

1. Setup your stencil project as usual
2. Add storybook: npx -p @storybook/cli sb init --type react (we use react so you can use JSX inside your stories)
3. Add required deps: npm add @babel/plugin-syntax-import-meta @open-wc/webpack-import-meta-loader webpack-merge -D
4. preview.js:

import { defineCustomElements } from "../dist/esm/loader";

paulirish

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

kkemple

'use strict';

import forEach from 'lodash.foreach';

const statusRegex = /^([AMRDC]|\?\?)\s+([\w\d\/\.\-_]+)/;

export default (output) => {
  if (typeof output !== 'string') return;

  let statuses = {

brandonmwest

httpClient.DefaultRequestHeaders.Authorization = 
    new AuthenticationHeaderValue(
        "Basic", 
        Convert.ToBase64String(
            System.Text.ASCIIEncoding.ASCII.GetBytes(
                string.Format("{0}:{1}", username, password))));

kellegous

(function() {

// NOTE: I have intentionally avoided the use of jQuery in
// the next two functions so as not to obscure any details.

// Updates the DOM in such a way that layout is constantly
// computed and thrown away.
var UpdateThrash = function(data) {
  // Get all the labels
  var spans = document.querySelectorAll('.item .lab');