mindmergedesign

import Image, { ImageProps } from 'next/image';
import { imageBuilder } from './sanity';
import type { SanityImageSource } from '@sanity/image-url/lib/types/types';

interface MyImageProps extends Omit<ImageProps, 'src'> {
  src: SanityImageSource;
  quality?: number;
  blur?: number;
}

mindmergedesign

Group Array of JavaScript Objects by Key or Property Value

Implementation

const groupBy = key => array =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = obj[key];
    objectsByKeyValue[value] = (objectsByKeyValue[value] || []).concat(obj);
    return objectsByKeyValue;

mindmergedesign

/**
 * Changes XML to JSON
 * Modified version from here: http://davidwalsh.name/convert-xml-json
 * @param {string} xml XML DOM tree
 */
function xmlToJson(xml) {
  // Create the return object
  var obj = {};

  if (xml.nodeType == 1) {

mindmergedesign

module.exports = function(eleventyConfig) { // This only happens once in your template!
  
// Blah blah, whatever other Eleventy stuff you need.

eleventyConfig.addLiquidShortcode("vimeo", (vimeoId, aspectRatio) => {
  return `<div class="aspect-ratio" style="--aspect-ratio: ${aspectRatio}"><iframe src="https://player.vimeo.com/video/${vimeoId}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="video video--vimeo"></iframe></div>`;
});
  
// Blah blah, whatever other Eleventy stuff you need.
  

mindmergedesign

import React from 'react'

const VideoEmbedPreview = ({ value }) => {
    
    const url = value.url
    const responsiveVideoContainer = {
        padding: "56.25% 0 0 0",
        position: "relative"
    }

mindmergedesign

NDJSON is a convenient format for storing or streaming structured data that may be processed one record at a time.

• Each line is a valid JSON value
• Line separator is ‘\n’

1. Convert JSON to NDJSON?

cat test.json | jq -c '.[]' > testNDJSON.json

mindmergedesign

/**
 * This script can be placed in the root of your studio folder,
 * and be run with `sanity exec deleteDocsWithoutSchema.js --with-user-credentials
 */
import client from 'part:@sanity/base/client'
const getSanitySchema = require('./node_modules/@sanity/core/lib/actions/graphql/getSanitySchema')

const Schema = getSanitySchema(process.cwd())
const types = Schema._original.types.map(({name}) => name)

mindmergedesign

Access macOS localhost from IE or Edge within Parallels Desktop

This issue is so infuriating that I'm going to take some time to write about it.

1. MOST IMPORTANT. Your local development server must be bound to IP address 0.0.0.0. Some do this by default, but many don't. You need to make sure that you run your local server with correct IP bindings. You may need to provide additional flags to your serve commands e.g. polymer serve --hostname domain.local, hugo serve --bind 0.0.0.0. If you use a named domain like domain.local, it has to be defined in /etc/hosts and pointing at 0.0.0.0.

2. My Parallels setting is using Shared Network, nothing special there.

3. Open macOS Terminal and type ifconfig. Look for the value under vnic0 > inet. It is typically 10.211.55.2.

mindmergedesign

Pushing to Multiple Git Repos

If a project has to have multiple git repos (e.g. Bitbucket and Github) then it's better that they remain in sync.

Usually this would involve pushing each branch to each repo in turn, but actually Git allows pushing to multiple repos in one go.

If in doubt about what git is doing when you run these commands, just

mindmergedesign

import React from 'react'
import styled from 'styled-components'

class ScrollingWrapper extends React.Component {
  state = { hasScrolled: false }

  componentDidMount() {
    this.scrollingWrapper.addEventListener('scroll', this.onScroll)
  }