#lo hice otra vez de nuevo pero me

1 messages · Page 1 of 1 (latest)

blazing crystal
#

creo hilo

#

amos

#

asi no molestamos

#

avisa cuando me leas y te explico paso a paso como funciona, asi ya te queda para futuro

hoary mesa
#

ya te leo

blazing crystal
#

bien

#

para aplicar una clase

#

a todos los hijos de una etiqueta

#

la sintaxis es asi

#

entre parentesis rectos, ponemos un amperson &

#

que significa, desde donde estamos parado

#

en este caso desde el form

hoary mesa
#

o

blazing crystal
#

[&]

hoary mesa
#

[&]

blazing crystal
#

hasta ahi bien ?

hoary mesa
#

bien

blazing crystal
#

eso es una clase

#

entonces le decimos

#

desde donde estoy parado (el form)

#

quiero que a los

#

lo que vayas a seleccionar

#

lo indicas con mayor que

#

les aplicamos tal cosa

#

entonces esto quedaria asi

#

eso significa, que desde donde estas parado (la clase del form )

#

todos los inputs hijos, les aplicas block

#

esto te ahorra, ir 1 por 1 aplicandole la clase

hoary mesa
#

es decir que los hijos del form van a heredar el block

blazing crystal
#

exacto, mas que herencia, es como una forma rapida de aplicar esa clase a todos los hijos con esa etiqueta

#

por ejemplo podria ser

#

dentro de un <ul> todos los <li>

#

<ul class="[&>li]:text-white"> ....

#

es una herramienta muy util

hoary mesa
#

claro hace que sea mas rapido todo

blazing crystal
#

yes

hoary mesa
#

una pregunta del server de discord

#

eso de subir de nivel en que sirve? xd

blazing crystal
#

supongo yo que en nada

#

escapa a mis conocimiento s

#

se de tailwind tho.

#

😂

hoary mesa
#

le aplique en el form el block pero sigue todo igual los inputs uno del lado del otro

#

he hecho de todo el dia de hoy por ese error

blazing crystal
#

miestrame el codigo please

#

no puedo conectarme a ese tunnel

#

estoy en el trabajo y tienen un firewall especial que destringe esas conecciones

hoary mesa
blazing crystal
#

ok so

hoary mesa
#

ahh ahi cambie el block por flex-nowrap

blazing crystal
#

el form tiene que ser flex

#

y tiene que ser flex-col

hoary mesa
blazing crystal
#

dale un alto aver

#

h-64 o algo asi

#

al form aver que hace

hoary mesa
#

igual

blazing crystal
#

copia y pegame la form aqui

hoary mesa
blazing crystal
#

que yo la pruebo

hoary mesa
#

<form class="flex flex-col h-64 font-semibold [&>input]:block">
<input class="w-max" type="text" id="user" placeholder="Nombre de usuario" >

            <input type="email" id="email" placeholder="Correo electronico">
            
            <input type="password" id="password" placeholder="Contraseña">
            
            <input type="text" id="location" placeholder="Ubicacion">
blazing crystal
#

bien, dame 1 sec

hoary mesa
#

okay

#

ese es el codigo que volvi a hacer yo tengo el codigo desde donde inicio el problema

#

y pedi ayuda de chatGPT y lo hacia pero no le entendia bien lo que hacia y por eso no le preste atencion

blazing crystal
#

ami me salen uno debajo del otro

#

asi que el problema seguro este en el padre, que no tiene un alto

#

osea el padre del form

hoary mesa
#

a mi en el codigo anterios cuando pongo otra dimension se acoplan abajo del otro

blazing crystal
#

eso o, no te esta tomando tailwind xd

hoary mesa
#

el padre del form es el section

blazing crystal
#

ponle al section para probar nomas

#

w-screen h-screen

hoary mesa
#

hizo eso

#

le pongo un flex y flex-col?

blazing crystal
#

al form ?

hoary mesa
#

al section

blazing crystal
#

proba

#

no deveria cambiar en nada

#

tienes mas css por algun otro lado ?

hoary mesa
#

no como descubri tailwind no hice otra carpeta de CSS

blazing crystal
#

bien

#

aver pasame el main entero

#

osea desde la etiqueta main

hoary mesa
#

<main class="w-full max-w-sm">
<section class="bg-black border border-orange-500 w-screen h-screen ">
<div>
<h2 class="font-bold text-center text-2xl text-white mb-4">Registro</h2>
</div>
<form class="flex flex-col h-64 font-semibold [&>input]:block">
<input class="w-max" type="text" id="user" placeholder="Nombre de usuario" >

            <input type="email" id="email" placeholder="Correo electronico">
            
            <input type="password" id="password" placeholder="Contraseña">
            
            <input type="text" id="location" placeholder="Ubicacion">
        </form>
    </section>
</main>
blazing crystal
#

copie y pegue, tal cual me lo pasaste solo que le saque el w-screen y h-screen

hoary mesa
#

bruh no se que pasa

blazing crystal
#

aver lo estoy probando en astro

#

quitale las etiquetas al body

#

aver que hace

#

prueba sacando todas las clases del body, es lo unico que tenemos diferente

hoary mesa
#

quite todas las etiquetas del body y se fue a la esquina izquierda

blazing crystal
#

bien, pero como te muestra el formulario?

hoary mesa
#

inputs al lado de otro

#

lineal

blazing crystal
#

super raro

hoary mesa
#

aunque ya va

#

hace rato estoy tratando de poner el bg-orange-500 y no se pone

#

bueno empece a ponerle el bg orange ahora

#

sera que no esta agarrando tailwind?

blazing crystal
#

como lo tenes instalado?

hoary mesa
#

tailwind CLI

blazing crystal
hoary mesa
#

creo que el tailwind no lo esta agarrando desde temprano

blazing crystal
#

pega eso en el head

#

del html

#

ya vale es que a de estar tomando lo que sea en build

#

que tecnologia usas? o estas con html plano

hoary mesa
hoary mesa
blazing crystal
#

puta bida

hoary mesa
#

nahh era la mierda del tailwind

blazing crystal
#

😂

hoary mesa
#

como hago para inciar el tailwind cuando quiero programar con el

blazing crystal
#

es que, no se usa mucho html solo

#

no se si me explico, ya no se programa asi

hoary mesa
#

eso me paso ayer pero ayer volvi y instale el tailwind y pues no presento problema

blazing crystal
#

osea se escribe html, pero no suelto

#

estas usando npm supongo no?

hoary mesa
#

y voy hice otro html en otra carpeta pues me imagino que dejo de funcionar

hoary mesa
blazing crystal
#

tienes una opcion que es --watch

#

por que, lo que pasa es que

#

cuando tailwind hace el build de lo que tu escribiste, lo transplila a css que en navegador entiende

#

eso solo se hace por comando

#

tienes un archivo .json por ahi ?

hoary mesa
#

si

#

package.json

#

y package-lock.json

blazing crystal
#

muestrame el pachage.json

#

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

#

este comando es el que tienes que correr, para que quede en watch

hoary mesa
blazing crystal
#

en watch significa que, cuando guardas, detencta el cambio y hace el build

hoary mesa
#

ahh pero ese comando yo lo pongo en la terminal para que inicie

blazing crystal
#

si

#

osea cuando lo pones, queda activado

#

si cierras la terminal, supongo qeu tienens que correrlo denuevo. no lo se

#

no uso tailwind asi

#

uso mucho framework

hoary mesa
#

cuando termino el terminal se detiene

blazing crystal
#

aun me quedan 2 horas de trabajo 😦

hoary mesa
#

que haces tu para no trabajar asi como yo

blazing crystal
#

como ?

#

estoy en el trabajo ahora mismo

#

mas no estoy haciendo nada, calentando la silla

#

😅

hoary mesa
#

osea no

#

yo cuando tengo que usar tailwind ayer instale el otra vez tailwind y todo eso y funcionaba bien

#

pero cuando cambie de html a otra carpeta y lo inicie no funcionaba es decir lo que acaba de pasar

blazing crystal
#

es que cuando usas frameworks, es diferente

#

se instala diferente

hoary mesa
#

tu cuando vas a programar en tailwind como haces?

blazing crystal
#

ejemplo en react ?

#

bueno ahora vite creo que tiene opcion vanilla

#

mira te muestro como inicializo una aplicacion con vite

#

Vite si no lo conoces es una herramienta que te ayuda a crear la base de tu proyecto digamos

hoary mesa
#

okay tu no usas html puro tu usas un frame work?

blazing crystal
#

te hace la creacion de carpetas etc

hoary mesa
blazing crystal
hoary mesa
#

y con react tailwind?

blazing crystal
#

en mi trabajo lastimosamente no

#

pero si, tailwind con. todo

#

mira te muestro el paso a paso de como iniciar un proyecto vanilla (sin framework) pero con vite

hoary mesa
#

ok

blazing crystal
#

abrimos la terminal

#

en mi caso cree una carpeta llamada test2 y estoy parado en ella

hoary mesa
#

ok

blazing crystal
#

ejecutamos el siguiente comando npm vite@latest

#

te va a preguntar el nombre de tu proyecto

#

que es basicament el nombre de la carpeta donde estara todo guardado

#

le ponemos test

hoary mesa
#

okay

blazing crystal
#

te va a aparecer una lista de frameworks que puedes elegir, como vue, react, preact etc etc...

#

en nuestro caso, no queremos ninguno

#

asi que usamos la opcion vanilla

#

que es basciamente, sin framework, html css y js

hoary mesa
#

ok

blazing crystal
#

te preguntara, quieres usar typescript o javascript? asumo que no tienes idea de typescript asi que elegimos javascript

#

y listo! ahora solo tenemos que acceder a la carpeta

#

cd test

#

parados aqui, en el proyecto que creamos

#

hacemos code .

#

perdon

#

se me olvidaba

#

antes hay que instalar las dependencias, en vez de code ., acemos npm install

hoary mesa
#

entiendo

blazing crystal
#

despues si, code .

#

si te fijas, ya te hizo un proyecto con archivos de ejemplo y carpetas

#

ahora, en la terminal

#

si te fijas en la plagina de tailwind

#

tienes guias para diferentes frameworks

#

nosotros, como usamos vite para inicializar el proyecto nos interesa ese

hoary mesa
#

claro

#

es una gran diferencia a comparacion de lo mio

blazing crystal
#

ahi te dice los comandos que tienes que usar

hoary mesa
#

yo tuve que hacer carpeta por carpeta

blazing crystal
#

exacto

#

tiene sus ventajas usar este tipo de herramientas

hoary mesa
#

y cuando instale tailwind segun entiendo a mi se me instalo fue en una sola carpeta

blazing crystal
#

pues de ahora en mas, ya sabes inicializar un proyecto con Vite

#

cuando aprendas a usar frameworks de javascript, tambien usaras vite

hoary mesa
#

mira pase el archvio a donde esta instalado tailwind

#

este tipo de errores bajan hasta el auto estima

blazing crystal
#

ya normal

hoary mesa
#

por un momento me estrece y pense que no sabia nada

blazing crystal
#

ahi pusiste el archivo que tenias dentro del proyecto que creaste?

hoary mesa
#

si

blazing crystal
#

bien

hoary mesa
#

astro funciona igual que vite?

blazing crystal
#

mmm no

hoary mesa
#

vi que midu hizo un curso de astro

blazing crystal
#

astro es un framework

hoary mesa
#

okay

blazing crystal
#

vite, es como una herramienta que sirve para setear frameworks

#

astro esta bueno, puede ser tan basico como quieras

#

o tan complejo como quieras

#

lastimosamente hoy en dia, no hay trabajo para eso, asi que si tu idea es conseguir trabajo algun dia

#

me iria directamente por un framework fuerte

#

pues, el unico que esta a flote en el mercado basicamente hoy por hoy es React

hoary mesa
#

yo estoy estudiando analsis y desarrollo de software soy de colombia y pues en el curso nos enseñan lo basico tenemos que ser autodidactas

#

y estoy avanzando a saber mas porque el otro año me tocan mis practicas

blazing crystal
#

bien

#

te enseñan javascript ?

hoary mesa
#

se lo basico pero este tipo de cosas las conocia pero no las usaba

hoary mesa
#

python

blazing crystal
#

un poco de todo !

hoary mesa
#

ya nosotros elejimos el framework con que trabajar

blazing crystal
#

php no lo toco ni con guantes de goma

hoary mesa
#

es desicion de los estudiantes

blazing crystal
#

me parece bien

#

tomaste buena desicion con tailwind

hoary mesa
#

y saber que le gusta y que no

blazing crystal
#

la proxima que tienes que tomar, en el desarollo web

#

sera dejar php

#

y centrarte en js

#

😂

hoary mesa
#

react usa js verdad?

blazing crystal
#

si

#

de una forma distinta, pero si

hoary mesa
#

js lo aprendi a usar bien mi objetivo es aprender react

blazing crystal
#

el concepto de React, es algo diferente

#

en Javascript se interactua con el DOM, modificas objetos del DOM etc

hoary mesa
#

y stack es aprender react tailwind python Django o fastAPI y alguna base de datos

blazing crystal
#

React funciona con un virtual DOM

#

las bases de datos son lo mas faci l

#

por eso ni te estreses

hoary mesa
#

si eso me dice el profe pero no le he prestado mucha atencion

#

pero mientras quiero aprender lo de arriba del desarrollo

blazing crystal
#

te contare la verdad

hoary mesa
#

mas adelante aprendo mas

blazing crystal
#

las bases de datos relacionales, (SQL) son muy parecidas unas con otras

#

aprendes una, y usas cualquiera

