murphytrueman

API patterns for component architecture

Patterns stolen from API documentation and translated into React components. Each one solved a real problem I kept running into.

Fork and adapt as needed.

---

From Stripe's documentation

qnblackcat

Downloading older versions of iOS apps using ipatool

👉 ipatool is an open-source tool developed by Majd, a highly trustworthy and talented developer in the iOS community. Recently, ipatool got a significant update that allows users to easily download older versions of iOS apps on macOS/Windows/Linux!.

👉 Since ipatool doesn't have a graphical user interface (GUI), some of you might think it's tricky to use. But trust me, it's not! Here's a simple guide if you're still a bit scared of the terminal. (Tbh, everything in this *guide can be found on ipatool's repo)

👉 Note: You need to log into your Apple ID via ipatool for the tool to work. Unless you prioritize security above all, you can trust logging into your Apple account with ipatool. As explained earlier, it’s an open-source tool developed by a well-known and reliable developer, minimizing security risks to the lowest level.

devongovett

import {ChevronLeft, ChevronRight} from 'lucide-react';
import {useEffect, useState} from 'react';

export function Pagination({carousel}: {carousel: HTMLElement}) {
  // Scroll by 1 page in the given direction (-1 or +1).
  // This uses the width of the carousel minus the padding and gap between items.
  // Use behavior: 'smooth' and the browser will animate the scrolling.
  let scroll = (dir: number) => {
    let style = window.getComputedStyle(carousel);
    carousel.scrollBy({

ryanto

import { Markdown } from "@/app/components/markdown";
import { getComments, getPost } from "@/lib/db";
import { Suspense } from "react";

export default async function PostPage({
  params,
}: {
  params: { postId: string };
}) {
  let post = await getPost(params.postId);

jordienr

// Remember to install mini-svg-data-uri
// Follow me on twitter for memes @jordienr

import { type Config } from "tailwindcss";
const {
  default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
const svgToDataUri = require("mini-svg-data-uri");

export default {

gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

markerikson

RTK ESM/TS Discussion

Attendees:

• Nathan Bierema
• Mateusz Burzynski
• Mark Erikson

Notes

• Mateusz: what do you want besides "ship widely compat code?" What preferences?

jacob-ebey

Remix Deferred

Remix Deferred is currently implemented on top of React's Suspense model but is not limited to React. This will be a quick dive into how "promise over the wire" is accomplished.

SSR + Hydration

It isn't rocket science, but a quick recap of how frameworks such as react do SSR:

1. Load data
2. Render the app

christiangenco

const fs = require("fs");

if (!fs.existsSync("package.json")) {
  console.error(
    "Cannot find package.json. Please run this script in your project directory."
  );
  process.exit(1);
}

const package = fs.readFileSync("package.json", "utf8");

carc1n0gen

#!/usr/bin/env python3

import sys

def sarcasmify(text):
    new_text = ''
    flip = True
    for i in range(len(text)):
        char = text[i]
        if flip: