Resuelvo PRUEBA TÉCNICA con JavaScript: Clon de Excel DESDE CERO

[@sebastianalvarez5674]

1:33:35 ".... y ahora te toca a ti" Vibes de ArtAttack, gracias por tanto Midu

justo asi me recordó jejeje

[@fabianalfarolopez7937]

nada,loco rescatate

[@percycordova-xb8xv]

Eres demasiado megaCRACK, cosas imposibles lo haces ver tan sencillo !!

[@user87546]

1:15:32 Hay que volver a hacer algún blur para que se actualice la útlima. Por eso A5 + A4 te dió 25 cuando debía ser 26

[@clayman1325]

MiduGenioDev GRACIAS justo me sirve para un Reporte de statements que tengo que hacer para el trabajo esta semana y la etiqueta de tabla me estaba dando dolores de cabeza SOS Messi del desarrollo web Gracias!!!

[@kleiberthleal8398]

Buen video midu, yo estoy aprendiendo css3 y he aprendido a maquetar mas o menos bien para luego dar el salto a js, poco a poco aprendiendo en este magnifico mundo del desarrollo. Un saludo midu tus videos me enseñan mucho!!

[@sebastianescorcia3156]

Gracias a ti midu, desde que me vi el video de cómo empezaste en la programación le he puesto más ganas de seguir en esta hermosa disciplina y arte que es la programación de verdad que no te nos vayas nunca midu. Dios te bendiga

[@luisgranados9104]

Creí que era el stream perdido de Excel, pero igual está god ya que está actualizado jeje

[@midulive]

Y sólo con JavaScript. ;) Yo creo que este es incluso mejor!

[@MR-de8mz]

Increíble como siempre Midu, gracias por compartir tu conocimiento de tal manera que sea tan entretenido!

[@andresflg]

[@yomero72]

@Midu, en el minuto 1:15:24 cambiaste el valor de la primera celda y ya no hizo bien la suma. Habría que hacer una función que se ejecute cada vez que cambia el texto de una celda de tipo operación para que funcione al 100%. De todas formas te rifaste con todo lo hecho y nos has dado una excelente lección de js, gracias!

[@Xardimods]

Pensé que era el único que se dió cuenta. Y sí, Midu se la rifó con esta.

[@walexaindre]

Creo que hay que repensar mas esa idea ya que las dependencias entre las celdas no es facil de saber de antemano. En general debe construirse un arbol o lista que enlace los valores conocidos con las dependencias y entonces hacer el calculo. En el caso de midu el hace el calculo por filas sin importar la dependencia de las formulas y por eso no se actualiza correctamente. Si por ejemplo tienes A1 = 1, A2 =2, A3 =3 y defines A4 = A1+A2, A5 = A3+A4 y A6 = A1+A5 Entonces debes construir una estructura que te defina el orden correcto. Imaginemos que por ejemplo A4, A5 y A6 son 0 en el estado previo. Para que esto sea calculado correctamente la unica forma posible es que hagas A4 => A5 => A6 Cualquier otro orden te va a generar resultados erroneos.

[@obrianvillasmil4647]

Esto es contenido real.! Felicitaciones Midu.!

[@ZurdoFTW]

Yo aquí viendo esto sin tener ni idea de programación lol

[@xfarespondE]

@@ZurdoFTW es la mejor forma de comenzar y sigue así 🍀 Todos fuimos a la escuela si saber leer y escribir es solo cosa de tiempo. Exito

[@luismarioramirez2993]

​@@xfarespondETotalmente en lo correcto.

[@axios-xu9gv]

@@ZurdoFTW ya somos 2

[@LaEsenciadeRespirar...]

Por algo se comienza, no? 😅

[@Xardimods]

No se preocupe, que así comenzamos todos. Xd

[@kresuu3567]

Teniendo el VSCode abierto con cualquier video de otro creador, me acabo durmiendo y lo cierro sin terminar el proyecto. Con midu es totalmente diferente, la velocidad a la que explica las cosas es perfecta para no dormirte si ya lo sabes, pero para entenderlo bien si no sabes lo que explica. Hora y media de proyecto y me lo he fumado enterito, sin ningún problema. Vaya alivio haber encontrado este canal hace un par de meses

[@xavier.xiques]

Me ha encantado. Muy buen trabajo crack.

[@midulive]

Gracias Xavi! 🤗

[@olavgausaker1]

No sé cómo nadie ha creado una consultora en la que todas las tareas estén distribuidas como pruebas de código para entrevistas, de manera que los programadores que hicieran las entrevistas estarían realizando esas tareas sin saberlo.

[@Hector.Pulido]

Muchas ratas, digo empresas te piden pruebas técnicas que luego usan en su propio producto

[@vanstrouble]