#

y las no SQL

#

es basicamente un json

hoary mesa
#

si eso me di cuenta con mongoDB

#

cuando conecte mi api con mongoDB solo tenia que mandarle un js

#

y la base de datos guardaba eso

blazing crystal
#

hoy por hoy, con el Edge y cloud casi todas las empresas usan Azure o AWS

#

pero, tambien tienen sus bases de datosd

#

en azure por ejemplo CosmoDB

hoary mesa
#

bro te puedo escribir al priv para que me ayudes mas adelante

#

con concejos etc

blazing crystal
#

si obvio

#

claro que si parce

#

(?

hoary mesa
#

porque el concejo de [&>input]:block me ayudo bastante

#

a pesar que el error era otro

#

me ayudo

blazing crystal
#

es otro concepto a tener en cuenta a futuro, se usa bastante cuando usas tailwind

#

tailwind es genial, y con react es la bomba

#

por que, react componetiza todo

hoary mesa
#

ya te mande la soli

hoary mesa
#

puedes hacer bastante cosas

#

yo uso fastAPI para backend pero vi Django en una clase y es otra cosa

#

react tailwind y python como backend es un stack god

#

eso me emociona bastante saber usar esas tecnologias

blazing crystal
#

pues si te soy honesto

#

no uso python

#

el backend que e echo a sido con javascript

#

o serverless, con javascript

hoary mesa
#

entendible es que a mi el python me lo mostraron hasta por los ojos y por eso me gusta

#

porque lo manejo bien

blazing crystal
#

ya

#

yo, no veo una diferencia sustancial

#

como para aprenderlo

hoary mesa
#

claro

blazing crystal
#

osea, prefiero hacer un backedn con expres.js

hoary mesa
#

aceptable

blazing crystal
#

si supiera python en profundidad, capaz lo haria con Django

hoary mesa
#

oye que otros framework como vite hay?

blazing crystal
#

si tuviera que aprender un lenguaje de backend, me gustaria Go

blazing crystal
hoary mesa
#

okay

#

bro me tengo que ir voy a hacer ejercicios

#

mañana te hablo por cualquier duda o explicacion que necesite

blazing crystal
#

aqui estare si cualquier cosa precisas

hoary mesa
#

listo bro

#

gracias por todo

#

bye

hoary mesa
blazing crystal
#

cmd, powershell, warp

#

depende que uses

hoary mesa
#

y ese diseño de colores como los haces

#

la mia sale blanco y negro xd

blazing crystal
#

asi es en warp

hoary mesa
#

ahhh

blazing crystal
#

es una terminal de

#

Mac

hoary mesa
#

en window tambien se puedes descargar?

blazing crystal
#

creo que por ahora es esclusiva de Mac

hoary mesa
blazing crystal
#

esa es

#

pero no esta para windows aun

hoary mesa
#

ahhh si

#

cuando doy descargar sale solo para mac

#

bueno toca el diseño feo del cmd o powershell

#

que mac usas tu?

blazing crystal
#

pues la que me dieron en el trabajo

#

en casa uso windows

hoary mesa
#

de donde eres por cierto?

blazing crystal
#

soy de uruguay

#

pero vivo hace años en nueva zelanda

hoary mesa
#

trabajas allá?

blazing crystal
#

puees

#

si vivo aqui normal que trabaje aqui xd

hoary mesa
#

no a lo mejor no xd

#

trabajas en frontend o backend? supondria que front

blazing crystal
#

full stack

#

hago un poco de todo

hoary mesa
#

ohhh entiendo

blazing crystal
#

y en breves iOS

hoary mesa
#

como hiciste para trabajar allá? es dificil conseguir esos trabajos no?

#

tienes muchos años de experiencia?

blazing crystal
#

pues soy programadior desde hace poco, consegui mi residencia trabajando en el campo

hoary mesa
#

hablas ingles bien?

#

tu me podrias ayudar mas adelante a practicar mi ingles :/

blazing crystal
#

si claro

hoary mesa
#

ya estoy viendo videos de vite para aprender a usarlo

#

next.js funciona como vite porque veo comparaciones y no se si sirven para lo mismo

blazing crystal
#

muchas cosas funcionan con vite

hoary mesa
#

claro pero voy a ver unos videitos de vite pero primero debo saber bien react y tailwind para avanzar en vite

blazing crystal
#

vite no hay que aprender nada

#

es una herramienta, que la usas sin saber mucho

hoary mesa
#

falta el diseño de el Inicio de sesion pero el de registro ya esta

#

aunque la interfaz principal quiero ponerle un color asi como el del hover pero a la palabra ilegalidad