psenger

const util = require('util')
const path = require( 'path' )
const winston = require( 'winston' );
const { createLogger, transports, format } = winston
const { Console, File } = transports
const { timestamp  } = format

// Adapted from https://github.com/winstonjs/winston/issues/1427
const commonConfig = {
    handleExceptions: true,

robisatthefunction

// This code would go in a script above the Optimizely snippet! You will need to replace the cookie names with the names of your compliance cookies, they are just placeholders for the general logic that can be used.
// https://support.optimizely.com/hc/en-us/articles/4410284332685-Project-Settings-jQuery-and-Project-JavaScript-settings-in-Optimizely

// Declare function necessary to get cookies by name
function getCookie(cookieName) {
  let cookie = {};
  document.cookie.split(';').forEach(function(el) {
    let [key,value] = el.split('=');
    cookie[key.trim()] = value;
  });

pmeenan

addEventListener('fetch', event => {
 event.respondWith(handleRequest(event.request))
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const host = request.headers.get('x-host');
  if(!host) {
    return new Response('x-host header missing', {status: 403});
  }

ef4

Webpack 5 Node Polyfills Upgrade Cheatsheet

Webpack 4 automatically polyfilled many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.

So Webpack 5 removed this functionality. That means you need to make changes if you were relying on those polyfills. This is a quick reference for how to replace the most common patterns.

List of polyfill packages that were used in webpack 4

For each automatically-polyfilled node package name on the left, this shows the name of the NPM package that was used to polyfill it on the right. Under webpack 5 you can manually install these packages and use them via resolve.fallback.

wilsonpage

export const CACHE_STALE_AT_HEADER = 'x-edge-cache-stale-at';
export const CACHE_STATUS_HEADER = 'x-edge-cache-status';
export const CACHE_CONTROL_HEADER = 'Cache-Control';
export const CLIENT_CACHE_CONTROL_HEADER = 'x-client-cache-control';
export const ORIGIN_CACHE_CONTROL_HEADER = 'x-edge-origin-cache-control';

enum CacheStatus {
  HIT = 'HIT',
  MISS = 'MISS',
  REVALIDATING = 'REVALIDATING',

andyrichardson

const isIntrospectionQuery = (arg: string) => {
  const query = parse(arg);
  const opDefs = query.definitions.filter(d => d.kind == "OperationDefinition") as OperationDefinitionNode[];

  // Must only have one definition
  if (opDefs.length > 1) {
    return false;
  }

  const selections = opDefs[0].selectionSet.selections;

andyrichardson

import { ApolloProvider } from '@apollo/react-hooks';
import { ApolloClient, RequestHandler, InMemoryCache, ApolloLink, Observable } from 'apollo-boost';
import { GraphQLError } from 'graphql';
import React from 'react';
import { Users } from './Users';

export default {
  title: 'Pages/Users',
};

BinaryShrub

import winston from 'winston';
import util from 'util';

const utilFormat = (enableColor: boolean) => {
    const printFormat = winston.format.printf(({ level, message, timestamp }) => `${timestamp} ${level}: ${message}`);
    const format = winston.format.combine(winston.format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss.SSS' }), {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        transform: (info: any) => {
            const args = info[Symbol.for('splat')] || [];
            info.message = util.formatWithOptions({ colors: enableColor }, info.message, ...args);

kamranayub

//
// See: https://kentcdodds.com/blog/profile-a-react-app-for-performance#build-and-measure-the-production-app
// See: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
const TerserPlugin = require('next/dist/compiled/terser-webpack-plugin');

module.exports = {
  webpack: (config, options) => {
    
    //
    // Use profiler-enabled React builds

JohnAlbin

README

1. When Gatsby starts up, it will read gatsby-config.js first.
2. As you can see below, we use that file to require('ts-node').register() which registers a TypeScript evaluator that will be used when Gatsby reads all other API Javascript files. In other words, we only need to do this once in our entire codebase and not in other Gatsby files like gatsby-node.js.
3. Our gatsby-config.js re-exports all the exported variables available in gatsby-config.ts.