I made a step-by-step form demo like Typeform using Swiper.js!

Higashi-Kota — Sat, 25 Nov 2023 06:59:15 +0000

Hi, there.

We have created a step-by-step form demo like Typeform using Swiper.js and would like to introduce it to you!

demo code

Cheers.

Higashi Kota

I published a "useClude" hook using the "zod" library in npm.

Higashi-Kota — Sun, 04 Dec 2022 00:38:15 +0000

Hi, there.

I have released a "useClude" hook using the "zod" library in npm, so here is an introduction.

The repository is here.

https://github.com/Higashi-Kota/use-clude

The npm library is available here.

https://www.npmjs.com/package/@nap5/use-clude

Samples are placed in the examples directory of the Github repository.

We also have a typescript nextjs sample.

The simple usage is as follows.

First, create a project directory.

$ cd ~/wrksp
$ mkdir -p a
$ cd a
$ yarn init -y
$ yarn add @nap5/use-clude zod
$ mkdir -p data
$ touch data/bebop.json
$ touch index.js

Prepare test data in the file data/bebop.json.

[
  {
    "id": "p9z7aek9fi",
    "name": "Landon Glover",
    "age": 38,
    "blogs": []
  },
  {
    "id": "pga7t8prpl",
    "name": "Jack Jackson",
    "age": 38,
    "blogs": [
      {
        "id": "1",
        "title": "AAA"
      },
      {
        "id": "2",
        "title": "BBB"
      },
      {
        "id": "3",
        "title": "CCC"
      }
    ]
  },
  {
    "id": "tcz4kesu6p",
    "name": "Grace Dennis",
    "age": 44,
    "blogs": [
      {
        "id": "4",
        "title": "DDD"
      }
    ]
  }
]

Module handling in package.json.

{
  "type": "module",
  "dependencies": {
    "@nap5/use-clude": "^1.0.0",
    "zod": "^3.19.1"
  }
}

Describe the execution in index.js.

import { z } from "zod";
import { useClude } from "@nap5/use-clude";
import { createRequire } from "module";
const require = createRequire(import.meta.url);
const data = require("./data/bebop.json");
const userShape = {
  id: z.string(),
  name: z.string(),
  age: z.number(),
  blogs: z
    .object({
      id: z.string(),
      title: z.string(),
    })
    .array(),
};
const { exclude, include } = useClude(userShape);
console.log(
  JSON.stringify(
    data.map((item) => include("blogs").parse(item)),
    null,
    2
  )
);
console.log(
  JSON.stringify(
    data.map((item) => exclude("name", "age").parse(item)),
    null,
    2
  )
);

The following is the execution result.

Properties specified in "include" are included, and properties specified in "exclude" are excluded.

$ time node index.js
[
  {
    "blogs": []
  },
  {
    "blogs": [
      {
        "id": "1",
        "title": "AAA"
      },
      {
        "id": "2",
        "title": "BBB"
      },
      {
        "id": "3",
        "title": "CCC"
      }
    ]
  },
  {
    "blogs": [
      {
        "id": "4",
        "title": "DDD"
      }
    ]
  }
]
[
  {
    "id": "p9z7aek9fi",
    "blogs": []
  },
  {
    "id": "pga7t8prpl",
    "blogs": [
      {
        "id": "1",
        "title": "AAA"
      },
      {
        "id": "2",
        "title": "BBB"
      },
      {
        "id": "3",
        "title": "CCC"
      }
    ]
  },
  {
    "id": "tcz4kesu6p",
    "blogs": [
      {
        "id": "4",
        "title": "DDD"
      }
    ]
  }
]

real    0m0.040s
user    0m0.042s
sys     0m0.014s

The following error was observed when publishing this library.
But although I could not resolve the error, the bundled file was outputted, so I just went with the flow and published it.

I looked for an option to relax in tscofing.json or something, but it was difficult to find.

 $ cd ~/wrksp/use-clude
 $ rm -rf dist && tsc  -p .
src/index.ts:5:17 - error TS2589: Type instantiation is excessively deep and possibly infinite.

5   type Record = z.infer<typeof record>;
                  ~~~~~~~~~~~~~~~~~~~~~~


Found 1 error.

If you know how to mitigate this error setting, please let me know.

error TS2589: Type instantiation is excessively deep and possibly infinite.

Cheers.

Higashi Kota

I made a scroll animation using Recoil and GSAP's ScrollTrigger - with tailwindcss

Higashi-Kota — Sat, 24 Sep 2022 18:27:13 +0000

Hi, there.

I have created a scroll animation using Recoil and GSAP's ScrollTrigger and would like to introduce it to you.

I also posted it on Twitter.

nap5

@napzak5

I mocked this scrollanimation using gsap,framer-motion,recoil,tailwindcss.

#react #javascript #gsap #framermotion #recoil #100DaysOfCode #tailwindcss

demo site
…-caption-line-javascript.onrender.com

demo code
codesandbox.io/s/nwibc9

17:44 PM - 24 Sep 2022

demo site

demo code

Cheers.

Higashi Kota

I created landing page like "Pinterest" using splidejs and swiperjs

Higashi-Kota — Sat, 20 Aug 2022 08:15:00 +0000

Hi, there.

I have created a Pinterest landing page using the tailwindcss library and would like to share it with you. I tried to workaround it with a skeleton-like image at a less built-up stage.

I have made some changes, but this time I tried to reproduce the automatic slider in the first view. The stagger part is a bit truncated.

pinterest landing page

demo site

demo code

PS I'm adding a demo site that worked as expected with iphone mobile confirmation.

demo site v2

Cheers.

Higashi Kota

DEV Community: Higashi-Kota

I made a step-by-step form demo like Typeform using Swiper.js!

I published a "useClude" hook using the "zod" library in npm.

I made a scroll animation using Recoil and GSAP's ScrollTrigger - with tailwindcss

I created landing page like "Pinterest" using splidejs and swiperjs