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

Поделиться
HTML-код
  • Опубликовано: 15 янв 2025

Комментарии • 115

  • @sebastianalvarez5674
    @sebastianalvarez5674 4 месяца назад +94

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

    •  4 месяца назад +1

      justo asi me recordó jejeje

    • @fabianalfarolopez7937
      @fabianalfarolopez7937 3 месяца назад

      nada,loco rescatate

  • @percycordova-xb8xv
    @percycordova-xb8xv 4 месяца назад +22

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

  • @user87546
    @user87546 4 месяца назад +10

    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

  • @themacboy9564
    @themacboy9564 4 месяца назад

    Gràcies!

  • @clayman1325
    @clayman1325 4 месяца назад +1

    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!!!

  • @sebastianescorcia3156
    @sebastianescorcia3156 4 месяца назад

    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

  • @kleiberthleal8398
    @kleiberthleal8398 4 месяца назад +1

    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!!

  • @MR-de8mz
    @MR-de8mz 4 месяца назад +1

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

  • @andresflg
    @andresflg 4 месяца назад +6

  • @kresuu3567
    @kresuu3567 4 месяца назад +1

    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

  • @obrianvillasmil4647
    @obrianvillasmil4647 4 месяца назад +1

    Esto es contenido real.!
    Felicitaciones Midu.!

  • @luisgranados9104
    @luisgranados9104 4 месяца назад +19

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

    • @midulive
      @midulive  4 месяца назад +8

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

  • @yomero72
    @yomero72 4 месяца назад +4

    @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
      @Xardimods 4 месяца назад +2

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

    • @walexaindre
      @walexaindre 4 месяца назад +1

      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.

  • @xavier.xiques
    @xavier.xiques 4 месяца назад +3

    Me ha encantado.
    Muy buen trabajo crack.

    • @midulive
      @midulive  4 месяца назад +1

      Gracias Xavi! 🤗

  • @EdSamHW
    @EdSamHW 4 месяца назад +1

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

  • @ivaniclixx
    @ivaniclixx 4 месяца назад

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

  • @santiagoencodigo
    @santiagoencodigo 4 месяца назад

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

    • @midulive
      @midulive  4 месяца назад

      Mil gracias!

  • @ZurdoFTW
    @ZurdoFTW 4 месяца назад +88

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

    • @xfarespondE
      @xfarespondE 4 месяца назад +21

      @@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
      @luismarioramirez2993 4 месяца назад +1

      ​@@xfarespondETotalmente en lo correcto.

    • @axios-xu9gv
      @axios-xu9gv 4 месяца назад +1

      @@ZurdoFTW ya somos 2

    • @LaEsenciadeRespirar...
      @LaEsenciadeRespirar... 4 месяца назад +1

      Por algo se comienza, no? 😅

    • @Xardimods
      @Xardimods 4 месяца назад +2

      No se preocupe, que así comenzamos todos. Xd

  • @brainwareargentina
    @brainwareargentina 4 месяца назад +8

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

  • @daep911
    @daep911 4 месяца назад

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

  •  4 месяца назад +1

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

  • @ricardomejias7957
    @ricardomejias7957 4 месяца назад

    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
      @midulive  4 месяца назад +1

      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

  • @Armandovc29
    @Armandovc29 4 месяца назад +10

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

    • @midulive
      @midulive  4 месяца назад +15

      Me lo apunto :D

  • @adrianmartinez2061
    @adrianmartinez2061 4 месяца назад +1

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

  • @ernestorosas7972
    @ernestorosas7972 4 месяца назад

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

  • @juanfereyes2982
    @juanfereyes2982 4 месяца назад +2

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

  • @DaPaBe1999
    @DaPaBe1999 4 месяца назад +6

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

  • @JuanDavidQuiñonezCeron
    @JuanDavidQuiñonezCeron 4 месяца назад +1

    Midu eres un maestro jedi

  • @jimmymontenegro8517
    @jimmymontenegro8517 4 месяца назад

    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.

  • @luisgranados9104
    @luisgranados9104 4 месяца назад

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

  • @mariron42
    @mariron42 4 месяца назад

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

  • @yorafael
    @yorafael 4 месяца назад

    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.

  • @joanmiquel7738
    @joanmiquel7738 4 месяца назад +1

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

  • @DidierValencia
    @DidierValencia 4 месяца назад

    Muchas gracias estaba esperando este video

  • @luvidev
    @luvidev 4 месяца назад

    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!

  • @bladeboke
    @bladeboke 4 месяца назад

    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?

  • @Oscar-bo6ox
    @Oscar-bo6ox 4 месяца назад +1

    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

  • @RazorBack-ps3cy
    @RazorBack-ps3cy 4 месяца назад

    Ese autocompletado que usa midu es copilot?

  • @RillersxD
    @RillersxD 4 месяца назад

    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?)

  • @HCCristian
    @HCCristian 4 месяца назад

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

  • @Lajy-Enterprise
    @Lajy-Enterprise 4 месяца назад +1

    midu eres un crack

  • @danielraulcespedesnieves8812
    @danielraulcespedesnieves8812 3 месяца назад

    midu que extension usas para poner ese servidor live?

  • @alejololer
    @alejololer 3 месяца назад

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

    • @midulive
      @midulive  3 месяца назад

      One Dark Pro

  • @dasaauploads1143
    @dasaauploads1143 4 месяца назад +1

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

  • @saulsmith21
    @saulsmith21 4 месяца назад

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

  • @joelgs4220
    @joelgs4220 4 месяца назад

    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...

  • @Novel-xl4vs
    @Novel-xl4vs 4 месяца назад

    ¿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.

  • @GiancarloSereni
    @GiancarloSereni 4 месяца назад

    mostrooo. muy bueno midu

  • @MORFO458
    @MORFO458 4 месяца назад +4

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

    • @ieng96
      @ieng96 4 месяца назад

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

  • @kf_11
    @kf_11 4 месяца назад +1

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

    •  4 месяца назад +1

      HACEME ESTO EN MEDIA HORA

  • @DEV_XO
    @DEV_XO 4 месяца назад +1

    GRANDEEEE MIDUUU!

  • @josuegarcianunez6304
    @josuegarcianunez6304 4 месяца назад

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

  • @ivanpardal
    @ivanpardal 4 месяца назад +1

    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.

  •  4 месяца назад

    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
      @baldomero7458 4 месяца назад +1

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

    •  4 месяца назад

      @@baldomero7458 Wooow!! super!!!

  • @godaxel8757
    @godaxel8757 4 месяца назад

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

  • @oxfrimorplay5063
    @oxfrimorplay5063 4 месяца назад

    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.

  • @jorgesaud
    @jorgesaud 4 месяца назад

    No seria mejor un output que un span?

  • @sapito169
    @sapito169 4 месяца назад

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

  • @user87546
    @user87546 4 месяца назад

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

  • @christianpauldiazmorales4355
    @christianpauldiazmorales4355 4 месяца назад

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

    • @iamjulian
      @iamjulian 4 месяца назад

      @@christianpauldiazmorales4355 Se llama Github Copilot

  • @arthduridari7637
    @arthduridari7637 3 месяца назад

    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)
    }

  • @user87546
    @user87546 4 месяца назад

    21:50 con width: inherit lo habia resuelto yo

  • @ricko13
    @ricko13 4 месяца назад

    20:00

  • @RaeWar
    @RaeWar 4 месяца назад

    Próximamente, implementar Doom

  • @edgardo4688
    @edgardo4688 3 месяца назад

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

  • @renp_king_0524
    @renp_king_0524 4 месяца назад

    Hola Midulive

  • @phalcom95
    @phalcom95 2 месяца назад

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

  • @r_bardales
    @r_bardales 4 месяца назад +1

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

  • @eduardogomez4676
    @eduardogomez4676 4 месяца назад +1

    MA-ES-TRO

  • @lluismf
    @lluismf 3 месяца назад +1

    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
      @davidgutierrezperez1886 3 месяца назад

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

  • @diegoandressalcedoromero2733
    @diegoandressalcedoromero2733 4 месяца назад

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

  • @gixarde3
    @gixarde3 4 месяца назад

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

  • @IsmaelCastroC
    @IsmaelCastroC 4 месяца назад

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

    • @bobbyaxelrod7983
      @bobbyaxelrod7983 4 месяца назад +1

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

    • @fran7390
      @fran7390 4 месяца назад

      💀

  • @danconcep
    @danconcep 4 месяца назад

    Te has comprado tu libro 7 veces. XD

  • @jimmymontenegro8517
    @jimmymontenegro8517 4 месяца назад

    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
      @martyrexh1529 4 месяца назад

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

    • @jimmymontenegro8517
      @jimmymontenegro8517 4 месяца назад

      @@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
      @iamjulian 4 месяца назад +1

      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
      @jimmymontenegro8517 4 месяца назад

      @@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.

  • @BraulioCesarH
    @BraulioCesarH 4 месяца назад

    tqm !!!

  • @xcesarx4606
    @xcesarx4606 4 месяца назад +1

    lo hice con ia

  • @rodrieme
    @rodrieme 4 месяца назад

    vi esto sin saber programar y me he mareao

  • @iAzazelHD
    @iAzazelHD 4 месяца назад

    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 ^^

  • @maincolkil5168
    @maincolkil5168 4 месяца назад

    Y es ahora cuando Tiembla microsoft

  • @leogilardi9302
    @leogilardi9302 4 месяца назад

    Midu! Curioso lo que paso con A5 + A4 en este momento ruclips.net/video/z5CRFM2SlUU/видео.html

    • @walexaindre
      @walexaindre 4 месяца назад

      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
    @zhspartan9993 4 месяца назад

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

    • @Xardimods
      @Xardimods 4 месяца назад

      A mover las manos, coño.

  • @elmoster1909
    @elmoster1909 4 месяца назад

    Yolo