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:

mcmoe

This note is written by Sheldon. You can find me with #iOSBySheldon in Github, Youtube, Facebook, etc.

Need

Convert .mov/.MP4 to .gif

Reason

As a developer, I feel better to upload a short video when I create the pull request to show other viewers what I did in this PR. I tried .mov format directly got after finishing recording screen using Quicktime, however, gif offers preview in most web pages, and has smaller file size.

This is not limited to developer, anyone has this need can use this method to convert the files.

ryanto

module.exports.addDefaultImport = function addImport(tree, mod, name) {
  tree.children.unshift({
    type: 'import',
    value: `import _${name} from '${mod}'`,
  });
  return `_${name}`;
};