charisTheo

module.exports = function() {
  return {
    presets: ['@babel/preset-react'],
    env: {
      production: {
        plugins: [["inline-dotenv",{
          path: '.env.production'
        }]]
      },
      development: {

charisTheo

console.table((function listAllEventListeners() {
  const allElements = Array.prototype.slice.call(document.querySelectorAll('*'));
  allElements.push(document); // we also want document events
  const types = [];
  for (let ev in window) {
    if (/^on/.test(ev)) types[types.length] = ev;
  }
  let elements = [];
  for (let i = 0; i < allElements.length; i++) {
    const currentElement = allElements[i];

charisTheo

let cacheNames = await caches.keys()
let cachesStorage = {}
let promises = cacheNames.map(async cacheName => {
    const cache = await caches.open(cacheName)
    const cachedResources = await cache.keys()
    let storage = 0
    for (const request of cachedResources) {
        const response = await cache.match(request)
        const blob = await response.blob()
        storage += blob.size

charisTheo

document.documentElement.innerHTML = '';
for (const obj of [document, window]) {
    for (const event of Object.values(getEventListeners(obj))) {
        for (const {type, listener, useCapture} of event) {
            obj.removeEventListener(type, listener, useCapture)
        }
    }    
}

charisTheo

const entries = ["largest-contentful-paint",  "navigation", "paint"];
entries.map(entry => {
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log(entry.toJSON());
    }
  });
  po.observe({type: entry});
})

charisTheo

new PerformanceObserver((list) => list.getEntries().map(console.log)).observe({type: 'layout-shift', buffered: true})

charisTheo

export function getPaddingFromAspectRatio (aspectRatio) {
  return aspectRatio > 1
    ? `min(calc(${aspectRatio * 100}%, 600px)`
    : `${Math.min(aspectRatio * 100, 100)}%`
}

charisTheo

export function getImageSizeFromRef (ref) {
  const dimensionsString = /(\d+)x(\d+)/g.exec(ref)
  const width = dimensionsString[1]
  const height = dimensionsString[2]
  const dimensions = dimensionsString[0]
  const aspectRatio = height / width

  return {
    dimensions,
    width,

charisTheo

/* <figure> styles */
.root {
  margin: 2rem 0;
  padding: 0;
  position: relative;
  width: 100%;

  /* <img> styles */
  @nest & img {
    object-fit: contain;

charisTheo

import { 
  buildImageObj,
  getImageSizeFromRef,
  getPaddingFromAspectRatio,
  imageUrlFor
} from '../../lib/utils'
import styles from './figure.module.css'

function Figure (props) {
  const imageDimensions = getImageSizeFromRef(props.asset._ref)