Exacto. Como que en las pruebas técnicas ya no saben que inventar.

[@nxx.p]

A mí me pasó. Me pidieron hacer con Javascript un vehículo eléctrico y a los meses nació Tesla. ¿Casualidad?

[@papasligeramentesaladas8514]

Varias empresas ya se dedican a eso

[@santiagoencodigo]

Me encanto iniciar mi dia con este video, lo mejor!

[@midulive]

Mil gracias!

[@ivaniclixx]

Este ejercicio ha estado chulo. Muchas gracias por el rato Midu !

[@ricardomejias7957]

1:03:02 hay una sintaxis relativamente nueva para crear scopes nuevos y evitar estos conflictos: { const A1 = 4; const A2 = 5; return A1 + A2; // Returns 9 } Basicamente es la misma sintaxis ya existente para bloques if, for, while, functions, etc etc. Simplemente abrir y cerrar llaves :)

[@midulive]

Esa sintaxis es más vieja que el andar para adelante 😅 pero es verdad que con let y const puede tener ahora más sentido

[@daep911]

Increíble, muy interesante y se aprendió varios trucos 🎉

[@jimmymontenegro8517]

Consulta, hay alguna razón, más allá de la preferencia válida para buscar lo más posible hacerlo en declarativo? Yo voy mucho por la otra línea (porque así aprendí) y se me hace muy claro y lógicos los pasos. Saludos y gracias por tu trabajo.

[@DaPaBe1999]

Lamentable estuve creando un excel los ultimos 4 meses en react + tauri y recien ahora sale este video 😢

[@EdSamHW]

Odiaba programar y siempre fui del lado de infra, pero estoy stackeando full en JS ahora gracias a vos Midu.

[@ernestorosas7972]

Sos un crack, ojala puedas subir el codigo a un repositorio te lo agradeceremos infinitamente para practicar, te vemos desde Guadalajara, Mexico!!

[@brainwareargentina]

A donde te envío la camisa de fuerza? Tu estás loco! :D

está padrisimo, tienes algun curso de Javascript nativo para poder estar a este nivel? La verdad aprendí muchisimo

[@mariron42]

Está genial, yo hubiera hecho alguna especie de interfaz gráfica que use pandas debajo del capó

[@JuanDavidQuiñonezCeron]

Midu eres un maestro jedi

[@Armandovc29]

midu podrias enseñar hacer un cortador de imagenes con html css y js puro.

[@midulive]

Me lo apunto :D

[@adrianmartinez2061]

Excelente video.. no entendi casi nada, pero excelente el tutorial 🤗

[@yorafael]

Muy bueno el video. Me has animado a probar. Sería bueno saber como se pasa estos datos a un fichero o base de datos desde javascript.

[@DEV_XO]

GRANDEEEE MIDUUU!

[@luisgranados9104]

45:07 ese truco no me lo sabía 🤯

[@juanfereyes2982]

Que crack! Y yo peleando con el juego de la vida :(

[@Lajy-Enterprise]

midu eres un crack

[@luvidev]

1:15:37 MIDU! porque cuando pones en la celda B1 '=A5+A4' que en ese momento los valores son A4=4 y A5=21 te devuelve el valor en la celda B1= 25 pero automaticamente te cambia el valor de A5 a 22 sin modificarte el valor de B1. Saludos Midu querido!

[@Oscar-bo6ox]

Podrías construir un editor basico de pdf con javascript u otro lenguaje? He estado intentando con Python pero me he quedado corto. Básicamente para cortar, dividir y organizar páginas. Paaáaaaaaar favaaaaaaasr

[@joanmiquel7738]

Aqui se ve un programador, somos humanos Pero como en toda la historia hay gente que soluciona problemas, sin ningun interes personal 👍

[@HCCristian]

Eso demuestra que hay casos de uso para los 'table' aunque a muchos no les guste.

[@MORFO458]

Yo creando un editor de video con Javascript, node.js y react utilizando ffmpeg, mi próximo reto sera un excel con react

[@ieng96]

Justo ayer había creado una app de escritorio usando ffmpeg, me lo recomendó chatgpt, es buenísimo.

[@arthduridari7637]

Para crear las tablas AA AB AC Etc... yo he hecho lo siguiente: const MAX_COLUMNS = 26 let countLeftLetter = 0 let countRightLetter = 0 const range = length => Array.from({ length }, (_, i) => i) const getColumns = column => { if (column >= MAX_COLUMNS) { const leftLetter = FIRST_CHAR_CODE + countLeftLetter const rightLetter = FIRST_CHAR_CODE + countRightLetter countRightLetter++ if (countRightLetter >= MAX_COLUMNS) { countRightLetter = 0 countLeftLetter++ } return String.fromCharCode(leftLetter) + String.fromCharCode(rightLetter) } return String.fromCharCode(FIRST_CHAR_CODE + column) }

[@DidierValencia]

Muchas gracias estaba esperando este video

[@saulsmith21]

yo por eso respeto MUCHO a los front end devs, me muero con el diseño

[@GiancarloSereni]

mostrooo. muy bueno midu

[@themacboy9564]

Gràcies!

[@RillersxD]

Buenas, he descubierto hace poco tu canal que me esta resultando muy util ahora que quiero conseguir mi primer trabajo tras la uni y estoy terminando unos cursillos de desarrollo web. Una duda que me surge al ver tu codigo es por que no usas las llaves ( { y } ) en tu codigo, como si fuese python o algo asi, entiendo que son addons de visual studio pero no te resulta mas lioso? Se gana realmente algo asi? Muchas gracias (PD: Lo mismo con los ; xddd, a lo mejor para la gente que empieza podria ser mas lioso, no?)

[@dasaauploads1143]

La proxima prueba para desarrollar Windows XP, se tienen que ganar ese salario en dolares xD

[@alejololer]

Que tema de VSCode usa Midu? Me encanta como funciona la barra lateral

[@midulive]

One Dark Pro

quedaría asi, si quieres que pasando la Z, empiece a contar desde AB, AC, AD, y luego BA, BB, BC, BD y así hasta llegar a la Z: const getColumn = i => { let quotient = Math.floor(i / 26); // Cociente de i dividido por 26 let remainder = i % 26; // Resto de i dividido por 26 let letterColumn = ''; if (quotient > 0) { letterColumn += String.fromCharCode(FIRST_CHAR_CODE + quotient - 1); } letterColumn += String.fromCharCode(FIRST_CHAR_CODE + remainder); return letterColumn; }

[@baldomero7458]

Aqui lo mismo pero en una linea const getColumn = (n, letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ") => (letters[parseInt(n/letters.length) -1] || "").concat(letters[n%letters.length])

@@baldomero7458 Wooow!! super!!!

[@danielraulcespedesnieves8812]

midu que extension usas para poner ese servidor live?

[@Novel-xl4vs]

¿La prueba tecnica bastaba con que se sumen los datos o hasta aplicar formulas? No me sabia la del "eval", para crear lógica atraves de texto.

[@bladeboke]

Buenas ,estoy empezando y me están enseñando que tanto el css como jscripr se debe hacer a parte y hacerlo con link, tu longares todo dentro de la misma pestaña no?

[@joelgs4220]

yo estoy desarrollando un sistema tambien con uso de table pero en ciertas celdas donde se require ingresar valores, al da click automatico selecciona el valor existente y se puede sobre escribir un nuevo valor tal como en excell, en el ejemplo de este video al dar click en la celda no selecciona el valor existente sino que el cursor queda atras de el lo que hace la interfase un poco mas lento...

[@RazorBack-ps3cy]

Ese autocompletado que usa midu es copilot?

[@kf_11]

- Un RH con la realidad completamente alterada: Excelente haré esta prueba a un junior 😊 De todos modos muy buena explicación MiduGOD 🗿

HACEME ESTO EN MEDIA HORA

[@BraulioCesarH]

tqm !!!

[@phalcom95]

Recién me vengo a enterar lo del type=module

[@godaxel8757]

Como se hacen los crm con bases de datos que los propios usuarios pueden crear? haz un video de un mini crm plz

[@sapito169]

midu cuando seas grande te vas a enterear que te olvidaste del algoritmo topopological sort para que funcionae en cualquier orden

[@user87546]

21:50 con width: inherit lo habia resuelto yo

[@eduardogomez4676]

MA-ES-TRO

[@gixarde3]

Lo admito, cuando empecé a aprender HTML usaba las tablas como div 😔

[@josuegarcianunez6304]

Como se llama el programa o extensión que utiliza para visualizar el output del código de JS?

[@renp_king_0524]

Hola Midulive

[@lluismf]

La gracia del Excel son las formulas, eso requiere escribir un parser para compilarlas y un grafo para evaluarlas. No es para nada trivial.

[@davidgutierrezperez1886]

exacto, la gente se piensa que por hacer que la UI se parezca está hacienod un clon

[@oxfrimorplay5063]

1:15:38 A5 cambió de 21 a 22, la operación estaba mal sumada, y eso hizo que el resultado en B1 quedara mal.

[@ricko13]

20:00 ⏳

[@RaeWar]

Próximamente, implementar Doom

[@ivanpardal]

Cuando dices que Excel lo coloca al final y se añade el contenido al existente no es cierto, Excel cuando entras selecciona todo y si cambias modificas el contenido.

[@diegoandressalcedoromero2733]

Ami me gsutan mucho las tablas, me adpate a ellas para hacer sistemas de registros y de recuperacion de datos

[@xcesarx4606]

lo hice con ia

[@edgardo4688]

lo hice con vb hace años, recuerdo que el problema que tuve es con las formulas recurrentes..

[@jorgesaud]

No seria mejor un output que un span?

[@christianpauldiazmorales4355]

Como se llama esa extension que te recomienda o sugiere completar el codigo ?

[@iamjulian]

@@christianpauldiazmorales4355 Se llama Github Copilot

[@IsmaelCastroC]

Me robo esta prueba para cuando entren juniors a la empresa xD

[@bobbyaxelrod7983]

Si fuera para juniors no le habrían pedido a un ex desarrollador de google hacerla.

[@fran7390]

💀

[@danconcep]

Te has comprado tu libro 7 veces. XD

[@user87546]

1:07:10 hasta ahora no terminé de entender bien la necesidad del newState en lugar de modificar directamente STATE.

[@r_bardales]

para q puesto era, cuanto era el sueldo? semejante prueba...

[@jimmymontenegro8517]

Otra duda, para quiénes sepan (a medida que analizo el video me surgen más) Si una función se autoinvoca, no es lo mismo que poner un bloque de código sin envolverlo en dicha función? yaque el puntero irá bajando y va a ejecutar ese código de igual modo :(

[@martyrexh1529]

Te refieres a que una función se llame a sí misma dentro de la propia función?

[@jimmymontenegro8517]

@@martyrexh1529 no no no, mira: funcion autoinvocada(){ hacer algo} vs hacer algo esa función autoinvocada, entra y hace lo que se le pide, el código sin envolver en función también lo hace, y como es función de una sóla vez, no será reutilizada. Por ese motivo es que no entiendo bien su utilidad, más allá de envolver algo y dar cierto "orden". :(

[@iamjulian]

Si bien una función autoinvocada funciona casi igual a dejar el código afuera sin función, Midu lo prefiere implementar la función autoinvocada debido a su Scope, esto hace que las variables declaradas dentro solo existan dentro de la función y no afuera, cosa que es ideal para evitar sobreescritura de variables externas.

[@jimmymontenegro8517]

@@iamjulian Ya, bien bien, ahí hay una respuesta que me hace sentido, por ese camino puede que haya cosas de manejo de memoria tal vez. Gracias.

[@maincolkil5168]

Y es ahora cuando Tiembla microsoft

[@rodrieme]

vi esto sin saber programar y me he mareao

[@iAzazelHD]

Uff no me ha gustado nada el generateCellConstants. Me parece muy feo ajjajaajaj. Yo lo que habria hecho es usar regex, aunque quiza tambien en mucho (?) La cosa es que para una celda particular, no necesitas saber lo que valen TODAS las demas celdas, solo las que aparecen en esa formula, y tambien sabes que la celda A1 es la posicion (1,1) de la matriz. Claro, la cosa seria saber cuando A1 se refiere a una celda y cuando no. Y por eso habia pensado en regex de primeras. Si existe algo que haga match con [A-Z]+[1-9][0-9]* (esta seria la regex buena, que te hace match tanto con B5, como con AQW8956, y si es asi, sabes que es una celda, y pues la recuperas con el computed value. Si no otra regex mas facil es simplemente [A-Z][1-9], que coge celdas desde A1-A9 hasta Z1-Z9). No sé, le daré un par de vueltas, porque honestamente me parece que innecesario calcularte todos los values de todas las celdas. Si se me ocurre otra forma mas clean te la digo ^^

[@leogilardi9302]

Midu! Curioso lo que paso con A5 + A4 en este momento kzbin.info/www/bejne/sGamg3mDZ7ifi7c

[@walexaindre]

El orden de la suma es importante y habria que hacer mas cosas para que sea correcto Si tienes A1 = 2, A2 = 3, A3 = A1+A2 y A4 = A2+A3 Si el valor previo de A3 es 0 y se ejecuta A3 primero y luego A4 entonces el valor es esperado: A3 = 2+3 = 5 y luego A4 = 3 + 5 = 8 pero si lo haces a lo contrario entonces tienes A4 = 3 + 0 y luego A3 = 5. Entiendo que en el caso de Midu los calculos se actualizan por fila, por lo que la actualizacion no se hace en el orden correcto. La forma de actualizarlo correctamente podria ser mas complicada de lo que parece ya que deberia construirse un arbol o lista con las dependencias de los calculos y hacerlos en un orden concreto.

[@zhspartan9993]

Primero pruebas de leetcode, sql, "mini" proyecto y ahora excel, por favor midu borra el video, ya tengo suficiente con que practicar D':

[@Xardimods]

A mover las manos, coño.

[@elmoster1909]

Yolo