merelinguist

        background-color: rgb(103, 232, 249);
        background-image: radial-gradient(at 85% 75%, rgb(244, 63, 94) 0, transparent 81%), radial-gradient(at 38% 78%, rgb(79, 70, 229) 0, transparent 62%), radial-gradient(at 1% 47%, rgb(233, 213, 255) 0, transparent 97%), radial-gradient(at 25% 75%, rgb(248, 113, 113) 0, transparent 3%), radial-gradient(at 66% 43%, rgb(228, 228, 231) 0, transparent 13%), radial-gradient(at 46% 36%, rgb(162, 28, 175) 0, transparent 42%);
      

merelinguist

How Strove Works

If you’re familiar with spaced reptition, you’ll know that there are a lot of approaches out there, and a lot of research. Anki, SuperMemo, Quizlet, Duolingo etc, all have their own proprietary algorithms implementing some variation on learning curves. When prototyping Strove, one of the things I discovered is that many of these algorithms, require a lot of unique information to be stored. For instance, SM2 stores an easinessFactor, dueDate, and interval for each card a user wants to learn. This is fine if you’re confident in an algorithm, but I wanted a more general-purpose solution that would allow me to fine-tune lesson generation over time.

Instead, the Prisma model looks something like this:

model Card {
  id        String  
 createdAt DateTime 

merelinguist

import { useLoaderData as useRemixLoaderData } from "remix";

type Nullable<Type> = Type | undefined | null;

type Deserialized<Data> = {
  [Key in keyof Data]: Data[Key] extends Nullable<{ [key: string]: unknown }>
    ? Deserialized<Data[Key]>
    : Data[Key] extends Date
    ? string
    : Data[Key];

merelinguist

import { getParameters } from 'codesandbox/lib/api/define';
import { IFiles } from 'codesandbox-import-utils/lib/api/define';
import { meta } from 'feature/react-hook-form/meta';
import { readdir, readFile, writeFile } from 'fs/promises';
import { GetServerSideProps, InferGetStaticPropsType } from 'next';
import { join, resolve } from 'path';
import { PackageJson } from 'types';

export const getServerSideProps: GetServerSideProps = async () => {
  // Add the packages required of the feature

merelinguist

// npm i @tailwindcss/forms  @tailwindcss/typography && npm i -D @types/tailwindcss

const defaultTheme = require("tailwindcss/defaultTheme");
const forms = require('@tailwindcss/forms')
const typography = require('@tailwindcss/typography')

/** @type {import('tailwindcss/tailwind-config').TailwindConfig} */

module.exports = {
    content: ["./src/**/*.{ts,tsx,js,jsx}"],

merelinguist

import { ExclamationCircle } from "heroicons-react";
import { InputHTMLAttributes } from "react";

import { toKebabCase } from "utils/string/toKebabCase";

type InputProps = {
  hint?: string;
  hideLabel?: boolean;
  label: string;
  error?: string;

merelinguist

   <nav className="bg-white border-b border-gray-200">
      <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 ">
          <div className="flex items-center flex-shrink-0">
            <img
              className="w-8 h-8 "
              src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg"
              alt="Workflow logo"
            />
          </div>

merelinguist

import { flattenObject } from 'flatten-anything';
import { nestifyObject } from 'nestify-anything';

import { JSONValue, JSONObject } from './types';
import { isSerializable, isPlainObject, serializeExtraTypes } from './utils';

export const serialize = (input: any) => {
  let json: JSONValue = {};
  let meta: JSONObject | string = {};

merelinguist

import { Head } from 'blitz';
import * as React from 'react';

const Viewer = () => {
  React.useEffect(() => {
    for (const styleSheet of document.styleSheets) {
      if (styleSheet.href && !styleSheet.href.includes('tailwind')) {
        styleSheet.disabled = true;
      }
    }

merelinguist

import {BlitzPage} from 'blitz'
import {useState} from 'react'

const ProjectSchemaPage: BlitzPage = () => {
  return (
    <div
      className="h-screen overflow-hidden"
      style={{
        background: 'radial-gradient(#d2d6dc 1px, transparent 1px) 0% 0% / 24px 24px #ffffff',
      }}></div>