steven-tey

import { BlurImage, YouTube } from "@dub/ui";
import { nFormatter } from "@dub/utils";
import { Eye, UserCheck, Video } from "lucide-react";
import { Suspense } from "react";

export function YoutubeChannel({ id }: { id: string }) {
  return (
    <Suspense fallback={<div className="not-prose grid gap-4"></div>}>
      <YoutubeChannelRSC id={id} />
    </Suspense>

samselikoff

diff --git a/app/components/entry-form.tsx b/app/components/entry-form.tsx
index 50e5aeb..84c64fc 100644
--- a/app/components/entry-form.tsx
+++ b/app/components/entry-form.tsx
@@ -1,6 +1,6 @@
-import { useFetcher } from "@remix-run/react";
+import { Form, useSubmit } from "@remix-run/react";
 import { format } from "date-fns";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";

alexanderson1993

"use client";
import * as React from "react";
import { Input } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,

ryanflorence

import type { V2_HtmlMetaDescriptor, V2_MetaFunction } from "@remix-run/node";

export const mergeMeta = (
  overrideFn: V2_MetaFunction,
  appendFn?: V2_MetaFunction,
): V2_MetaFunction => {
  return arg => {
    // get meta from parent routes
    let mergedMeta = arg.matches.reduce((acc, match) => {
      return acc.concat(match.meta || []);

mhaidarhanif

💡 HOWTO: Debug your server-side Remix code using VSCode

✨ New in Remix v1.3.5

The latest release of Remix fixes sourcemaps so you no longer need to use any hacks to set breakpoints in your route modules. Simply start the debugger and Remix will hit the breakpoint in your loaders and actions.

Debugging session even survives edits and Live Reload.

knowler

Fontsource with Remix

Fontsource is designed to work with projects that bundle their CSS. You import their stylesheet and the bundler will place the fonts in your build directory and the CSS file will have the correct URL for the @font-face src.

Remix doesn’t bundle CSS and so while you can import their CSS file and add it to your links, the URL to font will be incorrect. It is still possible to use Fontsource with Remix. We just need to create our own @font-face declaration with the correct URL to the font (ideally, one that benefits from Remix’s asset fingerprinting). There’s a bit of manual set up, but once that’s done, you can serve the font on your site and benefit from updates for the font.

1. Install your font:

   npm install --save @fontsource/montserrat

ryanflorence

• 💿 Open up the app and show all the features
• 💿 Build a little todo list from scratch
  • normal forms
    • ship it, it works and the UX is fine
  • iterate to useFetcher to show why you'd bring it in
    • useFetcher is the thing that turns your remix app from a "website" to a "web app", if you're into that terminology.
    • still just forms!
      • progressive enhancement is about two things
        • how the app goes from basic functionality to fancy
• how the developer is able to iterate their code from basic to fancy

diegohaz

What is Ariakit?

Ariakit is the successor of Reakit, an open source library that provides lower-level React components and hooks for building accessible web apps, design systems, and other component libraries.

Why the name change?

Reakit stands for React Toolkit. Ariakit stands for Aria Toolkit, which is better aligned with our goals.

Over the past years, we've been focusing more and more on the ARIA aspects of the library. In the future, we'd like to provide more framework-agnostic utilities.

kentcdodds

Headers and Caching

Caching is a big subject and it can get pretty complicated. Luckily, the browsers have done all the really hard work for us and we just need to #useThePlatform.

There are three types of caches you'll likely deal with in Remix applications:

1. Application-level caches that you implement in your own code.
2. Browser caches you can control through the Cache-Control header.
3. CDN caches you also can control through the Cache-Control headers.

kentcdodds

import * as bcrypt from "bcrypt";
import { createCookieSessionStorage, redirect } from "remix";

import { db } from "./db.server";

export type LoginForm = {
  username: string;
  password: string;
};