stevekinney

export const processImages = () => {
	return {
		name: 'markdown-image-optimization',
		/**
		 * @param {object} options
		 * @param {string} options.content
		 * @param {string} options.filename
		 */
		markup: ({ content, filename }) => {
			if (!filename.endsWith('.md')) return;

stevekinney

Here is a cool thing we can do in Svelte 5 with Runes. Let's say we make a little utility type like this:

type Holocene<T> = T extends { extends: keyof SvelteHTMLElements }
	? Omit<Partial<SvelteHTMLElements[T['extends']]>, keyof T> & Omit<T, 'extends'>
	: T;

Now, we can pass an extends key to the type we give to the props of a component and it will automatically inherit whatever HTML element we choose.

stevekinney

import {
	condition,
	defineQuery,
	defineSignal,
	proxyActivities,
	setHandler,
	sleep
} from '@temporalio/workflow';

import OrderStatus, { formatStatus } from '../utilities/status';

stevekinney

import { readFile } from 'fs/promises';

import { parse, preprocess, walk } from 'svelte/compiler';

import autoprefixer from 'autoprefixer';
import type { AcceptedPlugin } from 'postcss';
import sveltePreprocess from 'svelte-preprocess';
import tailwind from 'tailwindcss';
import nesting from 'tailwindcss/nesting';

stevekinney

Electron, v3

You should install Electron Fiddle.

Repositories

Please clone and install the dependencies for the following respositories:

• Firesale
• Clipmaster

stevekinney

const colors = {
  primary: {
    '50': '#f0f0fd',
    '100': '#e4e4fb',
    '200': '#d0cff6',
    '300': '#b5b1f0',
    '400': '#9e92e7',
    '500': '#8d77dd',
    '600': '#7f5ecf',
    '700': '#6d4db5',

stevekinney

SSR solves a lot of problems for our users, but can be tricky for our tests. Cypress waits until the window fires its load event, but when we're using SSR, our JavaScript might show up after our page officially loads.

For example, this test will fail:

describe.only('Ratings Filter with SSR', () => {
  beforeEach(() => {
    cy.visit('/secret-menu');
    cy.get('#minimum-rating-visibility').as('rating-filter');
 });

stevekinney

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "fluid": false

stevekinney

const logEnhancer = (createStore) => (reducer, initialState, enhancer) => {
  // Do stuff like wrap the reducer in a higher-order function.
  const reducerWithConsoleLogs = (previousState, action) => {
    const nextState = reducer(previousState, action);
    console.log({ action, previousState, nextState });
    return nextState;
  };

  return createStore(reducerWithConsoleLogs, initialState, enhancer);
};

stevekinney

Resources: React && TypeScript

Slack channel: #tmp-react-typescript

• A Dan Ambramov tweet about synthetic imports
• Documentation on allowSyntheticImports
• Commonly-Used Types for Props in React Components
• Microsoft's Documentation on Types Versus Interfaces
• A Fun Chart on the Differences Between Types and Interfaces
• [Optional Chaining Example](http