VanTanev

A github workflow to track the progress of converting JavaScript to TypeScript.

Last year, we migrated a large project form JS to TS. We did this with ts-migrate, and we renamed all instances of any to $TSFixMe, to differentiate them from real uses of any.

Tracking the convertion over time

In order to see our progress on removing $TSFixMe, we build the a github workflow that adds comments to PRs with our progress, eg:

devongovett

// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary!
// Example using the Next.js App Router.
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

function useLinkHandler() {
  let router = useRouter();

  useEffect(() => {
    let onClick = e => {

artistro08

How to setup a LEMP Development Environment with WSL2 & Valet Linux

FYI

This tutorial is based on a clean Ubuntu-22.04 install. Use at your own risk.

Prerequisites

• WSL2 Installed. Follow this tutorial: https://learn.microsoft.com/en-us/windows/wsl/install#install-wsl-command
• systemd enabled. Follow this blog post: https://devblogs.microsoft.com/commandline/systemd-support-is-now-available-in-wsl/#set-the-systemd-flag-set-in-your-wsl-distro-settings

Setup

kadiks

#!/usr/bin/env node
const { mkdirSync, writeFileSync } = require('node:fs');

const params = process.argv.slice(2);

if (params.length === 0) {
  console.log('No arguments provided');
  process.exit(1);
}

AlemTuzlak

import type { ZodType, z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { getValidatedFormData as getValidatedFormDataPrimitive, useRemixForm as useForm, UseRemixFormOptions } from "remix-hook-form"; 

interface UseRemixFormZodOptions<T extends ZodType, U extends FromZodType<T>> extends UseRemixFormOptions<U> {
  schema: T;
}

export type FromZodType<T extends ZodType> = z.infer<T>;

MRezaSafari

module.exports = {
  meta: {
    type: "suggestion",
    docs: {
      description: "Enforce allowed child types for custom components",
      category: "Best Practices",
      recommended: true,
    },
  },
  create(context) {

dilaouid

const bbCodeMatch = /\[(b|i|u|s)\](.*?)\[\/\1\]/gs;
const XSSMatch = /[<]*<[\s\u200B]*script[\s\u200B]*>.*[/]*[<]*<[\s\u200B]*\/[\s\u200B]*script[\s\u200B]*>/ig;

pingrishabh

import { useCallback } from "react";
import { useQueryClient } from "@tanstack/react-query";

export default function useOptimisticUpdate() {
  const queryClient = useQueryClient();

  return useCallback(
    async (queryKey, updater) => {
      await queryClient.cancelQueries({ queryKey });

srsholmes

function grecent() {
    local branches branch
    branches=$(git branch --sort=-committerdate --format='%(HEAD) %(color:yellow)%(refname:short)%(color:reset) - %(contents:subject) %(color:green)(%(committerdate:relative)) [%(authorname)]') \
    && branch=$(echo "$branches" | fzf --ansi) \
    && branch=$(echo "$branch" | awk '{print $1}' | tr -d '*') \
    && git checkout "$branch"
}

AlemTuzlak

import { QueryClient } from "@tanstack/react-query";
import { CacheAdapter, createCacheAdapter } from "remix-client-cache";

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5,
    },
  },
});