| /* スクロールアニメーションを設定 */ | |
| // スクロール率を取得 | |
| let scrollPercent = 0; | |
| const scrollHeight = document.documentElement.scrollHeight; // ページの総スクロール量を取得 | |
| const clientHeight = document.documentElement.clientHeight; // デバイス表示領域の高さを取得 | |
| document.body.onscroll = function () { | |
| const scrollTop = document.documentElement.scrollTop; //ブラウザ際上部からのスクロール量を取得 | |
| scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100; // 何%スクロールしているかを算出 | |
| }; | |
| // アニメーションさせる要素を取得 |
| declare global { | |
| // eslint-disable-next-line @typescript-eslint/no-namespace | |
| namespace jsx.JSX { | |
| interface IntrinsicElements { | |
| [tagName: string]: Record<string, string>; | |
| } | |
| } | |
| } | |
| function escape(str: string): string { |
| import { jsx, render } from './jsx' | |
| const Layout = (props: { children?: string; title: string }) => { | |
| return ( | |
| <html> | |
| <head> | |
| <title>{props.title}</title> | |
| </head> | |
| <body>{props.children}</body> | |
| </html> |
| export const shallowMerge = <T extends object = Record<string, any>>( | |
| ...objects: T[] | |
| ): T => { | |
| return objects.reduce((prev, cur) => ({ ...prev, ...cur }), {} as T); | |
| }; | |
| export const deepMerge = <T extends object = Record<string, any>>( | |
| target: T, | |
| ...sources: object[] | |
| ): T => { |
| import { createReadStream, createWriteStream } from 'fs' | |
| const source = createReadStream('./assets/moby-dick.txt') | |
| const dest = createWriteStream('./assets/moby-dick-decompressed.txt') | |
| source | |
| .pipe(dest) |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Create an autocomplete search using vanilla JavaScript</title> | |
| </head> | |
| <body> | |
| <div> | |
| <input type="text" id="autocomplete" placeholder="Select a color..."></input> |
| import { useState } from "react"; | |
| const useForm = ( initialState = {} ) => { | |
| const [ values, setValues ] = useState(initialState); | |
| // Agregar Valores al Formulario: | |
| const handleInputChanges = ( { target } ) => { | |
| setValues({ |
| import { AxiosResponse } from 'axios'; | |
| import { useEffect } from 'react'; | |
| export const useAsync = ( | |
| asyncFn: () => Promise<AxiosResponse<any, any>>, | |
| successFunction: Function, | |
| returnFunction: Function, | |
| dependencies: any[] = [] | |
| ) => { | |
| useEffect(() => { |
| import { useEffect } from 'react' | |
| import { AxiosResponse } from 'axios' | |
| export const useAsync = ( | |
| asyncFn: () => Promise<AxiosResponse<any, any>>, | |
| successFunction: Function, | |
| returnFunction: Function, | |
| dependencies: any[] = [] | |
| ) => { | |
| useEffect(() => { |
