Skip to content

Instantly share code, notes, and snippets.

View danestves's full-sized avatar
📚
Spreading knowledge throughout LATAM

Daniel Esteves danestves

📚
Spreading knowledge throughout LATAM
211 followers · 45 following
View GitHub Profile
@danestves
danestves / otp.tsx
Created July 31, 2023 23:37
otp.tsx
import type { OtpInputProps } from "./otp-input.types"
import * as React from "react"
function OtpInput({ size = 4, validationPattern = /[0-9]{1}/, value, onChange, ...props }: OtpInputProps) {
const inputRefs = React.useRef<(HTMLInputElement | null)[]>(new Array(size).fill(null))
const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
const val = e.target.value
// Check if the value is valid
@danestves
danestves / .eslintignore
Created March 15, 2021 15:40
1. Iniciando nuestro proyecto con NextJS
**/node_modules/*
**/out/*
**/.next/*
@danestves
danestves / keybase.md
Last active October 20, 2021 18:34

Keybase proof

I hereby claim:

  • I am danestves on github.
  • I am danestves_us (https://keybase.io/danestves_us) on keybase.
  • I have a public key ASBOjTJ4lDfgO6doxg7af2P14f4xoB9wpZv0VUw2oBvu2wo

To claim this, I am signing this object:

@danestves
danestves / cloudSettings
Last active September 11, 2020 14:52
VSCode config
{"lastUpload":"2020-09-11T14:52:40.465Z","extensionVersion":"v3.4.3"}
@danestves
danestves / aspect.css
Created February 13, 2020 22:53
Aspect Radios to use with tailwindcss
.embed-responsive {
@apply relative;
}
.embed-responsive::before {
@apply block;
content: "";
}
.embed-responsive .embed-responsive-item,
@danestves
danestves / instalacion-nextjs.md
Created February 10, 2020 21:47
2-. Instalación NextJS | Curso de NextJS | @danestves

Install NextJS CLI

npm i -g create-next-app

# or

yarn global add create-next-app

# or use it instant
@danestves
danestves / _app.js
Created January 5, 2020 01:15
Simple _app.js snippet for NextJS App
// Styles
import "../styles/styles.scss"
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
@danestves
danestves / postcss.config.js
Created January 5, 2020 01:11
PostCSS config for TailwindCSS
module.exports = {
plugins: [
require("postcss-easy-import"),
require("tailwindcss"),
process.env.NODE_ENV === "production" &&
require("@fullhuman/postcss-purgecss")({
content: [
"./src/pages/**/*.{js,jsx,ts,tsx}",
"./src/components/**/*.{js,jsx,ts,tsx}",
],
@danestves
danestves / keybase.md
Created November 17, 2019 02:08

Keybase proof

I hereby claim:

  • I am danestves on github.
  • I am danestves (https://keybase.io/danestves) on keybase.
  • I have a public key ASCiuOL5Y5Msd_RF7121PPIqA--Is3YArfT_-WbxWAbDWAo

To claim this, I am signing this object:

@danestves
danestves / ¿Extrañas jQuery? Ya no lo necesitas mas.md
Last active September 21, 2019 03:30
¿Extrañas jQuery? Ya no lo necesitas más

¿Recuerdas aquella época donde jQuery era el chico popular de la escuela? 🤩 Pues déjame decirte que esos tiempos ya han pasado 👴.

¿Qué es jQuery?

jQuery es una biblioteca multiplataforma de JavaScript inicialmente creada para que el código que escribimos en Google Chrome pudiera funcionar también en Mozilla, Internet Explorer y todos los navegadores disponibles. Pero eso era antes, actualmente jQuery no es necesario para nuevos proyectos, solo para proyectos legacy.

Ya se que me vas a comentar que aún hay proyectos que utilizan jQuery como lo es Bootstrap y WordPress 🤨, pero hay noticias, hace poco tiempo Bootstrap anunció que su versión cinco vendrá completamente en Vanilla JavaScript, esto quiere decir que ya no necesitarán jQuery en sus dependencias. Y en cuanto a WordPress 🤔 aún no se sabe, pero lo que si es cierto es que están optando por nuevas tecnologías como lo es React en su editor de bloques Gutenberg.