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

pangratz

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    loadFamily: function() {
      var personRef = this.store.getReference('person', 1);
      var person = personRef.value();
      
      var familyRef = person.belongsTo('family');
      if (!familyRef.value()) {

siakaramalegos

<div class="webmentions content-grid-sibling" id="webmentions">

  {% set mentions = webmentions | getWebmentionsForUrl(metadata.url + webmentionUrl) %}
  {% set reposts = mentions | webmentionsByType('repost-of') %}
  {% set repostsSize = reposts | size %}
  {% set likes = mentions | webmentionsByType('like-of') %}
  {% set likesSize = likes | size %}
  {% set replies = mentions | webmentionsByType('in-reply-to')  %}
  {% set repliesSize = replies | size  %}

Danziger

import React, { useEffect, useRef } from 'react';

/**
 * Use setInterval with Hooks in a declarative way.
 *
 * @see https://stackoverflow.com/a/59274004/3723993
 * @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 */
export function useInterval(
  callback: React.EffectCallback,